延續<[Open-source tool] 可搭配PHP和SQL的表單開源工具_Form tools(1):簡介和建置>一文,完成建置後,接著是在Form tools管理後台內新增表單(Add Form),方便管理不同的回填表單。新增表單分別有Internal, External和Form Builder三種型態供挑選,同時External又可區分為Direct和Code兩種方式,其中Direct是以指向Form tools內process.php的方式進行; Code則是以Form tools API方式引入。由於External方式較為彈性且靈活,本文以External Direct Type來建立表單,同時以報名表網頁為範例來測試。
假設使用情境為讓使用者可在網頁上填入報名資訊,當使用者填妥報名表並點選提交按鈕後,頁面顯示"報名成功"。因此準備兩個簡易網頁檔案來測試,一個為報名表單,另一個為重導向到顯示"報名成功"的頁面。接著,即可開始進行下列初始化表單的建置流程。
a.依照External Direct的頁面引導,首先需要填寫Form Name、Form URL和Redirect URL等等表單資訊,其中Form URL即是上述報名表單網頁檔案,Redirect URL重導向到顯示"報名成功"頁面,如下圖所示。
b.在"Test Submission"步驟,需要將紅框內程式碼加入到報名表單中,讓報名表單提交時可指向process.php,同時在後端SQL建立對應ID的數據表,以下圖程式碼為例,建立在SQL的數據表的ID為3。加入程式碼後,即可填寫和測試報名表單,若順利初始化報名表單,其網頁會轉到process頁面,再依其指示回到"Test Submission"頁面點選Refresh和Next STEP按鈕。
c.在"Database Setup"步驟,即是建立SQL的數據表,剛進到該步驟的紅色填滿處為空白,可點選"Smart Fill"按鈕自動填入文字內容,亦可自行定義文字內容。另外,該數據表也自動生成上傳時間(submission_date)、最後修改時間(last_modified)和上傳IP位址(ip_address)欄位。
d.在"Field type"步驟,則是定義數據表的格式內容,包含資料格式(string or number)和資料長度(<=256 chars),亦可選擇點選"Smart Fill"按鈕自動填入文字內容。
e.在"Finalize Form"步驟,須將在b.步驟新增的第二行程式碼(同下圖紅框處)從報名表單檔案中移除,如下圖說明內容。該步驟即是完成表單初始化的工作。
f.完成後,即可在Forms頁面看到已建立的表單,其中ID=3即是對應b.的程式碼建置內容。
完成上述Form tools表單建置後,可以使用者角度來測試報名表單,如下。
提交上述兩筆報名表單後,可在Form tools管理後台界面看到對應筆數,如下圖紅框。
點選View後,可看到兩筆資料內容,同時可選擇在網頁上呈現或是匯出成Excel檔案,進一步讀取上傳時間和IP位址等等資訊。
上述是藉由簡易報名表範例說明External Direct type新增表單方式,除此之外,其尚可進一步設定驗證碼,來區分人類或是機器人輸入資訊,可自行玩玩看。
Reference: