BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

BAB IV

IMPLEMENTASI DAN PENGUJIAN

Pada BAB ini akan dibahas mengenai Implementasi aplikasi informasi

perguruan tinggi untuk program studi teknik informatika di wilayah jabodetabek

beserta factor-faktor pendukung system, serta hasil pengujian terhadap aplikasi pda

beberapa jenis device yang akan di gunakan untuk mengakses aplikasi.

4.1 Implementasi

Setelah sistem dianalisis dan didesain secara rinci, maka akan menuju tahap

implementasi. Implementasi sistem merupakan tahap meletakkan sistem sehingga

siap untuk dioperasikan. Implementasi bertujuan untuk mengkonfirmasi

modul-modul perancangan, sehingga pengguna dapat memberi masukan kepada

pengembangan sistem.

4.1.1 Spesifikasi Kebutuhan Sistem

Berikut spesifikasi kebutuhan sistem hardware dan software yang

digunakan pada saat membuat aplikasi ini:

Hardware:

1. Proccesor Intel® Core™ i3

2. VGA NVIDIA GeForce 310M

3. Memory 4 GB (2x 2GB) DDR3

4. Hard Drive 298 GB

5. Display 14" WXGA LED, Max. Resolution 1366 x 768

6. Handphone Samsung Galaxy Grand Prime SM-G530H

Software:

1. Operating System Windows 7 SP1

2. Eclipse IDE Luna

3. Android SDK versi 2.3.3 Gingerbread dan 4.1.2 Jelly Bean

(2)

6. Notepad++

7. Navicate for MySQL

4.2 Pengumpulan Bahan

Pengumpulan bahan atau material berupa

file-file

teks, gambar, dan tombol

navigasi yang diperoleh dengan cara membuat sendiri dan mengambil dari sumber

lain, seperti yang tertera pada table di bawah ini:

Tabel 4.1 Info Sumber

Lanjutan Tabel 4.1

Sumber

Data Dosen

http://forlap.dikti.go.id/

Data Program Studi

http://forlap.dikti.go.id/

icon

http://ionicons.com/

persadaindonesia.png

http://tescaindonesia.org/assets/imagecache/thumb1/m

ember-universitas-persada-indonesia-yai.jpg

persadaindonesia1.png

https://upload.wikimedia.org/wikipedia/id/thumb/f/f6/

Upiyai.jpg/360px-Upiyai.jpg

yasri.png

http://4.bp.blogspot.com/-nRTqmIFD9ak/Thi270T1WoI/AAAAAAAAAWw/tp

xQA398E0s/s1600/Yarsi.png

yasri1.png

http://rahmatfredy.blog.com/files/2011/02/fk-yarsi2.jpg

mercubuana.png

http://mercubuana.ac.id/id/images/zt_bravi/logo_baru

_umb.jpg

mercubuana1.png

http://3.bp.blogspot.com/-9CuwBQ-6U_0/VGjDhtJlLYI/AAAAAAAAAEE/45IN2WQPY

44/s1600/Gedung-Universitas-Mercu-Buana-UMB.jpg

(3)

Lanjutan Tabel 4.1

untar.png

http://dc404.4shared.com/img/eLDJIilh/1222fce6bc8/

LOGO_UNTAR

untar1.png

http://harga.web.id/wp-content/uploads/Universitas-Tarumanagara.jpg

satyagama.png

https://upload.wikimedia.org/wikipedia/id/5/5b/Logo-satyagama-1.jpg

satyagama1.png

http://3.bp.blogspot.com/-__JK6D1cvSA/VOjD5JgO1sI/AAAAAAAADfg/Rkv

uXXh82n0/s1600/gedung-depan%2BSatya%2BGama.jpg

ukrida.png

https://pbs.twimg.com/profile_images/1122843779/67

75_1112561502771_1488927718_30373482_614743

6_n.jpg

ukrida1.png

http://kulitinta.com/wp-

content/uploads/2014/10/Universitas-Kristen-Krida-Wacana.jpg

esaunggul.png

http://www.esaunggul.ac.id/wp-content/uploads/2012/07/logo-ke-bwh.jpg

