Web Programming
Semester Project Specification (Individual)
1. Project Overview
In this semester project, each student is required to design and develop a complete dynamic
website as part of the Web Programming course.
The project is designed to assess the student’s ability to:
• Apply core web technologies in a real-world context
• Build a structured, responsive, and database-driven website
• Implement server-side logic using PHP and MySQL
• Use AJAX for dynamic interactions
• Apply basic security and SEO practices
• Clearly explain design and implementation decisions
This is an individual project and must be developed progressively throughout the semester.
2. Project Domains (Mandatory)
Each student must choose ONE (1) project domain from the list below.
Domain ID Project Domain
D1 Online Book Store
D2 Fashion / Shoe Store
D3 Restaurant / Food Ordering Website
D4 Electronics Store
D5 Online Course Platform
Once a domain is selected and approved, it cannot be changed.
Domain Assignment Rule (Based on Student ID)
To reduce duplication and ensure fair distribution across project domains, each student’s
project domain is assigned based on their Student ID.
Domain Assignment Formula
Domain_ID = StudentID mod 5
Domain Mapping Table
Result (StudentID mod 5) Assigned Domain
0 D1 – Online Book Store
1 D2 – Fashion / Shoe Store
2 D3 – Restaurant / Food Ordering Website
3 D4 – Electronics Store
4 D5 – Online Course Platform
Examples
• Student ID 20210005
→ 20210005 mod 5 = 0
→ Online Book Store
• Student ID 20210018
→ 20210018 mod 5 = 3
→ Electronics Store
Important Rules
• Students must follow the assigned domain based on the formula above.
• Domain changes are not allowed, except with explicit instructor approval.
• Submitting a project under an incorrect domain will result in:
o Major point deduction, or
o Project rejection, depending on severity.
3. Technical Requirements
A. Layout & Structure
The website must include the following layout components:
• Header
o Website logo aligned to the left
• Navigation Bar
o At minimum: Home, Products (or Items), Search, Contact
• Main Content (Body)
o Layout width is flexible
o The chosen width and layout style must be explained in the project report
• Footer
o Short website information (copyright, contact details, etc.)
B. Responsive Design
• The website must be responsive and usable on:
o Desktop
o Tablet
o Mobile devices
• You may use:
o Bootstrap
o OR custom CSS with media queries
C. Products / Items Page
Clicking Products (or equivalent) must display a catalog loaded from the database.
Minimum requirements:
• Products/items must be stored in MySQL
• Sorting must be supported (e.g., by price, name, rating)
• Implement ONE (1) of the following:
o Pagination
o Lazy loading
Students must explain why they chose this approach in the project report.
D. Search Function (AJAX Required)
• Implement a product/item search feature using AJAX
• Requirements:
o Search results must update dynamically while typing or submitting
o No full page reload during search
o Users can click a result to view the item details page
E. Categories & Navigation Path (Breadcrumbs)
• Products/items must be organized into categories
• Breadcrumb navigation must be displayed on relevant pages
Example:
Home > Products > Category > Item
F. Store Locations & Maps Integration
• A seller or service provider may have multiple physical locations
• On each product/item page:
o Display which locations have the item available (or serve it)
o Provide a Google Maps link for each location
G. User Authentication System
The website must implement a basic authentication system with the following features:
• Register
• Login
• Logout
• Forgot Password
Requirements:
• Authentication using email and password
• Input validation (email format, password length, etc.)
• Passwords must not be stored in plain text
• Social login (Google / Facebook) is allowed but optional
H. Search Engine Optimization (SEO)
Apply at least three (3) SEO practices, such as:
• Meaningful page titles and meta descriptions
• Semantic HTML elements
• Friendly URLs (e.g., /products/shoes)
• Sitemap
4. Database Requirements
• The project must use MySQL
• At minimum, the database must include:
o Users
o Products / Items
o Categories
• Database design must:
o Use appropriate primary keys
o Include foreign keys where relevant
o Be clearly explained in the project report
5. Deliverables
Each student must submit the following:
1. Source Code
o Organized project folder
o Clear file and folder structure
2. Database Files
o SQL file for table creation and sample data
o ER diagram (image or PDF)
3. Project Report (PDF, 5–10 pages)
The report must include:
o Introduction and purpose of the website
o Explanation of domain-specific design choices
o Layout and responsive design decisions
o Database schema explanation
o Implementation details (AJAX, authentication, SEO)
o Challenges faced and lessons learned
4. Final Demonstration
o Live demonstration during the final lab session
o Website must be functional
6. Evaluation & Grading (100 Points)
Component Description Points
Layout & Navigation Header, navbar, body, footer 10
Responsive Design Works on desktop, tablet, mobile 10
Products / Items Page Sorting + pagination or lazy loading 15
Search with AJAX Dynamic search without page reload 10
Categories & Breadcrumbs Correct structure and navigation 10
Store Locations & Maps Availability + Google Maps links 10
User Authentication Register, login, validation, forgot password 15
SEO Implementation At least 3 techniques applied 10
Project Report Clarity and explanation of decisions 5
Final Demonstration Working system 5
TOTAL 100
7. Academic Integrity Policy
This is an individual project.
• Students may use tutorials, documentation, and online references
• Copying another student’s project (fully or partially) is prohibited
• Projects that are substantially similar may receive a zero score
During the final demonstration or review, students may be asked to:
• Explain parts of their code
• Describe design decisions
• Make small modifications
Submitting a working website does not guarantee a passing grade if the student cannot
demonstrate understanding of their own work.
8. Important Notes
• Start early and work incrementally
• Use version control (GitHub / GitLab) if possible
• Focus on correctness, clarity, and understanding, not complexity
• This project reflects real-world web development practices
Final Remark for Students
The goal of this project is not to build a perfect or complex product, but to demonstrate that you
understand how a modern web application works from front-end to back-end.