BAB 3 ANALISA PERANCANGAN SISTEM. Aplikasi umum yang biasa berjalan pada internet adalah sebuah halaman web yang

Transkripsi

1 41 BAB 3 ANALISA PERANCANGAN SISTEM 3.1 Analisa Sistem Aplikasi umum yang biasa berjalan pada internet adalah sebuah halaman web yang terletak pada sebuah situs, dimana halaman atau dokumen web tersebut dibuat dengan menggunakan tag-tag html. Sebuah halaman web yang hanya menggunakan tag-tag html standar yang ada akan merupakan halaman web yang statis. Untuk menjadikan halaman web tersebut menjadi halaman web yang dinamis, interaktif, atau untuk menjadi sebuah aplikasi diperlukan adanya tambahan pada halaman web tersebut disamping tag yang digunakan. Pada perancangan aplikasi akan dibuat aplikasi berbasiskan PHP. Saat ini teknologi PHP dapat dikatakan telah mendominasi teknologi enterprise karena teknologi ini terbukti tangguh dan stabil dalam aplikasi enterprise. Teknologi enterprise seringkali memanfaatkan interface web sehingga teknologi PHP menjadi sangat penting. 3.2 Perancangan Sistem Perancangan Sistem adalah upaya suatu organisasi atau lembaga untuk memulai memiliki suatu sistem yang lebih baik lagi dari sistem yang sebelumnya. Perancangan sistem dilakukan setelah mendapat gambaran dengan jelas apa yang harus dikerjakan. Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan pemakai (user)

2 42 mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta diimplementasikan Diagram Konteks Agar suatu sistem terstruktur, dapat dibuat suatu proses modeling dimana hasil dari proses modeling tersebut berupa diagram konteks.dari website tersebut akhirnya dirancang sebuah antar muka profil dan formulir pendaftaran untuk dapat dilihat dan diisi oleh pihak pendaftar. Untuk lebih jelasnya dapat dilihat pada gambar 3.1 diagram konteks berikut ini : Pengunjung Registrasi Pilih Paket 0.0 Informasi Paket Sistem Perancangan Wedding Organizer Data Paket Administrator Data Pemesnanan Data Pengunjung Gambar Diagram Konteks

3 Data Flow Diagram Level 0 Wedding Organizer Data Flow Diagram level 0 adalah merupakan penjabaran dari diagram konteks.untuk lebih jelasnya dapat dilihat pada gambar 3.2 data flow diagram level 0 berikut ini. :

4 44 Username & Pasword D1 Tabel admin 1.0 Login Sistem 2.0 True / False Login Input Data Paket Data Paket D2 Tabel paket Administrator Administrator Page Data Jenis Data Paket Data Pemesanan 3.0 Input Jenis Paket Data Jenis D3 Tabel jenis paket Emai & Password Member True / False Login D4 Tabel member 5.0 Pemesanan Data Paket 4.0 Login Pengunjung Halaman Pengunjung Input & Password Data Paket Data Slider tblpesan D5 Data Galeri Tabel Pesan Pengunjung Data Galeri Data Testimonial Pengunjung 7.0 Slider D7 Tabel Slider Data Slider 6.0 Testimonial tbltestimonial D6 Tabel Testimonial 8.0 Galeri Galeri D8 Tabel Galeri Gambar Data Flow Diagram Level Data Flow Diagram Level 1 Wedding Organizer

5 45 Data Flow Diagram level 1 adalah merupakan dekomposisi dari diagram level zero.untuk lebih jelasnya dapat dilihat pada gambar data flow diagram level 1 berikut ini: 2.1 Administrator Data Paket Input Data Paket Data Paket D2 Tabel Paket Data Paket 2.2 Data Paket Daftar Paket Data Paket Pengunjung Gambar Data Flow Diagram Level 1