esaunggul1.png

http://hoteldekatkampus.com/wp-

content/uploads/2014/09/Kampus-Universitas-Esa-Unggul.jpg

Binus.png

http://www.indomog.com/home/wp-content/assets/binus-340x213.jpg

Binus1.png

http://upload.wikimedia.org/wikipedia/commons/8/85/

Anggrek_Campus_-_Bina_Nusantara_University.JPG

(4)

Lanjutan Tabel 4.1

ubm.png

https://upload.wikimedia.org/wikipedia/id/3/38/Logo-ubm.gif

ubm1.png

https://shirotora.wordpress.com/files/2009/04/ubmgedung.jpg

unj.png

http://www.unj.ac.id/images/unj.png

unj1.png

http://1hal.com/wp-content/uploads/2015/04/unj1.jpg

surapati.png

http://3.bp.blogspot.com/_ix8cgm8savU/SMzxGIEMNEI/AA

AAAAAAAAM/uMpQHllUNsg/s400/UNISPA.gif

surapati1.png

http://static.panoramio.com/photos/large/73917732.jpg

ub.png

https://upload.wikimedia.org/wikipedia/id/e/e4/Universitasbor

obudur.jpg

ub1.png

http://bimg.antaranews.com/banten/2015/04/ori/20150405753

48884.jpg

unkris.png

http://logokampus-kampus.googlecode.com/files/LOGO%20UNKRIS.png

unkris1.png

http://kelas-karyawan-unkris.nomor.net/_pts2/_baca_gambar.php?kodegb=unkris&i

magenya=home_2

upt.png

http://univmputantular.0fees.net/BUKUPEDOMAN/PENGA

NTAR_files/image005.jpg

upt1.png

http://mw2.google.com/mw-panoramio/photos/medium/16025186.jpg

udp.png

http://www.unsada.ac.id/wp-content/uploads/2012/06/logo-unsada1.jpg

udp1.png

http://pmb.unsada.ac.id/themes/images/animasi.gif

(5)

Lanjutan Tabel 4.1

uthamrin.png

https://pbs.twimg.com/profile_images/1814337748/ICON_MHT

_400x400.png

uthamrin1.png http://www.univthamrinaka.com/site/media/rokgallery/f/ff9b5a5

f-2be8-47be-b3e3-ab5d6bff5d50/905d27a1-d6a5-431d-83b0-93fda87ba700.jpg

urespati.png

http://i.ytimg.com/vi/Tift3Y5FWp0/hqdefault.jpg

urespati1.png

http://1.bp.blogspot.com/-h-zDxDVRK84/VRlON46V3FI/AAAAAAAAARs/oCmO8NQijZ

o/s1600/1908243_465475233553456_1370344999_n.jpg

utj.png

http://www.anneahira.com/images_wp/universitas-tama-jagakarsa.jpg

utj1.png

http://photos.wikimapia.org/p/00/02/56/97/94_big.jpg

trilogi.png

https://pbs.twimg.com/profile_images/3432299687/03d29f797e9

b19971887082d2c968ac0_400x400.jpeg

trilogi1.png

https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQCLZSO2MH3B2ZnU

5iAqiSrCdtOrkyucZa7LwXcE93tkKTllzP_

usni.png

http://www.kesekolah.com/images2/sekolah/2012052815344240

381.jpg

usni1.png

http://farm2.static.flickr.com/1351/1385802703_b969fd14eb.jpg

upn.png

http://fk.upnvj.ac.id/id/files/large/c2d304bcdb950e285dc872747

58eb24b

(6)

Lanjutan Tabel 4.1

upn1.png

http://4.bp.blogspot.com/-MMzZ6lOC5bE/Uwyj363Vn0I/AAAAAAAAAHs/UHaY

BC3b3mI/s1600/upnn.JPG

up.png

http://www.annida-online.com/foto_berita/11logo-paramadina.jpg

up1.png

http://harga.web.id/wp-content/uploads/Universitas-Paramadina.jpg

Upancasila.png

http://2.bp.blogspot.com/-F4OiP4MJfoE/UiRIPMZJZ3I/AAAAAAAADf4/XWOyZ

