BAB III ANALISIS DAN PERANCANGAN SISTEM

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN SISTEM 3.1 Analisis Masalah Perkembangan aplikasi berbasis web mendorong kemajuan di bidang pembuatan aplikasi telepon seluler. Namun kita dapat lebih mudah melakukan pembuatan aplikasi Android mengunakan Phonegap yang sudah mendukung berbagai multi platform OS (sistem operasi) pada telepon pintar. Salah satu aspek terpenting dalam meningkatkan tumbuh kembang anak adalah aspek pendidikan. Kualitas pendidikan anak yang baik akan berpengaruh juga pada kualitas tumbuh kembang anak tersebut nantinya. Kualitas pendidikan juga ditunjang beberapa faktor, salah satunya adalah sekolah. Umumnya, masyarakat akan mencari sekolah yang baik dan letaknya dekat dengan lingkungan tempat tinggal. Agar masyarakat mudah mendapatkan informasi tentang sekolah yang diinginkan maka, pada penulisan ini dibuat aplikasi pencarian sekolah menggunakan mobile phone berbasis Android. Aplikasi ini dibuat untuk memudahkan masyarakat mengetahui lokasi sekolah terdekat dengan lokasi pengguna. Aplikasi ini, dibuat dengan menggunakan Phonegap dan Eclipse serta bahasa pemograman Html dengan sistem operasi (OS) Android. Alasan penulis membuat aplikasi mobile karena mobile phone merupakan alat komunikasi yang sudah banyak dimiliki masyarakat indonesia, sehingga aplikasi ini mudah dikembangkan, dipublikasi dan diakses. Aplikasi ini pun dibuat berdasarkan acuan dari sebuah situs Tingali.com. situs tingali.com adalah sebuah situs pencarian sekolah di indonesia. Namun, dalam pembuatan aplikasi ini penulis hanya mengambil daerah JABODETABEK saja. 60

2 Elemen Elemen Yang Dibutuhkan Pada Aplikasi Pencarian Sekolah Sebelum melakukan pembangunan dan pengembangan sebuah Aplikasi Pencarian Sekolah yang digunakan pada sistem operasi RIM BlackBerry dan Android, didalamnya terdapat beberapa elemen elemen yang mendukung berjalannya Aplikasi Pencarian Sekolah ini. Berikut ini adalah gambaran atau susunan elemen elemen tersebut. 1. Lapisan Library Api 2. Lapisan Java SDK 3. Lapisan PhoneGap a. HTML b. CSS c. JavaScript 4. Lapisan Ajax 5. Android Ice Cream Sandwich (versi 4.0.3) 6. Aplikasi Pencarian Sekolah 3.2 PERANCANGAN APLIKASI Dari hasil analisa, penulis membuat aplikasi mobile dengan fitur yang lebih interaktif dengan mengunakan bahasa pemrograman Html, Java script dan Teknologi Ajax serta menggunakan basis data MySQL. Penulis akan membuat permodelan diagram Use Case untuk menunjukan fungsional suatu sistem dan permodelan diagram Activity untuk mengurutkan aktivitas dalam suatu proses serta permodelan diagram Sequence untuk menggambarkan interaksi antar objek di dalam dan di sekitar sistem. Permodelan ini dibuat agar aplikasi ini dapat dipahami dengan mudah.

3 USE CASE DIAGRAM Use Case adalah layanan atau fungsi fungsi yang disediakan oleh sistem untuk pengguna penggunanya (Henderi et al, 2008), dengan kata lain Use Case adalah suatu pola atau gambaran yang menunjukan kelakuan atau kebiasaan sistem atas kebutuhan pengguna. Gambar 3.1 Diagram Use Case Penjelasan diagram use case aplikasi pencarian sekolah dapat dilihat sebagai berikut :

