Jom Belajar Cipta Laman Login menggunakan Php !!!(Genius Corner Siri 28)

Tajuk: Login menggunakan Php

Genius Corner Siri 28

Oleh: Fariz Gaskin

 

Salam ceria buat semua pembaca budiman. Kita bertemu kembali di dalam ruangan Genius Corner kali ini. Pada minggu ini, kita akan mempelajari latihan Php bahagian ketujuh. Kali ini, kita akan belajar bagaimana membina laman login ringkas.

 

Di dalam sesebuah laman web, sistem login digunakan bagi membolehkan pengguna berdaftar untuk mengakses ruang admin. Pengguna perlu memasukkan username dan password yang kemudian akan disemak dengan pangkalan data.

 

Jika pasangan username dan password yang dimasukkan adalah berpadanan dengan maklumat yang tersimpan dalam pangkalan data, pengguna tadi akan dibawa ke ruang admin. Jika tidak, pengguna akan dibawa semula ke ruangan login.

 

Tanpa membuang masa, mari kita mulakan latihan kali ini.

 

Latihan

 

Langkah 1: Buka mana-mana text editor yang anda miliki seperti Notepad (Windows) atau TextEdit (MacOS) dan tuliskan kod aturcara berikut.

 

<?php
  ob_start();
  session_start();
?>

<?
  // error_reporting(E_ALL);
  // ini_set(“display_errors”, 1);
?>

<html lang = “en”>
  
  <head>
     <title>Tutorialspoint.com</title>
     <link href = “css/bootstrap.min.css” rel = “stylesheet”>
     
     <style>
        body {
           paddingtop: 40px;
           paddingbottom: 40px;
           backgroundcolor: #ADABAB;
        }
        
        .formsignin {
           maxwidth: 330px;
           padding: 15px;
           margin: 0 auto;
           color: #017572;
        }
        
        .formsignin .formsigninheading,
        .formsignin .checkbox {
           marginbottom: 10px;
        }
        
        .formsignin .checkbox {
           fontweight: normal;
        }
        
        .formsignin .formcontrol {
           position: relative;
           height: auto;
           webkitboxsizing: borderbox;
           mozboxsizing: borderbox;
           boxsizing: borderbox;
           padding: 10px;
           fontsize: 16px;
        }
        
        .formsignin .formcontrol:focus {
           zindex: 2;
        }
        
        .formsignin input[type=“email”] {
           marginbottom: 1px;
           borderbottomrightradius: 0;
           borderbottomleftradius: 0;
           bordercolor:#017572;
        }
        
        .formsignin input[type=“password”] {
           marginbottom: 10px;
           bordertopleftradius: 0;
           bordertoprightradius: 0;
           bordercolor:#017572;
        }
        
        h2{
           textalign: center;
           color: #017572;
        }
     </style>
     
  </head>

  <body>
     
     <h2>Enter Username and Password</h2>
     <div class = “container form-signin”>
        
        <?php
           $msg = ;
           
           if (isset($_POST[‘login’]) && !empty($_POST[‘username’])
              && !empty($_POST[‘password’])) {

              if ($_POST[‘username’] == ‘farizgaskin’ &&
                 $_POST[‘password’] == ‘1234’) {
                 $_SESSION[‘valid’] = true;
                 $_SESSION[‘timeout’] = time();
                 $_SESSION[‘username’] = ‘farizgaskin’;
                 
                 echo ‘You have entered valid use name and password’;
              }else {
                 $msg = ‘Wrong username or password’;
              }
           }
        ?>
     </div> <!– /container –>
     
     <div class = “container”>
     
        <form class = “form-signin” role = “form”
           action = “<?php echo htmlspecialchars($_SERVER[‘PHP_SELF’]);
           ?>” method = “post”>
           <h4 class = “form-signin-heading”><?php echo $msg; ?></h4>
           <input type = “text” class = “form-control”
              name = “username” placeholder = “username = farizgaskin”
              required autofocus></br>
           <input type = “password” class = “form-control”
              name = “password” placeholder = “password = 1234” required>
           <button class = “btn btn-lg btn-primary btn-block” type = “submit”
              name = “login”>Login</button>
        </form>
        
     </div>
     
  </body>
</html>

 

Langkah 2: Save hasil kerja anda tadi dengan nama login.php ke dalam folder Genius Corner seperti latihan terdahulu.

 

Langkah 3: Masukkan lokasi fail tadi di dalam ruang alamat internet pelayar untuk melihat hasilnya melalui pelayar web.

Semakan

 

Melalui latihan tadi, kita telah menghasilkan sebuah borang login yang memerlukan pengunjung memasukkan username dan password sebelum diberi akses ke ruang admin menggunakan SUPERGLOBAL.

 

Apabila butang submit ditekan, maklumat tadi dihantar kembali kepada fail yang sama melalui arahan $_SERVER[‘PHP_SELF’] di dalam tag <form>. Apabila maklumat diterima, kod aturcara syarat If diguna untuk menyemak adakah maklumat yang diterima sama seperti yang disimpan.

 

Bagi kemudahan latihan, nilai username dan password dituliskan terus ke dalam fail yang sama. Namun di dalam sistem sebenar, nilai username dan password akan disimpan di dalam pangkalan data berkeselamatan tinggi.

Pelajar dari Shah Alam sedang mengikuti bengkel GameSalad.

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Jika login berjaya, bawa pengguna ke laman lain
  2. Ubah jenis <input> username dari text kepada email
  3. Tambah arahan untuk mengosongkan session sekiranya login gagal

 

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila emailkan kepada farizgaskin@gmail.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

Leave a Reply

Your email address will not be published. Required fields are marked *