8.
製作表單並寫入資料到資料庫
一、 製作表單頁面(3-4)
- 基本語法：
<form action="送至.php" method="post" role="form">
表單元件
</form>
- 在 Visual Studio Code 中輸入
b4-form-grid按 Enter 可以快速產生一整組表單語法。
- 貼上3-4節程式碼另存成
post_form.tpl
<div class="container">
<div class="container">
<form action="{$action}" method="post" id="myForm" role="form">
<!-- b4-form-group-text -->
<div class="form-group">
<label for="title">待辦事項</label>
<input type="text" name="title" id="title" class="form-control" placeholder="待辦事項">
</div>
<!-- b4-form-texarea -->
<div class="form-group">
<label for="directions">描述</label>
<textarea id="directions" class="form-control" name="directions" rows="3"></textarea>
</div>
<div class="form-group">
<label for="title">到期日</label>
<input type="text" name="end" id="end" class="form-control" placeholder="到期日">
</div>
<!-- b4-form-select -->
<div class="form-group">
<label for="priority">優先順序</label>
<select class="form-control" name="priority" id="priority">
<option value="高">高</option>
<option value="中">中</option>
<option value="低">低</option>
</select>
</div>
<!-- b4-form-check-inline-->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="assign[]" id="assign_0" value="爸爸">爸爸
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="assign[]" id="assign_1" value="媽媽">媽媽
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="assign[]" id="assign_2" value="哥哥">哥哥
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="assign[]" id="assign_3" value="妹妹">妹妹
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="assign[]" id="assign_4" value="我">我
</label>
</div>
<!-- b4-form-radio-inline-->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="done" id="done" value="1">完成
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="done" id="done" value="0">未完成
</label>
</div>
<div class="text-center">
<input type="hidden" name="op" value="insert_list">
<button type="submit" name="button" class="btn btn-primary">儲存</button>
</div>
</form>
</div>
</div>
二、表單函數
index.php 新增表單函數：
// 表單
function post_form()
{
global $content, $db, $smarty;
// 加入預設值
$content = [
'title' => '',
'directions' => '',
'end' => date("Y-m-d", strtotime("+10 day")),
'priority' => '中',
'assign' => [],
'done' => 1,
];
$next_op = 'insert_list';
$smarty->assign('next_op', $next_op);
}
- post_form.tpl(詳細8-2)
<input type="格式" name="名稱" value="預設值" placeholder="佔位字元"> ，如：
<input type="text" name="title" id="title" class="form-control" placeholder="待辦事項" value="{$content.title}">
- 大量文字框：
<textarea name="名稱">預設值</textarea> ，如：
<textarea id="directions" class="form-control" name="directions" rows="3">{$content.directions}</textarea>
- 下拉選單：
<select name="名稱" size=1>選項</select> ，如：
<select class="form-control" name="priority" id="priority">
<option value="高" {if $content.priority=='高'}selected{/if}>高</option>
<option value="中" {if $content.priority=='中'}selected{/if}>中</option>
<option value="低" {if $content.priority=='低'}selected{/if}>低</option>
</select>
- 單選框：
<input type="radio" name="名稱" value="值 1">選項文字 1，如：
<input class="form-check-input" type="radio" name="done" id="done" value="1" {if $content.done=='1'}checked{/if}>完成
- 複選框：
<input type="checkbox" name="名稱[]" value="值 1">選項文字 1，如：
<input class="form-check-input" type="checkbox" name="assign[]" id="assign_0" value="爸爸" {if "爸爸"|in_array:$content.assign}checked="checked"{/if}>爸爸
- 隱藏框與送出表單
<div class="text-center">
<input type="hidden" name="next_op" value="{$next_op}">
<input type="hidden" name="op" value="{$op}">
<input type="submit" name="send" value="儲存" class="btn btn-primary" />
</div>
三、 寫入資料到資料庫
- 要操作MySQL，必須用SQL語言，新增資料的SQL語法如下（大小寫無關）：
INSERT [INTO] `資料表名稱` [(`欄位1`, `欄位2`...)] VALUES ('值1', '值2'...)
- 建議凡是資料庫名稱、資料表名稱、欄位名稱都用重音符號
`包起來。
- 凡是「值」的，都用單引號
'包起來。
- 利用 $db->real_escape_string() 過濾資料，目的是順利讓所有資料存入資料庫，並避免隱碼攻擊。
$title = $db->real_escape_string($_POST['title']);
$db->query($sql) 就是送執行指令到資料庫。$db->error 會秀出資料庫傳回來的錯誤訊息。- 取得寫入時該資料產生的流水號：
$db->insert_id
- 程式碼：
//新增清單
function add()
{
global $db;
//過濾變數
$title = $db->real_escape_string($_POST['title']);
$directions = $db->real_escape_string($_POST['directions']);
$end = $db->real_escape_string($_POST['end']);
$priority = $db->real_escape_string($_POST['priority']);
$assign = $db->real_escape_string(implode(';', $_POST['assign']));
$done = intval($_POST['done']);
// 連線資料庫
$sql = "INSERT INTO `list` ( `title`, `directions`, `end`, `priority`, `assign`, `done`,`create_time`,`update_time`)
VALUES ('{$title}', '{$directions}', '{$end}', '{$priority}', '{$assign}', '{$done}',now(),now())";
if (!$db->query($sql)) {
throw new Exception($db->error);
}
$sn = $db->insert_id;
return $sn;
}
四、寫入後須轉向
- 凡是寫入、修改、刪除，進行完都應該做轉向，避免使用者重新整理畫面，又重複執行寫入、修改或刪除：
header("location: index.php?sn={$sn}");
header()函數基本上是設定文件檔頭，其中 location屬性可以指定文件轉向，故利用之來達成轉向功能。- 程式碼：
if (isset($_POST['send'])) {
if (isset($_POST['next_op'])) {
if ($_POST['next_op'] == "add") {
$sn = add();
$_message = empty($sn) ? "新增失敗" : "新增成功!";
}
}
header("location: index.php?sn={$sn}");
}
7-5 index.php