Minggu, 29 Januari 2017

Pembuatan Website Konter Pulsa Untuk Home Admin

Januari 29, 2017    No comments

Assalammu'alaikum Warahmatullahi Wabarakatuh

Pada kesempatan kali ini saya akan coba melanjutkan proses pembuatan website, sebelumnya saya sudah membuat artikel mengenai pembuatan halaman login admin. Silahkan anda lihat daftar isi dipaling bawah artikel ini untuk melihat artikel seluruhnya.

Oke langsung saja, halaman home admin ini akan tampil apabila proses login admin berhasil. Untuk lebih enak, kita lihat tampilan home admin nya. Seperti berikut :

Anda perhatikan pada gambar diatas, yang akan kita bahas pertama adalah 
Pertama : Desain Menu Bar
homeadmin.php
<?php include('header.php'); ?>
 <?php
 include('koneksi.php');
 include('session.php');
 ?> 
    <div class="navbar navbar-inverse">
    <div class="navbar-inner">
      <ul class="nav">
      <ul class="nav"> <li class="divider-vertical"></li>
      <li  class="active"><a href="homeadmin.php">Admin</a></li>  <li class="divider-vertical"></li>
      <li><a href="product.php">Products</a></li>  <li class="divider-vertical"></li>
      <li><a href="gallery_add.php">Gallery</a></li>  <li class="divider-vertical"></li>
      <li><a href="info.php">Update Information</a></li>  <li class="divider-vertical"></li>
      <li><a href="contacts.php">Messages</a></li>  <li class="divider-vertical"></li>
      <li><a href="view.php">Views</a></li>  <li class="divider-vertical"></li>
      </ul>
  </div>
  </div>

*Untuk header.php digunakan untuk memanggil fungsi-fungsi javascript dan css
*Untuk koneksi.php untuk memanggil data yang terdapat pada database dan mengkoneksikannya
*Untuk session.php untuk memanggil session pada database

header.php
 <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>

koneksi.php
<?php
mysql_select_db('konter',  mysql_connect('localhost','root',''))or die(mysql_error());
?>

session.php
<?php
include('koneksi.php');
session_start();
if (!isset($_SESSION['id'])){
header('location:index.php');
}
?>

Oke lanjutkan script homeadmin.php
<body>
      <div class="container">
        <br>
          <div class="row-fluid">
          <div class="span12">
          <div class="row-fluid">
          <div class="span12">
          <div class="span9">
          <div class="alert alert-warning">
              <h4>Admin List</h4>
      </div>
          <legend></legend>
          <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
          <caption></caption>
          <thead>
              <tr>
                <th>Username</th>
                <th>Password</th>
                <th>Nama</th>
                <th>No Handphone</th>
                <th colspan="2" width="180">Action</th>
              </tr>
          </thead>
    <tbody>
    
    <?php
    $query=mysql_query("select * from tbl_admin")or die(mysql_error());
    while($row=mysql_fetch_array($query)){
    $id=$row['id'];
    ?>
    
              <tr>
                <td><?php echo $row['username'];?></td>
                <td><?php echo $row['password'];?></td>
                <td><?php echo $row['nama'];?></td>
                <td><?php echo $row['nohp'];?></td> 
                <td> <a href="#edit<?php  echo $id;?>"  data-toggle="modal"  class="btn btn-warning" ><i class="icon-pencil icon-large"></i>& nbsp; Edit</a></td> <?php include('modal_edit_admin.php');?>
                <td> <a href="#delete<?php echo $id; ?>" a data-toggle="modal" class="btn btn-danger">  <i class="icon-trash icon-large"></i>&nbsp;Delete</a></td>
           <?php include('modal_delete_admin.php');?>
              </tr>
    <?php } ?> 
    </tbody> 
    </table>  
 </div>
 <?php
    include('session_sidebar.php');
 ?>
    <div class="well">
    <a button class="btn btn-block btn-success" type="button" href="#addadmin" role="button"  data-toggle="modal"><i class="icon-edit icon-large"></i> Add Admin</button></a>
       <?php include("modal_addadmin.php");?>
 </div>
 </div>
    </div>
    </div>
    </div>
    </div>
    </body>

Dan sudah selesai untuk mendesai halaman home admin. Namun masih ada error, dikarenakan masih ada beberapa fungsi yang belum dibuatkan script nya.
Pertama modal_edit_admin.php
<!-- Modal -->
<div id="edit<?php echo  $id; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<div class="alert alert-gray">
Edit Admin
  </div>
