鐵人賽 Day20-- 為我們的登入者介面增加登入功能(PHP & MySql) --完成登入功能

13th鐵人賽

SKYDOG

2021-09-20 16:27:08

6127 瀏覽

分享至

前言

可以先看一下這幾篇，是我之前有寫到關於PHP是如何去判斷我們的帳密是否輸入正確

https://ithelp.ithome.com.tw/articles/10261906 --> $_POST & $_GET 用法
https://ithelp.ithome.com.tw/articles/10260892 --> session 是什麼
https://ithelp.ithome.com.tw/articles/10261646 --> SELECT & WHERE 基本語法

那我們進入正題，先附上整段程式碼

check_login.php

<?php
    session_start();
    require_once 'db.php';

    $un = $_POST['username'];
    $pad = $_POST['password'];

    //如果使用者名稱和密碼都不為空
    if($un && $pad){
        //檢測資料庫是否有對應的username和password的sql
        $sql = "SELECT * FROM user WHERE username ='$un' and password = '$pad'";
        
        //執行sql
        $result = mysqli_query($link, $sql);
        
        //返回一個數值
        $rows=mysqli_num_rows($result);  

        //0 false 1 true
        if($rows){

            //如果密碼以及帳號一樣，顯示登入成功
            $_SESSION['is_login'] = TRUE;

            //使用PHP來轉址，前往後台
            header('Location: backend.php');

        }else{

            //要不然就是登入失敗
            $_SESSION['is_login'] = FALSE;

            //在session 存一個 msg 變數
            $_SESSION['msg'] = '登入失敗，請確認帳號密碼!!';

            header('Location: member.php');
        }
    }else{
        
        $_SESSION['msg'] = '請輸入帳號或密碼!!';
        //使用 PHP header 來轉址 返回登入頁
        header('Location: member.php');
    }
?>

member.php

<?php
    session_start();
    require_once 'db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{   /*boy身體的設定*/
            padding: 0;
            margin: 0;
            list-style: none;
            background-color:rgb(238, 231, 137)
        }
        .banner{
            background-color: darkkhaki;
            position: relative;
            width: 100%;
            height: 80px;
        }
        .banner .list1{
            position: absolute;
            right: 50px;
            width: auto;
            font-weight: 900;
            font-size: 20px;
            margin: 21px 0;
        }
        .banner .list1 a{
            text-decoration: none;
            color: #000;
            padding: 0 20px;
            transition: .3s;
        }
        .banner .text:hover {
            background-color: #fff;
            border-radius: 30px;
            font-size: 25px;
        }
        .orderlogo img{
            position: absolute;
            margin-left: 20px;
            margin-top: 10px;
            z-index: 1;
            width: 60px;
            height: 60px;
        }
        .ordertext{
            position: absolute;
            z-index: 1;
            margin-left: 90px;
            margin-top: 20px;
        }
        .ordertext h2{
            font-weight: 900;
            margin: 0;
        }
        .danger{
            text-align: center;
            position: absolute;
            margin-left: 990px;
            margin-top: -590px;
            font-weight:900;
            color: red;
            z-index: 1;
        }
        .body1{
            width: 100%;
            height: 500px;
            position: relative;
            background-color:rgb(238, 231, 137)
        }
        .orderpic img{
            position: absolute;
            left: 10px;
            top: 200px;           
            width: 800px;
            height: 300px;
            border-radius:30px;
        }
        .ordertext1{
            position: absolute;
            left: 30px;
        }
        .login{0
            background-color:#fff ;
            width: 300px;
            height: 400px;
            border: #000 1px solid;
            position: relative;
            top: 12%;
            left: 70%;
        }
        .login h2{
            text-align: center;
            font-weight: 900;
        }
        .login-buttom{
            position: absolute;
            left: 50px;
            margin: 10px 0 0;
        }
        .login-buttom a{
            padding: 0 0 0 20px;
        }
        .input{
            padding: 0 0 0 50px;
        }
        .password1 p{
            margin: 0;
        }
        .join{
            position: absolute;
            right:  15px;
            bottom: 10%;
        }
        .text p{
            margin: 0 0 0 50px;
            font-weight: 900;
        }
        .flooter{
            background: darkkhaki;
            position: relative;
            width: 100%;
            height: 100px;
        }
        .copyright{
            text-align: center;
            padding: 55px 0 0;
        }
        .copyright h2{
            font-size: 20px;
            font-weight: 900;
        }
    </style>
