<!
DOCTYPE html>
<html>
<head>
<title>Arsi University Student Cafe Project Documentation</title>
<style>
body { font-family: Arial, sans-serif; margin: 40px; line-height: 1.6; }
h1 { color: #2c3e50; text-align: center; border-bottom: 3px solid #3498db; padding-bottom: 10px;
}
h2 { color: #2980b9; border-left: 5px solid #3498db; padding-left: 10px; margin-top: 30px; }
h3 { color: #16a085; }
.page-break { page-break-after: always; }
.title-page { text-align: center; margin-top: 150px; }
.section { margin-bottom: 25px; }
.subsection { margin-left: 20px; }
table { border-collapse: collapse; width: 100%; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
th { background-color: #f2f2f2; }
.code { background-color: #f8f8f8; padding: 15px; border-left: 4px solid #3498db; font-family:
Consolas, monospace; margin: 15px 0; }
</style>
</head>
<body>
<div class="title-page">
<h1>Arsi University Student Cafe Management System</h1>
<h2>A Web-Based Portal for Student Meal Services</h2>
<br><br><br><br>
<h3>Prepared for: Arsi University</h3>
<h3>Prepared by: [Your Name/Team Name]</h3>
<br><br><br>
<h3>[Date: ___________]</h3>
</div>
<div class="page-break"></div>
<h1>Abstract</h1>
<div class="section">
<p>This project involves the development of a dynamic website for the Arsi University Student
Cafe, designed to provide students with easy access to meal schedules, cafe information, and user
authentication for personalized services. The system includes user registration, login, and a
responsive front-end interface displaying weekly menus, cafe location, and contact details. The aim is
to enhance student engagement and streamline access to campus dining information.</p>
</div>
<div class="page-break"></div>
<h1>1. Introduction</h1>
<div class="section">
<h2>1.1 Background</h2>
<div class="subsection">
<p>Arsi University's student cafe serves as a central dining facility for students, offering free daily
meals. However, there was no centralized digital platform for students to view menus, cafe hours, or
register for services. This project addresses that gap by developing an interactive website that
provides comprehensive information about the cafe services while offering user authentication for
personalized access.</p>
</div>
<h2>1.2 Problem Statement</h2>
<div class="subsection">
<p>Students lacked a reliable and accessible digital platform to:</p>
<ul>
<li>View weekly meal schedules and daily menus</li>
<li>Access cafe location, operating hours, and contact information</li>
<li>Register for meal services and create user accounts</li>
<li>Receive updates on menu changes and special offers</li>
<li>Navigate through structured cafe information efficiently</li>
</ul>
</div>
<h2>1.3 Objectives</h2>
<div class="subsection">
<ul>
<li>To develop a user-friendly, responsive website for Arsi University Student Cafe</li>
<li>To implement secure user authentication system (login/signup functionality)</li>
<li>To display weekly meal schedules, cafe services, and location information</li>
<li>To create an engaging about us section highlighting cafe services</li>
<li>To ensure responsive design for both mobile and desktop access</li>
<li>To integrate Google Maps for location visualization</li>
</ul>
</div>
</div>
<div class="page-break"></div>
<h1>2. Scope of the Project</h1>
<div class="section">
<h3>Included Features:</h3>
<ul>
<li>Front-end pages: Home, Login, Signup</li>
<li>User authentication system with validation</li>
<li>Display of weekly menu table with breakfast, lunch, and dinner options</li>
<li>Cafe location integration using Google Maps</li>
<li>About Us section with service descriptions</li>
<li>Responsive UI with CSS styling</li>
<li>Back-end PHP processing for form handling</li>
<li>MySQL database integration for user management</li>
<li>AJAX-based login validation for enhanced user experience</li>
<li>Error handling and user feedback system</li>
</ul>
<h3>Excluded Features:</h3>
<ul>
<li>Payment integration system</li>
<li>Admin panel for menu management</li>
<li>Real-time meal booking system</li>
<li>Online ordering capabilities</li>
<li>Inventory management system</li>
<li>Email notification system</li>
<li>Mobile application development</li>
</ul>
</div>
<div class="page-break"></div>
<h1>3. Tools and Technologies</h1>
<div class="section">
<table>
<tr>
<th>Technology</th>
<th>Purpose</th>
<th>Version/Details</th>
</tr>
<tr>
<td>HTML5</td>
<td>Front-end structure and semantic markup</td>
<td>Latest standards</td>
</tr>
<tr>
<td>CSS3</td>
<td>Styling, layout, and responsive design</td>
<td>Flexbox, Grid, Media Queries</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Client-side interactivity</td>
<td>ES6+, jQuery 3.6.0</td>
</tr>
<tr>
<td>PHP</td>
<td>Server-side scripting and processing</td>
<td>PHP 7.4+</td>
</tr>
<tr>
<td>MySQL</td>
<td>Database management system</td>
<td>MySQL 5.7+</td>
</tr>
<tr>
<td>Apache</td>
<td>Web server</td>
<td>XAMPP/WAMP stack</td>
</tr>
<tr>
<td>Google Maps API</td>
<td>Location visualization</td>
<td>Embed API</td>
</tr>
<tr>
<td>VS Code</td>
<td>Code editor</td>
<td>With PHP extensions</td>
</tr>
<tr>
<td>Git</td>
<td>Version control</td>
<td>Optional but recommended</td>
</tr>
</table>
</div>
<div class="page-break"></div>
<h1>4. System Design</h1>
<div class="section">
<h2>4.1 Database Schema</h2>
<div class="subsection">
<h3>Table: users</h3>
<div class="code">
CREATE TABLE users (
id INT(11) NOT NULL AUTO_INCREMENT,
firstname VARCHAR(50),
lastname VARCHAR(50),
sex VARCHAR(10),
email VARCHAR(100),
password VARCHAR(255),
PRIMARY KEY (id),
UNIQUE KEY (email)
);
</div>
<h3>Table Structure:</h3>
<table>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
</tr>
<tr>
<td>id</td>
<td>int(11)</td>
<td>NO</td>
<td>PRI</td>
<td>NULL</td>
<td>auto_increment</td>
</tr>
<tr>
<td>firstname</td>
<td>varchar(50)</td>
<td>YES</td>
<td></td>
<td>NULL</td>
<td></td>
</tr>
<tr>
<td>lastname</td>
<td>varchar(50)</td>
<td>YES</td>
<td></td>
<td>NULL</td>
<td></td>
</tr>
<tr>
<td>sex</td>
<td>varchar(10)</td>
<td>YES</td>
<td></td>
<td>NULL</td>
<td></td>
</tr>
<tr>
<td>email</td>
<td>varchar(100)</td>
<td>YES</td>
<td>UNI</td>
<td>NULL</td>
<td></td>
</tr>
<tr>
<td>password</td>
<td>varchar(255)</td>
<td>YES</td>
<td></td>
<td>NULL</td>
<td></td>
</tr>
</table>
</div>
<h2>4.2 Page Flow Diagram</h2>
<div class="subsection">
<p><strong>User Navigation Flow:</strong></p>
<div class="code">
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Login │────▶│ Home │────▶│ Menu │
│ Page │ │ Page │ │ Page │
└─────────────┘ └─────────────┘ └─────────────┘
↓ ↓ ↓
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Database │◀────│ Signup │ │ Location │
│ │ │ Page │ │ Page │
└─────────────┘ └─────────────┘ └─────────────┘
↓
┌─────────────┐
│ About Us │
│ Page │
└─────────────┘
</div>
<p><strong>Authentication Flow:</strong></p>
<ol>
<li>User visits site → Redirected to Login page</li>
<li>New user clicks "Signup" → Redirected to Registration page</li>
<li>After registration → Redirected to Login page</li>
<li>Successful login → Redirected to Home page</li>
<li>From Home page → User can navigate to all sections</li>
</ol>
</div>
</div>
<div class="page-break"></div>
<h1>5. Implementation</h1>
<div class="section">
<h2>5.1 Front-end Implementation</h2>
<div class="subsection">
<h3>Key Features Implemented:</h3>
<ul>
<li><strong>Responsive Navigation Bar:</strong> Header with links to all sections</li>
<li><strong>Home Section:</strong> Welcome message and cafe introduction</li>
<li><strong>About Us Section:</strong> Cafe history and service descriptions</li>
<li><strong>Menu Table:</strong> Weekly schedule displaying breakfast, lunch, and dinner
options</li>
<li><strong>Offers Section:</strong> Highlighting meal categories with descriptions</li>
<li><strong>Location Section:</strong> Embedded Google Maps with cafe location</li>
<li><strong>Footer:</strong> Contact information and important links</li>
<li><strong>Forms:</strong> Login and Signup forms with validation</li>
</ul>
<h3>Technical Implementation:</h3>
<ul>
<li>HTML5 semantic tags used for better structure</li>
<li>CSS3 Flexbox/Grid for responsive layouts</li>
<li>External CSS files for modular styling</li>
<li>JavaScript for interactive elements</li>
<li>jQuery for AJAX functionality in login</li>
</ul>
</div>
<h2>5.2 Back-end Implementation</h2>
<div class="subsection">
<h3>PHP Files and Their Functions:</h3>
<table>
<tr>
<th>File</th>
<th>Purpose</th>
<th>Key Functions</th>
</tr>
<tr>
<td>[Link]</td>
<td>User authentication</td>
<td>Validates credentials, AJAX response, session initiation</td>
</tr>
<tr>
<td>[Link]</td>
<td>User registration</td>
<td>Form validation, database insertion, error handling</td>
</tr>
<tr>
<td>[Link]</td>
<td>Error display</td>
<td>Centralized error message rendering</td>
</tr>
<tr>
<td>[Link]</td>
<td>Main application page</td>
<td>Displays all cafe information and services</td>
</tr>
</table>
<h3>Key Back-end Features:</h3>
<ul>
<li>Database connection using MySQLi</li>
<li>Form data sanitization with mysqli_real_escape_string()</li>
<li>Input validation for required fields</li>
<li>Email format validation</li>
<li>Password confirmation checking</li>
<li>Duplicate user prevention</li>
<li>AJAX-based login for better UX</li>
</ul>
</div>
<h2>5.3 Database Implementation</h2>
<div class="subsection">
<h3>Database Connection:</h3>
<div class="code">
// Database connection in [Link]
$conn = mysqli_connect("localhost", "root", "", "db");
// Database connection in [Link]
$conn = mysqli_connect("localhost", "root", "", "db");
if (!$conn) {
die("Database connection failed: " . mysqli_connect_error());
}
</div>
<h3>Key Database Operations:</h3>
<ol>
<li><strong>User Registration:</strong>
<div class="code">INSERT INTO users (firstname, lastname, sex, email, password)
VALUES (?, ?, ?, ?, ?)</div>
</li>
<li><strong>User Authentication:</strong>
<div class="code">SELECT * FROM users
WHERE firstname='[username]' AND password='[password]'
LIMIT 1</div>
</li>
<li><strong>Duplicate Check:</strong>
<div class="code">SELECT * FROM users WHERE email = '[email]' LIMIT 1</div>
</li>
</ol>
</div>
</div>
<div class="page-break"></div>
<h1>6. Security Considerations</h1>
<div class="section">
<h2>Current Security Measures:</h2>
<div class="subsection">
<table>
<tr>
<th>Security Aspect</th>
<th>Implementation</th>
<th>File/Location</th>
</tr>
<tr>
<td>SQL Injection Prevention</td>
<td>mysqli_real_escape_string() used</td>
<td>[Link], [Link]</td>
</tr>
<tr>
<td>Input Validation</td>
<td>Server-side validation for required fields</td>
<td>[Link], [Link]</td>
</tr>
<tr>
<td>Email Validation</td>
<td>FILTER_VALIDATE_EMAIL filter</td>
<td>[Link]</td>
</tr>
<tr>
<td>Duplicate Prevention</td>
<td>Database check before registration</td>
<td>[Link]</td>
</tr>
<tr>
<td>Error Handling</td>
<td>Centralized error display system</td>
<td>[Link]</td>
</tr>
</table>
</div>
<h2>Identified Security Gaps:</h2>
<div class="subsection">
<ol>
<li><strong>Password Storage:</strong> Passwords stored in plain text</li>
<li><strong>Session Management:</strong> No session variables implemented</li>
<li><strong>Prepared Statements:</strong> Only used in [Link], not in [Link]</li>
<li><strong>HTTPS Enforcement:</strong> No SSL/TLS implementation</li>
<li><strong>CSRF Protection:</strong> No tokens implemented</li>
<li><strong>Password Policy:</strong> No complexity requirements</li>
</ol>
</div>
<h2>Recommended Security Enhancements:</h2>
<div class="subsection">
<ul>
<li><strong>Password Hashing:</strong>
<div class="code">// During registration
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
// During login verification
if (password_verify($input_password, $stored_hash)) {
// Login successful
}
</div>
</li>
<li><strong>Prepared Statements:</strong> Implement in [Link]</li>
<li><strong>Session Management:</strong> Implement session_start() and session
variables</li>
<li><strong>Input Sanitization:</strong> Add htmlspecialchars() for output</li>
<li><strong>HTTPS:</strong> Enforce SSL/TLS in production</li>
<li><strong>Password Policy:</strong> Implement minimum length and complexity</li>
</ul>
</div>
</div>
<div class="page-break"></div>
<h1>7. Conclusion and Future Enhancement</h1>
<div class="section">
<h2>Conclusion</h2>
<div class="subsection">
<p>The Arsi University Student Cafe website successfully delivers a functional digital platform
that addresses the core needs of students seeking cafe information. The system achieves its primary
objectives by providing:</p>
<ul>
<li>A responsive and user-friendly interface</li>
<li>Secure user authentication system</li>
<li>Comprehensive display of weekly menus and cafe services</li>
<li>Integrated location mapping</li>
<li>Effective error handling and user feedback</li>
</ul>
<p>The project demonstrates practical implementation of web development technologies
including HTML5, CSS3, PHP, MySQL, and JavaScript, creating a foundation that can be expanded for
more advanced features.</p>
</div>
<h2>Future Enhancements</h2>
<div class="subsection">
<h3>Short-term Enhancements (Phase 2):</h3>
<ol>
<li><strong>Admin Dashboard:</strong> For menu management and user administration</li>
<li><strong>Password Recovery:</strong> "Forgot Password" functionality with email
verification</li>
<li><strong>Enhanced Security:</strong> Implement password hashing and prepared
statements</li>
<li><strong>Menu Management:</strong> CRUD operations for weekly menu updates</li>
<li><strong>User Profile:</strong> Allow users to update their information</li>
</ol>
<h3>Medium-term Enhancements (Phase 3):</h3>
<ol>
<li><strong>Meal Booking System:</strong> Reserve meals for specific time slots</li>
<li><strong>Feedback System:</strong> Allow students to rate meals and provide
feedback</li>
<li><strong>Notification System:</strong> Email/SMS alerts for menu changes</li>
<li><strong>Multi-language Support:</strong> Add local languages (Amharic, Oromiffa)</li>
<li><strong>Integration with University Systems:</strong> Sync with student registration
data</li>
</ol>
<h3>Long-term Enhancements (Phase 4):</h3>
<ol>
<li><strong>Mobile Application:</strong> Native iOS/Android apps</li>
<li><strong>Real-time Updates:</strong> Live menu changes and availability</li>
<li><strong>Payment Integration:</strong> For paid meal options</li>
<li><strong>Analytics Dashboard:</strong> Track meal preferences and usage patterns</li>
<li><strong>QR Code Integration:</strong> For quick check-ins and meal verification</li>
</ol>
</div>
</div>
<div class="page-break"></div>
<h1>8. References</h1>
<div class="section">
<ol>
<li>PHP Manual. (n.d.). Retrieved from [Link]
<li>MySQL Documentation. (n.d.). Retrieved from [Link]
<li>W3Schools Online Web Tutorials. (n.d.). Retrieved from [Link]
<li>MDN Web Docs. (n.d.). Retrieved from [Link]
<li>jQuery Documentation. (n.d.). Retrieved from [Link]
<li>Google Maps Platform Documentation. (n.d.). Retrieved from
[Link]
<li>Arsi University Official Website. (n.d.). Retrieved from [Link]
<li>OWASP Foundation. (2023). OWASP Top Ten. Retrieved from [Link]
project-top-ten/</li>
</ol>
<h3>Appendix: File Structure</h3>
<div class="code">
project-root/
│
├── css/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
│
├── Image/
│ └── Arsi [Link]
│
├── Javascript/
│ ├── [Link]
│ └── [Link]
│
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── [Link] (if exists)
</div>
</div>
</body>
</html>