Pada Sebelumya Saya Sudah Membahas Cara Menjalankan Localhost Di Android (Karna Disini Wajib Menjalankan Localhost)
Yang Kalian Harus Membuat File Php Dengan nama koneksi.php, File Ini Adalah Untuk Menconnectkan Ke Database
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "latihan";
$db = new mysqli($hostname, $username, $password, $dbname);
?>
Lalu Simpan...
Keterangan
$hostname = "localhost" Adalah Adalah server Localhost Yang Sebelumnya Kita Pelajari.
$username = "root" adalah username DataBase Kalian Saya Menggunakan Username Bawaan, Jadi Saya menggunakan Username "root"
$pass = "password" Adalah Password Database Itu Sendiri, Saya Menggunakan Password Bawaan Jadi Saya Kosongkan, Jika Kalian Baru Install Phpmyadmin tidak akan ada password hanyalah username yaitu "root" Bisa Mengaturnya Sendiri.
$dbname = "latihan" Adalah Nama Database Kalian, Ini Bebas Bisa diganti Dengan Nama Yang Lain, Tapi Di Tutorial Kaliini Sebaiknya Mengikuti Arahan Supaya Work.
Sekarang kita Membuat File baru beri nama daftar.php
ini Digunakan Saat User Ingin Mendaftar
<?php
session_start();
if(isset($_SESSION['username'])) {
header('location:index.php'); }
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Login With CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action="prosesdaftar.php" method="post">
<h1>Silahkan Daftar</h1>
<input type="text" name="email" placeholder="Email" />
<input type="text" name="username" placeholder="Nama Pengguna" required="required"/>
<input type="password" name="password" placeholder="Kata Sandi" required="required"/>
<input type="submit" name="submit">
</form>
</body>
</html>
Lalu Simpan...
Sekarang buat File beri nama prosesdaftar.php
File Ini Bekerja Memproses File daftar.php
yang sudah tadi kita buat
<?php
require_once("koneksi.php");
$email = $_POST['email'];
$username = $_POST['username'];
$pass = $_POST['password'];
$sql = "SELECT * FROM user WHERE username = '$username'";
$query = $db->query($sql);
if($query->num_rows != 0) {
echo "<div align='center'>Username Sudah Terdaftar! <a href='daftar.php'>Back</a></div>";
} else {
if(!$username || !$pass || !$email) {
echo "<div align='center'>Masih ada data yang kosong! <a href='daftar.php'>Back</a>";
} else {
$data = "INSERT INTO user VALUES (NULL, '$email', '$username', '$pass')";
$simpan = $db->query($data);
if($simpan) {
echo "<div align='center'>Pendaftaran Sukses, Silahkan <a href='login.php'>Login</a></div>";
} else {
echo "<div align='center'>Proses Gagal!</div>";
}
}
}
?>
Lalu Simpan...
Sekarang Buat File Baru Beri Nama login.php, File Ini Berfunsi Untuk
User Yang Ingin Ke Halaman Yang Sudah Di tentukan
<?php
session_start();
if(isset($_SESSION['username'])) {
header('location:index.php'); }
require_once("koneksi.php");
?>
<title>Form Login</title>
<div align='center'>
<form action="proseslogin.php" method="post">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="kotak_login">
<p class="tulisan_login">Silahkan login</p>
<form>
<label>Username</label>
<input type="text" name="username" class="form_login" placeholder="username...">
<label>Password</label>
<input type="password" name="password" class="form_login" placeholder="password...">
<input type="submit" class="tombol_login" value="LOGIN">
<a href="daftar.php" ><input type="" class="daftar" value="DAFTAR">
<br/>
<br/>
<center>
<a class="link" href="">kembali</a>
</center>
</form>
</div>
</body>
</html>
Lalu Simpan...
Buat File php Beri Nama proseslogin.php
File Berfungsi Memproses File login.php
Yang Sudah Kita
<?php
session_start();
require_once("koneksi.php");
$email = $_POST['email'];
$username = $_POST['username'];
$pass = $_POST['password'];
$sql = "SELECT * FROM user WHERE username = '$username'";
$query = $db->query($sql);
$hasil = $query->fetch_assoc();
if($query->num_rows == 0) {
echo "<div align='center'>Username Belum Terdaftar! <a href='login.php'>Back</a></div>";
} else {
if($pass <> $hasil['password']) {
echo "<div align='center'>Password salah! <a href='login.php'>Back</a></div>";
} else {
$_SESSION['username'] = $hasil['username'];
header('location:index.php');
}
}
?>
Sekarang Kita Buat index.php
Untuk Halaman admin
<?php
session_start();
if(!isset($_SESSION['username'])) {
header('location:login.php');
} else {
$username = $_SESSION['username'];
}
?>
<title>Halaman Sukses Login</title>
<div align='center'>
Selamat Datang, <b><?php echo $username;?></b> <a href="logout.php"><b>Logout</b></a>
</div>
Lalu Kita buat baru beri logout.php
File ini untuk melogout dari halaman admin
<?php
session_start();
session_destroy();
?>
<div align="center">
<h2>Anda telah berhasil logout..</h2>
Silahkan klik <a href="login.php">disini</a> untuk login kembali
</div>
Sekarang kita buat baru 2 file css dengan nama stlyes.css untuk mempercantik halaman login nya
body{
font-family: sans-serif;
background: #d5f0f3;
}
h1{
text-align: center;
/*ketebalan font*/
font-weight: 300;
}
.tulisan_login{
text-align: center;
/*membuat semua huruf menjadi kapital*/
text-transform: uppercase;
}
.kotak_login{
width: 350px;
background: white;
/*meletakkan form ke tengah*/
margin: 80px auto;
padding: 30px 20px;
}
label{
font-size: 11pt;
}
.form_login{
/*membuat lebar form penuh*/
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
.tombol_login{
background: #46de4b;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
}
.daftar{
text-align:center;
background: #FF0000;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
}
.link{
color: #232323;
text-decoration: none;
font-size: 10pt;
}
Lalu Kita Buat file css 1 lagi dengan nama style.css awas!!!! Salah huruf tadi sebelumnya yang kita tulis styles.css, sekarang style.css, file ini berfungsi untuk
Mempercantik halaman daftar
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
margin: 70px auto;
background: #2a3644;
width: 347px;
text-align: center;
padding: 40px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
form > h1 {
color: #f4f4f4;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
font-weight: 400;
margin-bottom: 20px;
}
input {
background: rgba(0, 0, 0, 0.2);
color: #fff;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
display: block;
width: 269px;
padding: 15px;
margin-bottom: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
outline: none;
}
input:focus {
background: rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
::-webkit-input-placeholder {
color: rgba(225, 225, 225, 0.4);
}
:-moz-placeholder {
color: rgba(225, 225, 225, 0.4);
}
::-moz-placeholder {
color: rgba(225, 225, 225, 0.4);
}
:-ms-input-placeholder {
color: rgba(225, 225, 225, 0.4);
}
button {
position: relative;
display: block;
margin-top: 15px;
margin-bottom: 15px;
padding: 17px;
width: 270px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
font-size: 1.2em;
background: #f26964;
color: #f4f4f4;
box-shadow: 0px 3px 0px #ab4b47;
cursor: pointer;
}
button:active {
top: 3px;
box-shadow: none;
}
