60 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.
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.
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 :
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.
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.
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.
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.
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
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).
3.3.1 Entity Relationship Diagram (ERD)
Entity relationship diagram merupakan sebuah alat untuk merancang dan menganalisis database yang khusus dibuat untuk menerapkan teknik entity-relationship 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.
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 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_email 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 : Ref_kategori Primary key : Kat_id
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.
Gambar 3.6 Rancangan Halaman Utama Aplikasi
Aplikasi Pencarian Sekolah
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.
Gambar 3.7 Rancangan Halaman Kategori (Jenjang Pendidikan)
Keterangan gambar (list) :
Header : Berisi judul dari aplikasi
Content-Content : Berisi Jenjang-Jenjang Pendidikan
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
HEADER
3.4.3 Perancangan Antar muka halaman Pencarian
Gambar 3.8 Rancangan Halaman Pencarian
Keterangan Gambar :
Nama Halaman : berisi judul dari content
Kembali : tombol kembali ke halaman awal
Halaman Cari : berisi pencarian nama-nama yang diketikkan user(pengguna)
Nama dan Alamat : berisi nama dan alamat dari content yang terpilih
NAMA HALAMAN
KembaliHalaman cari
Nama Alamat Nama Alamat Nama Alamat3.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.
3.5 Konektivitas Database Ke Mobile
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. PHONEGAP HTML CSS JAVASCRIPT AJAX JSON INTER NET PHP WEB DATABASE 1 2 3 4 5 6 7
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", (“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": "021 - 46829671", (“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": "021 - 46829671", (“Key”:”Value”) "content_fax": "", "content_website": "", "content_email": "" } ] }
