diff --git a/display.txt b/display.txt
new file mode 100644
index 0000000000000000000000000000000000000000..6bae0528557bdbb8688b272feb87a8fa34f2c9d5
--- /dev/null
+++ b/display.txt
@@ -0,0 +1,19 @@
+ <!-- Display Events -->
+ <h3>Event List:</h3>
+ <ul>
+ <?php foreach ($events as $event) : ?>
+ <li>
+ <?php
+ echo $event['event_id'] . ': ' . $event['event_stock'] . ', ' . $event['event_created_time'] . ', ' . $event['event_details'];
+ echo isset($event['gambar']) ? ', Image: <img src="' . $event['gambar'] . '" alt="Event Image">' : ''; // Display the image if available
+ ?>
+ </li>
+ <?php endforeach; ?>
+ </ul>
+
+ <h3>User List:</h3>
+ <ul>
+ <?php foreach ($users as $user) : ?>
+ <li><?php echo $user['user_ID'] . ': ' . $user['user_name'] . ', ' . $user['username'] . ', ' . $user['user_email'] . ', ' . $user['user_hashedPass']; ?></li>
+ <?php endforeach; ?>
+ </ul>
\ No newline at end of file
diff --git a/home.php b/home.php
index de6a1bd80f3663ed568a4496d4586de6b7225a27..f436b46f0030d241cd23849b9171e0df3f8901e1 100644
--- a/home.php
+++ b/home.php
@@ -1,7 +1,7 @@
<?php
// home.php
session_start();
-var_dump($_POST);
+// var_dump($_POST);
// require_once './app/EventController.php';
require_once './app/Controllers/PembelianController.php';
require_once './app/Controllers/TicketController.php';
@@ -122,114 +122,130 @@ $users = $userController->getAllUsers();
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD Test</title>
+ <link rel="stylesheet" type="text/css" href="./styles/global.css">
+ <link rel="stylesheet" type="text/css" href="./styles/navbar.css">
+ <link rel="stylesheet" type="text/css" href="./styles/form.css">
</head>
<body>
- <h1>CRUD Test</h1>
+<!-- Navbar -->
+ <div class="navbar">
+ <div class="navbar-toggle" onclick="toggleMenu()">☰</div>
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Events</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">History</a></li>
+ <!-- Logout Button -->
+ <li>
+ <form method="post" action="home.php">
+ <button type="submit" name="userAction" value="logout">Logout</button>
+ </form>
+ </li>
+ </ul>
+ </div>
+ <h1>EDIT DATA</h1>
<!-- Event CRUD Form -->
- <h2>Events</h2>
- <form method="post" action="home.php">
-
- <!-- Create Event -->
- <form method="post" action="home.php" enctype="multipart/form-data">
- <label>Create Event:</label>
- <input type="text" name="stock" placeholder="Stock">
- <input type="datetime-local" name="createdTime">
- <input type="text" name="details" placeholder="Details">
-
- <!-- Drag-and-drop area for image upload -->
- <div id="drop-area-create">
- <p>Drag and drop an image file here or click to select one.</p>
- <input type="file" id="file-input-create" name="gambar" accept="image/*">
- </div>
-
- <button type="submit" name="action" value="createEvent">Create</button>
- </form>
-
-
- <!-- Update Event -->
- <form method="post" action="home.php" enctype="multipart/form-data">
- <label>Update Event:</label>
- <input type="text" name="eventIdUpdate" placeholder="Event ID">
- <input type="text" name="eventStock" placeholder="Stock">
- <input type="datetime-local" name="eventCreatedTime">
- <input type="text" name="eventDetails" placeholder="Details">
-
- <!-- Drag-and-drop area for image upload -->
- <div id="drop-area-update">
- <p>Drag and drop an image file here or click to select one.</p>
- <input type="file" id="file-input-update" name="gambar" accept="image/*">
- </div>
-
- <button type="submit" name="action" value="updateEvent">Update</button>
- </form>
- <form method="post" action="home.php">
- <!-- Delete Event -->
- <label>Delete Event:</label>
- <input type="text" name="eventIdDelete" placeholder="Event ID">
- <button type="submit" name="action" value="deleteEvent">Delete</button>
- </form>
+ <div class="event-form">
+ <h2>Events</h2>
+
+ <!-- Create Event -->
+ <form method="post" action="home.php" enctype="multipart/form-data">
+ <label>Create Event:</label>
+ <input type="text" name="stock" placeholder="Stock">
+ <input type="datetime-local" name="createdTime">
+ <input type="text" name="details" placeholder="Details">
+
+ <!-- Drag-and-drop area for image upload -->
+ <div id="drop-area-create">
+ <p>Drag and drop an image file here or click to select one.</p>
+ <input type="file" id="file-input-create" name="gambar" accept="image/*">
+ </div>
+
+ <button type="submit" name="action" value="createEvent">Create</button>
+ </form>
+
+ <!-- Update Event -->
+ <form method="post" action="home.php" enctype="multipart/form-data">
+ <label>Update Event:</label>
+ <input type="text" name="eventIdUpdate" placeholder="Event ID">
+ <input type="text" name="eventStock" placeholder="Stock">
+ <input type="datetime-local" name="eventCreatedTime">
+ <input type="text" name="eventDetails" placeholder="Details">
+
+ <!-- Drag-and-drop area for image upload -->
+ <div id="drop-area-update">
+ <p>Drag and drop an image file here or click to select one.</p>
+ <input type="file" id="file-input-update" name="gambar" accept="image/*">
+ </div>
+
+ <button type="submit" name="action" value="updateEvent">Update</button>
+ </form>
+
+ <form method="post" action="home.php">
+ <!-- Delete Event -->
+ <label>Delete Event:</label>
+ <input type="text" name="eventIdDelete" placeholder="Event ID">
+ <button type="submit" name="action" value="deleteEvent">Delete</button>
+ </form>
+ </div>
+
<!-- User CRUD Form -->
- <h2>Users</h2>
- <form method="post" action="home.php">
+ <div class="user-form">
+ <h2>Users</h2>
+
<!-- Create User -->
- <label>Create User:</label>
- <input type="text" name="userName" placeholder="Name">
- <input type="text" name="userUsername" placeholder="Username">
- <input type="email" name="userEmail" placeholder="Email">
- <input type="password" name="userPassword" placeholder="Password">
- <input type="checkbox" name="isAdmin" value="1"> Admin
- <button type="submit" name="userAction" value="createUser">Create</button>
+ <form method="post" action="home.php">
+ <label>Create User:</label>
+ <input type="text" name="userName" placeholder="Name">
+ <input type="text" name="userUsername" placeholder="Username">
+ <input type="email" name="userEmail" placeholder="Email">
+ <input type="password" name="userPassword" placeholder="Password">
+ <input type="checkbox" name="isAdmin" value="1"> Admin
+ <button type="submit" name="userAction" value="createUser">Create</button>
+ </form>
<!-- Update User -->
- <label>Update User:</label>
- <input type="text" name="userIdUpdate" placeholder="User ID">
- <input type="text" name="userNameUpdate" placeholder="Name">
- <input type="text" name="userUsernameUpdate" placeholder="Username">
- <input type="email" name="userEmailUpdate" placeholder="Email">
- <input type="password" name="userPasswordUpdate" placeholder="Password">
- <input type="checkbox" name="isAdminUpdate" value="1"> Admin
- <button type="submit" name="userAction" value="updateUser">Update</button>
+ <form method="post" action="home.php">
+ <label>Update User:</label>
+ <input type="text" name="userIdUpdate" placeholder="User ID">
+ <input type="text" name="userNameUpdate" placeholder="Name">
+ <input type="text" name="userUsernameUpdate" placeholder="Username">
+ <input type="email" name="userEmailUpdate" placeholder="Email">
+ <input type="password" name="userPasswordUpdate" placeholder="Password">
+ <input type="checkbox" name="isAdminUpdate" value="1"> Admin
+ <button type="submit" name="userAction" value="updateUser">Update</button>
+ </form>
<!-- Delete User -->
- <label>Delete User:</label>
- <input type="text" name="userIdDelete" placeholder="User ID">
- <button type="submit" name="userAction" value="deleteUser">Delete</button>
-
- <!-- login -->
- <label>login:</label>
- <input type="email" name="loginUsername" placeholder="mail">
- <input type="password" name="loginPassword" placeholder="Password">
- <button type="submit" name="userAction" value="login">login</button>
-
- <!-- logout -->
- <label>Logout:</label>
- <button type="submit" name="userAction" value="logout">logout</button>
- </form>
-
-
- <!-- Display Events -->
- <h3>Event List:</h3>
- <ul>
- <?php foreach ($events as $event) : ?>
- <li>
- <?php
- echo $event['event_id'] . ': ' . $event['event_stock'] . ', ' . $event['event_created_time'] . ', ' . $event['event_details'];
- echo isset($event['gambar']) ? ', Image: <img src="' . $event['gambar'] . '" alt="Event Image">' : ''; // Display the image if available
- ?>
- </li>
- <?php endforeach; ?>
- </ul>
-
- <h3>User List:</h3>
- <ul>
- <?php foreach ($users as $user) : ?>
- <li><?php echo $user['user_ID'] . ': ' . $user['user_name'] . ', ' . $user['username'] . ', ' . $user['user_email'] . ', ' . $user['user_hashedPass']; ?></li>
- <?php endforeach; ?>
- </ul>
-
+ <form method="post" action="home.php">
+ <label>Delete User:</label>
+ <input type="text" name="userIdDelete" placeholder="User ID">
+ <button type="submit" name="userAction" value="deleteUser">Delete</button>
+ </form>
+
+ <!-- Login -->
+ <form method="post" action="home.php">
+ <label>Login:</label>
+ <input type="email" name="loginUsername" placeholder="Email">
+ <input type="password" name="loginPassword" placeholder="Password">
+ <button type="submit" name="userAction" value="login">Login</button>
+ </form>
+ </div>
+
+
+ <div class="footer">
+ © <?php echo date("Y"); ?> Ticket Ku. All rights reserved.
+ </div>
+
+ <script defer>
+ function toggleMenu() {
+ const navbar = document.querySelector('.navbar ul');
+ navbar.classList.toggle('show');
+ }
+ </script>
</body>
</html>
diff --git a/index.php b/index.php
index 10231d4523a4bbbc0a33059f0d7af5f2a910735a..526fd204b4e603f264f56e7cafb79eeca4162490 100644
--- a/index.php
+++ b/index.php
@@ -18,22 +18,28 @@
<body>
<div class="index">
- <nav class="navbar">
- <div class="navbar-toggle" onclick="toggleMenu()">☰</div>
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">Events</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">History</a></li>
- </ul>
-
- <script defer>
- function toggleMenu() {
- const navbar = document.querySelector('.navbar ul');
- navbar.classList.toggle('show');
- }
- </script>
- </nav>
+ <!-- Navbar -->
+ <div class="navbar">
+ <div class="navbar-toggle" onclick="toggleMenu()">☰</div>
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Events</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">History</a></li>
+ <!-- Logout Button -->
+ <li>
+ <form method="post" action="home.php">
+ <button type="submit" name="userAction" value="logout">Logout</button>
+ </form>
+ </li>
+ </ul>
+ </div>
+ <script defer>
+ function toggleMenu() {
+ const navbar = document.querySelector('.navbar ul');
+ navbar.classList.toggle('show');
+ }
+ </script>
<div class="hero">
<img src="./assets/Hero.png" alt="Hero Image">
diff --git a/styles/form.css b/styles/form.css
new file mode 100644
index 0000000000000000000000000000000000000000..d840b003b0df8629937a47836798cdc6c973a182
--- /dev/null
+++ b/styles/form.css
@@ -0,0 +1,51 @@
+/* Add this to your global.css or create a new CSS file */
+
+.event-form,
+.user-form {
+ max-width: 600px;
+ margin: 20px auto;
+ padding: 20px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.event-form form,
+.user-form form {
+ margin-bottom: 20px;
+}
+
+.event-form label,
+.user-form label {
+ display: block;
+ margin-bottom: 8px;
+}
+
+.event-form input,
+.user-form input,
+.event-form button,
+.user-form button {
+ margin-bottom: 15px;
+}
+
+.event-form #drop-area-create,
+.event-form #drop-area-update,
+.user-form #drop-area-create,
+.user-form #drop-area-update {
+ margin-bottom: 15px;
+ padding: 10px;
+ border: 2px dashed #ccc;
+ border-radius: 8px;
+ text-align: center;
+}
+
+.event-form img,
+.user-form img {
+ max-width: 350px;
+ max-height: 350px;
+ margin-top: 10px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+}
+
+/* Additional styling can be added based on your preference */
diff --git a/styles/global.css b/styles/global.css
index 82359a4a72f33e4dea88b88affc3106e30b1d027..427a4d88d9c894c0fa200282122bf0b830f57ead 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,4 +1,4 @@
-body, h1, h2, h3, p, img, button {
+body, h1, h2, h3, p, img{
margin: 0;
padding: 0;
border: 0;
@@ -11,7 +11,7 @@ body {
.hero {
position: relative;
- width: -webkit-fill-available;
+ width: 100%;
height: 250px;
z-index: -1;
}
@@ -33,44 +33,50 @@ body {
font-size: xxx-large;
}
+.index {
+ text-align: center;
+ margin: 0 auto; /* Center the .index content horizontally */
+ max-width: 800px; /* Adjust the maximum width as needed */
+ padding: 20px; /* Add some padding for better spacing */
+}
+
.footer {
background-color: navy;
color: white;
text-align: center;
padding: 10px;
- position: inherit;
+ position: absolute;
bottom: 0;
width: 100%;
height: 43px;
}
+div.index div.events {
+ text-align: center;
+ margin-top: 20px;
+}
+
+div.index div.events li {
+ margin-bottom: 100px;
+}
+
.index .button {
position: absolute;
right: 2%;
- width: 100px;
- margin-top: 10px;
+ top: 10px;
}
+
.button {
background-color: rgb(255, 0, 47);
padding: 10px 24px;
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
- width: fit-content;
- height: fit-content;
- display: flex;
- align-items: center;
- justify-content: center;
- /* z-index: 9999; */
+ display: inline-block; /* Adjust display property for proper centering */
text-decoration: none;
color: white;
}
-.button a {
- text-decoration: none;
- color: white;
-}
-
.button:hover {
background-color: rgb(255, 156, 171);
color: white;
@@ -79,3 +85,8 @@ body {
.button:active {
background-color: rgb(240, 63, 96);
}
+
+.events {
+ text-align: center; /* Center text within the .events container */
+ margin-top: 20px;
+}
diff --git a/styles/navbar.css b/styles/navbar.css
index 0a46a61af51c1dd8f965741d61fa77a45cf879ac..473a9c62a683ab69eb625377f8601e86f5590bf6 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -3,11 +3,14 @@
.navbar {
background-color: #333;
overflow: hidden;
+ position: relative;
+ z-index: 999999;
}
.navbar ul {
list-style-type: none;
margin: 0;
+ margin-right: 30px;
padding: 0;
display: flex;
justify-content: flex-end; /* Align items to the right */
@@ -30,6 +33,25 @@
background-color: #555;
}
+/* Adjustments for the Logout button */
+.navbar form {
+ margin: 0;
+}
+
+.navbar .navbar-toggle form button {
+ background: none;
+ border: none;
+ padding: 15px;
+ text-decoration: none;
+ color: rgb(201, 7, 7);
+ cursor: pointer;
+ font-family: Arial, sans-serif; /* Adjust font family */
+}
+
+.navbar form button:hover {
+ background-color: #555;
+}
+
/* Responsive version */
@media screen and (max-width: 600px) {
.navbar ul {
@@ -44,6 +66,7 @@
.navbar ul.show {
display: flex; /* Show the menu when active */
+ z-index: 9999999;
}
.navbar li {
@@ -64,5 +87,6 @@
padding: 15px;
cursor: pointer;
color: white;
+ background-color: #333;
}
}