Assalammu'alaikum Warahmatullahi Wabarakatuh
Bagaimana kabar kalia? Semoga selalu sehat dan selalu dalam lindungan Allah SWT.
Oke, pada artikel kali ini saya baru sempat memposting lanjutan pembuatan back-end admin untuk website konter. Dan bagi teman-teman yang belum mengikuti dari awal, saya sudah buatkan daftar isi dibagian paling bawah artikel ini. Untuk artikel ini, saya akan membagikan pembuatan halaman update information, halaman back-end ini berfungsi untuk menampilkan data informasi produk pada front-end nanti. Agar lebih bersememangat mengerjakannya, berikut adalah tampilan halaman update information produk.
Langkah Pertama :
Buat tabel dari database yang sudah dibuat sebelumnya. Beri nama tabel products dan buat field seperti berikut atau anda bisa kembangkan sesuai keinginan kalian:
Langkah Kedua :
Kita akan buat script untuk membuat halaman update product beri nama product.php
<!DOCTYPE html>
<html>
<head>
<?php include("header.php");?>
<?php
include('koneksi.php');
include('session.php');
?>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav"> <li class="divider-vertical"></li>
<li><a href="homeadmin.php">Admin</a></li> <li class="divider-vertical"></li>
<li class="active"><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">
</ul>
</div>
</div>
<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-success">
<h4>List Products</h4>
</div>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
<th>Photo</th>
<th width="180">Action</th>
</tr>
</thead>
<tbody>
<?php
$query=mysql_query("select * from products")or die(mysql_error());
while($product=mysql_fetch_array($query)){
$id=$product['Product_ID'];
?>
<tr>
<td><?php echo $product['Name']; ?></td>
<td><?php echo $product['Description']; ?></td>
<td>Rp.<?php echo $product['Price']; ?></td>
<td width="100"><img class="img-rounded" src="<?php echo $product['Photo']; ?>" width="100"></td>
<td> <a href="#edit_products<?php echo $id;?>" data-toggle="modal" class="btn btn-warning" ><i class="icon-pencil icon-large"></i> Edit</a>
<a href="#delete<?php echo $id; ?>" a data-toggle="modal" class="btn btn-danger"> <i class="icon-trash icon-large"></i> Delete</a></td>
<?php
include('modal_delete_product.php');
?>
<?php
include('modal_edit_products.php');
?>
<?php }
?>
</tr>
</tbody>
</table>
</div>
<?php
include('session_sidebar.php');
?>
<div class="well">
<a button class="btn btn-block btn-success" type="button" href="#adddessert" role="button" data-toggle="modal"><i class="icon-pencil"></i> Add Products</button></a>
<?php
include('modal_addproduct.php');
?>
</div>
</div>
</div>
</div>
</div>
</div>
Jika anda menjalankan website dari script diatas, pasti terdapat error pada beberapa bagian. Error tersebut karena terdapat beberapa file yang belum kita buat (perhatikan script yang berwarna merah).
header.php -> berfungsi untuk memanggil fungsi css, js dan bootstrap. Berikut script nya :
<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 -> script ini untuk mengkoneksikan database dengan script php. Berikut script nya:
<?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 apabila ketiga file diatas sudah dibuat, sudah mengurangi error. Dan kita akan lanjutkan script berikutnya :
modal_delete_product.php -> script ini untuk menampilkan tampilan modal untuk mempercantik proses delete. Berikut script nya :
<div id="delete_info<?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_info.php<?php echo '?id='.$id; ?>" class="btn btn-danger"><i class="icon-trash"></i> Yes</a>
<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>
</div>
</div>
Apabila kalian klik button delete pada tabel akan tampil tampilan seperti berikut :
Namun untuk proses delete nya belum bisa kan? Oke, perhatikan script modal delete diatas, terdapat script merah kan? Nah itu adalah proses deletenya. Oke langsung saja buat file dengan nama delete_info.php -> untuk proses delete product nya dan berikut script nya :
<?php
include('koneksi.php');
$id=$_GET['dessert'];
mysql_query("delete from products where Product_ID='$id'")or die(mysql_error());
header('location:product.php');
?>
Oke sudah berhasilkan? Kita lanjut
Perhatikan pada script product.php terdapat script berwarna merah lain seperti ini modal_edit_products.php -> script ini untuk menampilkan modal atau tampilan agar mempercantik proses edit atau update product. Berikut script nya :
<!-- Modal -->
<div id="edit_products<?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 Product
</div>
<div class="modal-body">
<hr>
<form class="form-horizontal" method="POST" enctype="multipart/form-data">
<div class="control-group">
<label class="control-label" for="inputEmail">Product Name:</label>
<div class="controls">
<input name="Product_ID" value="<?php echo $product['Product_ID']?>" type="hidden" id="inputEmail" placeholder="ID">
<input name="name" value="<?php echo $product['Name']; ?>" type="text" id="inputEmail" placeholder="Product Name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Description:</label>
<div class="controls">
<textarea rows="2" class="span9" placeholder="Description" name="desc"><?php echo $product['Description']; ?></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Price:</label>
<div class="controls">
<input name="price" value="<?php echo $product['Price']; ?>" type="text" id="inputEmail" placeholder="Price">
</div>
</div>
<input type="hidden" value="<?php echo $product['Photo']; ?>" name="Photo" id="inputEmail" placeholder="Photo">
<div class="control-group">
<label class="control-label" for="input01">Photo:</label>
<div class="controls">
<input type="file" name="image" class="font">
</div>
</div>
<div class="modal-footer">
<button name="edit" type="submit" class="btn btn-large btn-warning"><i class="icon-save"></i> Save</button>
<button class="btn btn-large" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> No</button>
</div>
</form>
<?php
if (isset($_POST['edit'])){
$Product_ID = $_POST['Product_ID'];
$nm = $_POST['name'];
$descr = $_POST['desc'];
$price = $_POST['price'];
$image = addslashes(file_get_contents($_FILES['image']['tmp_name']));
$image_name = addslashes($_FILES['image']['name']);
$image_size = getimagesize($_FILES['image']['tmp_name']);
move_uploaded_file($_FILES["image"]["tmp_name"], "upload/" . $_FILES["image"]["name"]);
$photo = "upload/" . $_FILES["image"]["name"];
mysql_query("update products set Name='$nm' , Description='$descr', Price='$price', Photo='$photo' where Product_ID = '$Product_ID' ")or die(mysql_error());
header('location:product.php');
}
?>
</div>
</div>
Dari script diatas, maka dibawah ini merupakan hasilnya :
Bagaimana? Sudah bisa proses edit dan delete nya? Kalo sudah kita lanjut dan kalau belum atau terdapat error silahkan komentar. Selanjutnya terdapat script berwarna merah pada product.php yakni session_sidebar.php -> berfungsi untuk menampilkan nama admin yang sedang mengakses sesuai dengan username dan password dan menampilkan button logout. Seperti pada gambar berikut :
Dari gambar diatas berikut adalah script nya :
<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>
*Perhatikan script diatas, pada script berwarna biru ke ungu-unguan merupakan script untuk menampilkan nama admin yang sedang mengakses halaman back-end ini diambil daru tabel admin.
Dan untuk yang berwarna merah merupakan script untuk menampilkan "sign out" dari tampilan berikut :
Dan berikut adalah script modal logout seperti pada gambar diatas. Beri nama dengan nama logout_modal.php
<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> Close</button>
<a href="logout.php" class="btn btn-danger"><i class="icon-signout"></i> Logout</a>
</div>
</div>
Dan pada script diatas terdapat script berwarna merah yakni logout.php, yang berfungsi untuk memproses proses logout. Maka akan kembali ke halaman login berikut :
Oke yang terakhir nih, pada script product.php paling akhir terdapat script berwarna merah yakni modal_addproduct.php yang berfungsi untuk menambahkan data product. Berikut script nya
<div id="adddessert" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<div class="alert alert-gray">
Add Product
</div>
<div class="modal-body">
<hr>
<form class="form-horizontal" method="POST" enctype="multipart/form-data">
<div class="control-group">
<label class="control-label" for="inputEmail">Product Name</label>
<div class="controls">
<input type="text" id="inputEmail" name="Product_Name" placeholder="Product Name" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Price</label>
<div class="controls">
<input type="text" id="inputPassword" name="Price" placeholder="Price" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Description</label>
<div class="controls">
<textarea name="Description" rows="5" required></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Image:</label>
<div class="controls">
<input type="file" name="image" class="font" required>
</div>
</div>
</div>
<div class="modal-footer">
<button name="add_product" type="submit" class="btn btn-success"><i class="icon-save"></i> Save</button>
<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>
</form>
</div>
</div>
<?php
if(isset($_POST['add_product'])){
$Prodname=$_POST['Product_Name'];
$price=$_POST['Price'];
$desc=$_POST['Description'];
$image = addslashes(file_get_contents($_FILES['image']['tmp_name']));
$image_name = addslashes($_FILES['image']['name']);
$image_size = getimagesize($_FILES['image']['tmp_name']);
move_uploaded_file($_FILES["image"]["tmp_name"], "upload/" . $_FILES["image"]["name"]);
$Photo = "upload/" . $_FILES["image"]["name"];
mysql_query("insert into products (Name, Price, Description, Photo) values('$Prodname','$price','$desc','$Photo')")or die(mysql_error());
header('location:product.php');
}
?>
Dan berikut adalah tampilannya :
Oke selesai. Apabila anda berhasil silahkan kembangan dan apabila terdapat error silahkan ditanyakan. Terimakasih, semoga bermanfaat dan salam sukses !!!
Daftar Isi Pembuatan Website
1. Login Admin
0 komentar:
Posting Komentar