6 Entity Relationship Diagram(ERD) Berikut ini adalah gambaran dari Entity Relationship Diagram (ERD) dari perancangan Wedding Organizer Berbasis Web.Dimulai dari entitas Paket,entitas paket memiliki tiga atribut yaitu kode paket,paket dan jenis.paket menyajikan tabel member didalam tabel member memiliki enam atribut yaitu id_member, ,nama,jenis kelamin,alamat dan password.member memesan ke tabel pemesanan,didalam tabel pemesanan memiliki sembilan atribut yaitu kodepesan,id_pesan,tgl,id_member,kodeproduk,hrg,diskon,kodeorder,konfirmasi.tab el admin memiliki dua atribut yaitu user dan pass,tabel admin mengkonfirmasi ke tabel pesan.

7 47 Idmember Kode paket nama paket Paket 1 menyajikan n Member alamat jk jenis n pass Memesan kodepesan user Admin 1 n mengkonfirmasi n pemesanan Idpesan tgl pass Idmember kodeproduk hrg diskon Kode order konfirmasi Gambar Entity Relationship Diagram Wedding Organizer 3.4 Perancangan Database

8 48 Perancangan database adalah perancangan yang dilakukan untuk menentukan file database seperti field dan tipe data. Dalam hal merancang sebuah sistem yang berbasis database, perancangan database merupakan hal yang perlu mendapat perhatian khusus. Karena database berperan penting untuk memanipulasi data user dari aplikasi yang dibuat. Kesulitan utama dalam perancangan database adalah mengelompokkan field-field secara terstruktur ke dalam beberapa tabel sesuai dengan informasi yang terkandung di dalamnya. Berikut adalah rancangan tabel yang digunakan dalam membangun database : Tabel 3.3 Tabel Admin No Field Nama Data Tipe Size Keterangan 1 Username Varchar 50 Username 2 Pass Varchar 50 Password Tabel 3.4 Tabel Galeri No Field Nama Data Tipe Size Keterangan 1 Id Int 11 Id 2 Gbr Varchar 255 Gambar 3 Ket Text 30 Keterangan 4 Kodprdk varchar 50 Kode Produk

9 49 Tabel 3.5 Tabel Gambar No Field Nama Data Tipe Size Keterangan 1 Id Int 11 Id 2 Gbr varchar 255 Gambar Tabel 3.6 Tabel Member No Field Nama Data Tipe Size Keterangan 1 Idmember Int 10 Id member 2 Varchar Nama Varchar 255 Nama 4 Jk Varchar 255 Jenis kelamin 5 Almt Varchar 255 Alamat 6 Pwd Int 20 Password Tabel 3.7 Tabel Paket No Field Nama Data Tipe Size Keterangan 1 Kodepkt Varchar 50 Kode paket 2 Pkt Varchar 255 Paket 3 Jns varchar 255 Jenis

10 50 Tabel 3.8 Tabel Paket Jenis No Field Nama Data Tipe Size Keterangan 1 Idpktjns Int 11 Id paket jenis 2 Kodpkt Varchar 50 Kode paket 3 Kodprdk Varchar 50 Kode produk 4 Prdk Varchar 255 Produk 5 Hrg Double - Harga 6 Ket Text 255 Keterangan Tabel 3.9 Tabel Pengaturan No Field Nama Data Tipe Size Keterangan 1 Krtria Varchar 100 Kriteria 2 Nil Text - Nilai Tabel 3.10 Tabel Pesan No Field Nama Data Tipe Size Keterangan 1 Idpsn Int 11 Id pesan 2 Tgl Date - Tanggal 3 Idmembr Int 11 Id member 4 Kodpesn Int 11 Kode pesan

11 51 5 Kodprdk Varchar 50 Kode produk 6 Hrg Double 11 Harga 7 Dskn Int 1 Diskon 8 Kodorder Bigint 11 Kode order 9 Knfrmsi Int 1 Konfirmasi Tabel 3.11 Tabel Slider No Field Nama Data Tipe Size Keterangan 1 Idslider Int 11 Id slider 2 Gbr Varchar 255 Gambar 3 Ket Varchar 255 Keterangan Tabel 3.12 Tabel Testimonial No Field Nama Data Tipe Size Keterangan 1 Idtesti Int 11 Id testimonial 2 Idmember Int 11 Id member 3 Tgl Date - Tanggal 4 Pesn Text - Pesan 3.4 Flowchart Flowchart adalah sekumpulan simbol-simbol yang menunjukkan atau menggambarkan rangkaian kegiatan-kegiatan program dari awal hingga akhir,

