崑 山 科 技 大 學

電腦與通訊系 四技部

專 題 製 作 報 告

行動會議報到系統

學生： 王 盈 惟(4010D042)

指導老師： 陳 國 泰

中 華 民 國 一 零 五 年 六 月

摘 要

在高科技的時代，如何有效的讓這些智慧系統融入到我們的生活

當中，是未來生活的一個趨勢。

可用於報到的方法眾多。例如:紙張簽到、RFID卡簽到、利用手機

NFC功能簽到等。

紙本簽到費力費時，遇到大型活動，報到台大排長龍，RFID 卡簽

到需另付製卡成本及設法在報到前將卡片遞送到每位參加者手上，而

利用手機 NFC功能簽到卻礙於仍有許多手機沒有 NFC功能。

本專題主要利用 HTML 以及 PHP&MySQL 網頁技術，以電腦與通訊

系為例製作活動報名網站，並結合 QR Code 讓每位報到者，只需要顯

示手機下載的 QR Code，就可完成報到。可支援各種行動裝置。例如:

手機、平板等，達到省時和節能減碳的好處。

誌 謝

本專題報告得以順利完成，首先感謝我的指導教授陳國泰老師及

圖書館員董家良老師細心的引導、耐心的協助，並且不厭其煩的和我

討論本專題的細節，並且提供寶貴的意見，讓本專題得以順利完成。

最後，也感謝這四年來所有教授的指導，讓我有更深的認識及學

習到許多的專業的內容，也感謝系上諸位老師各領域的熱心教導，在

此一併致上最高的謝意。

i

目 錄

頁次

摘要

誌謝

目錄 i

圖目錄 iii

表目錄 v

第一章緒論

1.1 研究背景 1

1.2 研究動機與目的 2

第二章 文獻探討

2.1 紙張議題 3

2.2 QR Code解決 4

第三章 系統架構和元件介紹

3.1 系統架構 5

3.2 系統流程 6

3.3 軟體介紹 8

3.4 系統設計與實作 16

ii

第四章 成果與未來展望

4.1 研究成果 27

4.2 未來展望 31

第五章 結論 32

參考文獻 33

iii

圖 目 錄

頁次

圖1.1 活動網站 1

圖2.1(a) 2010年紙張議題 3

圖2.1(b) 使用QR code原因 4

圖3.1 系統架構圖 5

圖3.2(a) 後端程式流程 6

圖3.2(b) 前端和接收端程式流程 7

圖3.3(a) HTML 8

圖3.3(b) PHP&MySQL 9

圖3.3(c) XAMPP 10

圖3.3(d) JavaScript 11

圖3.3(e) QR Code 12

圖3.3(f) Bootstrap 13

圖3.3(g) Eclipse 15

圖3.4 APP介面 19

圖4.1(a) 電腦版網頁圖 27

圖4.1(b) 手機版網頁圖 27

iv

圖4.1(c) 填寫資料 28

圖4.1(d) 取得QR Code 28

圖4.1(e) 手機端掃描QR Code報到 29

圖4.1(f) MySQL資料庫 30

圖4.1(g) MySQL資料庫統計圖 30

v

表 目 錄

頁次

表3.1 Bootstrap優缺點 14

表3.2 資料庫資料表清單 16

1

第一章 緒論

1.1 研究背景

本專題為了打造一個專屬於崑山科技大學電腦與通訊系的網站與

推廣科系的重要性，不論是在校學生，或是校外人士都能透過網路了

解電腦與通訊系的動態與活動，更進一步報名參與活動，而製作這一

個網站，經過網路即可更深入了解到崑山科技大學電腦與通訊系，而

達到宣傳的效果。

圖1.1 活動網站

2

1.2 研究動機與目的

以往辦活動總是需要大力宣傳，並且印製大量的報名表、簽到表、

海報……等，浪費許多紙張資源，花費許多人力、時間來準備活動，

以便能在社團展示時，發揮其效能。

隨著科技的進步與手機的普及，在這個忙碌的社會裡時間是非常

寶貴的，我們將手機運用在省時、省力與響應綠色科技的議題上。

