Assalamualaikum gan, jumpa lagi dengan gw. Kali ini gw akan memberikan tutorial tengang cara membuat fitur login web dengan bahasa php dan database mysql.okelah langsung aja gw kasih tutorial nya.
1. Pastikan xampp nya sudah di install jika blom silahkan install dulu, tutorialnya ada di sini
2. Hidupkan xampp nya, kilik start pada Apache dan MySQL, pastikan juga sudah berwarna hijau
3. Lalu buat folder bernama "admin" di C:\xampp\htdocs\ dengan struktur seperti berikut
4. Lalu buatlah database untuk login nya. Caranya yaitu buka di browser dan ketik localhost/phpmyadmin. Lalu klik "new" yang ada di sebelah kanan. dan di bagian "Buat basis data" isikan nama database nya. Disini gw kasih nama "idxatt_web" lalu klik "buat"
5. Setelah itu buat tabel nya, kasih nama "login" jumlah kolom nya "4" dan klik "kirim"
6. Setelah itu buat Column nya, buatlah seperti gambar. dan ingat di centang pada bagian "A_I" dan pada bagian Indeks pilih "Primary"
7. Setelah itu klik "Tambah" yang ada di bar menu atas dan isikan seperti gambar. Jika sudah klik kirim
8. Setelah itu buka text editor seperti notepad,sublime text, dll. Dan buat file bernama "config.php"
isinya seperti ini dan simpan di folder "admin" yang telah di buat tadi
<?php
//www.indexattacker.tech
$host = "localhost";
$user = "root";
$password = "";
$db_name = "idxatt_web";
mysql_connect($host, $user, $password) or die ("Koneksi Gagal");
mysql_select_db($db_name) or die ("Databas Not Fond");
?>9. Lalu buat file bernama "index.php" dan isi seperti ini dan save juga di folder "admin"
<!doctype html>
<html>
<head>
<title>Silahkan Login</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="user.png" rel="icon" type="image/png" />
<style type="text/css">
body
{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxLF4JEmTGNRl-rCCL3RuZhXMpDraqIgmpuA8U43mM6zMO-XDm0Fb1ZC_mGe1PQe0deWrS9HuD3ow-U26shI2fE8DDKckcURVEy9qU7VKI-0auJZcAvN7LuUzS7V-_rfeM6IBecdRicO2/s1600/wp.png");
background-size: cover;
background-repeat:no-repeat;
background-attachment:fixed;
font-family: Ubuntu;
}
.loginbox
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 360px;
height: 420px;
padding: 40px 40px;
box-sizing: border-box;
background:rgba(0, 5, 5, .5);
}
.user
{
width: 100px;
height:100px;
position: absolute;
margin-top:-100px;
margin-left:90px;
}
h2
{
padding: 0 0 30px;
color: #efed40;
text-align: center;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
form
{
color: black;
}
.loginbox input[type="text"],
.loginbox input[type="password"]
{
border: none;
border-bottom: 2px solid gold;
background: transparent;
color:white;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 30px;
width: 200px;
color: black;
font-size: 16px;
background: #efed40;
cursor: pointer;
border-radius: 100px;
margin-left: 30px;
}
.loginbox input[type="submit"]:hover
{
background: yellow;
color: black;
}
.loginbox a
{
color:gold;
text-decoration: none;
}
.Ajid Gans{
color:white;
font-size:15px;
}
.login_msg{
color:blue;
}
</style>
</head>
<body>
<div class="loginbox">
<div class="login_msg">
<?php
//www.indexattacker.tech
include"config.php";
if($_SERVER['REQUEST_METHOD']=='POST'){
$pass= md5($_POST['password']);
$usr = $_POST['user'];
$sqlcek=mysql_query("select * from login where user='$usr' AND password='$pass'");
$jml=mysql_num_rows($sqlcek);
$d=mysql_fetch_array($sqlcek);
if($jml > 0) {
session_start();
$_SESSION['login'] = TRUE;
$_SESSION['user'] = $d['user'];
$_SESSION['id'] = $d['id'];
$_SESSION['nama'] = $d['nama'];
header('location:home.php');
}else{
echo "Gagal";
}
}
?>
</div>
<img src= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOhknn4SeLjkdH8TwNLg3x6Bx4K56QDGDK3B0dL2CvoN2cTkGMiZsq_ScFc3bKdeWmGyahvMyMiKGpfFfLxwhiNWO2NTKlQ4tJc4KEu1sX7qv8hxUrhUWL6Y3pvr_t07qYaYJ8bouKOYj/s1600/user.png" class="user">
<h2>Login dulu</h2>
<form method="post">
<p class="Ajid Gans">Username</p>
<input type="text" name="user" placeholder="YusufAl_MAjid Gans">
<P class="Ajid Gans">Password</p>
<input type="password" name="password" placeholder="********">
<input type="submit" value="Gass !!!">
</P></form>
</div>
</body>
</html>
10. Lalu buat file dengan nama "home.php" dan isi nya sebagai berikut dan save juga di folder "admin"
<?php
session_start();
if(!isset($_SESSION['login'])){
header('location:index.php');
}
include "config.php";
?>
<html>
<head>
<title><?php echo "Welcome $_SESSION[nama]"; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family:Ubuntu;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxLF4JEmTGNRl-rCCL3RuZhXMpDraqIgmpuA8U43mM6zMO-XDm0Fb1ZC_mGe1PQe0deWrS9HuD3ow-U26shI2fE8DDKckcURVEy9qU7VKI-0auJZcAvN7LuUzS7V-_rfeM6IBecdRicO2/s1600/wp.png");
}
</style>
</head>
<body>
<center>
<?php echo "<h1>Selamat Datang $_SESSION[nama]<h1>"; ?>
</body>
</html>11. Jika sudah semuanya tinggal buka di browser ketik localhost/admin, nanti akan tampil seperti ini
12. Jika sudah memasukan username dan password yang sesuai pada database tadi maka akan tampil seperti ini
13. Nahh sudah selesai tutorial nya. Btw itu belum ada fitur logout nya,untuk tutorial membuat logout nya silahkan kunjungi di sini.
O iya btw kalo bicara tentang keamanan codingan login tersebut masih belum aman alias masih bisa hack. Untuk itu kapan kapan saja juga akan bahas bagaimana cara mengatasi nya. sampai di sini dulu ya.
Wassalamualaikum ....