計數器

計數器是儲存特定事件或過程發生次數的裝置，通常與時間週期有關聯。最常見的類型是經由輸入和輸出線的時序邏輯電路，每次施加到的脈衝使計數容器增加或是減少。計數器在數位電路中使用非常廣泛，會製成積體電路晶片成為3C用品的一部分。程式設計領域則是利用各種輔助記憶體作為容器取代積體電路晶片，以CPU運算的各種計數器技術通常則是以文字做為主要的儲存方式，

計數器的原理其實非常簡單，其實不需要太多的深入探討。
本篇的目的主要是介紹網頁中的「GET」用法，利用資料庫來實作計數器。

透過網址列傳遞參數 - GET

有時不經意注意到瀏覽器的網址列顯示冗長的文字，通常穿插著「?」、「&」、「=」符號。這種方式就是「GET」，以明碼方式把使用者下達的參數透過網址後面的連接符號表達。這種方式不但在瀏覽器中會留下記錄，凡經過的網路節點都能夠看見甚至修改當中的值。看以非常不安全，但是好處就是使用上非常方便。其實只要不要傳送或執行會影響個人權益的資料，GET在使用上也不至於會造成損失。首先請在專案的WebContent資料夾中建立「ch02.jsp」，複製下列程式碼。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="org.sqlite.*"%>
<%
request.setCharacterEncoding("UTF-8");                  //將輸入編碼設定為UTF-8
response.setCharacterEncoding("UTF-8");                 //將輸出編碼設定為UTF-8
SQLiteConfig cfg = new SQLiteConfig(); 
SQLiteDataSource ds = new SQLiteDataSource(cfg); 
ds.setUrl("jdbc:sqlite:E:\\joop\\my.db"); //請選擇資料庫連線位置
String sql;//重複使用的SQL查詢變數
Statement stat;//資料庫發送指令變數
stat = ds.getConnection().createStatement(); 
try{
 stat.executeUpdate("INSERT INTO counter(id, total)VALUES(null, 1)");
}catch(Exception e){
 System.out.println(e);
 stat.executeUpdate("UPDATE counter SET total=total+1 WHERE id=null");
}
  
sql="select * from counter";
ResultSet rs = stat.executeQuery(sql);
%>
<!--DOCTYPE html--> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%while(rs.next()){%>  
名稱: <%=rs.getString("id")%>
  
次數: <%=rs.getString("total")%>
<hr> 
<%}
rs.close();
stat.close(); %>

以上程式碼建立完成後請啟動偵錯伺服器，在網址列輸入以下網址。

1	`http://127.0.0.1:8080/josp/counter.jsp?id=102123456`

網頁程式會依據「?」後面的參數名稱，以及「=」後面的參數讀取並請程式做相應的處理。程式的處理動作就是將做適當的判斷，將資料寫入資料庫中正確的欄位。

在網頁中的實際應用

當瞭解計數器的運作方式之後，接下來試著應用在首頁。請在專案的WebContent資料夾中打開「index.jsp」，複製下列程式碼。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="org.sqlite.*"%>
<%
        request.setCharacterEncoding("UTF-8");//將輸入編碼設定為UTF-8
        response.setCharacterEncoding("UTF-8");//將輸出編碼設定為UTF-8
        SQLiteConfig cfg = new SQLiteConfig();
        SQLiteDataSource ds = new SQLiteDataSource(cfg);
        ds.setUrl("jdbc:sqlite:E:\\joop\\my.db");//資料庫連結路徑
        String sql;
        Statement stat;
        stat = ds.getConnection().createStatement();
        //隨機建立動態資料庫
        try {
                //sql = "CREATE TABLE counter (id string, total integer, PRIMARY KEY(id));";
                //stat.executeUpdate(sql);
                sql = "INSERT INTO counter(id, total)VALUES('0', 0);";
                stat.executeUpdate(sql);
        } catch (Exception e) {}
         
        //計數器動作
        sql = "DELETE FROM counter WHERE id !='0'";
        stat.executeUpdate(sql);
        sql = "UPDATE counter SET total=total+1 WHERE id ='0'";
        stat.executeUpdate(sql);
        sql = "select * from counter WHERE id ='0'";
        ResultSet rs = stat.executeQuery(sql);
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
        <div class="navbar navbar-static-top">
                <div class="navbar-inner">
                        <div class="container">
                                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </a>
                                <a class="brand" href="index.jsp">我的學習歷程</a>
                                <div class="nav-collapse collapse">
                                        <ul class="nav">
                                                <li class="active"><a href="#">首頁</a></li>
                                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                                        data-toggle="dropdown">課程選單 <b class="caret"></b></a>
                                                        <ul class="dropdown-menu">
                                                                <li><a href="temp.jsp">裝飾器</a></li>
                                                                <li><a href="ch02.jsp">計數器</a></li>
                                                                <li class="divider"></li>
                                                                <li class="nav-header">期中</li>
                                                                <li><a href="ch03.jsp">BBS</a></li>
                                                                <li><a href="ch04.jsp">討論區</a></li>
                                                                <li><a href="#">大樂透開獎</a></li>
                                                                <li class="divider"></li>
                                                                <li class="nav-header">期末</li>
                                                                <li><a href="#">問卷/投票</a></li>
                                                                <li><a href="#">購物車</a></li>
                                                        </ul></li>
                                                <li><a href="#">筆記1</a></li>
                                                <li><a href="#">筆記2</a></li>
                                        </ul>
                                </div>
                        </div>
                </div>
        </div>
        <div class="container">
 
                <div class="page-header">
                        <h1>
                                <%while (rs.next()) {%>
                                        次數:<%=rs.getString("total")%>
                                <%}
                                        rs.close();
                                        stat.close();
                                %>
                        </h1>
                </div>
                <p class="lead">JSP可用於網頁應用程式開發的前端，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、選單和
                        Javascript動態擴充。與之對應的「後端」是在伺服器上面執行的程式碼框架，JSP也能以簡單的語法提供絕大部份的應用所需。</p>
                <p>此 <a href="#">網站</a> 為學習JSP過程中的課程範例的學習歷程,</p>
                <div class="page-footer">
                        <p class="muted credit">
                                內容是由 <a href="#">中華科技大學</a> 資管系 <a href="#">10X14D0XX同學</a> 建立
                        </p>
                </div>
        </div>
</body>
</html>