DAY8-PHP和MYSQL(二)

前言：

昨天我们成功建立了php网页和mysql资料库的连线，让我们顺利的把一些使用者填写的资料送到资料库，今天我要来介绍如何读取这些资料并且在网页上秀出，同时新增一些可以即时编写的按钮，也请大家先准备好pdo.php哦！不知道怎麽准备的可以回前一篇看看~

How to read：

那首先介绍一下怎麽读取这些讯息吧！

这时候就要用到在第六天讲过的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>[email protected]</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;
}

成果会是这样：

Untitled

就可以让留言讯息更清楚了！

当然也可以依个人喜好添加别的特效，像是背景之类的，只要善用各种tag一定都可以做到。

小结：

今天我们成功透过pdo跟mysql指令在php的网页上把资料库中的各种资料选取後抓出来，并透过foreach的方法把他们一笔一笔show在网页上，是不是很简单呢？其实这样的架构也可以继续延伸到任何地方，只是在使用上可能还会用到一些修改或是删除的功能。

我们目前只有介绍到新增和读取，实际上包含完整的这四个功能才算是一个真正的CRUD web application(Create, Read, Update, Delete)，所以接下来我会新增一个登入功能，主要是让这个网站的拥有者可以登入取得权限，然後对留言板上的内容作修改，那今天就先这样吧！我们明天见。

<<: [Day20] MySQL 的 Stored Procedure

>>: Day 05 - Scanners

DAY8-PHP和MYSQL(二)

前言：

How to read：

小结：

Nvidia Docker安装说明(含WSL2)

如何制作万用WIN 10 系统磁碟映像

电子书阅读器上的浏览器 [Day03] 站在巨人的肩膀上，找到对的起跑点

【Day 23】为美好的 Windows 献上 ETW - Event Tracing for Windows

[Day 10] Leetcode 978. Longest Turbulent Subarray (C++)

D12-(9/12)-原相(3227)-任天堂概念股

[Day03] CH02：告诉我你是谁——变数的宣告

[Day 28] 社会对人工智慧的期待与影响 Society Concern and Impact

【Day28】Figma篇 : 实作

Day18 Laravel - CRUD .feat RESTful API