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

Bila kedua tabel diatas sudah dibuat, maka langkah selanjutnya adalah membuat beberapa script untuk input data pegawai, menampilkan data pegawai, halaman login dll. Ada sekitar 11 file/script yang harus Anda siapkan untuk membuat aplikasi penyimpanan data pegawai, diantaranya :

1. koneksi.php

File ini anda gunakan untuk melakukan koneksi ke server/database MySQL, cara membuat file koneksi ke database sebenarnya sudah pernah Saya bahas pada artikel Cara Membuat Koneksi ke Database Menggunakan script PHP. Contoh source codenya bisa Anda lihat dibawah ini

<?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());
}
?>

2. index.php
Halaman utama dari aplikasi. Contoh source code bisa Anda lihat dibawah ini

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

3. input_data_pegawai.php
Halaman ini digunakan untuk menginput data pegawai/karyawan

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

4. kirim.php
file kirim.php ini bertugas untuk mengirimkan nilai input data pegawai ke dalam tabel database. Untuk Cara Memasukan Data ke Dalam Database , Anda bisa melihat contoh script dibawah ini

<?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>';
}


?>

5. lihat_data_pegawai.php

File ini fungsinya untuk melihat atau menampilkan data pegawai yang sudah tersimpan dari dalam tabel database, untuk Cara Menampilkan Data Dari Dalam Tabel Database, Anda bisa melihat contoh scriptnya dibawah ini

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

6. login.php
File ini merupakan form untuk login bagi user yang ingin menampilkan atau memasukan data pegawai, form login dan prosesnya diadopsi dari Aplikasi Quick Count Pilkada V 1.1

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

7. login_proses.php

File ini bertugas untuk memproses dan memvalidasi inputan dari file login.php. Bila user salah memasukan username dan password, maka secara otomatis user akan terlebih dahulu diarahkan ke halaman login.

<?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>';
  }
 }
}

?>

8. sesi.php

File ini tugasnya untuk mengecek sebuah session yang ada, bila user berhasil login maka otomatis session akan dibuat, dan file ini tentunya akan mengakses session yang ada. Bila tidak ada session maka otomatis user akan dilempar ke halaman login

<?php


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

?>

9.logout.php
File yang bertugas untuk menghapus session yang tersimpan

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

10. catatan.php
file ini bertugas untuk memberikan informasi cara penggunaan aplikasi, file ini dipanggil sebagai halaman default dari file index.php

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

11. style.css
Tentunya file beperan dalam tampilan si aplikasi. File css bisa Anda buat sesuai keinginan atau Anda bisa menggunakan css dibawah ini

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

Terakhir simpan semua file diatas dalam satu folder yang sama di dalam folder htdocs web server atau Anda bisa mencoba menguploadnya langsung ke webhosting gratisan

Tampilan aplikasinya nanti kurang lebih akan seperti gambar dibawah ini 

Halaman login

Menampilkan data pegawai yangtersimpan

#Update 1/5/2017

Saya sudah memperbaiki aplikasi ini, saya lupa menambahkan fungsi session_start();  pada file login proses, sehingga mungkin Anda tidak bisa login ke aplikasi. Saya sudah memperbaharuinya. Anda bisa mendownload aplikasi ini pada halaman : Aplikasi Penyimpanan Data Pegawai Berbasis WEB

 

PLEASE SHARE

Share it Share it Tweet Share it Pin it

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