Job Description Perancangan Sistem Desain Layout web Desain Halaman website

Gambar 3.1 Struktur Organisasi Rutan Klas IIB Tanjung Pura Dari gambar 3.1 tersebut tampak bahwa tingkatan tertinggi pada Rutan Klas IIB Tanjung Pura adalah Kepala Rutan. Kepala Rutan membawahi tiga kepala bidang atau bagian, yakni Kepala Kesatuan Pengamanan Rutan Klas IIB Tanjung Pura, Kepala Pelayanan Tahanan Rutan Klas IIB Tanjung Pura, Kepala Subseksi Pengelolaan Rutan Klas IIB Tanjung Pura. Di dalam Tugas Akhir ini, dibuat system informasi pada Subseksi Pengelolaan. Namun, didalam internal pegawai Subseksi Pengelolaan sendiri, mereka telah dibagi tugasnya masing-masing berdasarkan keputusan Kepala Rutan. Di dalam hal ini pembagian tugas mereka akan dijelaskan pada subbab 3.3 yang dinamakan Job Description.

3.4 Job Description

Nama Pegawai : SARDI, SH Tugas : Mengatur semua kegiatan yang ada di dalm Subseksi Pengelolaan Kepala Subseksi Pengelolaan Nama Pegawai : Wilman Marbun, SH Tugas : Mengatur semua kegiatan penggajian pegawai yang ada di Rutan Universitas Sumatera Utara

3.5 Analisis Jabatan

3.5.1 Identitas Jabatan

Nama Jabatan : Kepala Subseksi Pengelolaan Rutan Klas IIB Tanjung pura Unit Organisasi : Rumah Tahanan Negara Klas IIB Tanjung Pur Eselon IV : Kepala Rumah Tahanan Negara Klas IIB Tanjung Pura Eselon IIB : Kepala Divisi Pemasyarakatan Kanwil Dep.Hukum dan Ham Sumatera Utara Eselon IIA : Kepala Kanwil Dep.Hukum dan Ham Sumatera Utara Instansi : Departemen Hukum Dan Ham Republik Indonesia

3.5.2 Identitas responden untuk analisis jabatan ini

Nama pejabat : SARDI, SH Masa kerja jabatan ini : 04 Tahun 07 Bulan Nama atasan langsung : Salman Daidi, Bc.IP,SH.MHUM Jabatan atasan : Kepala Rutan Klas IIB Tanjung Pura Universitas Sumatera Utara BAB 4 PERANCANGAN SISTEM

4.1 Perancangan Sistem

Perancangan sistem merupakan upaya perusahaan atau suatu lembaga untuk memulai memiliki sistem yang baik yang lama maupun yang baru. Perancangan sistem dilakukan setelah mendapat gambaran dengan jelas apa yang harus dikerjakan.

4.2 Data Flow DiagramDFD

Data Flow DiagramDFD atau diagram aliran data merupakan model dari sistem untuk menggambarkan pembagian sistem ke modul yang lebih kecil. Salah satu keuntungan menggunakan diagram aliran data adalah memudahkan pemakaian atau user yang kurang menguasai bidang komputer untuk mengerti sistem yang dikerjakan.

4.2.1 Diagram Konteks

Diagram konteks adalah diagram yang terdiri dari suatu proses dan menggambarkan ruang lingkup suatu sistem. Diagram konteks merupakan level tertinggi dari DFD yang menggambarkan seluruh input ke sistem atau dari output dari sistem. Universitas Sumatera Utara

4.2.2 Diagram NolOverview Diagram

