Membuat Login pada Website dan Teknik Proses nya dengan PHP MYSQLi
OK... pada SESI 3 kali ini kita akan membuat Halaman Login dengan Menggunakan HTML5 dan CSS3 , Serta Cara Validasi Form Login dengan HTML5 , Kemudian kita akan membuat login dengan data yang di ambil dari database Mysqli dengan PHP
Secara Garis Besar SESI III ini akan terbagi menjadi :
- Membuat Form Login dengan HTML dan CSS3 (login.php dan login.css)
- Membuat Database di phpmyadmin dengan nama "db_websaya"
- Membuat tabel di database dengan nama "users"
- Membuat Koneksi ke database dengan PHP 7 (koneksi.php)
- Otentikasi atau Verifikasi Pengguna Yang Masuk (aksi_login.php)
- Membuat Dashbord atau File (index.php dan style.css) , dan kemudian kita tambahkan script otentikasi user yang di ambil dari SESSION yang login
- Membuat Logout.php
Adapun File dalam SESI III ini yaitu :
├── indeks.php ├── koneksi.php ├── login.php
├── logout.php
├── style.css
├── login.css
1. MEMBUAT FORM LOGIN HTML DAN CSS3
OK.. sekarang kita akan membuat Form Login pada File login.php dimana cssnya bernama login.css , adapun script nya ada dibawah ini :
login.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<h2>Form Login</h2>
<form action="">
<label>Username</label>
<input type="text" name="username" required>
<label>Password</label>
<input type="password" name="password" required>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Proses PHP untuk File login.php ,
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<h2>Form Login</h2>
<?php
require('koneksi.php');
// If form submitted, insert values into the database.
if (isset($_POST['submit'])){
$username =$_POST['username'];
$username = mysqli_real_escape_string($konek,$username);
$password = $_POST['password'];
$password = mysqli_real_escape_string($konek,$password);
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' and password='$password'";
$tampil = mysqli_query($konek,$query) or die(mysqli_error($konek));
$rows = mysqli_num_rows($tampil);
if($rows==1){
$_SESSION['username'] = $username;
// Redirect user to index.php
header("Location: index.php");
exit();
}else{
echo "
<h3>Username/password Salah.</h3>
<br/>Click here to <a href='login.php'>Login</a>";
}
}else{
?>
<form action="" method="POST">
<label>Username</label>
<input type="text" name="username" required>
<label>Password</label>
<input type="password" name="password" required>
<input type="submit" value="Submit" name="submit">
</form>
<?php } ?>
</div>
</body>
</html>
login.css
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
h2,label{
font-family:Arial, Helvetica, sans-serif;
}
/* Style container*/
.container {
background-color:#fff;
padding: 20px;
width:300px;
margin:0 auto;
margin-top:100px;
}
.container h2 {
text-align: center;
}
/* Style input */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style tombol submit */
input[type=submit] {
background-color: #04AA6D;
color: white;
}
2. MEMBUAT DATABASE
Untuk Membuat database , silahkan aktifkan web server apache dan mysql di xampp , kemudian akses localhost/phpmyadmin, pada bagian TAB database buat database dengan nama "db_websaya" pada field yang disediakan , atau anda bisa menggunakan query dibawah ini :
CREATE DATABASE db_websaya;
3. MEMBUAT TABEL "USERS" DI DATABASE
Name | Type |
id_users | int(11) |
username | varchar(50) |
varchar(50) | |
password | varchar(50) |
Untuk membuat tabel anda bisa mengeksekusi query berikut ini :
CREATE TABLE IF NOT EXISTS `users` (
`id_users` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`id_users`)
);
INSERT data di tabel USERS
Disini kita akan menambahkan data pada tabel users , yang sudah kita buat berupa nama user dan password
INSERT INTO `db_websaya`.`users` (`id_users`, `username`, `email`, `password`) VALUES ('1', 'admin', 'admin@gmail.com', MD5('admin'));
4. MEMBUAT koneksi.php
koneksi.php merupakan script PHP yang kita gunakan untuk melakukan koneksi dengan database db_websaya yang kita buat di database webserver xampp phpmyadmin
<?php
$konek = mysqli_connect("localhost","root","","db_websaya");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
5. MEMBUAT index.php dan style.css
File ini kita ambil dari SESI II , dan pada bagian atas sekali , kita tambahkan script berikut ini yang merupakan script otentikasi Pengecekan Apakah User sudah Login sesuai dengan SESSION ,
<?php
session_start();
if(!isset($_SESSION["username"])){
header("Location: login.php");
exit(); }
?>
6. MEMBUAT logout.php
<?php
session_start();
// Destroying All Sessions
if(session_destroy())
{
// Redirecting ke Halaman Login
header("Location: login.php");
exit();
}
?>
Lidia Pada : 2024-08-18 13:19:24
https://alfarep.com/plastic-surgeon/In the competitive landscape of today’s digital world, local businesses need to focus on their online reputation to stand out and thrive. A positive online reputation can drive more customers to your busin