Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Commits on Source (26)
body {
font-family: 'Roboto', sans-serif;
color: #02702C;
margin-top: 40px;
}
.apps {
width: 380px;
height: 440px;
margin: 0 auto;
background: #8BBD3C;
border: 10px solid #02702C;
border-radius: 60px;
}
.form-heading {
margin: 0 auto;
display: flex;
}
.heading-left {
display: inline-block;
width: 25%;
padding: 45px 15px 45px 25px;
}
.heading-right {
display: inline-block;
width: 25%;
padding: 45px 25px 45px 15px;
}
.heading-title {
width: 40%;
padding: 5px;
text-align: center;
margin: auto;
font-size: 2.3em;
font-weight: 700;
line-height: 30px;
transform: scaleY(1.6);
}
.heading-left hr, .heading-right hr {
display: block;
height: 2px;
border: 0;
border-top: 2px solid #02702C;
margin: 0;
padding: 0 5px;
}
.form-login {
margin-top: 60px;
padding: 0 20px;
font-size: 1.5em;
}
.form-login .form-group {
margin-bottom: 10px;
}
.form-login .form-group label {
width: 30%;
display: inline-block;
}
.form-login .form-group input {
width: 60%;
}
.form-login .form-group input[type=text], .form-login .form-group input[type=password] {
height: 30px;
border: 1px solid black;
margin-left: 15px;
padding-left: 10px;
}
.form-login .action {
flex-wrap: wrap;
margin-top: 45px;
}
.form-login .action .register {
float: left;
}
.form-login .action .register a {
font-size: 0.6em;
color: #453333;
}
.form-login .action .submit {
float: right;
}
.form-login .action .submit input[type=submit] {
padding: 4px 28px;
background: #82D800;
border: 3px solid black;
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #453333;
border-radius: 10px;
width: 100%;
}
.form-signup {
padding: 0 10px;
font-size: 1em;
}
.form-signup .form-group {
margin-bottom: 3px;
display: flex;
flex-wrap: wrap;
}
.form-signup .form-group label {
width: 40%;
display: inline-block;
}
.form-signup .form-group input {
width: 53%;
}
.form-signup .form-group input[type=text], .form-signup .form-group input[type=password] {
height: 23px;
border: 1px solid black;
padding-left: 10px;
}
.form-signup .form-group input#username, .form-signup .form-group input#email {
width: 47%;
}
.form-signup .form-group span i {
display: none;
}
.form-signup .form-group span i:nth-of-type(2) {
color: #B33A3A;
}
.form-signup input[type=checkbox] {
margin-top: 15px;
}
.form-signup .action {
margin-top: 30px;
}
.form-signup .action .login {
float: left;
}
.form-signup .action .login a {
font-size: 0.8em;
color: #453333;
}
.form-signup .action .submit {
float: right;
margin-right: 10px;
}
.form-signup .action .submit input[type=submit] {
padding: 10px 5px;
background: #82D800;
border: 3px solid black;
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #453333;
border-radius: 10px;
width: 100%;
}
.mainHeader {
width: 500px;
height: 50px;
}
.header1 {
float: left;
}
.header2 {
float: right;
font-family: "Trebuchet MS";
}
.title {
font-family: "Hoefler Text";
font-size: 31px;
font-weight: bold;
color: black;
height: 27px;
}
.title.red {
color: #cb0a1d;
}
.title.green {
color : #066422;
}
.subtitle {
color: #4f9500;
font-size: 16px;
font-family: "Hoefler Text"
}
.username {
padding-top: 10px;
}
.username.bold {
font-weight: bold;
}
.logout {
text-align: right;
text-decoration: underline;
color: blue;
}
h1 {
color: #494949;
font-size: 35px;
font-family: "Trebuchet MS";
margin-top: 10px;
margin-bottom: 15px;
}
.contentBox {
width: 550px;
height: 480px;
margin: 0 auto;
background: white;
font-family: "Trebuchet MS";
}
.menu {
margin: 20px;
width: 165px;
height: 45px;
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
line-height: 45px;
font-family: "Trebuchet MS";
font-weight: bold;
font-size: 24px;
}
.menu:not(:last-child) {
border-right : none;
}
.menu.active {
background: #3a563f;
border: 1px solid #253828;
color: white;
}
.submenu {
margin: 10px;
width: 245px;
height: 45px;
display: table-cell;
border: 0.5px solid black;
text-align: center;
vertical-align: middle;
line-height: 40px;
font-family: "Trebuchet MS";
font-size: 20px;
float : center;
}
.submenu:not(:last-child) {
border-right : none;
}
.submenu.active {
background: #41e06b;
}
.listBox {
height: auto;
width: 500px;
margin:40px 20px 20px 20px;
}
.thumbnail {
border: none;
width: 100px;
height: auto;
display: inline-block;
float: left;
margin-right: 20px;
}
.date {
font-family: "Trebuchet MS";
font-size: 14px;
margin-left: 15px;
}
.name {
font-family: "Trebuchet MS";
font-size: 18px;
margin-left: 15px;
}
.route {
font-family: "Trebuchet MS";
font-size: 12px;
margin-left: 15px;
}
.rating {
font-family: "Trebuchet MS";
font-size: 12px;
margin-left: 15px;
}
.comment {
font-family: "Trebuchet MS";
font-size: 12px;
margin-left: 15px;
}
.hide-button {
background: red;
border: 0.5px solid black;
border-radius: 5px;
display: inline-block;
height: 20px;
width: 50px;
font-size: 16px;
text-align: center;
vertical-align: middle;
float : right;
margin-right: 40px;
}
\ No newline at end of file
.mainHeader {
width: 500px;
height: 50px;
}
.header1 {
float: left;
}
.header2 {
float: right;
font-family: "Trebuchet MS";
}
.title {
font-family: "Hoefler Text";
font-size: 31px;
font-weight: bold;
color: black;
height: 27px;
}
.title.red {
color: #cb0a1d;
}
.title.green {
color : #066422;
}
.subtitle {
color: #4f9500;
font-size: 16px;
}
.username {
padding-top: 10px;
}
.username.bold {
font-weight: bold;
}
.logout {
text-align: right;
text-decoration: underline;
color: blue;
}
.menu{
margin: 10px;
width: 165px;
height: 45px;
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
line-height: 45px;
font-family: "Trebuchet MS";
font-weight: bold;
font-size: 24px;
}
.menu:hover {
background-color: #3a563f;
color: white;
}
.menu.active {
background: #3a563f;
border: 1px solid #253828;
color: white;
}
.contentBox {
width: 550px;
height: 480px;
margin: 0 auto;
background: white;
}
h1 {
color: #494949;
font-size: 35px;
font-family: "Trebuchet MS";
margin-top: 10px;
margin-bottom: 15px;
}
.stepBox {
color: #414141;
display: inline-block;
border: 1px solid black;
width: 135px;
height: auto;
padding: 3px;
margin-right: 30px;
margin-bottom: 30px;
font-family: "Arial";
font-size: 15px;
}
.stepBox.active {
background: #ffff97;
}
.number {
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 20px;
color: black;
line-height: 30px;
text-align: center;
background: #d1d1d1;
float: left;
margin: 5px;
margin-right: 8px;
}
.step {
margin: 2px;
}
.form {
width: 450px;
display: table;
margin-left: 10px;
}
.formBox {
width: 470px;
}
.labelBox {
float: left;
clear: left;
margin: 10px;
font-family: Arial;
color: #414141;
font-size: 20px;
}
.inputBox {
width: 250px;
height: 25px;
float: right;
clear: right;
margin: 2px;
font-size: 17px;
}
input[type=submit] {
display: table;
margin: 0 auto;
margin-top: 185px;
cursor: pointer;
width: 110px;
height: 50px;
border-radius: 10px;
border: 1px solid black;
background: #82d504;
font-size: 22px;
font-weight: bold;
font-family: Garamond;
}
\ No newline at end of file
.mainHeader {
width: 500px;
height: 50px;
}
.header1 {
float: left;
}
.header2 {
float: right;
font-family: "Trebuchet MS";
}
.title {
font-family: "Hoefler Text";
font-size: 31px;
font-weight: bold;
color: black;
height: 27px;
}
.title.red {
color: #cb0a1d;
}
.title.green {
color : #066422;
}
.subtitle {
color: #4f9500;
font-size: 16px;
}
.username {
padding-top: 10px;
}
.username.bold {
font-weight: bold;
}
.logout {
text-align: right;
text-decoration: underline;
color: blue;
}
.menu{
margin: 10px;
width: 165px;
height: 45px;
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
line-height: 45px;
font-family: "Trebuchet MS";
font-weight: bold;
font-size: 24px;
}
.menu:hover {
background-color: #3a563f;
color: white;
}
.menu.active {
background: #3a563f;
border: 1px solid #253828;
color: white;
}
.contentBox {
width: 550px;
height: 480px;
margin: 0 auto;
background: white;
}
h1 {
color: #494949;
font-size: 35px;
font-family: "Trebuchet MS";
margin-top: 10px;
margin-bottom: 15px;
}
.stepBox {
color: #414141;
display: inline-block;
border: 1px solid black;
width: 135px;
height: auto;
padding: 3px;
margin-right: 30px;
margin-bottom: 30px;
font-family: "Arial";
font-size: 15px;
}
.stepBox.active {
background: #ffff97;
}
.number {
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 20px;
color: black;
line-height: 30px;
text-align: center;
background: #d1d1d1;
float: left;
margin: 5px;
margin-right: 8px;
}
.step {
margin: 2px;
}
.form {
width: 450px;
display: table;
margin-left: 10px;
}
.formBox {
width: 470px;
}
.labelBox {
float: left;
clear: left;
margin: 10px;
font-family: Arial;
color: #414141;
font-size: 20px;
}
.inputBox {
width: 250px;
height: 25px;
float: right;
clear: right;
margin: 2px;
font-size: 17px;
}
input[type=submit] {
display: table;
margin: 0 auto;
margin-top: 185px;
cursor: pointer;
width: 110px;
height: 50px;
border-radius: 10px;
border: 1px solid black;
background: #82d504;
font-size: 22px;
font-weight: bold;
font-family: Garamond;
}
\ No newline at end of file
body {
font-family: 'Roboto', sans-serif;
margin-top: 40px;
}
.apps {
width: 500px;
height: 480px;
margin: 0 auto;
background: white;
border: 10px solid #02702C;
border-radius: 60px;
}
.heading {
padding: 20px 20px 0 20px;
}
.edit-img {
padding: 0 20px 20px 20px;
display: flex;
}
.profile-img {
width: 40%;
width: 150px;
display: inline-block;
}
.update-img {
display: inline-block;
padding: 30px;
}
.thumbnail {
border: 1px solid black;
max-width: 100%;
height: auto;
}
.edit-data {
padding: 0 20px;
font-size: 1.3em;
}
.edit-data .form-group {
margin-bottom: 3px;
}
.edit-data .form-group label {
width: 40%;
display: inline-block;
}
.edit-data .form-group .switch {
width: 12%;
float: right;
margin-right: 20px;
}
.edit-data .form-group input {
width: 53%;
}
.edit-data .form-group input[type=text], .edit-data .form-group input[type=password] {
height: 30px;
border: 1px solid gray;
padding-left: 10px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;
}
/* 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: 20px;
width: 20px;
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 #117D11;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.submit {
margin-top: 30px;
}
.submit input {
border: 1px solid black;
border-radius: 5px;
padding: 5px 15px;
}
.submit .cancel {
background: red;
float: left;
}
.submit .save {
background: green;
float: right;
margin-right: 15px;
}
.uploadFile {
float: left;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 0 10px;
float: right;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.fileUpload span {
font-size: 0.5em;
background: #D7D7D7;
padding: 5px;
border: 1px solid gray;
border-bottom: 1px solid gray;
}
table.data-location {
margin: 20px;
border-collapse: collapse;
width: 92%;
}
th:nth-of-type(1) {
width: 10%;
}
th:nth-of-type(2) {
width: 70%;
}
th, td {
height: 25px;
}
td:nth-of-type(2n-1) {
padding-left: 10px;
}
.add-location {
margin: 20px;
}
.add-location input[type=text] {
width: 75%;
height: 24px;
}
.add-location input[type=submit] {
background: #82D800;
padding: 5px 20px;
border: 1px solid black;
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #453333;
border-radius: 10px;
margin-left: 20px;
}
.back {
margin: 40px 0 0 20px;
}
.back a {
padding: 5px 20px;
background: red;
font-size: 1em;
color: #453333;
border-radius: 10px;
border: 1px solid black;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
.data-location td input {
font-size: 1em;
border: 0;
width: 100%;
padding: 5px 10px;
margin: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: inherit;
}
.data-location .edit {
color: orange;
float: left;
cursor: pointer;
margin-left: 3px;
margin-top: 2px;
}
.data-location .delete {
color: red;
font-weight: bold;
float: right;
margin-right: 10px;
cursor: pointer;
margin-top: 2px;
}
\ No newline at end of file
-- phpMyAdmin SQL Dump
-- version 4.7.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: 05 Okt 2017 pada 18.50
-- Versi Server: 10.1.25-MariaDB
-- 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: `pr-ojek`
--
-- --------------------------------------------------------
--
-- Struktur dari tabel `drivers`
--
CREATE TABLE `drivers` (
`ID` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`total_rating` int(11) NOT NULL DEFAULT '0',
`total_passangers` int(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-- --------------------------------------------------------
--
-- Struktur dari tabel `driver_locations`
--
CREATE TABLE `driver_locations` (
`ID` int(11) NOT NULL,
`location` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-- --------------------------------------------------------
--
-- Struktur dari tabel `transaction`
--
CREATE TABLE `transaction` (
`ID` int(11) NOT NULL,
`id_user` int(11) NOT NULL,
`id_driver` int(11) NOT NULL,
`rating` int(11) NOT NULL,
`comment` varchar(1024) NOT NULL,
`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-- --------------------------------------------------------
--
-- Struktur dari tabel `users`
--
CREATE TABLE `users` (
`ID` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`username` varchar(25) NOT NULL,
`email` varchar(30) NOT NULL,
`password` varchar(50) NOT NULL,
`phone_number` varchar(15) NOT NULL,
`driver` tinyint(1) NOT NULL,
`image` varchar(50) NOT NULL DEFAULT './img/profile-placeholder.png'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `drivers`
--
ALTER TABLE `drivers`
ADD PRIMARY KEY (`ID`);
--
-- Indexes for table `driver_locations`
--
ALTER TABLE `driver_locations`
ADD KEY `ID` (`ID`);
--
-- Indexes for table `transaction`
--
ALTER TABLE `transaction`
ADD PRIMARY KEY (`ID`),
ADD KEY `id_driver` (`id_driver`),
ADD KEY `id_user` (`id_user`);
--
-- Indexes for table `users`
--
ALTER TABLE `users`
ADD PRIMARY KEY (`ID`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;
--
-- Ketidakleluasaan untuk tabel pelimpahan (Dumped Tables)
--
--
-- Ketidakleluasaan untuk tabel `drivers`
--
ALTER TABLE `drivers`
ADD CONSTRAINT `drivers_ibfk_1` FOREIGN KEY (`ID`) REFERENCES `users` (`ID`);
--
-- Ketidakleluasaan untuk tabel `driver_locations`
--
ALTER TABLE `driver_locations`
ADD CONSTRAINT `driver_locations_ibfk_1` FOREIGN KEY (`ID`) REFERENCES `drivers` (`ID`);
--
-- Ketidakleluasaan untuk tabel `transaction`
--
ALTER TABLE `transaction`
ADD CONSTRAINT `transaction_ibfk_1` FOREIGN KEY (`id_driver`) REFERENCES `drivers` (`ID`),
ADD CONSTRAINT `transaction_ibfk_2` FOREIGN KEY (`id_user`) REFERENCES `users` (`ID`);
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 */;
<!DOCTYPE html>
<html>
<head>
<title>Edit Profile</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/profile.css">
</head>
<body>
<div class="apps">
<div class="heading">
<h2>EDIT PREFERRED LOCATIONS</h2>
</div>
<table border="1" class="data-location">
<thead>
<tr>
<th>No</th>
<th>Location</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" value="Pewter City" disabled></td>
<td><span class="edit"><i class="material-icons">mode_edit</i></span><span class="delete"><i class="material-icons">clear</i></span></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" value="Saffron City" disabled></td>
<td><span class="edit"><i class="material-icons">mode_edit</i></span><span class="delete"><i class="material-icons">clear</i></span></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" value="SkyPillar City" disabled></td>
<td><span class="edit"><i class="material-icons">mode_edit</i></span><span class="delete"><i class="material-icons">clear</i></span></td>
</tr>
</tbody>
</table>
<div class="add-location">
<h3>ADD NEW LOCATION</h3>
<form action="">
<input type="text" name="place" required>
<input type="submit" value="ADD">
</form>
</div>
<div class="back">
<a href="#">BACK</a>
</div>
</div>
<script src="js/profile.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Edit Profile</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/profile.css">
</head>
<body>
<div class="apps">
<div class="heading">
<h3>EDIT PROFILE INFORMATION</h3>
</div>
<div class="edit-img">
<div class="profile-img">
<img src="./img/profile-placeholder.png" alt="profile image" class="thumbnail">
</div>
<div class="update-img">
<h4>Update profile picture</h4>
<input id="uploadFile" type="text" disabled="disabled">
<div class="fileUpload">
<span>Browse...</span>
<input id="uploadBtn" type="file" class="upload">
</div>
</div>
</div>
<div class="edit-data">
<div class="form-group">
<label for="name">Your Name</label>
<input id="name" type="text" name="name" placeholder="your name" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input id="phone" type="text" name="phone" placeholder="your phone" required>
</div>
<div class="form-group">
<label for="driver">Status Driver</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="submit">
<input type="submit" class="cancel" value="BACK">
<input type="submit" class="save" value="SAVE">
</div>
</div>
</div>
<script src="js/profile.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" href="css/history.css">
</head>
<body>
<div class="contentBox">
<div class="mainHeader">
<div class="header1">
<div class="title"><span class="title green">PR</span>-<span class=" title red">OJEK</span></div>
<div class="subtitle">wush... wush... ngeeeeeenggg...</div>
</div>
<div class="header2">
<div class="username">Hi, <span class="username bold">pikachu!</span></div>
<div class="logout">Logout</div>
</div>
</div>
<div>
<div class="menu">ORDER</div>
<div class="menu active">HISTORY</div>
<div class="menu">MY PROFILE</div>
</div>
<h1>TRANSACTION HISTORY</h1>
<div>
<div class="submenu">MY PREVIOUS ORDERS</div>
<div class="submenu active">DRIVER HISTORY</div>
</div>
<div class="listBox">
<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
<div class="hide-button">HIDE</div>
<div class="date">5 October 2017</div>
<div class="name">Elmo</div>
<div class="route">Magetan-Maospati</div>
<div class="rating">Gave star</div>
<div class="comment">
<div>and left comment:
<p>tralalalala senang sekali</p></div>
</div>
</div>
<div class="listBox">
<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
<div class="hide-button">HIDE</div>
<div class="date">3 October 2017</div>
<div class="name">Bert</div>
<div class="route">Magetan-Madiun</div>
<div class="rating">Gave star</div>
<div class="comment">and left comment:</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" href="css/history.css">
</head>
<body>
<div class="contentBox">
<div class="mainHeader">
<div class="header1">
<div class="title"><span class="title green">PR</span>-<span class=" title red">OJEK</span></div>
<div class="subtitle">wush... wush... ngeeeeeenggg...</div>
</div>
<div class="header2">
<div class="username">Hi, <span class="username bold">pikachu!</span></div>
<div class="logout">Logout</div>
</div>
</div>
<div>
<div class="menu">ORDER</div>
<div class="menu active">HISTORY</div>
<div class="menu">MY PROFILE</div>
</div>
<h1>TRANSACTION HISTORY</h1>
<div>
<div class="submenu active">MY PREVIOUS ORDERS</div>
<div class="submenu">DRIVER HISTORY</div>
</div>
<div class="listBox">
<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
<div class="hide-button">HIDE</div>
<div class="date">5 October 2017</div>
<div class="name">Elmo</div>
<div class="route">Magetan-Maospati</div>
<div class="rating">You rated: </div>
<div class="comment">
<div>You commented:
<p>tralalalala senang sekali</p></div>
</div>
</div>
<div class="listBox">
<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
<div class="hide-button">HIDE</div>
<div class="date">3 October 2017</div>
<div class="name">Bert</div>
<div class="route">Magetan-Madiun</div>
<div class="rating">You rated:</div>
<div class="comment">You commented:</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
img/profile-placeholder.png

