LAPORAN TUGAS PEMROGRAMAN FRAMEWORK

MEMBANGUN WEBSITE DEALER BERASIS JAVA

MENGGUNAKAN ANGULARJS DAN RESTFUL WEB
SERVICE

Disusun oleh :
Achmad Asrori (2011420023)
Eko Sujarwo (2012420022)
Jamal L.A. (2013420057)

TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS DR.SOETOMO SURABAYA

ABSTRAK

Web Service merupakan fenomena yang sangat panas saat ini karena, banyak
kelebihan yang ditawarkan dan dapat diakses kapanpun serta dimanapun selama mesin kita
terhubung oleh jaringan internet atau intranet. Web service juga dapat diakses oleh aplikasi
yang lain.

Di dalam perusahaan yang mempunyai cabang-cabang dengan organisasi mitra seperti

distributor, reseller, broker dan mitra saluran lainnya, biasanya menggunakan webservice
dalam membagikan data yang dimilikinya dari suatu server yang ada dikantor pusat kepada
cabang-cabang mereka dengan menggunakan webservice dengan alasan-alasan tertentu.

Data tersebut diperbolehkan untuk diolah kembali oleh para cabang ke dalam bentuk
sebuah system informasi yang dimiliki para cabangnya dan disampaikan kepada para
customer atau user.

Aplikasi ini dibuat dengan menggunakan bahasa pemograman Java, AngularJS,

RESTful Webservice & MySQL. Keunggulan dari bahasa pemograman ini yaitu dapat
membuat website bersifat dinamis, mudah dibuat, dapat berjalan dalam webserver yang
berbeda, bersifat freeware (gratis).

Kata kunci: Java, AngularJS, RESTful Webservice, PHP & MySQL.

KATA PENGANTAR
Puji dan syukur kami panjatkan ke hadirat Tuhan Yang Maha Esa, karenahanya atas
berkat dan rahmat-Nya, sehingga Laporan Tugas Pemrograman Framework yang berjudul
MEMBANGUN

WEBSITE

DEALER

BERASIS

JAVA

MENGGUNAKAN

ANGULARJS DAN RESTFUL WEB SERVICE dapat diselesaikan dengan baik dan
tepat waktu. Adapun tujuan penulisan laporan ini adalah untuk memenuhi persyaratan dalam
menyelesaikan Mata Kuliah Pemrograman Framework yang saya ambil di Program Studi
Teknik Informatika Universitas Dr. Soetomo Surabaya. Penyusunan laporan ini tidak terlepas
dari bantuan beberapa pihak, oleh karena itu penulis hendak mengucapkan terima kasih
kepada :
1. Orang tua tercinta, yang telah memberikan doa, semangat, dukungan, dan motivasi
selama melakukan studi.
2. Ibu Dosen Mata Kuliah Pemrograman Framework.
3. Teman-teman Teknik Informatika 2011 dan 2012 atas motivasi dan dukungan selama
ini.
4. Semua pihak yang terlibat dalam penyusunan Laporan Kerja Praktek ini sehingga
dapat selesai dengan baik.
Akhir kata, penulis menyadari bahwa pelaksanaan kerja praktek dan penyusunan
laporan ini masih belum sempurna. Oleh karena itu, kritik dan saran yang membangun sangat
penulis harapkan. Semoga penyusunan laporan ini bermanfaat bagi semua pihak.
Surabaya, Januari 2015
Penulis

DAFTAR ISI

ABSTRAK .............................................................................................................................................. 2
KATA PENGANTAR ............................................................................................................................ 3
DAFTAR ISI........................................................................................................................................... 4
DAFTAR GAMBAR .............................................................................................................................. 5
BAB I PENDAHULUAN ....................................................................................................................... 6
1.1 Latar Belakang .............................................................................................................................. 6
1.2 Tujuan Pembuatan Aplikasi ......................................................................................................... 7
Tujuan yang akan dicapai dari aplikasi, yaitu : ................................................................................... 7
1.

Sebagai alat pengolah data yang efektif. ..................................................................................... 7

