Cara Membuat Aplikasi Penyimpanan Data Pegawai Berbasis Web

Cara Membuat Aplikasi Penyimpanan Data Pegawai Berbasis Web merupakan cara yang Saya gunakan untuk membuat Aplikasi Penyimpanan Data Pegawai Berbasis Web yang contoh source codenya sudah pernah Saya bagikan sebelumnya. Hanya saja contoh source code sebelumnya masih agak sedikit acak – acakan dan tidak disertai dengan halaman login, oleh karena itu kali ini Saya ingin sedikit membahas tentang Cara Membuat Aplikasi Penyimpanan Data Pegawai Berbasis Web .

Sebelum membuat Aplikasi penyimpanan data pegawai berbasis web, Saya pastikan bahwa di komputer Anda sudah terinstal aplikasi web server seperti XAMPP, bila Anda belum mengerti tentang itu Anda bisa membaca panduan

1. Instalasi dan Konfigurasi XAMPP untuk Windows  
2. Instalasi XAMPP di Ubuntu Desktop 15.04 untuk pengguna linux ubuntu,

Setelah itu buatlah database dan tabel baru untuk menyimpan data pegawai dengan susunan seperti terlihat pada gambar dibawah ini

Atau Anda bisa jalankan query dibawah ini untuk membuat tabelnya

-- phpMyAdmin SQL Dump
-- version 4.5.2
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jun 22, 2016 at 02:41 
-- Server version: 10.1.9-MariaDB
-- PHP Version: 5.5.30

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `php`
--

-- --------------------------------------------------------

--
-- Table structure for table `data_pegawai`
--

