4. IMPLEMENTASI SISTEM

(1)

4.IMPLEMENTASISISTEM

Pada bab ini dibahas tentang implementasi sistem sesuai dengan analisis dan desain sistem. Implementasi sistem meliputi pengaturan database MySQL dan implementasi aplikasi.

4.1. Lingkungan Program 4.1.1. Software

Pada bagian ini, akan dijelaskan software yang digunakan dalam pembuatan skripsi ini. berikut software yang digunakan :

 Notepad++ v6.6.9 : digunakan untuk membuat file HTML, PHP, Javascript, dan pembuatan script program.

 Google Chrome Version 46.0.2490.86 : digunakan untuk menampilkan dan menjalankan aplikasi

 Mozilla Firefox Version 42.0 : digunakan untuk menampilkan dan menjalankan aplikasi

 XAMPP version 3.2.1 : digunakan untuk menginstall PHP dan program dapat diakses melalui localhost

 FileZilla version 3.17.0 : digunakan untuk meng-upload file PHP untuk dapat diakses dari server

 PhoneGap Dekstop version 0.2.3 : digunakan untuk menampilkan dan menjalankan aplikasi pada handphone.

 Cordova 5.1.1 : digunakan untuk menampilkan dan menjalankan aplikasi

 MySQL 5.5 : digunakan untuk menyimpan database

 Android Studio 1.4 : digunakan untuk compile menjadi .apk Android 4.1.2. Hardware

Spesifikasi hardware yang digunakan dalam pengerjaan dan pembuatan skripsi ini adalah :

 Processor : Intel Core i5

 Memory : 4,00 G

(2)

4.2. Implementasi Software

Dalam pembuatan program skripsi ini, yang pertama dilakukan adalah menginstall XAMPP pada laptop, agar dapat menggunakan bahasa pemrograman PHP. Dalam pengerjaan skripsi ini, bahasa PHP digunakan untuk melakukan proses insert, update, view, dan delete data dari database, sedangkan bahasa HTML digunakan untuk mengatur tampilan program.

Setelah itu menggunakan program Notepad++ sebagai text editor. Dengan menggunakan Notepad++, file HTML, PHP, JavaScript dan Script pemrograman dibuat. Setelah file HTML dibuat, digunakan program Google Chrome atau Mozilla Firefox sebagai browser untuk melihat hasil dari pekerjaan.

Pada pengerjaan program skripsi ini, untuk mencoba meng-convert file HTML menjadi apk, dibutuhkan PhoneGap Desktop, Android Studio pada handphone untuk melihat hasilnya.

4.3. Implementasi Program

Implementasi program adalah tahap pembuatan program berdasarkan dari proses layanan delivery order yang telah ada. Program dibuat dengan menggunakan bahasa pemrograman HTML, JavaScript, PHP dengan database MySql. Pada Tabel 4.1 terdapat tabel segmen program yang berisi fitur-fitur pada aplikasi yang telah dibuat.

Tabel 4.1 Daftar Segmen Program

No Keterangan Segmen

1. Sign Up 4.1, 4.2, 4.3,

2. Sign In 4.4, 4.5,4.6.

3. db.php 4.5

4. Signature Menu Makanan 4.7, 4.8, 4.9

5. Take Order Makanan 4.10, 4.11, 4.12, 4.13, 4.14

(3)

4.4. Implementasi pada Interface

Desain interface yang digunakan terdiri dari 8 macam menu, yang dibedakan menurut jenis status username pada saat sign in (user, admin depot/laundry/delivery order, dan kurir). Disetiap username yang sign in terdapat menu yang berbeda-beda, berikut dijelaskan pada Tabel 4.2. Semua menu tersedia dan dibuat pada Index.HTML tetapi bukan keseluruhan dibuat pada satu lembar kerja yang sama melainkan berbeda, hanya saja judulnya sama, yang membedakan ialah folder dimana project user, admin delivery order, depot dan laundry serta kurir disimpan dan masing-masing memiliki folder tersendiri.

Tabel 4.2. Tabel Menu

Status Username Menu

User baru / belum memiliki account

Sign Up Deli-O Food

View Depot Makanan Take Order Food View Summary Order

No Keterangan Segmen

6. Tracking Food dan Laundry 4.15, 4.16, 4.17, 4.18,4.19

7. Recent Order 4.20, 4.21

8. Best Seller Food 4.22, 4.23 9. Recommended Depot

(Favourites) 4.24, 4.25

10. Bill’s Number 4.26, 4.27, 4.28 11. Master Add Depot Makanan

dan Menu Makanan

4.29, 4.30, 4.31, 4.32, 4.33, 4.34

12. Master Edit Depot Makanan dan Menu Makanan

4.35, 4.36, 4.37, 4.38, 4.39

13. Master Delete Depot

Makanan dan Menu Makanan 4.40, 4.41

14. Proses Sign Out 4.42

15. Proses Push Notification 4.43

(4)

Status Username Menu Deli-O laundry

View Laundry Take Order Laundry View Bill’s Number

View Tracking Map Food dan Laundry Favorite

View Best Seller Food View Best Seller Laundry View Recommended Food View Recommended Laundry View Recent Order

Sign Out User / sudah memiliki account Sign in

Deli-O Food

View Depot Makanan Take Order Food View Summary Order Deli-O laundry View Laundry Take Order Laundry View Bill’s Number Favorite

View Best Seller Food View Best Seller Laundry View Recommended Food View Recommended Laundry View Recent Order

Sign Out Admin Delivery Order Sign in

Deli-O Food

View Depot Makanan

Update (add, edit, delete) Depot Makanan Update (add, edit, delete) Menu Depot Deli-O Laundry

View Laundry

Update (add, edit, delete) Laundry Update (add, edit, delete) Menu Laundry Bill’s Number

Insert Bill’s Number

Insert Keterangan Bill’s Number Favorite

Update (add, edit, delete) Best Seller Food Update (add, edit, delete) Best Seller Laundry Update (add, edit, delete) Recommended Food

