การสร้างระบบ Login (ล็อคอิน) และ logout (ล็อคเอ้าท์) อย่างง่าย

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pprn
PHP Super Member
PHP Super Member
โพสต์: 294
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

การสร้างระบบ Login (ล็อคอิน) และ logout (ล็อคเอ้าท์) อย่างง่าย

โพสต์โดย pprn » 09/07/2018 11:28 am

    ในที่นี้จะยกตัวอย่างการส่งข้อมูลจากจากฟอร์ม (form) แบบ POST นั้น จะส่งข้อมูลไม่แสดงข้อมูลที่ส่งไปให้เห็นผ่าน URL เหมาะสำหรับการส่งข้อมูลแบบยาวๆ
เพราะไม่มีข้อจำกัดของเรื่องขนาดของข้อมูลที่ส่ง ต้องการความปลอดภัย เพราะมีหน้า Login (ล็อคอิน) - Logout (ล็อคเอาท์) ที่ต้องการส่งข้อมูลแบบเป็นความลับ

    โดยเราจะแบ่งหน้าออกเป็น 1 หน้า หน้าแรกคือ หน้า index.php ซึ่งเป็นหน้า login เข้าระบบซึ่งเราจะเป็นคนตั้ง username และ password ไว้แล้ว หน้า 2 คือ
หน้า header.html ซึ่งเป็นหน้าที่เอาไว้โชว์ส่วน Navigation Bars (เนวิเกชั่น บาร์)

    โดยเราจะตั้งให้ username คือ admin และ password คือ 123

รูปแบบการส่งข้อมูลฟอร์ม (form) แบบ POST

    โค้ด: เลือกทั้งหมด

    <form action="ไฟล์ปลายทางที่ใช้สำหรับเขียนสคิปต์ PHP" method="post">>


หน้าผลลัพธ์

    1.หน้า index.php ซึ่งเป็นหน้า login เข้าระบบ
    login.JPG
    หน้า index.php ซึ่งเป็นหน้า login เข้าระบบ

    2.หน้า index.php ซึ่งเป็นหน้า login เข้าระบบเมื่อเข้าระบบผิด
    wrong login.JPG
    หน้า index.php ซึ่งเป็นหน้า login เข้าระบบเมื่อเข้าระบบผิด

    3.หน้า index.php ซึ่งเป็นหน้า logout เมื่อเข้าระบบได้แล้ว
    logout.JPG
    หน้า index.php ซึ่งเป็นหน้า logout เมื่อเข้าระบบได้แล้ว

รูปแบบโค้ด หน้า Index.php

    โค้ด: เลือกทั้งหมด

    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>Work</title>
    </head>

    <body>
    <div class="container-fluid">
       
       
       <?php session_start(); // ถ้า login ไปแล้วจะ ย้อนกลับมาใหม่ err (ตัวแปรที่สามารถเรียกใช้งานได้ตลอดเวลา)
       
            //login name = admin password = 123;
           
       if ( isset($_POST['loginButton'] ) && ($_POST['uname'] == "admin") && ($_POST['pw'] == "123") ) { //isset ตรวจตัวแปรว่ามีไหม post[แอตทริบิวต์ชื่ออิลิเมนต์]
             $_SESSION['sid'] = session_id();  // session_id() จะทำการเก็บตัวแปรทั้งหมดที่ถูกประกาศ Session ในหน้าปัจจุบันที่กำลังทำงานอยู่
       }
           
       if ( isset($_POST['logout'] ) ){        // logout
          session_destroy( );             
          header('Location: '.$_SERVER['REQUEST_URI']);
       }
       
           
       include "header.php";

       
       if ( isset($_POST['loginButton'] ) && ($_POST['uname'] != "admin" || $_POST['pw'] != "123") ) { ?>
          <div class='alert alert-danger' >
             Username and/or Password ไม่ถูกต้อง
          </div>
       <?php } ?>
       
       
       
       <?php
          if ( isset($_SESSION['sid']) ) { ?>
             <div>
                <form class="form-horizontal" method="post">
                   <div class="form-group">
                      <center>
                         ออกจากระบบ<br>
                         <button type="submit" name="logout" class="btn btn-default" >Logout</button>
                      </center>
                   </div>
                </form>
             </div>
          <?php } else { ?>
             <div>
                <form class="form-horizontal" method="post">
                   <div class="form-group">
                      <label class="control-label col-sm-1">Username</label>
                      <div class="col-sm-5">
                         <input type="text" class="form-control" name="uname" placeholder="Username">
                      </div>
                   </div>
                   <div class="form-group">
                      <label class="control-label col-sm-1">Password</label>
                      <div class="col-sm-5">
                         <input type="password" class="form-control" name="pw" placeholder="Password">
                      </div>
                   </div>
                   <div class="form-group">
                      <div class="col-sm-offset-1 col-sm-5">
                         <button type="submit" name="loginButton" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> Login</button>
                      </div>
                   </div>
                </form>
             </div>
          <?php } ?>
       

    </div>
    </body>
    </html>

    อธิบายโค้ด
    - session_start(); คือ ถ้า login ไปแล้วจะ ย้อนกลับมาใหม่ error (ตัวแปรที่สามารถเรียกใช้งานได้ตลอดเวลา)
    - if ( isset($_POST['loginButton'] ) && ($_POST['uname'] == "admin") && ($_POST['pw'] == "123") ) คือ การตั้ง username คือ admin และ password คือ 123
    - $_SESSION['sid'] = session_id(); คือ session_id() จะทำการเก็บตัวแปรทั้งหมดที่ถูกประกาศ Session ในหน้าปัจจุบันที่กำลังทำงานอยู่
    - session_destroy( ); คือ การทำลาย session ทิ้ง
    - include "header2.php"; คือ ส่วนการเรียนหน้า include.html มา
    - if ( isset($_POST['loginButton'] ) && ($_POST['uname'] != "admin" || $_POST['pw'] != "123") ) {} คือ การแจ้งเตือนถ้า username และ password ผิดจะแจ้งเตือนตามเงือนไขในวงเล็บ

รูปแบบโค้ด หน้า header.php

    header.JPG

    โค้ด: เลือกทั้งหมด

    <nav class="navbar navbar-default">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-briefcase"></span> Work</a>
       </div>
       <div class="collapse navbar-collapse" id="collapse">
          <ul class="nav navbar-nav">
             <?php if (isset($_SESSION['sid']) ) {?>
                <li><a href="#">จัดการข้อมูล</a></li>
             <?php } else { ?> 
                <li><a href="#">จัดการข้อมูล</a></li>   <?php // หน้าเดิม ?>
             <?php } ?>
             <li><a href="#">ช่วยเหลือ</a></li>
          </ul>
       </div>
    </nav>

    อธิบายโค้ด
    - if (isset($_SESSION['sid']) ) คือ ถ้าสามารถเข้าระบบมาได้แล้วจะทำตามเงือนไขหลัง if ถ้าไม่ใช่จะทำตามเงือนไข else

----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา PHP ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP OOP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับโดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน