» Unlabelled » Aplikasi Database Pegawai Sederhana Dengan PHP dan MySQL

Aplikasi Database Pegawai Sederhana Dengan PHP dan MySQL

- on 9:12 AM - No comments
Baru-baru ini saya telah menyelesaikan sebuah aplikasi database pegawai sederhana dengan menggunakan beberapa bahasa pemrograman seperti PHP, MySQL, CSS, dan JavaScript. Aplikasi ini menitikberatkan kepada implementasi PHP dan MySQL dalam pengembangan aplikasi dinamis dan interaktif yang dalam hal ini adalah pengolahan data pegawai yang meliputi aktivitas penambahan data pegawai, ubah data, menghapus data serta menampilkan data pegawai.
Untuk menunjang proses pengembangan telah dikembangkan beberapa fungsi-fungsi buatan yang bertujuan untuk mempermudah dan mempercepat proses penulisan kode program.
Sedangkan untuk struktur tablenya, dapat dilihat sebagai berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE IF NOT EXISTS `pegawai` (
  `pegawai_id` int(11) NOT NULL AUTO_INCREMENT,
  `kode` varchar(10) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `alamat` varchar(100) NOT NULL,
  `gaji` double NOT NULL,
  `sex` varchar(30) NOT NULL,
  `status` varchar(30) NOT NULL,
  `jabatan` varchar(40) NOT NULL,
  `photo` varchar(50) NOT NULL,
  `tanggal_gabung` int(11) NOT NULL,
  PRIMARY KEY (`pegawai_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;
Kemudian buat sebuah file bernama config.php yang berfungsi untuk mengatur konfigurasi awal website sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
/**
 * Aplikasi Pegawai Sederhana
 *
 * @file config.php
 * @author Andrew Hutauruk | 
 * @date 17 Aug 2012 23:40
 */
/**
 * Koneksi ke server dan memilih database
 */
mysql_connect( 'localhost', 'root', '' );
mysql_select_db( 'pegawai' );
/**
 * Fungsi sederhana untuk mempersingkat penulisan kdoe program
 * Bersifat opsional, tetap bisa menggunakan fungsi PHP pada umumnya
 */
function hajar_coy( $query ) { return mysql_query( $query ); }
function itung_jumlahnya( $query ) { return mysql_num_rows( $query ); }
function uraikan( $query ) { return mysql_fetch_array( $query ); }
function bersihkan( $query ) { return mysql_real_escape_string( $query ); }
define( 'URL', 'http://localhost/pegawai' );
define( 'NAME', 'Aplikasi Data Pegawai Sederhana' );
$option = isset( $_GET['option'] ) ? $_GET['option'] : '';
$action = isset( $_POST['action'] ) ? $_POST['action'] : '';
?>
Dan file utama yaitu index.php yang berfungsi sebagai tempat untuk melakukan interaksi antara user dengan program kita yaitu sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?php
/**
 * Aplikasi Pegawai Sederhana
 *
 * @file function.php
 * @author Andrew Hutauruk | 
 * @date 17 Aug 2012 23:40
 */
session_start();
/**
 * Panggil file config.php
 */
require( dirname(__FILE__).'/function.php' );
if( $action == 'Simpan Data Pegawai' ) { simpan_data_pegawai();}
elseif( $action == 'Ubah Data Pegawai' ) { update_data_pegawai(); }
elseif( $option == 'delete-pegawai' ) { hapus_data_pegawai(); }
?>
<!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=iso-8859-1" />
<title>
<?php echo NAME; ?>
</title>
<script type="text/javascript">
function hapus(id){
    konfirmasi = confirm('Apakah Anda yakin ingin menghapus data pegawai dengan kode: '+id+' ?' );
    if( konfirmasi == true ) return true;
    else return false;
}
</script>
<link rel="stylesheet" type="text/css" href="<?php echo URL;?>/gaya.css" media="all" />
</head>
<body>
<div class="atas">
    <div class="logo">Aplikasi Pegawai</div>
</div>
<div class="bungkus">
    <div class="kiri">
        <div class="box">
            <h1>Menu Utama</h1>
            <ul id="urut">
                <?php
                if($option == '') { echo "<li><a href=\"".URL."/\" class=\"active\">Beranda</a></li>\n"; }
                else { echo "<li><a href=\"".URL."/\">Beranda</a></li>\n"; }
                if($option == 'tambah-pegawai') { echo "<li><a href=\"".URL."/?option=tambah-pegawai\" class=\"active\">Tambah Data Pegawai</a></li>\n"; }
                else{ echo "<li><a href=\"".URL."/?option=tambah-pegawai\">Tambah Data Pegawai</a></li>\n"; }
                if($option == 'data-pegawai' || $option == 'detail-pegawai' || $option == 'edit-pegawai') { echo "<li><a href=\"".URL."/?option=data-pegawai\" class=\"active\">Data Pegawai</a></li>\n"; }
                else{ echo "<li><a href=\"".URL."/?option=data-pegawai\">Data Pegawai</a></li>\n"; }               
                 
                ?>
            </ul>
        </div>
    </div>   
     
    <div class="kanan">
        <?php
        $kode = isset($_GET['kode']) ? $_GET['kode'] : '';
        if( $option == 'tambah-pegawai' ) { tambah_data_pegawai(); }
        elseif( $option == 'data-pegawai' ) { tampilkan_pegawai(); }
        elseif( $option == 'edit-pegawai' ) { ubah_data_pegawai(); }
        elseif( $option == 'detail-pegawai') { detail_pegawai($kode); }
        else {
            echo "<div class=\"box\">\n";
            echo "<h1>APLIKASI DATABASE PEGAWAI SEDERHANA</h1>";
            echo "<p>Selamat datang di Aplikasi Database Pegawai Sederhana.</p>";
            echo "<p><img src=\"".URL."/gambar.jpg\" align=\"left\" width=\"120\" height=\"150\" class=\"img\">Aplikasi ini sengaja dikembangkan dengan harapan dapat memberikan gambaran dan inspirasi bagi mereka yang ingin membuat aplikasi dinamis dengan menggunakan PHP dan MySQL. Aplikasi ini murni menggunakan pemrograman dasar <b>HTML, CSS, PHP dan MySQL</b> serta sedikit bumbu bahasa <b>JavaScript</b> agar interaksi pengguna dengan aplikasi terasa lebih mantap.</p>";
            echo "<p>Dalam aplikasi telah dikembangkan beberapa fungsi-fungsi buatan yang bertujuan untuk membantu proses pengolahan data dan juga untuk mempercepat proses penulisan kode program.</p>";
            echo "<p>Secara umum, applikasi ini masih tergolong sangat sederhana dan tidak membutuhkan tenaga ekstra untuk mempelajarinya. Anda hanya perlu memahami sedikit tentang HTML dan CSS untuk mengatur layout maupun tata letak dari setiap komponen website serta pemahaman mendasar tentang PHP dan MySQL.</p>";
            echo "<p>Akhirnya, segala kritik dan saran yang membangun sangat dibutuhkan agar ke depannya dapat lebih bermamfaat dan semakin antusias dalam mengembangkan aplikasi berbasis PHP dan MySQL.</p>";
            echo "<p class=\"footer\">All Rights Reserved | Copyrights &trade; - ".date("Y")." | View more on: <a href=\"\"></a></p>";
            echo "</div>\n";
        }
     
     
        ?>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>
Berikut ini adalah jantung dari program kita kali ini yang bernama function.php yang berfungsi untuk mengontrol seluruh aktivitas di dalam aplikasi pegawai tersebut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<?php
/**
 * Aplikasi Pegawai Sederhana
 *
 * @file function.php
 * @author Andrew Hutauruk | 
 * @date 17 Aug 2012 23:40
 */
# Panggil file config.php
require( dirname(__FILE__).'/config.php' );
# Fungsi untuk menyimpan data pegawai
function simpan_data_pegawai() {
    # tampung data kesalahan
    $salah = array();
    $dir = "photo";
     
    # tangkap data-data yang dimasukkan dari form
    $nama = bersihkan( $_POST['nama'] );
    $alamat = bersihkan( $_POST['alamat'] );
    $gaji = bersihkan( $_POST['gaji'] );
    $kode = bersihkan( $_POST['kode'] );
    $sex = $_POST['sex'];
    $status = $_POST['status'];
    $jabatan = $_POST['jabatan'];
    $filename = $_FILES['photo']['name'];
    $tmp_name = $_FILES['photo']['tmp_name'];
    $filesize = $_FILES['photo']['size'];
    $filetype = $_FILES['photo']['type'];
     
    $image_name = strtolower(str_replace(' ', '-', $filename));
    $image_ext = substr($image_name, strrpos($image_name, '.'));
    $image_ext = str_replace('.', '', $image_ext);
    $image_name = preg_replace("/\.[^.\s]{3,4}$/", "", $image_name);
    $new_image_name = $kode.'.'.$image_ext;
     
    # validasi data lalu simpan data kesalahan dlm bentuk array, jika ada
    if( empty( $nama ) ) {
        $salah[] = '- Pasti Anda manusia dan punya nama, yang benar aja...';
    }
    if( empty( $alamat ) ) {
        $salah[] = '- Masa ga punya tempat tinggal, isi dulu donk...';
    }
    if( empty( $gaji ) ) {
        $salah[] = '- Emang lu kerja ga mau dibayar, isi besar gajilah...';
    }
    if( empty( $kode ) ) {
        $salah[] = '- Isi kode biar Anda nampak unik dan antik coy...';
    }
     
    # jika tidak ada kesalahan
    if( !count( $salah ) ) {
         
        # cek jika sudah ada pegawai yang memiliki kode pegawai yang sama
        if( itung_jumlahnya( hajar_coy( "SELECT * FROM pegawai WHERE kode='$kode'" ) ) == 0 ) {
            hajar_coy( "INSERT INTO pegawai VALUES( '', '$kode', '$nama', '$alamat', '$gaji', '$sex', '$status', '$jabatan', '$new_image_name', '".time()."' )" );
            move_uploaded_file($_FILES['photo']['tmp_name'], $dir . "/" . $new_image_name);
        } else {
            $salah[] = '- Sorry ya, kode pegawai ini sudah ada yang punya coy...';
        }
    }
     
    # jika ada kesalahan simpan aja di dalam session
    if( count( $salah ) ) {
        $_SESSION['pesan']['kesalahan-tambah-data'] = implode( '<br>', $salah );
    }
     
    # jika terjadi kesalahan kirimkan ke halaman semula sebaliknya kirimkan ke daftar pegawai
    if( count( $salah ) ) {
        header( "Location: ".URL."/?option=tambah-pegawai" );
    } else {
        header( "Location: ".URL."/?option=data-pegawai" );
    }
    exit;
} /* Akhir dari fungsi menyimpan data pegawai baru */
# Fungsi untuk mengubah data pegawai
function update_data_pegawai() {
    # tampung data kesalahan
    $salah = array();  
    $dir = "photo";
    # tangkap data-data yang dimasukkan dari form
    $nama = bersihkan( $_POST['nama'] );
    $alamat = bersihkan( $_POST['alamat'] );
    $gaji = bersihkan( $_POST['gaji'] );
    $kode = bersihkan( $_POST['kode'] );
    $sex = $_POST['sex'];
    $status = $_POST['status'];
    $jabatan = $_POST['jabatan'];
    $filename = $_FILES['photo']['name'];
    $tmp_name = $_FILES['photo']['tmp_name'];
    $filesize = $_FILES['photo']['size'];
    $filetype = $_FILES['photo']['type'];  
    $image_name = strtolower(str_replace(' ', '-', $filename));
    $image_ext = substr($image_name, strrpos($image_name, '.'));
    $image_ext = str_replace('.', '', $image_ext);
    $image_name = preg_replace("/\.[^.\s]{3,4}$/", "", $image_name);
    $new_image_name = $kode.'.'.$image_ext;
    # validasi data lalu simpan data kesalahan dlm bentuk array, jika ada
    if( empty( $nama ) ) {
        $salah[] = '- Pasti Anda manusia dan punya nama, yang benar aja...';
    }
    if( empty( $alamat ) ) {
        $salah[] = '- Masa ga punya tempat tinggal, isi dulu donk...';
    }
    if( empty( $gaji ) ) {
        $salah[] = '- Emang lu kerja ga mau dibayar, isi besar gajilah...';
    }
    if( empty( $kode ) ) {
        $salah[] = '- Isi kode biar Anda nampak unik dan antik coy...';
    }
    # jika tidak ada kesalahan
    if( !count( $salah ) ) {       
        $sql = uraikan(hajar_coy("SELECT * FROM pegawai WHERE kode='{$kode}'"));
        $sex = ($sex != '') ? $sex : $sql['sex'];
        $jabatan = ($jabatan != '') ? $jabatan : $sql['jabatan'];
        $status = ($status != '') ? $status : $sql['status'];
        $new_image_name = ($filename != '') ? $new_image_name : $sql['photo'];
        hajar_coy( "UPDATE pegawai SET kode='$kode', nama='$nama', alamat='$alamat', gaji='$gaji', sex='$sex', status='$status', jabatan='$jabatan', photo='$new_image_name' WHERE kode='$kode'" );
        move_uploaded_file($_FILES['photo']['tmp_name'], $dir . "/" . $new_image_name);
    }
    # jika ada kesalahan simpan aja di dalam session
    if( count( $salah ) ) {
        $_SESSION['pesan']['kesalahan-ubah-data'] = implode( '<br>', $salah );
    }
    # jika terjadi kesalahan kirimkan ke halaman semula sebaliknya kirimkan ke daftar pegawai
    if( count( $salah ) ) {
        header( "Location: ".URL."/?option=edit-pegawai&kode=$kopeg" );
    } else {
        header( "Location: ".URL."/?option=data-pegawai" );
    }
    exit;
} /* Akhir dari fungsi menyimpan data pegawai baru */
# FUngsi untuk menghapus data pegawai
function hapus_data_pegawai() {
    $dir = "photo";
    $kode = isset( $_GET['kode'] ) ? $_GET['kode'] : '';
    $sql = uraikan(hajar_coy("SELECT * FROM pegawai WHERE kode='{$kode}'"));
    $ext = substr($sql['photo'], strrpos($sql['photo'], '.')); 
    $ext = str_replace('.', '', $ext);
    if(file_exists("{$dir}/{$kode}.{$ext}")){
        unlink("{$dir}/{$kode}.{$ext}");
    }
    hajar_coy( "DELETE FROM pegawai WHERE kode='$kode'" );
    header( "Location: ".URL."/?option=data-pegawai" );
    exit;
}
# Fungsi untuk mencari kode pegawia terbesar dari table pegawai
function cari_terbesar( $kode ) {
    $query = uraikan( hajar_coy( "SELECT MAX(kode) AS terbesar FROM pegawai" ) );
    $kode = $query['terbesar'];
    if( $kode ) {
        $terbesar = substr( $query['terbesar'], 0, 7 );
        $terbesar++;
    } else {
        $terbesar = 'PEG0001';
    }
    return $terbesar;
}
# Fungsi untuk memformat nilai angka ke dalam rupiah
function ubah_ke_rupiah( $id ) {
    return number_format( $id, 0, ", ", "." );
}
# Fungsi untuk membuat form tambah pegawai dengan fungsi-fungsi buatan
function tambah_data_pegawai() {
    echo "<div class=\"box\">\n";
    echo "<h1>TAMBAH DATA PEGAWAI</h1>";
     
    # cek jika ada terjadi kesalahan selama penambahan data
    if( isset( $_SESSION['pesan']['kesalahan-tambah-data'] ) ) {
        echo "<p class=\"err\"><b>Pesan Kesalahan :</b><br>".$_SESSION['pesan']['kesalahan-tambah-data']."</p>";
        unset( $_SESSION['pesan']['kesalahan-tambah-data'] );
    }
    $kode = cari_terbesar('kode');
    echo "  <form method=\"post\" action=\"\" autocomplete=\"off\" enctype=\"multipart/form-data\">\n";
    echo "      Kode Pegawai:<br><input type=\"text\" name=\"kode\" value=\"{$kode}\"><br>\n";
    echo "      Nama Pegawai:<br><input type=\"text\" name=\"nama\" placeholder=\"Isi nama lengkap pegawai...\"><br>\n";
    echo "      Alamat Pegawai:<br><input type=\"text\" name=\"alamat\" placeholder=\"Isi alamat lengkap pegawai...\"><br>\n";
    echo "      Gaji Utama Pegawai:<br><input type=\"text\" name=\"gaji\" placeholder=\"Isi gaji utama pegawai...\"><br>\n";
    echo "      Jenis Kelamin:<br><select name=\"sex\"><option value=\"0\" selected\">Pilih jenis kelamin</option>\n";
    echo "          <option value=\"Laki-Laki\">Laki-Laki</option><option value=\"Perempuan\">Perempuan</option>\n";
    echo "      </select><br>\n";
    echo "      Status Menikah:<br><select name=\"status\"><option value=\"0\" selected\">Pilih status pernikahan</option>\n";
    echo "          <option value=\"Menikah\">Menikah</option><option value=\"Lajang\">Lajang</option><option value=\"3\">Bercerai</option>\n";
    echo "      </select><br>\n";
    echo "      Jabatan:<br><select name=\"jabatan\"><option value=\"0\" selected\">Pilih jabatan</option>\n";
    echo "          <option value=\"Manajer\">Manajer</option><option value=\"Direktur\">Direktur</option><option value=\"Supervisor\">Supervisor</option><option value=\"Leader\">Leader</option><option value=\"Teknisi\">Teknisi</option><option value=\"Operator\">Operator</option><option value=\"Programmer\">Programmer</option><option value=\"Analis\">Analis</option>\n";
    echo "      </select><br>\n";
    echo "      Photo Karyawan: &nbsp; <input type=\"file\" name=\"photo\" size=\"90\"><br><br>\n";
    echo "      <input type=\"submit\" name=\"action\" value=\"Simpan Data Pegawai\"><br>\n";
    echo "  </form>\n";
    echo "</div>\n";
}
# Fungsi untuk mengubah data pegawai
function ubah_data_pegawai() {
    $kode = isset( $_GET['kode'] ) ? $_GET['kode'] : '';
    $sql = uraikan( hajar_coy( "SELECT * FROM pegawai WHERE kode='$kode'" ) );
    echo "<div class=\"box\">\n";
    echo "<h1>Ubah Data Pegawai</h1>";
    if( isset( $_SESSION['pesan']['kesalahan-ubah-data'] ) ) {
        echo "<p class=\"err\"><b>Pesan Kesalahan :</b><br>".$_SESSION['pesan']['kesalahan-ubah-data']."</p>";
        unset( $_SESSION['pesan']['kesalahan-ubah-data'] );
    }
    echo "  <form method=\"post\" action=\"\" autocomplete=\"off\" enctype=\"multipart/form-data\">\n";
    echo "      Kode Pegawai:<br><input type=\"text\" name=\"kode\" value=\"{$sql['kode']}\"><br>\n";
    echo "      Nama Pegawai:<br><input type=\"text\" name=\"nama\" placeholder=\"Isi nama lengkap pegawai...\" value=\"{$sql['nama']}\"><br>\n";
    echo "      Alamat Pegawai:<br><input type=\"text\" name=\"alamat\" placeholder=\"Isi alamat lengkap pegawai...\" value=\"{$sql['alamat']}\"><br>\n";
    echo "      Gaji Utama Pegawai:<br><input type=\"text\" name=\"gaji\" placeholder=\"Isi gaji utama pegawai...\" value=\"{$sql['gaji']}\"><br>\n";
    echo "      Jenis Kelamin:<br><select name=\"sex\"><option value=\"0\" selected\">Pilih jenis kelamin</option>\n";
    echo "          <option value=\"Laki-Laki\">Laki-Laki</option><option value=\"Perempuan\">Perempuan</option>\n";
    echo "      </select><br>\n";
    echo "      Status Menikah:<br><select name=\"status\"><option value=\"0\" selected\">Pilih status pernikahan</option>\n";
    echo "          <option value=\"Menikah\">Menikah</option><option value=\"Lajang\">Lajang</option><option value=\"3\">Bercerai</option>\n";
    echo "      </select><br>\n";
    echo "      Jabatan:<br><select name=\"jabatan\"><option value=\"0\" selected\">Pilih jabatan</option>\n";
    echo "          <option value=\"Manajer\">Manajer</option><option value=\"Direktur\">Direktur</option><option value=\"Supervisor\">Supervisor</option><option value=\"Leader\">Leader</option><option value=\"Teknisi\">Teknisi</option><option value=\"Operator\">Operator</option><option value=\"Programmer\">Programmer</option><option value=\"Analis\">Analis</option>\n";
    echo "      </select><br>\n";
    echo "      <div class=\"edit_photo_box\">\n";
    echo "          <div class=\"photo_box\">\n";
    if(file_exists("photo/{$sql['photo']}")){
        $photo = "<img src=\"".URL."/photo/{$sql['photo']}\" class=\"photo\" alt=\"{$sql['photo']}\">";
    } else {
        $photo = "<img src=\"".URL."/photo/noname.jpg\" class=\"photo\">";
    }
    echo "              {$photo}\n";
    echo "          </div>\n";
    echo "          <div class=\"photo_input\">Photo Karyawan:<br><input type=\"file\" name=\"photo\" size=\"90\"></div>\n";
    echo "          <div class=\"clear\"></div>\n";
    echo "      </div>\n";
    echo "      <input type=\"submit\" name=\"action\" value=\"Ubah Data Pegawai\"><br>\n";
    echo "  </form>\n";
    echo "</div>\n";
}
# Fungsi untuk menampilkan daftar pegawai
function tampilkan_pegawai() {
    $jumlah_data_per_halaman = 7;
    if(isset($_GET['page'])){ $nomor_halaman = $_GET['page'];}
    else { $nomor_halaman = 1; }
    $offset = ($nomor_halaman - 1) * $jumlah_data_per_halaman;     
    $sql = hajar_coy( "SELECT * FROM pegawai ORDER BY kode ASC LIMIT $offset,$jumlah_data_per_halaman" );
    $jumlah_data_pegawai = itung_jumlahnya(hajar_coy("SELECT * FROM pegawai"));
    echo "<div class=\"box\">\n";
    echo "<h1>Daftar Pegawai</h1>";
    echo "<table border=\"0\">";
    echo "<tr class=\"top_tr\">";
    echo "  <td width=\"40\">Photo</td>\n";
    echo "  <td width=\"150\">Nama</td>\n";
    echo "  <td width=\"150\">Alamat</td>\n";
    echo "  <td width=\"100\">Gaji Utama</td>\n";
    echo "  <td width=\"100\">Status</td>\n";
    echo "  <td width=\"100\">Jabatan</td>\n";
    echo "  <td width=\"70\">Sex</td>\n";
    echo "  <td width=\"50\">Aksi</td>\n";
    echo "</tr>";
    if( itung_jumlahnya( $sql ) == 0 ) {
        echo "<tr style=\"height:150px; border-bottom:1px dotted #CC780C;\">";
        echo "  <td colspan=\"8\" align=\"center\" style=\"color:#FF0000; \">Belum ada data pegawai saat ini. Silahkan segera update database ppegawai ini.<br><a href=\"".URL."/?option=tambah-pegawai\">Klik disini untuk menambah data pegawai</a></td>";
        echo "</tr>";
    } else {
        $a = 0;
        while( $row = uraikan( $sql ) ) {
            if( $a == 0 ) { $bg = "#FCFADE"; $a = 1; }
            else{ $bg = "#FCF7AB"; $a = 0; }
             
            if(file_exists("photo/{$row['photo']}")){
                $photo = "<img src=\"".URL."/photo/{$row['photo']}\" class=\"photo\" alt=\"{$row['photo']}\">";
            } else {
                $photo = "<img src=\"".URL."/photo/noname.jpg\" class=\"photo\">";
            }
            echo "<tr bgcolor=\"$bg\" onmouseover=\"bgColor='#FFFF55'\" onmouseout=\"bgColor='$bg'\">";
            echo "  <td align=\"center\">{$photo}</td>";
            echo "  <td><span style=\"font-size:12px; \">Kode: <a href=\"".URL."/?option=detail-pegawai&kode={$row['kode']}\">{$row['kode']}</a></span><br>{$row['nama']}</td>";
            echo "  <td>{$row['alamat']}</td>";
            echo "  <td>Rp ".ubah_ke_rupiah( $row['gaji'] )."</td>";
            echo "  <td>{$row['status']}</td>";
            echo "  <td>{$row['jabatan']}</td>";
            echo "  <td>{$row['sex']}</td>";
            echo "  <td><a href=\"".URL."/?option=edit-pegawai&kode={$row['kode']}\" title=\"Klik untuk mengubah data pegawai\"><img src=\"".URL."/b_edit.png\" alt=\"\"> &nbsp; <a href=\"".URL."/?option=delete-pegawai&kode={$row['kode']}\" onclick=\"return hapus('".$row['kode']."')\" title=\"Klik untuk menghapus data pegawai\"><img src=\"".URL."/b_drop.png\"></a></td>";
            echo "</tr>";
        }      
    }
    echo "</table>"; 
    $jumlah_data = uraikan( hajar_coy("SELECT COUNT(*) AS jumlah FROM pegawai") );
    $total_halaman = ceil($jumlah_data['jumlah'] / $jumlah_data_per_halaman);
     
    echo "<p class=\"paging\">\n";
    echo "Halaman: &nbsp; ";
    $showpage = 0;
    if($nomor_halaman > 1){ echo "<a href=\"".URL."/?option=data-pegawai&page=".($nomor_halaman-1)."\">&larr; Prev</a>\n"; }
    for($page = 1; $page <= $total_halaman; $page++){
        if((($page >= $nomor_halaman - 3) && ($page <= $nomor_halaman + 3)) || ($page == 1) || ($page == $total_halaman)){
            if(($showpage == 1) && ($page != 2)) echo "...";
            if(($showpage != ($total_halaman-1)) && ($page == $total_halaman)) echo "...";
            if($page == $nomor_halaman) echo "<span class=\"current\">{$page}</span>";
            else echo "<a href=\"".URL."/?option=data-pegawai&page={$page}\">{$page}</a>";
            $showpage = $page;
        }
    }
    if($nomor_halaman < $total_halaman){ echo "<a href=\"".URL."/?option=data-pegawai&page=".($nomor_halaman+1)."\">&rarr; Next</a>\n"; }
    echo "</p>\n";
     
    echo "</div>\n";
}
function detail_pegawai($kode){
    $sql = uraikan(hajar_coy("SELECT * FROM pegawai WHERE kode='{$kode}'"));
    echo "<div class=\"box\">\n";
    echo "  <h1>Pegawai: {$sql['nama']} - {$sql['kode']}</h1>\n";
    echo "  <div class=\"box_info\">\n";
    echo "      <table class=\"tinfo\">\n";
    echo "      <tr class=\"t\"><td width=\"150\">Nama Lengkap</td><td width=\"300\"> : &nbsp; {$sql['nama']}</td></tr>\n";
    echo "      <tr class=\"b\"><td>Kode Pegawai</td><td> : &nbsp; {$sql['kode']}</td></tr>\n";
    echo "      <tr class=\"t\"><td>Alamat Lengkap</td><td> : &nbsp; {$sql['alamat']}</td></tr>\n";
    echo "      <tr class=\"b\"><td>Gaji Utama</td><td> : &nbsp; Rp ".ubah_ke_rupiah( $sql['gaji'] )."</td></tr>\n";
    echo "      <tr class=\"t\"><td>Jenis Kelamin</td><td> : &nbsp; {$sql['sex']}</td></tr>\n";
    echo "      <tr class=\"b\"><td>Jabatan</td><td> : &nbsp; {$sql['jabatan']}</td></tr>\n";
    echo "      <tr class=\"t\"><td>Status Pernikahan</td><td> : &nbsp; {$sql['status']}</td></tr>\n";
    echo "      </table>\n";
    echo "  </div>\n";
    echo "  <div class=\"box_photo\">\n";
    if(file_exists("photo/{$sql['photo']}")){
        $photo = "<img src=\"".URL."/photo/{$sql['photo']}\" alt=\"{$sql['photo']}\">";
    } else {
        $photo = "<img src=\"".URL."/photo/noname.jpg\">";
    }
    echo "{$photo}";
     
    echo "  </div>\n";
    echo "  <div class=\"clear\"></div>\n";
    echo "</div>\n";
}
?>
Dan yang terakhir adalah file gaya.css untuk mengatur bentuk serta sususan dan tata letak aplikasi:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: normal;
src: local('myfont/Droid Sans'), url('myfont/DroidSans.woff') format('woff');
}
/* GAYA PEGAWAI */
*{ margin: 0; padding: 0; }
body{ font-family:'Droid Sans', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; background: #FFFFFF; color: #222;}
a{ color: #2ABFFF; text-decoration: none; transition: .3s ease-in-out; }
a:hover{ color: #D40000; text-decoration: none; }
img{ margin: 0; padding: 0; border: none; }
form{ margin: 10px 0; padding:10px 40px;  }
input[type=text],select{ margin: 2px 0 10px 0; padding: 8px 0 8px 40px; width:50%; font-size: 14px; font-family:'Droid Sans', Arial, Helvetica, sans-serif; border: 1px solid #E6E6E6; border-radius:3px; transition:all 0.4s ease-out; background:url('icon.png') no-repeat 2% 8px; }
input[type=text]:focus{ border:1px solid #989898; box-shadow:0px 0px 3px 0px #8BCFED; border:1px solid #55A4C6; }
input[type="submit"] {
    background-color:#3bb3e0;
    padding:7px 20px;
    margin:10px 0 0 0;
    position:relative;
    font-weight:bold; font-family:'Droid Sans';
    color:#fff;
    border: solid 1px #186f8f;
    text-shadow:0px 1px 0px #000;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(44,160,202)),
    color-stop(1, rgb(62,184,229))
    );
    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
    box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    cursor:pointer;
}
ol,ul{ margin: 0; padding: 0; list-style-type: none; }
table{ margin: 10px 0; padding: 0; border-collapse: collapse; width: 100%; border:none;}
tr{ text-align: left; height: 55px; }
tr.top_tr{ height: 40px; font-weight: bold; background: #0677A8; color:#FFFFFF; }
td{ margin: 0; padding-left: 5px; text-align:left; }
p{ margin: 0; padding: 10px 0; text-align: justify; }
p.err{ margin: 10px 0; padding: 10px; color: #FF0000; border: 1px solid #FF3F00; background: #FFFFFF; border-radius:5px;}
p.footer{ margin: 10px 0; padding: 3px 7px; font-size: 11px; border: 1px solid #D2D2D2; box-shadow: 0px 1px 0px #fff; }
img.img{ margin: 0; padding: 5px 15px 5px 0; }
.atas{ width:100%; background:#0A61AD; height:50px; position:fixed; top:0; left:0; box-shadow:0px 0px 5px #72777B; }
.logo{ line-height:50px; font-size:25px; text-transform:uppercase; color:#FFFFFF; padding-left:70px; }
.bungkus{ margin: 50px auto; padding: 0; width: 90%; }
.clear{ clear:both; }
.kiri{ float:left; width:15%; position:fixed; height:101%; background:#DD9906; }
.kanan{ float:right; width:81%; }
.box{ margin:0 0 20px 0; }
.box h1{ padding:10px 0 10px 30px; border-bottom:1px dotted #B5B5B5; font-size:20px; font-weight:normal; color:#666600; background:url('b_comment.png') no-repeat 0% 14px; }
.box #urut{ margin:10px 0; }
.box #urut li{ line-height:40px; }
.box #urut li a{ display:block; border-left:5px solid #CCFFCC; padding:0 0 0 20px; position:relative; background:#0C96C9; color:#FFFFFF; }
.box #urut li a:hover, .box #urut li a.active{ border-left:5px solid #BC1479; padding:0 0 0 35px; color:#FFFFFF; background:#06739B; }
.box #urut li a.active::before{ content:''; position:absolute; height:0; width:0; top:27%; right:0; border-bottom: 10px solid transparent; border-top: 10px solid transparent;  border-right: 10px solid #FFFFFF; font-size: 0; line-height: 0; }
.photo{ margin:0; padding:0; border:none; width:35px; height:35px; border-radius:3px; }
.paging{ margin:10px 0; }
.current{ padding:5px 10px; background:#000000; color:#FFFFFF; border-radius:3px; margin:0 5px 0 0; }
.paging a{ padding:5px 10px; background:#4176D8; color:#FFFFFF; border-radius:3px; margin:0 5px; }
.paging a:hover{ background:#2E5CB2; }
.edit_photo_box{ margin:10px 0; }
.photo_box{ float:left; width:60px; }
.photo_box img{ width:50px; height:50px; border:none; }
.photo_input{ float:left; width:500px; }
.box_info{ float:left; width:50%; margin:20px 0; }
table.tinfo{ width:100%; margin:0; }
table.tinfo tr{ height:40px; }
table.tinfo tr.t{ background:#F7F6EF; }
table.tinfo tr.b{ background:#E0F3FC; }
.box_photo{ float:right; width:40%; margin:20px 0; }
.box_photo img{ border:none; width:300px; height:280px; border-radius:10px; }

Post a Comment