diff --git a/src/model/emailList.php b/src/model/emailList.php
new file mode 100644
index 0000000000000000000000000000000000000000..a7e7bcf5b19c9fae749739959724af4605d91d8c
--- /dev/null
+++ b/src/model/emailList.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: iqbal
+ * Date: 03/10/17
+ * Time: 23:43
+ */
+
+$emailList = array("iqbal@gmail.com", "test@ymail.com", "cloud@dagojek.com");
+
+$emailInput = $_REQUEST["q"];
+
+if (filter_var($emailInput, FILTER_VALIDATE_EMAIL)) {
+ $response = checkAvailability($emailInput, $emailList);
+} else {
+ $response = "unavailable";
+}
+
+echo $response;
+
+function checkAvailability($string, $aList) {
+ if ($string !== "") {
+ $found = false;
+ $i = 0;
+ while ($i < count($aList) && !$found) {
+ if ($string === $aList[$i]) {
+ $found = true;
+ } else {
+ $i++;
+ }
+ }
+ if ($found) {
+ return "unavailable";
+ } else {
+ return "available";
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/model/usernameList.php b/src/model/usernameList.php
new file mode 100644
index 0000000000000000000000000000000000000000..9b76f882799125c9c9533fb34001fa90d244b6e9
--- /dev/null
+++ b/src/model/usernameList.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: iqbal
+ * Date: 03/10/17
+ * Time: 23:43
+ */
+
+$usernameList = array("iqbal", "test", "cloud");
+
+$usernameInput = $_REQUEST["q"];
+$response = checkAvailability($usernameInput, $usernameList);
+echo $response;
+
+function checkAvailability($string, $aList) {
+ if ($string !== "") {
+ $found = false;
+ $i = 0;
+ while ($i < count($aList) && !$found) {
+ if ($string === $aList[$i]) {
+ $found = true;
+ } else {
+ $i++;
+ }
+ }
+ if ($found) {
+ return "unavailable";
+ } else {
+ return "available";
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/view/register.html b/src/view/register.html
new file mode 100644
index 0000000000000000000000000000000000000000..00b15d41614a9e3fc6e698e26db6047901fa8dcb
--- /dev/null
+++ b/src/view/register.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Register Page | Dagojek</title>
+ <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body id="register-body">
+
+<div class="container">
+
+ <header id="register-header">
+ <h1>
+ Dagojek Register<br>
+ <small>Create New Account</small>
+ </h1>
+ </header>
+
+ <section id="register-main">
+ <div id="register-panel">
+ <form>
+ <fieldset>
+ <legend>Sign Up</legend>
+ <table>
+ <tr>
+ <td>
+ Name:
+ </td>
+ <td>
+ <input type="text" placeholder="Your name" name="name">
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Username:
+ </td>
+ <td>
+ <input onkeyup="checkAvailability(this.value, 'username', '../model/usernameList.php')" id="username" type="text" placeholder="Username" name="username">
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Email:
+ </td>
+ <td>
+ <input onkeyup="checkAvailability(this.value, 'email', '../model/emailList.php')" id="email" type="email" placeholder="Email address" name="email">
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Password:
+ </td>
+ <td>
+ <input type="password" placeholder="Password" name="password">
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Confirm Password:
+ </td>
+ <td>
+ <input type="password" placeholder="Confirm password" name="confirm-password">
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Phone Number:
+ </td>
+ <td>
+ <input type="number" placeholder="Phone number" name="phone-number">
+ </td>
+ </tr>
+ </table>
+ <input type="checkbox" value="is-driver"> I want to be a driver as well!
+ <br>
+ <input type="submit" value="Login">
+ <br>
+ </fieldset>
+ </form>
+ </div>
+ </section>
+
+ <footer>
+
+ </footer>
+
+</div>
+
+<!-- Script -->
+<script type="application/javascript" src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/view/script.js b/src/view/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..56adad54484103c81903dad27fbd0cbfd654065e
--- /dev/null
+++ b/src/view/script.js
@@ -0,0 +1,24 @@
+function checkAvailability(string, elmtID, dataCollection) {
+ var field = document.getElementById(elmtID)
+
+ if (string.length === 0) {
+ field.classList.remove("available");
+ field.classList.remove("unavailable");
+ return;
+ } else {
+ var xmlhttp = new XMLHttpRequest();
+ xmlhttp.onreadystatechange = function () {
+ if (this.readyState === 4 && this.status === 200) {
+ if (this.responseText === "available") {
+ field.classList.remove("unavailable");
+ field.classList.add("available");
+ } else {
+ field.classList.remove("available");
+ field.classList.add("unavailable");
+ }
+ }
+ };
+ xmlhttp.open("GET", dataCollection + "?q=" + string, true);
+ xmlhttp.send();
+ }
+}
\ No newline at end of file