O0RaN4/s1600/UNIVERSITAS+PANCASILA.png

Upancasila1.png

http://hoteldekatkampus.com/wp-content/uploads/2014/09/univ-pancasila.jpg

un.png

https://upload.wikimedia.org/wikipedia/id/thumb/b/b6/Log

o_Universitas_Nasional.gif/150px-Logo_Universitas_Nasional.gif

un1.png

https://upload.wikimedia.org/wikipedia/id/thumb/d/d5/Una

s007.jpg/300px-Unas007.jpg

umpdeh.png

https://nq99.files.wordpress.com/2012/06/hamka2.jpg

umpdeh1.png

http://hoteldekatkampus.com/wp-

content/uploads/2014/12/universitas-muhammadiah-prof-dr-hamka.jpg

uip.png

http://4.bp.blogspot.com/_2Yej-nbjJ5A/TQxMEb-

XcYI/AAAAAAAAAB8/mOOjoPfqO8g/s1600/logo-unindra.jpg

(7)

Lanjutan Tabel 4.1

uip1.png

http://hoteldekatkampus.com/wp-

content/uploads/2014/09/unindra-pgri-tempat-kuliah-bagi-ekonomi-lemah-170684-popoji.jpg

ubl.png

https://stronger182.files.wordpress.com/2008/03/budiluhur

1.jpg

ubl1.png

http://www.makemac.com/wp-content/uploads/2014/06/Universitas-Budi-Luhur.jpg

ubj.png

http://www.ubharajaya.ac.id/sites/default/files/logo-web.gif

ubj1.png

http://2.bp.blogspot.com/-glZTj0VLfd4/VP_Qak300RI/AAAAAAAABKE/0MBNw

HeSHGU/s1600/ubhara%2Bjaya.jpg

uali.png

http://www.bdadesign.co.id/assets/showcase/2008/LOGO_

UAI.jpg

uali1.png

http://hoteldekatkampus.com/wp-

content/uploads/2014/09/Universitas_Al-

Azhar_Indonesia_dan_Masjid_Agung_Al-Azhar_Terlihat_di_Parkir_Utama.jpg

utau.png

http://www.kesekolah.com/images2/sekolah/20140423175

51224447.jpg

utau1.png

http://www.sulselprov.go.id/foto_berita/30tanriabeng.jpg

ubakrie.png

http://www.bakrie.ac.id/images/stories/UBprofile/Logo.pn

g

ubakrie1.png

https://img.okezone.com/content/2012/02/21/373/579981/

n55wMYHQQP.jpg

(8)

Lanjutan Tabel 4.1

um.png

http://ftumj.ac.id/images/UMJ.png

um1.png

http://pmb.umj.ac.id/foto_berita/20gedung-umj.jpg

uik.png

http://www.yukerja.com/files/logo_uika.png

uik1.png

http://photos.wikimapia.org/p/00/03/21/87/98_big.jpg

up.png

https://upload.wikimedia.org/wikipedia/id/archive/3/3e/20

130912062645!Logo_Universitas_Pakuan.jpeg

up1.png

http://1.bp.blogspot.com/-BS132fTqD9I/Ud6bW27O7TI/AAAAAAAAAGQ/yM44

R_v2mZw/s320/id-kampus-univ-pakuan.JPG

gundar.png

https://upload.wikimedia.org/wikipedia/id/1/19/Logo_Gun

adarma.jpg

gundar1.png

http://diploma.gunadarma.ac.id/bisnis/asset/tiny/gudang/I

mage/SELAMAT%20DATANG2.jpg

uinsh.png

http://alfukat.com/wp-content/uploads/2015/01/UIN-Jakarta-Logo.jpg

uinsh1.png

http://1.bp.blogspot.com/-nuUGI9clJ24/UVHSQ4f7-bI/AAAAAAAAAJc/ixQgnLMQwMk/s1600/Kampus+Un

iversitas+Islam+Negeri+(UIN).jpg

umn.png

https://www.umn.ac.id/include/images/template/logo-for-twitter22.png

umn1.png