<div class="modal-body">
<hr>
                  <form class="form-horizontal" method="POST">
    <div class="control-group">
    <label class="control-label" for="inputEmail">Username</label>
    <div class="controls">
    <input name="id" value="<?php echo $row['id']?>" type="hidden" id="inputEmail" placeholder="ID">
    <input name="un" value="<?php echo $row['username']; ?>" type="text" id="inputEmail" placeholder="UserName">
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
    <input name="pw" value="<?php echo $row['password']; ?>" type="text" id="inputPassword" placeholder="Password">
    </div>
    </div>
<div class="control-group">
    <label class="control-label" for="inputPassword">Nama Lengkap</label>
    <div class="controls">
    <input name="fname" value="<?php echo $row['nama']; ?>" type="text" id="inputPassword" placeholder="Nama Lengkap">
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="inputPassword">No Handphone</label>
    <div class="controls">
    <input name="nohp" value="<?php echo $row['nohp']; ?>" type="text" placeholder="Password">
    </div>
    </div>
    <div class="control-group">
    <div class="controls">
<div class="modal-footer">
<button name="edit" type="submit" class="btn btn-large btn-warning"><i class="icon-save"></i>&nbsp;Save</button>
<button class="btn btn-large" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;No</button>
    </div>
    </div>
    </div>
    </form>
<?php
if (isset($_POST['edit'])){
$id = $_POST['id'];
$username = $_POST['un'];
$pw = $_POST['pw'];
$name = $_POST['fname'];
    $nohp=$_POST['nohp'];
mysql_query("update tbl_admin set username = '$un' , password = '$pw', nama='$name', nohp='$nohp' where id = '$id' ")or die(mysql_error());
header('location:homeadmin.php');
?>
<?php
}
?>
</div>
</div>

Maka apabila anda memilih edit admin pada tabel admin list, maka akan tampil seperti berikut :

Kedua modal_delete_admin.php
<div id="delete<?php echo $id; ?>" 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>Delete?</strong></div>
  </div>
  <div class="modal-footer">
      <a href="delete_admin.php<?php echo '?id='.$id; ?>" class="btn btn-danger"><i class="icon-trash"></i>&nbsp;Yes</a>
       <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Close</button>

  </div>
</div>

 Dan untuk proses menghapus buat script dengan nama delete_admin.php
<?php 
include('koneksi.php');
$id=$_GET['id'];
mysql_query("delete  from tbl_admin where id='$id'")or die(mysql_error());
header('location:homeadmin.php');

?>

Maka apabila mengklik delete pada tabel admin list akan menghasilkan tampilan seperti berikut

Ketiga modal_addadmin.php
  <div class="modal-header">
  <div class="alert alert-gray">
  Add Admin
  </div>
  <div class="modal-body">
  <hr>
 <form class="form-horizontal" method="POST">
  <div class="control-group">
    <label class="control-label" >Username</label>
    <div class="controls">
      <input type="text" name="username" placeholder="Username" required>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" name="password" placeholder="Password" required>
    </div>
  </div>
  
   <div class="control-group">
    <label class="control-label">Nama</label>
    <div class="controls">
      <input type="text" name="nama" placeholder="Full Name" required>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="inputPassword">No Handphone</label>
    <div class="controls">
      <input type="text" id="inputPassword"  name="nohp" placeholder=" No Hp" required>
    </div>
  </div>

  </div>
  <div class="modal-footer">
    <button name="save" type="submit" class="btn btn-success"><i class="icon-save"></i>&nbsp;Save</button>
      <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Close</button>
    </form>  
<?php
if(isset($_POST['save'])){
$Username=$_POST['username'];
$Password=$_POST['password'];
$FullName=$_POST['nama'];
    $Nohp    =$_POST['nohp'];
mysql_query("insert into tbl_admin (username, password, nama, nohp) values('$Username','$Password','$FullName','$Nohp')")or die(mysql_error());
header('location:homeadmin.php');
}
?>
  </div>
</div>
Maka apabila anda ingin menambahkan data admin secara otomatis, tidak seperti memasukan data manual pertama pada proses login. Akan menghasilkan tampilan seperti berikut :

Dan terakhir adalah sign out dan akan muncul bacaan welcome + nama admin, script dibawah ini di save dengan nama session_sidebar.php
<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>

Untuk memunculkan tampilan modal logout pada script diatas, perhatikan tanda merah. Pada script ditanda merah kita akan buat script dengan nama logout_modal.php untuk menampilkan tampilan modalnya
<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>

 Dan yang terakhir proses logoutnya beri nama logout.php
<?php
session_start();
session_destroy();
header('location:index.php');

?>

Maka hasilnya seperti berikut :

Oke sekian informasi yang bisa saya lanjutkan dari proses pembuatan login sebelumnya dan kali ini halaman home admin. Semoga berhasil dan kembangkan. Salam Sukses !!!

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)