User hari ini : 116 
User Online: 1Membuat 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();
}
?>
Aplikasi SPPD Terbaru
Ebook Membuat Website Dinamis PHP MYSQLi
Jasa Pembuatan Website Pemda 
Software Aplikasi Perpustakaan Berbasis Web
Aplikasi Absensi Karyawan Berbasis Website
Aplikasi Pembelajaran Bahasa Jepang Berbasis Web PHP MYSQLi
Aplikasi Sistem Informasi Catering berbasis Web
Sistem Informasi Manajemen Data Penduduk PHP MYSQL
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