http://flashindonesia.files.wordpress.com/2009/12/news_pi

c_15c_newcampus1.jpg

umatana.png

http://www.matanauniversity.ac.id/home/wp-content/uploads/2014/09/default-logo.png

(9)

Lanjutan Tabel 4.1

umatana1.png

http://cdn.sindonews.net/dyn/620/content/2014/12/03/150/9322

57/paramount-land-siapkan-generasi-emas-Dck.jpg

Unis.png

https://upload.wikimedia.org/wikipedia/id/2/20/Unis.jpg

Unis1.png

http://sinarharapan.co/foto_suplemen/16unis%20tangerang.jpg

sgu.png

http://www.yukerja.com/files/Swiss-German-University.jpg

sgu1.png

http://www.infokampustangsel.com/slidehome/swissgerman/sg

u.jpg

unpam.png

https://lh3.ggpht.com/ctSZq2TeU0SPmNw7Eo-3UEjJ04gK9GurINgctR7TKxTsacWeXKAyB9nREKZ98FBnk

-DR=w300

unpam1.png

http://img31.imageshack.us/img31/3854/fed3.jpg

upi.png

http://www.unpri.ac.id/images/logo-unpri.jpg

upi1.png

http://images.hukumonline.com/frontend/lt4badba90a162a.jpg

umt.png

http://simaku.net/g5umt/images/umt_big.png

umt1.png

http://umt.ac.id/umt/uploads/2014/09/Untitled-1.jpg

upj.png

https://wahyugthamrin.files.wordpress.com/2014/12/logo_bulat

.png

upj1.png

http://photos.wikimapia.org/p/00/02/01/19/37_big.jpg

ubd.png

http://www.buddhi.ac.id/wp-content/uploads/2014/08/logo-stie-copy.png

ubd1.png

http://assets.kompasiana.com/statics/crawl/555e6b050423bd0f

318b4568.jpeg

(10)

4.3 Penulisan Code (coding)

Pada bagian ini penulis akan menjabarkan source code dari aplikasi ini

secara rinci. Mulai dari halaman utama, halaman pilih perguruan tinggi, dan yang

lainnya.

Coding ini di tulis di program eclipse dan di running dengan ponsel samsung

galaxy prime sebagai acuan apakah aplikasi sudah berjalan dengan semestinya. Bila

belum maka kode akan kembali di perbaiki sehingga di dapatlah aplikasi berjalan

dan berfungsi dengan baik.

4.3.1 Penulisan Kode Pada Menu Utama

Kode pada halaman home, yang berisi list-button dari

button

pilih wilayah

menuju halaman wilayah yang di pilih dan tentang aplikasi di dalam panel.

<div id="wilayahListPage" data-role="page" > //header aplikasi

//menampilkan isi panel <div class="ui-panel-inner">

<h2><font>Aplikasi Informasi perguruan tinggi untuk program studi teknik informatika di wilayah jabodetabek</font></h2>

p><font>"Aplikasi ini dibuat</font><code><font>untuk menyelesaikan</font></code><font>tahapan tugas akhir perkuliahan".</font></p>

</div>

<h3 class="ui-padding-off">Pilih Wilayah</h3> </div>

//menampilkan button pilih wilayah function getWilayahList() {

$.getJSON(serviceURL + 'get_wilayah.php', function(data) { $('#wilayahList li').remove();

upresiden.png

http://informasibeasiswas1.com/wp-content/uploads/2009/09/president-university-277x300.png

upresiden1.png

(11)

wilayah = data.items;

$.each(wilayah, function(index, arrwilayah) { $('#wilayahList').append(

'<a data-ajax="false" class="ui-btn ui-btn-c" href="universitas.html?id=' + arrwilayah.id_wilayah + '" rel="external">' + arrwilayah.nm_wilayah + '</a>'

); }); $('#Results').bind('pageinit', function() { $('#wilayahList').listview('refresh'); }); }); } //kode php <?php header("Access-Control-Allow-Origin: *"); include 'config.php';

