BAB III ANALISIS DAN PERANCANGAN SISTEM

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN SISTEM III.1 Analisis Masalah Perancangan sebuah sistem informasi sangat dibutuhkan oleh perusahaan atau instansi manapun, sebab dengan adanya sebuah sistem informasi akan dapat mempermudah cara kerja dan pengetahuan masyarakat akan kesehatan seperti yang dibahas didalam skripsi ini. Perancangan sistem dapat didefenisikan sebagai penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam suatu kesatuan yang utuh dan berfungsi. Perancangan sistem menentukan bagaimana suatu sistem akan dibentuk. Perancangan sistem mempunyai dua tujuan utama yaitu : 1. Untuk memenuhi kebutuhan kepada para pemakai sistem. 2. Untuk memberikan gambaran yang jelas dan merancang bangun yang lengkap kepada pemrogram komputer dan ahli-ahli teknik lainnya. Untuk mencapai tujuan ini, haruslah dapat mencapai sasaran-sasaran sebagai berikut : 1. Perancangan sistem harus berguna, mudah dipahami dan nantinya mudah digunakan. 2. Perancangan sistem harus dapat mendukung tujuan utama Instansi. 3. Perancangan sistem harus efisien dan efektif untuk dapat mendukung Sistem Informasi. Perancangan sistem harus dapat mempersiapkan rancang bangun yang terinci untuk masing-masing komponen dari sistem informasi yang meliputi data dan informasi, simpanan data, metode-metode, prosedur-prosedur, orang-orang, perangkat keras, perangkat lunak dan pengendalian intern.

2 III.2 Pemecahan Masalah Adapaun pemecahan masalah yang diambil dari analsis yang telah dilakukan sebelumnya adalah sebagai berikut : 1. Merancang Perangkat Lunak Pertolongan Pertama Gawat Darurat (PPGD) Berbasis Web. 2. Menjelaskan tentang pentingnya pertolongan pertama sebagai tindak lanjut bagi korban kecelakaan. 3. Menjelaskan bagaimana pertolongan pertama lewat video. III.3 Desain Sistem III.3.1 Diagram Konteks Dalam diagram konteks Pertolongan Pertama Gawat darurat dimana admin melakukan proses mengupdate data ataupun info tentang PPGD atau hanya sekedar melihat siapa saja yang datang Berkunjung melihat web tersebut. Lalu user atau pengguna mencari informasi tentang PPGD dalam bentuk video ataupun dalam bentuk karya tulis, selain itu user bisa melakukan poling untuk melihat apakah web tersebut baik atau tidak dan user bisa mengisi buku tamu. Adapun Diagram Konteks dari Perancangan Perangkat Lunak Pertolongan Pertama Gawat Darurat (PPGD) Berbasis Web dapat dilihat pada gambar III.1. Buku tamu Administrator Buku tamu Sistem website Pertolongan Pertama Data video / audio pertolongan pertama Pengunjung Info Data Video/ Prtolongan Pertama

3 Gambar III.1 Diagram Konteks Pertolongan Pertama Gawat Darurat III.3.2 Data Flow Diagram DFD (Data Flow Diagram) mengindetifikasikan secara terperinci komponen sistem informasi yang didesain. Tujuan dari pada penggambaran DFD ini adalah untuk memberikan gambaran secara umum pada pemakai (user) tentang sistem yang baru.dimana Admin melakukan proses log in setelah itu.data login di simpan. Admin masuk kemenu administrator disana admin bisa mengupdate informasi tentang PPGD, melihat hasil Poling dan buku tamu. Setelah melakukan pengupdatetan informasi baru user atau pengunjung bisa mencari informasi sesuai yang di inginkan user. Apabila user melakukan poling dan buku tamu maka data mereka akan tersimpan didatabase admin. Adapun Data Flow Diagram (DFD) dari Perancangan Perangkat Lunak Pertolongan Pertama Gawat Darurat (PPGD) Berbasis Web dapat dilihat pada gambar III.2

4 Administrator Pengunjung Log In 0.1 Proses Log in Tlog in Mengunjungi web 0.2 Up Data informasi TInformasi TAudio/video Hasil Informasi Audio/ Video 0.3 Mengunjungi website,isi buku tamu, poling informasi, data audio/video TBukuTamu TPolling Gambar III.2 DFD Level 0 III.3.3 ERD (Entity Relationship Diagram) Adapun Entity Relationship Diagram dari Perancangan Perangkat Lunak Pertolongan Pertama Gawat Darurat Berbasis Web dapat dilihat pada gambar III.3.