</head>
<body>
        <div class="orderlogo">
            <a href="member.php"><img srcset="logo.png"></a>
            <div class="ordertext">
                <h2>訂Bang當</h2>
            </div>
        </div>

        
        <div class="banner">
            <nav class="list1">
                <a href="" class="text">開始訂餐</a>
                <a href="" class="text">我的訂單</a>
            </nav>
        </div>


    <?php
        if(isset($_SESSION["is_login"]) && $_SESSION["islogin"] == TRUE):
        header('Location: backend.php');
    ?>

    <?php else:?>
    <form method="post" action="check_login.php">
        <div class="body1"> 
            <div class="orderpic">
                <div class="ordertext1">
                    <h2>歡迎使用訂Bang當系統，你一"訂"會有個非常好的體驗的</h2>
                    <ul>
                        <li>簡單方便又好用</li>
                        <li>快速尋找周遭餐廳</li>
                        <li>午餐輕鬆訂啦!!</li>
                        <li>連小學生看到都會用!!</li>
                        <li>誰還在跟你慢慢用紙抄XD</li>
                    </ul>               
                </div>

                <div class="pic">
                    <img srcset="點餐.jpg ">                    
                </div>
            </div> 
            <div class="login">
                <h2>會員登入</h2>
                <div class="login-input">
                    <div class="text account">
                        <p>帳號 :</p>
                    </div>    
                    <div class="input account1">
                        <input placeholder="請輸入帳號" name="username" id="username"
                        type="text">
                    </div>
                </div>

                <div class="input"></div>    
                    <div class="text password">
                        <p>密碼 :</p>
                    </div>    
                    <div class="input password1">
                        <input placeholder="請輸入密碼" name="password" id="password"
                        type="text">
                        <p>
                            <input type="checkbox" name="rememberme"  id="rememberme"
                            value="true" class="checked">記住我的帳號密碼
                        </p>
                        <div class="login-buttom">
                            <button type="submit">登入</button>
                            <a href="">忘記密碼?</a>
                        </div>

                    </div>

                    <div class="join">
                        <hr size="5"/>
                        <p >還沒有會員帳號，註冊帳號免費又容易</p>
                        <p align="center">
                            <a href="joinus.php" ><--馬上申請會員--></a>
                        </p>
                    </div>                    
                </div>
            </div>       
        </div>`    

        <?php
            //有訊息
            if(isset($_SESSION['msg']))
            {
                //就印出
                echo "<p class='danger'> {$_SESSION['msg']} </p>";
            }
            session_unset();
        ?>
        
    </form>
    <?php endif;?>

        <div class="flooter">
            <div class="copyright">
                <h2>© Copyright by </h2>
            </div>
        </div>

</body>
</html>

那在member.php的程式碼當中，需要注意的是這一段

<?php
    if(isset($_SESSION["is_login"]) && $_SESSION["islogin"] == TRUE):
    header('Location: backend.php');
?>
<?php else:?>
                .
                .
                .
                .
                .
<?php
    //有訊息
    if(isset($_SESSION['msg']))
    {
         //就印出
         echo "<p class='danger'> {$_SESSION['msg']} </p>";
    }
    session_unset();
?>

就是用來判斷如果當帳密是否正確，經 check_login.php 判斷後回傳的 session為true值時，
則使用 **header('Location: backend.php');**直接進入 backend.php頁面
否則繼續待在原畫面，並印出錯誤訊息