diff --git a/css/dashboard.css b/css/dashboard.css
index 680c989d41c4a745f02352850704a51ebc8797ea..5c6f990fba4e8302e274f453078d4c5245e66d78 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -65,4 +65,37 @@
.user-profile {
width: 100%;
text-align: center;
+ margin: 20px 0;
+}
+
+.user-profile img {
+ display: inline-block;
+ width: 30px;
+ margin: 0 5px;
+ vertical-align: top;
+}
+
+/* id selectors */
+#user-image {
+ display: inline-block;
+ background: no-repeat center;
+ background-size: cover;
+ height: 100px;
+ width: 100px;
+ border-radius: 1000px;
+ border: 3px solid #000;
+}
+
+#profile-username {
+ font-size: 1.8rem;
+ margin: 5px 0;
+}
+
+#name {
+ font-size: 1.8rem;
+}
+
+#email, #phone {
+ font-size: 1.5rem;
+ display: inline-block;
}
\ No newline at end of file
diff --git a/img/mail.png b/img/mail.png
index df8381c11f83f8a7871a35142b031748643703a6..62533ed1b1c98f48d4aa496fc5197d568d84d96d 100644
Binary files a/img/mail.png and b/img/mail.png differ
diff --git a/img/phone.png b/img/phone.png
index 6baa68c58f3a99a771d733d3078f2663baf82a35..d941d8d6d914787d3878817de9c0020a2e77da71 100644
Binary files a/img/phone.png and b/img/phone.png differ
diff --git a/js/profile.js b/js/profile.js
index 5b27ba0c1fa6cf6666c29923518232121547a7c6..598f8fad8d7ac21f3f0d02ed762dcf019c19f02b 100644
--- a/js/profile.js
+++ b/js/profile.js
@@ -2,15 +2,20 @@ function getUserProfile(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
- var $result = xmlhttp.responseXML;
+ var result = xmlhttp.responseXML;
+ console.log(result);
+ var username = result.getElementsByTagName('username')[0].childNodes[0].nodeValue;
+ var name = result.getElementsByTagName('name')[0].childNodes[0].nodeValue;
+ var email = result.getElementsByTagName('email')[0].childNodes[0].nodeValue;
+ var phone = result.getElementsByTagName('phone')[0].childNodes[0].nodeValue;
+ var image =result.getElementsByTagName('image')[0].childNodes[0].nodeValue;
- var $user = $result.getElementsByTagName('user');
- for(i = 0; i < $user.length; i++){
-
-
- }
-
- document.getElementById('profile-username').innerHTML = "woy ini";
+ document.getElementById('username').innerHTML = 'Hi, ' + username + '!';
+ document.getElementById('profile-username').innerHTML = '@' + username;
+ document.getElementById('name').innerHTML = name;
+ document.getElementById('email').innerHTML = email;
+ document.getElementById('phone').innerHTML = phone;
+ document.getElementById('user-image').style.backgroundImage = 'url(../img/' + image + ')';
}
};
//var userid = 1;
diff --git a/view/dashboard.php b/view/dashboard.php
index b3405df900439c4cbf1ab4ebe6afb9c5f1c039ee..d66bca8ae798d301094e66affb233906c7a0f874 100644
--- a/view/dashboard.php
+++ b/view/dashboard.php
@@ -6,40 +6,43 @@
<script src="../js/profile.js"></script>
</head>
<body>
- <div class="header">
- <div class="logo"><img src="../img/logo.png" /></div>
- <div class="logout-panel">
- <div id="username"></div>
- <a href="index.html">Logout</a>
+ <div class="container">
+ <div class="header">
+ <div class="logo"><img src="../img/logo.png" /></div>
+ <div class="logout-panel">
+ <div id="username"></div>
+ <a href="index.html">Logout</a>
+ </div>
+ </div>
+ <div class="menu">
+ <button class="submenu" id="order">ORDER</button>
+ <button class="submenu" id="history">HISTORY</button>
+ <button class="submenu selected" id="profile" onclick="getUserProfile()">PROFILE</button>
+ </div>
+ <div class="sub-header">
+ <div class="sub-header-heading"><h1>MY PROFILE</h1></div>
+ <div class="edit-icon"><img src="../img/pencil.png" /></div>
+ </div>
+ <div class="user-profile">
+ <div id="user-image"></div>
+ <h1 id="profile-username"></h1>
+ <div id="name"></div>
+ <div id="driver-stats"></div>
+ <img src="../img/mail.png" /><div id="email"></div><br />
+ <img src="../img/phone.png" /><div id="phone"></div><br />
+ </div>
+ <div class="sub-header">
+ <div class="sub-header-heading"><h1>PREFERRED LOCATION</h1></div>
+ <div class="edit-icon"><img src="../img/pencil.png" /></div>
+ </div>
+ <div class="user-location">
+ <ul type="square" id="user-location">
+ <li>a</li>
+ <li>b</li>
+ <li>c</li>
+ </ul>
</div>
</div>
- <div class="menu">
- <button class="submenu" id="order">ORDER</button>
- <button class="submenu" id="history">HISTORY</button>
- <button class="submenu selected" id="profile" onclick="getUserProfile()">PROFILE</button>
- </div>
- <div class="sub-header">
- <div class="sub-header-heading"><h1>MY PROFILE</h1></div>
- <div class="edit-icon"><img src="../img/pencil.png" /></div>
- </div>
- <div class="user-profile">
- <div id="user-image">a</div>
- <h1 id="profile-username">a</h1>
- <div id="name">a</div>
- <div id="driver-stats">a</div>
- <img src="../img/mail.png" /><div id="email">a@gmail</div>
- <img src="../img/phone.png" /><div id="phone">08080</div>
- </div>
- <div class="sub-header">
- <div class="sub-header-heading"><h1>PREFERRED LOCATION</h1></div>
- <div class="edit-icon"><img src="../img/pencil.png" /></div>
- </div>
- <div class="user-location">
- <ul type="square" id="user-location">
- <li>a</li>
- <li>b</li>
- <li>c</li>
- </ul>
- </div>
+
</body>
</html>
\ No newline at end of file