Module Introduction & Web Architecture

Learning Objectives

• Understand the CMM721 module structure and assessment requirements
• Learn the fundamentals of web architecture (client/server model)
• Comprehend the full-stack development workflow
• Set up development environment and tools
• Understand HTTP protocol and request/response cycle

CMM721: Web Application Development

• Level: Masters (Postgraduate Conversion)
• Credits: 20 credits
• Technologies: HTML5, CSS3, JavaScript, Python, Django, React
• Assessment: Portfolio (60%) + Final Project (40%)
• Duration: 12 sessions with intensive hands-on exercises

This module prepares conversion students for professional full-stack web development careers, emphasising industry-standard practices and modern development workflows.

Assessment Structure

Essential Development Tools

Code Editors & IDEs

• Visual Studio Code: Free, powerful, extensible (Recommended)
• PyCharm Professional: Python-focused IDE (Free for students)
• WebStorm: JavaScript/TypeScript-focused IDE

Version Control

• Git: Distributed version control system
• GitHub: Code hosting, collaboration, and CI/CD

Additional Tools

• Postman: API testing and documentation
• Browser DevTools: Chrome/Firefox developer tools

Web Architecture Fundamentals

• Client (Frontend): Web browser rendering HTML, CSS, JavaScript
• Server (Backend): Application server processing requests (Django)
• HTTP/HTTPS: Protocol for client-server communication
• Database: Persistent data storage (PostgreSQL, SQLite)
• Full-Stack: Frontend + Backend + Database integration

Client (Browser) → HTTP Request → Server (Django) → Database Query
↓
Database Response → Server Processing → HTTP Response → Client Renders

HTTP Protocol Basics

HTTP Methods (CRUD Operations)

GET    /api/users/         # Retrieve list of users
GET    /api/users/1/       # Retrieve specific user
POST   /api/users/         # Create new user
PUT    /api/users/1/       # Update entire user record
PATCH  /api/users/1/       # Partial update
DELETE /api/users/1/       # Delete user

HTTP Status Codes

• 200 OK: Request successful
• 201 Created: Resource created successfully
• 400 Bad Request: Invalid client request
• 404 Not Found: Resource doesn't exist
• 500 Internal Server Error: Server-side error

Full-Stack Development Stack

Task 1: Development Environment Setup

Recommended Project Structure

my-web-app/
├── frontend/                # React application
│   ├── public/
│   ├── src/
│   │   ├── components/      # Reusable UI components
│   │   ├── pages/           # Page-level components
│   │   ├── services/        # API service functions
│   │   └── styles/          # CSS/SCSS files
│   └── package.json
├── backend/                 # Django application
│   ├── app/                 # Main Django app
│   │   ├── models.py        # Database models
│   │   ├── views.py         # View functions/classes
│   │   ├── serializers.py   # DRF serializers
│   │   └── urls.py          # URL routing
│   ├── manage.py
│   └── requirements.txt     # Python dependencies
├── .gitignore
└── README.md

Modern Development Workflow

1. Plan: Define requirements, user stories, and architecture
2. Design: Create wireframes, mockups, and database schema
3. Develop: Build features iteratively (frontend + backend)
4. Test: Unit tests, integration tests, end-to-end tests
5. Review: Code review, refactoring, documentation
6. Deploy: CI/CD pipeline, staging, production deployment
7. Monitor: Error tracking, performance monitoring, user analytics

Task 2: Understanding HTTP

Web Development Best Practices

Code Organization

• Follow PEP 8 (Python) and Airbnb JavaScript style guides
• Use meaningful variable and function names
• Write self-documenting code with clear comments
• Keep functions small and focused (Single Responsibility Principle)

Version Control

• Commit frequently with descriptive messages
• Use feature branches for development
• Never commit sensitive data (use .env files)
• Write meaningful commit messages (Conventional Commits)

Security Considerations

• Input Validation: Validate and sanitize all user input
• Authentication: Django authentication system, JWT tokens
• Authorization: Permission classes, role-based access control
• SQL Injection: Always use Django ORM (parameterized queries)
• XSS Protection: Django auto-escapes template variables
• CSRF Protection: Django CSRF middleware (enabled by default)
• HTTPS: SSL/TLS certificates for production
• Environment Variables: Never hardcode secrets

Next Session: HTML5 & Semantic Structure

• Semantic HTML5 elements and document structure
• Accessibility standards (WCAG 2.1, ARIA)
• SEO optimization and meta tags
• Forms and input validation
• HTML validation and debugging

Preparation: Review HTML fundamentals and think about accessible web design principles.