BAB V IMPLEMENTASI SISTEM

Transkripsi

1 BAB V IMPLEMENTASI SISTEM Pada bab ini merupakan tahapan penerjemahan kebutuhan pembuatan software ke dalam representasi perangkat lunak sebeleum penulisan kode program dimulai sesuai dengan hasil analisis yang telah dilakukan. Implementasi yang dilakukan meliputi implementasi perangkat keras dan implementasi perangkat lunak, sedangkan untuk pengujian meliputi pengujian terhadap perangkat lunak hasil implementasi 5.1 Rencana Implementasi Rencana implementasi dilakukan setelah perancangan sistem dibuat. Sebelum pembuatan perangkat lunak, diperlukan tahap penerjemahan kebutuhan pembuatan perangkat lunak ke dalam representasinya sesuai dengan hasil analisis yang telah dilakukan. Rencana implementasi yang akan dilakukan meliputi rencana implementasi perangkat lunak dan perangkat keras, perancangan menu, perancangan halaman utama, perancangan rencana pendukung halaman utama dan rencana implementasi database. 5.2 Kebutuhan Implementasi Implementasi Perangkat Keras Perangkat keras komputer merupakan semua bagian fisik computer, dan dibedakan dengan data yang berada di dalamnya, dan dibedakan dengan perangkat keras lunak (software) yang menyediakan instruksi untuk perangkat keras dalam menyelesaikan tugasnya. Batasan antara perangkat keras dan perangkat lunak untuk firmware kadang kadang menjadi tidak jelas. Karena firmware adalah perangkat lunak yang dibuat ke dalam perangkat keras. Firmware merupakan bidang yang dibahas dalam ilmu komputer dan teknik komputer, sehingga jarang dikenal oleh umum. Perangkat keras yang akan digunakan pada saat pembuatan dan pengujian implementasi ini akan dilakukan pada computer dengan spesifikasi berikut. 89

2 90 a. Processor AMD E-450 APU with Radeon(tm) HD Graphics (2 CPUs), ~1.6Ghz b. Memory 2048MB c. Kartu grafis 880 MB d. Harddisk 320 GB e. Directx Version 11 f. Plug and Play Monitor g. PS/2 Keyboard h. HD compliant mouse Implementasi Perangkat Lunak Nama lain dari software yaitu perangkat lunak, sifatnya pun berbeda dengan hardware atau perangkat keras, jika perangkat keras adalah kompunen yang nyata yang dapat dilihat dan disentuh oleh manusian, maka software atau perangkat lunak tidak dapat disentuh dan dilihat secara fisik, tetapi dioperasikan. 1. Sistem Operasi Sistem operasi yang akan digunakan untuk membangun aplikasi dan website adalah Microsoft Windows 7 Ultimate, dimana memiliki kehandalan dan kinerja yang cukup tinggi dalam mendukung seluruh perangkat lunak yang diperlukan selama pembuatan. Sistem operasi ini dipilih karena saat ini seluruh divisi secara umum menggunakan sistem operasi ini dan beberapa perangkat lunak yang akan digunakan sebagai perangkat pembuat dan penguji situs web ini masih mendukung sistem operasi ini. 2. Web Server Lingkungan web yang digunakan dalam rencana implementasi Aplikasi Pengolahan Data Surat Msuk yaitu Apache , yang merupakan salah satu paket atau modul yang tersedia dalam XAMPP. Apache berfungsi sebagai compiler dan di dalam XAMPP ini juga tersedia

3 91 PHP dan MySQL (database sebagai tempat menyimpan data yang dibutuhkan). 3. Web Browser Web browser dibutuhkan karena perangkat lunak yang dirancang adalah sebuah perangkat lunak berbasis web. Web browser yang akan digunakan sebagai perangkat uji yaitu Google Chrome Version Perangkat Lunak Pembangun Website Untuk membangun website, digunakan Adobe Drameweaver CS5 sebagai alat untuk perancangan tampilan sekaligus compiler, serta perangkat lunak pendukung text editor, yaitu notepad Implementasi Dengan HTML <html> <head> <title>arsip - PEGADAIAN</title> <link href="img/ico.png" rel="shortcut icon" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/autocomplit_a.css" /> <script src="js/autocomplit_a.js"></script> <script src="js/autocomplit_b.js"></script> <script> $(function() { var availabletags = [ "OPP", "Logistik", "Humas", "TI", "PKBL", "Pinwil", "Sekertaris",

4 92 "SDM", "Keuangan", "LO", "Irwil" ]; $( "#divisi" ).autocomplete({ source: availabletags ); ); </script> </head> <body> <form class="form-5 clearfix" action="" method="post" name="login"> <p> <input type="text" id="divisi" name="divisi" placeholder="divisi" class="ui-widget" autocomplete="on" required> <input type="password" id="kode" name="kode" placeholder="kode Divisi" required> <input type="password" name="pass" id="pass" placeholder="password" required> </p> <button type="submit" name="login" id="login" value="login"> <span><img height="70" width="70" src="img/blogin.png"></span> </button> </form> <footer id="main"> Kantor Wilayah X Bandung Jl. Pungkur No. 125, Bandung </footer> </body> </html>

