崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 行動會...
TRANSCRIPT
-
崑 山 科 技 大 學
電腦與通訊系 四技部
專 題 製 作 報 告
行動會議報到系統
學生: 王 盈 惟(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