4 63 Tabel 3.1 Pengguna Masuk Aplikasi Nama use case : Aplikasi Aktor : Pengguna Deskripsi : Pada aplikasi pencarian sekolah, pengguna dapat langsung melihat daftar nama-nama sekolah di dalam aplikasi setelah mengklik tombol JABODETABEK. Tabel 3.2 Pengguna Melihat Nama Sekolah TK Nama use case : Melihat Halaman TK Aktor Pengguna : Deskripsi : Pada aplikasi pencarian sekolah, pengguna dapat langsung melihat daftar nama-nama sekolah di dalam halaman TK. Ketika pengguna ingin mengetahui detail sekolah, pengguna dapat mengklik nama dari sekolah tersebut. Lalu akan keluar penjelasan mengenai sekolah yang bersangkutan. Tabel 3.3 Pengguna Melihat Nama Sekolah SD Nama use case : Melihat Halaman SD Aktor Pengguna : Deskripsi : Pada aplikasi pencarian sekolah, pengguna dapat langsung melihat daftar nama-nama sekolah di dalam halaman SD. Ketika pengguna ingin mengetahui detail sekolah, pengguna dapat mengklik nama dari sekolah tersebut. Lalu akan keluar penjelasan mengenai sekolah yang bersangkutan.

5 64 Tabel 3.4 Pengguna Melihat Nama Sekolah SMP Nama use case : Melihat Halaman SMP Aktor Pengguna : Deskripsi : Pada aplikasi pencarian sekolah, pengguna dapat langsung melihat daftar nama-nama sekolah di dalam halaman SMP. Ketika pengguna ingin mengetahui detail sekolah, pengguna dapat mengklik nama dari sekolah tersebut. Lalu akan keluar penjelasan mengenai sekolah yang bersangkutan. Tabel 3.5 Pengguna Melihat Nama Sekolah SMA Nama use case : Melihat Halaman SMA Aktor Pengguna : Deskripsi : Pada aplikasi pencarian sekolah, pengguna dapat langsung melihat daftar nama-nama sekolah di dalam halaman SMA. Ketika pengguna ingin mengetahui detail sekolah, pengguna dapat mengklik nama dari sekolah tersebut. Lalu akan keluar penjelasan mengenai sekolah yang bersangkutan. Tabel 3.6 Pengguna Melihat Nama Sekolah SMK Nama use case : Melihat Halaman SMK Aktor : Pengguna Deskripsi : Pada aplikasi pencarian sekolah, pengguna dapat langsung melihat daftar nama-nama sekolah di dalam halaman SMK. Ketika pengguna ingin mengetahui detail sekolah, pengguna dapat mengklik nama dari sekolah tersebut. Lalu akan keluar penjelasan mengenai sekolah yang bersangkutan.

6 65 Tabel 3.7 Pengguna Melihat Nama Perguruan Tinggi Nama use case : Melihat Halaman PERGURUAN TINGGI Aktor Pengguna : Deskripsi : Pada aplikasi pencarian sekolah, pengguna dapat langsung melihat daftar nama-nama di dalam halaman Perguruan Tinggi. Ketika pengguna ingin mengetahui detail sekolah, pengguna dapat mengklik nama dari sekolah tersebut. Lalu akan keluar penjelasan mengenai sekolah yang bersangkutan ACTIVITY DIAGRAM Diagram Aktifitas adalah diagram yang menggambarkan sebuah skema aktifitas yang terjadi pada pengujian aplikasi tersebut ACTIVITY DIAGRAM Halaman Pemilihan Sekolah Pada Diagram Aktifitas pemilihan sekolah ini pengguna dapat langsung menggunakan aplikasi tersebut. Dengan kata lain, pengguna dapat langsung melihat dan memilih tingkat pendidikan juga nama-nama sekolah berdasarkan alamat terdekat pengguna.

7 66 Gambar 3.2 Activity Diagram Pemilihan Sekolah Gambar 3.2 menjelaskan aktifitas yang dilakukan ketika seorang pengguna pada halaman aplikasi. Aktifitas yang dilakukan adalah apakah pengguna akan memilih tingkat pendidikan yang diinginkan. Setelah memilih tingkat pendidikan, pengguna dapat melihat dan memilih sekolah menurut alamat dan nomor telepon yang sudah tersedia. Jika pengguna ingin menampilkan detail sekolah yang sudah di pilih, hanya dengan mengklik nama sekolah tersebut. Aplikasi akan menampilkan detai sekolah yang diinginkan SEQUENCE DIAGRAM Diagram Sequence adalah diagram yang menggambarkan interaksi antara pengguna dan sistem. Dari use case yang sudah dijelaskan diatas maka penulis

