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
61
3.1.1 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.
62
3.2.1 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 :
63
Tabel 3.1 Pengguna Masuk Aplikasi Nama use case Aktor
: :
Aplikasi 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 Aktor
:
Melihat Halaman TK 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 Aktor
:
Deskripsi
:
Melihat Halaman SD Pengguna : 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.
64
Tabel 3.4 Pengguna Melihat Nama Sekolah SMP Nama use case Aktor
:
Melihat Halaman SMP 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 Aktor
:
Deskripsi
:
Melihat Halaman SMA Pengguna : 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 Aktor
: :
Melihat Halaman SMK 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.
65
Tabel 3.7 Pengguna Melihat Nama Perguruan Tinggi Nama use case
:
Melihat Halaman TINGGI Pengguna
Aktor
PERGURUAN
: 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.
3.2.2 ACTIVITY DIAGRAM Diagram Aktifitas adalah diagram yang menggambarkan sebuah skema aktifitas yang terjadi pada pengujian aplikasi tersebut. 3.2.2.1 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.
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. 3.2.3 SEQUENCE DIAGRAM Diagram Sequence adalah diagram yang menggambarkan interaksi antara pengguna dan sistem. Dari use case yang sudah dijelaskan diatas maka penulis
67
dapat pula menggambarkan diagram sequence yang sesuai melalui seperti berikut ini. 3.2.3.1 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).
68
3.3.1 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.
69
3.3.2 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_email.
Nama tabel
: content
Primary key
: content_id
Tabel 3.8 Tabel Content Nama Field Content_id Content_nama Content_alamat Content_telepon Content_fax Content_website Content_email
Panjang 11 255 100 100 250 200
Tipe Data Integer Varchar2 Text Varchar2 Varchar2 Varchar2 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
: Ref_kategori
Primary key
: Kat_id
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. 3.4.1 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
71
3.4.2 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
: Berisi judul dari aplikasi
Content-Content
: Berisi Jenjang-Jenjang Pendidikan
72
3.4.3 Perancangan Antar muka halaman Pencarian
NAMA HALAMAN
Kembali
Halaman cari Nama Alamat Nama Alamat Nama Alamat
Gambar 3.8 Rancangan Halaman Pencarian Keterangan Gambar : Nama Halaman
: berisi judul dari content
Kembali
: tombol kembali ke halaman awal
Halaman Cari user(pengguna)
: berisi pencarian nama-nama yang diketikkan
Nama dan Alamat
: berisi nama dan alamat dari content yang terpilih
73
3.4.4 Perancangan Antar muka halaman Detail Sekolah
Gambar 3.9 Rancangan Halaman Detail Sekolah
Keterangan Gambar : Nama Halaman
: berisi judul dari content
Kembali
: tombol kembali ke halaman awal
Gambar
: berisi gambar
Detail Sekolah
: berisi detail-detail sekolah seperti alamat, email, website, nomor telepon dan lainnya.
74
3.5
Konektivitas Database Ke Mobile
DATABASE
PHP
5
WEB
4 INTER NET
PHONEGAP
1 3 7 HTML
2
AJAX
CSS
6 JAVASCRIPT
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.
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",
(“Key”:”Value”)
"kat_nama": "TK"
(“Key”:”Value”)
} ] }
2. Pada List.php { "items": [ { "content_id": "1431", (“Key”:”Value”) "content_nama": "Al Hikmatuzzainiyyah", "content_kategori_id": "16",
(“Key”:”Value”)
(“Key”:”Value”)
76
"content_alamat": "
Jl. Satria III No.96, Ujung Menteng, Kecamatan Cakung, Jakarta Timur<\/p>", (“Key”:”Value”) "content_telepon": "021 - 46829671",
(“Key”:”Value”)
} ] }
3.
Pada Detail.php
{ "items": [ { "content_id": "1431",
(“Key”:”Value”)
"content_nama": "Al Hikmatuzzainiyyah", "content_kategori_id": "16",
(“Key”:”Value”)
(“Key”:”Value”)
"content_alamat": "
Jl. Satria III No.96, Ujung Menteng, Kecamatan Cakung, Jakarta Timur<\/p>", (“Key”:”Value”) "content_telepon": "021 - 46829671", "content_fax": "", "content_website": "", "content_email": ""
} ] }
(“Key”:”Value”)