$sql = "select * from tb_wilayah"; try {

$dbh = new PDO("mysql:host=$server;dbname=$database", $username, $password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $dbh->query($sql);

$wilayah = $stmt->fetchAll(PDO::FETCH_OBJ); $dbh = null;

echo '{"items":'. json_encode($wilayah) .'}'; } catch(PDOException $e) {

echo '{"error":{"text":'. $e->getMessage() .'}}'; }

?>

Ketika

button

panel di tap maka aplikasi akan menampilkan isi tentang

aplikasi, seperti yang tergambar pada gambar 4.2, dan bila

button

panel kembali di

tap maka aplikasi akan menampilkan

buttton list

pilih wilayah.

Berikut adalah tampilan halaman awal aplikasi yang di ambil dari ponsel

samsung galaxy prime:

(12)

Gambar 4.1 dan 4.2

Home Aplikasi

4.3.2 Penulisan Kode Pada Halaman Pilih Universitas

<div id="universitasListPage" data-role="page"> //Header Aplikasi

//Button Kembali aplikasi

</div>

//menampilkan Listview Pilih Universitas

//Kode Javascript

function displayUniversitas() {

$.getJSON(serviceURL + 'get_universitas.php?id='+id,function(data) { var universitas = data.items;

console.log(universitas); $('#universitas li').remove();

$.each(universitas, function(index, arruniversitaslist) { $('#universitas').append(

(13)

'<li>'+

'<a data-ajax="false" href="detail_universitas.html?id=' + arruniversitaslist.id_universitas + '" rel="external"><img class="ui-circle ui-mini ui-padding" src="'+ arruniversitaslist.logo + '"/>' + '<h2 class="ui-text-black">' + arruniversitaslist.nm_universitas +'</h2>' +'<p>'+'<b>'+'</b>' + arruniversitaslist.deskripsi + '</b>'+'</p> ' +'<p>' + arruniversitaslist.alamat_univ + '</p>' + '</a>'+'</li>' ); }); $('#universitas').listview('refresh'); }); //Kode php <?php header("Access-Control-Allow-Origin: *"); include 'config.php';

error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $sql = "SELECT a.id_universitas, a.id_wilayah, a.nm_universitas, a.deskripsi, a.alamat_univ, a.logo, b.nm_wilayah FROM tb_universitas AS a

Left Join tb_wilayah AS b ON a.id_wilayah = b.id_wilayah WHERE a.id_wilayah='".$_GET['id']."'

"; try {

$dbh = new PDO("mysql:host=$server;dbname=$database", $username, $password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $dbh->query($sql); $stmt->bindParam("id", $_GET['id']); $stmt->execute(); $universitas = $stmt->fetchAll(PDO::FETCH_OBJ); $dbh = null;

echo '{"items":'. json_encode($universitas) .'}'; } catch(PDOException $e) {

?> }

Berikut adalah tampilan pada halaman pilih universitas berdasarkan wilayah yang

di pilih sebelumnya pada halaman awal aplikasi:

(14)

Gambar 4.3

Halaman Pilih Universitas

4.3.3 Penulisan Kode Pada Halaman Profil Universitas

<div id="detailUniversitasListPage" data-role="page"> //Menampilkan Header

//Menampilkan tombo kembali

</div>

//Menampilkan Gambar Header

//kode javascript

function displayGambarUniversitas() {

$.getJSON(serviceURL + 'get_gambar.php?id='+id,function(data) {var gambar_universitas = data.items;

console.log(gambar_universitas); $('#gambar_universitas li').remove();

$.each(gambar_universitas, function(index, arruniversitasgambar) {

$('#gambar_universitas').append( '<img width="100%" src="' + arruniversitasgambar.gambar_header + ' "class="card" />'

); });

(15)

}); } //Kode php <?php header("Access-Control-Allow-Origin: *"); include 'config.php';

$sql = "SELECT * FROM tb_universitas WHERE id_universitas='".$_GET['id']."'"; try {

$dbh = new PDO("mysql:host=$server;dbname=$database", $username, $password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $dbh->query($sql); $stmt->bindParam("id", $_GET['id']); $stmt->execute(); $gambar_universitas = $stmt->fetchALL(PDO::FETCH_OBJ); $dbh = null;

echo '{"items":'. json_encode($gambar_universitas) .'}'; } catch(PDOException $e) {

?>

//Menampilkan collapsible Set data dosen dan detail prodi <div data-role="main" class="ui-content">

//Menampilkan data dosen h3>Dosen</h3>

<table data-role="table" id="table2" data-mode="reflow" class="ui-responsive ui-shadow"> <thead> <tr> <th data-priority="1">NO</th> <th style="width:40%">Nama Dosen</th> <th data-priority="2">Gelar</th> <th data-priority="3"><abbr title="Pendidikan">Pendidikan</abbr></th> </tr> </thead> <tbody id="detail_universitas"></tbody> </table> </div> </div> //kode javascript function displayDetailUniversitas() { $.getJSON(serviceURL + 'get_detail_universitas.php?id='+id,function(data) { var detail_universitas = data.items;

console.log(detail_universitas); $('#detail_universitas li').remove();

$.each(detail_universitas, function(index, arruniversitasdetail) { $('#detail_universitas').append(

'<tr>' + '<td></td>' +

'<td><a href="#">' + arruniversitasdetail.nm_dosen + '</a></td>' +

'<td>' + arruniversitasdetail.gelar + '</td>' +'<td class="tcenter">' + arruniversitasdetail.pendidikan + '</td>' +

(16)

$('#detail_universitas').listview('refresh'); }); } //Kode php <?php header("Access-Control-Allow-Origin: *"); include 'config.php'; $sql = "SELECT a.id_universitas, a.id_wilayah, a.nm_universitas, a.deskripsi, a.alamat_univ, a.logo, a.gambar_header, a.lat, a.lng, b.id_dosen, b.nm_dosen, b.gelar, b.pendidikan FROM tb_universitas AS a

Left Join tb_dosen AS b ON a.id_universitas = b.id_universitas WHERE

a.id_universitas ='".$_GET['id']."' ";

try {

$dbh = new PDO("mysql:host=$server;dbname=$database", $username, $password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $dbh->query($sql); $stmt->bindParam("id", $_GET['id']); $stmt->execute(); $detail_universitas = $stmt->fetchAll(PDO::FETCH_OBJ); $dbh = null;

echo '{"items":'. json_encode($detail_universitas) .'}'; } catch(PDOException $e) {

?>

//Menampilkan data detail prodi <h3>Detail</h3>

<table data-role="table" id="table2" data-mode="reflow" class="ui-responsive ui-shadow"> <thead> <tr> <th data-priority="1">Status Prodi</th> <th data-priority="2">Kode Prodi</th> <th data-priority="3">Nama Prodi</th> <th data-priority="4">Tanggal Berdiri</th> <th data-priority="5">SK Penyelengara</th> <th data-priority="6">Tanggal SK</th> <th data-priority="7">Rasio Dosen</th> <th data-priority="8">Alamat</th> <th data-priority="9">Kode Pos</th> <th data-priority="9">Telepon</th> <th data-priority="10">Faximile</th> <th data-priority="10">Email</th> <th data-priority="10">Website</th>

(17)

</tr> </thead> <tbody id="deskripsi_universitas"></tbody> </table> </div> //Kode Javascript function displayDeskripsiUniversitas() { $.getJSON(serviceURL + 'get_deskripsi_universitas.php?id='+id,function(data) { var deskripsi_universitas = data.items;

console.log(deskripsi_universitas); $('#deskripsi_universitas li').remove();

$.each(deskripsi_universitas, function(index, arruniversitasdeskripsi) { $('#deskripsi_universitas').append( '<tr>' + '<td>' + arruniversitasdeskripsi.status_prodi + '</td>' + '<td>' + arruniversitasdeskripsi.kd_prodi + '</td>' + '<td>' + arruniversitasdeskripsi.nm_prodi + '</td>' + '<td>' + arruniversitasdeskripsi.tgl_berdiri + '</td>' + '<td>' + arruniversitasdeskripsi.sk_penyelenggara + '</td>' + '<td>' + arruniversitasdeskripsi.tgl_sk + '</td>' + '<td>' + arruniversitasdeskripsi.rasio_dosen + '</td>' + '<td>' + arruniversitasdeskripsi.alamat + '</td>' + '<td>' + arruniversitasdeskripsi.kodepos + '</td>' + '<td>' + arruniversitasdeskripsi.telepon + '</td>' + '<td>' + arruniversitasdeskripsi.faximile + '</td>' + '<td>' + arruniversitasdeskripsi.email + '</td>' + '<td>' + arruniversitasdeskripsi.website + '</td>' + '</tr>' ); }); $('#deskripsi_universitas').listview('refresh'); }); } //Kode php <?php header("Access-Control-Allow-Origin: *"); include 'config.php'; $sql = "SELECT a.id_universitas, b.id_univ_detail, b.status_prodi, b.kd_prodi, b.nm_prodi, b.tgl_berdiri, b.sk_penyelenggara, b.tgl_sk, b.rasio_dosen, b.alamat, b.kodepos, b.telepon, b.faximile, b.email, b.website FROM

(18)

WHERE

try {

$dbh = new PDO("mysql:host=$server;dbname=$database", $username, $password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $dbh->query($sql); $stmt->bindParam("id", $_GET['id']); $stmt->execute(); $deskripsi_universitas = $stmt->fetchAll(PDO::FETCH_OBJ); $dbh = null;

echo '{"items":'. json_encode($deskripsi_universitas) .'}'; } catch(PDOException $e) {

?>

//Menampilkan listview menu pada profil universitas <div data-role="main" class="ui-nodisc-icon ui-alt-icon" > <div class="ui-padding">

</div>

</div>

//kode javascript

function displayMapUniversitas() {

$.getJSON(serviceURL + 'get_lokasi.php?id='+id,function(data) { var map_universitas = data.items ;

console.log(map_universitas); $('#map_universitas li').remove();

$.each(map_universitas, function(index, arruniversitasmap) { $('#map_universitas').append(

'<li>' +

'<a data-ajax="false" href="lokasi.html?id=' + arruniversitasmap.id_universitas + '" rel="external" ><img class="ui-circle ui-mini ui-padding" src="jquery.mobile-1.4.5/images/icons-png/ios7-location-outline.png"/>' + '<h2 class="ui-text-black">Lokasi</h2><p>Lihat Lokasi</p>' +'</a>' + '</li>' +

'<li>' +

'<a data-ajax="false" href="rute.html?id=' + arruniversitasmap.id_universitas + '" rel="external" ><img class="ui-circle ui-mini ui-padding" src="jquery.mobile-1.4.5/images/icons-png/ios7-navigate-outline.png"/>' + '<h2 class="ui-text-black">Navigasi</h2><p>Lihat Rute</p>' + '</a>' + '</li>' +

'<li>' +

'<a data-ajax="false" href="tel:?id=' + arruniversitasmap.telepon + '" rel="external"><img class="ui-circle ui-mini ui-padding" src="jquery.mobile-1.4.5/images/icons-png/ios7-telephone-outline.png"/>' + '<h2 class="ui-text-black">Telepon</h2><p>kontak person</p>' +

'</a>' + '</li>' + '<li>' +

'<a data-ajax="false" href=' + arruniversitasmap.website + ' rel="external"><img class="ui-circle ui-mini ui-padding" src="jquery.mobile-1.4.5/images/icons-png/ios7-world-outline.png" />' + '<h2 class="ui-text-black">Website</h2><p>Telusuri Web</p>' + '</a>' + '</li>' + '<li>' +

'<a data-ajax="false" href="mailto:' + arruniversitasmap.email + '" rel="external"><img class="ui-circle ui-mini ui-padding" src="jquery.mobile-1.4.5/images/icons-png/ios7-email-outline.png" />' + '<h2 class="ui-text-black">Email</h2><p>Kirim Email</p>' +

(19)

); }); $('#map_universitas').listview('refresh'); }); } //Kode php <?php header("Access-Control-Allow-Origin: *"); include 'config.php';

error_reporting(E_ALL ^ (E_NOTICE | E_WARNING ));

$sql = "SELECT * FROM tb_universitas WHERE id_universitas='".$_GET['id']."'"; try {

$dbh = new PDO("mysql:host=$server;dbname=$database", $username, $password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $dbh->query($sql); $stmt->bindParam("id", $_GET['id']); $stmt->execute(); $map_universitas = $stmt->fetchALL(PDO::FETCH_OBJ); $dbh = null;

echo '{"items":'. json_encode($map_universitas) .'}'; } catch(PDOException $e) {

(20)

4.3.4 Penlulisan Kode Pada Halaman Lokasi

//Menampilkan Header Aplikasi

//Menampilkan Button Kembali

//Menampilkan Footer

</div>

//Memanggil id maps

<div id="map_canvasku" style="width:100%;height:700px;"></div> //Kode Javascript Google Maps

$('#lokasiuniversitas').live('pageshow', function(event) { getlokasi(); }); var myCenter; function getlokasi() { $.getJSON(serviceURL + 'get_lokasi.php?id='+id,function(data) { var lokasi = data.items;

console.log(lokasi);

$.each(lokasi, function(index, arruniversitasmap){

myCenter=new google.maps.LatLng(arruniversitasmap.lat, arruniversitasmap.lng); }); var marker; var mapProp = { center:myCenter, zoom:17, mapTypeId:google.maps.MapTypeId.ROADMAP };

var map=new google.maps.Map(document.getElementById('map_canvasku'),mapProp); marker=new google.maps.Marker({ position:myCenter, animation:google.maps.Animation.BOUNCE }); marker.setMap(map); }); }

//Kode php memanggil latitude dan longitude dari database include 'config.php'; $sql = "SELECT a.id_universitas, a.id_wilayah, a.nm_universitas, a.deskripsi, a.alamat_univ, a.logo, a.gambar_header, a.lat, a.lng, b.id_dosen, b.nm_dosen,

(21)

b.gelar, b.pendidikan FROM

tb_universitas AS a

try {

(22)

Gambar 4.6

Halaman Lokasi Perguruan Tinggi

Jika

button

lokasi pada halaman profil perguruan tinggi aplikasi di

tekan maka akan di

direct

ke halaman ini, halaman ini berisi maps lokasi perguruan

tinggi. Di

header

juga terdapat tombol

back

, untuk kembali ke halaman profil

perguruan tinggi.

4.3.5 Penulisan Kode Pada Halaman Rute Menuju lokasi Universitas

<div id="ruteuniversitas" data-role="page"> //Menampilkan Header Halaman Rute

//Menampilkan Button Back Halaman Rute

(23)

</div>

//Kode Javascript Google Maps Direction

$('#ruteuniversitas').live('pageshow', function(event) { getrute();

});

$(document).ajaxError(function(event, request, settings) {

if (confirm("Gagal koneksi ke server !!! Tekan OK untuk reload, Tekan Cancel untuk kembali ke Menu") == true) {

location.reload(); } else { window.location.href = 'index.html'; } }); function getrute() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { error('not supported'); } } var directionDisplay; var directionsService; var map; function success(position) {

$.getJSON(serviceURL + 'get_lokasi.php?id='+id, function(data) { lokasi = data.items;

console.log(lokasi);

$.each(lokasi, function(index, arruniversitasmap){

tujuan = new google.maps.LatLng(arruniversitasmap.lat, arruniversitasmap.lng); });

directionsDisplay = new google.maps.DirectionsRenderer(); directionsService = new google.maps.DirectionsService();

map = new google.maps.Map(document.getElementById('map_canvas')); directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById("directionPanel")); var posisi = position.coords.latitude + ',' + position.coords.longitude; var request = {

origin:posisi, destination:tujuan,

travelMode: google.maps.DirectionsTravelMode.DRIVING };

directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response); }

}); });

(24)

include 'config.php'; $sql = "SELECT a.id_universitas, a.id_wilayah, a.nm_universitas, a.deskripsi, a.alamat_univ, a.logo, a.gambar_header, a.lat, a.lng, b.id_dosen, b.nm_dosen, b.gelar, b.pendidikan FROM tb_universitas AS a

try {

(25)