Januari 2017 ~ Abi Rahman Prasetyo

Selasa, 31 Januari 2017

Script CSS Background Color Kombinasi

Januari 31, 2017 No comments

Assalammu'alaikum Warahmatullahi Wabarakatuh

Saya lanjutkan merangkum artikel CSS pembuatan background. Langsung saja..

bg_colorkombinasi.php

<html>

<head>

<style>

h1 {

background-color: red;

}

div {

background-color: orange;

}

p {

background-color: blue;

}

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>

</html>

Maka Hasilnya :

Sekian dari saya, semoga bermanfaat. Salam Sukses !!!

Script CSS Background Image

Januari 31, 2017 No comments

Assalammu'alaikum Warahmatullahi wabarakatuh

Pada kesempatan kali ini, saya akan coba membagikan artikel sederhana mengenai pembuatan CSS background image.
Beri nama bg_img.php

<html>
<head>
<style>
body {
background-image: url("1.jpg");
}
</style>
</head>
<body>

<h1>Ini background gambar</h1>

<p>Artikel ini untuk background yang menggunakan gambar</p>

</body>

</html>

Hasilnya :

Kalau agar gambarnya tidak berulang.
<html>
<head>
<style>
body {
background-image: url("1.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Ini background gambar</h1>

<p>Artikel ini untuk background yang menggunakan gambar</p>

</body>
</html>

Kalau gambarnya diatur diposisi kanan
<html>
<head>
<style>
body {
background-image: url("1.jpg");
background-repeat: no-repeat;
background-position: right top;

}
</style>
</head>
<body>

<h1>Ini background gambar</h1>

<p>Artikel ini untuk background yang menggunakan gambar</p>

</body>
</html>

Dan Terakhir mengatur size gambar yang digunakan sebagai background
<html>
<head>
<style>
body {
background-image: url("1.jpg");
background-repeat: no-repeat;
background-position: left bottom;
background-size:1000px auto;
}

}
</style>
</head>
<body>

<h1>Ini background gambar</h1>

<p>Artikel ini untuk background yang menggunakan gambar</p>

</body>
</html>

Keterangan:
> left bottom artinya berada di posisi bawah kanan
> no-repeat artinya tidak mengulang gambar
> 100px artinya lebar berukuran 100px
> auto artinya tinggi otomatis menyesuaikan lebar

Oke sekian, semoga bermanfaat. Salam Sukses !!!

Script CSS Background Color

Januari 31, 2017 No comments

Assalammu'alaikum Warahmatullahi Wabarakatuh

Saya akan coba membagikan artikel singkat mengenai pembuatan script css color. Berikut scriptnya
Beri nama bg_color.php

<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>Contoh CSS Pertama</h1>
<p>Ini adalah paragrafnya</p>

</body>

</html>

Hasilnya :

Oke sekian, semoga bermanfaat !! Salam Sukses ("_")

Kumpulan Script CSS Lengkap

Januari 31, 2017 No comments

Assalammu'alaikum Warahmatullahi Wabarakatuh

Pada artikel kali ini, saya akan coba mengumpulkan script CSS yang sering digunakan dalam proses pembuatan website. Karena saya memiliki masalah, terkadang lupa script CSS yang saya butuhkan. Saya berinisiatif untuk merangkumnya di halaman ini, jadi sewaktu-waktu saya membutuhkan saya hanya melihat referensi dari artikel ini. Maka dari itu saya usahakan script CSS yang terdapat dalam halaman ini lengkap.

CSS
Background color
Background Kombinasi Warna
Background Gambar

CSS 3

Pembuatan Website Konter Pulsa Untuk Admin Product

Januari 29, 2017 No comments

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.

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>

<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>

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.

<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 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 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>

<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 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>

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>

*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>

*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');

}
?>

*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

Daftar Isi Pembuatan Website

1. Login Admin

2. Halaman Home Admin
3. Halaman Admin Product
4. Halaman Admin Gallery
5. Halaman Admin Update Information Product

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>

*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>