8 67 dapat pula menggambarkan diagram sequence yang sesuai melalui seperti berikut ini Diagram Sequence Halaman User Gambar 3.3 Diagram Sequence Halaman Pengguna Diagram urutan ini menggambarkan skenario yang dilakukan antara pengguna dan sistem pada saat pengguna berada pada halaman utama aplikasi. pengguna yang telah masuk ke halaman aplikasi dapat melihat dan memilih list tingkat pendidikan. Setelah memilih, pengguna dapat melihat nama-nama sekolah, dan juga melihat detail sekolah. 3.3 Perancangan Basis Data Tujuan dari perancangan basis data ini adalah untuk memenuhi informasi yang berisikan kebutuhan kebutuhan pengguna secara khusus dan aplikasi aplikasinya, memudahkan pengertian struktur informasi dan mendukung kebutuhan kebutuhan pemrosesan serta beberapa obyek penampilan (response time, processing time, dan storage space).

9 Entity Relationship Diagram (ERD) Entity relationship diagram merupakan sebuah alat untuk merancang dan menganalisis database yang khusus dibuat untuk menerapkan teknik entityrelationship model untuk proses perancangan basis data ERD menggambarkan hubungan antara entitas yang terdapat dalam sistem, sehingga ERD diperlukan untuk menentukan perancangan basis data yang efektif. Perancangan ERD dari Aplikasi pencarian sekolah ini dapat dilihat pada gambar 3.4 berikut ini : Gambar 3.4 menggambarkan ERD sistem yang akan dibangun. dari hasil rancangan ERD ini dapat diketahui entitas entitas yang terlibat dalam sistem. untuk mengetahui lebih dalam mengenai atribut pada entitas entitas dan relasinya dapat dilihat pada gambar 3.5 berikut ini : Gambar 3.5 Atribut dan relasi himpunan entitas basis data pada Aplikasi Pencarian Sekolah.

10 Struktur Tabel Berikut merupakan struktur tabel yang digunakan di dalam aplikasi ini : 1. Tabel Content Tabel ini digunakan untuk menyimpan data content yang terdiri dari Content_id, Content_nama, Content_alamat, Content_telepon, Content_fax, Content_website, Content_ . Nama tabel Primary key : content : content_id Tabel 3.8 Tabel Content Nama Field Panjang Tipe Data Content_id 11 Integer Content_nama 255 Varchar2 Content_alamat - Text Content_telepon 100 Varchar2 Content_fax 100 Varchar2 Content_website 250 Varchar2 Content_ 200 Varchar2 2. Tabel Ref_kategori Tabel ini digunakan untuk menyimpan data Ref_kategori yang terdiri dari Kat_id, Kat_nama, Kat_image_path. Nama Tabel Primary key : Ref_kategori : Kat_id

11 70 Tabel 3.9 Tabel Ref_kategori Nama Field Panjang Tipe Data Kat_id 11 Integer Kat_nama 255 Varchar2 Kat_image_path 200 Varchar2 3.4 Perancangan Antar Muka (User Interface) Rancangan layar dari aplikasi ini dibuat untuk menampilakan informasi dan memudahkan dalam pencarian, juga untuk melakukan perubahan-perubahan yang diperlukan. Ada satu rancangan layar pada aplikasi ini yaitu layar pengguna. Adapun rancangan antar muka adalah sebagai berikut Perancangan Antar muka halaman Pengguna Rancangan ini merupakan halaman utama aplikasi. Di halaman ini terdapat tombol yang terhubung pada halaman list jenjang pendidikan. Aplikasi Pencarian Sekolah JABODETABEK Gambar 3.6 Rancangan Halaman Utama Aplikasi

