4. implementasi sistem

35 Universitas Kristen Petra

4. IMPLEMENTASI SISTEM

Pada bab ini dibahas tentang implementasi sistem sesuai dengan analisis dan desain

sistem. Implementasi sistem meliputi pengaturan database MySQL dan implementasi

aplikasi.

4.1 Implementasi Aplikasi

4.1.1 Software

Pada bagian ini, akan dijelaskan software yang digunakan dalam pembuatan

skripsi ini. berikut software yang digunakan :

Notepad++ v7.1 : digunakan untuk membuat file HTML, PHP, Javascript, dan

pembuatan script program.

Google Chrome Version 54.0.2840.99m : digunakan untuk menampilkan dan

menjalankan aplikasi

Mozilla Firefox Version 50.0: digunakan untuk menampilkan dan menjalankan

aplikasi

XAMPP version 2.5: 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.3.5 : digunakan untuk menampilkan dan menjalankan

aplikasi pada handphone.

MySQL 5.5 : digunakan untuk menyimpan database

Android Studio 1.0 : digunakan untuk compile menjadi .apk Android

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.

http://www.petra.ac.id

http://dewey.petra.ac.id/dgt_directory.php?display=classification

http://digilib.petra.ac.id/help.html


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 aplikasi wedding planner 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

N

o Keterangan Segmen

Flowchart

1 Register 4.1, 4.2, 4.3, 4.4 Gambar 3.3

3

2 Login 4.5

Gambar 3.6

3 Chat 4.6, 4.7, 4.8, 4.9, 4.10 Gambar 3.9

4 Request Event 4.11, 4.12 Gambar 3.11

5 Search Vendor 4.13, 4.14 Gambar 3.8

6 Detail Event 4.15, 4.16 Gambar 3.12

7 To Do List 4.17, 4.18 Gambar 3.13

8 Profile EO 4.19, 4.20 Gambar 3.16

9 Edit Profile 4.21, 4.22, 4.23, 4.24 Gambar 3.17


4.4 Implementasi pada Interface

Desain interface yang digunakan dibedakan menurut jenis status username

pada saat sign in (user, EO, vendor). Disetiap username yang sign in terdapat menu

yang berbeda-beda, berikut dijelaskan pada Tabel 4.2. Semua menu tersedia dan

dibuat pada Index.HTML.

Tabel 4.2. Tabel Menu

Status Pengguna Tabel Menu

Klien Login

View Event

Request Event

View Profile EO

Search Vendor

Chat

Log Out


EO Sign in

Edit Profile EO

Chat

View Event_EO

Detail Event(approve,pending,decline)

To Do List(View to do list,Choose Vendor)

Sign Out


Vendor Sign In

Edit Profile Vendor

Chat

Sign Out


$("#buttonDaftar").click(function()

{

daftar();

});

4.5 Proses Registrasi Klien

Registrasi atau pendaftaran harus dilakukan apabila ingin menggunakan

aplikasi wedding planner. Dengan memiliki account pada aplikasi ini, user/klien

dapat mengakses fitur-fitur yang ada pada aplikasi wedding planner. Pada saat

registrasi awal, user/klien diminta untuk memasukkan data pribadi sebagai keperluan

pendataan sistem, sebagai berikut dapat diperhatikan pada Segmen Program 4.1.

Segmen 4.1 JavaScript Register

Segmen Program 4.1 menunjukkan bagian data yang perlu untuk dilengkapi

oleh Klien pada saat masuk ke halaman Register.

Segmen 4.2 JavaScript Register (2)

Pada Segmen Program 4.2 menunjukkan bagian Register pada javascript

memanggil fungsi Register.

Segmen 4.3 JavaScript Register Klien (3)

function daftar()

