Scribd
Upload
10 views10 pages

Style

The document outlines a user registration and login system using PHP, including features such as redirecting to a success page after registration, session-based login verification, and a logout functionality. It provides code snippets for the registration, login, and success pages, as well as a CSS stylesheet for styling the forms. Additionally, it emphasizes the importance of session management to ensure users are logged in when accessing certain pages.

Uploaded by

Sicelo Dlamini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views10 pages

Style

The document outlines a user registration and login system using PHP, including features such as redirecting to a success page after registration, session-based login verification, and a logout functionality. It provides code snippets for the registration, login, and success pages, as well as a CSS stylesheet for styling the forms. Additionally, it emphasizes the importance of session management to ensure users are logged in when accessing certain pages.

Uploaded by

Sicelo Dlamini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Sure!

Here's how we can set it up:

1. Redirect to a Success Page after registration.


2. Session-based login verification for every page to ensure the user is logged in.

1. Redirect to a Success Page (After Registration)


We will modify the register.php so that after a successful registration, the user is redirected to
a success page or index page.

Updated register.php:
<?php
session_start(); // Start session

$host = 'localhost';
$db = 'user_system';
$user = 'root'; // Change if needed
$pass = ''; // Change if needed

$conn = new mysqli($host, $user, $pass, $db);


if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$fullname = trim($_POST['fullname']);
$school = trim($_POST['school']);
$cell = trim($_POST['cell']);
$username = trim($_POST['username']);
$email = trim($_POST['email']);
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);

// Check for duplicate email or username


$check = $conn->prepare("SELECT id FROM users WHERE email = ? OR username = ?");
$check->bind_param("ss", $email, $username);
$check->execute();
$check->store_result();

if ($check->num_rows > 0) {
echo "Email or username already exists!";
} else {
$stmt = $conn->prepare("INSERT INTO users (fullname, school, cell, username, email,
password) VALUES (?, ?, ?, ?, ?, ?)");
$stmt->bind_param("ssssss", $fullname, $school, $cell, $username, $email, $password);
if ($stmt->execute()) {
// Redirect to success page or index page after successful registration
header("Location: success.php"); // You can also use "index.php" here
exit();
} else {
echo "Error: " . $stmt->error;
}
$stmt->close();
}

$check->close();
$conn->close();
?>

Create a Success Page (success.php)


<?php
session_start(); // Start session

// Check if user is logged in


if (!isset($_SESSION['user_id'])) {
header("Location: login.php"); // Redirect to login page if not logged in
exit();
}

echo "<h2>Registration Successful!</h2>";


echo "<p>Welcome, " . $_SESSION['username'] . "!</p>";
echo "<p><a href='index.php'>Go to Home</a></p>";
?>

2. Session-based Login Verification


To ensure the user is logged in when visiting any page, we'll use PHP sessions.

Login Check for All Pages

We’ll create a login_check.php file that you can include at the top of each page where you
need to verify if the user is logged in.

login_check.php (Include this at the top of each page)


<?php
session_start(); // Start the session
// If the user is not logged in, redirect to the login page
if (!isset($_SESSION['user_id'])) {
header("Location: login.php"); // Change to your login page
exit();
}
?>

Example: Including login_check.php in your index.php or any other page:


<?php include('login_check.php'); ?>

<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h1>Welcome to the Home Page!</h1>
<p>You are logged in as <?php echo $_SESSION['username']; ?></p>
<a href="logout.php">Logout</a>
</body>
</html>

3. Login Page (login.php)


If you don't have a login page, here’s a simple login form and PHP handler:

login.php (Form)
<form action="login_handler.php" method="post">
<input type="text" name="username" placeholder="Username" required />
<input type="password" name="password" placeholder="Password" required />
<input type="submit" value="Login" />
</form>

login_handler.php (Handle login and create session)


<?php
session_start(); // Start session

$host = 'localhost';
$db = 'user_system';
$user = 'root'; // Change if needed
$pass = ''; // Change if needed
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$username = $_POST['username'];
$password = $_POST['password'];

// Check if username exists


