Membuat Halaman Back-End Untuk Admin Dengan Mudah PHP dan MySQL- Part 2 ~ Abi Rahman Prasetyo

Sabtu, 06 Mei 2017

Membuat Halaman Back-End Untuk Admin Dengan Mudah PHP dan MySQL- Part 2

Mei 06, 2017 No comments

Assalammu'alaikum Warahmatullahi Wabarakatuh

Nah sekarang saya akan melanjutkan tutorial membuat halaman back-end admin, bagi kalian yang belum melihat tutorial sebelumnya kalian bisa baca disini agar lebih nyambung dengan tutorial yang akan saya lanjutkan kali ini. Oke kali ini saya akan membuat halaman registrasi yang akan digunakan untuk login. Nahh begini tampilannya :

Bagaimana caranya?? Jawabannya sangat-sangat mudah.. Silahkan step by step yaa..

Pertama : pastikan anda membuat terlebih dahulu databasenya.. Dan saya membuat database seperti berikut, silahkan samakan atau silahkan anda berkreasi..

Oke jika sudah kita lanjut membuat file koneksi dengan nama koneksi.php dan scriptnya seperti berikut :
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'ujian_backend';
$konek = mysql_connect($dbhost, $dbuser, $dbpass) or die ('koneksi gagal');
mysql_select_db($dbname);
?>
Maksud dari script diatas untuk mengkoneksikan database dengan script php..

Oke kita lanjut yaa,, Nah skarang kita buat file dengan nama regis.php dan berikut script dan tampilannya :
<html>
<head>
<title>Ujian Back End</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="icon_thejak.ico" type="image/x-icon">
</head>
<body>

<body>
<center>
<br>
<img src="Jakmania.jpg" alt="foto-profil" width="850" height="100">
<h1> Halaman Registrasi Admin</h1>
</center>
<div class="login">
<h2 class="judul">Silahkan Masukan Identitas Anda</h2>
<br>

<form class="form-horizontal" action="proses_regis.php" method="post">

<div class="form-group">
<label class="col-sm-2 control-label">Id</label>
<div class="col-sm-9">
<input name="id" type="text" size="50"/>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Nama</label>
<div class="col-sm-9">
<input name="nama" type="text" size="50"/>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Usia</label>
<div class="col-sm-9">
<input name="usia" type="text" size="50"/>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Username</label>
<div class="col-sm-9">
<input name="username" type="text" size="50"/>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Password</label>
<div class="col-sm-9">
<input name="password" type="password" size="50"/>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="h4_login">
Sudah Punya Akun???
<a href="index.php">Login Langsung Saja yaa Disini</a>
</div>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Daftar</button>
</div>
</div>
</form>
</body>
</html>

dan tampilannya seperti diatas

Dan jangan lupa yaa, jika kalian mengikuti tutorial awal yang memiliki file css. Nah sekarang samakan script css nya seperti berikut :
body{
background: #FEB600;
font-family: sans-serif;
}
.login{
width: 500px;
background: #FE7600;
margin: 80px auto;
padding: 5px 10px 10px 10px;
border-radius: 5px;
box-shadow: 0px 10px 20px 0px #D1D1D1;
}

.judul{
text-align: center;
color: #eee;
font-weight: normal;
}

.h4_login{
color: white;
}

.control-label{
color: white;
font-family: arial;
font-size: 12pt;
}

a{
color: white;
}

Oke selanjutnya silahkan anda buat script untuk proses registrasi dan beri nama proses_regis.php seperti berikut :
<?php
require_once ('koneksi.php');
$id = $_POST['id'];
$user = $_POST['username'];
$pass = $_POST['password'];
$usia = $_POST['usia'];
$nama = $_POST['nama'];
$cekuser = mysql_query("SELECT * FROM backend_jakmania WHERE id = '$id'");
if ( mysql_num_rows($cekuser) <> 0 ) {
echo 'User ID Sudah Terdaftar!<br/>';
echo '<a href="register.php">« Back</a>';
} else {
if ( !$id || !$username || !$password || !$usia || !$nama ) {
echo 'Masih ada data yang kosong!<br/>';
echo '<a href="regis.php">« Back</a>';
} else {
$simpan = mysql_query("INSERT INTO backend_jakmania VALUES('$id', '$nama' , '$username','$password' ,'$usia' )");
if ($simpan) {
echo 'Pendaftaran Berhasil, Silahkan <a href="index.php">Login</a>';
} else {
echo 'Proses Gagal!';
}
}
}
?>

Nah apabila proses registrasi berhasil.. maka akan muncul seperti berikut :

Nah saya belum menggunakan javascript tuh hehe jadi tampilannya masih jaduuulllll,, silahkan teman-teman kembangkan dengan menggunakan javascript biar lebih cantik lagi hehe
Bagaimana berhasil kan? Nah apabila gagal atau error silahkan tanyakan yaaaaaa...
Semoga bermanfaat dan tutorial selanjutnya adalah membahas proses login yaa. itu registrasinya sudah maka proses login akan lebih mudahhh. Okee
terimakasih dan sukses untuk kita semuaaaa. Aamiin

Wassalammu'alaikum Warahmatullahi Wabarakatuh

Sabtu, 06 Mei 2017