1.31 KiB

<?php
ob_start();
session_start();
$DBservername = "localhost";
$DBusername = "root";
$DBpassword = "";
$conn = new mysqli($DBservername, $DBusername, $DBpassword, "pr-ojek");
if ($conn->connect_error) {
echo "Server is die";
die("Connection failed: " . $conn->connect_error);
}
?>
\ No newline at end of file
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
\ No newline at end of file
function getUsernameValidation(){
var xmlhttp = new XMLHttpRequest();
if(!xmlhttp){
return;
}
var username = document.getElementById("username");
console.log(username);
var url = "validation.php?u=" + username.value;
console.log(url);
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var response = xmlhttp.responseText;
console.log(response);
if(response === "true"){
document.getElementById("wrongUsername").style.display = "none";
document.getElementById("checkUsername").style.display = "block";
}
else {
document.getElementById("checkUsername").style.display = "none";
document.getElementById("wrongUsername").style.display = "block";
}
}
}
xmlhttp.send();
}
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function getEmailValidation(){
var email = document.getElementById("email");
console.log(email.value);
console.log(validateEmail(email.value));
if (!validateEmail(email.value)){
document.getElementById("checkEmail").style.display = "none";
document.getElementById("wrongEmail").style.display = "block";
}
else {
var xmlhttp = new XMLHttpRequest();
if(!xmlhttp){
return;
}
console.log(email);
var url = "validation.php?e=" + email.value;
console.log(url);
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var response = xmlhttp.responseText;
console.log(response);
if(response === "true"){
document.getElementById("wrongEmail").style.display = "none";
document.getElementById("checkEmail").style.display = "block";
}
else {
document.getElementById("checkEmail").style.display = "none";
document.getElementById("wrongEmail").style.display = "block";
}
}
}
xmlhttp.send();
}
}
\ No newline at end of file
<?php
require_once('includes/config.php');
session_start();
if(isset($_POST["submit"])){
$username = $_POST["username"];
$password = $_POST["password"];
$sql = "SELECT ID, username, password FROM users WHERE username = '$username' limit 1";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_assoc($result)) {
$passwordconf = $row["password"];
}
if($password !== $passwordconf){
echo "<script>alert('Wrong password!')</script>";
}
else {
$_SESSION["id_active"] = $row["ID"];
header('Location: profile.php?id_active='+ $_SESSION["id_active"]);
exit;
}
}
else {
echo "<script>alert('User not exist!')</script>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Login</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/auth.css">
</head>
<body>
<div class="apps">
<div class="form-heading">
<div class="heading-left">
<hr>
</div>
<div class="heading-title">
LOGIN
</div>
<div class="heading-right">
<hr>
</div>
</div>
<div class="form-login">
<form action="" method="POST" autocomplete="off">
<div class="form-group">
<label for="username">Username </label>
<input id="username" type="text" name="username" placeholder="your username" required>
</div>
<div class="form-group">
<label for="password">Password </label>
<input id="password" type="password" name="password" placeholder="your password" pattern=".{5,10}" title="5 to 10 characters" required>
</div>
<div class="action">
<div class="register">
<a href="#">Don't have an account ?</a>
</div>
<div class="submit">
<input type="submit" name="submit" value="GO!">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Make an order</title>
<link rel="stylesheet" type="text/css" href="css/orderojek.css">
</head>
<body>
<div class="contentBox">
<div class="mainHeader">
<div class="header1">
<div class="title"><span class="title green">PR</span>-<span class=" title red">OJEK</span></div>
<div class="subtitle">wush... wush... ngeeeeeenggg...</div>
</div>
<div class="header2">
<div class="username">Hi, <span class="username bold">pikachu!</span></div>
<div class="logout">Logout</div>
</div>
</div>
<div>
<div class="menu active">ORDER</div>
<div class="menu">HISTORY</div>
<div class="menu">MY PROFILE</div>
</div>
<h1>MAKE AN ORDER</h1>
<div class="stepBox active">
<div class="number">1</div>
<div class="step">Select Destination</div>
</div>
<div class="stepBox">
<span class="number">2</span>
<div class="step">Select a Driver</div>
</div>
<div class="stepBox">
<span class="number">3</span>
<div class="step">Complete your order</div>
</div>
<form action="#" method="post" class="form">
<div class="formBox">
<label class="labelBox">Picking Point</label>
<input class="inputBox" type="text" name="selectDestination" id="pickingPoint" required>
</div>
<div class="formBox">
<label class="labelBox">Destination</label>
<input class="inputBox" type="text" name="selectDestination" id="destination" required>
</div>
<div class="formBox">
<label class="labelBox">Preferred Driver</label>
<input class="inputBox" type="text" name="selectDestination" placeholder="(optional)">
</div>
<input type="submit" name="submit" value="NEXT">
</form>
</div>
</body>
</html>
\ No newline at end of file
<?php
require('includes/config.php');
if(isset($_POST["submit"])){
if($_POST["password"] !== $_POST["password_conf"]){
echo "<script>alert('Your password is not match!')</script>";
}
else {
$name = $_POST["name"];
$username = $_POST["username"];
$email = $_POST["email"];
$password = $_POST["password"];
$phone_number = $_POST["phone"];
$driver = (!isset($_POST["driver"])) ? 0 : 1;
$sql = "INSERT INTO users (name, username, email, password, phone_number, driver)
VALUES ('$name', '$username', '$email', '$password', '$phone_number', $driver)";
if ($conn->query($sql) === TRUE) {
$sql = "SELECT ID FROM users WHERE username = '$username' LIMIT 1";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)) {
$ID = $row["ID"];
}
if ($driver === 1){
$sql = "INSERT INTO drivers (ID, name)
VALUES ($ID,'$name')";
if($conn->query($sql) === TRUE){
echo "New driver record created successfully<br>";
}
}
$_SESSION["id_active"] = $ID;
header('Location: profile.php?id_active=' . $_SESSION["id_active"]);
exit;
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Signup</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/auth.css">
</head>
<body>
<div class="apps">
<div class="form-heading">
<div class="heading-left">
<hr>
</div>
<div class="heading-title">
SIGNUP
</div>
<div class="heading-right">
<hr>
</div>
</div>
<div class="form-signup">
<form action="" method="POST" autocomplete="off">
<div class="form-group">
<label for="name">Your Name</label>
<input id="name" type="text" name="name" placeholder="your name" required>
</div>
<div class="form-group">
<label for="username">Username</label>
<input id="username" type="text" name="username" placeholder="your username" onfocusout="getUsernameValidation()" required> <span><i class="material-icons" id="checkUsername">check</i><i class="material-icons" id="wrongUsername">info</i></span>
</div>
<div class="form-group">
<label for="email">Email</label>
<input id="email" type="text" name="email" placeholder="your email" onfocusout="getEmailValidation()" required><span><i class="material-icons" id="checkEmail">check</i><i class="material-icons" id="wrongEmail">info</i></span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" type="password" name="password" placeholder="your password" pattern=".{5,10}" title="5 to 10 characters" required>
</div>
<div class="form-group">
<label for="password_conf">Password Confirm</label>
<input id="password_conf" type="password" name="password_conf" placeholder="your password again" pattern=".{5,10}" title="5 to 10 characters" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input id="phone" type="text" name="phone" placeholder="your phone" required>
</div>
<input type="checkbox" name="driver" value="true"> Also sign me up as a driver!
<div class="action">
<div class="login">
<a href="#">Already have an account ?</a>
</div>
<div class="submit">
<input type="submit" name="submit" value="REGISTER">
</div>
</div>
</form>
</div>
</div>
<script src="js/validation.js"></script>
</body>
</html>
<?php
if (!empty($_REQUEST['u'])){
$usernames = array("adyanf", "adyanaufalF", "adyanaufalfikri");
$toCheck = $_REQUEST['u'];
if (in_array($toCheck, $usernames)){
echo "false";
}
else {
echo "true";
}
}
if (!empty($_REQUEST['e'])){
$emails = array("adyanaufalf@gmail.com", "adyanaufalfikri@gmail.com", "13515130@std.stei.itb.ac.id");
$toCheck = $_REQUEST['e'];
if (in_array($toCheck, $emails)){
echo "false";
}
else {
echo "true";
}
}
?>
\ No newline at end of file