2. Mengurangi terjadinya perbedaan data yang dimiliki karna adanya data asli yang berasal dari
satu sumber. ........................................................................................................................................ 7
1.3 Manfaat Aplikasi ........................................................................................................................... 7
BAB II PERANCANGAN ..................................................................................................................... 8
2.1 Konsep Sistem .............................................................................................................................. 8
2.2 Konsep Website Dealer................................................................................................................. 9
2.3 Konsep Database ......................................................................................................................... 10
2.4 User Interface Website Dealer .................................................................................................... 10
2.5 Tools / Framework (perangkat yang digunakan dalam pemrograman) ...................................... 13
2.5.1 JAVA ................................................................................................................................... 13
2.5.2 MySQL ................................................................................................................................ 15
2.5.3 RESTful Web Service .......................................................................................................... 17
2.5.4 AngularJS ............................................................................................................................. 18
BAB III HASIL IMPLEMENTASI RANCANGAN ........................................................................... 20
3.1 Screenshot Aplikasi .................................................................................................................... 20
3.2 Contoh Source Code ................................................................................................................... 21

DAFTAR GAMBAR
Gambar 1. Konsep Sistem ....................................................................................................................... 8
Gambar 2. Konsep Website Dealer......................................................................................................... 9
Gambar 3. Konsep Database ................................................................................................................ 10
Gambar 4. AngularJS ........................................................................................................................... 18
Gambar 5. Test RESTful Web Services ................................................................................................. 20
Gambar 6. Halaman Admin Website Dealer ........................................................................................ 21

BAB I
PENDAHULUAN
1.1 Latar Belakang

Di era globalisasi ini, banyak perusahaan yang sangat dirugikan karena pengelolaan
manajemen data yang buruk. Bisa jadi karena tidak termonitor dengan baik, akibatnya
pelanggan bingung karna tidak sinkronnya informasi yang disampaikan oleh cabang dan
perusahaan. Dan dapat mengakibatkan hilangnya pelanggan karna informasi yang
disampaikan oleh perusahaan dan cabangnya sangat membingungkan.

Bayangkan bagaimana jika pelanggan masih harus berpikir dan membandingkan

antara informasi dari cabang satu dan cabang lainnya yang ternyata berbeda. Betapa
bingungnya pelanggan tersebut dan berujung hilangnya kepercayaan dari pelanggan tersebut
kepada perusahaan

Setelah mendapatkan banyak pelanggan, lalu apa yang semestinya dilakukan

selanjutnya ? Idealnya tenaga penjualan segera melakukan filter pelanggan kemudian follow
up pelanggan tersebut, mungkin selanjutnya meminta adanya pertemuan dengan pihak
pelanggan agar Perusahaan dapat memiliki kesempatan untuk memperkenalkan produk atau
layanan Perusahaan. Sayang, kenyataannya banyak Perusahaan yang mengeluh karena
ternyata sering kali pelanggan ini tidak di follow up sehingga segala usaha yang telah
menghabiskan banyak biaya akhirnya sia-sia karena ujung-ujungnya tidak ada yang follow
up.

Berdasarkan latar belakang tersebut maka tercetuslah ide untuk membuat WEB
SERVICE yang datanya aslinya disimpan dalam database MySQL dan akan diakses oleh
website yang dibuat dengan menggunakan bahasa pemrograman Java dan AngularJS.

1.2 Tujuan Pembuatan Aplikasi

Tujuan yang akan dicapai dari aplikasi, yaitu :
1. Sebagai alat pengolah data yang efektif.
2. Mengurangi terjadinya perbedaan data yang dimiliki karna adanya data asli yang
berasal dari satu sumber.
3. Permudah proses pertukaran data.

4. Data dapat diolah di berbagai paltform.

1.3 Manfaat Aplikasi

Manfaat teknologi Web service memungkinkan sebuah aplikasi menjadi sangat kecil
ukurannya, karena kebanyakan datanya disimpan di web service sehingga tidak perlu
disimpan secara lokal. Web service ini juga memudahkan untuk memperbaharui data dalam
aplikasi karena perubahan hanya tinggal dilakukan di Web service dan semua aplikasi yang
terinstall secara lokal dan mengakses Web service ini pun akan secara otomatis mengikuti
perubahan ini. Dan dengan menggunakan library AngularJS yang ada dalam aplikasi
membuat proses pembuatan system transfer data menjadi mudah.

