Assalammmu'alaikum Warahmatullahi Wabarakatuh
Pada kesempatan kali ini saya akan coba melanjutkan proses pembuatan back-end atau halaman admin pada pembuatan website konter. Untuk lebih bersemangat berikut tampilan halaman gallery nya untuk admin
Karena ini melanjutkan dari artikel sebelumnya, berarti hanya membuat tabel dengan nama tbl_gallery dan buat field seperti pada gambar berikut
Langkah Kedua :
Buat file dengan nama gallery_add.php dan berikut scriptnya
<?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="admin.php">Admin</a></li> <li class="divider-vertical"></li>
<li><a href="product.php">Products</a></li> <li class="divider-vertical"></li>
<li class="active"><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>
</ul>
</div>
</div>
<body>
<div class="container">
<br>
<div class="row-fluid">
<div class="row-fluid">
<div class="span12">
<div class="span9">
<div class="alert alert-success">
<h4>Gallery</h4>
</div>
<table cellpadding="0" cellspacing="0" border="1" class="table table-striped table-bordered" id="example">
<caption></caption>
<thead>
<tr>
<th>Photos</th>
<th width="180">Action</th>
</tr>
</thead>
<?php
$query=mysql_query("select * from tbl_gallery")or die(mysql_error());
while($row=mysql_fetch_array($query)){
$id=$row['Photo_ID'];
?>
<tr>
<td><img class="img-rounded" src="<?php echo $row['Photo']; ?>" width="200" height="100"></td>
<td width = "180">
<a href="#edit_photo<?php echo $id;?>" data-toggle="modal" class="btn btn-warning" ><i class="icon-pencil icon-large"></i> Edit</a>
<a data-toggle="modal" href="#<?php echo $id; ?>" class="btn btn-danger"> <i class="icon-trash icon-large"></i> Delete</a>
<?php
include('modal_delete_photo.php');
include('edit_photos.php');
?>
</td>
</tr>
</tbody>
<?php } ?>
</table>
</div>
<?php
include('session_sidebar.php');
?>
<div class="well">
<a button class="btn btn-block btn-success" type="button" href="#addphotos" role="button" data-toggle="modal"><i class="icon-pencil"></i> Add Photos</button></a>
<?php
include('modal_addphoto.php');
?>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
*Perhatikan pada script yang berwarna merah, itu merupakan script lain yang harus kita buat.
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>
*Script diatas untuk memanggil fungsi css dan javascript
Koneksi.php
<?php
mysql_select_db('konter', mysql_connect('localhost','root',''))or die(mysql_error());
?>
*Untuk mengkoneksikan database
session.php
<?php
include('koneksi.php');
session_start();
if (!isset($_SESSION['id'])){
header('location:index.php');
}
?>
modal_delete_photo.php
Pada script ini digunakan untuk menghapus gambar dan berikut script nya.
<div id="<?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_photo.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>
Dan dibawah ini tampilannya :
script ini untuk mengedit gambar dan berikut script nya
<div id="edit_photo<?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 Photos from Gallery
</div>
<div class="modal-body">
<hr>
<form class="form-horizontal" method="POST" enctype="multipart/form-data">
<input type="hidden" value="<?php echo $row['Photo_ID']; ?>" name="Photo_ID" id="inputEmail" placeholder="Username" required>
<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>
<?php
if (isset($_POST['edit_photo'])) {
$Photo_ID = $_POST['Photo_ID'];
$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"]);
$location = "upload/" . $_FILES["image"]["name"];
mysql_query("UPDATE tbl_gallery SET Photo='$location' WHERE Photo_ID = '$Photo_ID'") or die(mysql_error());
header("Location:gallery_add.php");
}
?>
</div>
<div class="modal-footer">
<button name="edit_photo" type="submit" class="btn btn-success"><i class="icon-pencil"></i> Save</button>
<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
Dan berikut tampilannya :
Session_sidebar.php
Pada script berikut untuk menampilkan pilihan logout dan berikut scriptnya
<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 berwarna merah, itu merupakan script yang akan kita buat untuk menampilkan modal logout
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 script merah, itu merupakan untuk proses logout
logout.php
<?php
session_start();
session_destroy();
header('location:index.php');
?>
Dan berikut tampilannya :
Dan Terakhir kita akan membuat proses add photo
modal_addphoto.php
<div id="addphotos" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<div class="alert alert-gray">
Add Photos to Gallery
</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="input01">Image:</label>
<div class="controls">
<input type="file" name="image" class="font" required>
</div>
</div>
</div>
<div class="modal-footer">
<button name="save" type="submit" class="btn btn-success"><i class="icon-pencil"></i> Post</button>
<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>
</form>
</div>
</div>
<?php
if (isset($_POST['save'])) {
$image_save = 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"]);
$location = "upload/" . $_FILES["image"]["name"];
mysql_query("insert into tbl_gallery (Photo) values ('$location')") or die(mysql_error());
header('location:gallery_add.php');
}
?>
*Dan berikut tampilannya :
0 komentar:
Posting Komentar