5 Pengunjung 1 N Mencari / Melihat WEB PPGD Gambar III.3 ERD Antara Pengunjung dengan Info PPGD Pada gambar III.3 ERD diatas dapat dilihat Pengunjung mencari dan melihat beberapa informasi tentang Pertolongan Pertama Gawat Darurat (PPGD). Administrator 1 N Menginput WEB PPGD Gambar III.4 ERD Administrator dengan Info PPGD Pada gambar III.4 ERD diatas dapat dilihat administrator menginputkan beberapa informasi tentang Pertolongan Pertama Gawat Darurat (PPGD). III.3.4 Desain Database 1. Desain Tabel User terdiri dari : Desain table User Nama Database Nama Tabel : DB_AUDIO_VIDEO : User

6 Field Key : UserID Tabel III.1 Desain Tabel Data User Field Name Type Size Indexed Description UserID Varchar 50 Yes Nama User Password Varchar 50 Password 2. Desain Tabel Data Informasi terdiri dari : Desain File Data Informasi Nama Database Nama Tabel Field Key : DB_AUDIO_VIDEO : Informasi : IDInformasi Tabel III.2 Desain Tabel Data Informasi Field Name Type Size Indexed Description IDInformasi Int (auto) 4 Yes ID Informasi Judul Varchar 50 - Judul Berita InfoSingkat Varchar 50 - Informasi Singkat InfoPenuh Text 0 - Informasi Penuh Gambar Text 0 - File Gambar JenisInfo Text 0 - Jenis Informasi 3. Desain Tabel Data Polling terdiri dari : Desain File Data Polling Nama Database Nama Tabel Field Key : DB_AUDIO_VIDEO : Polling : IDPolling

7 Tabel III.3 Desain Tabel Data Polling Field Name Type Size Indexed Description IDPolling Int (auto) 4 Yes ID Polling Pertanyaan Varchar 50 - Pertanyaan Jawaban1 Varchar 50 - Jawaban 1 Jawaban2 Varchar 50 - Jawaban 2 Jawaban3 Varchar 50 - Jawaban 3 Jawaban4 Jawaban 50 - Jawaban 4 4. Desain Tabel Data Hasil Polling terdiri dari : Desain File Data Hasil Polling Nama Database Nama Tabel Field Key : DB_AUDIO_VIDEO :HasilPolling : IDPolling Tabel III.4 Desain Tabel Data Hasil Polling Field Name Type Size Indexed Description IDPolling Int (auto) 4 Yes ID Polling JumPol1 Int 4 - Jumlah Polling Jawaban 1 JumPol2 Int 4 - Jumlah Polling Jawaban 2 JumPol3 Int 4 - Jumlah Polling Jawaban 3 JumPol4 Int 5 - Jumlah Polling Jawaban 4 5. Desain Tabel Data Buku Tamu terdiri dari : Desain File Data Buku Tamu Nama Database Nama Tabel : DB_AUDIO_VIDEO : BukuTamu

8 Field Key : IDBukuTamu Tabel III.5 Desain Tabel Data Buku Tamu Field Name Type Size Indexed Description IDBukuTamu Int (auto) 4 Yes ID Buku Tamu Nama Varchar 50 - Nama Varchar Komentar Text 0 - Komentar 6. Desain Tabel Data Jenis Informasi terdiri dari : Desain File Data Informasi Nama Database Nama Tabel Field Key : DB_AUDIO_VIDEO : JenisInformasi : IDJenisInfo Tabel III.6 Desain Tabel Jenis Informasi Field Name Type Size Indexed Description IDJenisInfo Int (auto) 4 Yes ID Jenis Informasi NamaJenisInformasi Varchar 50 - Nama Jenis Informasi 7. Desain Tabel Data Audio Video terdiri dari : Desain File Data Informasi Nama Database Nama Tabel Field Key : DB_AUDIO_VIDEO : AudioVideo : IDJenisInfo Tabel III.7 Desain Tabel Audio Video

9 Field Name Type Size Indexed Description IDJenisInfo Int (auto) 4 Yes ID Jenis Informasi Judul Varchar 50 - Judul File Varchar 100 File Keterangan Varchar 100 Keterangan III Relasi Tabel Adapaun gambar relasi antar table dari desain table yang telah di buat pada Perancangan Perangkat Lunak Pertolongan Pertama Gawat Darurat Berbasi Web. Dalam Proses Perancangan perangkat luank Pertolongan Pertama Gawat Darurat Berbasis web mempunyai 7 ( tujuh) tabel dan mempunya relasi antar tabel. Dapat dilihat pada gambar III.5 INFORMASI POLING 1 *IDInformasi Judul Infosingkat Infopenuh Gambar IDJenisInfo 1 N AUDIOVIDEO *IDJenisInformasi Judul File keterangan *IDPoling Pertanyaan Jawaban1 Jawaban2 Jawaban3 HASILPOLING N JENISINFORMASMASI *IDJenisInformasi JenisInformasi N 1 *IDPoling JumPol1 JumPol2 JumPol3