BAB II
PERANCANGAN
2.1 Konsep Sistem

Gambar 1. Konsep Sistem

Gambar 1 menunjukan alur bagaimana system aplikasi bekerja dari sebuah data yang
disimpan ke dalam sebuah database kemudian data tersebut diolah menjadi RESTful API.
Klien mengakses RESTful API menggunakan AngularJS untuk memperoleh data melalui
sebuah jaringan internet atau intranet.

2.2 Konsep Website Dealer

Gambar 2. Konsep Website Dealer

Konsep dari Gambar 2. memperlihatkan siapa saja yang dapat mengakses website
dealer dan apa yang dapat mereka lakukan dan peroleh dari website dealer. Customer dapat
melihat semua informasi produk yang ada dalam website dan dapat mengirim pesan kepada
dealer melalui website melalui menu Kontak. User sebagai bawahan admin dapat melihat
dan mengedit data tentang produk serta melihat pesan yang telah dikirim oleh Customer.
Sedangkan admin sendiri mempunyai akses yang lebih banyak dari Custumer dan User, yakni
melihat dan mengedit data tentang produk, melihat pesan yang dikirim oleh Customer,
membuat dan mengedit data profil User serta memberikan akses, dan melihat log atau history
yang dilakukan User pada system Website.

2.3 Konsep Database

Gambar 3. Konsep Database

Gambar 3 adalah konsep database yang akan diterapkan pada system Webservice dan
akan diakses oleh website dealer menggunakan library AngularJS.

2.4 User Interface Website Dealer

1. HOME

10

2. PRODUK

3. PRICELIST

11

4. GALERI

5. KONTAK

12

6. SITEMAP

2.5 Tools / Framework (perangkat yang digunakan dalam pemrograman)

2.5.1 JAVA
Java adalah bahasa pemrograman yang dapat dijalankan di berbagai komputer
termasuk telepon genggam. Bahasa ini awalnya dibuat oleh James Gosling saat masih
bergabung di Sun Microsystems saat ini merupakan bagian dari Oracle dan dirilis tahun 1995.
Bahasa ini banyak mengadopsi sintaksis yang terdapat pada C dan C++ namun dengan
sintaksis model objek yang lebih sederhana serta dukungan rutin-rutin aras bawah yang
minimal.

Aplikasi-aplikasi berbasis java umumnya dikompilasi ke dalam p-code (bytecode) dan

dapat dijalankan pada berbagai Mesin Virtual Java (JVM). Java merupakan bahasa
pemrograman yang bersifat umum/non-spesifik (general purpose), dan secara khusus didisain
untuk

memanfaatkan

dependensi

implementasi

seminimal

mungkin.

Karena

fungsionalitasnya yang memungkinkan aplikasi java mampu berjalan di beberapa platform

sistem operasi yang berbeda, java dikenal pula dengan slogannya, "Tulis sekali, jalankan di
mana pun". Saat ini java merupakan bahasa pemrograman yang paling populer digunakan,

13

dan secara luas dimanfaatkan dalam pengembangan berbagai jenis perangkat lunak aplikasi
ataupun aplikasi berbasis web.

Contoh program
Program Hello World
Program Hello World yang ditulis menggunakan JAVA adalah sebagai berikut:
// Outputs "Hello, world!" and then exits
public class HelloWorld {
public static void main(String args[]) {
System.out.println("Hello, world!");
}
}
Kelebihan JAVA Dari Bahasa Pemrograman Lain
Java mempunyai beberapa keunggulan dibandingkan dengan bahasa pemrograman lainnya.
Keunggulan bahasa pemrograman Java antara lain:
1. Berorientasi objek.

Java adalah bahasa pemrograman yang berorientasi pada objek. Java membagi
program menjadi objek-objek serta memodelkan sifat dan tingkah laku masingmasing dalam menyelesaikan suatu masalah

2. Java bersifat multiplatform.

