.gitignore

+.idea

.htaccess

+<IfModule mod_rewrite.c>
+Redirect 301 / https://google.com
+<IfModule mod_negotiation.c>
+    Options -MultiViews
+</IfModule>
+
+RewriteEngine On
+
+# Redirect Trailing Slashes...
+RewriteRule ^(.*)/$ /$1 [L,R=301]
+
+# Handle Front Controller...
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^ index.php [L]
+</IfModule>
\ No newline at end of file

README.md

@@ -2,164 +2,41 @@
 
 Membuat sebuah Website Ojek Online
 
-## Deskripsi Singkat
+## Tentang Proyek
 
-Pada tugas besar ini, Anda diminta untuk membuat aplikasi *ojek online* **berbasis web** yang memungkinkan seorang pengguna untuk menjadi penumpang dan/atau driver ojek online. Untuk menggunakan aplikasi ini, seorang pengguna harus melakukan login. Pengguna dapat menjadi penumpang maupun driver pada akun yang sama. Untuk menjadi driver, pengguna harus mengaktifkan opsi menjadi driver pada profilnya.
+Web ini merupakan web pemesanan ojek sederhana yang digunakan untuk tugas besar kuliah Pengembangan Berbasis Web. Tim Kami terdiri dari :
+- 13515086 - Muhammad Iqbal Al Khowarizmi
+- 13515146 - Fadhil Imam Kurnia
 
-Anda diminta untuk membuat tampilan sedemikian hingga mirip dengan tampilan pada contoh. Website yang diminta tidak responsive. Desain tampilan tidak perlu dibuat indah. Icon dan jenis font tidak harus sama dengan contoh. Warna font, garis pemisah, dan perbedaan ukuran font harus terlihat sesuai contoh. Format rating dan waktu harus terlihat sesuai contoh. Perhatikan juga **tata letak** elemen-elemen.
+Kami dari Tim DagoDev :D
 
-## Anggota Tim
+## Hasil Pengerjaan
+Berkut adalah beberapa tampilan hasil pengerjaan kami
 
-Setiap kelompok beranggotakan **3 orang dari kelas yang sama**. Jika jumlah mahasiswa dalam satu kelas modulo 3 menghasilkan 1, maka hanya 1 kelompok terdiri dari 4 mahasiswa. Jika jumlah mahasiswa modulo 3 menghasilkan 2, maka ada dua kelompok yang beranggotakan 4 orang.
+![](data/login.png)
+Halaman Login
 
-## Petunjuk Pengerjaan
+![](data/profil.png)
+![](data/edit_profile.png)
+Halaman Profil
 
-1. Buatlah organisasi pada gitlab dengan format "IF3110-2017-KXX-nama kelompok", dengan XX adalah nomor kelas.
-2. Tambahkan anggota tim pada organisasi anda.
-3. Fork pada repository ini dengan organisasi yang telah dibuat.
-4. Ubah hak akses repository hasil Fork anda menjadi **private**.
-5. Silakan commit pada repository anda (hasil fork). Lakukan berberapa commit dengan pesan yang bermakna, contoh: `add register form`, `fix logout bug`, jangan seperti `final`, `benerin dikit`. Disarankan untuk tidak melakukan commit dengan perubahan yang besar karena akan mempengaruhi penilaian (contoh: hanya melakukan satu commit kemudian dikumpulkan). Sebaiknya commit dilakukan setiap ada penambahan fitur. **Commit dari setiap anggota tim akan mempengaruhi penilaian.** Jadi, setiap anggota tim harus melakukan commit yang berpengaruh terhadap proses pembuatan aplikasi.
-6. Edit file readme ini semenarik mungkin (gunakan panduan Markdown language), diperbolehkan untuk merubah struktur dari readme ini. (Soal tidak perlu dipertahankan).
-7. Pada Readme terdapat tampilan aplikasi, dokumentasi yang menjelaskan website yang Anda buat, dan penjelasan mengenai pembagian tugas masing-masing anggota (lihat formatnya pada bagian **pembagian tugas**).
-8. Merge request dari repository anda ke repository ini dengan format **Nama kelompok** - **NIM terkecil** - **Nama Lengkap dengan NIM terkecil** sebelum **7 Oktober 2017 23.59**.
+![](data/order.png)
+![](data/order2.png)
+Halaman Order
 