CREATE TABLE `data_pegawai` (
  `id` int(20) NOT NULL,
  `nama` varchar(20) NOT NULL,
  `jabatan` varchar(30) NOT NULL,
  `alamat` varchar(30) NOT NULL,
  `no_tlp` decimal(30,0) NOT NULL,
  `nama_istri` varchar(50) NOT NULL,
  `nama_anak` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `data_pegawai`
--

INSERT INTO `data_pegawai` (`id`, `nama`, `jabatan`, `alamat`, `no_tlp`, `nama_istri`, `nama_anak`) VALUES
(9, 'Silvi', 'Jatinangor', 'Sekretaris', '82127787593', 'Heryana', 'Dani'),
(10, 'Ahmad Zaelani', 'Pangandaran', 'Web Programmer', '82127787593', 'Ulfa Zulfa', 'Harun'),
(11, 'Zulfikar Nugraha', 'Bandung Barat', 'Auditor', '82127787593', 'Sinta', 'Lulu'),
(12, 'Dudung', 'Sumatera', 'Web Developer', '85323456789', 'Amelia', 'Farhan'),
(13, 'Wulandari', 'Jakarta', 'Bendahara', '82127787593', 'Rudi', 'Ridwan'),
(14, 'Riki', 'Bogor', 'Web Designer', '82127787593', '-', '-'),
(15, 'Dadang', 'Jakarta', 'Manager', '85223535055', 'Andini', 'Dani'),
(16, 'Riki', 'Bogor', 'Bos', '82127787593', 'Amelia', 'Farhan'),
(17, 'Anto Sihombing', 'Jatinangor', 'Manager', '82127787593', 'Ayu Sirayud', 'Dani'),
(18, 'Ahmad Zaelani', 'Jakarta', 'Auditor', '82127787593', 'Amelia', 'Farhan'),
(19, 'Didin Komarudin', 'Bogor', 'Bendahara', '85323456789', 'Ayu Sirayud', 'Dani');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `data_pegawai`
--
ALTER TABLE `data_pegawai`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `data_pegawai`
--
ALTER TABLE `data_pegawai`
  MODIFY `id` int(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Kemudian buat juga tabel baru dengan nama user dengan susunan/struktur tabel seperti dibawah ini

Atau Anda bisa menjalankan query dibawah ini untuk membuat tabel dan isinya (username&password)

-- phpMyAdmin SQL Dump
-- version 4.5.2
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jun 21, 2016 at 02:25 
-- Server version: 10.1.9-MariaDB
-- PHP Version: 5.5.30

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `php`
--

-- --------------------------------------------------------

--
-- Table structure for table `user`
--

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `username` varchar(32) NOT NULL,
  `password` varchar(32) NOT NULL,
  `nama` varchar(32) NOT NULL,
  `email` varchar(32) NOT NULL,
  `level` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `username`, `password`, `nama`, `email`, `level`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'Administrator', 'admin@admin.com', 1),
(2, 'admin2', '21232f297a57a5a743894a0e4a801fc3', 'Administrator', 'admingelo@gelo.com', 1);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

<?php
include ('sesi.php');
$host = "localhost";
$user = "root";
$password = "";
$db = "nama_db";
$koneksi=@mysql_connect($host,$user,$password);
if(!$koneksi){
    echo "Gagal melakukan koneksi <br/>:".mysql_error();
    exit();
    
}
$pilihdb=@mysql_select_db($db,$koneksi);
if(!$pilihdb){
    exit ("Gagal melakukan hubungan dengan database<br> Kesalahan :".mysql_error());
}
?>

<!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>
<title>ROOT93.co.id | Aplikasi penyimpan data pegawai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id="navcontainer">
      <ul id="navlist">
        <li><a href="index.php">Beranda</a></li>
<li><a href="index.php?page=masukandata">Masukan Data Pegawai</a></li>
<li><a href="lihat_data_pegawai.php">Lihat Data Pegawai</a></li>
<li><a href="index.php?page=login">Login</a>

      </ul>
    </div>
  </div>
  <div id="content">
  <?php

$page = (isset($_GET['page']))? $_GET['page'] : "main";
switch ($page) {
case 'masukandata' : include "input_data_pegawai.php"; break;
case'login':include"login.php";break;
case 'main' :
default : include 'catatan.php';
}
?>
</body>
</html>

<?php  include('sesi.php');

?>

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" content="text/html" />
 <meta name="author" content="ROOT93" />

 <title>Input Data Pegawai</title>
  



    <style type="text/css">
<!--
.style3 {font-family: Arial, Helvetica, sans-serif; font-size: 10; }
.style4 {font-size: 12}
-->
    </style>
</head>

<body>

<p class="style3"> Hai Kamu Login Sebagai <?php echo $_SESSION['admin'];?> / <a href="logout.php">Keluar</a></p>

<form id="butamu" name="butamu" method="post" action="kirim.php">
<table width="600" border="0" align="center" cellpadding="8px">
  <tr>
    <td width="150" valign="middle" bgcolor="#99CCFF"><div align="left" class="style3">Nama </div></td>
 <td>:</td>
    <td bgcolor="#9999FF"><input type="text" name="nama" id="nama" size="45" required=""/></td>
  </tr>
  <tr>
    <td valign="middle" bgcolor="#99CCFF"><div align="left" class="style3">Jabatan  </div></td>
 <td>:</td>
    <td bgcolor="#9999FF"><input type="text" name="jabatan" id="jabatan" size="45" required="" /></td>
  </tr>
  <tr>
    <td valign="middle" bgcolor="#99CCFF"><div align="left" class="style3">Alamat</div></td>
 <td>:</td>
    <td bgcolor="#9999FF"><input type="text" name="alamat" id="alamat" size="45" required="" /></td>
  </tr>
  <tr>
    <td valign="middle" bgcolor="#99CCFF"><div align="left" class="style3">No.Tlp/HP</div></td>
 <td>:</td>
    <td bgcolor="#9999FF"><input type="text" name="no_tlp" id="no_tlp" size="45" required="" /></td>
  </tr>
  <tr>
    <td valign="middle" bgcolor="#99CCFF"><div align="left" class="style3">Nama Suami/Istri</div></td>
 <td>:</td>
    <td bgcolor="#9999FF"><input type="text" name="nama_istri" id="nama_istri" size="45" required=""/></td>
  </tr>
  <tr>
    <td valign="middle" bgcolor="#99CCFF"><div align="left" class="style3">Nama Anak </div></td>
 <td>:</td>
    <td bgcolor="#9999FF"><input type="text" name="nama_anak" id="nama_anak" size="45" required=""/></td>
  </tr>
  <tr>
    <td valign="middle"><span class="style4"></span></td>
 <td></td>
    <td><input type="submit" name="kirim" value="kirim" id="kirim" />
    <input type="reset" name="batal" id="batal" value="Batal" />
 <input type="hidden" name="asal" id="asal" value="<?php echo $_SERVER['PHP_SELF'];?>" /></td>
  </tr>
</table>
<br>
 

</form>


</body>
</html>

<?php
require_once('koneksi.php');

//melakukan penyimpanan data tanpa melakukan validasi terlebih dahulu

//langsung eksekusi kiriman

$arahkan="index.php"; //menyimpan variabel yang mengarah ke file index


$perintah=sprintf("INSERT INTO data_pegawai
VALUES ('nul','%s','%s','%s','%s','%s','%s')",
$_POST['nama'],
$_POST['alamat'],
$_POST['jabatan'],
$_POST['no_tlp'],
$_POST['nama_istri'],
$_POST['nama_anak']);
$aksi=@mysql_query($perintah,$koneksi); 
//menyimpan variabel $perintah dengan parameter untuk memasukan data


if(!$perintah){

echo "Gagal Konek:".mysql_error();

$arahkan="index.php";
//jika tidak bisa koneksi arahkan ke index

}
else{
 echo '<script language="javascript">alert("Data Pegawai disimpan!"); 
           document.location="index.php?page=masukandata";</script>';
}


?>

<?php

require_once('koneksi.php');
$awal=0;
$byk_tampil=10;
if(isset($_GET['hal'])){
    $awal=$_GET['hal']*$byk_tampil;
}
$perintah="SELECT*FROM data_pegawai ORDER BY id DESC";
$limit="limit $awal,$byk_tampil";
$per_limit=sprintf("%s %s",$perintah,$limit);
$rsalpegawai=@mysql_query($perintah,$koneksi);
$rspegawai=@mysql_query($per_limit,$koneksi);
$baris=mysql_num_rows($rsalpegawai);
?>
<html>
<head>
<title>Menampilkan Data Pegawai</title>
<style type="text/css">
<!--
.style1 {
 color: #FFFFFF;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10;
}
.style3 {color: #FFFFFF; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 12;
  font-weight: bold;
  }
-->
.style4 {
 color:#0000FF; 
 font:Arial, Helvetica, sans-serif;
 font-weight: bold;
 }
.style7 {
 font-family: Arial, Helvetica, 
 sans-serif; font-size: 12px; 
 }
</style>
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head>
<body>
 <div id="navcontainer">
      <ul id="navlist">
        <li><a href="index.php">Beranda</a></li>
<li><a href="index.php?page=masukandata">Masukan Data Pegawai</a></li>
<li><a href="index.php?page=logout">Keluar</a>

      </ul>
    </div>
  </div>

  <div align="center">
  <p align="center" class="style4">Menampilkan Data Pegawai Dari Tabel</p>
 
<table width="723" height="73" bordercolor="#000000" 
cellpadding="2" cellspacing="1" border="0">
  <tr>
    <td width="33" bgcolor="#FF0000"><div align="center" class="style3">
      <div align="center">No</div>
    </div></td>
    <td width="90" bgcolor="#FF0000"><div align="center" class="style3">NAMA</div></td>
    <td width="93" bgcolor="#FF0000"><div align="center" class="style3">JABATAN</div></td>
    <td width="100" bgcolor="#FF0000"><div align="center" class="style3">ALAMAT</div></td>
    <td width="92" bgcolor="#FF0000"><div align="center" class="style3">No.TLP</div></td>
    <td width="93" bgcolor="#FF0000"><div align="center" class="style3">Nama Suami/Istri </div></td>
    <td width="103" bgcolor="#FF0000"><div align="center" class="style3">Nama Anak </div></td>
  </tr>
<?php
$no=$awal+1;
while($data=mysql_fetch_array($rspegawai)){

    ?>


 
  <tr class="<?php echo $no%2==0?tdc:tdc2?>">
    <td height="42" bgcolor="#99FFFF"><div align="center" class="style7"><?php echo $no;?></div></td>
    <td align="left" bgcolor="#99FFFF" ><div align="left" class="style7"><?php echo $data['nama'];?></div></td>
    <td bgcolor="#99FFFF"><div align="left" class="style7"><?php echo $data['alamat'];?></div></td>
    <td bgcolor="#99FFFF"><div align="left" class="style7"><?php echo $data['jabatan'];?></div></td>
    <td bgcolor="#99FFFF"><div align="left" class="style7"><?php echo $data['no_tlp'];?></div></td>
    <td bgcolor="#99FFFF"><div align="left" class="style7"><?php echo $data['nama_istri'];?></div></td>
    <td bgcolor="#99FFFF"><div align="left" class="style7"><?php echo $data['nama_anak'];?></div></td>
  </tr>
 <?php $no+=1;}?>
</table>

<br/>
<center>
<?php
$ke=$_SERVER['PHP_SELF'];
$page=ceil($baris/10); //jumlah data dibagi 10
$pg=1;
while($pg<=$page){ //jika $pg kurang dari atau sama dengan $page
    $hal=$pg-1; //maka $hal=$pg dikurangi 1
    echo "<a href=\"$ke?hal=$hal\">$pg</a>";
    $pg+=1;
}
?>
<br/>
Halaman :<?php echo "$hal dari $page";?><br/></center>
</body>
</html>

<html>
<head>
 <title>Login Form | Data Pegawai</title>
</head>
<body>
 
 <form action="login_proses.php" method="post">
 <center><h2>Login Form</h2></center>
 <table align="center">
  <tr>
   <td>Username</td>
   <td>:</td>
   <td><input type="text" name="username" placeholder="Username" required /></td>
  </tr>
  <tr>
   <td>Password</td>
   <td>:</td>
   <td><input type="password" name="password" placeholder="Password" required /></td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td><input type="submit" name="login" value="Login" /></td>
  </tr>
 </table>
 </form>
 
</body>
</html>

<?php
include('koneksi.php');
$cek=$_POST['username'];
if(isset($_POST['login'])){
 $user = mysql_real_escape_string(htmlentities($_POST['username']));
 $pass = mysql_real_escape_string(htmlentities(md5($_POST['password'])));
  
 $sql = mysql_query("SELECT * FROM user WHERE username='$user' AND password='$pass'") or die(mysql_error());
 if(mysql_num_rows($sql) == 0){
  //jika nilai sama dengan nol maka berarti nilai input tidak diisi
 
  echo '<script language="javascript">alert("Username '.$cek.' tidak ditemukan!");
   document.location="index.php";</script>';
 }else{
  $row = mysql_fetch_assoc($sql);
  if($row['level'] == 1){
   //jika login dengan level 1 buat session admin
   $_SESSION['admin']=$user;
   echo '<script language="javascript">alert("Anda berhasil Login Admin!"); 
   document.location="index.php?page=masukandata";</script>';
  }
 }
}

?>

<?php


session_start();
 
if(!isset($_SESSION['admin'])){
 echo '<script language="javascript">alert
 ("Anda harus login terlebih dahulu!");
  document.location="index.php?page=login";</script>';
}

?>

<?php
session_start();
session_destroy();
 
echo '<script language="javascript">alert("Anda berhasil Logout!"); 
document.location="index.php?page=login";</script>';
?>

<html>
<head>
<title>Ucapan Selamat Datang</title>
<style type="text/css">
<!--
.style1 {
 font-family: Arial, Helvetica, sans-serif;
 color: #000000;
 font-weight: bold;
}
.style2 {
 color: #000000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
}
.style5 {color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; }
.style6 {
 color: #FFFFFF;
 font-style: italic;
 font-weight: bold;
}
.style7 {font-size: 14px}
.style8 {font-family: Arial, Helvetica, sans-serif; color: #000000;}
-->
</style>
</head>
<body>
<table width="642" height="53" border="1" align="center" bordercolor="#000000" bgcolor="#999999">
  <tr>
    <th align="center" valign="middle" scope="row"><h2 align="center" class="style5">Selamat Datang, Di Halaman Data Pegawai</h2>
      <table width="590" border="1" cellpadding="8" bordercolor="#FFFFFF" bgcolor="#FFFF00">
        <tr>
          <th width="570" scope="row">
          <p align="left" class="style1">1. Login terlebih dahulu</p>
          <p align="left" class="style1">2. Untuk memasukan data baru klik menu &quot;Masukan Data Pegawai&quot;</p>
          <p align="left" class="style2">3. Untuk melihat data pegawai silahkan klik meny &quot;Lihat Data Pegawai&quot;</span></p></th>
        </tr>
      </table>
     
  <p align="center" class="style6">ROOT93.CO.ID all rights reserved </p>  
  </tr>
</table>
<p align="center" class="style1">&nbsp;</p>
<p align="center" class="style1">&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

body {
  text-align: center;
  margin-top:10px;
  margin-bottom:10px;
  color:#666666;
  background-color: #ffffff;
}

A:link {
 COLOR: #0000FF; text-decoration: none;
}
A:visited {
 COLOR: #0000FF; text-decoration: none;
}
A:active {
 COLOR: #0000FF; text-decoration: none;
}
A:hover {
 COLOR: #FF0000; text-decoration: underline;
}

#page_wrapper {
  margin-left: auto; 
  margin-right: auto;
  width: 98%;
  text-align: left;
  background: #FFFFFF;
  border: 8px solid #FFFFFF;
}

#header_wrapper {
  background: #4E7DD1 url('../img/menu_bg.gif') bottom left repeat-x;
  margin:0px; padding:0px;
}

