membuat autentikasi login dengan PHP 7 mysql / mariaDB

1. Buat database dan tabel contoh

-- nama database sesuaikan dengan representasi nama masing-masing.
CREATE DATABASE IF NOT EXISTS `belajar_loginphppri` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE `belajar_loginphppri`;

-- sesuaikan nama tabel dengan representasi nama masing-masing.
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL,
`nama` varchar(225) NOT NULL,
`username` varchar(225) NOT NULL,
`password` varchar(225) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- contoh data user sesuaikan dengan representasi nama masing-masing.

INSERT INTO `user` (`id`, `nama`, `username`, `password`) VALUES
(1, 'Priyadi', 'priyadi', '202cb962ac59075b964b07152d234b70');
COMMIT;

2. Buat koneksi ke database yang telah dibuat sebelumnya dengan nama file config.php :

<?php
// sesuaikan dengan nama server, username server database, password jika ada, dan nama database masing-masing.
$mysqli = new mysqli("localhost:3307","root","","belajar_loginphppri");
// Check connection
if ($mysqli -> connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
exit();
}
?>

3. Buat halaman awal web bernama index.php

<html>
<head>
<title>Membuat Form LOGIN dengan Validasi dengan Javascript - Universitas STEKOM</title>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <br/>
   <br/>
   <center><h2>Universitas STEKOM</h2></center>
   <br/>
   <div class="login">
   <br/>
        <form action="login.php" method="post" onSubmit="return validasi()">
            <div>
                <label>Username:</label>
                <input type="text" name="username" id="username" />
            </div>
            <div>
                <label>Password:</label>
                <input type="password" name="password" id="password" />
            </div>
            <div>
                <input type="submit" value="Login" class="tombol">
            </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>

3. Membuat autentikasi login dengan nama login.php

<?php
// memanggil koneksi ke database
include 'config.php';
// menangkap posting nilai dari form index.php
$username = $_POST['username'];
$password = md5($_POST['password']);
// melakukan query ke database
$login = $mysqli->query("select * from user where username='$username' and password='$password'");
//penghitungan hasil query
$cek = $login->num_rows;
//kontrol proses
if($cek > 0){
   //jika username dan password cocok
   session_start();
   $_SESSION['username'] = $username;
   $_SESSION['status'] = "login";
   header("location:admin/index.php");
}else{
   //jika username dan password tidak cocok.
   header("location:index.php");
}

?>

4. Membuat styling css dengan style.css

body {
    background: #3498db;
    font-family: sans-serif;
}

h2 {
    color: #fff;
}

.login {
    padding: 1em;
    margin: 2em auto;
    width: 17em;
    background: #fff;
    border-radius: 3px;
}

label {
    font-size: 10pt;
    color: #555;
}

input[type="text"],
input[type="password"],
textarea {
    padding: 8px;
    width: 95%;
    background: #efefef;
    border: 0;
    font-size: 10pt;
    margin: 6px 0px;
}

.tombol {
    background: #3498db;
    color: #fff;
    border: 0;
    padding: 5px 8px;
    margin: 20px 0px;
}

5. Membuat folder baru pada project bernama admin, Kemudian membuat file index.php (Halaman ini akan dikunjungi jika login berhasil).

<?php
// memanggil config.php diluar folder
include '../config.php';

// mengaktifkan session
session_start();

// cek apakah user telah login, jika belum login maka di alihkan ke halaman login
if($_SESSION['status'] !="login"){
header("location:../index.php");
}

// menampilkan pesan selamat datang
echo "Hai, selamat datang ". $_SESSION['username'];

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