寫給零基礎(chǔ)的小白 包學(xué)包會
前期準(zhǔn)備:
MAMP 用于一鍵創(chuàng)建可運(yùn)行的環(huán)境
Phpstorm IDE,所有代碼都在這上面編寫
Chrome 推薦瀏覽器，主要用于測試，鼠標(biāo)右鍵的檢查的功能很強(qiáng)大
原理
-
index.html顯示輸入框的頁面 -
end.php處理信息的后臺頁面
Step 1| index.html
- 通過
phpshorm創(chuàng)建一個工程，文件夾下新建html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Serch Page</title>
</head>
<body>
<form method="get" action="end.php" >
<label>請輸入你的學(xué)號:</label>
</br>
<input type="text" name="studentId">
<button type="submit">點(diǎn)擊查詢</button>
</form>
</body>
</html>
- 這就是整個
index.html的代碼,僅用到 HTML 的知識-
intput標(biāo)簽表示輸入學(xué)號的輸入框，name=studentId表示輸入的值將賦值給studentId -
form標(biāo)簽 中的method="get"表示等會傳遞studentId的方式為GET,于此對應(yīng)的另一種方式是POST，兩者異同稍作分析
-
-
form標(biāo)簽 中的action="end.php"表示將值傳遞給 同一路徑下 的end.php頁面
Step 2 | end.php
- 開始之前 需要運(yùn)行下載好的
MAMP
-
在自動打開的（或者點(diǎn)擊 Open web paga）的頁面中
phpmyadmin將會作為稍后使用的本地 數(shù)據(jù)庫，先放在
跳轉(zhuǎn)頁 在文件夾下新建
php file,生成end.php,可先輸入以下代碼測驗
<?php
$studentId = $_GET['studentId']; // $變量名 表示新建php變量
echo "你的輸入是: ".$studentId ; // echo 表示輸出
?>
- 取到從index.html傳來的值并賦給新建的變量
$studentId -
加引號的字符串和$studentId兩者間用.連起來 - PHP 每句話結(jié)尾要加
；
Step 3 | 先小測下
- 雙擊
index.html文件
將鼠標(biāo)移到右上角，會出現(xiàn)瀏覽器圖標(biāo)，點(diǎn)擊
- 點(diǎn)擊確定隨即跳轉(zhuǎn)，可以看到地址欄中 studentId 即 輸入框的
name屬性, 123456 即剛輸入的值
Step 4 | 與數(shù)據(jù)庫交互之-創(chuàng)建數(shù)據(jù)
- 在之前我們需要在數(shù)據(jù)庫中先創(chuàng)建數(shù)據(jù)，打開剛剛彈出網(wǎng)頁中的
phpmyadmin, 我們先新建一個database取名 testdb
- 在新建的
database中新建一個table取名table1
- 創(chuàng)建
table時需要聲明字段，我們聲明兩個字段 : id 用于存取 studentId , name 用于存儲對應(yīng)的名字，兩個字段的 type 都可設(shè)置為 Varchar ,且有長度。這里的 Collation 為編碼方式，采用UTF-8。
點(diǎn)擊 Go ,一張 Table 就創(chuàng)建好啦 ! - 現(xiàn)在表格里是空的，我們需要向里面添加 記錄 ，可以運(yùn)行一條
SQL語句，相信這條語句很容易理解，稍后可以詳細(xì)講講SQL
INSERT INTO `table1`(`id`, `name`) VALUES (12345,'Mars')
Step 5 | 與數(shù)據(jù)庫交互之-獲取數(shù)據(jù)
- 打開
end.php文件，添加下面幾行代碼
$mysql = new mysqli('localhost','root','root','testdb');
創(chuàng)建到數(shù)據(jù)庫的連接，參數(shù)分別為 host , user , password , database
$result = $mysql->query("SELECT * FROM table1 WHERE id = '$studentId' ");
執(zhí)行一條 query 語句 ，語句的內(nèi)容為 從 table1 中選取 id 值等于 $studentId 的記錄 ，并賦值給變量 $result
$resultRow = $result->fetch_array(); echo 'your name :'.$resultRow['name'];
將剛剛得到的記錄轉(zhuǎn)換成數(shù)組的形式 , 那么 $resultRow['name'] 就是得到的名字啦，并輸出。
- 測試 ： 從
index.html中的輸入框開始,輸入學(xué)號 12345 ，提交 ，頁面跳轉(zhuǎn) ， 就會得到如下顯示
寫在最后
相信安裝這樣一個流程走下來，對這個簡易的查詢系統(tǒng)的實(shí)現(xiàn)的能有個大體的理解了。麻雀雖小，但五臟俱全，后面復(fù)雜的功能都是基于這套流程的。前面的步驟以及代碼，最好過一遍。關(guān)于 html , php , mysql 的語法，不理解都沒有關(guān)系，后面會有詳細(xì)的講解以及拓展，打好基礎(chǔ)，后面的都簡單的。
