Cara Menciptakan Aplikasi Penyimpanan Data Pegawai Berbasis Web
Teknik Membuat Aplikasi Penyimpanan Data Pegawai Berbasis Web ialah cara yang Saya gunakan untuk membuat Aplikasi Penyimpanan Data Pegawai Berbasis Web yang teladan source codenya sudah pernah Saya bagikan sebelumnya. Hanya saja teladan source code sebelumnya masih agak sedikit acak – acakan dan tidak disertai dengan halaman login, oleh alasannya ialah itu kali ini Saya ingin sedikit mengulas wacana Teknik 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 ibarat XAMPP, bila Anda belum mengerti wacana itu Anda dapat membaca panduan
Sesudah itu buatlah database dan tabel gres untuk menyimpan data pegawai dengan susunan ibarat terlihat pada gambar dibawah ini
Atau Anda dapat jalankan query dibawah ini untuk membuat tabelnya
Kemudian buat juga tabel gres dengan nama user dengan susunan/struktur tabel ibarat dibawah ini
Atau Anda dapat menjalankan query dibawah ini untuk membuat tabel dan isinya (username&password)
Sebelum membuat Aplikasi penyimpanan data pegawai berbasis web, Saya pastikan bahwa di komputer Anda sudah terinstal aplikasi web server ibarat XAMPP, bila Anda belum mengerti wacana itu Anda dapat membaca panduan
- Instalasi dan Konfigurasi XAMPP untuk Windows
- Instalasi XAMPP di Ubuntu Desktop 15.04 untuk pengguna linux ubuntu,
Sesudah itu buatlah database dan tabel gres untuk menyimpan data pegawai dengan susunan ibarat terlihat pada gambar dibawah ini
-- 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 gres dengan nama user dengan susunan/struktur tabel ibarat dibawah ini
-- 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 ialah 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
1. koneksi.php
File ini anda gunakan untuk melaksanakan koneksi ke server/database MySQL, cara membuat file koneksi ke database bekerjsama sudah pernah Saya bahas pada artikel Teknik Membuat Koneksi ke Database Menggunakan script PHP. misal source codenya dapat 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 melaksanakan koneksi <br/>:".mysql_error(); exit(); } $pilihdb=@mysql_select_db($db,$koneksi); if(!$pilihdb){ exit ("Gagal melaksanakan korelasi dengan database<br> Kesalahan :".mysql_error()); } ?> 2. index.php
Halaman utama dari aplikasi. misal source code dapat 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 dipakai 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 Teknik Memasukan Data ke Dalam Database , Anda dapat melihat teladan script dibawah ini
<?php require_once('koneksi.php'); //melakukan penyimpanan data tanpa melaksanakan validasi terlebih lampau //langsung sanksi 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 dapat 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 Teknik Menampilkan Data Dari Dalam Tabel Database, Anda dapat melihat teladan 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 ialah 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> </td> <td> </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 lampau 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 lampau!"); 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 mempersembahkan gosip cara penerapan 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 lampau</p> <p align="left" class="style1">2. Untuk memasukan data gres klik sajian "Masukan Data Pegawai"</p> <p align="left" class="style2">3. Untuk melihat data pegawai silahkan klik meny "Lihat Data Pegawai"</span></p></th> </tr> </table> <p align="center" class="style6">ROOT93.CO.ID all rights reserved </p> </tr> </table> <p align="center" class="style1"> </p> <p align="center" class="style1"> </p> <p> </p> </body> </html> 11. style.css
Tentunya file beperan dalam tampilan si aplikasi. File css dapat Anda buat sesuai impian atau Anda dapat memakai 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 tiruana file diatas dalam satu folder yang sama di dalam folder htdocs web server atau Anda dapat mencoba menguploadnya eksklusif ke webhosting gratisan
Tampilan aplikasinya nanti kurang lebih akan ibarat gambar dibawah ini
 |
| Halaman login |
 |
| Menampilkan data pegawai yangtersimpan |
Saya sudah memperbaiki aplikasi ini, saya lupa menambahkan fungsi session_start(); pada file login proses, sehingga mungkin Anda tidak dapat login ke aplikasi. Saya sudah memperbaharuinya. Anda dapat mendownload aplikasi ini pada halaman : Aplikasi Penyimpanan Data Pegawai Berbasis WEB
Post a Comment for "Cara Menciptakan Aplikasi Penyimpanan Data Pegawai Berbasis Web"