研究的動機與目的即是節省那些因報名時以及報到而浪費的時間。

為此我們將利用網頁技術(HTML&PHP)結合資料庫(MySQL)來製作一個

報名系統搭配QR Code，讓報名者報到時，僅需要開啟手機上下載的QR

Code，即可完成報名完成，如此一來將使活動整體有所提升。

3

第二章 文獻探討

2.1紙張議題

雖然電子郵件、社群媒體、線上儲存越來越無所不在，但估計每

位人平均每年仍會用掉 1 萬張紙，列印錯誤的文件和難以找到的書面

資料也浪費了人力與時間。達成「無紙化」真的很困難嗎？1TB空間可

以儲存 5 億張紙的內容，現實生活中，150 頁的員工手冊只用不到 4G

隨身碟的 7.5%，一整個文件櫃的資料也只要用到 60%。以下還有更多

統計數據：究竟用了多少紙張？2010 年，美國產生 526 萬噸的紙張垃

圾，這個重量相當於 23,377座自由女神像。

圖2.1(a) 2010年紙張議題(引用數位時代)

4

2.2 QR Code解決

根據東方快線網絡市調，2013年上半年熱門QR Code的被掃描數比

前二年增加許多，這表示消費者已經知道並且了解掃描QR Code是可以

獲得資訊或優惠。在十大熱門QR Code，有業者不只一個QR Code入選，

這意謂實體門市活動配上活動優惠，再運用QR Code與行動裝置，將可

成功地把客人引導至門市消費。因此QR Code不再只是DM上小角落的網

址，它可以是讓活動成功的要角，是串起實體與虛擬的重要橋樑。

只要拿起手機並打開QR Code的程式或軟體，將鏡頭對著QR Code

圖案掃瞄，即可透過網路連結到行銷者想提供的文字、圖像資訊或網

路頁面，並可將QR Code儲存在手機裡，節省輸入網址的麻煩，也能夠

放置優惠卷讓使用者下載。這種快速反應及快速獲取訊息的特色，是

QRCode 的最大優勢，若能將其應用在活動報到上，將有助於提升活動

的效益。

圖2.1(b) 使用QR code原因(引用東方快線網絡市調)

5

第三章 系統架構和元件介紹

3.1 系統架構

本專題製作主要是利用網頁技術，開發行動活動報名與報到系統，其

工作流程圖如圖 3.1所示。

圖 3.1 系統架構圖

WEB網站設計

支援各種行動裝置(報名)

產生 QR code

APP(掃描讀取)

6

3.2 系統流程

詳細的程式流程如圖 3.2所示

(一) 後端程式流程

圖 3.2(a) 後端程式流程

7

(二) 前端和接收端流程

圖 3.2(b) 前端和接收端程式流程

8

3.3 軟體介紹

這個章節首先將使用到的軟體及工具程式做概述。

(1)HTML

圖 3.3(a) HTML(引用 tutorials-all)

超文件標示語言（英語：HyperText Markup Language，簡稱：HTML）

是一種用於建立網頁的標準標記式語言。HTML 是一種基礎技術，常與

CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁

應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取 HTML

檔案，並將其彩現成視覺化網頁。HTML 描述了一個網站的結構語意隨

著線索的呈現，使之成為一種標記式語言而非程式語言。

HTML 元素是構建網站的基石。HTML 允許嵌入圖像與物件，並且可

以用於建立互動式表單，它被用來結構化資訊——例如標題、段落和

列表等等，也可用來在一定程度上描述文件的外觀和語意。HTML5的推

出，讓網頁的互動性及多媒體操作性大幅提升，更使 HTML在行動裝置

上的重要性更不容忽視。

https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5https://zh.wikipedia.org/wiki/%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80https://zh.wikipedia.org/wiki/CSShttps://zh.wikipedia.org/wiki/JavaScripthttps://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E6%B5%8F%E8%A7%88%E5%99%A8https://zh.wikipedia.org/wiki/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80https://zh.wikipedia.org/wiki/HTML%E5%85%83%E7%B4%A0https://zh.wikipedia.org/wiki/%E8%AF%AD%E4%B9%89