</head>

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> 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>

</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

<div id="edit<?php echo $id; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Edit Admin

</div>

<hr>

<label class="control-label" for="inputEmail">Username</label>

<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>

<label class="control-label" for="inputPassword">Password</label>

<input name="pw" value="<?php echo $row['password']; ?>" type="text" id="inputPassword" placeholder="Password">

</div>

<label class="control-label" for="inputPassword">Nama Lengkap</label>

<input name="fname" value="<?php echo $row['nama']; ?>" type="text" id="inputPassword" placeholder="Nama Lengkap">

</div>

<label class="control-label" for="inputPassword">No Handphone</label>

<input name="nohp" value="<?php echo $row['nohp']; ?>" type="text" placeholder="Password">

</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>

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> Yes</a>

<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> 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 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 class="control-group">

<label class="control-label">Nama</label>

<div class="controls">

<input type="text" name="nama" placeholder="Full Name" required>

</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 class="modal-footer">

<button name="save" 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>

<?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>

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

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>

<?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> Close</button>
<a href="logout.php" class="btn btn-danger"><i class="icon-signout"></i> 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 !!!

Anda bisa download file pada artikel ini untuk mempermudah
homeadmin
koneksi
header
session
modal_edit_admin
modal_delete_admin
session_sidebar
modal_addadmin
delete_admin
logout_modal
logout

Daftar Isi Pembuatan Website

1. Login Admin

2. Halaman Home Admin
3. Halaman Admin Product
4. Halaman Admin Gallery
5. Halaman Admin Update Information Product

Pembuatan Website Konter Pulsa Untuk Login Admin

Januari 28, 2017 No comments

Assalamu'alaikum Warahmatullahi Wabarakatuh

Pada malam minggu yang hujan ini, dari pada keluar ngabisin bensin dan gajelas hehe.. Lebih baik kita belajar, disini saya akan coba membagikan suatu project sederhana yang sudah saya buat namun belum sempat saya posting. Jadi tujuan pembuatan artikel ini adalah menghasilkan satu website konter pulsa sederhana yang disusun dari halaman back-end dan front-end dengan dihiasi modal untuk mempercantik tampilan dan menggunakan database MySQL. Oke siap bermalam minggu pintar? hehe (-__-)

Oke baik, pada artikel ini akan kita awali dari proses pembuatan login admin sederhana, Tidak usah terlalu mewah tampilannya namun lebih baik isi nya kita kembangkan, Namun apabila anda ingin kembangkan tampilannya, sangat dipersilahkan. Berikut adalah gambaran halaman login admin,,

Langkah Pertama :
Pastikan anda sudah mendownload XAMPP atau WOS untuk dapat membuat database MySQL.
Setelah anda sudah menginstall salah satu dari dua software tersebut, maka kita akan membuat database. Seperti berikut :

Terserah anda mau isi biodata apapun yang paling penting harus ada data username dan password yang wajib ada untuk proses registrasi. Lalu insert terlebih dahulu manual data pada field database tersebut seperti berikut :

Tenang saja, nanti akan dibuatkan proses registrasi. Sehingga tidak harus memasukan data didatabase secara manual. Oke pembuatan database selesai.

Langkah Kedua :
Membuat halaman interface login. Berikut adalah tampilan halaman login admin

Dan dibawah ini adalah script nya satu persatu :
<?php
include('koneksi.php');
?>
<?php include('header.php'); ?>
<div class="navbar navbar-inverse navber-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#"></i></a>
<ul class="nav">
</ul>
</div>
</div>

*Perhatikan pada script yang dicetak tebal, itu yang pertama merupakan link script koneksi yang di include atau dimasukan untuk memanggil koneksi database. Dan yang kedua script header untuk memanggil fungsi javascript dan css. Nanti akan kita buatkan script keduanya.

