Membuat Website Sederhana Dengan PHP dan Mysql serta Modal dengan Mudah

Pada kesempatan kali ini sambil menunggu panggilan kerja dan wisuda hehe.. Saya akan coba buat sebuah project sederhana.. Pada project kali ini saya akan coba membuat website konter pulsa dengan menggunakan PHP dan MySQL. Selain itu fitur yang ditawarkan dalam website ini ialah menggunakan bootstrap modal untuk mempercantik tampilan.. Dan berikut adalah tampilan yang terdapat dalam project ini

Tampilan diatas belum sepenuhnya saya tampilkan, karena tampilan diatas hanya akan yang kita lakukan pada project ini. Langsung saja kita mulai..

Pertama : Buat database. Untuk project ini saya membuat database dengan nama konter dan membuat tabel dengan nama tbl_admin

Kedua : Siapkan file pendukung seperti css dan javascript. Saya sudah menyiapkan file css dan javascript .. FIle tersebut sangat berguna untuk desain dan modal yang akan ditampilkan dalam website ini. Kalian bisa mengubah warna atau form dan lainnya dengan keinginan kalian..
Ketiga : Buat halaman login.. Sebagaimana tampilan yang sudah saya posting diatas, kali ini kita akan membuat halaman login.. Kita buat terlebih dahulu form loginnya, saya sudah beri nama index.php berikut scriptnya bisa didownload disini ..Maka hasilnya seperti berikut

selanjutnya kita akan buat script koneksi php dengan database.. Saya beri nama koneksi.php
<?php
mysql_select_db('konter',  mysql_connect('localhost','root',''))or die(mysql_error());
?>

Note : didalam script index.php terdapat 

 if (isset($_POST['login'])) {//condition kun e click ang button

$Username=$_POST['username'];//variable ang $Username kag ang $_POST['UserName'] ay value sang textbox nga UserName

$Password=$_POST['password'];//variable ang $Username kag ang $_POST['Password'] ay value sang textbox nga Password

$result=mysql_query("select * from tbl_admin where Username='$Username' and Password='$Password'")or die (mysql_error());//query sang database 

$count=mysql_num_rows($result);//isipon kn may tyakto sa query

$row=mysql_fetch_array($result);//ma return row sa database

if ($count > 0){//kun may tyakto sa query e execute yah ang code sa dalom

session_start();//para mag start ang session

$_SESSION['id']=$row['id'];//kwaon ang id sang may tyakto nga username kag password ang ibotang sa $_SESSION['member_id']

header('location:homeadmin.php');

}else{

 

                                        ?>

                                      <br>

                                            <div class="alert alert-error">

<button type="button" class="close" data-dismiss="alert">&times;</button>

<strong>Warning!</strong> Please check your Username and Password!

</div>

                                        <?php

                                    }

                                }

                                ?>

Ini merupakan script koneksi untuk login..kalian bisa mengubah variabel serta nama tabel sesuai dengan yang anda buat didatabase.. Saya mencontohkan project ini, pada saat melakukan add admin ata menambahkan akun admin untuk login setelah berhasil login. Maka pada proses login ini kalian isi kan manual di phpmyadmin nama username dan password untuk login.. Nan ketika sudah masuk baru saya buatkan proses add admin yang bisa anda pindahkan linknya kehalaman login, agar bisa menambahkan admin secara otomatis.. Oke proses login berhasil, pada script index.php apabila proses login berhasil maka akan di redirect ke halaman home admin..

Ketiga : Membuat halaman home admin. Halaman ini akan muncul pada pertama setelah proses login berhasil.. Berikut saya sudah buatkan script home admin dengan nama homeadmin.php disini .. Maka hasilnya seperti ini

Note : Perhatikan untuk halaman login dan home admin ini saya menggunakan bootstrap, tentu saja tampilan yang anda coba tidak sama seperti tampilan diatas. Kita harus memiliki link koneksi bootstrap agar tampilan sesuai dengan css dan java script. Untuk project ini saya pisahkan agar lebih mudah digunakan karena tinggal dipanggil saja link href nya.. untuk link bootstrap saya beri nama header.php anda bisa download disini dan berikut scriptnya
 <head>
