1 | D e r r y A r i f R a c h m a n

Menampilkan Slip Gaji

Membuat Simpeg Sederhana php mysql + twitter bootstrap

SOAL UJI PROGRAM

WAKTU : 160 MENIT

Perusahaan sepatu yang berlokasi di cibaduyut, tepatnya PT. UJI mengalami

perkembangan yang sangat pesat (desentralisasi), sehingga membutuhkan sistem penggajian

yang terintegrasi berbasis web.

Adapun kebutuhan aplikasi web tersebut harus menghasilkan output berupa slip gaji pegawai.

Ketentuannya adalah :

1. Buat sebuah database berdasarkan Slip Gaji Pegawai. (Waktu : 45 menit) Keterangan :

Jika jawaban anda BENAR anda bisa melanjutkan ke soal No.2, jika SALAH maka

dinyatakan TIDAK LULUS

2. Buatlah program berdasarkan database yang telah anda buat di atas dengan beberapa

fasilitas yaitu Tambah, Simpan, Edit, Hapus, Batal dan Cari. (Waktu : 115 menit)

3. Tunjangan dihitung 10% dari gaji pokok (otomatis)

4. Halaman satu dengan yang lain harus saling terintegrasi (gunakan hyperlink)

2 | D e r r y A r i f R a c h m a n

Pertama saya ingin menampilkan web sebagai berikut, web tersebut menggunakan twitter

boostrap untuk desainnya, anda bisa mendownload css booststrap di link berikut

http://getbootstrap.com/2.3.2/ berikut tampilan web yang akan saya buat:

Komponen file php yang harus anda sediakan adalah sebagai berikut :

3 | D e r r y A r i f R a c h m a n

1. Buat folder bernama simpeg di dalam C:\xampp\htdocs\simpeg

2. Copy file bootstrap yang telah anda download ke folder simpeg.

3. Kemudian buat file header.php dan footer.php

Header.php

Script header.php ini fungsinya untuk menampilkan desain web bagian atas.

Footer.php

Script header.php ini fungsinya untuk menampilkan desain web bagian bawah.

DATA SLIP

DATA PEGAWAI

DATA Gaji Pegawai

© Derry Arif Rachman | Uji Program Unikom

4 | D e r r y A r i f R a c h m a n

Sekarang kita akan menjawab soal pertama, yaitu membuat sebuah database, sekarang silahkan

anda buka aplikasi browser anda http://localhost/phpmyadmin/ :

1. Buat database ujiprogram.sql dengan 2 table , table pertama adalah table gaji.sql table

ke 2 adalah table pegawai.sql. disini kita akan belajar bagaimana merelasikan data antar

table dengan JOIN table yang akan kita bahas selanjutnya. CARANYA :

2. Buka notepad lalu copy code di bawah ke notepad kemudian simpan dengan nama

ujiprogram.sql.

Berikut code database dari ujiprogram.sql :

-- phpMyAdmin SQL Dump

-- version 3.3.9

-- http://www.phpmyadmin.net

--

-- Host: localhost

-- Waktu pembuatan: 13. Februari 2014 jam 18:21

-- Versi Server: 5.5.8

-- Versi PHP: 5.3.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

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

--

-- Database: `ujiprogram`

--

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

--

-- Struktur dari tabel `gaji`

--

