WebApp/src/Controller.java

+import javax.servlet.ServletException;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
+import java.io.IOException;
+import java.io.PrintWriter;
+
+@javax.servlet.annotation.WebServlet(name = "Controller")
+public class Controller extends HttpServlet {
+
+    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        HttpSession session = request.getSession();
+        Object token = session.getAttribute("token");
+
+        if (token == null) {
+            request.getRequestDispatcher("/login.jsp").forward(request, response);
+            return;
+        }
+
+        // TODO : redirect to home
+    }
+
+    public static String formatUrl(String url) {
+
+        if (url.charAt(url.length()-1) == '/') {
+            url = url.substring(0, url.length()-1);
+        }
+
+        return url;
+    }
+}

WebApp/src/LoginController.java

+import sun.net.www.http.HttpClient;
+
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.nio.charset.StandardCharsets;
+
+@WebServlet(name = "LoginController", urlPatterns = "/login")
+public class LoginController extends HttpServlet {
+
+    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        PrintWriter out = response.getWriter();
+        String username = request.getParameter("username");
+        String password = request.getParameter("password");
+
+        if (username == null || password == null) {
+            response.setStatus(500);
+            out.println("Wrong parameter!");
+            return;
+        }
+
+        // TODO : Implement http request to identity service
+        out.println("Request to identity service ...");
+        RESTConnector.getInstance().login(username,password);
+
+    }
+
+    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        String url = request.getRequestURI();
+        PrintWriter out = response.getWriter();
+        request.getRequestDispatcher("/login.jsp").forward(request, response);
+    }
+}

WebApp/src/MainController.java

+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
+import java.io.IOException;
+import java.io.PrintWriter;
+
+@WebServlet(name = "MainController")
+public class MainController extends HttpServlet {
+
+    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        String url = request.getRequestURI();
+        PrintWriter out = response.getWriter();
+        url = Controller.formatUrl(url);
+
+        switch (url) {
+            case "/main/profil" :
+                displayProfile(request, response);
+                return;
+            case "/main/order" :
+                displayOrder(request, response);
+                return;
+        }
+
+        out.println(url + " will be cooming soon!");
+    }
+
+    private void displayOrder(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        request.getRequestDispatcher("/order.jsp").forward(request, response);
+    }
+
+
+    private void displayProfile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
+        // TODO : request data from web service
+        request.getRequestDispatcher("/profil.jsp").forward(request, response);
+    }
+
+}

WebApp/src/RESTConnector.java