Java dirancang untuk mendukung aplikasi yang dapat beroperasi di lingkungan

jaringan berbeda. Untuk mengakomodasi hal tersebut, Java compiler membangkitkan
bytecodes (sebuah format yang tidak tergantung pada arsitektur tertentu yang didesain
untuk mengirimkan kode ke banyak platform perangkat keras dan perangkat lunak
secara efisien). Java dapat dijalankan oleh banyak platform seperti Linux, Unix,
Windows, Solari, maupun Mac.

3. Java bersifat multithread.

14

Multithreading adalah kemampuan suatu program komputer untuk mengerjakan

beberapa proses dalam suatu waktu. Thread dalam Java memiliki kemampuan untuk
memanfaatkan kelebihan multi prosessor apabila sistem operasi yang digunakan
mendukung multi prosessor.

4. Dapat didistribusi dengan mudah.

Java memiliki library rutin yang lengkap untuk dirangkai pada protocol TCP/IP
(seperti HTTP dan FTP) dengan mudah. Kemampuan networking Java lebih kuat dan
lebih mudah digunakan. Java memudahkan tugas pemrograman jaringan yang sulit
seperti membuka dan mengakses sebuah soket koneksi. Java juga mamudahkan
pembuatan CGI (Common Gateway Interface).

5. Bersifat dinamis.

Java dirancang untuk beradaptasi dengan lingkungan yang sedang berkembang. Java
bersifat dinamis dalam tahap linking. Class yang ada dapat di link sebatas yang
diperlukan, apabila diperlukan modul kode yang baru dapat di link dari beberapa
sumber, bahkan dari sumber dalam jaringan Internet.

2.5.2 MySQL
MySQL adalah sistem manajemen database SQL yang bersifat Open Source dan
paling populer saat ini. Sistem Database MySQL mendukung beberapa fitur seperti
multithreaded, multi-user, dan SQL database managemen sistem (DBMS). Database ini
dibuat untuk keperluan sistem database yang cepat, handal dan mudah digunakan.

Ulf Micheal Widenius adalah penemu awal versi pertama MySQL yang kemudian
pengembangan selanjutnya dilakukan oleh perusahaan MySQL AB. MySQL AB yang

15

merupakan sebuah perusahaan komersial yang didirikan oleh para pengembang MySQL.
MySQL sudah digunakan lebih dari 11 millar instalasi saat ini. Informasi-informasi terbaru
mengenai MySQL dapat diperoleh dengan mengunjungi http://www.mysql.com/ .

Kelebihan MySQL
Berikut ini beberapa kelebihan MySQL sebagai database server antara lain :
1. Source MySQL dapat diperoleh dengan mudah dan gratis.
2. Sintaksnya lebih mudah dipahami dan tidak rumit.
3. Pengaksesan database dapat dilakukan dengan mudah.
4. MySQL merupakan program yang multithreaded, sehingga dapat dipasang pada
server yang memiliki multiCPU.
5. Didukung programprogram umum seperti C, C++, Java, Perl, PHP, Python, dsb.
6. Bekerja pada berbagai platform. (tersedia berbagai versi untuk berbagai sistem
operasi).
7. Memiliki jenis kolom yang cukup banyak sehingga memudahkan konfigurasi sistem
database.
8. Memiliki sistem sekuriti yang cukup baik dengan verifikasi host.
9. Mendukung ODBC untuk sistem operasi Windows.
10. Mendukung record yang memiliki kolom dengan panjang tetap atau panjang
bervariasi.

MySQL dan PHP merupakan sistem yang saling terintegrasi. Maksudnya adalah
pembuatan database dengan menggunakan sintak PHP dapat di buat. Sedangkan input
yang di masukkan melalui aplikasi web yang menggunakan script serverside seperti PHP
dapat langsung dimasukkan ke database MySQL yang ada di server dan tentunya web
tersebut berada di sebuah web server.

16

2.5.3 RESTful Web Service

RESTful web service atau juga dikenal dengan nama RESTful Web API merupakan
sebuah web service yang di implemantasikan dengan menggunakan http dengan
menggunakan prinsip-prinsip REST. Service yang digunakan menggunakan method milik
http antara lain GET, PUT, POST or DELETE. Input dan Output Rest berupa json, xml dan
text format.

