src/model/Order.php

+<?php
+/**
+ * Created by PhpStorm.
+ * User: iqbal
+ * Date: 07/10/17
+ * Time: 15:35
+ */
+
+class Order
+{
+    public $idOrder;
+    public $idDriver;
+    public $idCustomer;
+    public $source;
+    public $destination;
+    public $rating;
+    public $comment;
+    public $time;
+
+    public static function GetAllOrder(PDO $conn) {
+        try {
+            $result = $conn->query("SELECT * FROM user_order")->fetchAll();
+            return $result;
+        } catch (PDOException $e) {
+            echo "Error".$e->getMessage();
+            return false;
+        }
+    }
+
+    public static function GetAllOrderBy($attribute, $value, PDO $conn) {
+        try {
+            $stmt = $conn->prepare("SELECT * FROM user_order WHERE $attribute='$value'");
+            $stmt->execute();
+
+            $result = $stmt->fetchAll();
+            return $result;
+        } catch (PDOException $e) {
+            echo "Error".$e->getMessage();
+            return false;
+        }
+    }
+}
\ No newline at end of file

src/model/User.php

+<?php
+
+require_once __DIR__.'/../model/Driver.php';
+
+
+class User {
+
+    public $id;
+    public $name;
+    public $username;
+    public $email;
+    public $phone;
+    public $photo;
+    public $isDriver;
+
+    public static function Create($id, PDO $conn) {
+        try {
+            $stmt = $conn->prepare("
+                SELECT id, name, username, email, phone, photo, is_driver AS isDriver
+                FROM user 
+                WHERE id=:id");
+            $stmt->execute(array('id'=>$id));
+
+            $stmt->setFetchMode(PDO::FETCH_ASSOC);
+            $user = $stmt->fetchObject('User');
+
+            return $user;
+        } catch (PDOException $e) {
+            echo "Error : ".$e->getMessage();
+            return false;
+        }
+    }
+
+    public static function GetAllUsers(PDO $conn) {
+        try {
+            $result = $conn->query("SELECT * FROM user")->fetchAll();
+            return $result;
+
+        } catch (PDOException $e) {
+            echo "Error: ".$e->getMessage();
+            return false;
+        }
+    }
+
+    public static function GetAllUsernameAndPassword(PDO $conn) {
+        try {
+            $users = $conn->query("SELECT username, password FROM user")->fetchAll();
+            foreach ($users as $record) {
+                $result[$record['username']] = $record['password'];
+            }
+            return $result;
+        } catch (PDOException $e) {
+            echo "Error: ".$e->getMessage();
+            return false;
+        }
+    }
+
+    public static function GetUserById($id, PDO $conn) {
+        try {
+            $stmt = $conn->prepare("SELECT * FROM user WHERE id=?");
+            $stmt->execute([$id]);
+
+            $user = $stmt->fetchObject();
+            return $user;
+        } catch (PDOException $e) {
+            echo "Error: ".$e->getMessage();
+            return false;
+        }
+    }
+
+    public static function GetUserBy($attribute, $value, PDO $conn) {
+        try {
+            $stmt = $conn->prepare("SELECT * FROM user WHERE $attribute='$value'");
+            $stmt->execute();
+
+            $user = $stmt->fetchObject("User");
+            return $user;
+        } catch (PDOException $e) {
+            echo "Error: ".$e->getMessage();
+            return false;
+        }
+    }
+
+    public static function UpdateUser($user, PDO $conn) {
+        try {
+            if ($user instanceof User) {
+                $newAttributes = "";
+                $newAttributes .= "name = "."$user->name, ";
+                $newAttributes .= "email = "."$user->email, ";
+                $newAttributes .= "phone = "."$user->phone, ";
+                $newAttributes .= "is_driver = "."$user->isDriver";
+
+                $conn->prepare("UPDATE user SET $newAttributes WHERE id =?")->execute([$user->id]);
+            }
+        } catch (PDOException $e) {
+            echo "Error: ".$e->getMessage();
+            return false;
+        }
+    }
+
+    public static function InsertUser($user, PDO $conn) {
+        try {
+            $values = "";
+            $columns = "";
+
+            foreach ($user as $key => $attr) {
+                if ($key !== "id" && $key !== "is_driver") {
+                    $columns .= $key.",";
+                    $values .= "'$attr'".",";
+                } else if ($key === "is_driver") {
+                    $columns .= $key;
+                    $values .= $attr;
+                }
+            }
+
+            $insertExpression = "INSERT INTO user ($columns) VALUES ($values)";
+            $conn->query($insertExpression);
+            return Driver::InsertNewDriver($conn);
+        } catch (PDOException $e) {
+            echo "Error: ".$e->getMessage();
+            return false;
+        }
+    }
+
+}
\ No newline at end of file

src/route.php

+<?php
+
+// ---------------------------- LIST OF ALL BASIC ROUTES ----------------------------
+
+$AppInstance = Dagojek::Instance();
+
+
+$AppInstance->addRoute("/",                     'MainController::LoginHandler');
+$AppInstance->addRoute("/login",                'LoginController::LoginHandler');
+
+$AppInstance->addRoute("/register",             'RegisterController::RegisterHandler');
+$AppInstance->addRoute("/register/validate/username",'RegisterController::UsernameValidationHandler');
+$AppInstance->addRoute("/register/validate/email",'RegisterController::EmailValidationHandler');
+
+$AppInstance->addRoute("/main/profil",                      'ProfilController::ProfilHandler');
+$AppInstance->addRoute("/main/profil/edit",                 'ProfilController::EditHandler');
+$AppInstance->addRoute("/main/profil/edit/save",            'ProfilController::SaveProfil');
+$AppInstance->addRoute("/main/profil/location/edit",        'ProfilController::EditLocationHandler');
+$AppInstance->addRoute("/main/profil/location/edit/data",            'ProfilController::EditDataLocationHandler');
+$AppInstance->addRoute("/main/profil/location/edit/save",   'ProfilController::SaveProfil');
+$AppInstance->addRoute("/main/profil/location/delete",      'ProfilController::DeleteLocationHandler');
+$AppInstance->addRoute("/main/profil/location/add",         'ProfilController::AddLocationHandler');
+
+$AppInstance->addRoute("/main/order",          'OrderController::OrderHandler');
+$AppInstance->addRoute("/main/order/new",          'OrderController::MakeOrderHandler');
+$AppInstance->addRoute("/main/order/finish",          'OrderController::FinishOrderHandler');
+
+$AppInstance->addRoute("/main/history",              'HistoryController::HistoryHandler');
+$AppInstance->addRoute("/main/history/customer",     'HistoryController::HistoryAsCustomerHandler');
+$AppInstance->addRoute("/main/history/driver",       'HistoryController::HistoryAsDriverHandler');
+

src/view/history.php

+<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><?=$user->username?></b> !<br>
+                <a href="/">Logout</a>
+            </p>
+        </div>
+    </div>
+    <div class="row">
+        <a class="col-2 tab text-center" href="/index.php/main/order?u=<?=$id?>">ORDER</a>
+        <a class="col-2 tab text-center active" href="/index.php/main/history?u=<?=$id?>">HISTORY</a>
+        <a class="col-2 tab text-center" href="/index.php/main/profil?u=<?=$id?>">MY PROFILE</a>
+    </div>
+    <div class="row">
+        <div class="col-6"><h1>TRANSACTION HISTORY</h1></div>
+        <span id="customer-id" style="display: none"><?=$id?></span>
+    </div>
+    <div class="row">
+        <div class="col-3">
+            <div id="page-tab-customer" class="tab text-center active">
+                <div class="page-tab-content">
+                    MY PREVIOUS ORDER
+                </div>
+            </div>
+        </div>
+        <div class="col-3">
+            <div id="page-tab-driver" class="tab text-center">
+                <div class="page-tab-content">
+                    DRIVER HISTORY
+                </div>
+            </div>
+        </div>
+    </div>
+    <br>
+    <br>
+
+    <div id="history-page-customer">
+        <div class="row">
+            <h1>Customer</h1>
+            <p id="driver-search-result" class="text-center" style="font-size: large; color: #989898; margin: 30px">Nothing to display :(</p>
+        </div>
+    </div>
+
+    <div id="history-page-driver" style="display: none">
+        <div class="row">
+            <h1>Driver</h1>
+            <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="/history.js"></script>
+</body>
+</html>
\ No newline at end of file

src/view/login.php

+<html>
+<head>
+    <title>DAGO-JEK | Profil</title>
+    <link rel="stylesheet" type="text/css" href="/style.css">
+</head>
+<body>
+    <form method="post" action="/">
+        <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>
\ No newline at end of file

src/view/order.php

+<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><?=$user->username?></b> !<br>
+                    <a href="/">Logout</a>
+                </p>
+            </div>
+        </div>
+        <div class="row">
+            <a class="col-2 tab text-center active" href="/index.php/main/order?u=<?=$id?>">ORDER</a>
+            <a class="col-2 tab text-center" href="/index.php/main/history?u=<?=$id?>">HISTORY</a>
+            <a class="col-2 tab text-center" href="/index.php/main/profil?u=<?=$id?>">MY PROFILE</a>
+        </div>
+        <div class="row">
+            <div class="col-6"><h1>MAKE AN ORDER</h1></div>
+            <span id="customer-id" style="display: none"><?=$id?></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>
\ No newline at end of file

src/view/profil.php

+<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><?=$user->username?></b> !<br>
+                    <a href="/">Logout</a>
+                </p>
+            </div> 
+        </div> 
+        <div class="row">
+            <a class="col-2 tab text-center" href="/index.php/main/order?u=<?=$id?>">ORDER</a>
+            <a class="col-2 tab text-center" href="/index.php/main/history?u=<?=$id?>">HISTORY</a>
+            <a class="col-2 tab text-center active" href="/index.php/main/profil?u=<?=$id?>">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="/index.php/main/profil/edit?u=<?=$id?>"></a></div>
+        </div> 
+        <div class="text-center profil">
+            <img class="img-circle" src="<?=$user->photo?>"/><br>
+            <h2>@<?=$user->username?></h2>
+            <p><?=$user->name?></p>
+            <?php if ($user->isDriver) : ?>
+                <p>Driver | <span class="text-orange"><b><i class="icon icon-star"></i> <?=$user->rating?></b></span> (<?=$user->sumOrder?> vote<?=($user->sumOrder>1)?'s':''?>)</p>
+            <?php else : ?>
+                <p>Non Driver</p>
+            <?php endif; ?>
+            <p><i class="icon icon-mail"></i> <?=$user->email?></p>
+            <p><i class="icon icon-phone"></i> <?=$user->phone?></p>
+        </div>
+        <?php if ($user->isDriver) : ?>
+        <div class="row">
+            <div class="col-5"><h2>PREFERED LOCATIONS</h2></div>
+            <div class="col-1 text-right"><a class="edit" href="/index.php/main/profil/location/edit?u=<?=$id?>"></a></div>
+        </div>
+        <div class="row">
+            <?php if ($location_count == 0): ?>
+                <h4 class="text-center">Tidak ada data lokasi :(</h4>
+            <?php else:?>
+                <ul class="location-list">
+                    <?php $no = 0 ?>
+                    <?php foreach ($location as $data) : ?>
+                        <li style="margin-left: <?=$no++*35?>px"><b><?=$data['location']?></b></li>
+                    <?php endforeach;?>
+                </ul>
+            <?php endif;?>
+        </div>
+        <?php endif;?>
+    </div>
+</body>
+</html>
\ No newline at end of file

src/view/profil_edit.php

+<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>
+                Hi, <b>fadhilimamk</b> !<br>
+                <a href="/">Logout</a>
+            </p>
+        </div>
+    </div>
+    <div class="row">
+        <form action="/index.php/main/profil/edit/save?u=<?=$id?>" method="post" enctype="multipart/form-data" onsubmit="return validateProfileEdit()">
+            <div class="container" style="width: 65%">
+                <div class="row">
+                    <div class="col-6 text-left">
+                        <h2>EDIT PROFILE INFORMATION</h2>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-2 text-left">
+                        <img class="img-profile" src="<?=$user->photo?>">
+                    </div>
+                    <div class="col-4">
+                        <h3>Update profile picture</h3>
+                        <form action="#">
+                            <input id="photo" type="file" name="photo" accept="image/*" class="input-photo">
+                            <label for="photo">
+                                <div class="input-photo-result">
+
+                                </div>
+                                <div class="input-photo-button">
+                                    Browse...
+                                </div>
+                            </label>
+                        </form>
+                    </div>
+                </div>
+                <br>
+                <div class="row">
+                    <div class="col-2 text-left" style="line-height: 35px">
+                        Your Name
+                    </div>
+                    <div class="col-4 line-height-medium">
+                        <input id="inputName" style="width: 100%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="name" value="<?=$user->name?>">
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-2 text-left" style="line-height: 35px">
+                    Phone
+                    </div>
+                    <div class="col-4 line-height-medium">
+                        <input id="inputPhone" style="width: 100%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="phone" value="<?=$user->phone?>"><br>
+                    </div>
+                </div>
+                <div class="row" style="margin-top: 5px">
+                    <div class="col-2 text-left" style="line-height: 30px">
+                        Driver Status
+                    </div>
+                    <div class="col-4 line-height-medium text-right">
+                        <label class="switch">
+                            <input id="inputDriver" type="checkbox" name="isDriver" <?=$user->isDriver ? 'checked' : ''?>>
+                            <span class="slider round"></span>
+                        </label>
+                    </div>
+                </div>
+                <br>
+                <br>
+                <div class="row">
+                    <div class="col-3 text-left">
+                        <a class="btn red" href="/index.php/main/profil?u=<?=$id?>">BACK</a>
+                    </div>
+                    <div class="col-3 text-right">
+                        <input class="btn green" type="submit" value="SAVE">
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+<script type="text/javascript" src="/profil_edit.js"></script>
+</body>
+</html>
\ No newline at end of file

src/view/profil_edit_location.php

+<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>
+                Hi, <b>fadhilimamk</b> !<br>
+                <a href="/">Logout</a>
+            </p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="container">
+            <div class="row">
+                <div class="col-1 text-left"></div>
+                <div class="col-4 text-left">
+                    <h2>EDIT PREFERED LOCATION</h2>
+                    <span id="driver-id" style="display: none"><?=$id?></span>
+                </div>
+                <div class="col-1 text-left"></div>
+            </div>
+            <div class="row">
+                <div class="col-1 text-left"></div>
+                <div class="col-4 text-left">
+                    <table width="100%" border="1">
+                        <tr>
+                            <th width="10%">No</th>
+                            <th width="65%">Location</th>
+                            <th width="20%">Actions</th>
+                        </tr>
+                        <?php $no = 1;?>
+                        <?php foreach ($location as $data) : ?>
+                            <tr>
+                                <td><b><?=$no++?></b></td>
+                                <td style="padding-left: 4px">
+                                    <span id="location-<?=$no-1?>" style="font-weight: bold"><?=$data['location']?></span>
+                                    <input id="input-location-<?=$no-1?>" class="input-location" type="text" style="width: 100%; line-height: 24px; padding-left:3px; font-size: medium; display: none;"></td>
+                                <td style="text-align: center">
+                                    <a id="action-edit-<?=$no-1?>" class="action-edit" onclick="editLocation(<?=$no-1?>)" data="<?=$no-1?>"></a>
+                                    <a class="action-delete" href="/index.php/main/profil/location/delete?u=<?=$id?>&name=<?=$data['location']?>" onclick="return confirm('Are you sure want to delete?')"></a>
+                                </td>
+                            </tr>
+                        <?php endforeach;?>
+                    </table>
+                </div>
+                <div class="col-1 text-left"></div>
+            </div>
+            <br>
+            <div class="row">
+                <div class="col-1"></div>
+                <div class="col-4">
+                    <h3>ADD NEW LOCATION:</h3>
+                </div>
+                <div class="col-1"></div>
+            </div>
+            <div class="row">
+                <div class="col-1"></div>
+                <div class="col-4">
+                    <form action="/index.php/main/profil/location/add?u=<?=$id?>" method="post" onsubmit="return validateLocationEdit()">
+                        <input id="locationInput" type="text" name="location" style="width:76%;height: 30px; font-size: medium">
+                        <input class="btn green" type="submit" value="ADD" style="width:20%;margin-left: 10px">
+                    </form>
+                </div>
+                <div class="col-1"></div>
+            </div>
+            <br>
+            <div class="row">
+                <div class="col-1"></div>
+                <div class="col-4">
+                    <a class="btn red" href="/index.php/main/profil?u=<?=$id?>">BACK</a>
+                </div>
+                <div class="col-1"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="/profil_edit.js"></script>
+</body>
+</html>
\ No newline at end of file

src/view/register.php

+<html>
+<head>
+    <title>DAGO-JEK | Profil</title>
+    <link rel="stylesheet" type="text/css" href="/style.css">
+</head>
+<body>
+<form id="register-form" method="post" action="/index.php/register">
+    <div class="login-container" style="max-width: 400px">
+        <div class="row">
+            <div class="col-6 text-center">
+                <h1 style="color: #007c30; font-size: 3em">SIGN UP<br>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-2">
+                <span style="font-size: 1em; line-height: 35px">Your Name</span>
+            </div>
+            <div class="col-4">
+                <input style="margin-left:10px; width:95%; height: 30px; padding-left: 5px" type="text" placeholder="Your name" id="name" name="name">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-2">
+                <span style="font-size: 1em; line-height: 35px">Username</span>
+            </div>
+            <div class="col-4">
+                <input style="margin-left:10px; width:85%; height: 30px; padding-left: 5px" id="username" type="text" placeholder="Username" name="username">
+                <img id="username-status" src="/img/ic_close.png" width="15">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-2">
+                <span style="font-size: 1em; line-height: 35px">Email</span>
+            </div>
+            <div class="col-4">
+                <input style="margin-left:10px; width:85%; height: 30px; padding-left: 5px" id="email" type="email" placeholder="Email address" name="email">
+                <img id="email-status" src="/img/ic_close.png" width="15">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-2">
+                <span style="font-size: 1em; line-height: 35px">Password</span>
+            </div>
+            <div class="col-4">
+                <input style="margin-left:10px; width:95%; height: 30px; padding-left: 5px" type="password" placeholder="Password" id="password" name="password">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-2">
+                <span style="font-size: 1em; line-height: 35px">Confirm Password</span>
+            </div>
+            <div class="col-4">
+                <input style="margin-left:10px; width:95%; height: 30px; padding-left: 5px" type="password" placeholder="Confirm password" id="confirm-password" name="confirm-password">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-2">
+                <span style="font-size: 1em; line-height: 35px">Phone Number</span>
+            </div>
+            <div class="col-4">
+                <input style="margin-left:10px; width:95%; height: 30px; padding-left: 5px" type="number" placeholder="Phone number" id="phone" name="phone">
+            </div>
+        </div>
+        <br>
+        <div class="row">
+            <div class="col-6">
+                <input class="checkbox" id="driver-ckbox" type="checkbox" value="is-driver" name="is_driver"> Also sign me up as a driver!
+            </div>
+        </div>
+        <br>
+        <div class="row">
+            <div class="col-6">
+                <a class="register-link" href="/index.php/login">Already have an account?</a>
+                <input class="btn login-button" id="sign-up-btn" type="submit" value="Sign up" disabled>
+            </div>
+        </div>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+    </div>
+</form>
+<script type="application/javascript" src="/scripts.js"></script>
+</body>
+</html>
\ No newline at end of file