Simpeg Sistem Informasi Penggajian

of 20 /20
1 | Derry Arif Rachman Menampilkan Slip GajiMembuat Simpeg Sederhana php mysql + twitter bootstrapSOAL 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)

Embed Size (px)

description

UJI PROGRAM UNIKOM

Transcript of Simpeg Sistem Informasi Penggajian

  • 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 @[email protected]@CHARACTER_SET_CLIENT */;

    /*!40101 SET @[email protected]@CHARACTER_SET_RESULTS */;

    /*!40101 SET @[email protected]@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