Skip to content

Add bootstrap design #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DevAmirHub wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add bootstrap design #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2b3a296
install bootstrap via npm
DevAmirHub Nov 26, 2025
933e6e6
add node_modules to .gitignore
DevAmirHub Nov 26, 2025
63309e4
add bootstrap in header and footer
DevAmirHub Nov 26, 2025
a20c8fd
design form page with bootstrap
DevAmirHub Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
2 changes: 1 addition & 1 deletion classes/Login.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ public function doLogout()
// delete the session of the user
$_SESSION = array();
session_destroy();
// return a little feeedback message
// return a little feedback message
$this->messages[] = "You have been logged out.";

}
Expand Down
6 changes: 6 additions & 0 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@
// so this single line handles the entire login process. in consequence, you can simply ...
$login = new Login();

// include header with Bootstrap
include("views/header.php");

// ... ask if we are logged in here:
if ($login->isUserLoggedIn() == true) {
// the user is logged in. you can do whatever you want here.
Expand All @@ -40,3 +43,6 @@
// for demonstration purposes, we simply show the "you are not logged in" view.
include("views/not_logged_in.php");
}

// include footer
include("views/footer.php");
42 changes: 42 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"dependencies": {
"bootstrap": "^5.3.8"
}
}
6 changes: 6 additions & 0 deletions register.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,11 @@
// so this single line handles the entire registration process.
$registration = new Registration();

// include header with Bootstrap
include("views/header.php");

// show the register view (with the registration form, and messages/errors)
include("views/register.php");

// include footer
include("views/footer.php");
6 changes: 6 additions & 0 deletions views/footer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
</div>
<!-- Bootstrap JS Bundle (from npm) -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

30 changes: 30 additions & 0 deletions views/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Login System</title>

<!-- Bootstrap CSS (from npm) -->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
}
.login-container {
max-width: 400px;
width: 100%;
padding: 2rem;
background: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="login-container">

12 changes: 9 additions & 3 deletions views/logged_in.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<!-- if you need user information, just put them into the $_SESSION variable and output them here -->
Hey, <?php echo $_SESSION['user_name']; ?>. You are logged in.
Try to close this browser tab and open it again. Still logged in! ;)
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Welcome!</h4>
<p>Hey, <strong><?php echo htmlspecialchars($_SESSION['user_name']); ?></strong>. You are logged in.</p>
<hr>
<p class="mb-0">Try to close this browser tab and open it again. Still logged in! ;)</p>
</div>

<!-- because people were asking: "index.php?logout" is just my simplified form of "index.php?logout=true" -->
<a href="index.php?logout">Logout</a>
<div class="text-center">
<a href="index.php?logout" class="btn btn-outline-danger">Logout</a>
</div>
24 changes: 15 additions & 9 deletions views/not_logged_in.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,34 @@
if (isset($login)) {
if ($login->errors) {
foreach ($login->errors as $error) {
echo $error;
echo '<div class="alert alert-danger" role="alert">' . htmlspecialchars($error) . '</div>';
}
}
if ($login->messages) {
foreach ($login->messages as $message) {
echo $message;
echo '<div class="alert alert-success" role="alert">' . htmlspecialchars($message) . '</div>';
}
}
}
?>

<!-- login form box -->
<form method="post" action="index.php" name="loginform">
<form method="post" action="index.php" name="loginform" class="d-flex flex-column gap-3">

<label for="login_input_username">Username</label>
<input id="login_input_username" class="login_input" type="text" name="user_name" required />
<div class="mb-3">
<label for="login_input_username" class="form-label">Username</label>
<input id="login_input_username" class="form-control" type="text" name="user_name" required />
</div>

<label for="login_input_password">Password</label>
<input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
<div class="mb-3">
<label for="login_input_password" class="form-label">Password</label>
<input id="login_input_password" class="form-control" type="password" name="user_password" autocomplete="off" required />
</div>

<input type="submit" name="login" value="Log in" />
<button type="submit" name="login" class="btn btn-primary w-100">Log in</button>

</form>

<a href="register.php">Register new account</a>
<div class="text-center mt-3">
<a href="register.php" class="text-decoration-none">Register new account</a>
</div>
37 changes: 24 additions & 13 deletions views/register.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,47 @@
if (isset($registration)) {
if ($registration->errors) {
foreach ($registration->errors as $error) {
echo $error;
echo '<div class="alert alert-danger" role="alert">' . htmlspecialchars($error) . '</div>';
}
}
if ($registration->messages) {
foreach ($registration->messages as $message) {
echo $message;
echo '<div class="alert alert-success" role="alert">' . htmlspecialchars($message) . '</div>';
}
}
}
?>

<!-- register form -->
<form method="post" action="register.php" name="registerform">
<form method="post" action="register.php" name="registerform" class="d-flex flex-column gap-3">

<!-- the user name input field uses a HTML5 pattern check -->
<label for="login_input_username">Username (only letters and numbers, 2 to 64 characters)</label>
<input id="login_input_username" class="login_input" type="text" pattern="[a-zA-Z0-9]{2,64}" name="user_name" required />
<div class="mb-3">
<label for="login_input_username" class="form-label">Username (only letters and numbers, 2 to 64 characters)</label>
<input id="login_input_username" class="form-control" type="text" pattern="[a-zA-Z0-9]{2,64}" name="user_name" required />
</div>

<!-- the email input field uses a HTML5 email type check -->
<label for="login_input_email">User's email</label>
<input id="login_input_email" class="login_input" type="email" name="user_email" required />
<div class="mb-3">
<label for="login_input_email" class="form-label">User's email</label>
<input id="login_input_email" class="form-control" type="email" name="user_email" required />
</div>

<label for="login_input_password_new">Password (min. 6 characters)</label>
<input id="login_input_password_new" class="login_input" type="password" name="user_password_new" pattern=".{6,}" required autocomplete="off" />
<div class="mb-3">
<label for="login_input_password_new" class="form-label">Password (min. 6 characters)</label>
<input id="login_input_password_new" class="form-control" type="password" name="user_password_new" pattern=".{6,}" required autocomplete="off" />
</div>

<label for="login_input_password_repeat">Repeat password</label>
<input id="login_input_password_repeat" class="login_input" type="password" name="user_password_repeat" pattern=".{6,}" required autocomplete="off" />
<input type="submit" name="register" value="Register" />
<div class="mb-3">
<label for="login_input_password_repeat" class="form-label">Repeat password</label>
<input id="login_input_password_repeat" class="form-control" type="password" name="user_password_repeat" pattern=".{6,}" required autocomplete="off" />
</div>

<button type="submit" name="register" class="btn btn-primary w-100">Register</button>

</form>

<!-- backlink -->
<a href="index.php">Back to Login Page</a>
<div class="text-center mt-3">
<a href="index.php" class="text-decoration-none">Back to Login Page</a>
</div>