(5)

Status Username Menu

Update (add, edit, delete) Recommended Laundry

Recent Order

Insert Summary Order Sign Out

Admin Depot Sign In

Edit Depot Makanan

Update (add, edit, delete) Menu Makanan Sign Out

Admin Laundry Sign In

Edit Laundry

Update (add, edit, delete) Menu Laundry Sign Out

Kurir Sign In

Pick Food & Laundry Confirm Order Accepted Sign Out

4.5. Proses Register Awal (Sign Up)

Register atau pendaftaran harus dilakukan apabila ingin melakukan pemesanan makanan atau laundry. Dengan memiliki account pada aplikasi ini, user dapat melakukan pemesanan makanan ataupun laundry dengan leluasa pada aplikasi delivery order ini. Pada saat registrasi awal, user diminta untuk memasukkan data pribadi sebagai keperluan pendataan sistem, sebagai berikut dapat diperhatikan pada Segmen Program 4.1.

Segmen Program 4.1. JavaScript Sign Up

$("#btnSignup").click(function(e){

if($("#first_name").val() == "") {

alert("First Name tidak boleh kosong");

return false;

}

if($("#last_name").val() == "") {

alert("Last Name tidak boleh kosong");

return false;

} ....

(6)

Segmen Program 4.1 menunjukkan bagian data yang perlu untuk dilengkapi oleh user pada saat masuk ke halaman sign up.

Segmen Program 4.2. JavaScript Sign Up (2)

Pada Segmen Program 4.2 menunjukkan bagian sign up pada javascript memanggil fungsi sign up pada lembar kerja PHP.

Segmen Program 4.3. PHP Sign Up

Pada Segmen Program 4.3, berisi fungsi sign up pada server, dimana data yang dikirimkan oleh JavaScript, diambil dan dilakukan insert data user ke dalam database. Setelah proses insert, dilakukan pengecekan email kembar atau tidak.

<?php

require_once("db.php");

..

$res = mysql_query("select * from login where email='$email'");

if($dataUser = mysql_fetch_array($res)) {

$status = 2;

$data = array(

"status" => $status, );

} else {

$id_user =

create_autonumber("login","id_user","C",5);

$jenis_user = "Customer";

mysql_query("insert into login (id_user,first_name,last_name,password,jenis_user, alamat,no_hp,email)

values('$id_user','$first_name','$last_name','$passw ord','$jenis_user','$address','$no_hp','$email')");

...

$.get(server_address+"signup.php",{

"first_name" : $("#first_name").val(),

"last_name" : $("#last_name").val(),

"email" : $("#email").val(),

"password" : $("#password").val(),

"no_hp" : $("#no_hp").val(),

"address" : $("#address").val(),

(7)

4.6. Proses Sign In

Proses Sign In merupakan proses ketika user telah melalui halaman sign up dan diartikan telah memiliki account pada aplikasi ini. Berikutnya jika user sign out pada aplikasi, lalu membuka aplikasi ini kembali maka muncul halaman sign in.

Segmen Program 4.4 PHP Sign In

Pada Segmen Program 4.5. tertulis fungsi untuk halaman sign in, yang

Pada Segmen Program 4.4. fungsi sign in diambil dan diolah oleh file JavaScript pada bagian sign in, dan data yang diperlukan adalah email dan password. Dalam proses menampilkan hasil output data yang berupa JSON maka pada JSONP diperlukan call back pada URL saat dikirim ke server side dengan AJAX fungsinya adalah supaya lebih aman ketika nantinya memanggil lewat URL. Selanjutnya akan dijelaskan bagaimana PHP mendapatkan data pada database.

Segmen Program 4.5. db.PHP

Pada Segmen Program 4.5. terdapat fungsi untuk mengoneksikan localhost php pada server database MySql melalui akses ke opensource.

<?php

...

if(isset($_GET["callback"])) {

$callback = $_GET["callback"];

}

if(isset($_GET["email"]) && isset($_GET["password"])) {

$email = $_GET["email"];

$password = md5($_GET["password"]);

$res = mysql_query("select * from login where email='$email' and password='$password'");

...

echo $callback."(".json_encode($data).")";

mysql_connect("localhost","m26412177","ta12177");

mysql_select_db("m26412177");

(8)

Segmen Program 4.6. JavaScript Sign In

Pada Segmen Program, 4.6. dijelaskan bahwa JavaScript mengirimkan data email dan password yang telah diisikan oleh user ke halaman login.php pada server. Server mengembalikan status 0 jika email dan password salah dan status 1 beserta data user jika email dan password cocok. Setelah login berhasil, maka data user disimpan pada local storage menggunakan fungsi saveDataLogin.

4.7. Proses Signature Menu Makanan

Pada proses ini, aplikasi akan menyuguhkan beragam depot makanan yang berhasil diinput pada database, beserta klasifikasinya. User dapat memilih sesuai selera dan kebutuhannya, makanan apa yang ingin dipesan dan yang tersedia pada depot tersebut. Berikut detail program pada Segmen Program 4.7

Segmen Program 4.7. PHP Signature Menu Makanan ...

$("#btnLogin").click(function(e){

$.get(server_address+"login.php",{

"email" : $("#txt_email").val(),

"password" : $("#txt_password").val(), },function(data){

if(data.status == "1") {

if(data.user.jenis_user == "Customer") {

Id_Cust = data.user.id_user;

Nama_Cust = data.user.nama_user;

saveDataLogin();

...

<?php

...

$data_lokasi = array();

if(substr($id,0,1) == "D") {

$res = mysql_query("select

depot_makanan.*,kota.nama_kota,provinsi.nama_provinsi

from depot_makanan left join kota on

depot_makanan.id_kota = kota.id_kota left join provinsi on kota.id_provinsi=provinsi.id_provinsi where id_depot='$id'");

(9)

Pada Segmen Program 4.7. dijelaskan proses pengambilan data depot makanan beserta menu depot pada server. Pada bagian awal dilakukan pengecekan apakah Id_depot yang diminta berawalan huruf ‘D’. Setelah itu dilakukan query terhadap tabel depot_makanan, kota, dan provinsi.

Segmen Program 4.8. PHP Signature Menu Makanan (2)

Pada Segmen Program 4.8. diatas, dilakukan proses pengambilan data depot dari database setelah sukses melakukan query. Untuk data menu depot, maka dilakukan query ulang ke tabel menu_depot.

if($dataFood = mysql_fetch_assoc($res)) {

$data_lokasi = array(

"id"=> $dataFood["id_depot"],

"nama"=> $dataFood["nama_depot"],

"jenis"=> "makanan",

"alamat"=> $dataFood["alamat"],

"id_kota"=> $dataFood["id_kota"],

"kota"=> $dataFood["nama_kota"],

"provinsi"=> $dataFood["nama_provinsi"],

"no_telp"=> $dataFood["no_telp"],

"no_hp"=> $dataFood["no_hp"],

"email"=> $dataFood["email"],

"admin"=> $dataFood["admin_depot"],

"lat"=> $dataFood["lat"],

"lng"=> $dataFood["lng"],

"foto"=> $dataFood["foto"],

"keterangan"=> $dataFood["keterangan"],

"delivery_fee"=> $dataFood["delivery_fee"], );

$data_lokasi["menu"] = array();

$resmenu = mysql_query("select * from menu_depot where id_depot='$id' and status='1'");

while($rowmenu = mysql_fetch_assoc($resmenu)) {

$rowmenu["id_menu"] =

$rowmenu["id_menu_depot"];

array_push($data_lokasi["menu"],$rowmenu);

(10)

Segmen Program 4.9. JavaScript Signature Menu Makanan

Pada Segmen Program 4.9. memuat informasi lanjutan dari yang sebelumnya, masih berkaitan dengan signature menu makanan pada depot. Pada text box yang pertama, berisikan penataan posisi menu, dimana nama depot, keterangan depot serta alamat depot berada pada 1 kolom lalu dilanjutkan dengan delivery fee ada pada kolom setelahnya atau tepat di bawahnya. Kemudian text box yang kedua ialah layout komposisi daftar menu dari depot, disertai foto

$("#DeliSignatureMenu").on("pageshow",function(e){

$.mobile.loading( "show" );

$.get(server_address+"get_signature_menu.php",{ "id" : Id_Lokasi },function(data){

$.mobile.loading( "hide" );

Data_Lokasi = data.lokasi;

keterangan = '<b>'+data.lokasi.nama +'</b><br/>';

keterangan += data.lokasi.keterangan + '<br/>';

keterangan += data.lokasi.alamat + '<br/>';

keterangan2 = 'Delivery Fee : Rp. '+

numberWithCommas(data.lokasi.delivery_fee) + ',-';

$("#foto_signature").attr("src",server_address+data.lokasi.foto);

$("#keterangan_signature").html(keterangan);

$("#keterangan_signature2").html(keterangan2);

s = '<ul data-role="listview" data-inset="true">';

for(i=0; i<data.lokasi.menu.length; i++) {

s = s + '<li><a

onclick="takeOrder3(\''+data.lokasi.menu[i].id_menu+'\')"><b>'+

data.lokasi.menu[i].nama_menu+'</b><br/>

<span style="font-weight: normal; font-size: 14px;">'+

data.lokasi.menu[i].komposisi+'

</span><br/><div style="margin-top:10px;">

Rp. '+ numberWithCommas(data.lokasi.menu[i].harga) +' / ' + data.lokasi.menu[i].satuan +'</div></a></li>';

}

s = s + '</ul>';

$("#divDeliMenuDetail").html(s);

$("#divDeliMenuDetail").enhanceWithin();

} ...

(11)

dengan mengambilnya melalui database dan memanggil layout tabel pada file html. Lalu berikutnya adalah looping untuk menampilkan semua menu makanan pada masing-masing depot yang ada, nama menu, komposisi menu tersebut, harga serta satuan (porsi).

4.8. Proses Take Order Makanan

Proses take order makanan ini adalah proses lanjutan dari signature menu, dimana user melakukan transaksi dengan cara memilih menu dari fungsi get_signature_menu.php yang dipanggil oleh JavaScript dan dilanjutkan pada take order. Berikut penjelasannya.

Segmen Program 4.10. PHP Take Order Makanan

Pada Segmen Program 4.10. Server melakukan query pada menu_depot untuk mengambil data detail menu depot yang dikirimkan oleh JavaScript.

...

if(substr($id_lokasi,0,1) == "D") {

$res = mysql_query("select * from menu_depot where id_menu_depot='$id' and status='1'");

if($dataFood = mysql_fetch_assoc($res)) {

$data_menu = $dataFood;

$data_menu["id_menu"]=

$dataFood["id_menu_depot"];

$data = array(

"status" => 1,

"menu" => $data_menu, );

} }

...

(12)

Segmen Program 4.11. JavaScript Take Order Makanan

Pada Segmen Program 4.11 aplikasi melalukan pemanggilan fungsi get_menu.php pada server untuk mendapatkan data detail menu yang telah dipilih pada proses sebelumnya.

...

$("#DeliTakeOrder").on("pageshow",function(e){

$.get(server_address+"get_menu.php",{ "id" : Id_Menu,

"id_lokasi": Id_Lokasi },function(data){

Data_Menu = data.menu;

$("#nama_menu_order").html(data.menu.nama_menu);

$("#harga_order").val(data.menu.harga);

$("#harga_order2").html("Rp.

"+numberWithCommas(data.menu.harga)+" /

"+data.menu.satuan);

$("#jumlah_order").val("1");

$("#jumlah_order2").html("1");

hitungSubtotalOrder();

} ...

(13)

Segmen Program 4.12. PHP Simpan Order Makanan

Pada Segmen Program 4.12 server akan mengambil data pesanan_depot melalui database dan melakukan proses query yang dikirimkan oleh JavaScript.

Segmen Program 4.13 PHP Simpan Order Makanan (2) if(substr($id_lokasi,0,1) == "D")

{

$id_pesanan_depot =

create_autonumber("pesanan_depot","id_pesanan_depot","P D",5);

$id_depot = $id_lokasi;

$jumlah_order = $_GET["jumlah_order"];

$sub_total = $_GET["sub_total"];

$total_kirim = $_GET["total_kirim"];

$tgl_pesanan = date("Y-m-d");

$total_bayar = $_GET["total_bayar"];

$waktu = date("Y-m-d H:i:s");

$supervisor = "";

$status="Waiting";

$query = "insert into pesanan_depot (id_pesanan_depot,id_depot,tgl_pesanan,keterangan,supervi sor,sub_total,total_kirim,total_bayar,id_cust,waktu,status) values('$id_pesanan_depot','$id_depot','$tgl_pesanan','$keter angan','$supervisor','$sub_total','$total_kirim','$total_bayar','

$id_cust','$waktu','$status')";

mysql_query($query);

...

for($i=0; $i<$jumlah_order; $i++) {

$id_menu_depot = $_GET["id_menu_".$i]; $qty =

$_GET["qty_".$i]; $harga = $_GET["harga_".$i];

$total_harga = $_GET["total_harga_".$i];

$query = "insert into pesanan_depot_dtl (id_pesanan_depot,id_menu_depot,qty,harga,total_harga) values

('$id_pesanan_depot','$id_menu_depot','$qty','$harga','$total _harga')";

mysql_query($query); } ....

(14)

Pada Segmen Program 4.13. masih merupakan proses simpan order makanan, dimana server melakukan looping jumlah order yang di dalam proses tersebut akan menambahkan menu, jumlah, harga dan total harga.

Segmen Program 4.14 JavaScript Simpan Order

Pada Segmen Program 4.14 Fungsi ini dipakai untuk menyimpan order atau pesanan dari user ke database, kemudian JavaScript akan memanggil fungsi simpan_order.php yang ada pada server.

4.9. Proses Tracking Map Food dan Laundry

Proses ini adalah proses yang intinya adalah mengarah ke take order, namun hal menariknya adalah disertai dengan peta, dimana user dapat menekan icon food ataupun laundry pada map yang tersedia, dan selanjutnya diarahkan pada take order. Segmen program tracking akan dijelaskan sebagai berikut.

saveOrder = function(){

var subtotal = 0;

var total = 0;

var delivery = 0;

var keterangan = $("#komentar_summary").val();

var url = server_address+"simpan_order.php";

url = url + "?id_cust="+Id_Cust;

url = url + "&id_lokasi="+Id_Lokasi;

url = url +

"&jumlah_order="+Menu_Order.length.toStr ing();

for(i=0; i<Menu_Order.length; i++){

url = url +"&id_menu_"+i.toString()+"="

+Menu_Order[i].id_menu.toString();

url = url +

"&qty_"+i.toString()+"="+Menu_Order[i].ju mlah_order.toString();

url = url +

"&harga_"+i.toString()+"="+Menu_Order[i].

subtotal_order.toString();

url = url +

"&total_harga_"+i.toString()+"="+Menu_Or der[i].harga.toString();

subtotal = subtotal +

(15)

Segmen Program 4.15. PHP Tracking Food dan Laundry

Pada Segmen Program 4.15. menjelaskan letak posisi latitude dan longitude pada map, dimana posisi lat dan lng tersebut ada pada area Universitas Kristen Petra sebagai tracking center point area di Siwalankerto. Kemudian map membutuhkan data dari database, di antaranya ialah depot makanan, kota serta provinsi.

$callback = "fungsi";

$lat=-7.3388804;

$lng= 112.736603;

if(isset($_GET["lat"])) {

$lat = $_GET["lat"];

}

if(isset($_GET["lng"])) {

$lng = $_GET["lng"];

}

$data_map = array();

$res = mysql_query("select

depot_makanan.*,kota.nama_kota,provinsi.nama_provin si from depot_makanan left join kota on depot_makanan.id_kota=kota.id_kota

left join provinsi on

kota.id_provinsi=provinsi.id_provinsi");

(16)

Segmen Program 4.16. PHP Tracking Food dan Laundry (2)

Pada Segmen Program 4.16 dijelaskan sedang membuat fungsi data_food yang diperoleh dari hasil query pada tabel depot_makanan milik database yang memenuhi kebutuhan data depot makanan pada map dan file Javascript.

Segmen Program 4.17 PHP Tracking Food dan Laundry (3) while($dataFood = mysql_fetch_assoc($res))

{

array_push($data_map, array(

"id"=> $dataFood["id_depot"],

"nama"=> $dataFood["nama_depot"],

"jenis"=> "makanan",

"alamat"=> $dataFood["alamat"],

"kota"=> $dataFood["nama_kota"],

"provinsi"=> $dataFood["nama_provinsi"],

"no_telp"=> $dataFood["no_telp"],

"no_hp"=> $dataFood["no_hp"],

"email"=> $dataFood["email"],

"admin"=> $dataFood["admin_depot"],

"lat"=> $dataFood["lat"],

"lng"=> $dataFood["lng"],

"foto"=> $dataFood["foto"],

"keterangan"=> $dataFood["keterangan"],

"delivery_fee"=> $dataFood["delivery_fee"], ));

} ...

...

$data_food = array();

$res = mysql_query("select * from depot_makanan ");

while($dataFood =

mysql_fetch_assoc($res)) {

array_push($data_food, $dataFood);

}

$data = array(

"status" => $status,

"food" => $data_food );

...

(17)

Pada Segmen Program 4.17, merupakan detail data yang diperlukan oleh map untuk menampilkan depot makan ataupun laundry pada database. Fungsi yang digunakan JavaScript, yang dijelaskan pada segmen program selanjutnya.

Segmen Program 4.18. JavaScript Tracking Food dan Laundry

Pada Segmen Program 4.18. diatas, menjelaskan bahwa JavaScript pada tracking food dan laundry memanggil fungsi map pada php di segmen program sebelumnya dan fungsi get_food. Kemudian mengatur button take order onclick yang akan diarahkan pada halaman take order makanan atau laundry.

...

$("#DeliTrackingFoodLaundry").on("pageshow",function(e){

Menu_Order = [];

$("#info_depot").hide();

initMap();

});

$("#DeliFood").on("pageshow",function(e){

//load data food

$.get(server_address+"get_food.php",function(data){

food = data.food;

s = '<ul data-role="listview" data- inset="true">';

for(i=0; i<food.length; i++){

s = s + '<li><a

onclick="takeOrder2(\''+food[i].id_depot+'\')">' +

food[i].nama_depot+'</a></li>';

}

s = s + '</ul>';

$("#div_deli_food").html(s);

$("#div_deli_food").enhanceWithin();

} ...

(18)

Segmen Program 4.19 JavaScript menampilkan Map

Pada Segmen Program 4.19. terdapat proses untuk menampilkan map pada halaman tracking map food dan laundry. Map ini dibatasi dengan latitude dan longitude yang merupakan tata letak dan posisi yang ingin dilacak.

4.10. Proses Recent Order

Proses Recent Order pada aplikasi ini adalah memuat seluruh transaksi user pada saat menggunakan aplikasi, baik pemesanan makanan ataupun laundry dihari dan jam pada saat itu. Berikut segmen program recent order akan dijabarkan pada text box Segmen Program 4.20.

var listMarker = new Array();

var infoWindow = null;

var isiInfo = new Array();

var dataMap = new Array();

var depotDiklik = -1;

var map;

initMap=function() {

infoWindow = new google.maps.InfoWindow({

maxWidth: 150, });

var myStyles =[

{

featureType: "poi", elementType:"labels", stylers: [

{ visibility: "off" } ] }

];

map = new

google.maps.Map(document.getElementById('map' ), {

center: {lat: -7.3388804, lng: 112.736603}, zoom: 16,

styles: myStyles });

(19)

Segmen Program 4.20. PHP Recent Order

Pada Segmen Program 4.20, memuat fungsi yang pengambilan data view pesanan customer pada tabel database dimana id customer, waktu, tanggal pesanan juga ikut disertakan supaya data yang dibutuhkan recent order terpenuhi.

Fungsi ini dapat dipanggil oleh file Javascript yang akan dijabarkan pada text box Segmen Program 4.21 di bawah ini.

...

$data_recent = array();

$res = mysql_query("select * from view_pesanan_cust where id_cust='$id_cust' order by waktu desc");

while($dataOrder = mysql_fetch_assoc($res)) {

$tgl = explode("-", $dataOrder["tgl_pesanan"]);

$dataOrder["tgl_pesanan2"] = $tgl[2]."-".$tgl[1]."-

".$tgl[0];

$dataOrder["jam"]= substr($dataOrder["waktu"],11);

array_push($data_recent,$dataOrder);

}

$data = array(

"status" => 1,

"recent_order" => $data_recent, );

(20)

Segmen Program 4.21. JavaScript Recent Order

Pada Segmen Program 4.21. dijelaskan jika recent order looping pesanan yang dilakukan oleh user, dengan tujuan agar seluruh pesanan user dapat dimunculkan pada halaman ini serta memanggil fungsi pada server yaitu recent order php beserta foto depot. Setelah itu dilakukan pengecekan status pesanan dalam proses, sedang menunggu atau telah dikirim.

4.11. Proses Best Seller Food (Favourites)

Proses Best Seller Food adalah proses beberapa depot dan laundry yang paling banyak dipesan oleh user, dan depot atau laundry yang beruntung paling banyak pemesannya akan muncul pada aplikasi dengan rata-rata bintang 3 , 4 dan

$("#DeliRecentOrder").on("pageshow",function(e){

$.get(server_address+"get_recent_order.php",{ "id_cust"

: Id_Cust },function(data){

s = '<ul data-role="listview" data-inset="true">';

for(i=0; i<data.recent_order.length; i++){

s = s + '<li >';

s = s + '<a

onclick="detailRecent(\''+data.recent_order[i].id_

pesanan+'\')">';

s = s + '<div>';

s = s + '<div style="float:left; width: 20%"><img src="'+server_address+data.recent_order[i].foto+'

" style="width:100%;" /></div>';

if(data.recent_order[i].status == "Delivered") {

s = s + '<div style="float: left; width: 70%;

margin-left: 3%; color: #ff0000">';

}

else {

s = s + '<div style="float: left; width: 70%;

margin-left: 3%; color: #666666">';

}

(21)

5 sebagai depot atau laundry terbaik dalam penjualannya. Untuk detail pada Segmen Program 4.22 dapat dilihat pada text box di bawah ini.

Segmen Program 4.22. PHP Best Seller Food

Pada Segmen Program 4.22 adalah pengecekan pada kondisi list angka depot dengan jumlah makanan yang dipesan pada data depot jika pesanan paling terbanyak depot tersebut, akan mendapatkan bintang 5 penuh dan bisa masuk pada menu best seller food namun jika terbanyak dibawah, terpaut 1 angka ataupun sama akan disamakan jumlah bintangnya dan yang paling sedikit tidak mendapatkan bintang atau tidak dapat masuk pada best seller.

...

If(count($list_angka_depot) == 0) {

$data["depot"][$i]["bintang"] = 5-$n;

array_push($list_angka_depot,$data["depot"][$i]["ju mlah_pesanan"]);

$n++;

}

else {

$ada = false;

if($list_angka_depot[count($list_angka

_depot)-1] ==

$data["depot"][$i]["jumlah_pesanan"]) {

} else {

array_push($list_angka_depot,$data ["depot"][$i]["jumlah_pesanan"]);

$n++;

} }

...

(22)

Segmen Program 4.23 JavaScript Best Seller Depot

Pada Segmen Program 4.23 proses mengambil data depot serta bintang sesuai fungsi yang dipanggil pada lembar kerja php di segmen program sebelumnya. Kemudian diarahkan pada halaman html untuk pengaturan layoutnya.

4.12. Proses Recommended Depot (Favourites)

Proses Recommended adalah proses rekomendasi untuk menampilkan depot atau laundry pada halaman ini, bisa disebut semacam promosi namun tidak ada catatan khusus atau syarat yang ada. Hanya saja sistem yang bekerja, rekomendasi ini dihasilkan atas kebijakan yang diatur oleh admin pada aplikasi.

Segmen Program 4.24 PHP Recommended Depot ...

fav1 = '<table>';

for(i=0; i<data.depot.length; i++) {

fav1 = fav1 + '<tr>';

fav1 = fav1 + '<td><a

onclick="takeOrder2(\''+data.depot[i].id_depot+'\')

"><b>'+data.depot[i].nama_depot+'</b></a></td>;

fav1 = fav1 + '<td><img height="30"

src="images/DELio/'+data.depot[i].bintang+'star.p ng"/></td>';

fav1 = fav1 + '</tr>';

}

fav1 = fav1 + '</table>';

$("#favorit_depot_div").html(fav1);

...

$data["depot"] = array();

$res = mysql_query("select * from depot_makanan where id_depot in (select id_depot from promosi where id_depot is not null) ");

while($dataFood = mysql_fetch_assoc($res)) {

array_push($data["depot"],$dataFood);

} ...

(23)

Pada Segmen Program 4.24 membuat fungsi rekomendasi yang mengambil data depot dan id_depot yang ada pada tabel promosi melalui database.

Segmen Program 4.25. JavaScript Recommended Depot

Pada Segmen Program 4.25, JavaScript memanggil file recommended pada php, agar fungsi dari server bisa dijalankan serta memberikan akses dengan onclick pada depot atau laundry yang tersedia untuk dapat melakukan pemesanan dan ditambah icon untuk recommendednya.

4.13. Proses Bill’s Number

Proses Bill’s Number ini adalah pemberian nomor nota bagi user ketika selesai bertransaksi pada aplikasi ini, nomor nota berguna untuk mengecek detail pesanan, estimasi waktu, status pesanan, dan lain sebagainya. Untuk lebih jelasnya dapat dilihat pada Segmen Program 4.26 di bawah ini.

...

$.get(server_address+"get_recommended.php",function(data) {

fav1 = '<table>';

for(i=0; i<data.depot.length; i++) {

fav1 = fav1 + '<tr>';

fav1 = fav1 + '<td width="50%"><a onclick="takeOrder2(\''+data.depot[i].id_depot +'\')"><b>'+data.depot[i].nama_depot+'</b></a

></td>';

fav1 = fav1 + '<td><img src="images/DELio/icon/icon6.png"

width="20%" /></td>';

fav1 = fav1 + '</tr>';

}

fav1 = fav1 + '</table>';

$("#recommended_depot_div").html(fav1);

...

(24)

Segmen Program 4.26. PHP Bill’s Number

Pada Segmen Program 4.26, inisialisasi untuk id_depot makanan adalah

‘DBN’ karena menyesuaikan data yang sudah diinputkan pada database.

Kemudian seperti proses sebelumnya, mengambil data dari database sesuai kebutuhan bill’s number.

if(substr($no_nota,0,3) == "DBN") if($dataFood = mysql_fetch_assoc($res))

{

$id_pesanan =

$dataFood["id_pesanan_depot"];

$data_recent = $dataFood;

$data_recent["jenis"] = "depot";

$data_recent["detail"] = array();

$resmenu = mysql_query("select a.*,b.nama_menu,b.satuan

from pesanan_depot_dtl a left join

menu_depot b on

a.id_menu_depot=b.id_menu_depot where id_pesanan_depot='$id_pesanan' and status='1'");

while($rowmenu =

mysql_fetch_assoc($resmenu)) {

$rowmenu["id_menu"] =

$rowmenu["id_menu_depot"];

array_push($data_recent["detail"

],$rowmenu);

} ...

(25)

Segmen Program 4.27. PHP Bill’s Number (2)

Pada Segmen Program 4.27 dijelaskan mengenai fungsi tracking status yang akan terupdate jika telah mendapat respon admin.

Segmen Program 4.28. JavaScript Bill’s Number

Pada Segmen Program 4.28. file JavaScript pada bill’s number mengambil data untuk dimasukkan ke dalam data yang diperlukan, yaitu data bill’s number,

$data_recent["tracking"] = array();

$restrack = mysql_query("select * from

tracking_status where

id_pesanan_depot='$id_pesanan'");

while($rowtrack =

mysql_fetch_assoc($restrack)) {

array_push($data_recent["tracking"],$rowtrack);

}

$data = array(

"status" => 1,

"bill_number" =>$data_recent, );

...

if(data_bills_number.jenis == "depot"){

$("#bill_estimasi_customer").html(data_bills_number.

estimasi + ' menit');

} else{

$("#bill_estimasi_customer").html(data_bills_

number.estimasi + ' hari');

}

$("#bill_status_customer").html(data_b ills_number.status);

$("#bill_totalharga_customer").html(da ta_bills_number.total_bayar);

$("#bill_ongkoskirim_customer").html(

data_bills_number.total_kirim);

$("#bill_namakurir_customer").html(da ta_bills_number.nama_kurir);

...

(26)

estimasi dalam hitungan menit atau hari tergantung depot atau laundry, status user yang diupdate oleh admin (waiting, on process, delivered), total harga, ongkos kirim serta nama kurir yang mengantarkan pesanan.

4.14. Proses Master Add Depot Makanan

Proses master add depot makanan ialah proses yang hanya dimiliki oleh admin delivery order untuk menambahkan depot makanan dan menu makanannya. Selengkapnya ada Segmen Program 4.29 untuk penjelasannya.

Segmen Program 4.29. PHP Master Add Depot Makanan

Pada Segmen Program 4.29. di atas, data sedang mengumpulkan nilai dari masing-masing komposisi mulai dari nama_depot hingga foto. Dengan tujuan segera dikirim ke server serta dapat dipanggil sebagai fungsi pada file javascript.

Pada bagian ini admin juga menambahkan depot makanan dengan cara mengisi data seputar depot makanan.

$data = array("status" => 0);

$nama_depot = $_POST["nama_depot"];

$keterangan = $_POST["keterangan"];

$alamat = $_POST["alamat"];

$id_kota = $_POST["id_kota"];

$email = $_POST["email"];

$admin_depot = $_POST["admin_depot"];

$password = md5($_POST["password"]);

$no_hp = $_POST["no_hp"];

$delivery_fee = $_POST["delivery_fee"];

$lat = $_POST["lat"];

$lng = $_POST["lng"];

$foto = "images/depot_makanan/nophoto.png";

...

(27)

Segmen Program 4.30. PHP Master Add Depot Makanan (2)

Pada Segmen Program 4.30. admin membuat depot makanan pada database secara otomatis akan bertambah nilainya dengan menggunakan perintah autonumber, jika terjadi penambahan row pada tabel depot makanan tersebut, dan tidak perlu untuk memasukkan nilai secara manual pada tiap field yang ditambahkan.

Pada Segmen Program 4.31. di atas, menunjukkan bagian-bagian dari menu depot makanan yang akan ditambahkan oleh admin dan sama seperti perintah pada segmen sebelumnya, untuk mengambil nilai dari masing-masing menu depot makanan untuk dikirim pada server.

$id_depot =

create_autonumber("depot_makanan","id_depot","D",5);

$query = "insert into depot_makanan (id_depot,nama_depot,keterangan,delivery_fee,alamat,id_

kota,email,admin_depot,password,no_hp,lat,lng,foto) values

('$id_depot','$nama_depot','$keterangan','$delivery_fee','$

alamat','$id_kota','$email','$admin_depot','$password','$no _hp','$lat','$lng','$foto')";

$id_jenis_menu = "JM002";

$id_depot = $_POST["id_depot"];

$nama_menu = $_POST["nama_menu"];

$komposisi = $_POST["komposisi"];

$harga = $_POST["harga"];

$satuan = $_POST["satuan"];

...

(28)

Pada Segmen Program 4.32. admin membuat menu depot ini ketika ditambahkan akan secara otomatis bertambah pada data menu depot di database, tanpa memberikan nilai untuk tiap field yang dimasukkan.

Segmen Program 4.33 JavaScript Master Add Depot Makanan

Pada Segmen Program 4.33 menunjukkan fungsi yang dipanggil dari php, kemudian dipersiapkan agar admin dapat mengisi tiap kolomnya mulai dari nama_depot dan diakhiri dengan lng. Setelah semua tabel terisi dan admin melakukan save depot maka data akan secara otomatis masuk ke database.

$id_menu_depot=

create_autonumber("menu_depot","id_menu_depot","DA",5);

$query = "insert into menu_depot (id_menu_depot,id_depot,nama_menu,keterangan,i d_jenis_menu,komposisi,harga,satuan,status) values('$id_menu_depot','$id_depot','$nama_menu' ,'$keterangan','$id_jenis_menu','$komposisi','$harg a','$satuan','1')";

...

addDepot = function(){

if(confirm("Save depot ?")) {

$.post(server_address+"simpan_add_depot.php",{

nama_depot : $("#add_nama_depot").val(), keterangan : $("#add_keterangan_depot").val(), alamat : $("#add_alamat_depot").val(),

id_kota : $("#add_kota_depot").val(), email : $("#add_email_depot").val(),

admin_depot : $("#add_admin_depot").val(), password : $("#add_password_depot").val(), no_hp : $("#add_no_hp_depot").val(),

delivery_fee : $("#add_delivery_fee_depot").val(), lat : $("#add_lat_depot").val(),

lng : $("#add_lng_depot").val(),

(29)

Segmen Program 4.34 JavaScript Add Menu Depot Makanan (2)

Pada Segmen Program 4.34. menjelaskan penambahan menu makanan pada depot dengan mengisi tiap kolom yang tersedia mulai nama_menu hingga satuannya. Penyimpanan akan secara otomatis masuk pada database melalui fungsi pada php yang telah dijelaskan pada segmen program sebelumnya.

4.15. Proses Master Edit Depot Makanan

Proses master edit depot makanan adalah proses yang mana hanya admin yang boleh melakukan edit pada depot makanan ataupun edit menu sesuai dengan kebutuhan dan update dengan tujuan memperbarui informasi yang sebelumnya.

Berikut akan dijelaskan Segmen Program 4.35 dari master edit depot makanan.

Segmen program 4.35. PHP Master Edit Depot Makanan

if(confirm("Save menu depot ?")) {

$.post(server_address+"simpan_add_menu_depot.php"

,{

id_depot : Id_Lokasi,

nama_menu : $("#add_nama_menu_depot").val(), keterangan : $("#add_keterangan_menu_depot").val(), komposisi : $("#add_komposisi_menu_depot").val(), harga : $("#add_harga_menu_depot").val(),

satuan : $("#add_satuan_menu_depot").val(), ...

$nama_depot = $_POST["nama_depot"];

$alamat = $_POST["alamat"];

$id_kota = $_POST["id_kota"];

$email = $_POST["email"];

$admin_depot = $_POST["admin_depot"];

$no_hp = $_POST["no_hp"];

$delivery_fee = $_POST["delivery_fee"];

$lat = $_POST["lat"];

$lng = $_POST["lng"];

$foto = "images/depot_makanan/nophoto.png";

(30)

Pada Segmen Program 4.35. di atas adalah detail dari depot yang akan di edit oleh admin yang kemudian nilainya akan dikirim kepada server dan otomatis akan ditambahkan pada database.

Segmen Program 4.36. PHP Master Edit Depot Makanan (2)

Pada Segmen Program 4.36. menginformasikan bahwa depot makanan setelah dilakukan proses edit oleh admin maka sistem akan memperbarui data yang sudah ada pada database sesuai perubahan yang ditambahkan atau dikurangkan.

Pada Segmen Program 4.37 menjelaskan bagian dari menu depot yang akan diedit oleh admin, sama seperti proses sebelumnya bahwa ketika fungsi ini dijalankan maka setiap perubahan yang terjadi akan dikirim kepada server dan database akan secara otomatis terupdate.

$query = "update depot_makanan set

nama_depot='$nama_depot',

keterangan='$keterangan',delivery_fee='$delivery_fee', alamat='$alamat',id_kota='$id_kota',email='$email', admin_depot='$admin_depot',

no_hp='$no_hp',lat='$lat',lng='$lng',foto='$foto' where id_depot='$id_depot'";

...

$id_menu_depot = $_POST["id_menu"];

$id_jenis_menu = "JM002";

$nama_menu = $_POST["nama_menu"];

$komposisi = $_POST["komposisi"];

$harga = $_POST["harga"];

$satuan = $_POST["satuan"];

(31)

Pada Segmen Program 4.38 dijelaskan bahwa sistem query mulai bekerja untuk mengupdate data menu_depot pada database dengan beberapa detail dari menu depot yang telah berhasil di edit.

Segmen Program 4.39. Javascript Master Edit Depot Makanan

Pada Segmen Program 4.39 admin melakukan edit pada menu depot dengan saat bersamaan fungsi dari php mulai diimplementasikan hingga admin selesai melakukan edit dan mengklik save menu depot. Maka fungsi akan melanjutkan untuk update data pada database.

4.16. Proses Master Delete Depot Makanan

Proses master delete depot makanan ialah proses menghapus depot makanan atau menu makanan yang sebelumnya telah tersedia pada database.

$query = "update menu_depot set

nama_menu='$nama_menu',keteranga n='$keterangan',

komposisi='$komposisi',harga='$harg a',satuan='$satuan'

where

id_menu_depot='$id_menu_depot'";

editMenuDepot = function(){

if(confirm("Save menu depot ?")) {

$.post(server_address+"simpan_edit_menu_dep ot.php",{

id_depot : Id_Lokasi, id_menu : Id_Menu,

nama_menu :

$("#edit_nama_menu_depot").val(),

keterangan :

$("#edit_keterangan_menu_depot").val(),

komposisi :

$("#edit_komposisi_menu_depot").val(), harga : $("#edit_harga_menu_depot").val(), satuan : $("#edit_satuan_menu_depot").val(), ...

(32)

Berikut akan ditunjukkan Segmen Program 4.40 proses master delete dari depot makanan.

Segmen Program 4.40. PHP Master Delete Depot Makanan

Pada Segmen Program 4.40 dapat diperhatikan, langkah pertama adalah memilih letak atau posisi tabel pesanan_depot pada database untuk dipersiapkan.

Kemudian proses berikutnya adalah delete akan terjadi pada menu depot melalui id depot. Hal yang sama juga terjadi ketika admin menghapus depot makanan.

Segmen Program 4.41 JavaScript Master Delete Depot Makanan ...

$query = "select * from pesanan_depot_dtl where id_menu_depot in (select id_menu_depot from menu_depot where id_depot='$id_depot')";

$query = "delete from menu_depot where id_depot='$id_depot'";

$query = "delete from depot_makanan where id_depot='$id_depot'";

...

deleteMenuDepot = function(Id_menu_depot){

if(confirm("Delete menu depot ?")) {

$.post(server_address+"hapus_menu_depot.php",{

id_menu_depot: Id_menu_depot, },function(data){

if(data.status == 1) {

alert("Menu depot berhasil dihapus");

}

else {

alert("Menu Depot tidak dapat dihapus ");

}

refreshSignatureMenuDepot();

...

(33)

Pada Segmen Program 4.41, menunjukkan bahwa proses delete yang dipanggil dari php mulai dijalankan dan jika sistem menerima konfirmasi delete menu depot dari admin maka proses hapus menu depot berhasil dan signature menu depot akan otomatis akan memperbarui datanya.

4.17. Proses Push Notification

Proses Push Notification ialah proses pemberitahuan atau notifikasi berbasis mobile yang di support oleh teknologi Google Cloud Messaging. Berikut source code yang digunakan akan dijelaskan pada Segmen Program 4.42

Segmen Program 4.42. PHP Proses Push Notification

Pada Segmen Program 4.42 terdapat fungsi penggunaan Google Cloud Messaging yang akan dibutuhkan sebagai push notifikasi.

4.18. Proses Sign Out

Proses Sign Out adalah proses disaat user keluar dari aplikasi dan menutup transaksinya pada saat itu, dikatakan account milik user tersebut telah keluar dari aplikasi ialah pada saat menekan icon sign out, jika keluar aplikasi selain dengan menekan icon tersebut maka belum secara resmi meninggalkan aplikasi.

Berikutnya dijelaskan pada Segmen Program 4.43 dari proses sign out.

function send_message($gcmid,$message) {

$gcm = new GCM();

$registatoin_ids = array($gcmid);

$result = $gcm-

>send_notification($registatoin_ids,

$message);

echo $result;

}

(34)

Segmen Program 4.43. JavaScript Proses Sign Out

Pada Segmen Program 4.43, memuat fungsi log out yang dijalankan ketika user menekan icon sign out maka yang terjadi pada sistem adalah local storage menghapus id_customer dan nama customer.

Logout = function(){

if (localStorage.getItem("Id_Cust") ===

null) { } else {

localStorage.removeItem("Id_Cust");

localStorage.removeItem("Nama_Cust");

}