10 Gambar III.5 Relasi Tabel III.4 Rancangan Halaman Website III.4.1 Rancangan Halaman Utama Ini merupakan suatu bentuk halaman pembuka website yang tampil disaat user membuka situs website ini. Rancangan halaman utama yang tampil dapat dilihat seperti gambar III.6. HEADER / JUDUL [ Beranda ] [ Berita ] [ Info Pertolongan ] [ Buku Tamu ] Menu Utama Profil Visi & Misi Galery Foto Pertolongan Audio/Video - Audio/Video 1 - Audio/Video 2 Main Conteks Polling Isi Polling

11 - Audio/Video 3 - Audio/Video 5 Gambar kiri Gambar kanan Design By : xxxxxxxxxx Gambar III.6 Halaman Utama III.4.2 Rancangan Halaman Visi & Misi Rancangan Halaman Visi & Misi dapat di lihat seperti gambar III.7 HEADER / JUDUL [ Beranda ] [ Berita ] [ Info Pertolongan] [ Buku Tamu ] Menu Utama Profil Visi & Misi Galery Foto Pertolongan Visi dan Misi

12 Audio/Video - Audio/Video 1 - Audio/Video 2 - Audio/Video 3 - Audio/Video 5 Gambar kiri Polling Isi Polling Gambar kanan Design By : xxxxxxxxxx Gambar III.7 Halaman Visi Misi III.4.3 Rancangan Halaman Galery Foto Rancangan Halaman Galery Foto dapat di lihat seperti gambar III.8 HEADER / JUDUL [ Beranda ] [ Berita ] [ Info Pertolonga] [ Buku Tamu ] Menu Utama Profil Visi & Misi Galery Foto Objek foto PPGD Galery Foto

13 Video / audio - Audio/Video 1 - Audio/Video 2 - Audio/Video 3 - Audio/Video 5 Gambar kiri Polling Isi Polling Gambar kanan Design By : xxxxxxxxxx Gambar III.8 Halaman Galery Foto III.4.4 Rancangan Halaman Berita Rancangan Halaman Berita dapat di lihat seperti gambar III.9 HEADER / JUDUL [ Beranda ] [ Berita ] [ Info Pertolongan] [ Buku Tamu ] Menu Utama Profil Visi & Misi Galery Foto Tes berita... Perlombaan... Pesta buah dan bunga Pertolongan

14 Audio/Video - Audio/Video 1 - Audio/Video 2 - Audio/Video 3 - Audio/Video 5 Gambar kiri Berita Polling Isi Polling Gambar kanan Design By : xxxxxxxxxx Gambar III.9 Halaman Berita III.4.5 Rancangan Halaman Info Pertolongan Rancangan Halaman Informasi Infor Pertolongam dapat di lihat seperti gambar III.10 HEADER / JUDUL [ Beranda ] [ Berita ] [ Info Pertolongan ] [ Buku Tamu ] Menu Utama Profil Visi & Misi Galery Foto Pertolongan Info Pertolongan

15 Audio/Video - Audio/Video 1 - Audio/Video 2 - Audio/Video 3 - Audio/Video 5 Gambar kiri Polling Isi Polling Gambar kanan Design By : xxxxxxxxxx Gambar III.10 Halaman Informasi Pertolongan III.4.6 Rancangan Halaman Profil Rancangan Halaman Informasi Profil dapat di lihat seperti gambar III.11 HEADER / JUDUL [ Beranda ] [ Berita ] [ Info Pertolongan] [ Buku Tamu ] Menu Utama Profil Visi & Misi Galery Foto Umum... Pertolongan Audio/Video - Audio/Video 1 Info Profil Polling

16 - Audio/Video 2 - Audio/Video 3 - Audio/Video 5 Gambar kiri Isi Polling Gambar kanan Design By : xxxxxxxxxx Gambar III.11 Halaman Informasi Profil III.4.7 Rancangan Halaman Informasi Audio/Video Rancangan Halaman Informasi Audio/Video dapat di lihat seperti gambar III.12 HEADER / JUDUL [ Beranda ] [ Berita ] [ Info Pertolongan ] [ Buku Tamu ] Menu Utama Profil Visi & Misi Galery Foto Pemutar Audio / Video Pertolongan Audio/Video - Audio/Video 1 - Audio/Video 2 Polling Isi Polling

17 - Audio/Video 3 - Audio/Video 5 Gambar kiri Informasi Audio/Video???????? Gambar kanan Design By : xxxxxxxxxx Gambar III.12 Halaman Informasi Audio/Video III.4.8 Rancangan Halaman Utama Administrator Rancangan Halaman Utama Administrator dapat di lihat seperti gambar III.13 SELAMAT DATANG DI MENU ADMINISTRATOR Banner Data Informasi Pengaturan Data User Teks Berjalan Gambar Kanan Gambar Kiri Input File Audio/Video List File Audio/Video List Buku Tamu Logout

