DAY9-OH CRUD.

前言：

上一篇的最後我们提到今天要来补完Update和Delete，可是阿森不想让所有人都可以控制我们的留言，这时候就会需要用到一个登入系统，让网页知道谁是老大，谁可以任意更改！

所以今天我会一次把登入、更新、删除介绍完，真的是赚烂了赚烂了。

Cookie和Session：

要用到登入系统就不得不介绍到Session，而说到Session又不得不说到Cookies，但因为这些内容太多了，~~我们就先跳过吧！~~，我们就大概讲解一下吧！

其实我们现在在用的http( Hyper Text Transfer Protocol )是一种无状态( Stateless )的通讯协定，也就是说每一笔资料的传输对服务器端来说都是相同的。

但为了有效区分出每个使用者的差异，Cookie和Session就诞生了。

前者是透过将相关资料存在使用者的电脑中，每当浏览器需要确认使用者时，便会读取相关资料；

而後者则是将这些资料储存在服务器端，并在使用者电脑中产生Session key存入Cookie，当你再次浏览时便会透过比对这些Session key来确认你之前的使用资料。

这里阿森只是大概介绍一下两者及两者的差异，想要深入了解的话可以多上网查资料，很多大神都介绍的很详细了！

那接下来就让我们开始登入吧。

Coding!

这时候我们先创立一个新的php档案叫login.php，并在里面输入以下指令：

//要使用session就要先输入以下指令：
<?php
session_start();
?>

接下来我们在下面写一个简单的登入页面：

<!DOCTYPE html>
<html>
<head>

<title>Sen Chao's Login Page</title>
</head>
<body>
<div class="container">
<h1>Please Log In</h1>

<?php

if ( isset($_SESSION['error']) ) {
    // Look closely at the use of single and double quotes
    echo('<p style="color: red;">'.htmlentities($_SESSION['error'])."</p>\n");
    unset($_SESSION['error']);
}

?>

<form method="POST">
<label for="nam">使用者信箱</label>
<input type="text" name="email" id="nam"><br/>
<label for="id">密码</label>
<input type="text" name="pass" id="id"><br/>
<input type="submit" value="Log In">
<input type="submit" name="cancel" value="Cancel">
</form>

</div>
</body>

然後是负责处里他的php，我们写在session_start()下面就好：

//在使用者人数少的情况下，我们可以在php中直接设定简单的帐号密码，如果要全部管理可能就要用到资料库了。
//用到资料库的方法跟先前介绍的也差不多，想用的可以搭配前几天的文章试试看。

$email= '[email protected]';
$password = 'aa12345';

if ( isset($_POST['email']) && isset($_POST['pass']) ) {
    unset($_SESSION['email']);
    unset($_SESSION['pass']);
    $_SESSION['email'] = $_POST['email'];
    $_SESSION['pass'] = $_POST['pass'];

    if ( strlen($_SESSION['name']) < 1 || strlen($_SESSION['pass']) < 1 ) {
        $_SESSION['error'] = "两个都须输入喔！";
        header("Location: login.php");
        return;
    } else if(strpos($_SESSION['name'], "@")===false){
        $_SESSION['error'] = "信箱必须包含(@)符号。";
        header("Location: login.php");
        return;
    } else {
        
        if ($_SESSION['email']== $email && $_SESSION['pass']== $password) {
            // Redirect the browser to autos.php
            error_log("登入成功".$_SESSION['name']);
            header("Location: index.php");
            return;
        } else {
            $_SESSION['error'] = "Incorrect password";
            error_log("登入失败".$_SESSION['name']." $check");
            header("Location: login.php");
            return;
        }
    }
}

这时候我们回到原先的index.php，在foreach回圈中加入以下指令：

echo('<a href="edit.php?id='.$row['id'].'">Edit</a> / ');
echo('<a href="delete.php?id='.$row['id'].'">Delete</a>');

然後在style.css中加入一点装饰：

.comment a {
  background: grey;
  border-radius: 5px;
  padding: 1px;
  color: white;
  text-decoration: none;
  margin: 4px;
}

这时候我们需要新增两个php档，分别是delete.php和edit.php：

delete.php

<?php 
session_start();
require_once "pdo.php";

if ( ! isset($_SESSION['email']) ) {
  die('Not logged in');
}

 if(isset($_POST['cancel'])){
    header( 'Location: index.php');
    return;
 }

$id = $_GET['id'];

