BAB 3 PERANCANGAN SISTEM 3.1. Perancangan Sistem Menurut Jogiyanto (2005) Analisis sistem dapat didefinisikan sebagai penguraian dari suatu informasi yang utuh kedalam bagian-bagian komponen dengan maksud untuk mengidentifikasi dan mengevaluasi permasalah-permasalahan, kesempatankesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. 3.2. Tujuan Perancangan Sistem Tujuan utama dari perancangan sistem adalah memberikan gambaran perancangan sistem yang akan dibangun atau dikembangkan, serta untuk memahami alur informasi dan proses dalam sistem. Perancangan sistem yang akan dibangun atau dikembangkan adalah perancangan aplikasi portal komunitas yang berbasis web. Berikut telah ditentukan tahapan-tahapan atau langkah-langkah yang akan dilakukan dalam perancangan sistem: a. Rancangan Proses b. Rancangan Basis Data (Database) 23
c. Rancangan Antar Muka (User Interface) 3.2.1 Rancangan Proses Perancangan proses pada pembangunan atau pengembangan sistem ini meliputi diagram konteks, data flow diagram (dfd) dan flowchart. 1. Diagram Konteks Diagram konteks adalah diagram yang terdiri dari suatu proses dan mengembangkan ruang lingkup suatu sistem. Diagram konteks ini merupakan level tertinggi dari suatu DFD yang menggambarkan seluruh input ke sistem atau output dari sistem. Diagram akan memberi gambaran tentang ke seluruh sistem. Sistem dibatasi oleh boundary (dapat digambarkan dengan garis putus). Dalam diagram konteks hanya ada satu proses. Tidak boleh ada store dalam diagram konteks. Diagram konteks merupakan gambaran umum sistem yang nantinya akan kita buat. Secara uraian dapat dikatakan bahwa diagram konteks itu berisi siapa saja yang memberikan data (inputan) ke sistem, serta kepada siapa data informasi itu diberikan (melalui sistem). Jadi, dalam diagram ini yang dibutuhkan adalah : 1. Siapa saja pihak yang akan memberikan data ke sistem. 2. Data apa saja yang diberikannya ke sistem. 3. Kepada siapa sistem harus memberikan informasi atau laporan. 4. Apa saja isi atau jenis laporan yang harus diberikan sistem. 24
Untuk sistem yang akan kita buat, berikut model diagram konteks yang bisa kita hasilkan : Gambar 3.1. Diagram Konteks 2. Data Flow Diagram (DFD) Data Flow Diagram adalah alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran analisa maupun perancangan sistem yang mudah dikomunikasikan ke pengguna ataupun ke pembuat program. Berikut adalah data flow diagram yang digunakan dalam perancangan sistem pada pembangunan portal komunitas pecinta tanaman hias ini. 25
Gambar 3.2. Data Flow Diagram Level 0 Gambar 3.3. Data Flow Diagram Level 1 26
Gambar 3.4. Data Flow Diagram Level 2 3. Flowchart Flowchart (diagram alir) adalah sebuah diagram yang merepresentasikan sebuah algoritma atau proses menggunakan beberapa bangun geometri untuk memperlihatkan langkah-langkah yang dilakukan oleh program dalam menyelesaiklan masalah. Berikut merupakan flowchart pada perancangan sistem portal komunitas pecinta tanaman hias berbasis web. 27
Gambar 3.5. Flowchart Halaman Utama 3.2.2 Rancangan Basis Data (Database) Menurut Abdul Kadir dalam bukunya yang berjudul Belajar Database Menggunakan MYSQL basis data (database) adalah suatu penyusunan data yang terstruktur yang disimpan dalam media pengingat (hard disk) yang tujuannya 28
adalah agar data tersebut dapat diakses dengan mudah dan cepat. Database merupakan suatu komponen yang penting dalam suatu sistem, karena database mampu memanipulasi dan menyediakan informasi bagi para pengguna. Perancangan database pada sistem meliputi pembuatan tabel-tabel database yang dapat dilihat pada tabel berikut: Tabel 3.1. Tabel Akses Nama Istilah Tipe Data Ukuran Keterangan IDAkses Int 2 Id Akses KodeGrup Char 10 Kode Grup KodeModul Char 10 Kode Modul Tabel 3.2. Tabel Artikel Nama Istilah Tipe Data Ukuran Keterangan ArtikelID bigint 20 Id Artikel Tanggal Date - Tanggal Artikel Judul varchar 50 Judul Artikel Foto_name Varchar 100 Foto Artikel Artikel Text - Deskripsi Artikel 29
Tabel 3.3. Tabel Grup Nama Istilah Tipe Data Ukuran Keterangan NamaGrup Char 10 Nama Grup KodeGrup Varchar 50 Kode Grup Tabel 3.4. Tabel Grup Module Nama Istilah Tipe Data Ukuran Keterangan NamaGrupModul Char 10 Nama Grup Modul KodeGrupModul Varchar 50 Kode Grup Modul NA Int 1 Notifikasi Aktif Tabel 3.5. Tabel Produk Nama Istilah Tipe Data Ukuran Keterangan ProdukID Int 3 Id Produk Tanggal Date - Tanggal Produk NamaProduk Varchar 255 Nama produk Keterangan Text Keterangan Produk Gambar Varchar 255 Gambar Produk UserName Varchar 255 Username Anggota 30
Tabel 3.6. Tabel Registrasi Nama Istilah Tipe Data Ukuran Keterangan NoRegistrasi Char 10 Nomor Registrasi TglRegistrasi Date - Tanggal Registrasi NoKTP Varchar 50 Nomor KTP NamaLengkap Varchar 50 Nama Lengkap Alamat Varchar 50 Alamat Telepon Varchar 25 Nomor Telepon UserName Varchar 30 Username Anggota Password Varchar 30 Password Anggota Status Enum Y, N Status Anggota Foto Varchar 255 Foto Anggota Tabel 3.7. Tabel Tamu Nama Istilah Tipe Data Ukuran Keterangan IDTamu Int 2 Id Tamu Tanggal Date - Tanggal NamaTamu varchar 50 Nama Tamu Email Varchar 50 Email Komentar Text - Komentar Tamu Status Enum Y, N Status Tamu 31
Tabel 3.8. Tabel User Nama Istilah Tipe Data Ukuran Keterangan UserName Varchar 50 Username User Password Varchar 50 Password User KodeGrup Char 10 Kode Grup User 3.2.3 Rancangan Antar Muka (User Interface) Antarmuka (Interface) merupakan bagian dari sistem aplikasi yang digunakan sebagai alat komunikasi antara sistem dan user. Perancangan antarmuka ini terdiri dari : 1. Desain Output Desain output (keluaran) adalah keluaran-keluaran dari aplikasi. Keluaran tersebut meliputi tampilan-tampilan layar. Berikut tampilan desain output : Gambar 3.6. Desain Output 32
2. Desain Input esain input (masukan) bertujuan untuk menentukan data-data masukan, yang digunakan untuk mengoperasikan system maupun aplikasi. Data-data keluaran dapat berupa formulir-formulir atau yang lainnya. Data-data masukan ini merupakan hasil data yang akan dioperasikan oleh sistem atau aplikasi. Berikut gambr desain input : Portal Komunitas Pecinta Tanaman Hias Gambar Gambar Gambar Gambar Beranda Registrasi Galeri Artikel Hubungi Kami Login Username: Password: Registrasi online Bukti registrasi No registrasi REG-7 Tanggal registrasi 16-6-2016 Galeri Pohon Daun Batang Daftar Anggota Daftar Nama Anggota No.KTP Nama Lengkap Alamat No.KTP Tel/Hp Biodata Artikel Konten List Komentar Username Password Akses Data Kirim data Ini Portal Komunitas Pecinta Tanaman Hias Gambar 3.7. Desain Input Form Registrasi 33
Gambar 3.8. Desain Input Data Produk oleh Admin 3. Desain Dialog Definisi umum dialog adalah percakapan antara dua kelompok atau lebih, sedangkan dialog dalam konteks perencanaan user interface adalah struktur dari percakapan antara user dan komputer. Dimana dari tahap perencanaan ini kita menentukan interaksi-interaksi yang terjadi antara user interface dengan komputer. Berikut gambar-gambar dari desain dialog : a. Halaman Beranda Pada Beranda user bisa melihat ada beberapa gambaran dari isi dari beranda tersebut. Seperti sejarah dari tanaman bonsai yang banyak orang kurang mengetahuinya. Kemudian di sebelah kanan dan kirinya ada banner yang bisa diklik dan akan keluar informasi yang sudah disediakan 34
Gambar 3.9. Halaman Beranda b. Halaman Galeri Galeri merupakan penyimpanan gambar yang terbanyak di dalam Perancangan ini. Jika user tertarik untuk ingin lebih mengetahui isi dari gambar itu si user bisa mngklik detail untuk melanjutkan membaca. 35
Gambar 3.10. Halaman Galeri 36
BAB 4 IMPLEMENTASI SISTEM 4.1. Pengertian Implementasi Sistem Impelentasi adalah suatu tindakan atau pelaksanaan dari sebuah rencana yang sudah disusun secara matang dan terperinci. Implementasi biasanya dilakukan setelah perencanaaan sudah dianggap selesai. Implementasi dalam Kamus Besar Bahasa Indonesia diartikan sebagai pelaksanaan atau penerapan. Artinya yang dilaksanakan dan diterapkan adalah kurikulum yang telah dirancang/didesain untuk kemudian dijalankan sepenuhnya. 4.2. Komponen Utama Aplikasi Dalam pembuatan Portal Komunitas Pecinta tanaman hias yang telah dirancang membutuhkan komponen-komponen pendukung sebagai berikut : a. Perangkat Keras (Hardware) Hardware merupakan peralatan fisik dari sebuah komputer. Umumnya terdiri dari tiga jenis perangkat yaitu; perangkat masukan (input device), perangkat keluaran (output device), serta pengolahan (processor). 37
b. Perangkat Lunak (Software) Software merupakan program yang berisi perintah-perintah untuk melakukan pengolahan data. c. Pengguna (Brainware) Brainware merupakan user (manusia) yang terlibat langsung di dalam pengoperasian komputer dan yang akan melaksanakan semua kegiatankegiatan yang berhubungan dengan hardware dan software. User (manusia) yang terlibat langsung dalam sistem komputer dikategorikan dalam berbagai tingkatan, yaitu: 1. Operator Operator adalah user (manusia) yang bekerja mengoperasikan komputer untuk memasukkan data atau menjalankan program yang sudah ada. 2. Programmer Programmer adalah user (manusia) yang bertugas membuat program atau software berdasarkan ketentuan yang sudah ada, meliputi; a. Menganalisis dan membuat program. b. Membuat flowchart atau algoritma. c. Memeriksa dan memperbaiki kesalahan program. 38
3. Sistem Analis Sistem analis adalah user (manusia) yang bertugas mempelajari, menganalisis serta merancang sistem program untuk menyelesaikan suatu masalah. 4.3. Tujuan Implementasi Tujuan implementasi aplikasi adalah: a. Menyelesaikan desain aplikasi yang telah dirancang dan diajukan. b. Menguji aplikasi yang telah di buat. c. Untuk mengetahui bahwa aplikasi dapat dijalankan oleh user (pemakai). d. Untuk memastikan aplikasi dapat berjalan dengan baik e. Memastikan apakah aplikasi yang di buat dapat melakukan proses pengolahan data dengan benar. 4.4. Pengujian Aplikasi Setelah selesai menyelesikan semua halaman dari aplikasi yang dirancang, maka aplikasi tersebut harus di uji terlebih dahulu sebelum di pergunakan untuk mengetahui bagian-bagian manakah pada aplikasi yang belum berhasil. Karena apabila ada kesalahan dalam membangun sebuah program di dalam aplikasi yang telah dirancang, itu akan bisa mengakibatkan tidak berhasilnya suatu aplikasi yang telah di buat. Maka, tahap pengujian ini sangat penting dilakukan untuk menghindari kesalahan-kesalahan yang masih kurang maksimal di dalam aplikasi. 39
4.4.1. Beranda (Homepage) Tampilan beranda (Homepage) di atas merupakan tampilan awal dari aplikasi yang telah di buat. Desain dan tampilan bisa berubah sesuai keinginan yang ingin kita atur semenarik mungkin. Tampilan awal ini berisi tentang pilihan-pilihan yang penulis anggap penting diterapkan, karna dari beranda ini jugalah kita akan masuk ke tahap-tahap berikutnya. Gambar 4.1. Tampilan Beranda (Homepage) 4.4.2. Registrasi Setelah tampilan beranda, kita bisa melangkah ke Registrasi dengan mengklik button registrasi yang sudah koneksikan. Halaman atau menu registrasi berisikan form yang harus diisi oleh calon member. Berikut tampilan registrasi pada aplikasi: 40
Gambar 4.2. Tampilan Registrasi Online 4.4.3. Galeri Menu Galeri merupakan menu yang berisikan semua gambar produk yang ada didalam Portal. Yang berisikan apa bila member ingin melihat-lihat gambar serta informasi dari gambar tersebut. Gambar 4.3. Tampilan Galeri 41
4.4.4. Artikel Menu artikel merupakan menu yang memuat tentang ide-ide baru dari setiap member yang bergabung dan yang bersedia untuk membagikan ide-ide barunya. Gambar 4.4. Tampilan Artikel Tanaman Hias 4.4.5. Hubungi Kami Adalah menu yang berisikan form komentar yang boleh diiisi oleh user maupun member bila ingi mengomentari postingan yang ada di web ini. Gambar 4.5. Tampilan Hubungi Kami 42
4.4.6 Login Area Sebelum menuju menjadi anggota dari portal komunitas ini yang paling pertama dilakukan adalah menuju Login Area. Dimana ditujukan untuk mendaftar menjadi anggota. Lalu, diperbolehkan untuk mengisi data. Gambar 4.6. Tampilan Form Login 4.4.7 Admin Admin bertujuan untuk menjadi pengawas dan juga yang bertugas untuk mengupdate, mengedit, dan menghapus dari informasi yang dibuat oleh member atau yang di buat oleh admin sendiri. Gambar 4.7. Tampilan Utama Halaman Admin 43
4.4.8 Persetujuan Anggota Sebelum menjadi anggota admin bertindak sebagai pihak yang memiliki hak khusus untuk menerima atau menolak member. Gambar 4.8. Tampilan Persetujuan Anggota 44
BAB 5 PENUTUP 5.1. Kesimpulan Selama penulis merancang Portal Komunitas Pecinta tanaman hias banyak sekali manfaat yang diperoleh. Diantara nya yaitu penulis dapat menerapkan ilmu pengetahuan yang sudah dipelajari pada masa kuliah sehingga penulis dapat mengembangkan website Portal Komunitas ini. Dari pengalaman yang penulis peroleh, maka penulis dapat menyimpulkan bahwa: 1. Dengan beroperasinya Portal Komunitas Pecinta Tanaman dapat memperlancar proses pertukaran informasi antara anggota yang satu dengan anggota yang lain. 2. Portal Komunitas Pecinta Tanaman Hias jadi memiliki tampilan yang lebih sederhana dan rapi dibandingkan dengan pembuatan pertama web ini. 3. Portal Komunitas ini dibuat dengan menggunakan pemrograman Php dan menggunakan penyimpanan data Mysql. Dengan adanya Portal Komunitas Pecinta Tanaman Hias ini, para user maupun member menjadi lebih mudah dalam mendapatkan informasi terbaru tentang dunia tanaman hias. 45
5.2. Saran Adapun saran dari penulis adalah sebagai berikut : 1. Melihat perkembangan sistem komputerisasi pada era globalisasi saat ini, maka pertukaran informasi yang cepat dan akurat sangat diperlukan. Oleh karena itu, diharapkan baik anggota maupun member dan admin bisa untuk terus mengupdate informasi yang ada di dalamnya. 2. Sistem yang baru hendaknya dilakukan pengoperasian dan perawatan secara optimal. 3. Jika ada kemungkinan untuk di kembangkan kembali sebaiknya dibuat menjadi website responsif. 46