Tutorial #02: Cara Membuat Form Login PHP Mysqli

Hello Everyone, Selamat datang kembali di ahlikode.com, tujuan tutorial kali ini saya akan membuat sebuah form login dengan php mysqli. Sebelum kita lanjut, Bagi kalian yang belum paham Cara Membuat Koneksi PHP , Kalian bisa langsung mempelajarinya.

Ohiya, pada tutorial kali ini saya menggunakan sistem operasi windows 7, PHP 7  dan  menggunakan web server XAMPP Versi 7.2 yang terinclude Dengan database `MYSQLI`.

Berikut Ini Cara Membuat Form Login PHP Mysqli

Saya akan memberikan tutorial step by step, agar kalian mudah memahami tutorial ini.

Step 1:
Buatlah sebuah folder proyek Direktori di `C:\xampp\htdocs`, misalnya `login atau belajar`. pada kali ini saya memberikan nama Direktori `Belajar`.

Step 2:
Buatlah sebuah database di phpmyadmin. create database name dengan nama `Belajar`, Dengan sebuah tabel baru yang namanya `tbl_user`, dalam database belajar. Atribut ataupun Field yang terdapat pada `tbl_user` yaitu `id,Fullname,Username,Password`. ohiya, untuk id bertipe `int` dan pilih primary dan  semua Atribut atau Field untuk Length/Values diisi.

Databases tbl_user


Setelah semua selesai, klik `save`. Lalu, bagaimana untuk menambah data? kalian bisa klik menu `insert`. dan isi semua data, misalnya `id=1`, `Fullname=Ahlikode`, `Username=Ahlikode`, dan `Password=Ahlikode`. dah pastikan semua value terisi.

Step 3:
Buahlah sebuah koneksi php mysqli, pastinya kalian sudah paham tentang koneksi php mysqli ini, jadi saya tidak perlu jelaskan kembali. bagi yang belum paham bisa membaca artikel Koneksi PHP.

Script Koneksi PHP Mysqli:
 <?php
    $hostname = "localhost";
    $username = "root";
    $password = "";
    $dbname = "belajar";

    $conn = mysqli_connect($hostname, $username, $password, $dbname);
    if(!$conn){
        echo 'Koneksi Kedatabase gagal!'.mysqli_connect_error();
    }
?>

Step 4:
Buatlah sebuah file index.php dengan tampilan sederhana saja. contoh scriptnya seperti dibawah ini:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Ahlikode.com</title>
    </head>
    <body>
        <h2>Login</h2>
        <form method="POST" action="proses.php">
            Username: <input type="text" name="username">
            Password: <input type="password" name="password">  
            <input type="submit" value="Login">
        </form><br>
    </body>
    </html>

Gambar dibawah ini adalah hasil dari tampilan script diatas, cukup sederhana bukan. nah, jika kalian ingin mempercantik tampilannya, bisa menggunakan css ataupun framework bootstrap.
Form Login Simple
Step 5:
Membuat proses login, buatlah sebuat file dan kasih nama proses.php, data dari script index.php akan di eksekusi ke proses.php, karena `action="proses.php"`

 <?php
session_start();
include('koneksi.php');
$username=$_POST['username'];
$password=$_POST['password'];
$query=mysqli_query($conn,"select * from `tbl_user`
    where username='$username' and password='$password'");
if (mysqli_num_rows($query)<1){
$_SESSION['message']="Login Gagal, Silahkan coba!";
header('location:index.php');
}
else{
$row=mysqli_fetch_array($query);
$_SESSION['id']=$row['id'];
$_SESSION['FullName']=$row['FullName'];
header('location:home.php');
}
    ?>


Step 6:
Halaman Home, kalian harus membuat halaman home untuk user yang telah berhasil login. kali ini saya akan membuat tampilannya yang sangat sederhana.   

    <?php
        include('koneksi.php');
        session_start();
        if (!isset($_SESSION['id']) ||(trim ($_SESSION['id']) == '')) {
        header('location:index.php');
        exit();
        }
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Home Pages</title>
    </head>
    <body>
    <div>
        <h4>Welcome, <?= $_SESSION['FullName'];?> <a href="logout.php">Logout</a></h4>
        
    </div>
    </body>
    </html>

Step 7:
User sudah berhasil login, pastinya user bakal mencari halaman logout, nah bagaimana cara membuatnya? kalian cukup membuat sebuah file yang bernama logout.php, dan dibawah ini adalah contoh script logout.php nya  

    <?php
        session_start();
        session_destroy();
        header('location:index.php');
   ?>


Baiklah, sampai disini saja tutorial yang saya buat. jika ada error atau masalah pada script silahkan berkomentar, jika kalian suka dengan tutorial ini, salahkan share ke media sosial atau lainnya. sampai jumpa di artikel selanjutnya...

Comments

Popular posts from this blog

Cara Membuat Sidebar Dengan Bootstrap 4

Panduan Membuat Form Login Dengan Bootstrap 5

Cara Membuat Newsletter Di blog Dengan Formspree