<title>Konter Pulsa</title>
   <link rel="shortcut icon" href="images/logo.png">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="css/DT_bootstrap.css">

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" media="screen">
</head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="js/DT_bootstrap.js"></script>

oke dengan anda masukan script diatas maka tampilan login dan home admin anda akan sesuai. TAPI untuk dihalaman home admin pasti anda menemunakan banyak error. Tenang sajaaaaa, hal ini dikarenakan banyak file yang belum kita masukan. Untuk selanjutnya saya akan buat session yang digunakan untuk memanggil data yang tersimpan di database. Saya beri nama session.php 

<?php

include('koneksi.php');

session_start();

if (!isset($_SESSION['id'])){

header('location:index.php');

}

?>

Masih ada error? Slow slow hehe.. Perlahanan lahan kita atasi errornya, selanjutnya kita akan tampilkan tabel admin sesuai dengan gambar halaman home admin diatas. Tabel ini berisikan data-data siapa saja yang udah terdaftar menjadi admin.. didalam tabel tersebut terdapat aksi edit dan hapus maka dari itu kita akan membuat file tersebut.. Dikarenakan kita menggunakan modal bootsrap maka saya akan kasih nama modal_edit_admin.php kalian bisa download disini dan modal_delete_admin.php kalian bisa download disini pada modal delete tersebut kita akan membuat proses deletenya saya beri nama delete_admin.php berikut scriptnya

<?php 

include('koneksi.php');

$id=$_GET['id'];

mysql_query("delete  from tbl_admin where id='$id'")or die(mysql_error());

header('location:homeadmin.php');

?>

Oke proses edit admin dan delete admin pada tabel aksi sudah selesai.. Seperti berikut hasilnya:

Selanjutnya : Kalian perhatikan dikanan tampilan home admin terdapat nama admin yang login, sign out (logout) dan add amin.. Pasti ditampilan anda belum muncul.. Disini saya membuat file dengan nama session_sidebar.php ini berfungsi untuk menampilkan nama admin dan button sign out.. Berikut script session_sidebar.php ata anda bisa download disini
<div class="span3">

 <div class="alert alert-warning">
    Welcome:
   <?php
 $id=$_SESSION['id'];
$result=mysql_query("select * from tbl_admin where id='$id'")or die(mysql_error);
$row=mysql_fetch_array($result);

$nama=$row['nama'];

echo $nama;

  ?>
 </div>
  <div class="well">
  <a button class="btn btn-block btn-danger" type="button" href="#myModal" role="button"  data-toggle="modal"><i class="icon-signout icon-large"></i> Sign Out</button></a>
<?php include("logout_modal.php");?>
 </div>

Berikutnya saya masih akan membahas proses logout ata sign out terlebih dahulu.. Saya akan buat modal logout untuk mempercantik proses logoutnya.. Saya beri nama logout_modal.php berikut scriptnya dan anda bisa download disini
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
  </div>
  <div class="modal-body">
  <div class="alert alert-gray">Are you Sure you Want to <strong>Logout?</strong></div>
  </div>
  <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Close</button>
      <a href="logout.php" class="btn btn-danger"><i class="icon-signout"></i>&nbsp;Logout</a>
  </div>
</div>
pada script diatas saya beri cetak tebal pada logout.php , hal ini dikarenakan terdapat proses logoutnya. berikut scriptnya
<?php
session_start();
session_destroy();
header('location:index.php');
?>

Dan terakhir kita akan membuat add admin.. Apabila anda perhatikan dihalaman homeadmin.php dikanan terdapat button add admin yang berfungsi untuk menambahkan admin.. Saya buat terlebih dahulu modalnya. Saya beri nama modal_addadmin.php , anda bisa download disini ..maka proses tambah admin telah berhasil dan hasilnya seperti berikut

Dan untuk project login dan membuat halaman informasi admin menggunakan modal telah selesai, Untuk halaman selanjutnya, akan saya buatkan tutorialnya pada lain waktu. Sekian dan semoga bermanfaat.. Great Day!!!!
Part 1 Part 2