12 Perancangan Antar muka halaman Kategori (Jenjang Pendidikan) Rancangan ini merupakan halaman kedua aplikasi. Di halaman ini terdapat tombol-tombol list jenjang pendidikan yang terhubung pada halaman pencarian. HEADER CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT Gambar 3.7 Rancangan Halaman Kategori (Jenjang Pendidikan) Keterangan gambar (list) : Header Content-Content : Berisi judul dari aplikasi : Berisi Jenjang-Jenjang Pendidikan

13 Perancangan Antar muka halaman Pencarian Kembali NAMA HALAMAN Halaman cari Nama Alamat Nama Alamat Nama Alamat Gambar 3.8 Rancangan Halaman Pencarian Keterangan Gambar : Nama Halaman Kembali Halaman Cari user(pengguna) Nama dan Alamat : berisi judul dari content : tombol kembali ke halaman awal : berisi pencarian nama-nama yang diketikkan : berisi nama dan alamat dari content yang terpilih

14 Perancangan Antar muka halaman Detail Sekolah Gambar 3.9 Rancangan Halaman Detail Sekolah Keterangan Gambar : Nama Halaman Kembali Gambar Detail Sekolah : berisi judul dari content : tombol kembali ke halaman awal : berisi gambar : berisi detail-detail sekolah seperti alamat, , website, nomor telepon dan lainnya.

15 Konektivitas Database Ke Mobile DATABASE PHP WEB 5 4 PHONEGAP INTER NET 1 7 HTML 2 3 AJAX CSS JAVASCRIPT 6 JSON Gambar 3.10 Keterhubungan Basis data Ke Telepon seluler Keterangan Gambar: 1. Pengguna masuk ke aplikasi melalui mobile phone 2. Aplikasi tersebut akan membaca html, css, dan javacript 3. Setelah itu, situs akan menterjemahkan Ajax melalui Javascript. 4. Permintaan akan dikirim melalui jaringan local untuk memberikan variable permintaan kepada PHP. 5. Lalu php menangkap variabel yang dikirim untuk di proses dalam bentuk query yang akan diolah di dalam database dari web service suatu web. 6. Dari query yang di dapat, php memunculkan kembali data dari database dan diberikan kepada AJAX untuk diterjemahkan kedalam bahasa pemrograman JSON.

16 75 7. JSON menload data yang diterima untuk ditampilkan kembali dalam bentuk HTML dan JavaScript berupa User Interface dan data dari database. 3.6 Pertukaran Data Menggunakan JSON dan PHP Pertukaran data antar aplikasi berbasis Web dapat dilakukan dengan menggunakan teknik JSON. Pertukaran data dengan menggunakan Aplikasi Web seperti PHP dapat dilakukan melalui media Internet maupun Intranet tanpa harus mengakses langsung database yang digunakan, seperti MySQL. Format Penulisan Json pada Aplikasi Pencarian Sekolah. 1. Pada Kategori.php { "items": [ { "kat_id": "16", "kat_nama": "TK" ( Key : Value ) ( Key : Value ) } ] } 2. Pada List.php { "items": [ { "content_id": "1431", ( Key : Value ) "content_nama": "Al Hikmatuzzainiyyah", ( Key : Value ) "content_kategori_id": "16", ( Key : Value )

17 76 "content_alamat": "<p>jl. Satria III No.96, Ujung Menteng, Kecamatan Cakung, Jakarta Timur<\/p>", ( Key : Value ) "content_telepon": " ", ( Key : Value ) } ] } { 3. Pada Detail.php "items": [ { "content_id": "1431", ( Key : Value ) "content_nama": "Al Hikmatuzzainiyyah", ( Key : Value ) "content_kategori_id": "16", ( Key : Value ) "content_alamat": "<p>jl. Satria III No.96, Ujung Menteng, Kecamatan Cakung, Jakarta Timur<\/p>", ( Key : Value ) "content_telepon": " ", ( Key : Value ) "content_fax": "", "content_website": "", "content_ ": "" ] } }