Diagram nol adalah diagram yang menggambarkan proses dari data flow diagram. Diagram nol memberikan secara menyeluruh mengenai sistem yang ditangani, menunjukkan tentang fungsi-fungsi utama atau proses yang ada, aliran data, dan entitas luar. Universitas Sumatera Utara - Data Pribadi Pegawai -Input Data Pegawai - Slip Gaji -Input Gaji Pegawai - Informasi Data pegawai -informasi Gaji Pegawai Laporan Gambar 4.1 DFD Konteks Pegawai SISTEM INFORMASI PENGGAJIAN PEGAWAI RUMAH TAHANAN NEGARA KELAS IIB TANJUNG PURA Bagian Pengelolaan Pimpinan Universitas Sumatera Utara -Informasi data pegawa -Informasi gaji pegawai -Data Pegawai -Data Penghasilan -Data Potongan -Data Golongan -Data Gaji Laporan data pegawai Laporan gaji pegawai Pegawai 03 Pembuatan Laporan 01 Input data pegawai Kepala RUTAN 02 Penggajian pegawai Bagian Pengelolaan F1 Data Pegawai Universitas Sumatera Utara Gambar 4.2 DFD Level Nol 4.3 Perancangan Flowcart Tahap selanjutnya adalah tahap pembuatan flowcartdiagram alir atau aliran informasi dari situs tersebut. Flowcart atau diagram alir adalah gambaran yang menampilkan struktur, hirarki, dan isi halaman per halaman. Dengan adanya flowcart, akan sangat membantu untuk memvisualisasi isi dari setiap halaman situs tersebut Flowcart merupakan bagan-bagan yang mempunyai arus yang menggambakan langkah-langkah penyelesaian suatu masalah. Flowcart merupakan cara penyajian dari suatu algoritma. Secara sederhana flowcart dalam membangun situs ini dapat dilihat pada gambar di bawah ini: IndexHalaman Utama Login administrator Menu Berada Galeri Kontak Login profil Sarana dan Prasarana Ka.rutan Pengamanan Lapas Struktur Hot News Judul Hot News Universitas Sumatera Utara Gambar 4.3 Aliran Informasi Rancangan Situs 4.3.1 Flowcart Menu Utama Start Menampilkan Halaman Utama Halaman Utama Memilih Daftar Link Login Administator Menu Profil Hot News Keluar Form Login A Pilih Link Yang Ada B Pilih Link Yang Ada C Pilih Judul Berita Ya Tidak Ya Ya Ya Tidak Tidak Tidak Tampil Berita Universitas Sumatera Utara Gambar 4.4 Flowcart Halaman Utama 4.3.2 Flowcart Halaman Login Administrator A Input Nama Password If True Status=Administator Halaman Utama Admin Keluar END AdministatorPassword Salah F Ya Ya Tidak Gambar 4.5 Flowcart Halaman Login Administator Universitas Sumatera Utara

4.3.3 Flowcart Halaman Menu

Gambar 4.6 Flowcart Halaman Menu B Beranda Galery Kontak Login END Halaman Beranda Halaman Galery Kontak A Ya Ya Ya Ya Tidak Tidak Tidak Universitas Sumatera Utara 4.3.4 Flowcart Halaman Profil Gambar 4.7 Flowcart Halaman Profil C Sarana dan Prasarana Ka.Rutan Struktur Pengamanan lapas Halaman Sarana dan Prasarana Halaman Ka.Rutan Halaman Struktur Halaman Pengamanan Lapas END Sarana dan Prasarana Ka.Rutan Struktur Pengamanan Lapas Ya Ya Ya Ya Tidak Tidak Tidak Universitas Sumatera Utara

4.3.5 Flowcart Halaman Utama Administator

START Halaman Admin Pilih Link Menu Admin Input Data Manajemen Data Keluar Pilih Link Pilih Link Pilih Link D F E Ya Ya Ya Tidak Tidak Tidak Universitas Sumatera Utara Gambar 4.8 Flowcart Halaman Utama Administator 4.3.6 Flowcart Halaman Menu Administator D Beranda Ubah Password Kotak Masuk Artikel Logout Halaman Beranda END Beranda G H I Ya Tidak Tidak Tidak Tidak Ya Ya Ya Kembali Ke Halaman Utama Ya Tidak Universitas Sumatera Utara Gambar 4.9 Flowcart Halaman Menu Administator

4.3.7 Flowcart Halaman Input Data

E Form Input END Ya Sub Menu Pilih Sub Menu Isi Data Ya Tidak Save Reset Ya Ya Ya Tidak D a ta b a s e Universitas Sumatera Utara Gambar 4.10 Flowcart Halaman Input Data 4.3.8 Flowcart Halaman Manajemen Data Pegawai F1 Pegawai Edit Details Tampil Data Pegawai END Hapus Edit Data Pegawai Update D a ta b a s e p e a g w a i_ k e u a n g a n Tampil Data Details Hapus Data Pegawai Ya Tidak Ya Tidak Ya Ya Tidak Universitas Sumatera Utara Gambar 4.11 Flowcart Halaman Manajemen Data Pegawai 4.3.9 Flowcart Halaman Manajemen Data Penghasilan F2 Penghasilan Edit Tampil Data Penghasilan END Hapus Edit Data Penghasiln Update D a ta b a s e p e n h a s ila n _ k e u a n g a n Hapus Data Penghasilan Ya Tidak Ya Tidak Universitas Sumatera Utara Gambar 4.12 Flowcart Halaman Manajemen Data Penghasilan 4.3.10 Flowcart Halaman Manajemen Data Potongan F3 Potongan Edit Details Tampil Data Potongan END Hapus Edit Data Potongan Update D a ta b a s e o to n g a n _ k e u a n g a n Tampil Data Potongan Details Hapus Data Potongan Ya Tidak Ya Tidak Ya Ya Tidak Universitas Sumatera Utara Gambar 4.13 Flowcart Halaman Manajemen Data Potongan 4.3.11 Flowcart Halaman Manajemen Data Golongan F4 Golongan Edit Tampil Data Golongan END Hapus Edit Data Golongan Update D a ta b a s e g o lo n g a n _ k e u a n a n Hapus Data Golongan Ya Tidak Ya Tidak Universitas Sumatera Utara Gambar 4.14 Flowcart Halaman Manajemen Data Golongan