12 52 flowchart juga digunakan untuk menggambarkan urutan langkah-langkah pekerjaan di suatu algoritma. Di dalam web ada beberapa flowchart, yaitu flowchart menu utama, flowchart administrator, dan lain-lain. Berikut ini merupakan penjelasan logika program Perancangan Wedding Organizer berbasis web berikut ini Flowchart Menu Utama Flowchart menu utama menjelaskan bagan dari halaman menu utama website. Di dalam tampilan halaman utama tersebut ada beberapa halaman yang telah disajikan oleh admin agar dapat dilihat oleh user tanpa harus melakukan proses login terlebih dahulu. Dimulai dari start masuk ke halaman pertama yaitu home. Jika user memilih halaman home maka yang akan muncul adalah menu dalam home yaitu paket,jenis paket,slider. Jika registrasi dibuka maka akan muncul menu dalam halaman registrasi.jika memilih Wedding Organizer maka akan keluar produk dan kode beserta keterangan yang lainnya dan begitu juga jika memilih Event organizer.jika memilih Testimonial makan akan muncul testimoni dari beberapa pelanggan.jika memilih Data Order maka akan mucul jumlah harga dan apa saja yang telah kita order lalu dilanjutkan ke menu pembayaran.jika memilih Galeri makan akan ditampilkan foto atau album tentang yang menyangkut dengan wedding dan event organizer.jika memilih halaman kontak kami maka akan muncul halaman kontak kami. Jika tidak maka akan keluar dari aplikasi tersebut dan selesai. Untuk lebih jelasnya dapat dilihat pada gambar flowchart menu utama berikut ini.

13 53 Mulai N Paket Y Form Paket A1 N Jenis Paket Y Form jenis Paket N Pemesanan Y Form Pemesaan N Slider Y Form Slider Form Geleri Form Member Form Pengaturan N Y Y Y Form Testimonial Y Galeri N Member N Pengaturan N Logout Testimonial N Selesai Y Gambar Flowchart Menu Utama Flowchart Menu Administrator Flowchart ini menjelaskan bagan dari halaman web administrator. Untuk masuk ke halaman ini admin maka akan muncul tampilan halaman admin. Selanjutnya home page halaman admin, maka akan muncul input link. Jika input link admin benar maka admin dapat menginput tambah admin.jika salah maka akan mucul pesan error dan selanjutnya jika benar maka akan dilanjutkan dan login selesai. Untuk lebih jelasnya dapat dilihat pada gambar flowchart menu administrator.

14 54 Mulai Masukkan Username dan Password Msg Login Error Login=True N Y Selesai Gambar Flowchart Menu Administrator Flowchart Tambah Paket Flowchart ini menjelaskan bagan dari halaman web tambah paket. Dimulai dari tambah jenis paket,kode paket,simpan data,rercord duplikat,pesan data duplikat.untuk menghapus paket dimulai dari tampilan halaman utama,hapus,selanjutnya hapus record,selanjutnya ke database tabel jenis paket.untuk mengedit muncul halaman utama edit selanjutnya tampil record,update record lalu kembali ke halaman utama.untuk lebih jelasnya dapat dilihat pada gambar flowchart menu Tambah Paket.