$stmt = $pdo->prepare("SELECT `name`, `msg`, `mail` FROM `msg` where id = :id");
$stmt->execute(array(":id" => $id));
$row = $stmt->fetch(PDO::FETCH_ASSOC);

if ( $row === false ) {
    $_SESSION['error'] = '查无此留言';
    header( 'Location: index.php' ) ;
    return;
}

if(isset($_POST['delete'])){
$stmt = $pdo->prepare('DELETE FROM msg WHERE id = :id');
$stmt -> execute(array(
    'id' => $id
));
$_SESSION['success'] = '成功删除';
    header( 'Location: index.php' ) ;
    return;}

?>
<html>
<p>确认删除 <?=htmlentities($row['name'])?> 留言的 <?=htmlentities($row['msg'])?> ?</p>

<form method = "post">
    <input type="submit" name="delete" value="确认">
    <input type="submit" name="cancel" value="取消">
</form>

在来是edit.php：

<?php 
session_start();
require_once "pdo.php";

$id = $_GET['id'];

$stmt = $pdo->prepare("SELECT `name`, `msg`, `mail` FROM `msg` where id = :id");
$stmt->execute(array(":id" => $id));
$row = $stmt->fetch(PDO::FETCH_ASSOC);

if ( $row === false ) {
    $_SESSION['error'] = '查无此留言';
    header( 'Location: index.php' );
    return;
}

 if(isset($_POST['cancel'])){
    header( 'Location: index.php');
    return;
 }

 if(isset($_POST['save'])){
    $stmt = $pdo ->prepare("UPDATE msg SET name= :name, msg= :msg, mail= :mail where id= :id");
    $stmt ->execute(array(
        ":name" => $_POST['name'],
        ":msg" => $_POST['msg'],
        ":mail" => $_POST['mail'],
				":id" => $id
));
    header("Location: index.php");
    return;
 }

?>

<html>
<h1>编辑留言</h1>
<form method="post">
    <p>称呼：
    <input type="text" name="name" value="<?=$row['name']?>"></p>
    <p>信箱：
    <input type="text" name="mail" value="<?=$row['mail']?>"></p>
    <p>讯息：
    <input type="text" name="msg" value="<?=$row['msg']?>"></p>
    
    
        <input type="submit" name="save" value="储存">
        <input type="submit" name="cancel" value="取消">
    </p>
</form>

我们可以看到在上面的index.php里anchor tag的档案名称後有加上" ?id= "，这其实就是透过GET这个方法在页面之间传递讯息。

在来我们要在index.php中加入一个登入按钮，我们可以透过下面这串：

<h4>Sen Chao <a class="login" href="login.php">登入</a></h4>

这样就可以在h4姓名旁边加入一个登入按钮。

再加上一点装饰：

.login {
  right: 0;
  text-decoration: none;
  font-size: 1rem;
  background: gray;
  border-radius: 5px;
  padding: 5px;
  color: white;
}

都完成之後我们的网页大概是这样：

Untitled

编辑页面：

Untitled

删除页面：

Untitled

小结：

这样我们一个页面中的CRUD就都完成罗！PHP的各种基本应用也大致介绍完了，接下来会介绍一个方法让各位上架自己做好的网页，就是使用先前提过的ngrok，那我们就明天再见吧！

<<: DAY6：Kaggle-San Francisco Crime Classification（上）

>>: 谈谈讯息元件

IT铁人DAY 10－Abstract Factory 抽象工厂

杂谈

Day7 - pandas(2)DataFrame基本概念

杂谈

【Day10】「如果肚子饿了，就吃香蕉」--流程判断逻辑

杂谈

Day 03 - jS 微基础之ES6变数： let, const

杂谈

Day 24 - Input filtering 相关攻击

杂谈

day 27 - 持续改善, 持续优化, 持续重构

今天的你和去年的你写出来的程序会是一样的吗？程序语言会不断地更新迭代,不断地有新的功能或套件出现,...

Day 25. Hashicorp Vault: Diagnose Vault server

Hashicorp Vault: Diagnose Vault server 这是Vault 1.8...

[Day6] Git版本控制 - 基本操作篇（MacOS）

搞定 Mac 的软件和终端机，接下来要学习一步步把其他工具的使用环境建立起来，并学习如何去运用。 1...

Day 06：我们未来再相见

前言一因为一些原因，今天应该是我铁人赛的完赛日。完成了 20%，剩下的 80%，就留给大家去阅读更...

Unity - 互动功能(终章)

按钮 ( Button ) 执行 [ GameObject > UI > Button ...