9

(2)PHP&MySQL

圖 3.3(b) PHP&MySQL(引用 DearHoney數位音樂工作室)

PHP是一種開源的通用電腦手稿語言，尤其適用於網路開發並可嵌

入 HTML 中使用。PHP 的語法借鑑吸收 C 語言、Java 和 Perl 等流行電

腦語言的特點，易於一般程式設計師學習。PHP的主要目標是允許網路

開發人員快速編寫動態頁面，但 PHP也被用於其他很多領域。

PHP的應用範圍相當廣泛，尤其是在網頁程式的開發上。一般來說

PHP大多執行在網頁伺服器上，透過執行 PHP程式碼來產生使用者瀏覽

的網頁。PHP 可以在多數的伺服器和作業系統上執行，而且使用 PHP

完全是免費的。

目前 PHP 4 已經不會繼續更新，以鼓勵用戶轉移到 PHP 5，2008

年 PHP 5成為了 PHP唯一維護中的穩定版本。

MySQL則是資料庫管理著名的開發軟體，雖然是開放軟體，不過其

功能與性能卻十分優異，本專題以其做為後端資料庫管理系統

https://zh.wikipedia.org/wiki/%E5%BC%80%E6%BA%90https://zh.wikipedia.org/wiki/%E8%AE%A1%E7%AE%97%E6%9C%BAhttps://zh.wikipedia.org/wiki/%E8%AE%A1%E7%AE%97%E6%9C%BAhttps://zh.wikipedia.org/wiki/%E7%BD%91%E7%BB%9C%E5%BC%80%E5%8F%91https://zh.wikipedia.org/wiki/HTMLhttps://zh.wikipedia.org/wiki/C%E8%AF%AD%E8%A8%80https://zh.wikipedia.org/wiki/Javahttps://zh.wikipedia.org/wiki/Perlhttps://zh.wikipedia.org/wiki/%E7%A8%8B%E5%BA%8F%E5%91%98https://zh.wikipedia.org/wiki/%E5%8A%A8%E6%80%81%E9%A1%B5%E9%9D%A2

10

(3) XAMPP

圖 3.3(c) XAMPP(引用 enovision)

架站包指的是：

X → 跨平台，支援多種作業系統 (Windows, Mac, Linux)

A→ Apache 網頁伺服器

M → MySQL 資料庫

P → PHP

P → Perl

由於這幾個軟體都是開放原始碼軟體，因此使用這種方式可以以

較低的成本建立起一個穩定、免費的網站系統。

可以在Windows作業系統中安裝架設自己的網站伺服器，而因為網

站伺服器是自己建立的，因此在網頁編寫上不會受到任何拘束與限制，

同時XAMPP也因為具備PHP與MySQL資料庫網站環境，所以也是自己練習

PHP程式設計的理想環境。

11

(4) JavaScript

圖 3.3(d) JavaScript(引用自維基百科)

JavaScript，一種直譯式程式語言，是一種動態型別、基於原型

的語言，內建支援類別。它的直譯器被稱為 JavaScript引擎，為瀏覽

器的一部分，廣泛用於用戶端的腳本語言，最早是在 HTML網頁上使用，

用來給 HTML網頁增加動態功能。

https://zh.wikipedia.org/wiki/%E7%9B%B4%E8%AD%AF%E8%AA%9E%E8%A8%80https://zh.wikipedia.org/wiki/%E5%8A%A8%E6%80%81%E7%B1%BB%E5%9E%8Bhttps://zh.wikipedia.org/wiki/%E5%8E%9F%E5%9E%8B%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88https://zh.wikipedia.org/wiki/%E5%8E%9F%E5%9E%8B%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88https://zh.wikipedia.org/wiki/%E7%9B%B4%E8%AD%AF%E5%99%A8https://zh.wikipedia.org/wiki/JavaScript%E5%BC%95%E6%93%8Ehttps://zh.wikipedia.org/wiki/%E7%80%8F%E8%A6%BD%E5%99%A8https://zh.wikipedia.org/wiki/%E7%80%8F%E8%A6%BD%E5%99%A8https://zh.wikipedia.org/wiki/%E5%AE%A2%E6%88%B7%E7%AB%AFhttps://zh.wikipedia.org/wiki/%E8%85%B3%E6%9C%AC%E8%AA%9E%E8%A8%80https://zh.wikipedia.org/wiki/HTML

