feat: fixed register page bug

.gitignore

@@ -1,2 +1 @@
-.env
-.docs.txt
+.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: kelompok12: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

@@ -1,7 +1,7 @@
 <?php
 $hostname = "db";
-$username = "user";
-$password = "user";
+$username = "admin";
+$password = "admin";
 $database = "codebeater";
 
 $db = mysqli_connect($hostname, $username, $password, $database);

src/css/global.css

@@ -10,14 +10,3 @@ body {
     background-color: black;
 }
 
-.row {
-    display: flex;
-    height: 100dvh;
-}
-
-.col {
-    flex: 1;           
-    width: 50%;
-    padding: 30px;        
-    box-sizing: border-box;
-}

src/css/style.css

@@ -6,6 +6,176 @@
     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

@@ -42,8 +42,9 @@ $db->close();
     <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?v=2">
+    <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
     <div class="container-login">   
@@ -56,5 +57,9 @@ $db->close();
             <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