+import java.io.BufferedReader;
+import java.io.DataOutputStream;
+import java.io.InputStreamReader;
+import java.net.HttpURLConnection;
+import java.net.MalformedURLException;
+import java.net.URL;
+import java.nio.charset.StandardCharsets;
+
+import static com.sun.activation.registries.LogSupport.log;
+
+public class RESTConnector {
+    final public static String IDENTITY_SERVICE_SERVER = "http://localhost:8080";
+
+    private static RESTConnector restConnector;
+
+    public static RESTConnector getInstance() {
+        if (restConnector == null) {
+            restConnector = new RESTConnector();
+        }
+        return restConnector;
+    }
+
+    public void login(String username, String password) {
+        String urlParameters  = "username="+username+"&password="+password;
+        byte[] postData       = urlParameters.getBytes( StandardCharsets.UTF_8 );
+        int    postDataLength = postData.length;
+        String request        = IDENTITY_SERVICE_SERVER + "/login";
+        URL url = null;
+
+        try {
+            url = new URL(request);
+            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
+            conn.setDoOutput( true );
+            conn.setInstanceFollowRedirects( false );
+            conn.setRequestMethod("POST");
+            conn.setRequestProperty( "Content-Type", "application/x-www-form-urlencoded");
+            conn.setRequestProperty( "charset", "utf-8");
+            conn.setRequestProperty( "Content-Length", Integer.toString( postDataLength ));
+            conn.setUseCaches( false );
+            DataOutputStream wr = new DataOutputStream(conn.getOutputStream());
+            wr.write(postData);
+            wr.flush();
+            wr.close();
+
+            int responseCode = conn.getResponseCode();
+            System.out.println("\nSending 'POST' request to URL : " + url);
+            System.out.println("Post parameters : " + urlParameters);
+            System.out.println("Response Code : " + responseCode);
+
+            BufferedReader in = new BufferedReader(
+                    new InputStreamReader(conn.getInputStream()));
+            String inputLine;
+            StringBuffer response = new StringBuffer();
+
+            while ((inputLine = in.readLine()) != null) {
+                response.append(inputLine);
+            }
+            in.close();
+
+            //print result
+            System.out.println(response.toString());
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+
+    }
+
+
+}

WebApp/web/WEB-INF/web.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
+         version="3.1">
+
+    <servlet>
+        <servlet-name>Controller</servlet-name>
+        <servlet-class>Controller</servlet-class>
+    </servlet>
+    <servlet>
+        <servlet-name>LoginController</servlet-name>
+        <servlet-class>LoginController</servlet-class>
+    </servlet>
+    <servlet>
+        <servlet-name>MainController</servlet-name>
+        <servlet-class>MainController</servlet-class>
+    </servlet>
+
+    <servlet-mapping>
+        <servlet-name>default</servlet-name>
+        <url-pattern>*.css</url-pattern>
+        <url-pattern>*.js</url-pattern>
+    </servlet-mapping>
+    <servlet-mapping>
+        <servlet-name>Controller</servlet-name>
+        <url-pattern>/</url-pattern>
+    </servlet-mapping>
+    <servlet-mapping>
+        <servlet-name>LoginController</servlet-name>
+        <url-pattern>/login</url-pattern>
+    </servlet-mapping>
+    <servlet-mapping>
+        <servlet-name>MainController</servlet-name>
+        <url-pattern>/main/*</url-pattern>
+    </servlet-mapping>
+
+    <welcome-file-list>
+        <welcome-file>main</welcome-file>
+    </welcome-file-list>
+
+</web-app>
\ No newline at end of file

WebApp/web/index.jsp

+<%--
+  Created by IntelliJ IDEA.
+  User: fadhilimamk
+  Date: 07/11/17
+  Time: 3:00
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<html>
+  <head>
+    <title>$Title$</title>
+  </head>
+  <body>
+  $END$
+  </body>
+</html>

WebApp/web/login.jsp

+<%--
+  Created by IntelliJ IDEA.
+  User: fadhilimamk
+  Date: 07/11/17
+  Time: 3:02
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<html>
+<head>
+    <title>Login | Ojek Online</title>
+    <link rel="stylesheet" type="text/css" href="/style.css">
+</head>
+<body>
+<form method="post" action="/login">
+    <div class="login-container">
+        <div class="row">
+            <div class="col-6 text-center">
+                <h1 style="color: #007c30; font-size: 3em">LOGIN<br>
+            </div>
+        </div>
+        <br>
+        <br>
+        <div class="row">
+            <div class="col-2">
+                <span style="font-size: 1.3em; line-height: 40px">Username</span>
+            </div>
+            <div class="col-4">
+                <input style="margin-left:10px; width:95%; height: 30px; padding-left: 5px" class="login-input" type="text" placeholder="Username" name="username">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-2">
+                <span style="font-size: 1.3em; line-height: 40px">Password</span>
+            </div>
+            <div class="col-4">
+                <input style="margin-left:10px;width:95%;height: 30px; padding-left: 5px" class="login-input" type="password" placeholder="Password" name="password">
+            </div>
+        </div>
+        <br>
+        <br>
+        <br>
+        <div class="row">
+            <div class="col-4 text-left">
+                <a style="float: left; font-size: 0.8em" class="login-link" href="/index.php/register">Don't have an account?</a>
+            </div>
+            <div class="col-2 text-right">
+                <input class="btn login-button" type="submit" value="GO!">
+            </div>
+        </div>
+        <br>
+        <br>
+        <br>
+        <br>
+    </div>
+</form>
+</body>
+</html>
+

WebApp/web/order.js

+
+// Hide other page section
+(function() {
+    showLocationPage();
+})();
+
+var resultData;
+
+function makeOrder() {
+    var customerID = document.getElementById('customer-id').innerHTML;
+    var orderPickup = document.getElementById('orderPickup').value;
+    var orderDestination = document.getElementById('orderDestination').value;
+    var orderPreferredDriver = document.getElementById('orderPreferredDriver').value;
+    var data = "id="+customerID+"&pickup="+orderPickup+"&destination="+orderDestination+"&driver="+orderPreferredDriver;
+
+    if (orderPickup.trim() == "" || orderDestination.trim() == "") {
+        alert("Source and destination is required!");
+        return;
+    }
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            resultData = JSON.parse(this.responseText);
+            bindSearchResult(JSON.parse(this.responseText));
+            showDriverPage();
+
+            document.getElementById('orderPickup').disabled = true;
+            document.getElementById('orderDestination').disabled = true;
+            document.getElementById('orderPreferredDriver').disabled = true;
+
+        }
+    };
+    xhttp.open("POST", "/index.php/main/order/new", true);
+    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhttp.send(data);
+}
+
+function bindSearchResult(data) {
+    var preferred = data.preferred;
+    if (preferred != null) {
+        var vote = (preferred.sum_order > 1) ? 'votes' : 'vote';
+        document.getElementById('driver-preferred-result').innerHTML = '' +
+            '<div class="row">\n' +
+            '   <img src="'+preferred.photo+'" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">\n' +
+            '   <p style="font-size: 1.4em; margin:20px 10px 3px 10px">'+preferred.name+'</p>\n' +
+            '   <p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> '+preferred.rating+'</b></span> ('+preferred.sum_order+' '+vote+')</p>\n' +
+            '   <span class="btn green" style="float: right; margin: 10px" onclick="finishOrder(\''+preferred.id+'\')">I CHOOSE YOU!</span>\n' +
+            '</div>';
+    }
+
+    var html = '';
+    var results = data.result;
+    if (results != null && results.length != 0) {
+        results.forEach(function (driverItem) {
+            var vote = (driverItem.sum_order > 1) ? 'votes' : 'vote';
+            html += '' +
+                '<div class="row">\n' +
+                '   <img src="'+driverItem.photo+'" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">\n' +
+                '   <p style="font-size: 1.4em; margin:20px 10px 3px 10px">'+driverItem.name+'</p>\n' +
+                '   <p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> '+driverItem.rating+'</b></span> ('+driverItem.sum_order+' '+vote+')</p>\n' +
+                '   <a href="#" class="btn green" style="float: right; margin: 10px" onclick="finishOrder(\''+driverItem.id+'\')">I CHOOSE YOU!</a>\n' +
+                '</div>';
+        });
+        document.getElementById('driver-search-result').innerHTML = html;
+    }
+}
+
+function finishOrder(id) {
+    var photo;
+    var name;
+    var username;
+    var preferred = resultData.preferred;
+    if (preferred != null && preferred.id == id) {
+        photo = preferred.photo;
+        name = preferred.name;
+        username = preferred.username;
+    } else {
+        var results = resultData.result;
+        var i = 0;
+        while (results[i].id != id) {
+            i++;
+        }
+        photo = results[i].photo;
+        name = results[i].name;
+        username = results[i].username;
+    }
+
+    bindFinishPage(id, name, photo, username);
+    showFinishPage();
+}
+
+function bindFinishPage(id, name, photo, username) {
+    document.getElementById('driver-finish-order').innerHTML = '' +
+        '<img class="img-circle" src="'+photo+'"/><br>\n' +
+        '<h2 style="margin-bottom: 0px">@'+username+'</h2>\n' +
+        '<p style="margin-top: 10px">'+name+'</p>\n' +
+        '<i id="star-1" class="icon icon-star-full big" onclick="setRating(1)"></i>\n' +
+        '<i id="star-2" class="icon icon-star-full big" onclick="setRating(2)"></i>\n' +
+        '<i id="star-3" class="icon icon-star-full big" onclick="setRating(3)"></i>\n' +
+        '<i id="star-4" class="icon icon-star-full big" onclick="setRating(4)"></i>\n' +
+        '<i id="star-5" class="icon icon-star-full big" onclick="setRating(5)"></i>\n' +
+        '<input type="hidden" id="order-rating" value="0"> \n' +
+        '<br>\n' +
+        '<br>\n' +
+        '<br>\n' +
+        '<textarea id="order-comment" style="width: 100%; height: 100px; padding: 10px; resize: none" placeholder="Your comment..." ></textarea>\n' +
+        '<a class="btn green" style="float: right; margin: 10px" onclick="completeOrder(\''+id+'\')">COMPLETE<br>ORDER</a>'
+}
+
+function setRating(val) {
+    for (var i = 1; i <= 5; i++) {
+        if (i <= val) {
+            document.getElementById('star-'+i).style.color = "orange";
+        } else {
+            document.getElementById('star-'+i).style.color = "#c2c2c2";
+        }
+    }
+    document.getElementById('order-rating').value = val;
+}
+
+function completeOrder(id) {
+    var customerID = document.getElementById('customer-id').innerHTML;
+    var orderPickup = document.getElementById('orderPickup').value;
+    var orderDestination = document.getElementById('orderDestination').value;
+    var rating = document.getElementById('order-rating').value;
+    var comment = document.getElementById('order-comment').value;
+    var data = 'id='+id+'&id_customer='+customerID+'&source='+orderPickup+'&destination='+orderDestination+'&rating='+rating+'&comment='+comment;
+
+    if (rating == 0) {
+        alert("You must give rating to your driver");
+        return;
+    }
+
+    if (comment.trim() == "") {
+        alert("You must give feedback to your driver");
+        return;
+    }
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            if (this.responseText == "Error") {
+                alert("Fail completing your order");
+            } else {
+                alert("Thanks for your order :D");
+                window.location.href = "/index.php/main/order?u="+customerID;
+            }
+        }
+    };
+    xhttp.open("POST", "/index.php/main/order/finish?u", true);
+    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhttp.send(data);
+
+}
+
+function showLocationPage() {
+    var finishPage = document.getElementById('order-page-finish');
+    finishPage.style.display = 'none';
+    var driverPage = document.getElementById('order-page-driver');
+    driverPage.style.display = 'none';
+    var locationPage = document.getElementById('order-page-location');
+    locationPage.style.display = 'block';
+    document.getElementById('page-tab-driver').classList.remove("selected");
+    document.getElementById('page-tab-finish').classList.remove("selected");
+    document.getElementById('page-tab-location').classList.add("selected");
+}
+
+function showDriverPage() {
+    var locationPage = document.getElementById('order-page-location');
+    locationPage.style.display = 'none';
+    var finishPage = document.getElementById('order-page-finish');
+    finishPage.style.display = 'none';
+    var driverPage = document.getElementById('order-page-driver');
+    driverPage.style.display = 'block';
+    document.getElementById('page-tab-driver').classList.add("selected");
+    document.getElementById('page-tab-finish').classList.remove("selected");
+    document.getElementById('page-tab-location').classList.remove("selected");
+}
+
+function showFinishPage() {
+    var locationPage = document.getElementById('order-page-location');
+    locationPage.style.display = 'none';
+    var driverPage = document.getElementById('order-page-driver');
+    driverPage.style.display = 'none';
+    var finishPage = document.getElementById('order-page-finish');
+    finishPage.style.display = 'block';
+    document.getElementById('page-tab-driver').classList.remove("selected");
+    document.getElementById('page-tab-finish').classList.add("selected");
+    document.getElementById('page-tab-location').classList.remove("selected");
+}
\ No newline at end of file

WebApp/web/order.jsp

+<%--
+  Created by IntelliJ IDEA.
+  User: fadhilimamk
+  Date: 07/11/17
+  Time: 11:36
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+
+<html>
+<head>
+    <title>DAGO-JEK | Order</title>
+    <link rel="stylesheet" type="text/css" href="/style.css">
+</head>
+<body>
+<div class="container">
+    <div class="row">
+        <div class="col-3"><span class="logo"></span></div>
+        <div class="col-3 text-right">
+            <p class="user-action">
+                Hi, <b>fadhilimamk</b> !<br>
+                <a href="/">Logout</a>
+            </p>
+        </div>
+    </div>
+    <div class="row">
+        <a class="col-2 tab text-center active" href="/main/order">ORDER</a>
+        <a class="col-2 tab text-center" href="/main/history">HISTORY</a>
+        <a class="col-2 tab text-center" href="/main/profil">MY PROFILE</a>
+    </div>
+    <div class="row">
+        <div class="col-6"><h1>MAKE AN ORDER</h1></div>
+        <span id="customer-id" style="display: none">VGdWZUZ2dlJlUkM5eWpjVDcyQXJoZz09</span>
+    </div>
+    <div class="row">
+        <div class="col-2">
+            <div id="page-tab-location" class="page-tab selected">
+                <div class="page-tab-image">
+                    <div class="circle">1</div>
+                </div>
+                <div class="page-tab-content">
+                    Select Destination
+                </div>
+            </div>
+        </div>
+        <div class="col-2">
+            <div id="page-tab-driver" class="page-tab">
+                <div class="page-tab-image">
+                    <div class="circle">2</div>
+                </div>
+                <div class="page-tab-content">
+                    Select a Driver
+                </div>
+            </div>
+        </div>
+        <div class="col-2">
+            <div id="page-tab-finish" class="page-tab">
+                <div class="page-tab-image">
+                    <div class="circle">3</div>
+                </div>
+                <div class="page-tab-content">
+                    Complete your order
+                </div>
+            </div>
+        </div>
+    </div>
+    <br>
+    <br>
+    <div id="order-page-location">
+        <form id="orderForm">
+            <div class="row">
+                <div class="col-2" style="line-height: 40px">
+                    <span style="padding-left: 30%;">Picking Point</span> <br>
+                </div>
+                <div class="col-4" style="line-height: 30px">
+                    <input id="orderPickup" style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="picking_point" placeholder="Pick up point">
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-2" style="line-height: 40px">
+                    <span style="padding-left: 30%">Destination</span> <br>
+                </div>
+                <div class="col-4" style="line-height: 30px">
+                    <input id="orderDestination" style="width: 80%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="destination" placeholder="Destination">
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-2" style="line-height: 40px">
+                    <span style="padding-left: 30%">Preferred Driver</span>
+                </div>
+                <div class="col-4">
+                    <input id="orderPreferredDriver" style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="driver" placeholder="(optional)"><br>
+                </div>
+            </div>
+            <br>
+            <br>
+            <br>
+            <div class="row text-center">
+                <a href="#" class="btn green" style="font-size: 2em" onclick="makeOrder()">Next</a>
+            </div>
+        </form>
+    </div>
+
+    <div id="order-page-driver">
+        <div style="width: 100%; border: 1px solid black; border-radius: 10px;">
+            <h2 style="margin-left: 10px; margin-top: 0px">PREFERRED DRIVERS: </h2>
+            <div id="driver-preferred-result" style="margin: 0 30px 30px 30px">
+                <p id="driver-preferred-empty" class="text-center" style="font-size: large; color: #989898; margin: 30px">Nothing to display :(</p>
+            </div>
+        </div>
+        <br>
+        <div style="width: 100%; border: 1px solid black; border-radius: 10px;">
+            <h2 style="margin-left: 10px; margin-top: 0px">OTHER DRIVERS: </h2>
+            <div id="driver-search-result" style="margin: 0 30px 30px 30px">
+                <p id="driver-preferred-empty" class="text-center" style="font-size: large; color: #989898; margin: 30px">Nothing to display :(</p>
+            </div>
+        </div>
+    </div>
+
+    <div id="order-page-finish" style="width: 100%;">
+        <h2 style="margin-left: 10px; margin-top: 0px">HOW WAS IT? </h2>
+        <div id="driver-finish-order" class="text-center profil" style="padding-bottom: 60px">
+            <p id="driver-preferred-empty" class="text-center" style="font-size: large; color: #989898; margin: 30px">Nothing to display :(</p>
+        </div>
+    </div>
+
+
+</div>
+
+<script type="text/javascript" src="/order.js"></script>
+</body>
+</html>

WebApp/web/profil.jsp

+<%--
+  Created by IntelliJ IDEA.
+  User: fadhilimamk
+  Date: 07/11/17
+  Time: 11:28
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<html>
+<head>
+    <title>DAGO-JEK | Profil</title>
+    <link rel="stylesheet" type="text/css" href="/style.css">
+</head>
+<body>
+<div class="container">
+    <div class="row">
+        <div class="col-3"><span class="logo"></span></div>
+        <div class="col-3 text-right">
+            <p class="user-action">
+                Hi, <b>fadhilimamk</b> !<br>
+                <a href="/logout">Logout</a>
+            </p>
+        </div>
+    </div>
+    <div class="row">
+        <a class="col-2 tab text-center" href="/main/order">ORDER</a>
+        <a class="col-2 tab text-center" href="/main/history">HISTORY</a>
+        <a class="col-2 tab text-center active" href="/main/profil">MY PROFILE</a>
+    </div>
+    <div class="row">
+        <div class="col-5"><h1>MY PROFILE</h1></div>
+        <div class="col-1 text-right"><a class="edit" href="/edit/profil"></a></div>
+    </div>
+    <div class="text-center profil">
+        <img class="img-circle" src="#"/><br>
+        <h2>@fadhilimamk</h2>
+        <p>Fadhil Imam</p>
+        <p>Driver | <span class="text-orange"><b><i class="icon icon-star"></i> 4.15</b></span> (122 votes)</p>
+        <p><i class="icon icon-mail"></i> 13515146@std.stei.itb.ac.id</p>
+        <p><i class="icon icon-phone"></i> 085797490039</p>
+    </div>
+    <div class="row">
+        <div class="col-5"><h2>PREFERED LOCATIONS</h2></div>
+        <div class="col-1 text-right"><a class="edit" href="/edit/location"></a></div>
+    </div>
+    <div class="row">
+        <ul class="location-list">
+            <li style="margin-left: 0px"><b>Cipaganti</b></li>
+            <li style="margin-left: 35px"><b>Dago Pojok</b></li>
+            <li style="margin-left: 70px"><b>Tubagus</b></li>
+            <li style="margin-left: 105px"><b>Unpad</b></li>
+        </ul>
+    </div>
+</div>
+</body>
+</html>

WebApp/web/style.css

+/* ------------------------- GENERAL -------------------------*/
+
+body {
+    background-color: #F5F5F5;
+    font-family: KacstOffice, sans-serif;
+}
+
+.container {
+    width: 80%;
+    max-width: 700px;
+    margin: 50px auto;
+    background-color: white;
+    padding: 20px;
+    border-radius: 5px;
+}
+
+.row:before,
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+[class*='col-'] {
+    float: left;
+    min-height: 1px;
+    width: 16.66%;
+}
+
+.col-1 {
+    width: 16.66%;
+}
+
+.col-2 {
+    width: 33.33%;
+}
+
+.col-3 {
+    width: 50%;
+}
+
+.col-4 {
+    width: 66.66%;
+}
+
+.col-5 {
+    width: 83.33%;
+}
+
+.col-6 {
+    width: 100%;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-orange {
+    color: orange;
+}
+
+.btn {
+    border-radius: 5px;
+    border: 1px solid black;
+    padding: 5px 15px;
+    color: black;
+    text-decoration: none;
+    font-size: medium;
+}
+
+.red {
+    background-color: #DA0000;
+}
+
+.green {
+    background-color: #58F100;
+}
+
+.line-height-medium {
+    line-height: 30px;
+}
+
+/* ------------------------- HEADER -------------------------*/
+
+.logo:after {
+    background-image: url('/img/logo.jpg');
+    background-size: 210px 40px;
+    display: inline-block;
+    width: 210px;
+    height: 40px;
+    content: "";
+    margin-bottom: 5px;
+}
+
+.user-action {
+    margin-top: 0px;
+}
+
+.tab {
+    outline: 1px solid #004D40;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-weight: 900;
+    color: black;
+    text-decoration: none;
+}
+
+.tab.active {
+    background-color: #426344;
+    color: #FAFAFA;
+}
+
+.tab:hover {
+    background-color: #426344;
+    color: #FAFAFA;
+}
+
+/* ------------------------- ICON -------------------------*/
+
+@font-face {
+    font-family: 'icon';
+    src: url("/font/typicons.eot");
+    src: url("/font/typicons.eot?#iefix") format('embedded-opentype'),
+    url("/font/typicons.woff") format('woff'),
+    url("/font/typicons.ttf") format('truetype'),
+    url("/font/typicons.svg#typicons") format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.icon:before {
+    font-family: 'icon';
+    font-style: normal;
+    font-weight: normal;
+    speak: none;
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    height: 1em;
+    font-size: 1em;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    text-rendering: optimizeLegibility
+}
+
+.icon.big {
+    font-size: 3em;
+    color: #c2c2c2;
+}
+
+.icon.icon-mail:before {
+    content: '\e0a5'
+}
+
+.icon.icon-phone:before {
+    content: '\e0c5'
+}
+
+.icon.icon-star:before {
+    content: '\e108'
+}
+
+.icon.icon-star-full:before{
+    content:'\e105'
+}
+
+/* ------------------------- PROFIL -------------------------*/
+
+.img-circle {
+    width: 170px;
+    height: 170px;
+    border-radius: 50%;
+    border: 3px solid black;
+}
+
+.img-profile {
+    width: 130px;
+    height: 130px;
+    outline: 3px solid black;
+}
+
+.profil > p {
+    line-height: 50%;
+}
+
+.location-list {
+    line-height: 1.9em;
+    list-style-image: url('/img/ic_triangle.png');
+}
+
+.edit:after {
+    background-image: url('/img/ic_edit.jpg');
+    background-size: 45px 45px;
+    display: inline-block;
+    width: 45px;
+    height: 45px;
+    content: "";
+}
+
+a.edit:after {
+    margin: 15px;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+table, th, td {
+    border: 1px solid #c2c2c2;
+}
+
+.action-edit {
+    background-image: url('/img/ic_edit.jpg');
+    background-size: 25px 25px;
+    display: inline-block;
+    width: 25px;
+    height: 20px;
+    content: "";
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.action-save {
+    background-image: url('/img/ic_edit.jpg');
+    background-size: 25px 25px;
+    display: inline-block;
+    width: 25px;
+    height: 20px;
+    content: "";
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.action-delete {
+    background-image: url('/img/ic_close.png');
+    background-size: 17px 17px;
+    display: inline-block;
+    width: 17px;
+    height: 17px;
+    content: "";
+}
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 22px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 15px;
+    width: 15px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #008C14;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #008C14;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(17px);
+    -ms-transform: translateX(17px);
+    transform: translateX(17px);
+}
+
+.slider.round {
+    border-radius: 22px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+.input-photo {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+.input-photo + label {
+    display: inline-block;
+    cursor: pointer;
+    width: 100%;
+    line-height: 33px;
+}
+
+.input-photo + label > .input-photo-button {
+    color: black;
+    float: right;
+    font-size: 0.75em;
+    width: 27%;
+    background-color: #ccc;
+    text-align: center;
+}
+
+.input-photo + label > .input-photo-result {
+    float: left;
+    font-size: 0.75em;
+    width: 70%;
+    height: 32px;
+    padding-left: 5px;
+    border: solid 1px black;
+    margin-right: 2px;
+}
+
+.input-photo:focus + label > .input-photo-button,
+.input-photo + label > .input-photo-button:hover {
+    background-color: #999aa3;
+}
+
+.input-photo:focus + label > .input-photo-button {
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+}
+
+/* ------------------------- ORDER -------------------------*/
+
+.small-circle {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: #c2c2c2;
+    font-size: large;
+    vertical-align: middle;
+    margin: 0;
+}
+
+.page-tab {
+    width: 180px;
+    height: 50px;
+    border: 1px solid black;
+    margin: 0 auto;
+    display: table;
+    box-sizing: border-box;
+    vertical-align: middle;
+}
+
+.page-tab.selected {
+    background-color: #f4fe96;
+}
+
+.page-tab > .page-tab-image {
+    float: left;
+    width: 30%;
+    height:100%;
+    text-align: center;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.page-tab >.page-tab-image >.circle {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    margin: auto;
+    background-color: #d7d7d7;
+    padding: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.page-tab > .page-tab-content {
+    float: right;
+    width: 70%;
+    height:100%;
+    display: inline-block;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+/* Login Page */
+
+.login-input {
+    margin: 5px 0 5px 0;
+}
+
+.login-link {
+    float: right;
+    margin-top: 10px;
+}
+
+.login-button {
+    padding: 10px 20px;
+    background-color: #58f100;
+}
+
+.login-container {
+    width: 60%;
+    max-width: 300px;
+    margin: 50px auto;
+    background-color: #74d034;
+    padding-left: 30px;
+    padding-right: 30px;
+    border-radius: 50px;
+    border: solid 10px #007c30;
+    color: #007c30;
+}
+
+
+/* Register Page */
+
+#sign-up-btn {
+    float: right;
+}
+
+.register-link {
+    float: left;
+    margin-top: 8px;
+}
+
+.checkbox {
+    margin: 10px 0 10px 0;
+}
+
+.available {
+    background-color: greenyellow;
+}
+
+.unavailable, .empty-required, .not-match {
+    background-color: orangered;
+}
+
+.not-match::-webkit-input-placeholder, .empty-required::-webkit-input-placeholder, .unavailable::-webkit-input-placeholder {
+    color: whitesmoke;
+}
\ No newline at end of file

WebService/.idea/dataSources.local.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="dataSourceStorageLocal">
+    <data-source name="db_ojek@localhost" uuid="78a7851e-3205-405c-a84e-7ecf54900fd9">
+      <database-info product="MySQL" version="5.5.5-10.1.19-MariaDB" jdbc-version="4.0" driver-name="MySQL Connector Java" driver-version="mysql-connector-java-5.1.44 ( Revision: b3cda4f864902ffdde495b9df93937c3e20009be )">
+        <extra-name-characters>#@</extra-name-characters>
+        <identifier-quote-string>`</identifier-quote-string>
+      </database-info>
+      <case-sensitivity plain-identifiers="lower" quoted-identifiers="lower" />
+      <secret-storage>master_key</secret-storage>
+      <user-name>root</user-name>
+      <introspection-schemas>*:db_ojek</introspection-schemas>
+    </data-source>
+  </component>
+</project>
\ No newline at end of file

WebService/.idea/dataSources.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="db_ojek@localhost" uuid="78a7851e-3205-405c-a84e-7ecf54900fd9">
+      <driver-ref>mysql</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>com.mysql.jdbc.Driver</jdbc-driver>
+      <jdbc-url>jdbc:mysql://localhost:3306/db_ojek</jdbc-url>
+      <driver-properties>
+        <property name="autoReconnect" value="true" />
+        <property name="zeroDateTimeBehavior" value="convertToNull" />
+        <property name="tinyInt1isBit" value="false" />
+        <property name="characterEncoding" value="utf8" />
+        <property name="characterSetResults" value="utf8" />
+        <property name="yearIsDateType" value="false" />
+      </driver-properties>
+    </data-source>
+  </component>
+</project>
\ No newline at end of file

WebService/.idea/dataSources/78a7851e-3205-405c-a84e-7ecf54900fd9.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<dataSource name="db_ojek@localhost">
+  <database-model serializer="dbm" rdbms="MYSQL" format-version="4.4">
+    <root id="1"/>
+    <schema id="2" parent="1" name="db_ojek">
+      <Current>1</Current>
+      <Visible>1</Visible>
+    </schema>
+    <schema id="3" parent="1" name="information_schema"/>
+    <schema id="4" parent="1" name="laundry"/>
+    <schema id="5" parent="1" name="laundryx"/>
+    <schema id="6" parent="1" name="mysql"/>
+    <schema id="7" parent="1" name="performance_schema"/>
+    <schema id="8" parent="1" name="phpmyadmin"/>
+    <schema id="9" parent="1" name="test"/>
+    <schema id="10" parent="1" name="universitasx"/>
+    <schema id="11" parent="1" name="wbd_projek"/>
+    <table id="12" parent="2" name="pref_loc"/>
+    <table id="13" parent="2" name="rating_driver"/>
+    <table id="14" parent="2" name="transaction"/>
+    <column id="15" parent="12" name="IDDriver">
+      <Position>1</Position>
+      <DataType>int(11)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="16" parent="12" name="Location">
+      <Position>2</Position>
+      <DataType>varchar(30)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="17" parent="13" name="IDDriver">
+      <Position>1</Position>
+      <DataType>int(11)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="18" parent="13" name="rating">
+      <Position>2</Position>
+      <DataType>float|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="19" parent="13" name="totalvote">
+      <Position>3</Position>
+      <DataType>int(11)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <key id="20" parent="13" name="PRIMARY">
+      <NameSurrogate>1</NameSurrogate>
+      <ColNames>IDDriver</ColNames>
+      <Primary>1</Primary>
+    </key>
+    <column id="21" parent="14" name="IDTransaksi">
+      <Position>1</Position>
+      <DataType>int(11)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="22" parent="14" name="IDDriver">
+      <Position>2</Position>
+      <DataType>int(11)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="23" parent="14" name="IDPenumpang">
+      <Position>3</Position>
+      <DataType>int(10)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="24" parent="14" name="LokasiAwal">
+      <Position>4</Position>
+      <DataType>varchar(30)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="25" parent="14" name="LokasiTujuan">
+      <Position>5</Position>
+      <DataType>varchar(30)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="26" parent="14" name="Rating">
+      <Position>6</Position>
+      <DataType>int(11)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="27" parent="14" name="Comment">
+      <Position>7</Position>
+      <DataType>varchar(120)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="28" parent="14" name="IsHide">
+      <Position>8</Position>
+      <DataType>tinyint(1)|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <column id="29" parent="14" name="DatePosted">
+      <Position>9</Position>
+      <DataType>date|0</DataType>
+      <NotNull>1</NotNull>
+    </column>
+    <key id="30" parent="14" name="PRIMARY">
+      <NameSurrogate>1</NameSurrogate>
+      <ColNames>IDTransaksi</ColNames>
+      <Primary>1</Primary>
+    </key>
+  </database-model>
+</dataSource>
\ No newline at end of file

WebService/.idea/description.html

+<html>Simple <b>Java</b> application that includes a class with <code>main()</code> method</html>
\ No newline at end of file

WebService/.idea/inspectionProfiles/Project_Default.xml

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="ValidExternallyBoundObject" enabled="false" level="ERROR" enabled_by_default="false" />
+  </profile>
+</component>
\ No newline at end of file

WebService/.idea/libraries/json_20171018.xml

+<component name="libraryTable">
+  <library name="json-20171018">
+    <CLASSES>
+      <root url="jar://$USER_HOME$/Downloads/json-20171018.jar!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES />
+  </library>
+</component>
\ No newline at end of file