12

(5) QR CODE

圖 3.3(e) QR Code

QR 碼（全稱為快速響應矩陣碼；英語：Quick Response Code）

是二維條碼的一種，於 1994年由日本 DENSO WAVE公司發明。QR來自

英文 Quick Response的縮寫，即快速反應，因為發明者希望 QR碼可

以讓其內容快速被解碼。QR碼使用四種標準化編碼模式（數字，字母

數字，字節（二進制）和漢字）來存儲資料。QR碼最常見於日本，為

目前日本最流行的二維空間條碼。QR碼比較普通條碼可以儲存更多資

料，也無需要像普通條碼般在掃描時需要直線對準掃描器。

QR碼呈正方形，常見的是黑白兩色。在 3個角落，印有較小，像

「回」字的正方圖案。這 3個是幫助解碼軟體定位的圖案，使用者不

需要對準，無論以任何角度掃描，資料仍然可以正確被讀取。

https://zh.wikipedia.org/wiki/%E4%BA%8C%E7%B6%AD%E6%A2%9D%E7%A2%BChttps://zh.wikipedia.org/wiki/%E6%97%A5%E6%9C%AChttps://zh.wikipedia.org/wiki/%E6%97%A5%E6%9C%AChttps://zh.wikipedia.org/wiki/%E7%99%BC%E6%98%8Ehttps://zh.wikipedia.org/wiki/%E6%AD%A3%E6%96%B9%E5%BD%A2

13

(6) Bootstrap

圖 3.3(f) Bootstrap(引用 Navigation)

Bootstrap是一組用於網站和網路應用程式開發的開源前端（所謂

「前端」，指的是展現給終端使用者的介面。與之對應的「後端」是在

伺服器上面執行的代碼）框架，包括 HTML、CSS及 JavaScript的框架，

提供字體排印、表單、按鈕、導航及其他各種元件及 Javascript擴充

套件，旨在使動態網頁和 Web應用的開發更加容易。

Bootstrap 是 Twitter 所開發的，以方便大家使用與建構更的網

頁應用，一定要先知道什麼是 RWD (Responsive Web Design) ，又稱

自適應式網頁設計，或響應式網頁設計，最簡單的說法就是手機、平

板、電腦瀏覽介面上都能符合螢幕的大小。

https://zh.wikipedia.org/wiki/%E7%BD%91%E7%AB%99https://zh.wikipedia.org/wiki/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8Fhttps://zh.wikipedia.org/wiki/%E8%87%AA%E7%94%B1%E5%8F%8A%E5%BC%80%E6%94%BE%E6%BA%90%E4%BB%A3%E7%A0%81%E8%BD%AF%E4%BB%B6https://zh.wikipedia.org/wiki/%E8%87%AA%E7%94%B1%E5%8F%8A%E5%BC%80%E6%94%BE%E6%BA%90%E4%BB%A3%E7%A0%81%E8%BD%AF%E4%BB%B6https://zh.wikipedia.org/wiki/%E6%9C%8D%E5%8A%A1%E5%99%A8https://zh.wikipedia.org/wiki/Web%E5%BA%94%E7%94%A8%E6%A1%86%E6%9E%B6https://zh.wikipedia.org/wiki/HTMLhttps://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8https://zh.wikipedia.org/wiki/JavaScripthttps://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E6%8E%92%E5%8D%B0%E5%AD%A6https://zh.wikipedia.org/wiki/%E5%8B%95%E6%85%8B%E7%B6%B2%E9%A0%81https://zh.wikipedia.org/wiki/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F

14

表 3.1 Bootstrap優缺點(引用愛貝斯網路有限公司網站)

優點 缺點

開發成本與時間比 APP低 IE7以下不支援

不需下載 APP就能使用 小螢幕尺寸不適合複雜的功

