Module Introduction & Web Architecture

CMM721: Web Application Development - Session 1

Birmingham Newman University

Lecturer: James Williams

Masters Level Conversion Course

3-hour session • 16 slides • 2 interactive tasks

Session Timeline:

10 min: Registration & waiting
20 min: Opening slides
45 min: Task 1
15 min: Break/Catch up
20 min: Secondary slides
45 min: Task 2
Remaining: Self-study

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

Masters Level Conversion Course - Full-Stack 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

Portfolio (60%)

Weekly practical exercises demonstrating technical proficiency
Critical case study analyses of existing web applications
Design awareness and user experience evaluations
Documentation of development decisions and processes

Final Project (40%)

Complete full-stack web application from concept to deployment
Database integration with Django ORM
RESTful API development using Django Rest Framework
Professional documentation and presentation

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-Server Architecture

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

Frontend (Client-Side)

HTML5: Semantic structure and content
CSS3: Styling, layout (Flexbox, Grid)
JavaScript (ES6+): Interactivity and dynamic behavior
React: Component-based UI library
Axios: HTTP client for API requests

Backend (Server-Side)

Python 3: Primary programming language
Django: High-level web framework (MTV pattern)
Django REST Framework: RESTful API toolkit
PostgreSQL: Production database (SQLite for development)
Django ORM: Object-Relational Mapping

Task 1: Development Environment Setup

Objective:

Set up a complete development environment for full-stack web development

Required Software:

Install Visual Studio Code (or preferred IDE)
Install Python 3.11+ (latest stable version)
Install Node.js 20 LTS and npm
Install Git and configure user details
Create GitHub account (if not already registered)
Install PostgreSQL 15+ (optional for now, SQLite included with Python)

Deliverables:

Screenshots showing successful installations
Basic project structure with README.md
Git repository initialization

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

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

                    Agile Development: Iterative development with continuous feedback and improvement
                

Task 2: Understanding HTTP

Objective:

Analyze HTTP communication between browser and server using developer tools

Activity Steps:

Open Chrome/Firefox Developer Tools (F12)
Navigate to the Network tab
Visit a website (e.g., GitHub, Stack Overflow)
Identify different HTTP requests (Documents, XHR, JS, CSS, Images)
Examine request headers (User-Agent, Accept, Authorization)
Examine response headers (Content-Type, Cache-Control)
Note different HTTP methods and status codes

Questions to Answer:

What information is sent in the initial request?
How many additional requests are made?
What HTTP methods are used and why?
What status codes do you observe?

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

Security by Design - OWASP Top 10

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.

Questions & Discussion

Contact: JWilliams@Staff.newman.ac.uk

Office Hours: By appointment

Resources: Moodle, GitHub Classroom

Thank you for your attention!