5 Implementasi Dengan CSS body { background:90cb38; *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;.clearfix:after { content: ""; display: table; clear: both;.form-5 { /* Size and position */ top: 150; width: 300px; margin: 60px auto 30px; position: relative; /* Styles */ border-radius: 5px;

6 94 box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);.form-5 p { width: 70%; float: left; border-radius: 5px 0 0 5px; border: 1px solid #fff; border-right: none;.form-5 input[type=text],.form-5 input[type=password] { /* Size and position */ width: 100%; height: 50px; padding: 0 10px; /* Styles */ border: none; /* Remove the default border */ background: white; /* Fallback */ background: rgba(255,255,255,0.2); box-shadow: inset px rgba(255,255,255,0.5); /* Font styles */ font-family: sans-serif; text-indent: 10px; color: red; text-shadow: 0 1px 2px rgba(0,0,0,0.3); font-size: 20px;

7 95.form-5 input[type=text] { border-top: 1px solid rgba(0,0,0,0.1);.form-5 input[type=password] { border-top: 1px solid rgba(0,0,0,0.1);.form-5 button { /* Size and position */ background-color:transparent; width: 30%; height: 155px; float: left; position: relative; /* Styles */ border: none; border-left: 1px solid silver; cursor: pointer; line-height: 102px; /* Same as height */ /*footer*/ footer#main{ position:fixed; left:0; bottom:60px; text-align:center; font:normal 12px/16px Arial, Helvetica, sans-serif;

8 96 width:100%; 5.3 Rencana Menu Untuk rencana menu pada web Sistem Informasi Pengolahan Data Surat Masuk Berbasis Multiuser ini, adalah sebagai berikut. 1. Admin 2. Divisi Logistik Menu divisi logistik ini menampilkan halaman catat surat masuk yang akan menginputkan surat masuk pengajuan dari cabang, catat surat SPOA/ND yaitu menginputkan surat ekspedisi dari kantor pusat tersebut, cari surat merupakan pencarian surat masuk pengajuan dari cabang dan cek persetujuan surat ekspedisi merupakan pencarian surat ekspedisi yang telah di setujui atau bellum di setujui oleh pihak divisi yang di tuju. 3. Divisi Umum Pada halaman divisi umum hanya terdapat menu persetujuan surat masuk untuk menyetujui surat yang dikirim dari divisi logistik. 5.4 Hasil Implementasi Implementasi website dilakukan dengan jalan pembuatan kode pemrograman berdasarkan modul-modul yang telah dirancang dengan menggunakan Adobe Drameweaver CS5 sebagai alat untuk perancangan tampilan sekaligus compiler, serta perangkat lunak pendukung text editor, yaitu notepad Halaman Login Halaman login merupakan halaman utama website tersebut yang terdapat divisi, kode divisi dan password.

9 97 Gambar 5.1 Halaman Login Bagian Admin Dibagian admin terdapat beberapa fasilitas diantaranya : 1. Menu anak cabang 2. Menu Divisi Kantor 3. Menu Backup Gambar 5.2 Halaman Utama Admin Dibagian Halaman admin di menu anak cabang berfungsi untuk mengupdate data dari seluruh cabang yang berada di PT.PEGADAIAN Bandung

10 98 Gambar 5.3 Halaman Admin Anak Cabang Dibagian Halaman admin di menu divisi berfungsi untuk mengupdate data dari seluruh divisi kantor yang berada di PT.PEGADAIAN Bandung Gambar 5.4 Halaman Admin Divisi Dibagian Halaman admin di menu backup berfungsi untuk membackup data dari seluruh yang bersangkutan dengan sistem yang berada di kantor dari backup data anak cabang, backup data divisi, dan backup log atau aktifitas dari seruluh divisi di web tersebut.

11 99 Gambar 5.5 Halaman Admin Backup Bagian Divisi Logistik Dibagian divisi logistik terdapat beberapa fasilitas diantaranya : 1. Menu catat surat masuk 2. Menu catat surat SPOA/ND 3. Menu cari surat 4. Menu cek persetujuan surat SPOA/ND Gambar 5.6 Halaman Utama Divisi Logistik

12 100 Dibagian Halaman divisi logistik di menu catat surat masuk berfungsi untuk menginput surat pengajuan dari cabang. Gambar 5.7 Halaman Divisi Logistik Catat Surat Masuk Dibagian Halaman divisi logistik di menu catat surat SPOA/ND berfungsi menginputkan surat yang bertujuan ke divisi keuangan dan sekertaris yang berkenaan dengan system atau kerja kantor. Gambar 5.8 Halaman Divisi Logistik Catat Surat SPOA dan ND

13 101 Dibagian Halaman divisi logistik di menu cari surat berfungsi untuk mencari surat masuk pengajuan dari cabang dengan pencarian ini bisa melihat apakah surat masuk tersebut sudah di setujui oleh divisi yang di tuju oleh cabang atau belum. Gambar 5.9 Halaman Divisi Logistik Cari Surat Dibagian Halaman divisi logistik di menu cek persetujuan SPOA/ND berfungsi untuk mencari pengajuan dari divisi logistik ke divisi inti peneriman surat ekspedisi. Pencarian ini bisa melihat apakah surat ekspedisi tersebut sudah di setujui oleh divisi yang bersangkutan atau belum. Gambar 5.10 Halaman Divisi Logistik Cek Persetujuan SPOA dan ND

14 Bagian Divisi Umum Dibagian divisi umum hanya terdapat satu fasilitas menu yaitu menu persetujuan surat masuk. Gambar 5.11 Halaman Utama Divisi Umum Dibagian Halaman divisi umum di menu persetujuan surat masuk berfungsi untuk melakukan persetujun dari surat masuk itu sendiri, apakah surat masuk itu sudah benar ke divisi tersebut atau bukan. Gambar 5.12 Halaman Divisi Umum Persetujuan Surat Masuk