Tutorial Lanjutan Membuat Halaman Login Web Admin Bootstrap Dengan Php MySQL

Berikut ini adalah lanjutan tutorial dari pembuatan halaman web admin lagin dengan bootstrap

Langkah selanjutnya lengkapi coding program file form_login.php seperti di bawah ini.dan simpan.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Daily UI - Day 1 Sign In</title>

<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/animate.css">

<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="top">
<h1 id="title" class="hidden"><span id="logo">Daily <span>UI</span></span></h1>
<form id="form1" name="form1" method="post" action="pengelola_check_login.php">
</div>
<div class="login-box animated fadeInUp"><div class="box-header">
<h2>Log In</h2>
</div> <label>Username :</label> <input name="username" type="text" id="username" /> <br> <label>Password :</label>
<input name="password" type="password" id="password" />
<br>
<button type="Submit" name="Submit" value="Submit" class="btn btn-primary pull-right">Sign In</button>
<br/>
<a href="#"><p class="small">Forgot your password?</p></a>
<div id="form1_errorloc" style="color:green">
<?php
if (isset($_GET['status'])) {
echo "username atau password yang anda masukkan salah"; }
?> </div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$('#logo').addClass('animated fadeInDown');
$("input:text:visible:first").focus();
});
$('#username').focus(function() {
$('label[for="username"]').addClass('selected');
});
$('#username').blur(function() {
$('label[for="username"]').removeClass('selected');
});
$('#password').focus(function() {
$('label[for="password"]').addClass('selected');
});
$('#password').blur(function() {
$('label[for="password"]').removeClass('selected');
});
</script>
</html>

Langka selanjutnya buat file pengelola_check_login.php dan pengelola_form_login.php di folder data Xampp-htdoc-Tutorial_Login. seperti pada gambar di bawah ini.

Lengkapi coding program Pengelola_Check_login.php seperti di bawah ini

<?php
session_start();
//file konfigurasi
include ('inc/config.php');
$username = $_POST['username'];
$password = $_POST['password'];
$password = md5($password);
$sql= "select * from pengelola where username='$username' and password='$password' ";
$userquery = mysql_query($sql) or die(mysql_error());
// $valid=false;
if (mysql_num_rows($userquery) == 1) {
header('location:index.php');
$valid = true;
$_SESSION['username'] = $username; }
if ($valid == false) { header("Location:form_login.php?status=1");
} ?>

Dan lengkapi coding program pengelola_form_login.php seperti di bawah ini

<html>
<head>
<script language="JavaScript" src="script/validator.js"
type="text/javascript" xml:space="preserve"></script>
</head>
<body>
<h1> Form Login </h1><form id="form1" name="form1" method="post" action="login_check_login.php">
<td><table align="center" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"><tr><td >username*</td>
<td > <input name="username" type="text" id="username" /></td></tr>
<tr><td>password*</td>
<td><input name="password" type="password" id="password"/></td></tr>
<tr><td colspan="2" align="right"><input type="submit" name="Submit" alue="Submit" />
<input type="reset" name="" value="Reset"/></td></tr>
<tr><td colspan='2'><div id="form1_errorloc" style="color:red"> <?php
if (isset($_GET['status'])) { echo "The username or password you entered is incorrect"; }
?></div></td></tr></table></td></form>
<script language="JavaScript" type="text/javascript" xml:space="preserve">
//<![CDATA[
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("form1");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("username","req","Username masih kosong ");
frmvalidator.addValidation("password","req","Password masih kosong ");
//]]>
</script>

Langkah selanjutnya tambahkan pengelola_logout.php dan pengelola_view.php dan di simpan dalam folder xampp-htdoc-tutorial_login. kemudian lengkapi coding program seperti di bawah ini.
pengelola_logout.php

<?php
session_start();
session_destroy();
header("location:form_login.php");
?>

Dan code program pengelola_view seperti di bawah ini.
pengelola_view.php

<a href="index.php?page=pengelola_form_add" class="btn btn-primary">Tambah</a>
<table class='table table-hover table-condensed table-bordered'>
<tr class="success">
<th>Username</th>
<th>Password</th>
<th>Operasi</th>
</tr>
<?php
/*
* kode untuk menghapus data
*/
if(isset($_GET['del'])){
$username=$_GET['id'];
$hapus ="delete from pengelola where username='$username'";
mysql_query($hapus)or die(mysql_error());
}
$sql="";
if(isset($_POST['btnCari'])){
$cari=$_POST['cari'];
//ambil data dari table admin
$sql="SELECT * FROM pengelola where username like '%$cari%'";
}else{
$sql="SELECT * FROM pengelola";
}
$result=mysql_query($sql) or die(mysql_error());
//proses menampilkan data
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><?php echo $rows['username'];?></td>
<td><?php echo $rows['password'];?></td>
<td><a href="#"> Edit</a>
<a href="#"> Hapus</a></td>
</tr>
<?php
}
//tutup koneksi
?>
<?php
if (isset($_GET['status'])) {
if ($_GET['status'] == 0) {
echo " <div style='color:blue'>Operasi data berhasil</div>";
} else {
echo "operasi gagal";
}
}
?>
</table>
<?php
mysql_close();
//close database
//tampilan siapa yang pengelola
?>

Selanjutnya kita membuat sebuah folder inc dalam xmapp-htdoc-Tutorial_Login. contoh seperti pada gambar di bawah ini.

Didalam folder inc tambahkan config.php dan lengkapi code program seperti di bawah ini.
keterangan: Fungsi config ini untuk menghubungkan koneksi database.
config.php

<?php
$host = "localhost";
// Host name
$username = "root";
// Mysql username
$password = "";
// Mysql password
$db_name = "ajar_tutorial";
// Database name
// Connect to server and select database.
mysql_connect("$host", "$username", "$password") or die("cannot connect" . mysql_error());
mysql_select_db("$db_name") or die(mysql_error());
?>

Setelah semuanya selesai, sekarang kita akan membuat data base di phpmyadmin.
Langkah pertama buka localhost/phpmyadmin dan create database (buat database). database yang saya gunakan di sini namanya ajar_tutorial. Lihat gambar di bawah ini.

untuk lebih mudah, teman-teman membuat nama database terlebih dahulu, kemudian klik SQL dan salin code ini di dalamnya lalu kirim (Go)
dan proses membuat database selesai.

CREATE TABLE IF NOT EXISTS `pengelola` (
`username` varchar(20) NOT NULL,
`password` varchar(32) NOT NULL,
PRIMARY KEY (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Lihat gambar di bawah ini.

Klik kirim (Go) dan pembuatan Database selesai.
Jalankan dan lihat hasilnya akan seperti di bawah ini.

Sekian dan terima kasih, semoga artikel ini bermanfaat.
Jangan lupa tinggalkan komentar dan share.

Breaking News

Kategori1

Kategori2

Kontak Kami

Tentan Kami

Tutorial Lanjutan Membuat Halaman Login Web Admin Bootstrap Dengan Php MySQL

Posting Komentar

Olbers Letfaar

Breaking News

Kategori1

Kategori2

Kontak Kami

Tentan Kami

Tutorial Lanjutan Membuat Halaman Login Web Admin Bootstrap Dengan Php MySQL

Next

Posting Lebih Baru

Previous

Posting Lama

Posting Komentar

Olbers Letfaar