#header {
  height: 60px;
  padding:15px;
  background: url('../img/header_bg.gif') top right no-repeat;
  margin:0px;
}

#header h1 {
  margin:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 28px;
  color:#ffffff;
  letter-spacing: -1px;
}

#header h2 {
  margin:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  color:#B1C6EB;
  letter-spacing: 1px;
}

#left_side {
  margin-top: 10px;
  float: left;
  width: 160px;
  background: #F1F6FE url('../img/side_bg.gif') bottom left repeat-x;
}

#right_side {
  margin-top: 10px;
  float: right;
  width: 160px;
  background: #F1F6FE url('../img/side_bg.gif') bottom left repeat-x;
}

#content {
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 180px;
  margin-right: 180px;
}

#footer {
  height: 50px;
  background-color: #4E7DD1;
  clear: both;
  text-align: center;
  padding-top:12px;
  color: #B6CEF9;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
}

#footer A:link {
 COLOR: #FFFFFF; text-decoration: none;
}
#footer A:visited {
 COLOR: #FFFFFF; text-decoration: none;
}
#footer A:active {
 COLOR: #FFFFFF; text-decoration: none;
}
#footer A:hover {
 COLOR: #FFFFFF; text-decoration: underline;
}

#left_side p, #right_side p {
  margin:10px;margin-top:15px;margin-bottom:15px;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 16px;
  color: #333333;
}

