111年資訊技師高等程式設計
|
二、請結合 HTML、JavaScript 及 PHP，撰寫一人事資料庫管理程式有關人事基本資料新增功能的網頁，其網頁畫面如圖所示 (HTML 只需寫出此畫面的部分即可，寬度及字形大小自訂)，當操作者填入資料後，按下提交鍵時，網頁的 JavaScript 程式必須自動檢查員工年齡欄輸入的是數字，且範圍必須在1~150之間，並檢查每個欄位均有填寫。若前述檢查有誤，則必須使用跳出式視窗提出警告。 若提交成功時，對應的 PHP 程式會確認資料表中員工編號欄資料沒有重複後，再將這些資料加入人事基本資料表。若重複，則在網頁顯示資料重複訊息即可。假定資料庫伺服器 IP 是110.23.43.104，資料庫名稱是 PERSON，人事基本資料表名稱是 PBASIC，資料表內的欄位名稱依序是 PNO、NAME、AGE、TEL 及 ADDR。資料庫管理帳號是 sa，密碼是 admin。連結資料庫指令是 mysqli_connect (資料庫主機，登入帳號，登入密碼，資料庫名稱)，傳送 SQL 指令是 mysqli_query (連結資料庫，SQL)。（25分） |
答：
test.html：
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>人事資料庫管理程式</title> </head> <head> <script> function validateForm( ) { var id = document.forms["myForm"]["e_id"].value; var name = document.forms["myForm"]["e_name"].value; var age = document.forms["myForm"]["e_age"].value; var tel = document.forms["myForm"]["e_tel"].value; var address = document.forms["myForm"]["e_address"].value; if (id == "") { alert("員工編號必須填寫!"); // document.myForm.e_id.focus( ); return; } else if (name == "") { alert("員工姓名必須填寫"); return; } else if (age < 1 || age >= 150) { alert("不是一個有效的員工年齡!"); return; } else if (tel == "") { alert("員工電話必須填寫"); return; } else if (address == "") { alert("員工地址必須填寫"); return; } <!-- 若以上條件皆不符合，也就是表單資料皆有填寫的話，則將資料送出 --> else { myForm.submit( ); } } </script> </head> <body> <table border="1"> <form name="myForm" action="main.php"> <caption align="center">輸入資料表格</caption> <tr> <td>員工編號</td> <td><input type="text" name="e_id"></td> </tr> <tr> <td>員工姓名</td> <td><input type="text" name="e_name"></td> </tr> <tr> <td>員工年齡</td> <td><input type="text" name="e_age"></td> </tr> <tr> <td>員工電話</td> <td><input type="text" name="e_tel"></td> </tr> <tr> <td>員工住址</td> <td><input type="text" name="e_address"></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" onClick="validateForm(this.form)" value="提交"> </td> </tr> </table> </form> </body> </html> |
執行結果：
main.php
|
<?php $id = $_REQUEST['e_id']; echo "<br>員工編號：".$id; $name = $_REQUEST['e_name']; echo "<br>員工姓名：".$name; $age = $_REQUEST['e_age']; echo "<br>員工年齡：".$age; $tel = $_REQUEST['e_tel']; echo "<br>員工電話：".$tel; $address = $_REQUEST['e_address']; echo "<br>員工地址：".$address; echo "</br>"; $host = 'localhost'; $dbuser = 'root'; $dbpassword = '12345678'; $dbname = 'test1'; $link = mysqli_connect($host, $dbuser, $dbpassword, $dbname); if($link) { mysqli_query($link, 'SET NAMES uff8'); echo "正確連接資料庫"; } else { echo "不正確連接資料庫</br>" . mysqli_connect_error( ); } // 設置一個空陣列來放資料 $datas = array( ); // sql 語法存在變數中 $sql = "insert into PBASIC values('$id','$name','$age','$tel','$address');"; echo "<br>SQL語法為".$sql; echo "</br>"; // 用 mysqli_query 方法執行 (sql 語法) 將結果存在變數中 $result = mysqli_query($link, $sql); // 如果有資料 if ($result) { // mysqli_num_rows 方法可以回傳我們結果總共有幾筆資料 if (mysqli_num_rows($result) > 0) { } // 釋放資料庫查到的記憶體 mysqli_free_result($result); } else { echo "{$sql} 語法執行失敗，錯誤訊息: " . mysqli_error($link); echo "</br>"; } $sql = "SELECT * FROM PBASIC"; $result = mysqli_query($link, $sql); // 方法1-數字陣列 // $row = mysqli_fetch_array($result, MYSQLI_NUM); // printf ("%s, %s", $row[0], $row[1]); // 方法2-關聯陣列 // $row = mysqli_fetch_array($result, MYSQLI_ASSOC); // printf ("%s, %s", $row["PNO"],$row["NAME"]); if (!$result) { print "ERROR"; } else { while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { printf ("%s, %s, %s, %s, %s", $row["PNO"], $row["NAME"], $row["AGE"], $row["TEL"], $row["ADDR"]); echo "<br>"; } } // 釋放结果集 mysqli_free_result($result); ?> |
執行結果：
員工編號：A8
員工姓名：88
員工年齡：88
員工電話：8
員工地址：88
正確連接資料庫
SQL語法為insert into PBASIC values('A8','88','88','8','88');
insert into PBASIC values('A8','88','88','8','88'); 語法執行失敗，錯誤訊息: Duplicate entry 'A8' for key 'pbasic.PRIMARY'
A1, 1, 1, 1, 11
A2, 22, 2, 22, 2
A3, 33, 3, 33, 3
A4, 44, 4, 44, 4
A5, 55, 5, 55, 5
A6, 66, 6, 66, 6
A7, 77, 7, 77, 7
A8, 88, 88, 8, 88
※參考資料：
1.https://www.runoob.com/js/js-form-validation.html
2.https://dreamtails.pixnet.net/blog/post/22501946
3.http://www.w3big.com/zh-TW/php/func-mysqli-fetch-array.html#gsc.tab=0
留言列表
國考資訊處理解答 (7)
