diff --git a/src/app/components/profile/index.php b/src/app/components/profile/index.php
index 5433d1ae8b1d3a047196aa3d1b774d0139d041ff..a812f73647aa0e72cd44dafe3602e98888269613 100644
--- a/src/app/components/profile/index.php
+++ b/src/app/components/profile/index.php
@@ -1,27 +1,102 @@
<?php
$title = "SayIt";
$page = "Profile";
+ ob_start();
+ if (!isset($_SESSION["user_id"])) {
+ header("Location: /?login");
+ exit;
+ }
+ else{
+ $mysqli = require __DIR__ . "/../../../db.php";
+ $user_id = $_SESSION["user_id"];
+ $sql = "SELECT * FROM user WHERE user_id = '$user_id'";
+ $result = $mysqli->query($sql);
+ $user = $result->fetch_assoc();
+ }
+ if (isset($_POST['update_profile'])) {
+ $servername = "db";
+ $username = "php_docker";
+ $password = "password";
+ $dbname = "php_docker";
+ $conn = mysqli_connect($servername, $username, $password, $dbname);
+ if (!$conn) {
+ die("Koneksi ke database gagal: " . mysqli_connect_error());
+ }
+ if (empty($_POST['user_name'])) {
+ $newName = $user['user_name'];
+ } else {
+ $newName = mysqli_real_escape_string($conn, $_POST['user_name']);
+ }
+
+ if (empty($_POST['user_email'])) {
+ $newEmail = $user['user_email'];
+ } else {
+ $newEmail = mysqli_real_escape_string($conn, $_POST['user_email']);
+ }
+
+ if (empty($_POST['user_phone'])) {
+ $newPhone = $user['user_phone'];
+ } else {
+ $newPhone = mysqli_real_escape_string($conn, $_POST['user_phone']);
+ }
+
+
+ // Validasi input sesuai kebutuhan Anda
+
+ // Update data pengguna di database
+ $updateQuery = "UPDATE user SET user_name = '$newName', user_email = '$newEmail', user_phone = '$newPhone' WHERE user_id = '$user_id'";
+ if (mysqli_query($conn, $updateQuery)) {
+ // Redirect atau berikan pesan sukses, misalnya:
+ header("Location: /?profile");
+ exit;
+ } else {
+ // Handle kesalahan jika gagal melakukan pembaruan
+ echo "Error: " . mysqli_error($conn);
+ }
+ }
?>
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>SayIt</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="icon" href="/src/public/img/gimmick.png" type="image/x-icon">
- <link rel="stylesheet" href="/src/public/css/profile.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
- </head>
- <body>
- <!-- Navbar -->
- <?php include (dirname(__DIR__)) . "/navbar/index.php" ?>
-
- <section class="container">
-
- </section>
-
- </body>
-</html>
\ No newline at end of file
+<head>
+ <meta charset="UTF-8">
+ <title>SayIt</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/src/public/css/profile.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+ <!-- Navbar -->
+ <?php include(dirname(__DIR__)) . "/navbar/index.php" ?>
+
+ <section class="container">
+
+ <div class="profile-form-container">
+ <form id="edit-profile-form" method="POST">
+ <h1>Profile</h1>
+ <div class="label-container">
+ <label for="username">Username:</label>
+ <input type="text" id="user_name" name="user_name" value="<?= $user["user_name"] ?>" disabled>
+ <button class="edit-button" id="edit-username-button" type="button">Edit</button>
+ </div>
+ <div class="label-container">
+ <label for="email">Email:</label>
+ <input type="email" id="user_email" name="user_email" value="<?= $user["user_email"] ?>" disabled>
+
+ <button class="edit-button" id="edit-email-button" type="button">Edit</button>
+ </div>
+ <div class="label-container">
+ <label for="phone">No Telpon:</label>
+ <input type="text" id="user_phone" name="user_phone" value="<?= $user["user_phone"] ?>" disabled>
+ <button class="edit-button" id="edit-phone-button" type="button">Edit</button>
+ </div>
+
+ <button type="submit" id="update_profile" name="update_profile" style="display: none;">Update</button>
+
+ </form>
+ </div>
+ </section>
+ <script src="/src/public/js/profile.js"></script>
+</body>
+</html>
diff --git a/src/public/css/profile.css b/src/public/css/profile.css
index a0496c180160a673633aea0732f9f555900b12ee..83dff7f85d81dc351251e35b21bc299d9f468982 100644
--- a/src/public/css/profile.css
+++ b/src/public/css/profile.css
@@ -188,4 +188,257 @@ section{
text-align: center;
padding-top: 80px;
padding-bottom: 30px;
-}
\ No newline at end of file
+}
+profile.css
+
+*{
+ padding: 0;
+ margin: 0;
+ text-decoration: none;
+ list-style: none;
+ box-sizing: border-box;
+}
+
+body{
+ font-family: 'Poppins', sans-serif;
+ min-height: 100%;
+ justify-content: center;
+ position: relative;
+ background-color: #FAF9F4;
+}
+
+.container{
+ position: relative;
+ width: 100%;
+ min-height: 100vh;
+ background: #FAF9F4;
+ padding: 60px;
+}
+
+.navbar{
+ position: fixed;
+ width: 100%;
+ z-index: 100;
+}
+
+nav{
+ background: #4560A6;
+ height: 80px;
+ width: 100%;
+}
+
+label.logo{
+ font-size: 35px;
+ line-height: 80px;
+ padding: 0 100px;
+ font-weight: bold;
+}
+
+label.logo .say{
+ color: #FAF9F4;
+ font-weight: bold;
+}
+
+label.logo .it{
+ color: #F3AA98;
+ font-weight: bold;
+}
+
+nav ul{
+ float: right;
+ margin-right: 20px;
+}
+
+nav ul li{
+ display: inline-block;
+ line-height: 80px;
+ margin: 0 5px;
+}
+
+nav ul li a{
+ color: #F3AA98;
+ font-weight: bold;
+ font-size: 17px;
+ padding: 7px 13px;
+ border-radius: 3px;
+ text-transform: uppercase;
+}
+
+.active{
+ background: #FAF9F4;
+ color: #F3AA98;
+}
+
+a:active{
+ background: #F3AA98;
+ color: #FAF9F4;
+}
+
+a:hover{
+ background: #FAF9F4;
+ transition: .5s;
+}
+
+.check-button{
+ font-size: 30px;
+ color: #FAF9F4;
+ float: right;
+ line-height: 80px;
+ margin-right: 40px;
+ cursor: pointer;
+ display: none;
+}
+
+.check-button.active, .check-button:hover{
+ color: #F3AA98;
+ transition: .5s;
+}
+
+#nav-check{
+ display: none;
+}
+
+@media (max-width: 952px){
+ label.logo{
+ font-size: 30px;
+ padding-left: 30px;
+ }
+
+ nav ul li a{
+ font-size: 16px;
+ }
+}
+
+@media (max-width: 858px){
+ .check-button{
+ display: block;
+ }
+
+ nav ul{
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ background: #F3AA98;
+ top: 80px;
+ left: -100%;
+ text-align: center;
+ transition: all .5s;
+ }
+
+ nav ul li{
+ display: block;
+ margin: 50px 0;
+ line-height: 30px;
+ }
+
+ nav ul li a{
+ font-size: 20px;
+ color: #FAF9F4;
+ }
+
+ .active{
+ background: #FD6B39;
+ color: #F3AA98;
+ }
+
+ #nav-check:checked ~ ul{
+ left: 0;
+ }
+}
+
+section{
+ background-color: #FAF9F4;
+ background-size: cover;
+ height: 100%;
+ margin-bottom: 200px;
+}
+
+.footer-container{
+ background: #4560A6;
+ padding: 3em;
+ grid-column: 1 / -1;
+ margin-top: auto;
+}
+
+
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0 auto;
+ width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ flex-direction: column;
+ }
+
+ .profile-form-container {
+ width: 300px;
+ background-color: #f5f5f5;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+ }
+
+ h1 {
+ text-align: center;
+ }
+
+
+
+ input[type="text"],
+ input[type="email"] {
+ width: 100%;
+ padding: 8px;
+ margin-bottom: 15px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ font-size: 16px;
+ }
+
+
+
+
+
+ button[type="submit"] {
+ background-color: #28a745;
+ color: white;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 3px;
+ cursor: pointer;
+ margin-top: 15px;
+ }
+
+ button[type="submit"]:hover {
+ background-color: #1d8f3b;
+ }
+ .label-container {
+ display: flex;
+ align-items: center;
+
+ }
+
+
+ label {
+ flex: 1; /* Label akan mengambil sebagian besar lebar */
+ font-weight: bold;
+ margin-bottom: 5px;
+ }
+
+
+ button.edit-button {
+ flex: 0; /* Tombol "Edit" tidak akan mengambil lebar tambahan */
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 3px;
+ cursor: pointer;
+ margin-left: 10px;
+ }
+
+ button.edit-button:hover {
+ background-color: #0056b3;
+ }
\ No newline at end of file
diff --git a/src/public/img/left-button.png b/src/public/img/left-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..7614a2915c53fea202dea4b25f0d457f4032faa3
Binary files /dev/null and b/src/public/img/left-button.png differ
diff --git a/src/public/img/right-button.png b/src/public/img/right-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa408c32a498f7dca3d751d9e7edaf52dac877f2
Binary files /dev/null and b/src/public/img/right-button.png differ
diff --git a/src/public/js/profile.js b/src/public/js/profile.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1d8051a0861aa0717becb01186628ae1fa14348
--- /dev/null
+++ b/src/public/js/profile.js
@@ -0,0 +1,42 @@
+document.addEventListener("DOMContentLoaded", function () {
+ const editUsernameButton = document.getElementById("edit-username-button");
+ const editEmailButton = document.getElementById("edit-email-button");
+ const editPhoneButton = document.getElementById("edit-phone-button");
+
+ const usernameField = document.getElementById("user_name");
+ const emailField = document.getElementById("user_email");
+ const phoneField = document.getElementById("user_phone");
+
+ const updateProfileButton = document.getElementById("update_profile");
+
+ // Tambahkan event listener untuk tombol "Edit Username"
+ editUsernameButton.addEventListener("click", function (event) {
+ event.preventDefault(); // Mencegah tindakan default tombol "Edit"
+ usernameField.disabled = !usernameField.disabled;
+ toggleUpdateButton();
+ });
+
+ // Tambahkan event listener untuk tombol "Edit Email"
+ editEmailButton.addEventListener("click", function (event) {
+ event.preventDefault(); // Mencegah tindakan default tombol "Edit"
+ emailField.disabled = !emailField.disabled;
+ toggleUpdateButton();
+ });
+
+
+ // Tambahkan event listener untuk tombol "Edit Phone"
+ editPhoneButton.addEventListener("click", function (event) {
+ event.preventDefault(); // Mencegah tindakan default tombol "Edit"
+ phoneField.disabled = !phoneField.disabled;
+ toggleUpdateButton();
+ });
+
+ function toggleUpdateButton() {
+ const isDisabled = usernameField.disabled && emailField.disabled && phoneField.disabled;
+ if (isDisabled) {
+ updateProfileButton.style.display = "none";
+ } else {
+ updateProfileButton.style.display = "block";
+ }
+ }
+});