PHP : Cara Membuat form login dengan php dan mysql

Assalamualaikum wr wb

Sebelumnya kita pernah membahas bagaimana cara membuat form register. nah setelah membuat menu pendaftaran tadi, kita memerlukan sebuah form login yang digunakan untuk memberi hak akses. Bagaimana cara membuat menu login tersebut? Simak penjelasan di bawah ini.

persiapan database

Untuk database akan menggunakan mysql dari xampp , kita tetap menggunakan database yang di gunakan saat menu pendaftaran perlu diperhaikan bahwa field password harus terenkripsi dengan md5, tetapi kita hanya perlu fokus pada bagian ini saja :

Nama database : dbmenu

Nama table : tbluser

NAMA	JENIS	PANJANG
Id	INT	10
Username	Varchar	50
Password	Varchar	20

Buat folder dengan nama Aplikasi

Buka eksplorer lalu cari folder xampp>htdocs kita membuat folder baru disini dengan nama foldernya adalah aplikasi. Setelah membuat foldernya kita akan membuat koneksi untuk menghubungkan dokumen kita ke database.

Koneksi.php

<pre class="language-markup"><code>
<?php 
$host = "localhost";
$user = "root";
$pass = "";
$db = "dbmenu";
$dbconnect = new mysqli ("$host", "$user", "$pass", "$db");

    if($dbconnect-> connect_error)
    {
        echo "koneksi gagal".$dbconnect ->connect_error;
        
    }
?>

Selanjutnya buat halaman menu form login indek.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="style.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    

    <div class="login">

        <form action="login.php" method="POST" onsubmit="return validasi()">

            <div >

                <label for="username">USERNAME :</label>

                <input type="text" name="username" id="username">

 

            </div>

            <div >

                <label for="username">PASSWORD:</label>

                <input type="password" name="password" id="password">

                

            </div>

            <div >

                

                <input type="submit" value="LOGIN" class="masuk">

                

            </div>

        </form>

 

    </div>



</body>

<script type="text/javascript">

    function validasi() {

        var username = document.getElementById("username").value;

        var password = document.getElementById("password").value;       

        if (username != "" && password!="") {

            return true;

        }else{

            alert('Username dan Password harus di isi !');

            return false;

        }

    }

 

</script>

</html>

Jangan lupa membuat cssnya dengan nama style.css

  
body {

    background: #3460db;

   

  }

 

   

  .login {

    margin: 8em auto;

    padding: 2em;

    width: 20em;

    background: #fff;

    border-radius: 3px;

  }

   

 

  input[type="text"],

  input[type="password"]

   {

    

    background: #efefef;

    border: 0;

    font-size: 10pt;

    margin: 6px 0px;

    padding: 8px;

    width: 95%;

  }

   

  .masuk {

      background-color: #3460db;

      color: #fff;

      padding: 1em;

      margin-top: 10px; }

Bila sudah kita lanjutkan membuat proses validasi untuk mengecek apakah ada kecocokan username dan password,


  <?php 

include 'koneksi.php';

 

$username = $_POST['username'];

$password = md5($_POST['password']);

$query = "select * from tbluser where username='$username' and password='$password'";

$login = mysqli_query($dbconnect, $query);

$cek = mysqli_num_rows($login);

 

if($cek > 0){

    session_start();

    $_SESSION['username'] = $username;

    $_SESSION['status'] = "login";

    header("location:menu/index.php");

}else{

    header("location:index.html");  

}

session_start();

folder menu untuk akses pengguna

Buat folder baru dengan nama folder menu. Kegunaannya adalah untuk menampilkan halaman setelah berhasil login Di dalamnya, kita buat indek.php dengan isi sbb:

<!DOCTYPE html>

<html lang="en">

<head>

    

 

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

<?php 

include '../koneksi.php';

 

//  session

session_start();

 

// mengecek session status apakah sudah login, bila belum akan diarahkan ke menu login

if($_SESSION['status'] !="login"){

    header("location:../index.html");

}

 

// menampilkan pesan selamat datang

echo "Halo ". $_SESSION['username'];

 

?>

<a href="logout.php"> LOGOUT</a>

 

</body>

</html>

Terakhir buat fungsi logout.php

<?php

session_start();

session_destroy();

header("location:../index.html");

bila sudah, buka localhost/aplikasi maka kira kira tampilannya akan seperti berikut

ruang teknologi

PHP : Cara Membuat form login dengan php dan mysql