昨天我們成功建立了php網頁和mysql資料庫的連線，讓我們順利的把一些使用者填寫的資料送到資料庫，今天我要來介紹如何讀取這些資料並且在網頁上秀出，同時新增一些可以即時編寫的按鈕，也請大家先準備好pdo.php哦！不知道怎麼準備的可以回前一篇看看~
那首先介紹一下怎麼讀取這些訊息吧！
這時候就要用到在第六天講過的SQL SELECT指令了，透過SELECT我們可以抓取並進一步的排序、限制資料筆數，可是說是相當好用。
SELECT `name`, `msg`, `mail` FROM `msg` ORDER BY id DESC Limit 5;
透過上面的指令就可以成功抓取最後五筆輸入的資料。
再來我們要透過php把資料抓下來並透過for each迴圈把這些資料show在網頁上：
<?php
$stmt = $pdo->query("SELECT `name`, `msg`, `mail` FROM `msg`
ORDER BY id DESC Limit 5");
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($rows as $row) {
echo '<li>';
echo htmlentities($row['name']) . '(' . htmlentitles($row['mail']) . ')';
echo "<br />"
echo htmlentitles($row['msg']);
};
echo "</li>"
?>
這時候大家應該有發現我們是用li這個tag把資料一筆一筆輸出的，也就是說在這個外面應該是要有個ul tag把他包起來的，那我們就來加上去吧！
完成後的php.index應該會長這樣：
<?php
require_once "pdo.php";
$name = "匿名";
$email = "匿名";
$msg = "";
if( isset($_GET['msg']) && $_GET['msg']!='' ){
$msg = htmlentities($_GET['msg']);
if( isset($_GET['name']) && $_GET['name']!='' ){
$name = htmlentities($_GET['name']);}
if( isset($_GET['email']) && $_GET['email']!='' ){
$email = htmlentities($_GET['email']);}
$stmt = $pdo->prepare('INSERT INTO msg (name, mail, msg) VALUES (:name, :email, :msg)');
$stmt->execute(array(
':name' => $name,
':email' => $email,
':msg' => $msg));
header("Location: index.php");
return;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>個人網頁</title>
<link rel="stylesheet" href="style.css">
</head>
<body >
<div class="wrapper">
<div class="left">
<img src="./pic/cat.jpg"
alt="user" width="100">
<h4>Sen Chao</h4>
</div>
<div class="right">
<div class="intro">
<h3>個人簡介</h3>
<ul>
<li><p>我是阿森，目前就讀臺灣大學工程科學與海洋工程學系大三。<br/>聽到這裡，你可能會好奇，工程科學乾寫網頁什麼事？嗯......的確是完全沒有關聯！<strike>那我們30天就到此結束~謝謝各位~~</strike><br/>
沒有啦！正因為我也不是本科出身的，我相信我可以透過更大眾的說法來和各位分享我的所學，也希望大家可以真正學到一些技能，</br>並在這30天後有能創作出自己網頁的能力！</br></p></li>
</ul>
</div>
<div class="info">
<h3>個人資訊</h3>
<div class="info_data">
<div class="data">
<h4>Email</h4>
<p>senchao0930@gmail.com</p>
</div>
<div class="data">
<h4>手機</h4>
<p>09--------</p>
</div>
<div class="data">
<h4>github</h4>
<p>Cooksuhr</p>
</div>
</div>
</div>
<div class="social_media">
<h3>社交媒體</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instgram</a></li>
<li><a href="#">My Blog</a></li>
</ul>
</div>
<div class="info">
<h3>留言板</h3>
<div class="info_data">
<div class="data">
<form>
<textarea name="name" placeholder="稱呼："
style="margin-top:2%; width: 30%;
height: 20%; border-radius: 5px; padding-top: 2%;
padding-bottom: -1%; font-size: 16px;"></textarea><br />
<textarea name="email" placeholder="Email："
style="margin-top:2%; width: 60%;
height: 25%; border-radius: 5px; font-size: 16px;
padding-top: 2%; padding-bottom: -1%;"></textarea>
<textarea name="msg" placeholder="有什麼要對我說的嗎~"
style="margin-top:2%; width: 100%;
height: 50%; border-radius: 5px; font-size: 16px;
padding-top: 2%; padding-bottom: -1%;"></textarea>
<input type="submit" name="submit" value="送出"
style="height: 25px; margin-top:2%;">
</form>
</div>
</div>
<ul class="comment">
<?php
$stmt = $pdo->query("SELECT `name`, `msg`, `mail`, `id` FROM `msg`
ORDER BY id DESC Limit 5");
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($rows as $row) {
echo '<li><span class="name">';
echo htmlentities($row['name']) . '(' . htmlentities($row['mail']) . ')';
echo "</span><br /> 說：";
echo htmlentities($row['msg']);
};
echo "</li>";
?>
</ul>
</div>
</div>
</div>
</body>
</html>
這時候我們再打開我們的網頁：
下面就成功出現我們資料庫裡的資料啦！
我們也可以稍微對他做一些排版，向是新增下面這些東西在style.css裡：
.comment {
margin-top: 12px;
}
.name {
color: #333399;
font-weight: bold;
font-size: 18px;
border-radius: 5px;
}
成果會是這樣：
就可以讓留言訊息更清楚了！
當然也可以依個人喜好添加別的特效，像是背景之類的，只要善用各種tag一定都可以做到。
今天我們成功透過pdo跟mysql指令在php的網頁上把資料庫中的各種資料選取後抓出來，並透過foreach的方法把他們一筆一筆show在網頁上，是不是很簡單呢？其實這樣的架構也可以繼續延伸到任何地方，只是在使用上可能還會用到一些修改或是刪除的功能。
我們目前只有介紹到新增和讀取，實際上包含完整的這四個功能才算是一個真正的CRUD web application(Create, Read, Update, Delete)，所以接下來我會新增一個登入功能，主要是讓這個網站的擁有者可以登入取得權限，然後對留言板上的內容作修改，那今天就先這樣吧！我們明天見。
iThome鐵人賽
看影片追技術