Lanjut ke script berikutnya setelah script diatas,
<div class="container">
<body>
<div class="row-fluid">
<div class="span12">
<br>
<div class="span3">
</div>
<div class="span6">
<br>
<br>
<div class="well">
<legend>
<div class="alert alert-warning"><h4>Sign In</h4> </div>
</legend>
<form class="form-horizontal" method="POST">
<div class="control-group">
<label class="control-label" for="inputEmail">Username</label>
<div class="controls">
<input type="text" id="inputEmail" name="username" placeholder="Username" class="span8" 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" class="span8" required>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" name="login" class="btn btn-warning"><i class="icon-signin"></i> Sign in</button>
</div>
</div>
*Untuk desain form login

<?php
if (isset($_POST['login'])) {
$Username=$_POST['username'];
$Password=$_POST['password'];
$result=mysql_query("select * from tbl_admin where Username='$Username' and Password='$Password'")or die (mysql_error());
$count=mysql_num_rows($result);
$row=mysql_fetch_array($result);
if ($count > 0){
session_start();
$_SESSION['id']=$row['id'];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">×</button>
<strong>Warning!</strong> Please check your Username and Password!
</div>
<?php
}
}
?>
</form>
</div>
</div>
</div>
</div>
</body>
</div>
* Script diatas untuk membuat proses login dari database. Dan apabila proses login berhasil maka akan pergi ke halaman homeadmin. Dan dibawah script keseluruhan
Beri nama Index.php

<?php
include('koneksi.php');
?>
<?php include('header.php'); ?>
<div class="navbar navbar-inverse navber-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#"></i></a>
<ul class="nav">

</ul>
</div>
</div>
<div class="container">
<body>
<div class="row-fluid">
<div class="span12">

<br>

<div class="span3">

</div>

<div class="span6">
<br>
<br>
<div class="well">
<legend>
<div class="alert alert-warning"><h4>Sign In</h4> </div>
</legend>
<form class="form-horizontal" method="POST">
<div class="control-group">
<label class="control-label" for="inputEmail">Username</label>
<div class="controls">
<input type="text" id="inputEmail" name="username" placeholder="Username" class="span8" 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" class="span8" required>
</div>
</div>
<div class="control-group">
<div class="controls">

<button type="submit" name="login" class="btn btn-warning"><i class="icon-signin"></i> Sign in</button>
</div>
</div>
<?php

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">×</button>
<strong>Warning!</strong> Please check your Username and Password!
</div>
<?php
}
}
?>
</form>
</div>
</div>
</div>
</div>
</body>
</div>

Oke selanjutnya kita akan buat beberapa link include yang belum kita buat.
Pertama koneksi.php dari include paling atas
<?php
include('koneksi.php');
session_start();
if (!isset($_SESSION['id'])){
header('location:index.php');
}

?>

Kedua 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>

Dan khusus link homeadmin.php

saya akan buat di artikel berikutnya, jadi apabila proses login anda berhasil ke link halaman homeadmin.php maka proses anda sudah berhasil

dan dibawah merupakan hasilnya seperti berikut :

Silahkan download file untuk mempermudah
koneksi
header
index

Oke sekian dan terimakasih, semoga bermanfaat dan silahkan kembangkan !! Salam sukses ^_^

Daftar Isi Pembuatan Website

1. Login Admin

2. Halaman Home Admin
3. Halaman Admin Product
4. Halaman Admin Gallery
5. Halaman Admin Update Information Product

Selasa, 31 Januari 2017

Minggu, 29 Januari 2017

Sabtu, 28 Januari 2017

Social Profiles

Full width home advertisement

Author Details

BTemplates.com

BTemplates.com

Post Page Advertisement [Top]

Recent Posts

Cari Blog Ini

Recent Posts

Recent in Sports

Comments

Recent

Bottom Ad [Post Page]

Culture

Column Left

Main Navigation Menu

Top Navigation Menu

Text Widget

Text Widget

About Me

Formulir Kontak

Unordered List

Theme Support

Facebook

STAY WITH US

Main Navigation Menu

Random Posts

Pages - Menu

Pages

Social Media Icons

Blog Archive

Blog Archive

Blogger templates

Blogger news

Blogroll

About