能或介面

維護成本比 APP低 載入速度問題

品牌形象一致 需針對手機使用者習慣調整

可同時適用不同裝置

利於分享

https://www.google.com.tw/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjkk6-G3bbNAhVDHZQKHW3aAZYQFggaMAA&url=http%3A%2F%2Fwww.ibest.com.tw%2F&usg=AFQjCNEA4vaZF89-IRxDzKNpOnGYUqLXCQ

15

(7) 手機軟體開發環境

圖 3.3(g) Eclipse(引用 Eclipse官網)

手機端使用Eclipse做為開發環境，而Eclipse是由IBM發展的Open

Source Community開發軟體，並被廣泛地使用在許多不同的領域。例

如：可作為Java應用程式與Android App的開發環境。大多數人都知道

Eclipse是Java的Integrated Development Environment（IDE）。至今，

它已佔據超過全世界Java開發環境市場的50％。 Eclipse計畫是由

Eclipse基金會所管理。Eclipse基金會是一個非營利性的組織，大多

由以科技公司為背景的成員所組成。

Eclipse可由額外的附加功能擴充，目前已有幾個open source的

計劃案與公司，將額外的附加元件擴充至Eclipse中，例如：Android

開發。Eclipse也可被用在一般性用途的應用程式開發上。

16

3.4 系統設計與實作

(1) 資料庫建立

本步驟主要是要建立報名系統所有的相關資料，測試階段將以自

行建立的方式將資料鍵入到MySQL資料庫，正式完成後，則有請同學來

進行試驗。本系統的主要資料表的資料結構如下；另外，每一資料表

的詳細資料欄位名稱、資料型態及長度等，礙於限制，呈現部分予以

省略。

資料表名稱 說明

1 後端管理者帳號密碼

admin

紀錄管理者帳號密碼

2 後端活動內容

newsdata

紀錄各項新、舊活動

3 報名者個人資料

user

紀錄每一位報名者資料

4 掃描 QR Code 報到資料

sign

紀錄條碼內容、報到以及日期

表 3.2 資料庫資料表清單

17

(2) 透過 Google Chart API產生 QR Code

網路上有很多工具可以幫我們把一串文字轉換成 QR Code。

事實上，有不少現成的函式庫有提供動態產生 QR Code，只要引

用這些函式庫，就可以在我們的網頁中產生 QR Code，特別介紹另

一種好用簡單的方法，就是使用強大的 Google API。

透過 GOOGLE API產生 QR CODE格式：

http://chart.apis.google.com/chart?各項參數

參數如下:

cht=圖表格式，填 qr即可

chs=條碼大小，填入 wdith x height，注意寬度跟高度中間是英文字

母的 x

chl=條碼內要存放的資料

choe=編碼方式，建議填 UTF-8

chld=容錯能力，分成 L、M、Q、H四個等級

(引用參閱 Google 網站的說明及英傑銳網路數位有限公司)

http://chart.apis.google.com/charthttps://www.google.com.tw/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwiksay_27bNAhXBHJQKHQ_yC3QQFggbMAA&url=http%3A%2F%2Fwww.injerry.com%2F&usg=AFQjCNGqk9rPM2CoQtlbHxJnToKovI5Dxw&cad=rja

18

(3)Bootstrap 3套件使用

為了設計一套 RWD (Responsive Web Design) ，又稱自適應式網

頁設計，或響應式網頁設計的系統，使用了 bootstrap 3 這套系統，

可下載或使用線上套件(Bootstrap CDN)來完成設計，基本上不要忘記

把 CSS、JS、jQuery 帶入檔案，物件都可以直接套用並自行修改，最

後，Bootstrap非常方便，也算是比較簡單好上手的，但使用的同時也

被樣式問題以及檔案內含過多不必要的元素所困擾。

19

(4) QR code 掃描 APP:

先將手機安裝寫好的 APP，然後按按鈕進入掃描，即可完成報到。

圖 3.4 APP介面

20

(5) Android Zxing QR Code報到端程式 (手機 APP)

package com.J_Test.httpPostTest;

import java.util.ArrayList;

import java.util.List;

