非常抱歉，關於部落格內 PHP 的部分目前已經停止維護，因本人已經很久沒有寫 PHP ，且文章中所使用的 PHP 版本偏舊，希望有心學習 PHP 的朋友們，可以參考 Codecademy 的課程，或近一步嘗試 Laravel 這個 PHP 框架（可透過 laracasts 學習），若有找不到錯的學習資源也歡迎在留言串分享，方便有需要的人能夠有更多學習的管道！
在這一堂課我們要練習建立一個留言板系統，同時包含它的前台（網友看到的部分）和後台（管理者看到的部分），這堂課主要是著重在前台設計的部分。
以下是這堂課的結果：
mysql_query("insert into 資料表 (欄位名稱1,欄位名稱2,...) value(‘欄位1值’,’欄位2值’…..)")：將資料輸入到MySQL資料表中，資料表中有幾個欄位變項，就需要有幾組相對應的單引號。
mysql_fetch_assoc( )：擷取某一列的資料，且根據「欄位名稱」加以擷取。
mysql_fetch_assoc( )：擷取某一列的資料，且根據「欄位名稱」加以擷取。
建立「新增留言頁面」
STEP 1 建立資料庫和資料表首先我們要建立資料庫和資料表，作為之後網友留言的資料儲存（資料庫的建置可參考 PHP & MySQL學習筆記第八堂）。
首先我們要建立一個名為guest的資料庫、和一個名為guest的資料表
在資料表中，我們需要輸入以下欄位變項（圖片來源：馬老師雲端研究室）
guestID的地方，我們要讓電腦自動幫我們產生一個類似流水號的ID，所以這裡附加的地方要選擇auto_incredement，後面的主鍵Primary要選取。
這裡勾選主鍵Primary的意思，是希望確保這個欄位裡面的資料是獨一無二，不會重複的。
STEP 2製作「輸入留言」頁面
接著，我們要設計留言板的頁面，我們利用DW開啟一個php檔，並且檔名取做p13-post。
先利用「設計」建立一個留言板的表單
將每個文字框，依序修改名稱
性別的核取框也要記得修改
STEP 3利用PHP語法將留言內容輸入資料庫
接下來我們就要和PHP語法連接，將網友在留言板輸入的內容，存入資料庫中。
先把POST裡面的變項都存出來，變成一個變項。
關於require ( )的用法，可參考「PHP & MySQL 學習筆記 第十堂（PHP MyAdmin帳號密碼管理）」。
為了要把POST的資料存入資料庫中，我們會學習使用一段新的語法 mysql_query("insert into 資料表 value ('第一個欄位名稱的值','第二個欄位名稱的值',.......)")，這個的用法有兩點要注意的：
1.有幾組欄位名稱就要有幾組單引號，在這裡，因為我們共有9組欄位名稱，所以我們有9組單引號。
2.要依照資料庫中變項名稱的順序，依序填入裡面的值。也就是說，我們第一個欄位是guestID，沒有值就空過去，第二個欄位是guestName，要輸入的就是$_POST['guestName']的值，按照這樣的順序依序填入。
沒有問題的話，預覽就可以輸入留言了
這時候，還會有一個問題，我們可以回到資料庫，按左上方的「瀏覽」，發現資料竟然有兩筆，其中一筆是空白。之所以有這樣的問題，主要是因為在還沒送出的時候，就已經執行一次insert into的語法了，所以會送出空白的資料。
為了避免這樣的問題，我們可以用if(issset())這樣的用法，如果資料存在，則再執行下面的語法。
這時候，就解決了剛剛的問題，除非是什麼都沒輸入，不然就不會儲存到空白的頁面。
最後，加上header，讓點選網頁後，重新導向到另一個頁面（p13-show.php），這是留言板的頁面。
留言板頁面製作
先利用「設計」的版面，建立一個表格
在<head>和</head>之間，開始寫php語法，這裡我們用order by這個指令，來讓資料根據時間的順序排列，而且是用desc，所以會從最新的資料呈現到最舊的資料。
接下來，我們要在<body>的後面開始寫回圈，我們有幾筆資料就要跑自己回圈，所以會用到mysql_num_rows。
另外，我們這裡會用一個新的語法，叫做mysql_fetch_assoc( )這和之前學的mysql_fetch_row( )很像（可參考PHP & MySQL 學習筆記 第八堂），只是，在mysql_fetch_row( )中，我們讀取出一列後，要再向電腦指定要讀取第幾欄的資料（搭配 rs[ ]）使用。在mysql_fetch_assoc( )中，我們一樣讀取一列的資料，但是不用告訴電腦要讀取的是第幾欄的資料，而是直接告訴它說，我要讀取的是哪一個變項名稱的值，這樣會讓我們方便許多，因為我們不用再去算，該資料是第幾欄。
我們把mysql_fetch_assoc呼叫出來的列定義為變項rs，然後在table裡面把它們echo出來。如同前面所說，這裡只需要輸入「欄位名稱」就可以了。
table的最後，記得加上回圈的結尾（}）。
這時候預覽我們的網頁，我們就可以看到，當我有幾筆資料，我就可以產生幾個留言表格了，且這個表格，會隨著留言的人數增加而增加。
連結到管理員介面
STEP 1：建立管理員的資料表首先，我們要建立一組帳號密碼，這是能夠進入管理後台的帳號密碼，一樣進入PHP MyAdmin，進入一開始建立的資料庫「guest」，然後建立一個新的資料表，取名為「admin」，欄位數目就填2（帳號和密碼）。
帳號的欄位名稱為usr、密碼的欄位名稱為pwd。
新增一個管理員，帳號我就取做pjchender、密碼就取做12345678
STEP 2：建立管理員頁面
接著要來寫一個管理員介面，檔名取做「p13-login.php」，寫好的管理員頁面如下：
STEP 3：管理員頁面PHP語法撰寫
再來就要來寫PHP語法了，這裡我們一樣會用到mysql_query這個語法，搭配上where，邏輯是，如果帳號和密碼能夠在剛剛建立的admin資料表中被找到的話，那麼我的data就會有資料。
加上if(isset[])，當網友輸入資料後，在幫我開始執行下面的語法。
最後這裡就是，如果data裡至少有一筆資料（也就是有找到這組帳號密碼），則請幫我導向p13-admin（管理者頁面，這個之後要再寫），否則請你幫我呼叫「查無此人」
因為我們希望「查無此人」顯示的位置是在我們想要的位置，所以我們可以先在「設計」的頁面，打上我們希望出現查無此人的地方。
然後我們就可以利用$_GET[' '] 這個指令，如果網址中的msg是error的話，在幫我echo出查無此人這段語法。
結果
寫到這裡就大功告成拉！我們一口氣寫了三個頁面（包含新增留言、留言版、登入頁面）新增留言的語法：
<?php
require("connect2.php");
$guestName=$_POST['guestName'];
$guestEmail=$_POST['guestEmail'];
$guestGender=$_POST['guestGender'];
$guestSubject=$_POST['guestSubject'];
$guestContent=$_POST['guestContent'];
$guestTime = date("Y:m:d H:i:s",time()+28800);
if(isset($guestName)){
mysql_query("insert into guest value('','$guestName','$guestEmail','$guestGender','$guestSubject','$guestTime','$guestContent','','')");
header("location:p13-show.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我要留言</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<style>
.container{
margin:auto;
background-color:#f5f5f5;
width:800px;
padding-bottom: 20px;
}
.button{
text-align:center;
padding:20px 0;
}
.top h3{
font-family:微軟正黑體;
text-align:center;
padding:10px 0;
}
.form-group{
font-family:微軟正黑體;
font-size:16px;
}
</style>
<body>
<div class="container">
<div class="top">
<h3>新增留言</h3>
</div>
<form id="form1" name="form1" method="post" action="" class="form-horizontal">
<div class="form-group">
<label for="guestName" class="col-sm-4 control-label">暱稱：</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="您的暱稱" name="guestName" id="guestName" />
</div>
</div>
<div class="form-group">
<label for="guestEmail" class="col-sm-4 control-label">信箱：</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="您的信箱" name="guestEmail" id="guestEmail" />
</div>
</div>
<div class="form-group">
<label for="guestGender" class="col-sm-4 control-label">性別：</label>
<label class="radio-inline">
<input type="radio" name="guestGender" id="radio" value="男" /> 男
</label>
<label class="radio-inline">
<input type="radio" name="guestGender" id="radio2" value="女" />女
</label>
</div>
<div class="form-group">
<label for="guestSubject" class="col-sm-4 control-label">留言主旨：</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="guestSubject" id="guestSubject" />
</div>
</div>
<div class="form-group">
<label for="guestContent" class="col-sm-4 control-label">留言內容：</label>
<div class="col-sm-6">
<textarea name="guestContent" class="form-control" id="guestContent" rows="5"></textarea>
</div>
</div>
<div class="button">
<input type="submit" name="button" id="button" value="送出" class="btn"/>
</div>
</form>
</div>
</body>
</html>
留言板語法：
<?php
require("connect2.php");
$data=mysql_query('select * from guest order by guestTime desc')//讓資料由最新呈現到最舊
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<title>自製留言板</title>
<style>
.top{
margin:auto;
width:60vw;
text-align:right;
padding:15vh 0 0 0;
font-family:微軟正黑體;
}
/*.nav{
background-color:#339;
padding: 10px 0px;
}*/
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.CSSTableGenerator {
margin:auto;
padding:0px;
width:60vw;
}
.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
}.CSSTableGenerator tr:hover td{
background-color:#005fbf;
color:white;
}
.CSSTableGenerator td{
vertical-align:middle;
background-color:#e5e5e5;
border:1px solid #999999;
border-width:0px 1px 1px 0px;
text-align:left;
padding:8px;
font-size:16px;
font-family:Arial,微軟正黑體;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #005fbf 5%, #005fbf 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #005fbf) );
background:-moz-linear-gradient( center top, #005fbf 5%, #005fbf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#005fbf");
background: -o-linear-gradient(top,#005fbf,005fbf);
background-color:#005fbf;
text-align:center;
font-size:20px;
font-family:Arial, 微軟正黑體;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #005fbf 5%, #005fbf 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #005fbf) );
background:-moz-linear-gradient( center top, #005fbf 5%, #005fbf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#005fbf");
background: -o-linear-gradient(top,#005fbf,005fbf);
background-color:#005fbf;
}
</style>
</head>
<body>
<div class="nav nav-tabs">
<div class="container">
<ul class="pull-left nav nav-tabs">
<li><a href="https://pjchender.blogspot.tw/">Home</a></li>
<li><a href="https://pjchender.er-webs.com/about/">About</a></li>
</ul>
<ul class="pull-right nav nav-tabs">
<li><a href="p13-login.php">Log In</a></li>
</ul>
</div>
</div>
<div class="top">
<a href="p13-post.php"><button type="button" class="btn btn-primary btn-lg">我要留言</button></a>
</div>
<p> </p>
<p> </p>
<?php
for($i=1;$i<=mysql_num_rows($data);$i++){
$rs=mysql_fetch_assoc($data);
?>
<div class="container">
<div class="CSSTableGenerator">
<table align="center">
<tr>
<td><?php echo $rs['guestSubject']?></td>
</tr>
<tr>
<td width="25%">暱稱</td>
<td width="75%"><?php echo $rs['guestName']?></td>
</tr>
<tr>
<td>信箱</td>
<td><?php echo $rs['guestEmail']?></td>
</tr>
<tr>
<td>性別</td>
<td><?php echo $rs['guestGender']?></td>
</tr>
<tr>
<td>留言內容</td>
<td><?php echo $rs['guestContent']?></td>
</tr>
</table>
</div>
</div>
<br />
<?php } ?>
</body>
</html>
登入頁面語法：
<?php
if(isset($_POST['usr'])){
require("connect2.php");
$username=$_POST['usr'];
$password=$_POST['pwd'];
$data=mysql_query("select * from admin where usr = '$username' and pwd = '$password'");
if(mysql_num_rows($data)>=1){
header("location:p13-admin.php");
}else{
header("location:p13-login.php?msg=error");
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>管理員登入介面</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
*{
padding:0;
margin:0;
}
.container{
padding:20px 0;
background-color:#f5f5f5;
width:800px;
}
h2{
font-family:微軟正黑體;
padding:0 0 20px 0;
}
.btn{
font-size:20px;
font-family:微軟正黑體;
}
.respond{
text-align:center;
padding:20px 0;
font-family:微軟正黑體;
font-size:20px;
}
</style>
</head>
<body>
<div class="container">
<h2 align="center">管理員登入</h2>
<form class="form-horizontal" role="form" id="form1" name="form1" method="post" action="">
<div class="form-group">
<label class="control-label col-sm-4" for="usr">UserName:</label>
<div class="col-sm-4">
<input name="usr" type="text" class="form-control" id="usr" placeholder="Enter username">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4 for="pwd">Password:</label>
<div class="col-sm-4">
<input name="pwd" type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div>
<div align="center" style="padding-top:30px">
<input name="button" type="submit" class="btn" id="button" value="確認" />
</div>
</div>
</form>
<div class="respond">
<?php
if($_GET['msg']=="error"){
echo'<p class="bg-danger">查無此人</p>';
}
?>
</div>
</div>
</body>
</html>
結果
以上內容均為本人在馬老師雲端研究室學習所整理之筆記
0 意見:
張貼留言