Introduction to Full-stack Development

CMU529: Advanced Web Development - Session 1

Birmingham Newman University

Lecturer: James Williams

Understanding client-server architecture and web development stack

3-hour session • 25 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 concept of full-stack web development
Learn about client-server architecture
Explore the web development technology stack
Understand the role of different technologies in web development
Plan and structure an e-commerce project
Set up a local development environment

What is Full-stack Development?

                    Full-stack development involves working on both the front-end
                    (client-side) and back-end (server-side) of web applications
                

Front-end: What users see and interact with
Back-end: Server-side logic and database operations
Full-stack developers understand the entire application
Enables building complete, functional web applications

Full-stack Web Application

Front-end: HTML, CSS, JavaScript, Bootstrap

Back-end: PHP, MySQL, Server Logic

Result: Complete web application

Watch: Full-stack Development Explained

Understanding the complete web development stack and architecture

Client-Server Architecture

Client (Browser) ←→ Server (Web Server)

Client: Web browser (Chrome, Firefox, Safari)
Server: Computer running web server software
Communication: HTTP/HTTPS protocol
Request-Response: Client requests, server responds

                    Example: When you visit a website, your browser (client)
                    requests the page from a web server, which sends back HTML, CSS, and JavaScript
                    files.
                

How Web Applications Work

User enters URL in browser
Browser sends HTTP request to server
Server processes request (PHP logic)
Server queries database (MySQL)
Server generates HTML response
Browser receives and displays page
User interacts with page (JavaScript)

Request-Response Cycle

User → Browser → Server → Database → Server → Browser → User

Front-end Technologies

                    HTML5 (Structure)

                    + CSS3 (Styling)

                    + JavaScript (Interactivity)

                    + Bootstrap (Framework)

HTML5: Structure and content of web pages
CSS3: Styling, layout, and visual design
JavaScript: Client-side interactivity and functionality
Bootstrap: CSS framework for responsive design

                    Front-end Goal: Create user-friendly, responsive, and
                    interactive web interfaces
                

Watch: Front-end Technologies Explained

Learn how HTML, CSS, and JavaScript work together in web development

Back-end Technologies

                    PHP (Server Logic)

                    + MySQL (Database)

                    + Apache/Nginx (Web Server)

PHP: Server-side programming language
MySQL: Relational database management system
Apache/Nginx: Web server software
File System: Storage for files and assets

                    Back-end Goal: Process data, manage business logic, and serve
                    dynamic content
                

Watch: PHP Fundamentals Explained

Comprehensive introduction to PHP - the server-side programming language

Web Development Stack

LAMP Stack (Linux, Apache, MySQL, PHP)

Operating System: Linux (or Windows/macOS)

Web Server: Apache (or Nginx)

Database: MySQL

Programming Language: PHP

Industry-standard stack for web development
Open-source and widely supported
Excellent for e-commerce applications
Easy to learn and deploy

E-commerce Application Structure

                    E-commerce Website Structure:

                    ├── Front-end (User Interface)

                    │ ├── Product catalog pages

                    │ ├── Shopping cart interface

                    │ ├── User registration/login

                    │ ├── Checkout process

                    │ └── Order tracking

                    ├── Back-end (Server Logic)

                    │ ├── User authentication

                    │ ├── Product management

                    │ ├── Order processing

                    │ ├── Payment handling

                    │ └── Admin panel

                    └── Database (Data Storage)

                    ├── User accounts

                    ├── Product information

                    ├── Orders and transactions

                    └── System settings

Development Environment Setup

XAMPP: All-in-one package (Apache, MySQL, PHP)
Code Editor: Visual Studio Code, Sublime Text
Browser: Chrome, Firefox with developer tools
Database Tool: phpMyAdmin (included with XAMPP)

                    Local Development: Run everything on your computer for testing
                    before deploying to a live server.
                

E-commerce Project Planning

Requirements Analysis: Define features and functionality
Database Design: Plan tables and relationships
User Interface Design: Wireframes and mockups
Technology Selection: Choose appropriate tools
Development Timeline: Set milestones and deadlines

                    Project Phases:

                    1. Planning & Design (Sessions 1-3)

                    2. Back-end Development (Sessions 4-8)

                    3. Front-end Integration (Sessions 9-11)

                    4. Testing & Deployment (Session 12)

Database Design Basics

                    E-commerce Database Tables:

                    users (id, username, email, password, created_at)

                    products (id, name, description, price, stock, category_id)

                    categories (id, name, description)

                    orders (id, user_id, total_amount, status, created_at)

                    order_items (id, order_id, product_id, quantity, price)

Tables store related data
Relationships connect different tables
Primary keys uniquely identify records
Foreign keys link related data

Watch: MySQL Fundamentals Explained

Comprehensive introduction to MySQL - the popular database management system

