iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 9

DAY9-OH CRUD.

crud.jpg

前言:

上一篇的最後我們提到今天要來補完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= 'senchao0930@gmail.com';
$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,那我們就明天再見吧!


上一篇
DAY8-PHP和MYSQL(二)
下一篇
DAY10-小型成果發表
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言