BAB IV ANALISIS DAN PERANCANGAN 4.1 Analisis Sistem Analisis sistem adalah proses menganalisa permasalahan untuk dipahami, diidentifikasi lalu dicarikan solusinya. Dalam tahap ini akan diuraikan beberapa kendala yang menimbulkan permasalahan sehingga mampu memberikan gambaran untuk memecahkan permasalahan itu. Adapun metode yang digunakan untuk menganalisa permasalahan yaitu: 1. Latar Belakang Masalah (dibahas pada Bab I) 2. Tinjauan Objek Penelitian (dibahas pada Bab III) 3. Pendekatan Pemecahan Masalah 4. Usulan Pemecahan Masalah 4.1.1 Pendekatan Pemecahan Masalah Setelah diketahui dari uraian masalah yang telah dibahas sebelumnya maka perlu untuk melakukan pemecahan masalah agar segala kebutuhan bisa terpenuhi. Pemecahannya adalah dengan dibangun sebuah sistem baru yaitu sebuah website profil sekolah. 4.1.2 Usulan Pemecahan Masalah Website profil sekolah dibangun dengan nama Website Profil SMA Langlangbuana Bandung ini harus mampu: 37
1. Mempublikasikan tentang profil sekolah kepada masyarakat 2. Mendokumentasikan kegiatan-kegiatan di sekolah 3. Menjadi sarana berbagi ilmu antar guru maupun siswa 4.1.2.1 Flowmap Publikasi Profil Sekolah Guru Kepala Sekolah Admin Publik Start Mencari Data Sekolah Program Kegiatan Sekolah Profil Kepala Sekolah Profil dan Data Sekolah Mengumpulkan Data Memeriksa Informasi dan Kegiatan Sekolah Memeriksa Informasi Profil Kepala Sekolah Membuat Halaman Web Website Profil Sekolah Mencari Informasi Sekolah Informasi Profil Sekolah Informasi Profil Sekolah Database Informasi Profil Sekolah End Gambar 4.1 Flowmap Publikasi Profil Sekolah Keterangan untuk flowmap diatas adalah: a) Admin (staf TU) mencari data-data tentang sekolah yaitu profil sekolah, profil kepala sekolah, dan program kegiatan sekolah yang didapat dari bagian tata usaha, wakil kepala sekolah dan kepala sekolah. b) Data yang didapat lalu dihimpun dan dibuatkan halaman web pada website sekolah. 38
c) Website sekolah terhubung dengan database sebagai penyimpanan data. d) Dari website sekolah maka didapatlah informasi mengenai sekolah yang bisa diakses oleh publik. 4.1.2.2 Flowmap Penulisan Artikel Siswa Guru Admin Publik Start Menulis Artikel Artikel Merubah Artikel Memenej Artikel Publish Artikel Membaca Artikel Website Sekolah Membaca Artikel Database End Gambar 4.2 Flowmap Penulisan Artikel Keterangan untuk flowmap diatas adalah: a) Guru memiliki hak untuk menulis pada website. b) Guru juga bisa merubah atau menghapus yang ditulisnya sendiri. c) Admin bertugas mengelola dan mengontrol seluruh yang ditulis oleh para guru. 39
d) Setelah ditulis, di-publish sehingga bisa ditampilkan pada website sekolah. e) Siswa dan publik bisa mengakses dan membaca - yang ditampilkan pada website. 4.2 Perancangan Sistem Perancangan sistem merupakan proses pembuatan serta pembahasan rancangan sistem berdasarkan hasil analisis lalu diwujudkan dalam bentuk simbolsimbol agar dimengerti pada proses pemrograman. Metode yang digunakan dalam perancangan sistem adalah: 1) Perancangan Umum a. Kedudukan Sistem b. Hardware dan Software c. Spesifikasi Perancangan IPOSC (Input-Proses-Output-Storage- Control) 2) Perancangan Sistem a. Diagram Arus Data (DAD) b. Spesifikasi Proses Arus Data 3) Perancangan Basis Data 4) Perancangan Interface a. Perancangan Interface Front End b. Perancangan Interface Back End 40
4.2.1 Perancangan Umum 4.2.1.1 Kedudukan Sistem Sistem yang dibangun dalam penelitian ini dikhususkan untuk sistem berbasis web dengan jaringan internet (webhost) dan menggunakan database. 4.2.1.2 Hardware dan Software Kebutuhan minimum dari perangkat keras (hardware) untuk membangun aplikasi ini adalah: 1) Prosesor minimal Intel Pentium 3 Processor 800 Mhz 2) RAM minimal 512 MB. 3) Monitor minimal 11 inch 4) Keyboard dan Mouse. 5) Koneksi Internet. Kebutuhan perangkat lunak (software) yang harus terinstall untuk membangun aplikasi ini adalah: 1. Sistem Operasi Microsoft Windows 7 Ultimate 2. Program XAMPP. 3. Notepad ++. 4. Google Chrome. 5. Photoshop CS5 41
4.2.1.3 Spesifikasi Perancangan IPOSC (Input-Proses-Output-Storage- Control) Perancangan ini dikemukakan oleh Sandra Donaldson Dewitz dengan tahapan berikut. 1) Rancangan Input Input atau masukan merupakan data yang akan diolah menjadi informasi. Dalam proses pembuatan profil sekolah, dan bahan ajar dibutuhkan: a. Data profil sekolah berupa data sekolah, visi dan misi, sarana, profil kepala sekolah, kegiatan-kegiatan siswa. b. Artikel dan bahan ajar untuk ditulis kedalam 2) Rancangan Proses Data yang dimasukan harus diproses terlebih dahulu agar bisa menghasilkan informasi sebagai output-nya. Proses-proses yang dilakukan diantaranya: a. Posting atau Publikasi atau informasi sekolah b. Pencarian kata kunci c. Pengolahan konten oleh admin 3) Rancangan Output Rancangan Output merupakan penjabaran informasi yang dihasilkan dari aplikasi ini yaitu: 42
a. Informasi profil sekolah b. Artikel dan bahan ajar dari guru dan admin 4) Rancangan Storage Storage atau simpanan dibutuhkan untuk menyimpan seluruh file yang dibutuhkan oleh aplikasi ini. Aplikasi ini bisa berjalan dengan storage minimal 5 Gb untuk menampung aplikasi serta seluruh konten yang tersimpan dalam database MySQL. 5) Rancangan Control Proses ini dilakukan oleh admin sebagai administrator website serta webmaster sebagai administrator server. Beberapa proses yang dilakukan pada tahap ini diantaranya: a. Control konten b. Error Control c. Perawatan d. Backup Data secara berkala 4.2.2 Perancangan Sistem 4.2.2.1 Data Flow Diagram (DFD) Diagram Arus Data atau bisa disebut Data Flow Diagram (DFD) merupakan rancangan dari proses perpindahannya data pada sistem. Digambarkan 43
dalam bentuk diagram agar mempermudah programmer untuk memprogram perangkat lunak sehingga sesuai dengan yang diharapkan. Proses yang akan dibahas ada dua jenis yaitu : pembuatan, dan pembuatan halaman web. Ketiga proses tersebut dilakukan oleh user yang berbeda haknya. Untuk lebih jelasnya akan dibahas pada diagram berikut. 1) Diagram Konteks Guru Artikel Halaman_web Artikel Data_Login Data_Login Admin Artikel Website Profil SMA Langlangbuana Bandung Artikel Siswa dan Pengunjung Halaman_web Halaman_web Halaman_web Gambar 4.3 Diagram Konteks Website Profil SMA Langlangbuana Bandung 44
2) Diagram Arus Data Level-0 Guru Admin Konten_ Konten_ Data_profil Konten_ Data_profil Data_user Data_user Konten_ 2.0 Kelola Halaman_web 3.0 Kelola User 4.0 Kelola Artikel 1.0 Login Data_profil Data_profil Data_user Data_user Konten_ Konten_ Halaman_web User Artikel Data_login Gambar 4.4 Diagram Arus Data Level-0 Website Profil SMA Langlangbuana Bandung 3) Diagram Arus Data Level-1 Penulisan Artikel 1.1 Login password username user password username 1.1 Login password username 1.2 Verifikasi 4.1 Menulis 4.1 Menulis 1.2 Verifikasi password username Guru 4.2 Merubah Artikel 4.3 Merubah Admin 4.3 Membaca 4.3 Membaca 4.3 Membaca Siswa Publik Gambar 4.5 Diagram Arus Data Level-1 Penulisan Artikel 45
4) Diagram Arus Data Level-1 Pembuatan Halaman Web user password username 1.1 Login Halaman_web informasi_profil data_profil data_profil data_profil 2.1 Menulis 2.2 Merubah 1.2 Verifikasi password username data_profil data_profil Admin 2.3 Membaca 2.3 Membaca data_profil Guru Siswa Publik Gambar 4.6 Diagram Arus Data Level-1 Penulisan Halaman Web 4.2.2.2 Spesifikasi Proses Arus Data Spesifikasi Proses Arus Data merupakan alat bantu untuk menjabarkan proses-proses yang terdapat pada diagram arus data. Berikut adalah spesifikasi proses arus data Website SMA Langlangbuana Bandung. Tabel 4.1 Spesifikasi Proses Arus Data Website SMA Langlangbuana Bandung No. Proses Keterangan No. Proses 1 Nama Proses Input 1 Input Username, password,, data profil, thread dari admin dan guru. Output Disimpan pada database Artikel, User, dan Halaman_web 46
2 No. Proses 2 Nama Proses Output Input Data dari database Output Informasi Profil, Artikel, dan Hak akses 4.2.3 Perancangan Database 1) Tabel Admin Tabel yang berisi tentang data admin, pada table ini admin bersifat sebagai user, akan tetapi ada kebijakan yang dapat diperoleh dari seorang user tersebut, ataukah dia dijadikan sebagai super_user, administrator, publisher, dll. Desain tabel dijabarkan dalam table berikut: Nama table Fungsi Keyfield : admin : Menampung data User : admin Tabel 4.2 Tabel Admin/User No Column Type Extra 1 id Int(3) Auto_increment 2 nama Varchar(50) 3 username Varchar(20) 4 email Varchar(30) 5 password Varchar(20) 6 usertype Varchar(10) 47
2) Tabel Artikel Tabel yang berisi tentang yang akan di upload oleh admin. Dalam table ini menyimpan atribut yang akan di tampilkan pada nantinya seperti : judul, sumber, beserta tanggal dan isi. Desain Tabel dijabarkan dalam table berikut : Nama table Fungsi Keyfield : : Menampung data : Tabel 4.3 Tabel Artikel No Column Type Extra 1 id Int(15) Auto_increment 2 judul Varchar(100) 3 sumber Varchar(100) 4 tanggal Date 5 Text 3) Tabel Bahan Ajar Tabel yang berisi tentang bahan ajar yang akan di upload oleh guru yang memiliki hak akses pada. Dalam table ini terdapat beberapa atribut yang harus di isi untuk mengupload bahan ajar tersebut, seperti: bidang studi, judul materi, sumber, tanggal dan isi materi. Nama table Fungsi Keyfield : bahan_ajar : Menampung data bahan ajar : bahan_ajar 48
Tabel 4.4 Tabel Bahan Ajar No Column Type Extra 1 id Int(5) Auto_increment 2 bidang_studi Varchar(50) 3 judul Varchar(100) 4 sumber Varchar(50) 5 tanggal Date 6 materi Text 4) Tabel Buku Tamu Tabel buku_tamu merupakan tabel yang digunakan sebagai tempat penyimpanan data buku tamu yang di inputkan oleh pengunjung website. Dalam table ini terdapat beberapa atribut yang harus di isi untuk mengisi buku tamu tersebut, seperti: nama, email, dan pesan. Nama table Fungsi Keyfield : buku_tamu : Menampung data buku tamu : buku_tamu Tabel 4.5 Tabel Buku Tamu No Column Type Extra 1 id Int(3) Auto_increment 2 nama Varchar(50) 3 email Varchar(100) 4 pesan text 49
4.2.4 Perancangan Interface 4.2.4.1 Tampilan Utama Rancangan tampilan (interface) utama merupakan interface dari layout secara keseluruhan terhadap web browser. Ada 4 (lima) bagian yang tersusun yaitu: 1) Menu Menu berisi menu yang akan mengarahkan ke halaman lainnya. 2) Header Header memuat nama website. 3) Content Content merupakan halaman utama yang menampilkan isi dari halaman yang dituju, 4) Footer Footer berisi keterangan website seperti hak cipta (copyright), tahun pembangunan, pembuat dan perancang web, contact instansi dan sebagainya. 4.2.4.2 Menu Menu memuat menu utama yang menghubungkan ke halaman lain. Informasi pada menu ini merupakan informasi mengenai sekolah secara lengkap, beserta dan yang di upload oleh guru dan admin. 50
1. Halaman Menu Gambar 4.7 Rancangan Halaman Menu Utama 2. Halaman Log in Gambar 4.8 Rancangan Halaman Login 51
3. Halaman Input Buku Tamu Gambar 4.9 Rancangan Halaman Buku Tamu 4. Halaman Input Artike Gambar 4.10 Rancangan Halaman Input Artikel 52
5. Halaman Input Bahan Ajar Gambar 4.11 Rancangan Halaman Input Bahan Ajar 53