15 55 A1 N N Tambah Paket N Hapus N Edit Y Tampil Record Update Record Y Kode Paket Paket Jenis Paket Y Simpan Data Record Duplikat Y Msg Data Duplikat Y N Hapus Record tblpaket Update Record Gambar Flowchart Tambah Paket Flowchart Pemesanan Flowchart ini menjelaskan bagan dari halaman web pemesanan.dimulai dari untuk menyimpan data yaitu Pemesanan kode order simpan data,record duplikat,pesan data duplikat. Untuk menghapus atau mengedit daftar pemesanan dimulai dari pemesanan,hapur record,tabel pesan.update record.untuk mengedit dari pemesanan tampil record,update record dan selanjutnya kembali ke halaman utama.untuk lebih jelasnya dapat dilihat pada gambar flowchart menu Pemesanan.

16 56 A1 N N Pemesanan N Hapus N Edit Y Tampil Record Update Record Y Kode Order Y Simpan Data Record Duplikat Y Msg Data Duplikat Y N Hapus Record tblpesan Update Record Gambar Flowchart Pemesanan 3.5 Rancangan Desain Interface Aplikasi Merancang Interface (antar muka) aplikasi merupakan bagian yang menentukan apakah aplikasi yang dibuat benar-benar user friendly atau tidak. Sebab itu, maka penulis membuat desain interface aplikasi sesederhana mungkin. Berikut adalah sketsa interface aplikasi yang dibuat : Alur program ini menggambarkan bagaimana sistem pendaftaran online bekerja secara tahap demi tahap proses. Antarmuka dengan user yang digunakan adalah halaman web berupa form-form pada web browser. Alur Sistem Informasi ini dibuat agar tidak terjadinya salah jalur data yang akan diolah. Adapun perancangan aliran Program Perancangan

17 57 Aplikasi Wedding Organizer digambarkan pertahap berikut ini : 1. Pertama, user akan dihadapkan pada sebuah halaman web utama pendaftaran online. 2. Pada home terdapat wedding organizer,cara bayar,hubungi kami, event organizer,testimoni,galeri,registrasi dan menu login admin. 3. Pada Registrasi terdapat form formulir pendaftaran 4. Pada Wedding organizer terdapat paket dan jenis paket 5. Pada Galeri terdapat foto 6. Pada kontak terdapat form untuk hubungi kami Untuk lebih jelasnya dapat dilihat pada gambar struktur program Perancangan Aplikasi Wedding Organizer berbasis web berikut ini.

18 WEDDING ORGANIZER 58 Home Wedding organizer Event Organizer Testimonia Registrasi Galeri Login Contac Input Input Hubungi Kami Home login Admin Input paket Input jenis pemesanan Input slider Input galeri testimonial Data Pengaturan Input File Gambar Struktur Program Perancangan Wedding Organizer 1. Tampilan Menu Beranda Pada form ini user membuka web sekolah maka tampilan utama sebagai berikut. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu beranda berikut ini.

19 59 Gambar Tampilan Menu Beranda 2. Tampilan Wedding Organizer Di dalam menu profil ada jenis paket dan harga paket. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu profil berikut ini.

20 60 Gambar Tampilan Wedding Organizer 3. Tampilan Event Organizer Di dalam Event Organizer ada paket event nya. Untuk lebih jelasnya dapat dilihat pada gambar Tampilan menu pendaftaran berikut ini.

21 61 Gambar Event Organizer 4.Tampilan Testimonial Didalam Menu Tetsimonial terdapat keterangan komentar dari user yang telah melakukan order. Untuk lebih jelasnya dapat dilihat pada gambar berikut ini.

22 62 Gambar Tampilan Testimonial 4. Tampilan Registrasi Pada menu Registrasi, berisi user yang ingin mendaftar melakukan registrasi dahulu lalu login. Untuk lebih jelasnya dapat dilihat pada gambar berikut ini.

23 63 Gambar Tampilan Registrasi 5. Tampilan Menu Galeri Pada menu Galeri berisi foto foto yang telah dimuat.hal ini melibatkan user lebih nyaman memilih apa saja yang dibutuhkan. Untuk lebih jelasnya dapat dilihat pada gambar tampilan Galeri berikut ini.

