feat: fixing bug at login page

.gitignore

@@ -1,2 +1 @@
-.env
 .docs.txt

docker-compose.yaml

@@ -0,0 +1,50 @@
+version: "3.8"
+
+services:
+  phpapache:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: codebeater_phpapache
+    ports:
+      - "8080:80"
+    volumes:
+      - ./src:/var/www/html
+    depends_on:
+      - db
+    networks:
+      - codebeater_net
+
+  db:
+    image: mysql:8.0
+    container_name: codebeater_mysql
+    command: --default-authentication-plugin=mysql_native_password
+    environment:
+      MYSQL_ROOT_PASSWORD: root
+      MYSQL_DATABASE: codebeater
+      MYSQL_USER: admin
+      MYSQL_PASSWORD: admin
+    volumes:
+      - db_codebeater:/var/lib/mysql
+    networks:
+      - codebeater_net
+
+  phpmyadmin:
+    image: phpmyadmin/phpmyadmin:latest
+    container_name: codebeater_phpmyadmin
+    ports:
+      - "8081:80"
+    environment:
+      PMA_HOST: db
+      PMA_PORT: 3306
+    depends_on:
+      - db
+    networks:
+      - codebeater_net
+
+volumes:
+  db_codebeater:
+
+networks:
+  codebeater_net:
+    driver: bridge

docker-compose.yml

@@ -1,53 +0,0 @@
-version: "3.8"
-
-services:
-  # --- PHP + Apache ---
-  web:
-    build:
-      context: .
-      dockerfile: web/Dockerfile
-    image: codebeater:latest
-    container_name: phpapache
-    ports:
-      - "${APP_PORT}:80"
-    volumes:
-      - ./src:/var/www/html
-    environment:
-      - APACHE_RUN_USER=www-data
-      - APACHE_RUN_GROUP=www-data
-    depends_on:
-      - db
-
-  # --- MySQL Database ---
-  db:
-    image: mysql:8.0
-    platform: linux/amd64
-    container_name: sql
-    restart: unless-stopped
-    environment:
-      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
-      MYSQL_DATABASE: ${MYSQL_DATABASE}
-      MYSQL_USER: ${MYSQL_USER}
-      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
-    ports:
-      - "${MYSQL_PORT}:3306"
-    volumes:
-      - db_data:/var/lib/mysql
-
-  # --- phpMyAdmin ---
-  phpmyadmin:
-    image: phpmyadmin/phpmyadmin:latest
-    platform: linux/amd64
-    container_name: phpmyadmin
-    restart: unless-stopped
-    depends_on:
-      - db
-    environment:
-      PMA_HOST: db
-      PMA_USER: ${MYSQL_USER}
-      PMA_PASSWORD: ${MYSQL_PASSWORD}
-    ports:
-      - "${PHPMYADMIN_PORT}:80"
-
-volumes:
-  db_data:

dockerfile

@@ -0,0 +1,7 @@
+FROM php:8.2-apache
+
+RUN docker-php-ext-install mysqli
+
+COPY ./src /var/www/html
+
+EXPOSE 80

src/config/db.php

@@ -0,0 +1,13 @@
+<?php
+$hostname = "db";
+$username = "admin";
+$password = "admin";
+$database = "codebeater";
+
+$db = mysqli_connect($hostname, $username, $password, $database);
+
+if(!$db){
+    die("Koneksi database gagal. Error: " . mysqli_connect_error());
+}
+
+

src/css/global.css

@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Jersey+15&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+*{
+    font-family: "Jersey 15", sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    color: white;
+    background-color: black;
+}
+

src/css/style.css

