1.Buat satu buah database dengan cara create database login
buat satu buah table
CREATE TABLE IF NOT EXISTS `pengguna` (
`username` varchar(20) NOT NULL,
`password` varchar(32) NOT NULL,
`level` varchar(10) NOT NULL DEFAULT 'admin',
PRIMARY KEY (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `pengguna`
--
INSERT INTO `pengguna` (`username`, `password`, `level`) VALUES
('admin', '21232f297a57a5a743894a0e4a801fc3', 'admin'),
('kabag', '1a50ef14d0d75cd795860935ee0918af', 'kabag');
2. Buat seperti tampilan berikut
3. Buat koneksi untuk mengghubungkan dengan database simpan file di folder config
dengan nama koneksi.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "login";
//koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("koneksi gagal");
mysql_select_db($database) or die("database tidak ada")
?>
4. Buat file css nya untuk mempercantik tampilan simpan dengan nama style.css di folder css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.about {
margin: 80px auto;
padding: 8px;
width: 260px;
font: 10px/18px 'Lucida Grande', Arial, sans-serif;
color: #bbb;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
background: #383838;
background: rgba(34, 34, 34, 0.8);
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}
.about a {
color: #eee;
text-decoration: none;
border-radius: 2px;
-webkit-transition: background 0.1s;
-moz-transition: background 0.1s;
-o-transition: background 0.1s;
transition: background 0.1s;
}
.about a:hover {
text-decoration: none;
background: #555;
background: rgba(255, 255, 255, 0.15);
}
.about-links {
height: 30px;
}
.about-links > a {
float: left;
width: 50%;
line-height: 30px;
font-size: 12px;
}
.about-author {
margin-top: 5px;
}
.about-author > a {
padding: 1px 3px;
margin: 0 -1px;
}
/*
* Copyright (c) 2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
color: #bcc0c8;
}
:-ms-input-placeholder {
color: #bcc0c8 !important;
}
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #ebc9a2;
}
input, textarea, select, label {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login {
margin: 50px auto;
padding: 18px 20px;
width: 200px;
background: #3f65b7;
background-clip: padding-box;
border: 1px solid #172b4e;
border-bottom-color: #142647;
border-radius: 5px;
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
background-image: radial-gradient(cover, #437dd6, #3960a6);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
margin-bottom: 20px;
font-size: 16px;
font-weight: bold;
color: white;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-input {
display: block;
width: 100%;
height: 37px;
margin-bottom: 20px;
padding: 0 9px;
color: white;
text-shadow: 0 1px black;
background: #2b3e5d;
border: 1px solid #15243b;
border-top-color: #0d1827;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
outline: 0;
background-color: #32486d;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
line-height: 35px;
}
.login-submit {
display: block;
width: 100%;
height: 37px;
margin-bottom: 15px;
font-size: 14px;
font-weight: bold;
color: #294779;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
background-clip: padding-box;
border: 1px solid #284473;
border-bottom-color: #223b66;
border-radius: 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
background: #a4c2f3;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
text-align: center;
}
.login-help > a {
font-size: 11px;
color: #d4deef;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
text-decoration: underline;
}
5. buat file dengan nama content.php unutk membedakan pada saat login
<?php
include "config/koneksi.php";
$page = $_GET['page'];
if ($page=="home" && $_SESSION['level']=="admin"){
echo '
<h6 class="red">Home</h6>
<br />
<p>Selamat datang di halaman Admnistrator itsaudara.com.<br>
Silahkan pilih menu untuk melakukan pengolahan data.</p>
';
}
if ($page=="home" && $_SESSION['level']=="kabag"){
echo '
<h6 class="red">Home</h6>
<br />
<p>Selamat datang di halaman Kepala Bagian itsaudara.com.<br>
Silahkan pilih menu untuk melakukan pengolahan data.</p>
';
}
if ($page=="pengguna"){
include "page/page_pengguna/pengguna.php";
}
if ($page=="pembeli"){
include "page/page_pembeli/pembeli.php";
}
if ($page=="sapi"){
include "page/page_sapi/barang.php";
}
if ($page=="jenis"){
include "page/page_jenis/jenis.php";
}
if ($page=="penyuplai"){
include "page/page_penyuplai/penyuplai.php";
}
if ($page=="penjualan"){
include "page/page_penjualan/penjualan.php";
}
if ($page=="pembelian"){
include "page/page_pembelian/pembelian.php";
}
if ($page=="dashboard"){
include "page/page_dashboard/dashboard.php";
}
if ($page=="laporan"){
include "page/page_laporan/laporan.php";
}
if ($page=="password"){
include "password.php";
}
?>
6.buat satu buah file index.html untuk halaman awal
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Login - itsaudara.com</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<form action="login.php" class="login" method="post">
<h1>itsaudara.com</h1>
<input type="username" name="username" class="login-input" placeholder="Username" autofocus>
<input type="password" name="password" class="login-input" placeholder="Password">
<input type="submit" value="Login" class="login-submit">
</form>
</body>
</html>
7. fie login.php
<?php
include"config/koneksi.php";
$pass=md5($_POST[password]);
if ($_POST[username] == 'admin' && $_POST[password] == 'admin') {
session_start();
# code...
$_SESSION[username] = 'admin';
$_SESSION[password] = 'admin';
$_SESSION[level] = 'admin';
header('location:main.php?page=home');
}else{
$login=mysql_query("SELECT * FROM pengguna WHERE username='$_POST[username]'and password='$pass'");
$ketemu=mysql_num_rows($login);
$r=mysql_fetch_array($login);
//apabila user dan password tidak ada
if ($ketemu>0) {
session_start();
$_SESSION[username] = $r[username];
$_SESSION[password] = $r[password];
$_SESSION[level] = $r[level];
header('location:main.php?page=home');
}else{
// echo "string";
echo "<link href=config/style.css rel=stylesheet type=text/css>";
echo "<center>LOGIN GAGAL! <br>
Username atau Password Anda salah.<br>";
echo "<a href=index.html><b>ULANGI LAGI</b></a></center>";
}
}
?>
8. logout.php
<?php
session_start();
session_destroy();
header('location:index.html');
?>
9. main.php
<?php
error_reporting(0);
session_start();
if (empty($_SESSION[username]) and empty($_SESSION[password])) {
echo "<link href='config/style.css' rel='stylesheet' type='text/css'>
<center>Untuk mengakses halaman Administrator, Anda harus login <br>";
echo "<a href=index.html><b>LOGIN</b></a></center>";
}
else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Halaman Administrator - itsaudara.com</title>
<link rel="stylesheet" href="css/stylemain.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/paging.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
</head>
<body>
<!-- Header -->
<div id="header">
<div class="shell">
<div id="head">
<h1><a href="#">itsaudara.com</a></h1>
<div class="right">
<p>
Selamat Datang, <a href="#"><strong><?php echo $_SESSION['username']; ?></strong></a> |
<a href="main.php?page=password">Ubah Password</a> |
<a href="logout.php">Logout</a>
</p>
</div>
</div>
<!-- Navigation -->
<div id="navigation">
<ul>
<?php include "menu.php"; ?>
</ul>
</div>
<!-- End Navigation -->
</div>
</div>
<!-- End Header -->
<!-- Content -->
<div id="content" class="shell">
<?php include "content.php"; ?>
<!-- End Content -->
</div>
<!-- Footer -->
<div id="footer">
<p>© 2016 Hadi Prasetyo.</a></p>
</div>
<!-- End Footer -->
</body>
</html>
<?php
}
?>
10. menu.php
<li><a href="main.php?page=home" <?php if($_GET['page']=="home") { echo 'class="active"'; } ?>><span>Home</span></a></li>
<?php
$page = $_GET['page'];
if ($_SESSION[level]=="admin") {
?>
<li><a href="main.php?page=pengguna" <?php if($_GET['page']=="pengguna") { echo 'class="active"'; } ?>><span>Data Pengguna</span></a></li>
<li><a href="main.php?page=pembeli" <?php if($_GET['page']=="pembeli") { echo 'class="active"'; } ?>><span>Data Pembeli</span></a></li>
<li><a href="main.php?page=penyuplai" <?php if($_GET['page']=="penyuplai") { echo 'class="active"'; } ?>><span>Data Penyuplai</span></a></li>
<li><a href="main.php?page=jenis" <?php if($_GET['page']=="jenis") { echo 'class="active"'; } ?>><span>Data Jenis</span></a></li>
<li><a href="main.php?page=sapi" <?php if($_GET['page']=="sapi") { echo 'class="active"'; } ?>><span>Data Barang</span></a></li>
<li><a href="main.php?page=pembelian" <?php if($_GET['page']=="pembelian") { echo 'class="active"'; } ?>><span>Data Pembelian</span></a></li>
<li><a href="main.php?page=penjualan" <?php if($_GET['page']=="penjualan") { echo 'class="active"'; } ?>><span>Data Penjualan</span></a></li>
<?php
}
else if ($_SESSION[level]=="kabag") {
?>
<li><a href="main.php?page=dashboard" <?php if($_GET['page']=="dashboard") { echo 'class="active"'; } ?>><span>Dashboard</span></a></li>
<li><a href="main.php?page=laporan" <?php if($_GET['page']=="laporan") { echo 'class="active"'; } ?>><span>Laporan</span></a></li>
<?php
}
?>
No comments:
Post a Comment