-## Tools
-
-1. Untuk backend, wajib menggunakan **PHP** tanpa framework apapun. Harap diperhatikan, Anda harus mengimplementasikan fitur menggunakan HTTP method yang tepat.
-2. Gunakan **MySQL** untuk menyimpan data.
-3. Untuk frontend, gunakan Javascript, HTML dan CSS. **Tidak boleh** menggunakan library atau framework CSS atau JS seperti JQuery atau Bootstrap. CSS sebisa mungkin ada di file yang berbeda dengan PHP (tidak inline styling).
-
-## Spesifikasi
-
-### Login
-
-![](mocks/login.PNG)
-
-Pengguna dapat melakukan login sebagai user. Login hanya membandingkan username dan password saja, dan tidak perlu proteksi apapun. Halaman ini merupakan halaman pertama yang dibuka oleh pengguna ketika menjalankan aplikasi. Tidak ada proses otentikasi apakah pengguna sudah login atau belum dalam page lainnya. Identitas pengguna yang sedang login diberikan melalui HTTP GET pada URL (sebagai contoh: /profile.php?id_active=2 menandakan bahwa pengguna yang sedang login memiliki id pengguna = 2).
-
-### Register
-
-![](mocks/register.PNG)
-
-Pengguna dapat mendaftarkan diri sebagai user agar dapat menggunakan aplikasi ini. Satu user akan memiliki satu akun yang dapat digunakan sebagai penumpang maupun sebagai driver. User disediakan opsi untuk memilih apakah dia mau menjadi driver atau tidak saat registrasi. Anda harus melakukan validasi bahwa email dan username yang sama tidak boleh digunakan untuk dua kali mendaftar. **Validasi email dan username dilakukan menggunakan AJAX**. Jika email dan username valid akan ditandai dengan lambang centang seperti pada gambar. Setelah selesai register, jika pengguna tidak memilih opsi untuk menjadi driver, pengguna otomatis masuk ke halaman Order dengan keadaan sudah login. Jika pengguna memilih opsi menjadi driver, pengguna otomatis masuk ke halaman Profile dengan keadaan sudah login.
-
-### Profile
-
-![](mocks/profile.PNG)
-
-Pada halaman ini, ditampilkan username, nama lengkap, email, dan nomor HP. Selain itu, ditampilkan keterangan apakah pengguna merupakan driver atau bukan. Jika pengguna merupakan driver, ditampilkan tulisan Driver diikuti rating dan jumlah vote seperti terlihat pada gambar. Jika pengguna bukan driver, ditampilkan tulisan Non-Driver, tanpa diikuti rating. Pada bagian kanan atas, terdapat tombol edit, jika pengguna menekan tombol tersebut, pengguna dibawa ke halaman Edit-Profile.
-
-Pada bagian bawah, terdapat Preferred Location, yang berisi daftar lokasi yang dilayani pengguna jika berperan sebagai driver. Bagian ini ditampilkan jika pengguna merupakan driver. Pada bagian kanan atas, terdapat tombol edit, jika pengguna menekan tombol tersebut, pengguna dibawa ke halaman Edit-Preferred-Location.
-
-### Edit-Profile
-
-![](mocks/edit-profile.PNG)
-
-Pada halaman ini, pengguna dapat mengedit nama yang ditampilkan, nomor telepon, foto, dan status driver.
-
-Status driver berupa tombol Yes/No yang dapat diklik oleh pengguna untuk mengganti. Tombol Yes/No dapat berupa sekedar tulisan Yes dan No yang berubah saat ditekan. Pada saat tombol Yes/No ditekan, page tidak boleh refresh. Tulisan Yes dan No harus berbeda warna.
-
-**Bonus** Tombol Yes/No diimplementasikan seperti pada gambar, berupa semacam toggle yang akan berubah bentuk dan warna saat ditekan. Tombol Yes/No tersebut harus diimplementasikan dengan HTML dan CSS, **tidak boleh menggunakan image**.
-
-Pada bagian bawah halaman, terdapat tombol Back dan Save. Jika tombol Back ditekan, pengguna kembali ke halaman Profile. Jika tombol tersebut ditekan, nama dan nomor telepon pengguna akan diganti sesuai input field. Setelah tombol save ditekan, pengguna dibawa ke halaman Profile.
-
-### Edit-Preferred-Location
-
-![](mocks/edit-preferred-location.PNG)
-
-Pada Edit-Preferred-Location, ditampilkan lokasi-lokasi yang dapat dicapai jika menjadi driver. Pada tiap baris lokasi, ada tombol Delete. Jika tombol tersebut ditekan, akan tampil konfirmasi untuk delete, menggunakan Javascript. Setelah Delete, halaman akan refresh.
-
-Pada bagian Add New Location, terdapat sebuah text area dan sebuah tombol Add. Pada text area, pengguna dapat mengisikan lokasi untuk ditambahkan. Ketika tombol Add ditekan, alamat tersebut ditambahkan pada preferred location pengguna, dan halaman refresh.
-
-Jika tombol Back ditekan, pengguna dibawa kembali ke halaman Profile.
-
-Catatan: Format alamat dibebaskan kepada mahasiswa.
-
-**Bonus** Implementasikan edit preferred location, ketika tombol edit ditekan, cell yang bersangkutan berubah menjadi input field dan dapat diedit, dan tombol edit berubah menjadi tombol save. Jika tombol save ditekan, data diupdate dan halaman refresh.
-
-### Order-Ojek
-
-![](mocks/order-ojek.PNG)
-
-Order-Ojek merupakan halaman utama yang ditampilkan ketika user telah login. Pada halaman Order-Ojek, terdapat sebuah form yang dapat diisi pengguna untuk melakukan order.
-
-Perlu diperhatikan, tulisan di atas tombol logout memiliki format "Hi, username!". Selanjutnya, terdapat menu bar yang menampilkan 3 menu utama seperti pada gambar. Menu yang sedang dibuka diberikan warna background yang berbeda sebagai penanda halaman apa yang sedang dibuka pengguna.
-
-Setelah pengguna mengisi field-field pada form order dan menekan tombol order, pengguna akan dibawa ke halaman Select-Driver. Perlu diperhatikan bahwa seluruh field wajib diisi, kecuali field "Preferred Driver". Pada field Preferred Driver, terdapat Placeholder "(optional)"
-
-### Select-Driver
-
-![](mocks/select-driver.PNG)
-
-Pada halaman ini, ditampilkan driver-driver yang tersedia dan dapat mengambil order. Driver yang dapat mengambil order adalah pengguna yang menjadi driver, dan memiliki alamat asal *atau* alamat tujuan pada "Preferred Location"-nya.
-
-Halaman ini terdiri atas dua bagian, yaitu "Preferred Driver" dan "Other Drivers". Bagian "Preferred Driver" akan terisi dengan driver-driver dengan nama yang diisikan pengguna pada field "Preferred Driver" saat melakukan order. Jika pengguna tidak mengisikan field "Preferred Driver" atau tidak ada driver dengan nama yang diisikan pada field "Preferred Driver", bagian Preferred Driver akan kosong.
-
-Pada bagian "Other Drivers", ditampilkan seluruh driver yang dapat mengambil order tersebut.
-
-Perlu diperhatikan, pada setiap driver, terdapat foto, nama, dan rating driver tersebut. Rating dituliskan dengan format: Rating rata-rata (jumlah orang yang memberikan rating).
-
-Setelah memilih driver dan menekan tombol Confirm, pengguna dibawa ke halaman Complete-Order.
-
-### Complete-Order
-
-![](mocks/complete-order.PNG)
-
-Pada halaman Complete-Order, akan ditampilkan informasi driver dan order, serta opsi untuk memberikan rating dan komentar. Setelah pengguna submit rating dan komentar untuk driver, pengguna dibawa ke halaman Order-Ojek.
-
-Rating untuk driver berupa integer antara 1 sampai 5 (inklusif). Implementasi rating dibebaskan pada peserta.
-
-**Bonus** Implementasikan rating sesuai gambar.
-
-### History
-
-![](mocks/history-penumpang.PNG)
-
-![](mocks/history-driver.PNG)
-
-Pada halaman history, terdapat dua tab, yaitu History Penumpang dan History Driver. History Penumpang menampilkan daftar order yang pernah diambil pengguna sebagai penumpang, dan History Driver menampilkan daftar order yang pernah diambil pengguna sebagai driver.
-
-Pada tiap entri pada history, terdapat tombol hide. Jika tombol hide ditekan, history yang bersangkutan tidak akan ditampilkan, tapi tidak dihapus.
-
-### Validasi
-
-Validasi **wajib** dilakukan pada *client-side*, dengan menggunakan **javascript** bukan HTML 5 input type, yaitu:
-- Setiap field pada form tidak boleh kosong. Termasuk juga gambar barang ketika add product. Kecuali untuk Preferred Driver saat Order-Ojek.
-- Email harus sesuai format email.
-- Rating driver merupakan rata-rata dari semua rating yang diberikan pengguna.
-- Nama pengguna maksimal 20 karakter.
-- Nomor telepon pengguna minimal 9 digit dan maksimal 12 digit.
-
-## Knowledge
-
-Untuk meringankan beban tugas ini, ada berberapa keyword yang bisa anda cari untuk menyelesaikan tugas ini.
-- HTTP methods: get, post, put, delete
-- CSS: margin, padding, header tag, font-size, text-align, float, clear, border, color, div, span, placeholder, anchor tag.
-- Javascript : XMLHTTPRequest.
-- PHP: mysqli_connect, mysql_query, $_GET, $_POST, var_dump, print_r, echo, require, fungsi header.
-- SQL query: SELECT, INSERT, UPDATE, DELETE, WHERE, operator LIKE.
-Jika ada pertanyaan silakan tanyakan lewat milis.
-
-### Pembagian Tugas
-*Disarankan semua anggota kelompok mengerjakan tampilan dan fungsionalitasnya. Bukan hanya tampilan atau fungsionalitasnya saja*
+## Pembagian Tugas
+*Pada pengerjaan tugas ini setiap anggota dapat mengerjakan bagian frontend dan backend, ini karena skema MVC yang diterapkan memungkinkan pengerjaan secara paralel*
 
 **Tampilan**
