db/tubes1-wbd-old.sql

+-- phpMyAdmin SQL Dump
+-- version 4.7.4
+-- https://www.phpmyadmin.net/
+--
+-- Host: localhost
+-- Generation Time: Oct 06, 2017 at 09:07 AM
+-- Server version: 10.1.26-MariaDB
+-- PHP Version: 7.1.9
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+SET AUTOCOMMIT = 0;
+START TRANSACTION;
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+
+--
+-- Database: `tubes1-wbd`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `orderhistory`
+--
+
+CREATE TABLE `orderhistory` (
+  `order_id` int(5) NOT NULL,
+  `date` date NOT NULL,
+  `u_driver` varchar(20) NOT NULL,
+  `u_customer` varchar(20) NOT NULL,
+  `source` varchar(30) NOT NULL,
+  `destination` varchar(30) NOT NULL,
+  `rating_given` int(5) NOT NULL,
+  `comment_given` text NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `prefloc`
+--
+
+CREATE TABLE `prefloc` (
+  `id` int(5) NOT NULL,
+  `location` varchar(30) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `userinfo`
+--
+
+CREATE TABLE `userinfo` (
+  `id` int(5) NOT NULL,
+  `username` varchar(32) NOT NULL,
+  `fullname` varchar(30) NOT NULL,
+  `email` varchar(30) NOT NULL,
+  `pass` varchar(128) NOT NULL,
+  `phoneno` varchar(20) NOT NULL,
+  `isdriver` tinyint(1) NOT NULL DEFAULT '0',
+  `avg_vote` float NOT NULL DEFAULT '0',
+  `n_voters` int(11) NOT NULL DEFAULT '0',
+  `img_name` varchar(32) NOT NULL DEFAULT 'default.png'
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Dumping data for table `userinfo`
+--
+
+INSERT INTO `userinfo` (`id`, `username`, `fullname`, `email`, `pass`, `phoneno`, `isdriver`, `avg_vote`, `n_voters`, `img_name`) VALUES
+(2, 'fajar', 'Fajar N', '13515060@std.stei.itb.ac.id', '$2y$10$kRZzI0XgXLll2HGjH3hwWu3DGyKYGnnrIHVlsg9C3w899qQIYrfNe', '08967900712', 0, 0, 0, 'default.png'),
+(34, 'lulu', 'Babibu', 'nono@gmail.com', '$2y$10$gMT/g0JYkE1IMtAzf9W7hehj0M3Zf3cQM3WT/c/F7OPI1aA0zqO9e', '0837213123', 1, 0, 0, 'default.png'),
+(35, 'lala', 'lala', 'lala@gmail.com', '$2y$10$JFvRFeZY4e7DSTMReoEin.Nw1gXUFe9ZdnC9UiECjLm65Qkc34fhK', '123413', 0, 0, 0, 'default.png'),
+(36, 'azisak', 'Azis Adi Kuncoro', 'azisadikuncoro@gmail.com', '$2y$10$EB67Fjdhpw.EukK/DXLJCuQzSWCXz8QohcFHxxeaTQqkYPwLM5hc6', '08967900712', 1, 0, 0, 'default.png');
+
+--
+-- Indexes for dumped tables
+--
+
+--
+-- Indexes for table `orderhistory`
+--
+ALTER TABLE `orderhistory`
+  ADD PRIMARY KEY (`order_id`),
+  ADD UNIQUE KEY `order_id` (`order_id`);
+
+--
+-- Indexes for table `userinfo`
+--
+ALTER TABLE `userinfo`
+  ADD PRIMARY KEY (`id`),
+  ADD UNIQUE KEY `username` (`username`),
+  ADD UNIQUE KEY `email` (`email`);
+
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT for table `orderhistory`
+--
+ALTER TABLE `orderhistory`
+  MODIFY `order_id` int(5) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT for table `userinfo`
+--
+ALTER TABLE `userinfo`
+  MODIFY `id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=37;
+COMMIT;
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

db/tubes1-wbd.sql

+-- phpMyAdmin SQL Dump
+-- version 4.7.0
+-- https://www.phpmyadmin.net/
+--
+-- Host: 127.0.0.1
+-- Generation Time: Oct 07, 2017 at 04:09 PM
+-- Server version: 5.7.19-log
+-- PHP Version: 7.1.7
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+SET AUTOCOMMIT = 0;
+START TRANSACTION;
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+
+--
+-- Database: `tubes1-wbd`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `orderhistory`
+--
+
+CREATE TABLE `orderhistory` (
+  `order_id` int(5) NOT NULL,
+  `date` date NOT NULL,
+  `u_driver` varchar(20) NOT NULL,
+  `u_customer` varchar(20) NOT NULL,
+  `source` varchar(30) NOT NULL,
+  `destination` varchar(30) NOT NULL,
+  `rating_given` int(5) NOT NULL,
+  `comment_given` text NOT NULL,
+  `ishide_cust` tinyint(1) NOT NULL DEFAULT '0',
+  `ishide_driver` tinyint(1) NOT NULL DEFAULT '0'
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Dumping data for table `orderhistory`
+--
+
+INSERT INTO `orderhistory` (`order_id`, `date`, `u_driver`, `u_customer`, `source`, `destination`, `rating_given`, `comment_given`, `ishide_cust`, `ishide_driver`) VALUES
+(1, '2017-10-02', 'driver', 'zxc', 'a', 'b', 3, 'bla bla bla', 1, 0),
+(2, '2017-10-04', 'driver2', 'customer2', 'z', 'y', 4, 'jndflakdfmak', 0, 0),
+(3, '2017-10-09', 'driver', 'zxc', 'j', 'k', 4, 'asdfghjkl', 0, 0),
+(4, '2017-10-20', 'zxc', 'asd', 'k', 'l', 1, 'oooooo', 0, 0);
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `prefloc`
+--
+
+CREATE TABLE `prefloc` (
+  `id_prefloc` int(5) NOT NULL,
+  `id` int(5) NOT NULL,
+  `location` varchar(30) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;
+
+--
+-- Dumping data for table `prefloc`
+--
+
+INSERT INTO `prefloc` (`id_prefloc`, `id`, `location`) VALUES
+(1, 1, 'asdf'),
+(2, 38, 'a'),
+(3, 38, 'b'),
+(5, 37, 'coba'),
+(6, 37, 'coba lagi lagi');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `userinfo`
+--
+
+CREATE TABLE `userinfo` (
+  `id` int(5) NOT NULL,
+  `username` varchar(32) NOT NULL,
+  `fullname` varchar(30) NOT NULL,
+  `email` varchar(30) NOT NULL,
+  `pass` varchar(128) NOT NULL,
+  `phoneno` varchar(20) NOT NULL,
+  `isdriver` tinyint(1) NOT NULL DEFAULT '0',
+  `avg_vote` float NOT NULL DEFAULT '0',
+  `n_voters` int(11) NOT NULL DEFAULT '0',
+  `img_name` varchar(32) NOT NULL DEFAULT 'default.png'
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Dumping data for table `userinfo`
+--
+
+INSERT INTO `userinfo` (`id`, `username`, `fullname`, `email`, `pass`, `phoneno`, `isdriver`, `avg_vote`, `n_voters`, `img_name`) VALUES
+(2, 'fajar', 'Fajar N', '13515060@std.stei.itb.ac.id', '$2y$10$kRZzI0XgXLll2HGjH3hwWu3DGyKYGnnrIHVlsg9C3w899qQIYrfNe', '08967900712', 0, 0, 0, 'default.png'),
+(34, 'lulu', 'Babibu', 'nono@gmail.com', '$2y$10$gMT/g0JYkE1IMtAzf9W7hehj0M3Zf3cQM3WT/c/F7OPI1aA0zqO9e', '0837213123', 1, 0, 0, 'default.png'),
+(35, 'lala', 'lala', 'lala@gmail.com', '$2y$10$JFvRFeZY4e7DSTMReoEin.Nw1gXUFe9ZdnC9UiECjLm65Qkc34fhK', '123413', 0, 0, 0, 'default.png'),
+(36, 'azisak', 'Azis Adi Kuncoro', 'azisadikuncoro@gmail.com', '$2y$10$EB67Fjdhpw.EukK/DXLJCuQzSWCXz8QohcFHxxeaTQqkYPwLM5hc6', '08967900712', 1, 0, 0, 'default.png'),
+(37, 'zxc', 'zxc', 'zxc@zxc.com', '$2y$10$2ElYlXGxJ7Wc2icABrlpUe1Q3Sg6NjG9/oMNvd8LZWlHef8OarAMe', '2334567890123', 1, 0, 0, 'images.png'),
+(38, 'driver', 'driver', 'driver@driver.com', '$2y$10$tst64FyFe0ipjC5QLpjq/.Z0ZDFBkQq5xWkY60/SmgCcX9NZOrelG', '123456789012', 1, 0, 0, 'images.png');
+
+--
+-- Indexes for dumped tables
+--
+
+--
+-- Indexes for table `orderhistory`
+--
+ALTER TABLE `orderhistory`
+  ADD PRIMARY KEY (`order_id`),
+  ADD UNIQUE KEY `order_id` (`order_id`);
+
+--
+-- Indexes for table `prefloc`
+--
+ALTER TABLE `prefloc`
+  ADD PRIMARY KEY (`id_prefloc`);
+
+--
+-- Indexes for table `userinfo`
+--
+ALTER TABLE `userinfo`
+  ADD PRIMARY KEY (`id`),
+  ADD UNIQUE KEY `username` (`username`),
+  ADD UNIQUE KEY `email` (`email`);
+
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT for table `orderhistory`
+--
+ALTER TABLE `orderhistory`
+  MODIFY `order_id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
+--
+-- AUTO_INCREMENT for table `prefloc`
+--
+ALTER TABLE `prefloc`
+  MODIFY `id_prefloc` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
+--
+-- AUTO_INCREMENT for table `userinfo`
+--
+ALTER TABLE `userinfo`
+  MODIFY `id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=41;COMMIT;
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

src/complete-order.php

+<!DOCTYPE html>
+
+
+<?php
+  require_once 'dbconfig.php';
+
+  // Create connection
+  $conn = new mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
+  // Check connection
+  if ($conn->connect_error) {
+      die("Connection failed: " . $conn->connect_error);
+  }
+  /* GET USER INFO */
+  // Menyiapkan statement SELECT
+  $sqlquery = 'SELECT username, fullname, email, phoneno, isdriver, avg_vote, n_voters, img_name FROM userinfo WHERE id=?';
+  $stmt = mysqli_prepare($conn, $sqlquery);
+
+  // Bind variables
+  mysqli_stmt_bind_param($stmt, "i", $_GET['id_active']);
+
+  if(mysqli_stmt_execute($stmt)){
+    // Simpan Hasil query
+    mysqli_stmt_store_result($stmt);
+    // username exist
+    mysqli_stmt_bind_result($stmt, $username, $fullname, $email, $phoneno, $isdriver, $avg_vote, $n_voters, $img_name);
+
+    mysqli_stmt_fetch($stmt);
+  }
+
+  /* PREFLOC */
+  $sql = "SELECT * FROM userinfo, prefloc WHERE userinfo.id = prefloc.id AND userinfo.id LIKE {$_POST['u_driver']}";
+
+  //$sql = "SELECT * FROM `userinfo`,`prefloc` WHERE `userinfo.id` = `prefloc.id` LIKE '{$_POST["u_driver"]}'";
+
+  $result = $conn->query($sql);
+  $n_pref = 0;
+  if ($result->num_rows > 0) {
+    // output data of each row
+
+    $row = $result->fetch_assoc();
+  }
+ ?>
+<html>
+  <head>
+    <title>Complete Order</title>
+    <link rel="stylesheet" href="css/fan2.css"/>
+    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
+  </head>
+
+  <body>
+    <div class="card mcenter">
+
+      <div class="rowflex">
+        <div class="flexone">
+          <div>
+            <span class="font-header" style="color: green;">PR-</span><span class="font-header" style="color: red;">OJEK</span>
+          </div>
+          <div style="color: green;">
+            wushh... wushh... ngeeeeeeenggg...
+          </div>
+        </div>
+
+        <div class="mtop10 flexone textright">
+          <span>Hi, </span>
+          <span><b><?php echo $username ?></b> !</span>
+          <br  />
+          <a href="login.php">Logout</a>
+        </div>
+      </div>
+
+      <div class="mtop10 rowflex">
+        <div class="flexone box font-navbar selected-navbar"><a href="order-ojek.php?id_active=<?php echo $_GET['id_active'] ?>">ORDER</a></div>
+        <div class="flexone box font-navbar"><a href="history.php?id_active=<?php echo $_GET['id_active'] ?>">HISTORY</a></div>
+        <div class="flexone box font-navbar"><a href="profile.php?id_active=<?php echo $_GET['id_active'] ?>">MY PROFILE</a></div>
+      </div>
+
+
+      <div class="mtop10">
+        <span class="font-title flexone">MAKE AN ORDER</span>
+      </div>
+
+      <div class="mtop10 rowflex">
+            <div class="rowflex order-step flexone box font-order">
+              <div class="number mr12">
+                1
+              </div>
+              <div class="left-align">
+                Select Destination
+              </div>
+            </div>
+            <div class="rowflex order-step flexone box font-order">
+              <div class="number mr12">
+                2
+              </div>
+              <div class="left-align">
+                Select a Driver
+              </div>
+            </div>
+            <div class="rowflex order-step flexone box font-order selected-order">
+              <div class="number mr12">
+                3
+              </div>
+              <div class="left-align">
+                Complete your order
+              </div>
+            </div>
+      </div>
+
+      <h2>HOW WAS IT ?</h2>
+      <div class="textcenter" >
+        <img class="mtop10 profilepic" src="img/<?php echo $row['img_name']; ?>" />
+        <div class="mtop10" id="username">
+          <?php echo $row['username']; ?>
+        </div>
+        <div class="mtop10" id="fullname">
+          <?php echo $row['fullname']; ?>
+        </div>
+      </br>
+        <form method='post' action="<?php echo 'history.php?id_active=' . $_GET['id_active'] ?>">
+          <span class="rating ">
+            <input id="rating1" type="radio" name="rating" value="1">
+            <label for="rating1">1</label>
+            <input id="rating2" type="radio" name="rating" value="2">
+            <label for="rating2">2</label>
+            <input id="rating3" type="radio" name="rating" value="3">
+            <label for="rating3">3</label>
+            <input id="rating4" type="radio" name="rating" value="4">
+            <label for="rating4">4</label>
+            <input id="rating5" type="radio" name="rating" value="5"checked>
+            <label for="rating5">5</label>
+          </span>
+          <textarea class="mtop10" style="height: 40px; width: 100%;"placeholder="Your comment..."></textarea>
+
+
+          <div class="mtop10 float-right">
+            <!-- <input class="button" type="submit" value="Complete Order" /> -->
+            <button type="submit" class="btn-complete">COMPLETE<br>ORDER</button>
+          </div>
+        </form>
+
+      </div>
+
+
+    </div>
+  </body>
+
+  <?php /*
+    if($clicked > 0) {
+      // Create connection
+      $conn = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
+      // Check connection
+      if ($conn->connect_error) {
+          die("Connection failed: " . $conn->connect_error);
+      }
+
+      $sql = "INSERT INTO orderhistory (order_id, date, u_driver, ) VALUES ('John', 'Doe', 'john@example.com')";
+
+      if ($conn->query($sql) === TRUE) {
+          echo "New record created successfully";
+      } else {
+          echo "Error: " . $sql . "<br>" . $conn->error;
+      }
+
+      $conn->close();
+    } */
+   ?>
+</html>

src/css/fan.css

+* {
+    box-sizing: border-box;
+}
+img {
+  max-width: 100%;
+  height: 100%;
+  width: auto;
+}
+h1 {
+  margin-top: 60px;
+  margin-bottom: 10px;
+  font-size: 40px;
+  font-family: Oswald;
+}
+/* Layout */
+.container {
+  margin: 20px auto;
+  max-width: 1280px;
+  width: 40%;
+  min-width: 540px;
+}
+.row::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+[class*="col-"] {
+    float: left;
+}
+.col-1 {width: 8.33%;}
+.col-2 {width: 16.66%;}
+.col-3 {width: 25%;}
+.col-4 {width: 33.33%;}
+.col-5 {width: 41.66%;}
+.col-6 {width: 50%;}
+.col-7 {width: 58.33%;}
+.col-8 {width: 66.66%;}
+.col-9 {width: 75%;}
+.col-10 {width: 83.33%;}
+.col-11 {width: 91.66%;}
+.col-12 {width: 100%;}
+
+/* Helper */
+.border {
+  border: 1px solid black;
+}
+.center-align {
+  text-align: center;
+}
+.right-align {
+  text-align: right;
+}
+.uppercase {
+  text-transform: uppercase;
+}
+/* Vertical center */
+.title {
+  font-size: 30px;
+  font-weight: bold;
+}
+.relative { /* parent */
+  position: relative;
+}
+.vertical-center { /* child */
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.vertical-flex-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.center-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.r0 {
+  right: 0;
+}
+.w100 {
+  width: 100%;
+}
+.br8 {
+  border-radius: 8px;
+}
+.br16 {
+  border-radius: 16px;
+}
+/* Margin */
+.mt5 {
+  margin-top: 5px;
+}
+.mt10 {
+  margin-top: 10px;
+}
+.mt20 {
+  margin-top: 20px;
+}
+.mt25 {
+  margin-top: 25px;
+}
+.mt40 {
+  margin-top: 40px;
+}
+.mr25 {
+  margin-right: 25px
+}
+.mr67 {
+  margin-right: 67px;
+}
+.m0 {
+  margin:0;
+}
+.mb0 {
+  margin-bottom: 0px;
+}
+.mb25 {
+  margin-bottom: 25px;
+}
+/* Padding */
+.p5 {
+  padding: 5px;
+}
+.p10 {
+  padding: 10px;
+}
+.p15 {
+  padding: 15px;
+}
+.px10 {
+  padding: 0 10px;
+}
+.px15 {
+  padding: 0 15px;
+}
+/* Background color */
+.green-bg {
+  background: #82D800;
+}
+.red-bg {
+  background: #D50027;
+}
+
+/* Text Color */
+.red {
+  color: red;
+}
+.green {
+  color: green;
+}
+.blue {
+  color: blue;
+}
+.orange {
+  color: #FD9927;
+}
+.grey {
+  color: #999999;
+}
+
+/* Navigation */
+nav ul {
+  list-style: none !important;
+  margin: 0;
+  padding: 0;
+}
+nav ul li {
+  float: left;
+  display: block;
+  text-align: center;
+  text-transform: uppercase;
+  width: 33.33%;
+  border: 1px solid black;
+  
+}
+nav ul li a {
+  cursor: pointer;
+  display: block;
+  text-decoration: none;
+  color: black;
+  padding: 8px;
+  font-weight: bold;
+  font-size: 24px;
+  font-family: Roboto;
+}
+nav ul li a:hover {
+  cursor: pointer;
+  display: block;
+  text-decoration: none;
+  color: white;
+  background: #465D43;
+}
+nav ul li a.active {
+  color: white;
+  background: #465D43;
+}
+
+/* Button */
+.btn-flat {
+  cursor: pointer;
+  border-style: none;
+  border: 1px solid grey;
+}
+.btn {
+  text-decoration: none;
+  color: black;
+  font-size: 14px;
+  font-family: Roboto;
+  padding: 7px 17px;
+  cursor: pointer;
+  border-style: none;
+  border-radius: 8px;
+  border: 1px solid black;
+}
+
+/* Toggle Switch */
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 29px;
+}
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+/* The slider */
+.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: 22px;
+  width: 22px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+input:checked + .slider {
+  background-color: #117D11;
+}
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+/* Rounded sliders */
+.slider.round {
+  border-radius: 20px;
+}
+.slider.round:before {
+  border-radius: 50%;
+}
+
+/* photo Profil */
+.photo-container {
+  width: 145px;
+  height: 145px;
+}
+.photo-update {
+  margin-top: 3px;
+}
+.photo-update input {
+  width: 75%;
+}
+
+/*.inputfile {
+  opacity: 0;
+  z-index: -1;
+}*/
+/*.inputfile + label span {
+    width: 75%;
+    min-height: 26px;
+    margin-right: 5px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: top;
+    border: 1px solid #C8C8C8;
+}
+
+.inputfile + label strong {
+    height: 100%;
+    color: black;
+    background-color: #D7D7D7;
+    display: inline-block;
+    padding: 3px 10px;
+    border: 1px solid #BBBBBB;
+    font-weight: normal;
+}*/
+
+/* Status */
+.status {
+  font-size: 17px;
+}
+.status .active {
+  background: #FFFE9F;
+}
+.status .col-3 {
+  width: 30%;
+}
+.round-numb {
+  width: 40px;
+  height: 40px;
+  display: block;
+  text-align: center;
+  background: #D9D9D9;
+  padding: 11px;
+  border-radius: 25px;
+}
+.numb {
+  position: relative;
+  height: 50px;
+}
+
+/* Driver */
+.driver {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.driver button {
+  margin-right: -15px;
+}
+
+/* Tab History */
+/* Style the tab */
+div.tab {
+  overflow: hidden;
+  border: 1px solid black;
+  background-color: white;
+}
+
+/* Style the buttons inside the tab */
+div.tab button {
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+  font-size: 17px;
+  width: 50%;
+  font-weight: bold;
+  text-transform: uppercase;
+  border: 1px solid black;
+}
+
+/* Change background color of buttons on hover */
+div.tab button:hover {
+  background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+div.tab button.active {
+  background-color: #6ACA6B;
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+  border-top: none;
+}
+.hide-btn {
+  position: absolute;
+  top: 0;
+}
+.date {
+  color: grey;
+  font-size: 16px;
+}
+.driver-name {
+  font-weight: bold;
+  text-transform: capitalize;
+  font-size: 20px;
+}
+.destination, .rating, .comment {
+  font-size: 14px;
+}
+.comment p {
+  padding-left: 10px;
+}
\ No newline at end of file

src/css/fan2.css

+h2 {
+  font-family: Oswald;
+}
+/* Main Container */
+.card {
+  margin-top: 20px;
+  width: 40%;
+  min-width: 540px;
+}
+
+/* Elements */
+.number {
+  padding: 10px 16px;
+  border-radius: 50%;
+  background-color: #D9D9D9;
+}
+
+.box {
+  border: 1px solid black;
+  text-align: center;
+}
+
+.box a {
+  display: block;
+  padding: 8px;
+}
+
+.box a:hover {
+  background-color: #465D43;
+  color: white;
+}
+
+.order-step {
+  padding: 10px;
+  margin-left: 20px;
+}
+
+.order-step:first-child {
+  margin-left: 0;
+}
+
+
+/* Fonts */
+.font-order {
+  font-size: 17px;
+}
+
+.font-title {
+  font-size: 40px;
+  font-weight: bold;
+  font-family: Oswald;
+}
+
+.font-header {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.font-navbar a {
+  font-family: Roboto;
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+  font-size: 24px;
+}
+
+/* Selection */
+.selected-navbar {
+  background-color: #465D43;
+}
+
+.selected-navbar a {
+  color: white;
+}
+
+.selected-order {
+  background-color: #fbff96;
+}
+
+
+/* container direction */
+.rowflex {
+  display: flex;
+  flex-direction: row;
+}
+
+
+/* Flex one */
+.flexone {
+  flex: 1;
+}
+
+/* Text Align */
+.textcenter {
+  text-align: center;
+}
+
+.textleft {
+  text-align: left;
+}
+
+.textright {
+  text-align: right;
+}
+
+
+/* Pictures */
+
+.profilepic {
+  width: 116px;
+  height: 116px;
+  border-radius: 50%;
+  border: 6px solid black;
+}
+
+.editpic {
+  width: 30px;
+  height: 30px;
+  margin-top: auto;
+}
+
+
+/* Users */
+#username {
+  font-weight: bold;
+  font-size: 30px;
+}
+#fullname, #email, #phone {
+  font-size: 20px;
+}
+.rating {
+  color: #FE9926;
+}
+.pref-loc {
+  font-family: Oswald;
+  font-size: 26px;
+}
+/* Floating */
+.float-right {
+  float: right;
+}
+
+/* Margins */
+.mtop10 {
+  margin-top: 10px;
+}
+
+.mtop30 {
+  margin-top: 30px;
+}
+
+.mtop50 {
+  margin-top: 50px;
+}
+
+.mcenter {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.mlauto {
+  margin-left: auto;
+}
+
+.mrauto {
+  margin-right: auto;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
+
+.mr12 {
+  margin-right: 12px;
+}
+
+/* List */
+li {
+  font-size: 20px;
+}
+
+/* Line height */
+.lh40 {
+  line-height: 40px;
+}
+
+/* Button */
+.button {
+  background-color: #82D800;
+  border: 1px solid black;
+  border-radius: 10px;
+  /* width: 99px; */
+  padding: 12px 28px;
+  font-size: 20px;
+}
+.btn-complete {
+  background-color: #82D800;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 7px 14px;
+  font-size: 18px;
+}
+/* Label */
+.labels {
+  width: 150px;
+  margin-right: 20px;
+  font-size: 20px;
+}
+
+
+/* text align */
+.left-align {
+  text-align: left;
+}
\ No newline at end of file

src/css/styles.css

+@import url('https://fonts.googleapis.com/css?family=Roboto');
+body {
+  font-family: Roboto, sans-serif;
+}
+h1 {
+  font-family: Oswald;
+  font-size: 40px;
+  margin-top: 60px;
+  margin-bottom: 10px;
+}
+h2 {
+  font-family: Oswald;
+  margin-bottom: 10px;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+li {
+  float: left;
+}
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 5px 15px;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+li a:hover {
+    background-color: #00897B;
+}
+.container {
+  margin: 25px auto auto;
+  width: 40%;
+}
+.login h1, .register h1 {
+  font-family: Oswald;
+  font-size: 55px;
+  margin-top: 4px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  z-index: 1;
+  color: #02702C;
+}
+
+.login h1:before, .register h1:before {
+  border-top: 2px solid #02702C;
+  content:"";
+  margin: 0 auto;
+  position: absolute;
+  top: 42px; left: 0; right: 0; bottom: 0;
+  width: 86%;
+  z-index: -1;
+}
+
+.login h1 span, .register h1 span { 
+  background: #8BBD3C; padding: 0 23px; 
+}
+
+.box {
+  width: 400px;
+  box-sizing: content-box;
+  box-shadow: #000000;
+  border: 8px solid #02702C;
+  text-align: justify;
+  background-color: #8BBD3C;
+  border-radius: 40px;
+  margin: auto;
+  height: 500px;
+}
+
+button {
+  width: 120px;
+  height: 50px;
+  margin: 40px auto;
+  background-color: #82D800;
+  border: 3px solid black;
+  border-radius: 10px;
+  font-size: 30px;
+  float: right;
+  position: relative;  
+  right: 20px;
+}
+label {
+  font-size: 24px;
+  padding-left: 24px;
+  color: #02702C;
+  display: inline-block;
+  float: left;
+  clear: left;
+  width: 128px;
+  text-align: left;
+  height: 25px;
+}
+.register label {
+  font-size: 16px;
+  margin: 5px 0px;
+  padding-left: 12px;
+  color: #02702C;
+  display: inline-block;
+  float: left;
+  clear: left;
+  width: 142px;
+  text-align: left;
+  height: 25px;
+}
+.btn-register {
+  height: 50px;
+  margin: 40px auto;
+  background-color: #82D800;
+  border: 3px solid black;
+  border-radius: 10px;
+  font-size: 20px;
+  float: right;
+}
+.form-group {
+  margin-top: 40px;
+  padding-top: 20px;
+}
+.form-control {
+  height: 25px;
+  width: 227px;
+  padding: 5px;
+  border: 1px solid black;
+  box-sizing: border-box;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
+}
+
+.signup-link {
+  font-size: 14px;
+  float: left;
+  margin: 50px 25px;
+  color: #333333;
+}
+.signin-link {
+  font-size: 14px;
+  float: left;
+  margin: 30px 25px;
+  color: black;
+}
+.checkbox {
+  font-size: 16px;
+  color: #02702C;
+  float: left;
+  margin: 5px;
+}
+
+
+img {
+  width : 150px;
+  float: left;
+}
+a {
+
+}
+a img {
+  width: 20px;
+}
+.icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 16px;
+}
+table {
+    border-collapse: collapse;
+}
+
+table, th, td {
+    border: 1px solid #C8C8C8;
+}
+
+.form-inline button{
+  margin: auto;
+}
+
+.loc {
+  width: 418px;
+  border-color: #C8C8C8;
+}
+.btn-css {
+  font-size: 16px;
+  width: 80px;
+  height: 35px;
+  border: 1px solid;
+}
+
+.btn-danger {
+  background-color: red;
+  float: left;
+  left: 3px;
+  font-size: 16px;
+  width: 80px;
+  height: 35px;
+  border: 1px solid;
+}
+
+input.form-control.validation {
+  width: 150px;
+}
+
+.valid-status {
+  width: 15px;
+  height: 15px;
+}
+
+.valid-status img {
+    width: 16px;
+    float: initial;
+    margin-bottom: -4px;
+    margin-left: 5px;
+}
+
+/* layout */
+.wid70 {
+  width: 70%;
+}
+.wid20 {
+  width: 20%;
+}
+
+.action-column {
+  text-align: center;
+  display: inline-flex;
+  border: none;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+.invalid-text {
+  color: red;
+  font-weight: bold;
+  padding-left: 25px;
+}
+
+.left-align {
+  text-align: left !important;
+}
\ No newline at end of file

src/css/stylesheet.css

+.header-box {
+  border: 1px solid black;
+  padding: 10px 10px 10px 10px;
+  font-size: 30px;
+  font-family: sans-serif;
+  text-align: center;
+  flex: 1;
+}
+
+.header-box:first-child {
+  background-color: #244224;
+  color: white;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
+.step-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.step-box:first-child {
+  margin-left: 0;
+}
+
+.step-box:last-child {
+  background-color: #fbff96;
+}
+
+.step-box {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  border: 1px solid black;
+  margin-left: 40px;
+}
+
+.round-num {
+  text-align: center;
+  line-height: 40px;
+  background-color: grey;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin: 5px 5px 5px 5px;
+}
+
+.step-box p {
+  flex: 1;
+}
+
+.driver-pic {
+  height: 120px;
+  width: 120px;
+  border-radius: 50%;
+  border: 4px solid black;
+}
+
+.driver-container {
+  text-align: center;
+}
+
+.compl-button {
+  float: right;
+  background-color: #7ecc20;
+  border-radius: 8px;
+  border: 1px solid black;
+  font-size: 20px;
+  width: 130px;
+  text-align: center;
+  margin: 20px;
+}
+
+
+.page-header {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+
+.user-info {
+  flex: 1;
+  text-align: right;
+}
+
+.page-header div p {
+    margin: 0 0 5px 0;
+}
+.company-name {
+  font-size: 35px;
+}
+
+.company-name span {
+  color: red;
+  font-weight: bold;
+}
+.company-name span:first-child {
+  color: green;
+}
+
+.company-tagline {
+  color: green;
+}
+
+.user-name span {
+  font-weight: bold;
+}
+
+.logout {
+  text-decoration: underline;
+  color: blue;
+}
+
+
+.driver-username {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+textarea {
+    width: 100%;
+    height: 150px;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+    font-size: 16px;
+    margin-bottom: 0;
+    resize: none;
+}
+
+.rating-container {
+    width: 200px; /*can be in percentage also.*/
+    height: auto;
+    margin: 0 auto 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.rating {
+  flex: 1;
+  text-align: center;
+  border: 1px solid black;
+  height: 20px;
+  width: 20px;
+  margin-left: 20px;
+}
+
+.rating:first-child {
+  margin-left: 0;
+}

src/css/stylesheet2.css

+.header-box {
+  border: 1px solid black;
+  padding: 10px 10px 10px 10px;
+  font-size: 30px;
+  font-family: sans-serif;
+  text-align: center;
+  flex: 1;
+}
+
+.header-box.active {
+  background-color: #244224;
+  color: white;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
+.step-container {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 20px;
+}
+
+.step-box:first-child {
+  margin-left: 0;
+  background-color: #fbff96;
+}
+
+
+.step-box {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  border: 1px solid black;
+  margin-left: 40px;
+}
+
+.round-num {
+  text-align: center;
+  line-height: 40px;
+  background-color: grey;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin: 5px 5px 5px 5px;
+}
+
+.step-box p {
+  flex: 1;
+}
+
+
+.page-header {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+
+.user-info {
+  flex: 1;
+  text-align: right;
+}
+
+.page-header div p {
+    margin: 0 0 5px 0;
+}
+.company-name {
+  font-size: 35px;
+}
+
+.company-name span {
+  color: red;
+  font-weight: bold;
+}
+.company-name span:first-child {
+  color: green;
+}
+
+.company-tagline {
+  color: green;
+}
+
+.user-name span {
+  font-weight: bold;
+}
+
+.logout {
+  text-decoration: underline;
+  color: blue;
+}
+
+.dest-input {
+  display: flex;
+  flex-direction: row;
+}
+
+.dest-input p {
+  text-align: center;
+  font-size: 25px;
+}
+.dest-input * {
+  flex: 1;
+  margin: 20px;
+}
+
+
+.next-button {
+  background-color: #7ecc20;
+  border-radius: 8px;
+  border: 1px solid black;
+  font-size: 20px;
+  width: 100px;
+  text-align: center;
+  margin: auto;
+  padding: 10px 0 10px 0;
+}
+.item{
+  display: block;
+  margin: 20px;
+}
+
+.item img {
+  margin: 0 10px;
+  height: 128px;
+  align-items: center;
+  float: left;
+}

src/dbconfig.php

+<?php
+  define('DB_SERVER', 'localhost');
+  define('DB_USERNAME', 'root');
+  define('DB_PASSWORD', 'root');
+  define('DB_NAME', 'tubes1-wbd');
+
+ ?>

src/edit-prefered-location.php

+<?php
+require_once 'dbconfig.php';
+if ($_SERVER['REQUEST_METHOD'] == 'POST'){
+  $id = $_GET['id_active'];
+  $sqlconn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
+  if (!$sqlconn) {
+    die('mySQL connection failed');
+  }
+  if ($_GET['type'] == 'add'){
+    $location = $_POST['location'];
+    // Menyiapkan statement INSERT
+    $sqlquery = 'INSERT INTO prefloc (id,location) SELECT ?, ? FROM prefloc WHERE NOT EXISTS (SELECT id, location FROM prefloc WHERE id=? AND location=?) LIMIT 1';
+    $stmt = mysqli_prepare($sqlconn, $sqlquery);
+
+    // Bind variables
+    mysqli_stmt_bind_param($stmt, "isis", $id, $location, $id, $location);
+
+    if(mysqli_stmt_execute($stmt)){
+      echo 'sesuatu';
+      header('location: '. htmlspecialchars($_SERVER["PHP_SELF"]) .'?id_active='. $_GET['id_active']);
+    } else {
+      echo 'gagal';
+    }
+  } elseif ($_GET['type'] =='update'){
+    // Menyiapkan statement INSERT
+    $newLoc = $_POST['newVal'];
+    $oldLoc = $_POST['oldVal'];
+    $sqlquery = 'UPDATE prefloc SET location=? WHERE id=? AND location=?';
+    $stmt = mysqli_prepare($sqlconn, $sqlquery);
+
+    // Bind variables
+    mysqli_stmt_bind_param($stmt, "sis", $newLoc, $id, $oldLoc);
+
+    if(mysqli_stmt_execute($stmt)){
+      echo 'OK';
+    } else {
+      echo 'gagal';
+  }
+}
+  mysqli_stmt_close($stmt);
+
+  mysqli_close($sqlconn);
+}
+if ($_SERVER['REQUEST_METHOD'] == 'DELETE'){
+  $id = $_GET['id_active'];
+  $location = $_GET['location'];
+  $sqlconn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
+  if (!$sqlconn) {
+    die('mySQL connection failed');
+  }
+
+  // Menyiapkan statement SELECT
+  $sqlquery = 'DELETE FROM prefloc WHERE id=? AND location=?';
+  $stmt = mysqli_prepare($sqlconn, $sqlquery);
+
+  // Bind variables
+  mysqli_stmt_bind_param($stmt, "is", $id, $location);
+  if(mysqli_stmt_execute($stmt)){
+    echo "OK";
+  } else {
+    echo "gagal";
+  }
+  mysqli_stmt_close($stmt);
+  mysqli_close($sqlconn);
+}
+if ($_SERVER['REQUEST_METHOD'] == 'GET'){
+  $id = $_GET['id_active'];
+  $sqlconn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
+  if (!$sqlconn) {
+    die('mySQL connection failed');
+  }
+
+  // Menyiapkan statement SELECT
+  $sqlquery = 'SELECT location FROM prefloc WHERE id=?';
+  $stmt = mysqli_prepare($sqlconn, $sqlquery);
+
+  // Bind variables
+  mysqli_stmt_bind_param($stmt, "i", $id);
+
+
+
+ ?>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Edit Prefered Location</title>
+    <script src="js/edit-pref-loc.js" charset="utf-8"></script>
+    <link rel="stylesheet" href="css/styles.css">
+    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container">
+      <h1>EDIT PREFERED LOCATIONS</h1>
+      <table style="text-align: center; width: 100%;">
+        <thead>
+          <th>No</th>
+          <th class="wid70">Location</th>
+          <th class="wid20">Actions</th>
+        </thead>
+        <tbody>
+<?php
+if(mysqli_stmt_execute($stmt)){
+  // Simpan Hasil query
+  mysqli_stmt_store_result($stmt);
+  mysqli_stmt_bind_result($stmt, $location);
+  $i = 1;
+  while (mysqli_stmt_fetch($stmt)) {
+    echo '<tr>'.
+      '<td>' . $i . '</td>'.
+      '<td>' . $location . '</td>'.
+      '<td >'.
+      '<div class="action-column">'.
+        '<a onclick="editLoc(this)"><img src="img/pencil.png" class="icon" alt="edit"></a>'.
+        '<a onclick="delLoc(this)"><img src="img/delete.png" class="icon" alt="delete"></a>'.
+      '</div>'.
+      '</td>'.
+      '</tr>';
+        $i++;
+      }
+    }
+    mysqli_stmt_close($stmt);
+  }
+  mysqli_close($sqlconn);
+?>
+        </tbody>
+      </table>
+      <br>
+
+      <h2>ADD NEW LOCATION:</h2>
+      <form class="form-inline" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) .'?id_active='. $_GET['id_active'] . '&type=add';?>" onsubmit="return isFilled()" method="post">
+        <input type="text" class="form-control loc" name="location" >
+
+        <button type="submit" class="btn-css">ADD</button>
+      </form>
+      <br>
+      <button type="button" class="btn-danger" onclick="location.href = 'profile.php?id_active=<?php echo $id;?>';">BACK</button>
+    </div>
+  </body>
+</html>
+<?php
+
+ ?>

src/edit-profile.php

+<!DOCTYPE html>
+<?php
+  require_once 'dbconfig.php';
+
+  $sqlconn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
+  if (!$sqlconn) {
+    die('mySQL connection failed');
+  }
+
+  // Menyiapkan statement SELECT
+  $sqlquery = 'SELECT username, fullname, email, phoneno, isdriver, avg_vote, n_voters, img_name FROM userinfo WHERE id=?';
+  $stmt = mysqli_prepare($sqlconn, $sqlquery);
+
+  // Bind variables
+  mysqli_stmt_bind_param($stmt, "i", $_GET['id_active']);
+
+  if(mysqli_stmt_execute($stmt)){
+    // Simpan Hasil query
+    mysqli_stmt_store_result($stmt);
+    // username exist
+    mysqli_stmt_bind_result($stmt, $username, $fullname, $email, $phoneno, $isdriver, $avg_vote, $n_voters, $img_name);
+
+    mysqli_stmt_fetch($stmt);
+  }
+?>
+<html>
+<head>
+  <title>Edit Profile</title>
+  <link rel="stylesheet" type="text/css" href="css/fan.css">
+  <link href="https://fonts.googleapis.com/css?family=Oswald|Roboto" rel="stylesheet">
+</head>
+<body>
+  <main class="container">
+  <form action="update.php" method="post" enctype="multipart/form-data">
+    <h1 class="uppercase">Edit Profile Information</h1>
+    <div class="row relative mb25">
+      <div class="col-4">
+        <div class="photo-container">
+          <?php echo '<img class="border" src="img/' . $img_name . '" />' ?>
+        </div>
+      </div>
+      <div class="col-8 vertical-center r0">
+          Update profile picture<br>
+          <div class="photo-update">
+            <input type="file" name="fileToUpload" id="fileToUpload" class="inputfile">
+            <!-- <label for="file"><span></span><strong>Browse</strong></label> -->
+          </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-4">Your Name</div>
+      <div class="col-8"><input type="text" name="name" class="w100" value="<?php echo $fullname; ?>"></div>
+    </div>
+    <div class="row mt5">
+      <div class="col-4">Phone</div>
+      <div class="col-8"><input type="text" name="phone" maxlength="14" class="w100" value="<?php echo $phoneno; ?>"></div>
+    </div>
+    <div class="row mt5">
+      <div class="col-4">Status Driver</div>
+      <div class="col-8 right-align">
+        <!-- Rounded switch -->
+        <label class="switch">
+          <?php 
+            if ($isdriver == 1) {
+              echo '<input name="isdriver" type="checkbox" checked>';
+            }else {
+              echo '<input name="isdriver" type="checkbox">';
+            }
+          ?>
+          <span class="slider round"></span>
+        </label>
+      </div>
+    </div>
+    <input type="hidden" name="id_active" value="<?php echo $_GET['id_active'];?>">
+    <input type="hidden" name="username" value="<?php echo $username;?>">
+    <div class="row mt25">
+      <div class="col-6"><a href="profile.php?id_active=<?php echo $_GET['id_active'];?>" class="btn red-bg uppercase">Back</a></div>
+      <div class="col-6 right-align"><button type="submit" class="btn green-bg uppercase">Save</button></div>
+    </div>
+  </form>
+  </main>
+
+</body>
+</html>
+<?php
+
+?>
\ No newline at end of file

src/hide.php

+<?php
+  require_once 'dbconfig.php';
+
+  $sqlconn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
+  if (!$sqlconn) {
+    die('mySQL connection failed');
+  }
+
+  $type = $_GET["type"];
+  $id = $_GET["id"];
+
+  if ($type == 0) {
+    $ishide=1;
+    $sqlquery = "UPDATE orderhistory SET ishide_cust=? WHERE order_id=?";
+    $stmt = mysqli_prepare($sqlconn, $sqlquery);
+    mysqli_stmt_bind_param($stmt, "ii", $ishide, $id);
+    mysqli_stmt_execute($stmt);
+  }else{
+    $ishide=1;
+    $sqlquery = "UPDATE orderhistory SET ishide_driver=? WHERE order_id=?";
+    $stmt = mysqli_prepare($sqlconn, $sqlquery);
+    mysqli_stmt_bind_param($stmt, "ii", $ishide, $id);
+    mysqli_stmt_execute($stmt);
+  }
+  
+
+?>
\ No newline at end of file

src/history-driver.php

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>History</title>
+    <link type="text/css" rel="stylesheet" href="css/stylesheet2.css"/>
+  </head>
+  <body>
+    <div class="page-header">
+      <div class="company-info">
+        <p class="company-name"><span>PR</span>-<span>OJEK</span></p>
+        <p class="company-tagline">wushh.. wush.. wush.. ngeeeeng...</p>
+
+      </div>
+      <div class="user-info">
+        <p class="user-name">Hi, <span>pikapikapikachu</span> !</p>
+        <p class="logout">Logout</p></div>
+      </div>
+
+      <div class="container">
+        <div class="header-box">ORDER</div>
+        <div class="header-box active">HISTORY</div>
+        <div class="header-box">MY PROFILE </div>
+      </div>
+      <br>
+      <h1>TRANSACTION HISTORY</h1>
+      <div class="container">
+        <div class="header-box">
+          MY PREVIOUS ORDER
+        </div>
+        <div class="header-box active">
+          DRIVER HISTORY
+        </div>
+      </div>
+      <div class="item">
+        <img src="img/e46_m3_motor.jpg" alt="profile picture">
+
+          Minggu, 1 Oktober 2017 <br>M3 <br>
+          Bandung-Solo <br>
+          gave 10 stars for this order <br>and left comment :
+          U R everything
+
+      </div>
+  </body>
+</html>

src/history.php

+<!DOCTYPE html>
+<?php
+    require_once 'dbconfig.php';
+
+    $sqlconn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
+    if (!$sqlconn) {
+      die('mySQL connection failed');
+    }
+
+    // Menyiapkan statement SELECT
+    $sqlquery = 'SELECT username, fullname, email, phoneno, isdriver, avg_vote, n_voters, img_name FROM userinfo WHERE id=?';
+    $stmt = mysqli_prepare($sqlconn, $sqlquery);
+
+    // Bind variables
+    mysqli_stmt_bind_param($stmt, "i", $_GET['id_active']);
+
+    if(mysqli_stmt_execute($stmt)){
+      // Simpan Hasil query
+      mysqli_stmt_store_result($stmt);
+      // username exist
+      mysqli_stmt_bind_result($stmt, $username, $fullname, $email, $phoneno, $isdriver, $avg_vote, $n_voters, $img_name);
+
+      mysqli_stmt_fetch($stmt);
+    }
+
+    //AMBIL DATA HISTORY ORDER
+    $query_order_history = 'SELECT order_id, date, u_customer, u_driver, source, destination, rating_given, comment_given, img_name, ishide_cust FROM orderhistory INNER JOIN userinfo ON orderhistory.u_customer=userinfo.username AND userinfo.username=?';
+    $order_history = mysqli_prepare($sqlconn, $query_order_history);
+
+    // Bind variables
+    mysqli_stmt_bind_param($order_history, "s", $username);
+
+    if(mysqli_stmt_execute($order_history)){
+      // Simpan Hasil query
+      mysqli_stmt_store_result($order_history);
+      // username exist
+      mysqli_stmt_bind_result($order_history, $id, $date, $u_customer, $u_driver, $source, $destination, $rating_given, $comment_given, $img_name, $ishide_cust);
+    }
+
+    //AMBIL DATA DRIVER HISTORY
+    $query_driver_history = 'SELECT order_id, date, u_customer, u_driver, source, destination, rating_given, comment_given, img_name, ishide_driver FROM orderhistory INNER JOIN userinfo ON orderhistory.u_customer=userinfo.username AND orderhistory.u_driver=?';
+    $driver_history = mysqli_prepare($sqlconn, $query_driver_history);
+
+    // Bind variables
+    mysqli_stmt_bind_param($driver_history, "s", $username);
+
+    if(mysqli_stmt_execute($driver_history)){
+      // Simpan Hasil query
+      mysqli_stmt_store_result($driver_history);
+      // username exist
+      mysqli_stmt_bind_result($driver_history, $id, $date, $u_customer, $u_driver, $source, $destination, $rating_given, $comment_given, $img_name, $ishide_driver);
+    }
+?>
+<html>
+<head>
+    <title>History</title>
+    <link rel="stylesheet" type="text/css" href="css/fan.css">
+    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
+</head>
+<body>
+  <!-- Start Header -->
+  <header class="container">
+    <div class="row">
+      <div class="col-6">
+        <div class="title"><span class="green">PR-</span><span class="red">OJEK</span></div>
+        <div class="green">wushh... wushh... ngeeeeeenggg...</div>
+      </div>
+      
+      <div class="col-6 right-align mt10">
+        Hi, <b><?php echo $username ?></b> !<br>
+        <a href="login.php"><span class="blue">Logout</span></a>
+      </div>
+    </div>
+    <!-- Start Navigation -->
+    <nav class="mt10">
+      <ul>
+        <li><a href="order-ojek.php?id_active=<?php echo $_GET['id_active'] ?>">Order</a></li>
+        <li><a href="#" class="active">History</a></li>
+        <li><a href="profile.php?id_active=<?php echo $_GET['id_active'] ?>">My Profile</a></li>
+      </ul>
+    </nav>
+    <!-- End Navigation -->
+  </header>
+  <!-- End Header -->
+  <main class="container">
+    <h1 class="uppercase">Transaction History</h1>
+    <!-- Start Tab History -->
+    <!-- Start Tab Button -->
+    <div class="tab">
+      <button class="tablinks" onclick="openTab(event, 'order')" id="defaultOpen">My Previous Orders</button>
+      <button class="tablinks" onclick="openTab(event, 'driver')">Driver History</button>
+    </div>
+    <!-- End Tab Button -->
+    <!-- Start Previous Order Content Tab -->
+    <div id="order" class="tabcontent active">
+      <?php
+      while (mysqli_stmt_fetch($order_history)) {
+        if ($ishide_cust == 0){
+          switch ($rating_given) {
+            case 1:
+              $rating='&#9734;';
+              break;
+            case 2:
+              $rating='&#9734;&#9734;';
+              break;
+            case 3:
+              $rating='&#9734;&#9734;&#9734;';
+              break;
+            case 4:
+              $rating='&#9734;&#9734;&#9734;&#9734;';
+              break;
+            case 4:
+              $rating='&#9734;&#9734;&#9734;&#9734;&#9734;';
+              break;
+            default:
+              $rating='';
+          }
+          $date=strtotime($date);
+          $id_hide="'order$id'";
+          $listhistory = '
+          <!-- Start List Item -->
+          <div class="row mt40" id="order'.$id.'">
+            <div class="col-4 photo-container px15">
+              <img src="img/'.$img_name.'" class="border">
+            </div>
+            <div class="col-8 relative">
+              <div class="date">'.date("l, F j",$date).'th '.date("Y",$date).'</div>
+              <div class="driver-name">'.$u_driver.'</div>
+              <div class="destination mt10">'.$source.' &#8594; '.$destination.'</div>
+              <div class="rating mt10">You rated: <span class="orange">'.$rating.'</span></div>
+              <div class="comment">You commented:
+              <p class="m0">'.$comment_given.'</p></div>
+              <div class="hide-btn r0 t0">
+                <button class="uppercase btn red-bg" onclick="hideCust('.$id_hide.','.$id.')">Hide</button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- End List Item -->';
+          echo $listhistory;
+        }
+        
+      }
+      ?>
+    </div>
+    <!-- End Previous Order Content Tab -->
+
+    <!-- Start Driver History Content Tab -->
+    <div id="driver" class="tabcontent">
+      <?php
+      while (mysqli_stmt_fetch($driver_history)) {
+        $date=strtotime($date);
+        if ($ishide_driver == 0){
+          $id_hide="'driver$id'";
+          $listhistory = '
+            <!-- Start List Item -->
+            <div class="row mt40" id="driver'.$id.'">
+              <div class="col-4 photo-container px15">
+                <img src="img/'.$img_name.'" class="border">
+              </div>
+              <div class="col-8 relative">
+                <div class="date">'.date("l, F j",$date).'th '.date("Y",$date).'</div>
+                <div class="driver-name">'.$u_customer.'</div>
+                <div class="destination mt5">'.$source.' &#8594; '.$destination.'</div>
+                <div class="rating mt5">gave <span class="orange">'.$rating_given.'</span> stars for this order</div>
+                <div class="comment mt5">and left comment:
+                <p class="m0">'.$comment_given.'</p></div>
+                <div class="hide-btn r0 t0">
+                  <button class="uppercase btn red-bg" onclick="hideDriver('.$id_hide.','.$id.')">Hide</button>
+                </div>
+              </div>
+            </div>
+            <!-- End List Item -->';
+
+          echo $listhistory;
+        }
+      }
+      ?>
+    </div>
+    <!-- End Driver History Content Tab -->
+    <!-- End Tab History -->
+  </main>
+
+  <script src="js/fan.js"></script>
+</body>
+</html>