Thandiswa Maseko
30HA2202105
Boston Acardia
HPXS300
SA1
SOURCE CODES
Login.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Login – Task Management System</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div class=”form-container”>
<h2>Login</h2>
<form action=”php/login.php” method=”POST”>
<label for=”username”>Username</label>
<input type=”text” id=”username” name=”username” required>
<label for=”password”>Password</label>
<input type=”password” id=”password” name=”password” required>
<button type=”submit”>Login</button>
<p>Don’t have an account? <a href=”register.html”>Register here</a></p>
</form>
</div>
</body>
</html>
Register.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Register – Task Management System</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div class=”form-container”>
<h2>Register</h2>
<form action=”php/register.php” method=”POST”>
<label for=”username”>Username</label>
<input type=”text” id=”username” name=”username” required>
<label for=”password”>Password</label>
<input type=”password” id=”password” name=”password” required>
<label for=”confirm_password”>Confirm Password</label>
<input type=”password” id=”confirm_password” name=”confirm_password”
required>
<button type=”submit”>Register</button>
<p>Already have an account? <a href=”login.html”>Login here</a></p>
</form>
</div>
</body>
</html>
Style.css
/* Reset some basic styling */
{
Margin: 0;
Padding: 0;
Box-sizing: border-box;
Font-family: Arial, sans-serif;
}
Body {
Display: flex;
Justify-content: center;
Align-items: center;
Min-height: 100vh;
Background-color: #f4f4f9;
}
.form-container {
Width: 100%;
Max-width: 400px;
Background: #ffffff;
Padding: 20px;
Box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
Border-radius: 8px;
}
H2 {
Text-align: center;
Margin-bottom: 20px;
}
Label {
Display: block;
Margin: 10px 0 5px;
}
Input[type=”text”],
Input[type=”password”] {
Width: 100%;
Padding: 8px;
Border: 1px solid #ddd;
Border-radius: 5px;
}
Button {
Width: 100%;
Padding: 10px;
Background-color: #007bff;
Border: none;
Color: #ffffff;
Font-size: 16px;
Cursor: pointer;
Border-radius: 5px;
Margin-top: 20px;
}
Button:hover {
Background-color: #0056b3;
}
P{
Text-align: center;
Margin-top: 15px;
}
A{
Color: #007bff;
Text-decoration: none;
}
Register.php
<?php
Require ‘config.php’;
If ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
$username = $_POST[‘username’];
$password = $_POST[‘password’];
$confirm_password = $_POST[‘confirm_password’];
If ($password === $confirm_password) {
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
$stmt = $conn->prepare(“INSERT INTO users (username, password, role)
VALUES (?, ?, ‘user’)”);
$stmt->bind_param(“ss”, $username, $hashed_password);
If ($stmt->execute()) {
Header(“Location: ../login.html?registration=success”);
} else {
Echo “Error: Could not register.”;
}
$stmt->close();
} else {
Echo “Passwords do not match.”;
}
}
$conn->close();
?>
Login.php
<?php
Require ‘config.php’;
If ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
$username = $_POST[‘username’];
$password = $_POST[‘password’];
$stmt = $conn->prepare(“SELECT user_id, password FROM users WHERE
username = ?”);
$stmt->bind_param(“s”, $username);
$stmt->execute();
$stmt->store_result();
If ($stmt->num_rows > 0) {
$stmt->bind_result($user_id, $hashed_password);
$stmt->fetch();
If (password_verify($password, $hashed_password)) {
Session_start();
$_SESSION[‘user_id’] = $user_id;
Header(“Location: ../dashboard.php”); // Placeholder for the dashboard page
} else {
Echo “Incorrect password.”;
}
} else {
Echo “No user found.”;
}
$stmt->close();
}
$conn->close();
?>
ANALYSIS PHASE
DATA FLOW DIAGRAMS
USE CASE MODEL
ACTIVITY DIAGRAM
Communication Diagrams:
SYSTEM DESIGN
System Design for Online Task Management System
1. Conceptual Design:
o The Online Task Management System allows users (admins and
team members) to manage tasks in an organization.
Logical Design:
Frontend: A web interface using php allows users to create and track tasks.
Backend: Built with MySQL for handling API requests such as user
authentication and task management.
Physical Design:
The database is hosted on MySQL or MariaDB, providing data storage and
retrieval.
User Interface Design
Usability: The interface is intuitive with easy navigation, allowing users to
quickly access tasks and manage them.
Consistency: Uniform design elements like buttons and icons ensure a
cohesive experience across the system.
Clarity: Clear labels and tooltips guide users, while icons help visually
communicate actions (e.g., edit, complete).
Responsiveness: The design adapts to desktop and mobile devices for a
smooth experience on all screen sizes.
Accessibility: The system supports keyboard navigation, screen readers, and
high colour contrast for improved accessibility.
ENTITY RELATIONSHIP DIAGRAM
DOCUMENTATION
The Online Task Management System is a web-based application designed to
streamline task creation, assignment, and tracking within teams or organizations. It
allows users to register, log in, and manage their accounts securely. The system
enables task creation, assignment, and status tracking (e.g., Pending, In Progress,
Completed), helping users efficiently manage their workflows. Additionally, users can
comment on tasks to provide updates or feedback.
The application consists of a frontend, built with HTML and CSS for the user
interface, and a backend powered by PHP to handle business logic and interact with
the MySQL database, where user and task data are stored. The database schema
is designed with tables for Users, Tasks, and Comments, ensuring data integrity
through foreign key relationships.
Admin Access
Email: [email protected]
Password: admin123
