Assalammu'alaikum Warahmatullahi Wabarakatuh
Bagaimana kabarnya teman-teman? Semoga sehat selalu yaa. Untuk mengisi waktu-waktu menunggu panggilan kerja, ada baiknya kita menambah ilmu untuk menambah keahlian kita di cv ya hehe
Oke, pada artikel ini saya akan melanjutkan proses pembuatan back-end admin untuk proses pembuata website konter pulsa sederhana. Melanjutkan dua proses yang sebelumnya sudah dibuat yaitu membuat halaman login admin dan halaman home admin yang bisa kalian lihat didaftar isi dibagian paling bawah artike ini, kali ini saya akan membahas proses pembuatan halaman product. Halaman product ini berfungsi untuk menampilkan harga serta deskripsi produk dihalaman front-end nanti. Langsung saja yaaaa..
Kita Buat terlebih dahulu database dengan konter dan nama tabel products
Lebih nyaman nya kita lihat terlebih dahulu tampilan halaman product nya ya biar semangat ngerjainnya.
Kita Buat terlebih dahulu database dengan konter dan nama tabel products
Lebih nyaman nya kita lihat terlebih dahulu tampilan halaman product nya ya biar semangat ngerjainnya.
Pertama :
Kita akan buat script halaman product ini dan beri nama product.php
<?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">
<li><a href="view.php">Views</a></li> <li class="divider-vertical"></li>
</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>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>
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>
Note : Untuk yang diberi tanda merah, itu adalah file pendukung yang akan kita buat. Apabila tidak ada maka halaman website akan error.
Kedua :
Setelah diatas script untuk halaman product, selanjutnya kita akan masukan file pendukung yang diberi warna merah.
1. header.php
Fungsi script header ini untuk memanggil fungsi javascript dan css.
<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>
2. koneksi.php
Fungsi script koneksi ini untuk memanggil database dan mengkoneksikannya dengan script php
<?php
mysql_select_db('konter', mysql_connect('localhost','root',''))or die(mysql_error());
?>
3. session.php
<?php
include('koneksi.php');
session_start();
if (!isset($_SESSION['id'])){
header('location:index.php');
}
?>
4. modal_edit_product.php
Dalam script ini akan menghasilkan tampilan modal untuk mengedit data produk dan proses 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>
Dan berikut hasilnya :
5. modal_delete_product.php
Pada script dibawah ini berfungsi untuk menampilkan modal untuk menghapus data produk yang terdapat dalam list produk
<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_product.php<?php echo '?dessert='.$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>
*Perhatikan script berwarna merah itu untuk melakukan proses penghapusan datanya
delete_product.php
<?php
include('koneksi.php');
$id=$_GET['dessert'];
mysql_query("delete from products where Product_ID='$id'")or die(mysql_error());
header('location:product.php');
?>
Dan berikut adalah hasilnya :
6. session_sidebar_product.php
Script diatas berfungsi untuk membuat desain di bagian pinggir yang terdiri dari add admin dan sign out.
<div class="span3">
<div class="alert alert-warning">
Welcome: Admin
<?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>
Oke kita buat terlebih dahulu script 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>
*Perhatikan yang diberi warna merah, itu merupakan proses untuk logoutnya jadi setelah muncul modal logout. Apabila anda ingin keluar dan memilih yes maka proses logout akan berfungsi
logout.php
<?php
session_start();
session_destroy();
header('location:index.php');
?>
Dan berikut merupakan tampilannya :
Dan terakhir dari script product.php terdapat yang warna merah yaitu add admin.
modal_addproduct.php
<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');
}
?>
<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');
}
?>
*Berfungsi untuk menambahkan product yang akan dipasarkan. Dan berikut hasilnya
Oke sekian yang bisa dapat saya bagikan, silahkan anda kembangkan. Salam Sukses !!
Anda bisa download file pada artikel ini untuk mempermudah
homeadmin
koneksi
header
session
modal_edit_product
modal_delete_product
delete_product
session_sidebar
modal_addproduct
logout_modal
logout
homeadmin
koneksi
header
session
modal_edit_product
modal_delete_product
delete_product
session_sidebar
modal_addproduct
logout_modal
logout
Daftar Isi Pembuatan Website
1. Login Admin
0 komentar:
Posting Komentar