Al Imam Mohammad ibn Saud Islamic University

College of Computer and Information Sciences

Information Systems Department

Recycling App

Student1 Name, ID, Section number

Student2 Name, ID, Section number
Student3 Name, ID, Section number

Project Submitted in Fulfillment for the IS337 Course requirements

1st Semester 2024-25

1
2
 Table of Contents
1. Introduction.......................................................................................3
1.1 Background...................................................................................3
1.2 Requirements Covered..................................................................3
2. “Welcome” Page...............................................................................4
3. “Sign in” page...................................................................................5
4. “Join us” page...................................................................................6
5. “SABIC station”................................................................................8
6. Conclusions (2 marks)....................................................................10
6.1 Technologies & Languages Used...............................................10
6.2 Development Stack.....................................................................10
6.3 Editor & Tools............................................................................10
6.4 Security Measures.......................................................................10
6.5 How to Run the Application.......................................................11
7. Appendix..........................................................................................12
7.1 Most Significant JavaScript Code: Password Validation &
Visibility Toggle..................................................................................12
7.2 Most Critical PHP Code Snippets...............................................13
7.3 Security Highlights.....................................................................14
7.4 Key Feature Implementation.......................................................14

3
1. Introduction
The Riyadh Metro Student Navigation System is a web application
designed to assist students of Al Imam Mohammad ibn Saud Islamic
University in efficiently navigating the Riyadh Metro system,
particularly for reaching the SABIC Station near the College of
Computer and Information Sciences (CCIS). This project fulfills core
requirements outlined in the IS337 course, focusing on delivering a user-
friendly platform that integrates essential features for student
transportation needs.

1.1 Background
With the Riyadh Metro being a critical infrastructure project aimed at
enhancing urban mobility, students require tailored information to
optimize their travel routes, access discounted fares, and understand
metro line connectivity. This application addresses these needs by
providing a centralized platform for metro-related information and
student-specific benefits.

1.2 Requirements Covered

1. User Authentication: Secure sign-up (Join Us) and sign-in pages
with password validation and session management.

2. Dynamic Content: Personalized welcome pages displaying

registered user information and metro system details.

3. Metro Information Hub: A dedicated SABIC Station page

featuring metro line descriptions, ticket pricing, discount tips, and
downloadable resources.

4. Interactive Features: JavaScript-powered form validations,

password visibility toggles, and responsive design for cross-device
compatibility.

5. Security: PHP-based session handling and MySQL database

integration for secure user data storage.

4
This application leverages HTML5, CSS3, JavaScript, and PHP to
deliver a robust, accessible, and visually cohesive solution, ensuring
students can navigate the Riyadh Metro system efficiently while
benefiting from institutional discounts and real-time travel guidance.

5
2. “Welcome” Page
Before Sign In

After Sign In

6
3. “Sign in” page

7
4. “Join us” page

8
9
5. “SABIC station”

10
11
6. Conclusions (2 marks)
6.1 Technologies & Languages Used
1. HTML5/CSS3: For structuring and styling web pages, ensuring
cross-device responsiveness and visual consistency.

2. JavaScript: Implemented client-side form validations, password

visibility toggles, and dynamic UI interactions.

3. PHP: Handled server-side logic, including user authentication,

session management, and database operations.

4. MySQL: Stored user credentials securely, leveraging

PHP’s password_hash() and password_verify() for encryption.

6.2 Development Stack

 LAMP Stack:
o Windows: Hosted locally using XAMPP for Apache and MySQL
integration.

o Apache: Served as the web server to host the application.

o MySQL: Managed relational database for user data storage.

o PHP: Processed backend logic and database connectivity.

6.3 Editor & Tools

 Visual Studio Code: Primary code editor with extensions for PHP,
HTML, and CSS support.

 XAMPP: Local server environment for testing and development.

6.4 Security Measures

 Password Hashing: Used password_hash() and password_verify() to
encrypt user passwords.

 Session Management: PHP sessions to restrict unauthorized access

to protected pages.
12
 Input Sanitization: Basic SQL injection prevention
via real_escape_string().

6.5 How to Run the Application

1. Prerequisites:
o Install XAMPP (Apache + MySQL).

o Create a database named metro_db in phpMyAdmin.

2. Setup:
o Place project files in the htdocs folder (e.g., C:\xampp\htdocs\
StudentPublicCommuter).

3. Execution:
o Start Apache and MySQL via XAMPP.

o Access the app at http://localhost/ StudentPublicCommuter.

4. Database: The users table auto-creates on first run via config.php.

13
7. Appendix
7.1 Most Significant JavaScript Code: Password Validation
& Visibility Toggle

File: script.js

// Password match validation for registration

function validateForm() {
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
const errorDiv = document.getElementById('passwordError');

if (password !== confirmPassword) {

errorDiv.textContent = "Passwords do not match!";
errorDiv.style.display = 'block';
return false;
}
return true;
}

// Toggle password visibility

document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.password-toggle').forEach(button => {
button.addEventListener('click', () => {
const input = button.previousElementSibling;
input.type = input.type === 'password' ? 'text' : 'password';
});
});
});

Significance:

 Ensures password consistency during registration.

 Enhances usability by allowing users to view passwords.

14
7.2 Most Critical PHP Code Snippets
Registration Validation (JoinUs.php)
// Check for existing username/email
$check_sql = "SELECT id FROM users WHERE username = '$username' OR email
= '$email'";
$check_result = $conn->query($check_sql);

if ($check_result->num_rows > 0) {
$error = "Username or email already exists!";
} else {
// Insert new user
$sql = "INSERT INTO users (...) VALUES (...)";
}

Why Important:

 Prevents duplicate accounts using UNIQUE database constraints.

 Validates critical user credentials upfront.

Login Authentication (SignIn.php)

$sql = "SELECT * FROM users WHERE username = '$username'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
$user = $result->fetch_assoc();
if (password_verify($password, $user['password'])) {
// Start session and redirect
}
}

Why Important:

 Securely authenticates users using username and hashed

passwords.

 Uses PHP’s built-in password_verify() for security.

15
Password Reset Logic (ForgotPassword.php)
// Update password using prepared statement
$stmt = $conn->prepare("UPDATE users SET password = ? WHERE username
= ?");
$stmt->bind_param("ss", $hashed_password, $username);

if ($stmt->execute()) {
$success = "Password updated successfully!";
}

Why Important:

 Uses prepared statements to prevent SQL injection.

 Securely updates passwords after identity verification.

7.3 Security Highlights

1. Password Hashing:
$hashed_password = password_hash($password,
PASSWORD_DEFAULT);
o Ensures passwords are never stored in plain text.

2. Session Management:
$_SESSION['loggedin'] = true;
$_SESSION['username'] = $user['username'];
o Securely tracks logged-in users.

3. Input Sanitization:
$username = $conn->real_escape_string($_POST['username']);
o Mitigates basic SQL injection risks.

7.4 Key Feature Implementation

Dynamic Header Title Fix:

<title><?php echo isset($title) ? $title : 'Riyadh Metro'; ?></title>

16
Significance:

 Prevents "Undefined variable" errors across all pages.

 Ensures consistent page titles.

17