4.3.12 Flowcart Ubah Password

G Form Ubah Password Masukkan Password Baru save D a ta b a se END Ya Ya Ya Ya Tidak Universitas Sumatera Utara Gambar 4.15 Flowcart Halaman Ubah Password

4.3.13 Flowcart Kotak Masuk

H Kotak Masuk Tampilan Pesan Hapus Balas Tampil Hapus Pesan Tampil Pesan Form Balas Save END Ya Ya Tidak Ya Tidak Ya Ya Tidak Universitas Sumatera Utara Gambar 4.16 Flowcart Halaman Kotak Masuk

4.3.14 Flowcart Artikel

I Artikel Tampil Artikel Tambah artikel Hapus Lihat Edit Form Artikel Isi artikel Save Hapus artikel Tampil Artikel Edit Artikel Update database Ya Ya Tidak Ya Tidak Ya Ya Ya Tidak Ya Ya Ya Tidak Universitas Sumatera Utara Gambar 4.17 Flowcart Halaman Artikel

4.4 Desain Layout web

Salah satu faktor agar situs dinikmati pengunjung adalah desain layout yang bagus. Sebelum kita mendisain sebuah layout kita harus membuat sketsa, setelah itu kita membagi situs menjadi beberapa bagian yaitu: a. Bagian header berisi nama perusahaan dan beberapa grafik untuk mempercantik tampilan b. Navigasi mudah dikenal dan digunakan c. Bagian konten merupakan isi yang ingin disampaikan kepada pegunjung d. Bagian footer berisi nama dan informasi pemilik situs Bagian-bagian lainnya, bisa merupakan link-link yang tersedia,kelender,dan jam. Header Link Kelender Isi Jam Footer Universitas Sumatera Utara Gambar 4.18 Rancangan Halaman Utama Gambar 4.3 Rancangan Halaman Utama Administrator

4.5 Desain Halaman website

Adapun halaman-halaman yang dibangun adalah: 1. Halaman index.php, merupakan halaman yang pertama kali muncul pada saat situs dibuka. Halaman ini berisikan artikel serta link-link menuju halaman berikutnya. 2. Halaman sejarah.php, merupakan halaman yang berisikan tentang sejarah terbentuknya Rumah Tahanan Negara Kelas IIB Tanjung Pura. Header Isi Footer Menu Input Data Manajemen Data Universitas Sumatera Utara 3. Halaman gallery.php, merupakan halaman yang digunakan untuk menampilkan foto dokumentasi Rutan maupun acara-acara lainnya. 4. Halaman sarana.php, merupakan halaman yang menampilkan sarana dan prasarana yang ada di Rutan Tanjung Pura. 5. Halaman berita.php, merupakan halaman yang berisikan tentang berita-berita mengenai Rumah Tahanan Negara Kelas IIB Tanjung Pura maupun berita terbaru lainnya. 6. Halaman struktur.php, merupakan halaman yang menampilkan tentang struktur organisasi Rumah Tahanan Negara Kelas IIB Tanjung Pura. 7. Halaman kontak.php, merupakan halaman yang mengizinkan pengunjung untuk memberikan saran, kritik ke Rumah Tahanan Negara Kelas IIB Tanjung Pura. 8. Halaman pengamanan.php merupakan halaman yang berisi tentang pengamanan yang ada di Rumah Tahanan Negara Kelas IIB Tanjung Pura. 9. Halaman admin.php, merupakan halaman yang hanya dapat diakses oleh admin untuk melakukan pengaturan seperti membuat, menghapus atau mengubah data dalam situs.

4.6 Desain Database