$stmt = $conn->prepare("SELECT id, password FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($id, $hashed_password);
$stmt->fetch();

if ($stmt->num_rows > 0) {
// Verify password
if (password_verify($password, $hashed_password)) {
// Password is correct, set session variables
$_SESSION['user_id'] = $id;
$_SESSION['username'] = $username;
header("Location: index.php"); // Redirect to index page
exit();
} else {
echo "Invalid password!";
}
} else {
echo "Username not found!";
}

$stmt->close();
$conn->close();
?>

4. Logout Page (logout.php)


This will allow users to log out and end their session.

<?php
session_start();
session_unset(); // Remove all session variables
session_destroy(); // Destroy the session
header("Location: login.php"); // Redirect to login page
exit();
?>

Final Setup Summary:


● Registration (register.php): Redirects to a success page after successful
registration.
● Login (login.php): Validates the user and sets session variables.
● Session Verification (login_check.php): Includes this on every page that requires
the user to be logged in.
● Logout (logout.php): Logs the user out and redirects them to the login page.

Now, every page where you include login_check.php will require the user to be logged in. If
not, they will be redirected to the login page.

Would you like me to help you refine any part of this system?

Certainly! Here's how you can style your user registration form, login form, and other
elements by adding them to a style.css file. This will keep your CSS separate from the HTML
structure, making it easier to maintain and manage.

1. Create or Update style.css


Place this in your style.css file:

/* General Body Style */


body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Form Container */
form {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}

/* Form Heading */
form h2 {
text-align: center;
margin-bottom: 20px;
font-size: 1.5em;
}

/* Input Fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 1em;
}

/* Focus State */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
border-color: #007bff;
outline: none;
}

/* Submit Button */
input[type="submit"] {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #0056b3;
}

/* Form Link (like Login or Redirect link) */


a{
text-align: center;
display: block;
margin-top: 10px;
color: #007bff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* Success Page */
.success-message {
text-align: center;
font-size: 1.2em;
color: #28a745;
}

/* Error Messages */
.error-message {
text-align: center;
font-size: 1em;
color: #dc3545;
}

/* Responsive Design */
@media (max-width: 600px) {
body {
padding: 20px;
}

form {
width: 100%;
}
}

2. Link the style.css in Your HTML Files


Make sure you link the style.css file to the head of each HTML file (such as index.html,
register.html, login.html):

<head>
<meta charset="UTF-8">
<title>User Registration</title>
<link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
</head>

3. HTML Forms with CSS Styling


After linking style.css, your forms will automatically be styled according to the CSS. Here's how
your registration and login forms should look now:

Registration Form (With style.css):


<form action="register.php" method="post">
<h2>User Registration</h2>
<input type="text" name="fullname" placeholder="Full Name" required />
<input type="text" name="school" placeholder="School" required />
<input type="text" name="cell" placeholder="Cell Number" required pattern="[0-9]{10,15}"
title="Enter a valid phone number" />
<input type="text" name="username" placeholder="Username" required />
<input type="email" name="email" placeholder="Email" required />
<input type="password" name="password" placeholder="Password" required />
<input type="submit" value="Register" />
</form>

Login Form (With style.css):


<form action="login_handler.php" method="post">
<h2>Login</h2>
<input type="text" name="username" placeholder="Username" required />
<input type="password" name="password" placeholder="Password" required />
<input type="submit" value="Login" />
</form>

4. Success Page Styling


For the success page, you can apply styles to make it look clean and user-friendly:

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header("Location: login.php");
exit();
}
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Success</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="success-message">
<h2>Registration Successful!</h2>
<p>Welcome, <?php echo $_SESSION['username']; ?>!</p>
<a href="index.php">Go to Home</a>
</div>
</body>
</html>

This will display a success message in a neat style with a link to go back to the homepage.

5. Login Page Styling


If you want the login page to look like the registration form with similar styles, you can use this
form structure (the same as the registration form but pointing to the login handler):

<form action="login_handler.php" method="post">


<h2>Login</h2>
<input type="text" name="username" placeholder="Username" required />
<input type="password" name="password" placeholder="Password" required />
<input type="submit" value="Login" />
</form>

6. Logout Page Styling


For the logout page (just to make sure the user is logged out properly):

<?php
session_start();
session_unset();
session_destroy();
header("Location: login.php");
exit();
?>

Responsive Design
The CSS also includes a media query to ensure the form is responsive and adapts for smaller
screens (e.g., smartphones). It adjusts the form width to 100% on screens smaller than 600px.

Final Notes:
● Organize your file structure: Keep style.css in the same directory as your HTML files
or in a css/ folder.
● Adjust form elements: Customize placeholders, labels, or button styles to suit your
design preferences.

Let me know if you want further customizations!

You might also like