-1. Login : 1351xxxx, 135xxxxx
-2. Register : 135xxxxx
-3. Lanjutkan ...
+1. Login : 13515146
+2. Register : 13515146
+3. Order : 13515146
+4. History : 13515086
+5. Profil : 13515146 
 
 **Fungsionalitas**
-1. Login : 135xxxxx, 135xxxxx
-2. Register : 135xxxxx
-3. Fungsionalitas : 135xxxxx,135xxxxx
-4. Lanjutkan...
-
-## About
-
-Asisten IF3110 2016
-
-Ade | Johan | Kristianto | Micky | Michael | Rangga | Raudi | Robert | Sashi 
-
-Dosen : Yudistira Dwi Wardhana | Riza Satria Perdana | Muhammad Zuhri Catur Candra
-
+1. Login : 13515086
+2. Register : 13515086
+3. Fungsionalitas : 13515146
+4. History : 13515086
 

data/db_dagojek.sql

+-- phpMyAdmin SQL Dump
+-- version 4.5.4.1deb2ubuntu2
+-- http://www.phpmyadmin.net
+--
+-- Host: localhost
+-- Generation Time: Oct 07, 2017 at 11:54 PM
+-- Server version: 10.0.31-MariaDB-0ubuntu0.16.04.2
+-- PHP Version: 7.0.22-0ubuntu0.16.04.1
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+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: `db_dagojek`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `driver`
+--
+
+CREATE TABLE `driver` (
+  `id` int(11) NOT NULL,
+  `rating` float NOT NULL DEFAULT '0',
+  `sum_order` int(11) NOT NULL DEFAULT '0'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+--
+-- Dumping data for table `driver`
+--
+
+INSERT INTO `driver` (`id`, `rating`, `sum_order`) VALUES
+(1, 4.15, 122),
+(2, 3.875, 131),
+(3, 0, 0),
+(4, 4.5, 3),
+(5, 0, 0),
+(6, 0, 0),
+(7, 0, 0);
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `prefered_location`
+--
+
+CREATE TABLE `prefered_location` (
+  `id_driver` int(11) NOT NULL,
+  `location` varchar(20) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+--
+-- Dumping data for table `prefered_location`
+--
+
+INSERT INTO `prefered_location` (`id_driver`, `location`) VALUES
+(1, 'Cipaganti'),
+(1, 'Dago Asri'),
+(1, 'Dago Pojok'),
+(1, 'Tubagus'),
+(2, 'Buah Batu'),
+(2, 'Cicaheum'),
+(2, 'Cikutra'),
+(2, 'Parongpong'),
+(2, 'Tubagus'),
+(4, 'Tubagus');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `user`
+--
+
+CREATE TABLE `user` (
+  `id` int(15) NOT NULL,
+  `name` varchar(50) NOT NULL,
+  `username` varchar(20) NOT NULL,
+  `email` varchar(40) NOT NULL,
+  `password` varchar(100) NOT NULL,
+  `phone` varchar(15) NOT NULL,
+  `photo` varchar(100) NOT NULL,
+  `is_driver` tinyint(1) NOT NULL DEFAULT '0'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+--
+-- Dumping data for table `user`
+--
+
+INSERT INTO `user` (`id`, `name`, `username`, `email`, `password`, `phone`, `photo`, `is_driver`) VALUES
+(1, 'Fadhil Imam Kurnia', 'fadhilimamk', '13515146@std.stei.itb.ac.id', 'dtashfVATSaashdbgasdjy78123bahsVJSF72vsahsj', '085797490039', '/img/profile/VGdWZUZ2dlJlUkM5eWpjVDcyQXJoZz09', 1),
+(2, 'Joko Susilo', 'jokosusilo', 'rahasia@gmail.com', 'd41d8cd98f00b204e9800998ecf8427e', '0247624517', '/img/profile/cXNNb1RtOXg0ckxtUVpoZGpiK3NTZz09', 1),
+(3, 'Abdul Majid', 'abdulmajid', 'abdul@gmail.com', 'jhasdTUAShasdbasdjask', '085741627404', '/img/profile/R2dXM01NcDVRV0lrVXdGTE5nbDZDdz09', 1),
+(4, 'Abdullah Malik Ibrahim', 'malikibrahim', 'malik@gmail.com', 'JHdgasjhdkjashjasd8asdjhas', '0247657917', '/img/profile/UFBqemxTWmtkZytjSmNSVWE4S2lTQT09', 1),
+(5, 'Joko Akbar', 'joko', 'jokoakbar@gmail.com', 'ac43724f16e9241d990427ab7c8f4228', '085797490039', '/img/empty_profile.png', 0),
+(6, 'Lifardi Muhammad', 'lifardi', 'lifardi@gmail.com', 'ac43724f16e9241d990427ab7c8f4228', '085797490039', '/img/empty_profile.png', 1),
+(7, 'Coba 3', 'coba', 'coba@gmail.com', 'ac43724f16e9241d990427ab7c8f4228', '085797490039', '/img/empty_profile.png', 0);
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `user_order`
+--
+
+CREATE TABLE `user_order` (
+  `id_order` int(11) NOT NULL,
+  `id_driver` int(11) NOT NULL,
+  `id_customer` int(11) NOT NULL,
+  `source` varchar(20) NOT NULL,
+  `destination` varchar(20) NOT NULL,
+  `rating` int(11) NOT NULL,
+  `comment` varchar(120) NOT NULL,
+  `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+--
+-- Dumping data for table `user_order`
+--
+
+INSERT INTO `user_order` (`id_order`, `id_driver`, `id_customer`, `source`, `destination`, `rating`, `comment`, `time`) VALUES
+(1, 4, 4, 'Tubagus', 'Dago Asri', 4, 'Mantap bang, pelayanan prima!', '2017-10-07 01:53:24'),
+(2, 1, 4, 'Tubagus', 'Dago Asri', 4, 'kjasdh kasjd', '2017-10-07 02:02:42'),
+(3, 2, 4, 'Tubagus', 'Dago Asri', 4, 'Pelayanannya terbaik!', '2017-10-07 02:03:23'),
+(4, 4, 4, 'Tubagus', 'Dago Asri', 4, 'Ini kan aku sendiri (?)', '2017-10-07 02:04:04'),
+(5, 2, 4, 'Tubagus', 'Dago Asri', 4, 'Mantap bang!', '2017-10-07 02:25:18'),
+(6, 4, 1, 'Tubagus', 'Dago Asri', 4, 'Mantap bang!', '2017-10-07 06:23:55'),
+(7, 4, 1, 'Tubagus', 'Dago Asri', 5, 'Siap!', '2017-10-07 06:24:40');
+
+--
+-- Indexes for dumped tables
+--
+
+--
+-- Indexes for table `driver`
+--
+ALTER TABLE `driver`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `prefered_location`
+--
+ALTER TABLE `prefered_location`
+  ADD PRIMARY KEY (`id_driver`,`location`);
+
+--
+-- Indexes for table `user`
+--
+ALTER TABLE `user`
+  ADD PRIMARY KEY (`id`),
+  ADD UNIQUE KEY `username` (`username`,`email`);
+
+--
+-- Indexes for table `user_order`
+--
+ALTER TABLE `user_order`
+  ADD PRIMARY KEY (`id_order`);
+
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT for table `user`
+--
+ALTER TABLE `user`
+  MODIFY `id` int(15) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
+--
+-- AUTO_INCREMENT for table `user_order`
+--
+ALTER TABLE `user_order`
+  MODIFY `id_order` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
+--
+-- Constraints for dumped tables
+--
+
+--
+-- Constraints for table `driver`
+--
+ALTER TABLE `driver`
+  ADD CONSTRAINT `driver_user_id` FOREIGN KEY (`id`) REFERENCES `user` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
+
+/*!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 */;

public/history.js

+function getHistoryAsCustomer() {
+    var userID = document.getElementById('customer-id').innerHTML;
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            resultData = JSON.parse(this.responseText);
+            bindCustomerResult(resultData);
+            console.log(resultData);
+        }
+    }
+    xhttp.open('POST', '/index.php/main/history/customer?u='+userID, true);
+    xhttp.send();
+
+}
+
+function getHistoryAsDriver() {
+    var userID = document.getElementById('customer-id').innerHTML;
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            resultData = JSON.parse(this.responseText);
+            bindDriverResult(resultData);
+            console.log(resultData);
+        }
+    }
+    xhttp.open('POST', '/index.php/main/history/driver?u='+userID, true);
+    xhttp.send();
+
+}
+
+function bindDriverResult(data) {
+
+    var html = '';
+    var customerNames = data.customerNames;
+    var results = data.history;
+    if (results != null && results.length != 0) {
+        results.forEach(function (driverItem) {
+            html += '' +
+                '<div class="row" id="'+driverItem.id_order+'">\n' +
+                '   <img src="'+customerNames[driverItem.id_driver].photo+'" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">\n' +
+                '   <h3><small>'+driverItem[7]+'</small><br>' +
+                '   '+customerNames[driverItem.id_driver].name+'<br>' +
+                '   </h3>' +
+                '   <h5>'+driverItem[3]+'-'+driverItem[4]+'<br>' +
+                '   You Rated: '+driverItem.rating+'<br>' +
+                '   You Commented: "'+driverItem.comment+'"</h5>' +
+                '   <a href="#" class="btn red" style="float: right; margin: 10px" onclick="hideElement(\''+driverItem.id_order+'\')">HIDE</a>\n' +
+                '</div>';
+        });
+        document.getElementById('driver-search-result').innerHTML = html;
+    }
+}
+
+function bindCustomerResult(data) {
+
+    var html = '';
+    var driverNames = data.driverNames;
+    var results = data.history;
+    if (results != null && results.length != 0) {
+        results.forEach(function (driverItem) {
+            html += '' +
+                '<div class="row" id="'+driverItem.id_order+'">\n' +
+                '   <img src="'+driverNames[driverItem.id_driver].photo+'" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">\n' +
+                '   <h3><small>'+driverItem[7]+'</small><br>' +
+                '   '+driverNames[driverItem.id_driver].name+'<br>' +
+                '   </h3>' +
+                '   <h5>'+driverItem[3]+'-'+driverItem[4]+'<br>' +
+                '   gave '+driverItem.rating+' rating<br>' +
+                '   and said, "'+driverItem.comment+'"</h5>' +
+                '   <a href="#" class="btn red" style="float: right; margin: 10px" onclick="hideElement(\''+driverItem.id_order+'\')">HIDE</a>\n' +
+                '</div>';
+        });
+        document.getElementById('driver-search-result').innerHTML = html;
+    }
+}
+
+function hideElement(elmtID) {
+    document.getElementById(elmtID).style.display = 'none';
+}
+
+// Subpage Navigation
+
+document.getElementById('page-tab-customer').onclick = function () {
+    showCustomerPage();
+    getHistoryAsCustomer();
+};
+
+document.getElementById('page-tab-driver').onclick = function () {
+    showDriverPage();
+    getHistoryAsDriver();
+};
+
+function showCustomerPage() {
+    var driverPage = document.getElementById('history-page-driver');
+    driverPage.style.display = 'none';
+    var customerPage = document.getElementById('history-page-customer');
+    customerPage.style.display = 'block';
+    document.getElementById('page-tab-driver').classList.remove("active");
+    document.getElementById('page-tab-customer').classList.add("active");
+}
+
+function showDriverPage() {
+    var customerPage = document.getElementById('history-page-customer');
+    customerPage.style.display = 'none';
+    var driverPage = document.getElementById('history-page-driver');
+    driverPage.style.display = 'block';
+    document.getElementById('page-tab-customer').classList.remove("active");
+    document.getElementById('page-tab-driver').classList.add("active");
+}