Prinsip REST(REpresentational State Transfer) merupakan sebuah teknik di arsitektur

software untuk sistem terdistribusi seperti World Web Wide. REST tidak memerlukan
parsing XML dan tidak memerlukan sebuah header pesan ke dan dari penyedia layanan. Hal
ini pada akhirnya menggunakan mengurangi penggunaan bandwidth.

Method RESTful Web Service

GET : bisa digunakan apabila request ke server merupakan data yang sedikit. Karena
GET ada keterbatasan data. Contoh pengguanan URL di browser.

POST : bisa di gunakan apabila pengiriman data dengan data yang banyak. Contoh:
data yang ada di form dengan method post.

PUT : bisa di gunakan untuk pengiriman file melalui service. Contoh: upload file.

DELETE : Untuk yang satu ini sangat jarang digunakan. Karena terkadang bisa di
wakili oleh GET. Tapi, ada baiknya digunakan untuk proses penghapusan di data
diserver.

17

2.5.4 AngularJS

Gambar 4. AngularJS
AngularJS merupakan framework javascript berbasis open-source yang dirilis oleh
Google pada tahun 2009. AngularJS bukan merupakan pustaka (library) javascript melainkan
sebuah framework yang solid untuk membangun web app, seperti framework javascript pada
umumnya AngularJS mengadopsi konsep MVC (Model, View, Controller), meskipun
menggunakan implementasi yang berbeda dengan konsep asli MVC.

Kelebihan AngularJS
Berikut ini beberapa kelebihan menggunakan AngularJS antara lain :
1. Mengajari browsers dengan sintak HTML baru.

HTML5 menawarkan sejumlah elemen baru semisal <video>, <section>, <article>,

dsb. Nah dengan AngularJS, Kita bahkan dapat menambahkan lebih banyak lagi
elemen-elemen baru yang akan dimengerti oleh browser, misal <draggable> membuat
elemen bisa didrag, <zippy> membuat elemen semisal akordion, atau bahkan
menggunakan

bahasa

indonesia

seperti

<sembunyikan>

jika

diklik

akan

menyembunyikan elemen (contoh saja, pada praktik gunakanlah bahasa inggris

sebagai bahasa internasional). Fungsi ini disebut dengan istilah Directive. Kitalah
yang bertanggungjawab membuat Directive tersebut bisa ditafsirkan oleh browser
dengan menuliskan kode pada deklarasi Directive itu sendiri. Atau dengan kata lain,

18

kita mengajari browser sintak HTML baru. Bahkan tidak terbatas pada elemen, kita
bisa membuat Directive menggunakan attribute, HTML comment atau class.

2. HTML Template.

Template yang digunakan AngularJS hanyalah HTML biasa dengan penambahan

ekspresi (expression), sehingga kita tidak perlu menggunakan template engine khusus.

3. Dependency Injection (DI).

Dependency Injection memungkinkan developer menulis beberapa komponen kode

yang terpisah satu sama lain. Ketika memerlukan salah satu komponen, developer
dapat memanggil komponen yang dibutuhkan tersebut dan dapat menggunakan fungsi
yang tersedia. Fitur ini memudahkan developer dalam membuat komponen yang
dapat dipakai berulang kali (reusable component).

19

BAB III
HASIL IMPLEMENTASI RANCANGAN
3.1 Screenshot Aplikasi
Berikut Ini adalah screenshot halaman Test RESTful Web Services saat mencoba
koneksi RESTful dengan database MySQL dengan cara mencoba menampilkan data produk
dengan

format

JSON.

Halaman

ini

dapat

diakses

dengan

menggunakan

URL

http://localhost:8080/WebServiceDealer/test-resbeans.html

Gambar 5. Test RESTful Web Services

Dan berikut ini adalah screenshot dari halaman admin Website Dealer saat mencoba
koneksi ke RESTful Web API dengan menggunakan AngularJS. Halaman ini dapat diakses
dengan menggunakan URL http://localhost:8080/dealerWeb/admin#/product/browse