@@ -0,0 +1,181 @@
+.container-login {
+    display: flex;
+    width: 100%;
+    height: 100dvh;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.container-login h1 {
+    font-size: 100px;
+}
+
+.container-login form {
+    text-align: center;
+    padding: 30px;
+}
+
+.container-login form h2 {
+    margin-bottom: 20px;
+    font-size: 30px;
+    text-transform: capitalize;
+}
+
+.container-login form input {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 30px;
+    border-radius: 6px;
+    text-align: center;
+    background-color: black;
+    border: 1px solid white;
+    color: white;
+}
+
+.container-login form input::placeholder {
+    color: #919191;
+}
+
+.container-login form button {
+    border-radius: 6px;
+    width: 200px;
+    height: 30px;
+    margin-top: 40px;
+    font-size: 30px
+}
+
+.container-login form button:hover {
+    border-radius: 6px;
+    width: 200px;
+    height: 30px;
+    margin-top: 40px;
+    font-size: 30px;
+}
+
+.container-login form p {
+    margin-top: 10px;
+}
+
+.container-login form p a {
+    color: white;
+    text-decoration: none;
+}
+
+.container-login form p a span {
+    color: yellow;
+}
+
+.container-register {
+    display: flex;
+    width: 100%;
+    height: 100dvh;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.container-register h1 {
+    font-size: 100px;
+}
+
+.container-register form {
+    text-align: center;
+    padding: 30px;
+}
+
+.container-register form h2 {
+    margin-bottom: 20px;
+    font-size: 30px;
+    text-transform: capitalize;
+}
+
+.container-register form input {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 30px;
+    border-radius: 6px;
+    text-align: center;
+    background-color: black;
+    border: 1px solid white;
+    color: white;
+}
+
+.container-register form input::placeholder {
+    color: #919191;
+}
+
+.container-register form button {
+    border-radius: 6px;
+    width: 200px;
+    height: 30px;
+    margin-top: 40px;
+    font-size: 30px
+}
+
+.container-register form button:hover {
+    border-radius: 6px;
+    width: 200px;
+    height: 30px;
+    margin-top: 40px;
+    font-size: 30px;
+}
+
+.container-register form p {
+    margin-top: 10px;
+}
+
+.container-register form p a {
+    color: white;
+    text-decoration: none;
+}
+
+.container-register form p a span {
+    color: yellow;
+}
+
+.container-board {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 100dvh;
+}
+
+.container-board .chara {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.container-board .chara .character {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.container-board .chara .character img {
+    width: 300px;
+    image-rendering: pixelated;
+    margin: 20px;
+}
+
+.container-board .menu {
+    margin: 0 auto;
+    border-radius: 10px;
+    width: 400px;
+    border: 1px solid;
+    height: 40px;
+    align-content: center;
+}
+
+.container-board table {
+    margin: 0 auto;
+    border-radius: 10px;
+    width: 400px;
+    border: 1px solid;
+    height: 40px;
+    align-content: center;
+}

src/index.php

@@ -0,0 +1,65 @@
+<?php 
+session_start();
+include "config/db.php";
+
+if(isset($_POST['login'])){
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+
+    if(empty($username)||empty($password)){
+        echo "semua data    harus terisi";
+    }else{
+        $sql = "SELECT * FROM users WHERE username =?";
+        $stmt = $db -> prepare($sql);
+        $stmt->bind_param('s',$username);
+        $stmt->execute();
+        $result = $stmt ->get_result();
+
+        if($result->num_rows ===1){
+            $user = $result ->fetch_assoc();
+            if(password_verify($password,$user['password'])){
+                $_SESSION['loggedin']='true';   
+                $_SESSION['username']=$user['username'];  
+                $_SESSION['id']=$user['id']; 
+                header("location:leaderboard.php");
+                exit();
+            }else{
+                echo "password salah";
+            }
+        }else{
+            echo "username salah";
+        }
+        $stmt->close();
+    }
+}
+$db->close();
+
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>login</title>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <link rel="stylesheet" href="/css/global.css">
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+    <div class="container-login">   
+        <h1 data-aos="zoom-out" data-aos-duration="1000">codebeater</h1>
+        <form class="login-form" action ="index.php" method="POST">
+            <h2 data-aos="fade-up" data-aos-duration="1000">Login to your account</h2>
+            <input type="text" name="username" id="username" placeholder="input your username"  data-aos="fade-up" data-aos-duration="2000"><br>
+            <input type="password" name="password" id="password" placeholder="input your password" data-aos="fade-up" data-aos-duration="2000"><br>
+            <button type="submit" name="login" placeholder="input your password" data-aos="fade-up" data-aos-duration="3000">LOGIN</button>
+            <p placeholder="input your password" data-aos="fade-up" data-aos-duration="3000"><a href="register.php">don't have account yet?<span> register now!</span></a></p>
+        </form>
+    </div>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
+</body>
+</html>

src/leaderboard.php

@@ -0,0 +1,74 @@
+<?php 
+// session_start();
+// require_once "config/db.php";
+
+// $sql_leaderbord = "SELECT u.username, c.poin FROM characters c JOIN users u ON u.user_id = c.user_id ORDER BY c.poin DESC LIMIT 10 ";
+
+// $result = $db ->query($sql_leaderbord);
+
+// $leaderboard=[];
+// if($result&&$result -> num_rows >0){
+//     while($row = $result->fetch_assoc()){
+//         $leaderboard[]=$row;
+//     }
+// }
+
+?>
+
+    <!DOCTYPE html>
+    <html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>leaderboard</title>
+        <link rel="stylesheet" href="css/global.css">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <div class="container-board">
+            <div class="chara">
+                <div class="menu">
+                    <h1 style="text-align: center;">Matthew as Knight</h1>
+                </div>
+                <h1 style="text-align: center;">150pts</h1>
+                <div class="character">
+                    <img src="assets/Design/KnightPixLE.png" alt="knight">
+                </div>
+            </div>
+            <div class="board">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Username</th>
+                            <th>Score</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- <?php 
+                        $peringkat = 1;
+                        foreach ($leaderboard as $pemain) :
+                        ?>
+                        
+                            <tr>
+                                <td><?php echo $peringkat; ?></td>
+                                <td><?php echo htmlspecialchars($pemain['username']); ?></td>
+                                <td><?php echo $pemain['poin']; ?> PTS</td>
+                            </tr>
+
+                        <?php 
+                            $peringkat++;
+                        endforeach;
+                        
+                        if (empty($leaderboard)) {
+                            echo '<tr><td colspan="3" style="text-align: center;">Belum ada pemain</td></tr>';
+                        }
+                        ?> -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </body>
+
+    </html>

src/register.php

@@ -0,0 +1,90 @@
+<?php
+
+session_start();
+include "config/db.php";
+
+$pesan_sukses="";
+$pesan_gagal="";
+
+
+if(isset($_POST['register'])){
+    $email = $_POST['email'];
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+    $rpassword = $_POST['rpassword'];
+    
+    if(empty($email) || empty($username) || empty($password)){
+        $pesan_gagal= "Semua data harus terisi";
+    }else if($password !== $rpassword){
+        $pesan_gagal=  "password tidak sama";
+    }
+    else{
+        $hashpw = password_hash($password, PASSWORD_DEFAULT); 
+
+        $sql = "INSERT INTO users (email,username,password)VALUES(?,?,?)";
+
+        $stmt = $db -> prepare($sql);
+
+        $stmt->bind_param("sss",$email,$username,$hashpw);
+
+
+        if($stmt->execute()){
+
+            $new_user_id =$db-> insert_id;
+
+            $sql_char = "INSERT INTO users (user_id, name, poin) VALUES (?, ?, 0)";
+            
+            $stmt_char = $db->prepare($sql_char);
+            $stmt_char->bind_param("is", $new_user_id, $username);
+
+            if($stmt_char->execute()){
+                header("location:index.php");
+                exit();
+            }else{
+                $pesan_gagal = "Registrasi user berhasil, tapi gagal membuat karakter: " . $stmt_char->error;
+            }
+            $stmt_char->close();
+
+        }else{
+            if($stmt->erno==1602){
+                $pesan_gagal = "email atau username sudah pernah terdaftar";
+            }else{
+                $pesan_sukses = "Regitrasi gagal: ".$stmt->error;
+            }
+        }
+        $stmt -> close();
+    }
+}$db->close()
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>codebeater</title>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/global.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div class="container-register">
+        <h1 data-aos="zoom-out" data-aos-duration="1000">codebeater</h1>
+        <form action="register.php" method="POST">
+            <h2 data-aos="fade-up" data-aos-duration="1000">Register to get account</h2>
+            <input type="email" name="email" id="email" placeholder="input your email" data-aos="fade-up" data-aos-duration="2000"><br>
+            <input type="text" name="username" id="username" placeholder="input your username" data-aos="fade-up" data-aos-duration="2000"><br>
+            <input type="password" name="password" id="password" placeholder="input your password" data-aos="fade-up" data-aos-duration="2000"><br>
+            <input type="password" name="rpassword" id="rpassword" placeholder="repeat your password" data-aos="fade-up" data-aos-duration="2000"><br>
+            <button type="submit" name="register" data-aos="fade-up" data-aos-duration="3000">REGISTER</button>
+            <p data-aos="fade-up" data-aos-duration="3000"><a href="index.php" name = "login">have an account? <span> Login now!</span></a></p>
+        </form>
+    </div>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
+</body>
+
+</html>

web/Dockerfile

@@ -1,18 +0,0 @@
-FROM php:8.1-apache
-
-# Install ekstensi PHP yang dibutuhkan
-RUN apt-get update && apt-get install -y \
-    libzip-dev zip unzip git \
-  && docker-php-ext-install mysqli pdo pdo_mysql zip
-
-# Aktifkan mod_rewrite (penting untuk routing dan login)
-RUN a2enmod rewrite
-
-# Copy source code (untuk development pakai volume)
-COPY ./src/ /var/www/html/
-
-# Ubah permission agar Apache bisa akses file
-RUN chown -R www-data:www-data /var/www/html
-
-# Expose port 80
-EXPOSE 80