111年資訊技師高等程式設計

二、請結合 HTML、JavaScript 及 PHP，撰寫一人事資料庫管理程式有關人事基本資料新增功能的網頁，其網頁畫面如圖所示 (HTML 只需寫出此畫面的部分即可，寬度及字形大小自訂)，當操作者填入資料後，按下提交鍵時，網頁的 JavaScript 程式必須自動檢查員工年齡欄輸入的是數字，且範圍必須在1~150之間，並檢查每個欄位均有填寫。若前述檢查有誤，則必須使用跳出式視窗提出警告。

                        pic01.png

        若提交成功時，對應的 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>

執行結果：

 

pic02.png

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

 

arrow
arrow
    文章標籤
    111年資訊技師高等程式設計
    全站熱搜

    jacksaleok 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