Final Project Development
CMU529: Advanced Web Development - Session 12
Birmingham Newman University
Lecturer: James Williams
E-commerce Application Development
3-hour session • 20 slides • Dedicated project work time
Session Timeline:
- 10 min: Registration & waiting
- 20 min: Project overview & requirements
- 60 min: Project planning & consultation
- 15 min: Break
- 90 min: Dedicated project work time
- Remaining: Individual consultation & support
Assessment Overview
CMU529: Advanced Web Development
Project Type: Individual full-stack e-commerce application
Weighting: 100% of module grade
Technology Stack: PHP, MySQL, HTML5, CSS3, JavaScript, Bootstrap
Due: End of module (consultation with tutor required)
- Complete online store with product catalogue
- Shopping cart functionality
- User accounts and authentication
- Payment system integration
- Admin panel for management
Project Requirements
Example Requirements:
- Front-end Framework: E.g., Bootstrap 5 for responsive design
- Back-end Development: E.g., PHP for server-side logic
- Database: MySQL for data storage and management
- Product Catalogue: Complete product management system
- Shopping Cart: Session-based cart functionality
- User Accounts: Registration, login, and profiles
- Documentation: Comprehensive code comments
Learning Outcomes Assessed
This project will assess your ability to:
- Plan and design contemporary web-based interfaces using digital tools and techniques
- Design usable interfaces for web-based environments across mobile, tablet, and desktop browsers
- Examine and interpret how interactive and responsive websites are designed, organised, and managed through contemporary code and frameworks
- Write and manipulate efficient code to problem solve, develop interactive technologies, and manage digital web-based content
- Have an awareness of the process by which front-end webpages are delivered to users
- Reflect on the professional, moral, legal and ethical issues associated with a computer science professional working within the field of web application development
Example Project Structure
ecommerce-project/
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
├── includes/
│ ├── config.php
│ ├── database.php
│ ├── functions.php
│ └── auth.php
├── admin/
│ ├── dashboard.php
│ ├── products.php
│ └── orders.php
├── uploads/
│ └── products/
├── index.php
├── products.php
├── cart.php
├── checkout.php
├── login.php
├── register.php
└── README.md
Database Schema
-- Users table
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
role ENUM('user', 'admin') DEFAULT 'user',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Products table
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
description TEXT,
price DECIMAL(10,2) NOT NULL,
stock INT DEFAULT 0,
image VARCHAR(255),
category_id INT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Orders table
CREATE TABLE orders (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT,
total DECIMAL(10,2),
status ENUM('pending', 'processing', 'shipped', 'delivered'),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Example Features
Front-end Features:
- ✓ Responsive Bootstrap 5 design
- ✓ Product listing with search and filters
- ✓ Product detail pages
- ✓ Shopping cart with add/remove items
- ✓ User registration and login forms
- ✓ Checkout process
- ✓ Order confirmation pages
Back-end Features:
- ✓ User authentication and session management
- ✓ Product CRUD operations
- ✓ Shopping cart session handling
- ✓ Order processing and storage
- ✓ Admin panel for product/order management
- ✓ Input validation and security measures
- ✓ Database operations with prepared statements
Security Considerations
Example Security Measures:
- Input Validation: Validate all user inputs
- SQL Injection Prevention: Use prepared statements
- XSS Protection: Escape all output with htmlspecialchars()
- CSRF Protection: Implement CSRF tokens
- Password Security: Hash passwords with password_hash()
- Session Security: Secure session management
- File Upload Security: Validate file uploads
// Example: Secure password hashing
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);
// Example: Prepared statement
$stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
$stmt->execute([$email]);
// Example: Output escaping
echo htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');
Documentation Requirements
Code Documentation Standards:
- Harvard Newman Format: All code comments must use Harvard Newman format references
- Function Documentation: Document all functions with purpose, parameters, and return values
- File Headers: Include file purpose and author information
- Complex Logic: Comment complex algorithms and business logic
- Database Schema: Document table structures and relationships
- README File: Comprehensive project documentation
/**
* User authentication function
* Validates user credentials and creates session
* @param string $email User email address
* @param string $password User password
* @return array|false User data or false on failure
* Reference: Harvard Newman Format (2024)
*/
function authenticateUser($email, $password) {
// Implementation here
}
Work Session 1
60 Minutes - Project Planning & Consultation
Use this time to work on your project thoroughly and get guidance from your tutor
Development Resources
Essential Resources:
- Bootstrap 5: https://getbootstrap.com/docs/5.0/
- PHP Documentation: https://www.php.net/manual/
- MySQL Documentation: https://dev.mysql.com/doc/
- W3Schools: https://www.w3schools.com/
- Stack Overflow: https://stackoverflow.com/
// Useful PHP functions for e-commerce
session_start(); // Session management
password_hash(); // Password hashing
password_verify(); // Password verification
htmlspecialchars(); // Output escaping
filter_var(); // Input validation
PDO::prepare(); // Prepared statements
move_uploaded_file(); // File uploads
Common Challenges & Solutions
Frequently Encountered Issues:
- Session Management: Ensure proper session handling across pages
- Cart Persistence: Use sessions or database to maintain cart state
- File Uploads: Validate file types and sizes before processing
- Database Connections: Use PDO with proper error handling
- Responsive Design: Test on multiple screen sizes
- Security: Always validate and sanitize user input
- Error Handling: Implement proper error logging and user feedback
// Example: Proper error handling
try {
$stmt = $pdo->prepare("INSERT INTO products (name, price) VALUES (?, ?)");
$stmt->execute([$name, $price]);
echo "Product added successfully";
} catch(PDOException $e) {
error_log("Database error: " . $e->getMessage());
echo "An error occurred. Please try again.";
}
Testing Checklist
Functionality Testing:
- ✓ User registration and login
- ✓ Product browsing and search
- ✓ Shopping cart operations
- ✓ Checkout process
- ✓ Order placement and confirmation
- ✓ Admin panel functionality
- ✓ File upload for product images
Security Testing:
- ✓ SQL injection attempts
- ✓ XSS attack prevention
- ✓ CSRF token validation
- ✓ Input validation
- ✓ File upload security
- ✓ Session security
Responsive Testing:
- ✓ Desktop browser compatibility
- ✓ Tablet responsiveness
- ✓ Mobile device compatibility
- ✓ Cross-browser testing
Work Session 2: Project Development
90 Minutes - Dedicated Project Work Time
Focus on building a solid foundation for your e-commerce application
Submission Requirements
Check Moodle for the exact requirements:
- Complete Source Code: All PHP, HTML, CSS, and JavaScript files
- Database Schema: SQL file with table creation scripts
- README File: Comprehensive project documentation
- Installation Instructions: Step-by-step setup guide
- Code Comments: Harvard Newman format references throughout
README.md should include:
- Project overview and features
- Technology stack used
- Installation instructions
- Database setup guide
- References and resources used
Individual Consultation Time
Remaining Time - Individual Support
Use this time for:
- One-on-one consultation with your tutor
- Technical problem-solving
- Code review and feedback
Don't hesitate to ask questions and seek guidance!
Next Steps
After This Session:
- Continue Development: Work on your project outside of class
- Regular Check-ins: Schedule consultations with your tutor
- Testing: Thoroughly test all features
- Documentation: Complete all required documentation
- Final Review: Review your code and make improvements
- Submission: Prepare final submission package
Recommended Timeline:
Week 1: Foundation and basic features
Week 2: Core e-commerce functionality
Week 3: Advanced features and security
Week 4: Testing, documentation, and final review
Remember: Start early and test frequently!