18 Gambar III.13 Menu Utama Administrator III.4.9 Input Banner Digunakan untuk memasukkan banner dari website yang dibuat. Adapun gambar Halaman Input Banner dapat dilihat pada gambar III.14 Design Tambah / Edit Buku Tamu INPUT BANNER Masukkan File Banner : [ Kembali ] [ Submit ] [ Reset ] Gambar III.14 Form Banner III.4.10 Rancangan Halaman Berita/Informasi Form ini di gunakan untuk mengolah data Berita/Informasi. Perancangan data Berita dapat dilihat pada Gambar III.15

19 List Data Berita/Informasi ID Berita Judul Informasi Singkat Informasi Penuh # [Edit][Hapus] [Edit][Hapus] [Edit][Hapus] [Edit][Hapus] [ Tambah Data ] Gambar III.15 List Data Berita/Informasi III.4.11 Rancangan Halaman Menu Administrator Form ini di gunakan untuk mengolah data Berita/Informasi. Perancangan Halaman dapat dilaman Menu Administrator lihat pada Gambar III.16 SELAMAT DATANG DI MENU ADMINISTRATOR Jenis Info : == Pilihan == Judul : Informasi Singkat : Informasi Penuh : Gambar : [ Browse] [ Submit ] [ Reset ] [ Kembali ] Gambar III.16 Form Data Berita/Informasi

20 III.4.12 Input Teks Berjalan Digunakan untuk memasukkan teks Berjalan dari website yang dibuat. Adapun Halaman Input Teks Berjalan dapat dilihat pada gambar III.17 INPUT Teks Berjalan Masukkan File Banner : [ Kembali ] [ Submit ] [ Reset ] Gambar III.17 From Input Teks Berjalan III.4.13 Rancangan Halaman Data Buku Tamu Form ini di gunakan untuk mengolah data Buku Tamu. Perancangan data buku tamu dapat dilihat seperti gambar III.18 List Buku Tamu SELAMAT DATANG DI MENU ADMINISTRATOR Nama Komentar # [Edit][Hapus] [Edit][Hapus] [Edit][Hapus] [Edit][Hapus] [ Tambah Data ] Gambar III.18 List Buku Tamu III.4.14 Rancangan Halaman Data Polling

21 Form ini di gunakan untuk mengolah data Polling. Perancangan data poling dapat dilihat seperti gambar III.19 List Polling Data Polling ID Pertanyaan Jawab 1 Jawab 2 Jawab 3 Jawab 4 # [Edit][Hapus] [Edit][Hapus] [Edit][Hapus] [Edit][Hapus] [ Tambah Data ] Gambar III.19 List Data Polling Design Tambah / Edit Polling

22 Data Polling Pertanyaan : Jawaban 1 : Jawaban 2 : Jawaban 3 : Jawaban 4 : [ Kembali ] [ Submit ] [ Reset ] Gambar III.20 Form Data Polling III.4.15 Tampil Buku Tamu Digunakan untuk memberikan suatu kritik ataupun saran demi memperbaiki infomasiinformasi yang ada dan dijadikan sebagai bahan masukan. Adapun rancangan Halaman Buku Tamu dapat dilihat pada gambar III.21 BUKU TAMU Nama : Komentar : [ Simpan ] [ Reset ] Kembali Ke Home [ Kembali ] Gambar III.21 Tampilan Buku Tamu III.4.16 logika Program

23 Untuk penunjang proses data informasi Pertolongan Pertama Gawat Darurat (PPGD), maka di rancanglah suatu rancangan logika (Flowchart). Tahap perancangan suatu program. 1. Diagram alur Algoritma Start Men u Admin melakukan log in Login Tidak Audi o ya ya ya Menu audio video Men u Hasil Buku ya Tidak ya Update Informasi Hasil Buku Tamu Info pertolong Info pertolongan Tidak Hasi l ya Hasil poling

24 Tidak Buku Tamu ya Isi Buku Tamu Tidak Tidak Poling ya Melakukan poling Tidak End Gambar III.22 Diagram Alur Algoritma 2. Flowchart Menu Utama Start Mengunjungi web, isi buku tamu, poling Audi o Menu Audio Video Informa si pertolon Menu Informasi Pertolongan End

25 Gambar III.23 Flowchart Menu Utama 3. Flowchart Menu Utama Administrator start Mengupdate Informasi Aud io Menu audio video Beri ta Menu Berita InfoPPG D Menu InfoPPGD

26 Gale ry Menu Galery Foto Melihat hasil Hasil poling Melihat bukuta Menu Galery Foto start Gambar III.24 Flowchar Menu Adminisrator