#left_side h3, #right_side h3 {
  margin-top:5px; margin-bottom:10px; margin-left:5px; margin-right:5px;
  padding:4px;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  color: #FFFFFF;
  border:1px solid #0F3974;
  background-color: #2153AA;
}

#left_side h4, #right_side h4 {
  margin-top:0px;margin-bottom:0px;margin-left:10px;
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
  color: #2153AA;
}

#content p {
  margin-top:15px; margin-bottom: 15px;
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #333333;
}

#content h3 {
  margin-top:5px; margin-bottom: 10px;
  font-family: verdana, arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  color: #2153AA;
}

#content h4 {
  margin-top:0px;margin-bottom:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 12px;
  color: #2153AA;
}

#navlist
{
  margin-top:1px;
  margin-bottom:0px;
  text-align:center;
  padding: 5px 0;
  margin-left: 0;
  border-bottom: 1px solid #0F3974;
  font: bold 14px Verdana, sans-serif;
}

#navlist li
{
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a
{
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x;
  text-decoration: none;
}

#navlist li a:link { color: #F1F6FE; }
#navlist li a:visited { color: #F1F6FE; }

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li a#current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

.float_left {
  float: left;
  margin-right: 10px;
}

.float_right {
  float: right;
  margin-left: 10px;
}

.featurebox_center {
  background-color: #fffff6;
  margin:0px;
  padding:10px;
  border: 1px solid #DFE8F7;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
  color: #333333;
}

.featurebox_side {
  background-color: #fffff6;
  margin:0px;margin-left:10px;margin-right:10px;margin-bottom:15px;
  padding:10px;
  border: 1px solid #DFE8F7;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
  color: #333333;
}
input[type=submit],
input[type=reset] {
    background: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    border: 1px solid #999;
    margin: 4px 10px;
    padding: 5px;
    width: 100px;
}

input[type=submit]:hover,
input[type=reset]:hover {
    cursor: pointer;
}

input[type=submit]:active,
input[type=reset]:active {
    background: #D4D4D4;
}

input[type=submit] {
    background: linear-gradient(to bottom, #0088CC, #0044CC);
    border: 1px solid #0088CC;
    color: #FFF;
}

input[type=submit]:active {
    background: #0044CC;
}
select:focus,
input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    border-radius: 5px;
    box-shadow: inset
                0
                1px 1px
                rgba(0, 0, 0, 0.075),
                0 0 8px
                rgba(82, 168, 236, 0.6);
    outline: 0;
}

Halaman login

Menampilkan data pegawai yangtersimpan

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple