Contoh script login php mysql

Table of Contents Show

Langkah – langkah Membuat Form dan Database untuk Login
1. Membuat Form Login
2. Membuat Proses login
4. Desain Halaman Utama
5. Proses Logout
6. Koneksi dan Database

Hallo pembaca sekalian pada tutorial ini kita akan membahas cara membuat form login dengan php dan MySQLi database. Halaman login diperlukan untuk aplikasi berbasis web untuk memberikan batasan akses jika diperlukan. Biasanya batasan akses diperlukan seperti aplikasi web berbentuk sistem informasi, seperti sistem informasi akademik, sistem e-commerce dll.

Sebelum membuat halaman login lengkap dengan database MySQLi hal – hal yang harus di siapkan untuk adalah sebagai berikut:

1. Editor

Editor ini digunakan untuk menuliskan script seperti php, html dan css. Beberapa pilihan editor yang ada yaitu Sublime text, Visual studio code, notepad, notepad++, dll. Silahkan gunakan salah satu dari pilihan yang ada.

2. Database Server

Selain MySQL kita bisa menggunakan database server lain seperti PostgreSQL. Khusus untuk tutorial ini kita menggunakan MySQL

3. Webserver

Salah satu webserver yang sering digunakan adalah apache.

Itulah beberapa hal yang harus ada dalam pembuatan form login.

Kita dapat menginstalnya terlebih dahulu. Untuk database dan webserver dalam satu paket kita dapat menggunakan XAMPP atau WAMPP. Lebih lanjut pahami tentang kebutuhan software belajar php.

Hal yang akan diselesaikan untuk dapat membuat sistem login ini adalah antarmuka dan database. Ada beberapa halaman atau antarmuka yang harus kita buat. Silahkan ikuti langkah-langkah ini untuk membuat form login Menggunakan php dan MySQLi database.

Kita dapat membuat form dalam bentuk yang lebih sederhana. Dapat juga menggunakan bootstrap agar tampilan dari form yang dibuat menjadi lebih bagus seperti di bawah ini.

Membuat Form Login

Silahkan donwload bootstrap terlebih dahulu dan masukkan ke directory project.

Setelah memiliki bootstrap dalam project buat file login dengan menuliskan script di bawah ini:

script login.php

<?php
session_start();
?>
<!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">
    <link rel="stylesheet" href="./bootstrap-4.5.3/css/bootstrap.min.css">
    <title>Halaman Login</title>
</head>

<body>
    <form action="proses_login.php" method="POST">
        <div class="container" style="height: 500px">
            <div class="row h-100">
                <div class="col-sm-12 my-auto">
                    <div class="card w-50 mx-auto">
                        <div class="card-header bg-info">
                            <h4 class="text-white"> Halaman Login</h4>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">Username </div>
                                    <input type="text" name="username" class="form-control col-md-6">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">Password </div>
                                    <input type="password" name="password" class="form-control col-md-6">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4"> </div>
                                    <input type="submit" class="btn btn-info">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4"> </div>
                                    <?php
                                    if (isset($_SESSION['login_gagal'])) {
                                        echo '<div class="alert alert-warning" role="alert">';
                                        echo $_SESSION['login_gagal'];
                                        echo '</div> ';
                                        session_unset();
                                    }
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

</body>

</html>

simpan script ini dicectory project : htdocs/indonetsource/login.php. Akses file login.php di browser melalui url: http://localhost/indonetsource/login.php

Halaman login yang dibuat pada langkah 1 memiliki button submit action="proses_login.php" method="POST". Saat button di klik maka akan mengakses proses_login.php.

proses_login.php

<?php 
session_start();
include 'koneksi.php';
$username = $_POST['username'];
$password = $_POST['password'];

echo $username;
$query = mysqli_query($kon, "SELECT * FROM admin WHERE username='$username' AND password=md5('$password')");

    if (mysqli_num_rows($query) > 0) {
        $data = mysqli_fetch_array($query);
            $_SESSION['username'] = $data['username'];
            header("Location: halaman_utama.php");
    }    else {
    $_SESSION['login_gagal'] = "Username dan password salah" ;
    header("Location: login.php");
    }
 
?>

simpan script ini dicectory project : htdocs/indonetsource/proses_login.php

4. Desain Halaman Utama

Sebagai feedback apakah proses login yang kita buat berjalan maka akan ada 2 kondisi yang akan terjadi setelah halaman login di submit. Pertama notifikasi username dan password salah. Kedua terbukanya akses ke halaman utama jika password dan username yang dimasukkan benar.

Desainlah halaman utama seperti di bawah ini yang akan muncul ketika proses login sukses.

Halama Utama

gunakan script di bawah ini untuk membuat halaman utama.

halaman_utama.php

<?php
session_start();
if (!isset($_SESSION['username'])) {
  header("Location: login.php");
}
?>

<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">
  <link rel="stylesheet" href="./bootstrap-4.5.3/css/bootstrap.min.css">
  <title>Halaman Utama</title>
</head>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-info">
      <a class="navbar-brand" href="#">Welcome.. <?php echo $_SESSION['username'] ?></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
        </ul>
        <span class="navbar-text">
          <a href="logout.php">Logout</a>
        </span>
      </div>
    </nav>
    <p>Hello... <?php echo $_SESSION['username'] ?> <br> <b>Selamat Anda Behasil Login</b> </p>

  </div>
</body>

</html>

5. Proses Logout

Selain login dalam sebuah sistem yang mempunyai aksi login tentu diperlukan logout yang bertujuan untuk mengakhiri aktivitas user.

logout.php

<?php

session_start();
session_destroy();

header("Location: login.php");

?>

6. Koneksi dan Database

Koneksi digunakan sebagai penghubung antara form dan database. Data siapa yang memiliki akses terhadap sistem login yang kita buat perlu di simpan di database. Setelah database dimiliki maka kita memerlukan scirpt koneksi untuk menyambungkan project yang kita buat dengan dataase.

script koneksi.php

<?php
$hostname = "localhost";
$database = "indonetsource";
$username = "root";
$password = "";
$kon = mysqli_connect($hostname, $username, $password, $database);
// script cek koneksi
if (!$kon) {
    die("Koneksi Tidak Berhasil: " . mysqli_connect_error());
}
?>

Struktur Database

Silahkan buat database dan tabel. Pada contoh ini menggunakan database indonetsource dan tabel admin. Tabel admin memiliki struktur seperti berikut:

CREATE TABLE `admin` (
`username` varchar(20) NOT NULL,
`password` varchar(255) NOT NULL,
`nama` varchar(50) NOT NULL,
PRIMARY KEY (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1

Insert Data admin ke Database

Ada 3 nilai input untuk admin yaitu : username, password dan nama. Untuk password kita menggunakan hashing dengan algoritma md5. Perhatikan gambar di bawah ini, pada kolom function pilih MD5 saat input password.

Insert data admin ke database

Jika seluruh tahap di atas telah dikerjakan silahkan akses url http://localhost/indonetsource/login.php untuk melakukan testing terhadap sistem login yang dibuat.

Demikianlah tutorial tentang cara membuat form login dengan PHP dan MySQLi.