計數器

計數器是儲存特定事件或過程發生次數的裝置，通常與時間週期有關聯。最常見的類型是經由輸入和輸出線的時序邏輯電路，每次施加到的脈衝使計數容器增加或是減少。計數器在數位電路中使用非常廣泛，會製成積體電路晶片成為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(); %>

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

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>