import org.apache.http.HttpResponse;

import org.apache.http.NameValuePair;

import org.apache.http.client.entity.UrlEncodedFormEntity;

import org.apache.http.client.methods.HttpPost;

import org.apache.http.impl.client.DefaultHttpClient;

import org.apache.http.message.BasicNameValuePair;

import org.apache.http.protocol.HTTP;

import org.apache.http.util.EntityUtils;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.util.Log;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.EditText;

import android.widget.Toast;

import android.content.ActivityNotFoundException;

import android.content.lntent;

public class Main extends Activity implements OnClickListener

{

static final String

ACTION_SCAN="com.google.zxing.client.androidSCAN";

private EditText txtMessage;

private Button sendBtn;

private String uriAPI = "http://120.114.136.220/ksu/ts.php";

21

/** 「要更新版面」的訊息代碼 */

protected static final int REFRESH_DATA = 0x00000001;

/** 建立 UI Thread使用的 Handler，來接收其他 Thread來的訊息 */

Handler mHandler = new Handler()

{

@Override

public void handleMessage(Message msg)

{

switch (msg.what)

{

// 顯示網路上抓取的資料

case REFRESH_DATA:

String result = null;

if (msg.obj instanceof String)

result = (String) msg.obj;

if (result != null)

// 印出網路回傳的文字

Toast.makeText(Main.this, result,

Toast.LENGTH_LONG).show();

break;

}

}

22

};

@Override

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

txtMessage = (EditText) findViewById(R.id.txt_message);

sendBtn = (Button) findViewById(R.id.send_btn);

if (sendBtn != null)

sendBtn.setOnClickListener(this);

}

//掃描 QR Code

public void scanQR(View) {

try

{

Intent intent = new Intent(ACTION_SCAN);

intent.putExtra("SCAN_MODE", "QR_CODE_MODE"); //QR code模式

startActivityForResult(intent, 0);

} catch (ActivityNotFoundException anfe) {

}

}

23

//傳回結果

public void onActivityResult(int requestCode, int resultCode, Intent

intent) {

if (requestCode == 0) {

if (resultCode == RESULT_OK) {

//get the extras that are returned from the intent

String contents = intent.getStringExtra("SCAN_RESULT"); //掃描結果

String format = intent.getStringExtra("SCAN_RESULT_FORMAT");//

掃描格式

/*Toast toast = Toast.makeText(this, "內容:" + contents + " 格式:"

+ format, Toast.LENGTH_LONG);

toast.show();*/

Thread t = new Thread(new sendPostRunnable(contents));

t.start();

}

}

}

@Override

public void onClick(View v)

{

if (v == sendBtn)

{

if (txtMessage != null)

{

// 擷取文字框上的文字

final String msg = txtMessage.getEditableText().toString();

24

// 動一個 Thread(執行緒)，將要傳送的資料放進 Runnable中，讓 Thread

執行

Thread t = new Thread(new sendPostRunnable(msg));

t.start();

}

}

}

class sendPostRunnable implements Runnable

{

String strTxt = null;

// 建構子，設定要傳的字串

public sendPostRunnable(String strTxt)

{

this.strTxt = strTxt;

}

@Override

public void run()

{

String result = sendPostDataToInternet(strTxt);

mHandler.obtainMessage(REFRESH_DATA, result).sendToTarget();

}

}

25

}

private String sendPostDataToInternet(String strTxt)

{

/* 建立 HTTP Post連線 */

HttpPost httpRequest = new HttpPost(uriAPI);

/*

* Post運作傳送變數必須用 NameValuePair[]陣列儲存

*/

List params = new ArrayList();

params.add(new BasicNameValuePair("data", strTxt));

try

{

/* 發出 HTTP request */

httpRequest.setEntity(new UrlEncodedFormEntity(params,

HTTP.UTF_8));

/* 取得 HTTP response */

HttpResponse httpResponse = new DefaultHttpClient()

.execute(httpRequest);

/* 若狀態碼為 200 ok */

if (httpResponse.getStatusLine().getStatusCode() == 200)

{

/* 取出回應字串 */

26

String strResult = EntityUtils.toString(httpResponse

.getEntity());

// 回傳回應字串

return strResult;

}

} catch (Exception e)

{

e.printStackTrace();

}

return null;

}