24 64 Gambar Tampilan Menu Galeri 6. Tampilan Menu Login Pada menu login terdapat username dan password yang akan membantu user untuk masuk ke web dan mulai mengorder. Untuk lebih jelasnya dapat dilihat pada gambar tampilan Login berikut ini.

25 65 Gambar Tampilan Menu Login 6.Tampilan Menu Cara Bayar Pada Menu Cara Bayar ini terdapat cara cara untuk melakukan pembayarn.setelah selesai pembelian produk,maka konfirmasi pembayaran sesuai dengan jumlah pembelian.. Untuk lebih jelasnya dapat dilihat pada gambar tampilan Cara Bayar berikut ini.

26 66 Gambar Tampilan Menu Cara Bayar 7. Tampilan Menu Hubungi Kami Pada menu Hubungi kami terdapat beberapa kontak person ataupun sosial media yang telah dicantumkan.berguna untuk para user yang ingin kepastian dan kejelasan dalam wedding organizer ini. Untuk lebih jelasnya dapat dilihat pada gambar tampilan Galeri berikut ini.

27 67 Gambar Tampilan Menu Hubungi Kami

28 68 BAB 4 IMPLEMENTASI SISTEM 5.1 Definisi Implementasi Sistem Implementasi sistem adalah suatu prosedur yang dilakukan untuk menyelesaikan sistem yang ada dalam dokumen rancangan sistem yang telah disetujui dan telah diuji, menginstal dan menggunakan sistem baru yang telah diperbaiki. Adapun langkah-langkah yang dibutuhkan dalam implementasi sistem adalah: 1. Mendapatkan software dan hardware yang tepat serta sesuai untuk merancang website. 2. Menyelesaikan rancangan sistem. 3. Menulis, menguji, mengontrol, dan mendokumentasikan website. 4. Mendapatkan persetujuan. 5.2 Tujuan Implementasi Sistem Adapun tujuan implementasi sistem adalah sebagai berikut: 1. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana pengolahan data dan penyajian informasi. 2. Menyelesaikan rancangan sistem yang ada didalam dokumen sistem yang baru atau yang telah disetujui.

29 69 3. Memastikan pengujung dapat mengoprasikan dengan mudah terhadap sistem yang baru dan mendapat informasi yang baik dan jelas. 4. Memastikan bahwa yang telah berjalan dengan lancer dan melakukan instalasi secara benar. 5.3 Komponen Sistem Komponen-komponen system yang dibutuhkan dalam membangun aplikasi ini diantaranya adalah: a. Hardware Hardware adalah suatu komponen yang sangat dibutuhkan dalam mewujudkan sistem yang diusulkan. Dalam hal ini penulis merinci spesifikasi komponen hardware yaitu: 1. Sistem Operasi menggunakan windows 7 2. PC dengan processor intel inside 3. RAM dengan kapasitas 2.00 GB. 4. Flash disk 16 GB 5. Monitor super VGA. 6. Memory minimal 128MB. 7. Keyboard. 8. Mouse. b. Software

30 70 Hardware tidak akan pernah memecahkan suatu masalah tanpa adanya komponen software. Adapun software yang digunakan dalam pembuatan website ini adalah : 1. Sistem Opersai Ms. Windows. 2. Internet explorer, Mozila firefox, Google Chrome sebagai browser. 3. Xampp versi Apache PHP versi MySQL c. Brainware Brainware adalah semua pihak yang bertanggung jawab dalam pengembangan sistem informasi, pemrosesan, dan penggunaan keluaran sistem informasi. Brainware dalam sistem informasi terbagi 3 yaitu: 1. Sistem Analis : orang yang menganalisa sistem dengan mempelajari masalahmasalah yang timbul dan menentukan kebutuhan pemakai dan mengidentifikasi pemecahan yang beralasan. 2. Programmer : orang yang membuat system dengan menggunakan salah satu bahasa pemrograman yang dikuasai. 3. Operator : orang yang memakai sistem. Ketika telah selesai mengerjakan tahap perancangan sistem, baik dalam merancang tabel-tabel didalam database dengan menggunakan php Myadmin maupun dalam merancang halaman-halaman website. Kini program tersebut dapat