20

Gambar 6. Halaman Admin Website Dealer

3.2 Contoh Source Code
Contoh Output JSON data produk dari RESTful API:
[
{
"idProduk":44,
"namaProduk":"Vega R",
"hargaTunai":9000000,
"hargaKredit":18000000,
"statusProduk":1,
"contentProduk":"Vega R",
"picture":"product_89760153440738.jpg",
"idProdukKategori":2
},
{
"idProduk":45,
"namaProduk":"Jupiter Z",
"hargaTunai":8000000,
"hargaKredit":21000000,
"statusProduk":1,
"contentProduk":"Jupiter Z",
"picture":"product_79460170948567.jpg",
"idProdukKategori":2
}
]

21

Contoh Script AngularJS :

<html lang="en" ng-app="userApp"> // ng-app adalah inisialisi bahwa dokumen html kita memakai AngularJS
<head>
<title>CMS Dealer</title>
......
</head>
<body>
.....
// Library AngularJS
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-route.js"></script>
// Load file JS modul AngularJS yang kita buat
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

Contoh Script app.js AngularJS:

// Deklarasi Modul userApp

angular.module('userApp',['ngRoute', 'HomeControllers', 'UserServices','UserControllers',
'ProductCatServices','ProductCatControllers', 'ProductServices','ProductControllers',
'KontakServices','KontakControllers', 'LogServices','LogControllers','imageupload']).config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/user/browse', {
controller: 'UserBrowseController',
templateUrl: 'admin/user/browse.html' // menjelaskan bahwa URL ini memakai controller
UserBrowseController
});
}]).directive('repeatDone', function() {
return function(scope, element, attrs) {
if (scope.$last) { // all are rendered
scope.$eval(attrs.repeatDone);
}
}
});

Contoh Script Controller AngularJS:

userControllers.controller('UserAddController', ['$scope', 'UsersFactory', 'LogsFactory', '$http',

'$routeParams', function ($scope, UsersFactory, LogsFactory, $http, $routeParams){
$scope.User = {};
$scope.User.statusUser = "1";
$scope.User.idUser = "";
$scope.User.hakAkses = "";
$scope.go = function(User) {
UsersFactory.save({method:'POST'}, User, function(response){

22

var Log = {idHistory:"",idUser:"admin",attributModul:"Add User : "+User.username,

postDate: getDate()};
LogsFactory.save({method:'POST'}, Log, function(response){
document.location = "/dealerWeb/admin#/user/browse";
});
});
}
}]);

Contoh Script Services AngularJS:

var userServices = angular.module('UserServices', ['ngResource']);

userServices.factory('UsersFactory', ['$resource', function ($resource) {
return $resource('/WebServiceDealer/webresources/entitydealer.user/:UserId', {}, {
query : { method: 'GET', isArray: true },
get : {method:'GET'},
update : {method:'PUT'},
remove : {method:'DELETE'}
})
}]);

Contoh Implementasi AngularJS ke script HTML:

<div class="row-fluid sortable">

<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-plus"></i> Add User</h2>
<div class="box-icon">
<a href="#" class="btn btn-minimize btn-round">
<i class="icon-chevron-up"></i>
</a>
</div>
</div>
<div class="box-content">
<form class="form-horizontal" action="browse.html" name="myForm"
enctype="multipart/form-data">
<fieldset>
<!-- Message Build -->
<div class="control-group">
<label class="control-label" for="usernama"> Username </label>
<div class="controls">
<input type="text" class="span6" ng-model="User.username"
required id="nama" name="p_usernama">
<span class="error" ngshow="myForm.p_usernama.$error.required">Username tidak boleh kosong.</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password"> Password </label>
<div class="controls">
<input type="text" class="span6" ng-model="User.password"
required id="password" name="p_password">
<span class="error" ngshow="myForm.p_password.$error.required">Password tidak boleh kosong.</span>
</div>

23

</div>
<div class="form-actions">
<button type="button" class="btn btn-primary" ngclick="go(User)">Save</button>
<button type="reset" onClick="javascript:history.back()"
class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div><!--/span-->
</div><!--/row-->

24