(部分程式引用至 Android ios挖挖挖)

27

第四章 成果與外來展望

4.1 研究成果

這是前端網站完成後的正面圖。

圖4.1(a) 電腦版網頁圖

圖4.1(b)手機版網頁圖

28

報名者在行動裝置上即可報名任何活動，報名完成後，即可獲得

一個QR code，然後只須截圖或下載保存，活動當日，拿出行動裝置，

即可完成報名手續。

圖4.1(c) 填寫資料 圖4.1(d)取得QR Code

29

活動當日，拿出行動裝置顯示QR Code供掃描，即可完成報名手續。

圖4.1(e) 手機端掃描QR Code報到

30

透過MySQL資料庫能了解報到的人數以及時間做統計

圖4.1(f) MySQL資料庫

圖4.1(g) MySQL資料庫統計圖

3

4

1 1

012345

1993年 1994年 1995年 1996年

16

數量[人]

年份&活動序號

出生年份統計圖

人數

31

4.2未來展望

未來期望增加更多互動功能，例如：影音、小遊戲、報名收費，

抽獎……等使其網站能更方便，更有趣之功能。

我們把 PHP&MySQL 與 QR Code 結合與應用，希望透過簡單方便的

過程，能提高報名者的使用意願，更加期望這套系統能有效的發揮功

能，達到宣傳推廣科系的重要性，更能在社團展示時，發揮其效能。

32

第五章 結論

這學期專題中把 PHP&MySQL與 QR Code結合與應用，過程中歷

經了很多的錯誤，但在老師的指導與的討論之下終於完成此作品，專

題中我們了解如何除錯以及整體架構，透過將這兩種做結合，實作經

驗中把整體完整性加以提升。

33

參考文獻

[1] 挑戰 PHP/MySQL程式設計與超強專題特訓班 (第三版 )(適用

PHP5~PHP6) 作者：鄧文淵/黃信溢 出版社：碁峰

[2] HTML 5&CSS 3網頁程式設計 作者：陳惠貞 出版社：碁峰

[3] 鋒利的jQuery 作者：單東林、張曉菲、魏然 出版社：佳魁資訊

[4] Bootstrap3中文手冊 : https://kkbruce.tw/bs3

[5] QR碼: https://zh.wikipedia.org/zh-tw/QR%E7%A2%BC

[6] 維基百科:https://zh.wikipedia.org/wiki/Wikipedia

[7]數位時代: http://www.bnext.com.tw/article/view/id/25379

[8] 東方快線網絡市調:

http://www.eolembrain.com.tw/latest_view.aspx?SelectID=274

[9] 英傑銳網路數位有限公司:http://www.injerry.com/

[10] 愛貝斯網路有限公司:http://www.ibest.com.tw/

[11] Android ios挖挖挖:

http://terryyamg.blogspot.tw/2015/04/android-zxing-qrcode-sc

anner-qrcode.html

http://search.books.com.tw/exep/prod_search.php?key=%E5%96%AE%E6%9D%B1%E6%9E%97%E3%80%81%E5%BC%B5%E6%9B%89%E8%8F%B2%E3%80%81%E9%AD%8F%E7%84%B6&f=authorhttp://www.books.com.tw/web/sys_puballb/books/?pubid=chiakueihttps://kkbruce.tw/bs3http://www.bnext.com.tw/article/view/id/25379https://www.google.com.tw/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwiksay_27bNAhXBHJQKHQ_yC3QQFggbMAA&url=http%3A%2F%2Fwww.injerry.com%2F&usg=AFQjCNGqk9rPM2CoQtlbHxJnToKovI5Dxw&cad=rjahttps://www.google.com.tw/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjkk6-G3bbNAhVDHZQKHW3aAZYQFggaMAA&url=http%3A%2F%2Fwww.ibest.com.tw%2F&usg=AFQjCNEA4vaZF89-IRxDzKNpOnGYUqLXCQ