Membuat Form Login Dengan PHP Dan MySQL Dengan Mudah

Membuat Form Login Dengan PHP Dan MySQL Dengan Mudah

Membuat Form Login Dengan PHP Dan MySQL Dengan Mudah - Hai, salam kenal. Di post pertama ini saya akan share bagaimana cara membuat login dengan php. Php sendiri  adalah bahasa pemrograman berbasis web yang cukup terkenal.

Kamu pasti sudah mengerti apa itu login bukan? login adalah fitur untuk memastikan bahwa halaman hanya  bisa diakses oleh  user yang berhak, misalnya halaman admin hanya bisa diakses oleh admin.

Didalam kasus ini kita akan membuat sebuah database yang berisi data untuk autentifikasi pengguna tersebut, selain  itu kita akan membuat halaman login dan halaman yang akan diakses  dengan menggunakan user yang berhak berdasarkan database yang kita buat.

Membuat Form Login Dengan PHP Dan MySQL

Membuat Database Dan Tabel
  • buat database dengan nama belajar_login (hanya contoh), kamu bisa menggunakan phpmyadmin atau juga bisa langsung di cmd.
  • buat tabel dengan nama user untuk menyimpan data login dengan field field seperti dibawah ini.
detail tabel

  • isikan data sebagai autentifikasi, saya menggunakan phpmyadmin untuk memasukkan satu data user, gunakan sha1 sebagai enkripsi password,dan selanjutnya klik go.
insert user


Membuat File Koneksi
fungsi flie koneksi adalah untuk kita koneksi ke dalam database, alangkah baiknya bagian koneksi ini dipisah agar kita tidak perlu membuat koneksi satu persatu untuk setiap halaman yang akan melakukan koneksi kedalam database.

Buat sebuah file bernama koneksi.php dan masukkan kode dibawah ini.
<?php
$host="localhost";
$user="root";
$password="";
$database="belajar_login";
$con=mysqli_connect($host, $user, $password, $database);
if (mysqli_connect_errno()) {
 echo "Koneksi gagal";
 exit();
}
?>
Membuat Form Login (Html Dan Css)
fungsi form login adalah untuk pengguna memasukkan username dan password yang selanjutnya akan diproses apakah data yang dimasukkan itu sesuai dengan yang ada di dalam database, jika data tersebut sama, maka user tersebut bisa mengakses halaman selanjutnya.

form login
didalam bagian ini, kita akan membuat login seperi diatas, buat sebuah file index.php dan isikan kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
 <title>Login</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="athoul_container">
 <h3>Login</h3>
 <form action="proseslogin.php" method="post">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="password">
  <button type="submit">Login</button>
 </form>
</div>
</body>
</html>
Buat juga file index.css  untuk melakukan style terhadap tag html diatas, dan masukkan kode dibawah ini.
*{
 margin: 0;
 padding: 0;
 font-family: Arial;
}
body{
 background: #f1f1f1;
}
.athoul_container{
 background: #fff;
 max-width: 400px;
 margin: 0 auto;
 margin-top: 120px;
 border-radius: 5px;
}
.athoul_container h3{
 padding: 20px;
 display: block;
 color: #fff;
 background:#3498db;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
}
.athoul_container form{
 padding: 30px;
}
.athoul_container input{
 display: block;
 box-sizing: border-box;
 padding: 15px;
 width: 100%;
 margin-bottom:30px;
 border: 1px solid #ccc;
 outline: 0;
 border-radius: 5px;
}
.athoul_container input:focus{
 border: 1px solid #565656;
 transition: 0.2s;
}
.athoul_container button{
 display: block;
 box-sizing: border-box;
 padding: 10px 25px;
 color: #fff;
 background: #3498db;
 border-radius: 5px;
 outline: 0;
 border:0;
 cursor: pointer;

}
.athoul_container button:hover{
 background: #565656;
 transition: 0.2s;
}
Membuat file proseslogin
Setelah kita membuat halaman login diatas, sekarang kita akan membuat halaman proses login, fungsi halaman ini adalah untuk mengecek apakah username dan password yang di inputkan oleh user sesuai dengan yang ada didalam database.

Jika yang user inputkan tidak sesuai dengan yang ada didalam database maka akan muncul peringatan dan akan di redirect ke halaman index.php, sebaliknya apabila berhasil maka akan di redirect kehalaman home.php.

buat sebuah file bernama proseslogin.php dan isikan kode dibawah ini :
<?php
include "koneksi.php";

$username=$_POST['username'];
$password=sha1($_POST['password']);

if (empty($username) || empty($password)) {
 echo "<script>alert('form masih ada yang kosong')</script>";
 echo "<script>window.location.href='index.php';</script>";
}

$query=mysqli_query($con,"select * from user where username='$username' and password='$password'");
$cek=mysqli_num_rows($query);
if ($cek > 0) {
 $data=mysqli_fetch_array($query);
 session_start();
 $_SESSION['nama']=$data['nama'];
 $_SESSION['username']=$data['username'];
 header("location:home.php");
}else{
 echo "<script>alert('Login gagal, Username atau password salah')</script>";
 echo "<script>window.location.href='index.php';</script>";
}
?>

Membuat halaman home
Didalam tutorial ini, home.php adalah halaman yang membutuhkan hak akses untuk bisa mengaksesnya.

oleh karena itu jika ingin mengaksesnya harus login terlebih dahulu dihalaman index.php.

Buat sebuah file bernama home.php dan tuliskan kode dibawah ini.
<?php
session_start();
if (!$_SESSION['username']) {
 header("location:index.php");
}
?>
<!DOCTYPE html>
<html>
<head>
 <title>Selamat datang <?= $_SESSION['nama'] ?></title>
 <style type="text/css">
  *{margin: 0;padding: 0;font-family: Arial;}
  .container{max-width: 800px;margin: 0 auto;background:#D9EDF7;padding: 20px;box-sizing: border-box;}
 </style>
</head>
<body>
 <div class="container">
  <h3>Selamat datang <?= $_SESSION['nama'] ?></h3>
  <a href="logout.php">Logout</a>
 </div>
</body>
</html>

Membuat file logout
Logout Berfungsi untuk menghapus session yang kita buat tadi dihalman proses login.php.

Buat sebuah file bernama logout.php dan isikan kode dibawah ini :
<?php
session_start();
session_destroy();
header("location:index.php");
?>
Jika semua step sudah dijalankan dengan benar, apabila kita login akan masuk kedalam halaman home.php seperti dibawah ini.

halaman home

Seorang Anime Lovers,Coding enthusiast Dan Pelajar Pengguna linux, Saat Ini Sedang Fokus Belajar Bahasa Pemrograman Web.

Share this

Related Posts

First