CREATE TABLE IF NOT EXISTS `gaji` (

`nip` varchar(9) NOT NULL,

`no_slip` varchar(10) NOT NULL,

`gaji` int(9) NOT NULL,

`tunj` int(9) NOT NULL,

`total` int(9) NOT NULL,

`waktu` date NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--

-- Dumping data untuk tabel `gaji`

--

INSERT INTO `gaji` (`nip`, `no_slip`, `gaji`, `tunj`, `total`, `waktu`)

VALUES

('10510666', 'NT-01', 13000000, 1300000, 14300000, '2014-01-27'),

5 | D e r r y A r i f R a c h m a n

('10510667', 'NT-02', 5000000, 500000, 5500000, '2014-01-01'),

('10510663', 'NT-05', 4000000, 400000, 4400000, '2014-06-25');

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

--

-- Struktur dari tabel `pegawai`

--

CREATE TABLE IF NOT EXISTS `pegawai` (

`nip` varchar(9) NOT NULL,

`nama` varchar(150) NOT NULL,

`tlp` bigint(12) NOT NULL,

`alamat` text NOT NULL,

PRIMARY KEY (`nip`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--

-- Dumping data untuk tabel `pegawai`

--

INSERT INTO `pegawai` (`nip`, `nama`, `tlp`, `alamat`) VALUES

('10510663', 'Norman Aditia', 85777888999, ' Jl.Sumedang No 20'),

('10510666', 'Derry Arif Rachman', 85759011427, 'Jl.Cihamplas No 232

Bandung'),

('10510667', 'Widi Haryono', 85620343637, 'Jl CImenyan');

1. Setelah membuat file di atas, lihat browser http://localhost/phpmyadmin/ tadi dan cari IMPORT kemudian klik.

2. Ada tombol telusuri atau search kemudian klik dan cari file ujiprogram.sql tadi yang telah anda buat kemudian pilih go.

3. Selesai. Hasilnya seperti di bawah ini:

6 | D e r r y A r i f R a c h m a n

Table gaji.sql :

Table pegawai.sql :

Sekarang kita buat daftar pegawai nya, berikut gambaran hasil screenshoot yang saya ambil..

7 | D e r r y A r i f R a c h m a n

Membuat koneksi ke database :

1. Buat dulu file koneksi.php di dreamweaver, notepad, ultraedit, atau netbeans terserah

anda mau pake yang mana asala bisa pake nya aja kalo saya pake netbeans.

Buat file data.php dan simpan di folder simpeg tadi:

Setelah membuat file dan mengcopy data di atas, silahkan lihat tampilan outputnya sudah sama

seperti gambar d bawah ini atau belum

Silahkan buka hasilnya di http://localhost/simpeg/data.php pada browser anda.

Data Nama dan NIP Pegawai Nip Nama Telfon Alamat |

8 | D e r r y A r i f R a c h m a n

Kemudia buat db_data.php untuk membuat coding insert ke database, supaya web yang ada

di atas bisa bekerja sebagaimana mestinya:

Setelah file di atas di buat anda sudah bisa menginput data sesuai dengan slip gaji yang ada di

halaman 1, tapi kita belum bisa menampilkan data tersebut di web ini. Nah sekarang kita buat

file php untuk menampikan data tersebut. Berikut sitaxks nya

9 | D e r r y A r i f R a c h m a n

Buat file data_view.php:

Daftar Pegawai tambah data Nip Nama Telpon Alamat Action Drop Data masih kosong

10 | D e r r y A r i f R a c h m a n

Untuk sementara ini tombol TAMBAH sudah dapat di gunakan lihat di

http://localhost/simpeg/data_view.php tetapi tombol EDIT dan DELETE belum dapat di

gunakan. Nah sekarang kita akan membuat supaya tombol DELETE nya bisa di gunakan, Untuk

dapat menggunakannya kita harus membuat file data_hapus.php

Berikut code data_hapus.php:

Tombol delete sudah dapat di gunakan sekarang tinggal tombol EDIT , buatlah file php berikut:

Data_edit.php

11 | D e r r y A r i f R a c h m a n

Sekarang semua tombol sudah berfungsi di tahap ini, kita lanjut kembali ke modul berikutnya

pada website ini. Oke !

//proses edit berita if (isset($_POST['Edit'])) { $nip= $_POST['nip']; $nama = $_POST['nama']; $tlp = $_POST['tlp']; $alamat = $_POST['alamat']; //update data $query = "UPDATE pegawai SET nip='$nip', nama='$nama',tlp='$tlp',alamat='$alamat' WHERE nip='$nip'"; $sql = mysql_query ($query); if ($sql) { echo "Data Pegawai telah berhasil diedit"; } else { echo "Data Pegawai gagal diedit"; } } ?> Edit Data Pegawai NIP :

12 | D e r r y A r i f R a c h m a n

Sekarang kita coba tampilkan web simpeg daftar gaji pegawai seperti di bawah ini

Sekarang saya pengen langsung buat tampilan web di atas dengan dara membuat file

gaji_view.php :

Daftar Gaji Pegawai tambah data No Slip Nip Waktu Gaji Pokok Tunjangan Total Action Drop

13 | D e r r y A r i f R a c h m a n

Sekarang kita buat tombol tambah gambar di ata berfungsi sehingga ketika kita klik tambah

maka akan menampilkan web pada gambar di bawah ini :

Buat file gaji.php :

Data masih kosong

14 | D e r r y A r i f R a c h m a n

Untuk menyimpan data ke database kita harus menyiapkan file db_gaji.php

Data Gaji Pegawai No Slip Nip Gaji Pokok Tanggal

15 | D e r r y A r i f R a c h m a n

Sampai disini kita sudah bisa menambah data dari dari web http://localhost/simpeg/gaji.php dan

menampilkan nya di http://localhost/simpeg/gaji_view.php , sekarang tinggal membuat tombol

EDIT dan tombol DELETE nya berfungsi :

Untuk itu kita buat dulu tombol deletenya berfungsi dengan membuat file gaji_delete.php

Kita buat tobol EDIT nya berfungsi dengan membuat gaji_edit.php :

16 | D e r r y A r i f R a c h m a n

17 | D e r r y A r i f R a c h m a n

Tanggal Lahir :

18 | D e r r y A r i f R a c h m a n

Sekarang sudah tiba saat nya di bagian akhir dari tutorial ini, untuk menampilkan index.php

seperti gambar di bawah ini kita buat index.php

SLIP Gaji Pegawai SLIP Pegawai No Slip Tanggal NIP NAMA Gaji Pokok Tunjangan Total Gaji Cetak Data masih kosong

19 | D e r r y A r i f R a c h m a n

INI DIA HASIL NYA GAN

Dan sekarang agar tombol CETAK nya berfungsi dan menghasilkan gambar seperti yang ada di

gambar halaman 1 kita buat cetak.php

20 | D e r r y A r i f R a c h m a n

Sejauh ini cukup sekian dulu tutorial yang bisa saya bagikan, untuk lebih lanjutnya silahkan

pelajari sendiri aja, kalo sampai tahapan terakhir anda mengalami kesulitan dalam membuat web

simpeg tersebut, saya sudah sertakan file downloadnya di

https://www.facebook.com/derryarifrachman?fref=ts dengan catatan anda harus like dulu fans

page facebook saya, yah ga akan rugi nyubang jempolnya 1 kali doing mah.. saya udah nyimpen

link download programnya di situ oke

SlIP GAJI PEGAWAI "PT UJI" No Slip Tanggal NIP Nama Gaji POKOK Tunjangan Total Gaji