31 71 dijalankan.adapun prosedur penggunaan system secara manual dapat diuraikan sebagai berikut: 1. Aktifkan software Apache, PHP, dan MySQL yang telah diinstal pada computer dengan cara mengklik start. 2. Kemudian buka salah satu aplikasi web browser yang ada pada komputer anda seperti Mozila firefox. 3. Lalu ketikan pada alamat website sesuai dengan nama folder dimana disimpan, contoh : dalam address bar untuk menu utama, kemudaian tekan enter. 4. Setelah halaman menu utama terbuka, ada terdapat beberapa pilihan halaman link yang disajikan untuk user. Pilih salah satu link tersebut. 5. Link Registrasi berisikan suatu form yang harus diisi oleh user pada waktu mendaftar. 5.4 Tampilan Menu Utama Pada form ini user harus mengisi form pendaftaran/registrasi agar bisa login. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu beranda Registrasi berikut ini.

32 72 Gambar Tampilan Menu Beranda Registrasi Di dalam menu login ada username dan password yamg akan digunakan untuk login. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu login berikut ini.

33 73 Gambar Tampilan Menu Login Di dalam menu testimonial dapat digunakan untuk komentar ataupun pendapat tentang wedding organizer yang sudah mengorder. Untuk lebih jelasnya dapat dilihat pada gambar Tampilan menu testimonial berikut ini.

34 74 Gambar Tampilan Menu Testimonial Didalam Wedding Organizer terdapat produk yang disajikan lengkap dengan harga dan keterangan. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu wedding organizer berikut ini.

35 75 Gambar Tampilan Menu Wedding Organizer Didalam Event Organizer terdapat produk yang disajikan lengkap dengan harga dan keterangan dalam event. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu event organizer berikut ini.

36 76 Gambar Tampilan Menu Event Organizer Didalam Galeri terdapat berbagai jenis foto yang berkaitan dengan wedding organizer dan event organizer. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu event organizer berikut ini.

37 77 Gambar Tampilan Menu Galeri Didalam Menu Cara Bayar terdapat bagaimana cara melakukan pembayaran dan disertakan nomor rekening serta dan format yang berkaitan dengan cara pembayaran. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu Cara Bayar berikut ini.

38 78 Gambar Tampilan Menu Cara Bayar Didalam Menu Hubungi Kontak ini terdapat kontak person no.hp, dan lokasi.contact person ini dapat memberikan kepercayaan yang lebih kepada para pelanggan ataupun user dalam hal pemesanan. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu Hubungi Kontak berikut ini.

39 79 Gambar Tampilan Menu Hubungi Kontak

40 80 BAB 5 KESIMPULAN DAN SARAN 6.1 Kesimpulan Dari hasil pembahasan tentang perancangan aplikasi wedding organizer berbasis web, maka dapat mengambil beberapa kesimpulan diantaranya adalah sebagai berikut : 1. Dengan adanya aplikasi Wedding Organizer ini, mempermudah user dalam hal pemesanan dan mengefisienkan waktu. 2. Dengan adanya aplikasi Wedding Organizer ini, maka dapat menghemat biaya user dalam hal mencari wedding organizer. 3. Fleksibel dengan Budget,Hal ini berkaitan erat dengan kreativitas sebuah Wedding Organizer dalam meramu sebuah konsep. 4. Pembuatan program dengan menggunakan PHP & MYSQL lebih mudah dalam hal perancangan maupun untuk hasil akhirnya (output). 6.2 Saran Dari hasil pembahasan tentang perancangan Aplikasi Wedding Organizer Berbasis Web ini, maka ada beberapa saran yaitu sebagai berikut : 1. Sebaiknya dilakukan perawatan dan pengembangan aplikasi oleh pihak tertentu untuk lebih mengoptimalkan sitem yang telah dirancang. 2. Diharapkan program ini bermanfaat bagi para pembaca.