2015年4月16日 星期四

[教學] PHP & MySQL 學習筆記 第13堂(留言板建置:前台設計)


在這一堂課我們要練習建立一個留言板系統,同時包含它的前台(網友看到的部分)和後台(管理者看到的部分),這堂課主要是著重在前台設計的部分。

以下是這堂課的結果:


本次會學習到的函數共包含:

mysql_query("insert into 資料表 (欄位名稱1,欄位名稱2,...) value(‘欄位1值’,’欄位2值’…..)")將資料輸入到MySQL資料表中,資料表中有幾個欄位變項,就需要有幾組相對應的單引號。
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),這是留言板的頁面。


留言板頁面製作

STEP 1留言板樣式建立
先利用「設計」的版面,建立一個表格

STEP 2留言板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(管理者頁面,這個之後要再寫),否則請你幫我呼叫「查無此人」


因為我們希望「查無此人」顯示的位置是在我們想要的位置,所以我們可以先在「設計」的頁面,打上我們希望出現查無此人的地方。


如果查無此帳號密碼的話,請幫我導向 p13-login.php?msg=error這個頁面


然後我們就可以利用$_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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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="http://pjchender.blogspot.tw/">Home</a></li>
         <li><a href="http://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>&nbsp;</p>
<p>&nbsp;</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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>
結果



以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share:

0 意見:

張貼留言