{

if (inputvalid())

function inputvalid()

{

var password=$("#inputpassword").val();

var password2=$("#inputpassword2").val();

var email=$("#inputemail").val();

var alamat=$("#inputalamat").val();

var nama=$("#inputnama").val();

var telepon=$("#inputtelepon").val();

…


{

var email=$("#inputemail").val();

var password=$("#inputpassword").val();

var alamat=$("#inputalamat").val();

var nama=$("#inputnama").val();

var telpon=$("#inputtelepon").val();

$.ajax({

url: server+"register_klien.php",

type: 'GET',

data:{email:email,

password:password,

alamat:alamat,

nama:nama,

telpon:telpon},

dataType:'json',

success: function(retVal) {

if (retVal.hasil=="ok")

{

alert("Register klien berhasl dilakukan");

window.location="index.html";

}

else if (retVal.hasil=="kembar")

{

$("#warningAll").show();

$("#containerWarning").html("Email yang anda masukkan sudah

digunakan");

}

else {

alert("Register gagal dilakukan");

}

},


error: function(e) {

}

});

console.log("finish");

Pada Segmen Program 4.3 menunjukkan bagian lanjutan Register pada

javascript memanggil fungsi Register pada lembar kerja PHP.

Segmen 4.4 PHP Register

Pada Segmen Program 4.4, berisi fungsi sign up pada server, dimana data

yang dikirimkan oleh JavaScript, diambil dan dilakukan insert data user ke dalam

database.

4.6 Proses Login

Fungsi ini membutuhkan alamat email dan password dari pengguna yang

sudah terdaftar. Email dan password yang diisi oleh pengguna akan disesuaikan

dengan email dan password yang ada di database. Jika sesuai maka penggguna

<?php

header('Access-Control-Allow-Origin: *');

include "conn_db.php";

$email=mysqli_real_escape_string($db,$_GET["email"]);

$password=mysqli_real_escape_string($db,$_GET["password"]);

$nama=mysqli_real_escape_string($db,$_GET["nama"]);

$alamat=mysqli_real_escape_string($db,$_GET["alamat"]);

$telpon=mysqli_real_escape_string($db,$_GET["telpon"]);

$result["hasil"]="ok";

$q="SELECT * FROM user WHERE email='$email'";

$res=mysqli_query($db,$q);

if ($row=mysqli_fetch_assoc($res))

{

$result["hasil"]="kembar";

}

else {

$q="INSERT INTO user (nama,alamat,telpon,email,tipe,password)".

"VALUES('$nama','$alamat','$telpon','$email','klien','$passw

ord')";

?>


berhasil login dan jika tidak sesuai maka akan muncul alert yang menampilkan

ketidaksesuaian email dan password.

Segmen 4.5 Fungsi Login

$(document).ready(function(){

$("#buttonLogin").click(function()

{

$.ajax({

url: server+"login.php",

type: 'GET',

data: { email:email,password:password},

dataType:'json',

success: function(data) {

if (data.login_ok)

{

localStorage.setItem("user",

JSON.stringify(data.user));

console.log(data.user);

if (data.user.tipe=="klien")

{

window.location="home.html";

}

else if (data.user.tipe=="eo")

{

window.location="home_eo.html";

}

else

{

alert("Username dan password yang anda masukkan

salah");

}


4.7 Proses Chat

Fungsi ini dapat dilakukan bila klien, vendor, ataupun EO mempunyai data

atau contact dari salah satu user yang ada. Fitur ini akan di refresh beberapa detik

sekali agar dapat melihat pesan yang terkirim dan yang diterima.

Segmen 4.6 Fungsi Send Chat

var user=null;

function sendchat()

{

if (user!=null)

{

var chat=$("#textchat").val();

$.ajax({

url: server+"send_chat.php",

type: 'GET',

data:{chat:chat,id:user.Id_user},

dataType:'json',


$("#textchat").val("");

},


Pada Segmen Program 4.6 berisi fungsi Javascript send chat yang akan

mengirimkan pesan dari pihak pengirim ke penerima pesan.

Segmen 4.7 PHP Send Chat

<?php



$chat=mysqli_real_escape_string($db,$_GET["chat"]);

$id=mysqli_real_escape_string($db,$_GET["id"]);

$q="INSERT INTO chat (C_From,C_To,Isi_Chat,Tanggal,R_Flag) ".


"VALUES ($id,-1,'$chat',SYSDATE(),'u')";

mysqli_query($db,$q);

$hasil["hasil"]="sukses";

echo json_encode($hasil);

?>

Pada Segmen Program 4.7 berisi fungsi PHP send chat yang akan

dimasukkan ke dalam table chat.

Segmen 4.8 Fungsi Get Chat

var chatSebelum=new Array();

function getchat()

{

if (user!=null)

{

$.ajax({

url: server+"get_chat.php",

type: 'GET',

data:{id:user.Id_user},

dataType:'json',


if (retVal.length!=chatSebelum.length)

{

var chtml="";

for (var i=0;i<retVal.length;i++)

{

var detail=retVal[i];

var uhtml="";

if (detail.C_From=="-1")

{

uhtml=$("#chat1").html();

uhtml=uhtml.replace("xWaktu",detail.keterangan);


uhtml=uhtml.replace("xChat",detail.Isi_Chat);

}

else {

uhtml=$("#chat2").html();

uhtml=uhtml.replace("xWaktu",detail.keterangan);

uhtml=uhtml.replace("xChat",detail.Isi_Chat);

}

chtml=chtml+uhtml;

}

$("#ct").html(chtml);

var d = $('#pbody');

d.animate({ scrollTop: d.prop('scrollHeight') },

1000);

$("#ct").scrollTop($("#ct")[0].scrollHeight);

chatSebelum=retVal;

}

Pada Segmen Program 4.8 berisi fungsi Javascript get chat yang akan

menerima pesan dari pengirim pesan dilihat berdasarkan waktu penerimaan pesan.

Segmen 4.9 Javascript Get Chat(2)

$(document).ready(function()

{

user=JSON.parse(localStorage.getItem("user"));

setInterval(function() {

getchat();

}, 1000);

});

Pada Segmen Program 4.9 menunjukkan bagian pada fungsi chat pada

javascript memanggil fungsi get_chat .

Segmen 4.10 PHP Get Chat


<?php



$dataChat=array();


$q="SELECT c.*,DATE_FORMAT(c.Tanggal,'%d-%M-%Y %h:%i:%s')

as k_tgl,TIME_TO_SEC(TIMEDIFF(SYSDATE(),c.Tanggal)) as diff_t ".

"FROM chat c "."WHERE c.C_From=$id OR c.C_To=$id ".

"ORDER BY c.Tanggal ASC";


while ($row=mysqli_fetch_assoc($res))

{

$keterangan="";

if ($row["diff_t"]<3600)

{

$minute=round($row["diff_t"]/60);

$keterangan=$minute." menit yang lalu";

}

else if ($row["diff_t"]>=3600 && $row["diff_t"]<=86400)

{

$minute=round($row["diff_t"]/3600);

$keterangan=$minute." jam yang lalu";

}

else {

$keterangan=$row["k_tgl"];

}

$row["keterangan"]=$keterangan;

array_push($dataChat,$row);

}

echo json_encode($dataChat);


?>

Pada Segmen Program 4.10 menunjukkan PHP dari fungsi Get_chat dimana

dapat dilihat berupa keterangan yang berisi waktu atau tanggal diterima pesan yang

ada.

4.8 Proses Request Event

Fungsi ini dilakukan oleh Klien dalam mengajukan acara yang akan

diselenggarakan kepada pihak EO.

Segmen 4.11 Fungsi Request Event

function savedata()

{

$.ajax({

url: server+"save_event.php",

type: 'GET',

data:{ namaevent:namaevent,

tanggalmulai:tanggalmulai,

tanggalselesai:tanggalselesai,

tipe:tipe,

id:user.Id_user,

budget:budget},

dataType:'json',


if (data.result=="success")

{

window.location="event.html";

}

else {

$("#containerWarning").show();

$("#containerWarning").html(data.result);

}


},


}

Pada Segmen Program 4.11 berisi fungsi Javascript request event yang

berisi form event yang dapat diisi oleh klien.

Segmen 4.12 PHP Request Event

<?php



$hasil=array();

$event=mysqli_real_escape_string($db,$_GET["namaevent"]);

$tanggalmulai=mysqli_real_escape_string($db,$_GET["tanggalmulai"]

);

$tanggalselesai=mysqli_real_escape_string($db,$_GET["tanggalseles

ai"]);

$tipe=mysqli_real_escape_string($db,$_GET["tipe"]);


$budget=mysqli_real_escape_string($db,$_GET["budget"]);

$q="SELECT * FROM Event WHERE Nama='$event' AND UserID='$id' AND

TanggalMulai='$tanggalmulai'";


if ($row=mysqli_fetch_assoc($res))

{

$hasil["result"]="Request data tersebut telah dilakukan";

}

else {

$q="INSERT INTO Event

(Nama,TanggalMulai,TanggalSelesai,Budget,

Id_jenis_acara,UserID,Status) ".


"VALUES ('$event','$tanggalmulai','$tanggalselesai',

'$budget','$tipe','$id','a')";


$hasil["result"]="success";

}


?>

Pada Segmen Program 4.12 berisi fungsi PHP request event yang akan

menyimpan event yang sudah diajukan

4.9 Proses Search Vendor

Fungsi ini dilakukan oleh Klien untuk mencari vendor yang dibutuhkan

dalam mempersiapkan pernikahan. Klien dapat mencari berdasarkan nama, kota,

dan jenis vendor yang tersedia.

Segmen 4.13 Fungsi Search Vendor

function fetchdata()

{

$.ajax({

url: server+"vendor.php",

type: 'GET',

data:{nama:nama,tipe:tipe,kota:kota},

dataType:'json',


var bodyHTML="";

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

{

var detail=data[i];

bodyHTML=bodyHTML+"<tr><td>"+detail.nama+"</td>"+

"<td>"+detail.alamat+"</td>"+

"<td>"+detail.range_harga+"</td>"+

"<td>"+detail.nama_kota+"</td>"+


"<td>"+detail.Item+"</td>"+

"<td><ahref='detailvendor.html?id="+detail.VendorID+"'>

Detail</a></td>"+"</tr>";

}

$("#bodyEvent").html(bodyHTML);

},


}

Pada Segmen Program 4.13 berisi fungsi Javascript search vendor yang

menjalankan fungsi pencarian berdasarkan attribute yang telah ditentukan .

Segmen 4.14 PHP Search Vendor

<?php



$bkg="";

$tipe="";

if (isset($_GET["tipe"]))

{

$tipe=mysqli_real_escape_string($db,$_GET["tipe"]);

}

$kota="";

if (isset($_GET["kota"]))

{

$kota=mysqli_real_escape_string($db,$_GET["kota"]);

}

$nama="";

if (isset($_GET["nama"]))

{



}

if ($tipe!="")

{

$bkg=" AND v.id_to_do='$tipe' ";

}

if ($kota!="")

{

$bkg=$bkg." AND k.id_kota='$kota' ";

}

if ($nama!="")

{

$bkg=$bkg." AND v.nama LIKE '%$nama%' ";

}

$hasil=array();

$q="SELECT v.VendorID,v.nama,v.alamat,v.harga,v.hargaakhir,

tdi.Item,v.deskripsi,k.nama_kota ".

"FROM vendor v ".

"INNER JOIN kota k ON (k.id_kota=v.kota) ".

"INNER JOIN to_do_item tdi ON (tdi.Id_to_do=v.id_to_do) ".

"WHERE TRUE ".$bkg;



{

$row["range_harga"]=number_format($row["harga"]).

"-".number_format($row["hargaakhir"]);

array_push($hasil,$row);

};


?>


Pada Segmen Program 4.14 berisi fungsi PHP search vendor yang

menjalankan fungsi sesuai pencarian klien dan diambil melalui database seperti

attribute yang ada .

4.10 Proses Detail Event

Fungsi ini tersedia pada menu event pada EO dimana EO dapat melihat

detail event yang diajukan oleh klien dan dapat merubah status (Pending ,Accept,

Decline).

Segmen 4.15 Fungsi Detail Event

var id="";

function fetchDetailData(id)

{

$.ajax({

url: server+"detail_event.php",

type: 'GET',

data: { id:id},

dataType:'json',


var data=retVal.event;

console.log(data);

$("#budget").val(data.Budget);

$("#status").val(data.Status);

$("#tipe").val(data.JenisAcara);

$("#tanggalselesai").val(data.TanggalSelesai);

$("#tanggalmulai").val(data.TanggalMulai);

$("#namaevent").val(data.Nama);

$("#request").val(data.nama_u);

var jenisHTML="";

var jenis=retVal.jenis;

for (var i=0;i<jenis.length;i++)

{


jenisHTML=jenisHTML+"<option

value='"+jenis[i].Id_jenis_acara+"'>"+jenis[i].Nama+"</option>";

}

$("#tipe").html(jenisHTML);

$("#tipe").val(data.Id_jenis_acara);

Pada Segmen Program 4.15 berisi fungsi Javascript Detail event yang dapat

digunakan EO untuk melihat dan mengubah status event yang ada .

Segmen 4.16 PHP Detail Event

<?php




$q="SELECT e.*,u.nama as nama_u ".

"FROM Event e ".

"INNER JOIN user u ON (e.UserID=u.Id_user) ".

"WHERE e.EventID='$id'";


$row=mysqli_fetch_assoc($res);

$returnValue["event"]=$row;

$jnsAcara=array();

$q="SELECT * FROM jenis_acara";



{

array_push($jnsAcara,$row);

}

$returnValue["jenis"]=$jnsAcara;

echo json_encode($returnValue);

?>


Pada Segmen Program 4.16 berisi fungsi PHP detail event yang

menjalankan pengambilan attribute dari database event dan user berdasarkan

attribute yang ada .

4.11 Proses To Do List

Fungsi ini tersedia pada menu event pada EO dimana EO dapat melihat to

do list hal apa saja yang dibutuhkan oleh klien dalam mempersiapkan pernikahan.

Segmen 4.17 Fungsi To Do List

var user=null;

var id=null;

function fetchdata()

{

$.ajax({

url: server+"event_to_do.php",

type: 'GET',

data:{id:id},

dataType:'json',


var data=retVal.event;

var bodyHTML="";

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

{

var detail=data[i];

bodyHTML=bodyHTML+"<tr><td>"+detail.Item+"</td>

<td>"+detail.Urutan+"</td><td>

<a href='pilihvendor.html?id="+detail.EventTodoID+"'>

Pilih Vendor</a></td></tr>";

}

$("#bodyEvent").html(bodyHTML);

$("#namaevent").html(retVal.header.Nama);

$("#request").html(retVal.header.requester);




{

array_push($event,$row);

}

$q="SELECT e.*,u.nama as requester ".

"FROM Event e ".

"INNER JOIN user u ON (u.Id_user=e.UserID) ".

"WHERE e.EventID='". $id ."'";


$header=mysqli_fetch_assoc($res);

$data["header"]=$header;

$data["event"]=$event;

$data["result"]="ok";

echo json_encode($data);

?>

Pada Segmen Program 4.18 berisi fungsi PHP To Do List yang menjalankan

pengambilan attribute dari tabel item dan to_do_item serta pengambilan nama dari

tabel event dan id_user dari tabel user berdasarkan attribute yang ada .

4.12 Proses Profile EO

Fungsi ini tersedia pada menu EO, dimana EO dapat memberi deskripsi

pada halaman profile serta menghapus event yang telah terlaksana dan melihat

jadwal kosong dari EO.

Segmen 4.19 Fungsi Profile EO

function refreshCalendar(arrObject,tgl)

{

$('#calendar').fullCalendar({

header: {

left: 'prev,next today',

center: 'title',


right: 'month,basicWeek,basicDay'

},

defaultDate: tgl,

navLinks: true,

editable: true,

eventLimit: true,

events: arrObject

});

}

$(document).ready(function()

{

$.ajax({

url: server+"event_j.php",

type: 'GET',

dataType:'json',


var arrObject=new Array();

for (var i=0;i<data.event.length;i++)

{

var event=data.event[i];

console.log(event);

var obj=new Object();

obj.title=event.Nama;

obj.start=event.TanggalMulai;

obj.end=event.ts;

arrObject.push(obj);

}

refreshCalendar(arrObject,data.tgl);

},


Pada Segmen Program 4.19 berisi fungsi Javascript Pilih profile EO yang

dapat digunakan EO untuk melihat jadwal kosong event yang ada.

Segmen 4.20 PHP Profile EO

<?php



$hasil=array();

$q="SELECT e.*,DATE_ADD(TanggalSelesai, INTERVAL 1 DAY) as ts ".

"FROM Event e ".

"WHERE e.Status<>'a'";



{

array_push($hasil,$row);

};

$kembalian["event"]=$hasil;

$q="SELECT SYSDATE() as skg";


$row=mysqli_fetch_assoc($res);

$kembalian["tgl"]=$row["skg"];

echo json_encode($kembalian);

?>

Pada Segmen Program 4.20 berisi fungsi PHP profile EO yang menjalankan

data dari kalender berdasarkan status, dimana kalender akan ditandai bila status

event adalah approve.

4.13 Proses Edit Profile

Fungsi ini tersedia pada menu klien, dimana klien dapat mengubah profile

atau identitas pribadi yang telah di daftarkan.

Segmen 4.21 Fungsi load profile


email:email,

password:password,

alamat:alamat,

nama:nama,

telpon:telpon},

dataType:'json',


if (retVal.hasil=="ok")

{

alert("Edit Profile berhasil dilakukan");

}

else if (retVal.hasil=="kembar")

{

$("#warningAll").show();

$("#containerWarning").html("Email yang anda

masukkan

sudah digunakan");

}

else {

alert("Edit gagal dilakukan");

}

}

Pada Segmen Program 4.22 berisi fungsi javascript simpan profile dimana

akan menjalankan fungsi yang akan menyimpan profile yang telah di edit kedalam

database.

Segmen 4.23 PHP Load Profile

<?php



$id="";


if (isset($_GET["id"]))

{


}

$q="SELECT * FROM user WHERE Id_user='$id'";


$dataKlien=mysqli_fetch_assoc($res);

echo json_encode($dataKlien);

?>

Pada Segmen Program 4.23 berisi fungsi PHP load profile dimana data

diambil dari tabel user berdasarkan id.

Segmen 4.24 PHP Simpan Profile

<?php



$email=mysqli_real_escape_string($db,$_GET["email"]);


$alamat=mysqli_real_escape_string($db,$_GET["alamat"]);

$telepon=mysqli_real_escape_string($db,$_GET["telpon"]);


$q="UPDATE user SET email='$email', nama='$nama',

alamat='$alamat',

telpon='$telepon' WHERE Id_user='$id'";


?>

Pada Segmen Program 4.24 berisi fungsi PHP simpan profile klien dimana

data akan disimpan ke tabel user berdasarkan attribute yang ada.

4. implementasi sistem

Documents