Security Considerations

Input Validation: Validate all user inputs
SQL Injection Prevention: Use prepared statements
Password Hashing: Never store plain text passwords
Session Management: Secure user sessions
HTTPS: Encrypt data transmission
File Upload Security: Validate file types and sizes

                    Security First: Always consider security implications when
                    handling user data.
                

Performance Optimization

Database Optimization: Efficient queries and indexing
Caching: Store frequently accessed data
Image Optimization: Compress and resize images
Code Optimization: Efficient algorithms and clean code
CDN Usage: Distribute static content globally

                    Optimization Techniques:
                    - Use database indexes for faster queries
                    - Implement page caching
                    - Optimize images for web
                    - Minify CSS and JavaScript files
                

Testing Strategies

Unit Testing: Test individual functions
Integration Testing: Test component interactions
User Testing: Real user feedback
Cross-browser Testing: Test in different browsers
Mobile Testing: Test on mobile devices
Security Testing: Vulnerability assessment

                    Test Early, Test Often: Regular testing helps catch issues
                    before they become problems.
                

Deployment Process

Code Review: Check code quality and security
Testing: Comprehensive testing on staging environment
Database Migration: Set up production database
File Upload: Upload files to web server
Configuration: Set up production settings
Monitoring: Monitor performance and errors

                    Deployment Platforms:

                    - Shared hosting (cPanel)

                    - VPS hosting (DigitalOcean, AWS)

                    - Cloud platforms (Heroku, Vercel)

                    - Dedicated servers

Industry Best Practices

Version Control: Use Git for code management
Code Standards: Follow coding conventions
Documentation: Document code and processes
Backup Strategy: Regular backups of code and data
Monitoring: Track application performance
Continuous Learning: Stay updated with new technologies

                    Professional Development: Good practices lead to maintainable
                    and scalable code.
                

Task 1: Development Environment Setup

Instructions:

Download and install XAMPP on your computer
Start Apache and MySQL services
Create a new project folder in htdocs directory
Install Visual Studio Code or your preferred code editor
Create a simple PHP test file to verify setup
Access phpMyAdmin and create a test database
Create a basic HTML page with PHP integration
Test your setup by viewing the page in a browser

Time: 45 minutes

This task will help you set up your development environment and verify everything is working correctly

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

Essential Web Development Tools

Browser Developer Tools: Chrome DevTools, Firefox Developer Tools
Code Editors: VS Code, Sublime Text, Atom
Version Control: Git, GitHub, GitLab
Database Tools: phpMyAdmin, MySQL Workbench
API Testing: Postman, Insomnia
Image Editing: GIMP, Photoshop, Figma

                    Tool Selection: Choose tools that work best for your workflow
                    and project requirements.
                

Web Standards and Protocols

HTTP/HTTPS: Communication protocol between client and server
HTML5: Latest standard for web markup
CSS3: Latest standard for web styling
JavaScript ES6+: Modern JavaScript features
REST API: Standard for web service communication
JSON: Data interchange format

                    HTTP Request Example:

                    GET /products.php HTTP/1.1

                    Host: example.com

                    User-Agent: Mozilla/5.0...

Responsive Design Principles

Mobile-First: Design for mobile devices first
Flexible Grid: Use CSS Grid and Flexbox
Flexible Images: Images that scale properly
Media Queries: CSS rules for different screen sizes
Touch-Friendly: Design for touch interfaces
Performance: Optimize for mobile performance

                    Responsive Goal: Provide optimal viewing experience across all
                    devices.
                

Web Accessibility Guidelines

Semantic HTML: Use proper HTML elements
Alt Text: Provide alternative text for images
Keyboard Navigation: Ensure keyboard accessibility
Color Contrast: Maintain sufficient color contrast
Screen Reader Support: Test with screen readers
Focus Indicators: Clear focus indicators for navigation

                    Accessibility Example:

                    <img src="product.jpg" alt="Red running shoes">

                    <button aria-label="Add to cart">+</button>

Task 2: E-commerce Project Planning

Instructions:

Create a project planning document for your e-commerce website
Define the target audience and business requirements
List all required features (user registration, product catalog, shopping cart, etc.)
Design a basic database schema with main tables
Create wireframes for key pages (home, product listing, cart, checkout)
Plan the technology stack and development timeline
Identify potential challenges and solutions
Create a project folder structure

Time: 45 minutes

This task will help you plan your e-commerce project and understand the development process

Session Summary

Full-stack development involves both front-end and back-end
Client-server architecture is fundamental to web applications
LAMP stack provides a solid foundation for web development
Proper planning is essential for successful projects
Security and performance should be considered from the start
Development environment setup is crucial for productivity

Next Session:

Bootstrap Framework Fundamentals - Building responsive user interfaces