🌐 Programming for the Web

📱 Applications of Web Programming

🎯 (SE-12-03)

📌 Explore the applications of web programming across a variety of modern contexts.

🖱️ Interactive Websites and Webpages

Interactive websites use client-side JavaScript to respond to user actions in real time — without requiring a full page reload. The Document Object Model (DOM) is the programming interface that allows JavaScript to read and manipulate the structure, style, and content of a live HTML page. Examples include form validation, dropdown navigation, image carousels, and live search filtering. Modern Single Page Applications (SPAs) such as those built with React or Vue extend this further, dynamically rendering entire pages client-side.

🛒 E-Commerce

E-commerce platforms use web programming to support the entire buying lifecycle: product browsing, shopping cart management, payment processing, and order tracking. Key technical requirements include secure HTTPS connections (to protect payment data), session management (to maintain cart state across pages), database integration (to query product catalogues and stock levels), and integration with payment gateway APIs (such as Stripe or PayPal). Examples include Amazon, eBay, and Shopify-powered stores.

📱 Progressive Web Apps (PWAs)

PWAs are web applications built with standard web technologies (HTML, CSS, JavaScript) that offer a native-app-like experience. They are installable on the user's home screen, can work offline via service workers, and receive push notifications. Examples include Twitter Lite, Google Maps, and Starbucks. PWAs are significant because they eliminate the need for a separate iOS/Android codebase while still appearing as a native application to the end-user.

📦 Data Transfer on the Internet

🎯 (SE-12-03)

📌 Investigate and practise how data is transferred across the internet.

📦 Data Packets

When data is sent over the internet, it is broken into small, manageable units called data packets. Each packet contains a header (source IP, destination IP, sequence number, protocol type) and a payload (the actual data fragment). Packets from the same transmission may take different routes through the network and are reassembled in the correct order at the destination. This packet-switching model means the failure of one route does not disrupt the overall transmission — other paths are used instead.

🌐 IP Addresses and IPv4

Every device on a network is assigned an Internet Protocol (IP) address — a unique numerical label used to identify it for communication purposes. IPv4 (Internet Protocol version 4) addresses are 32-bit numbers expressed in dotted-decimal notation, divided into four octets (e.g., 192.168.1.1). IPv4 supports approximately 4.3 billion unique addresses. Due to address exhaustion, Network Address Translation (NAT) is used so that multiple devices on a private network can share a single public IP address. IPv6 was introduced to address this limitation using 128-bit addresses.

🔍 Domain Name System (DNS)

The Domain Name System (DNS) translates human-readable domain names (e.g., www.google.com) into machine-readable IP addresses (e.g., 142.250.70.142). When a user types a URL, the browser queries a DNS resolver (usually provided by their ISP), which traverses a hierarchy of DNS servers (Root → TLD → Authoritative) to resolve the domain. The resolved IP address is then cached locally (for a duration defined by TTL — Time To Live) to speed up future requests.

🔌 Web Protocols and Their Ports

🎯 (SE-12-03)

📌 Investigate and describe the function of web protocols and their associated port numbers.

🔐 Processes for Securing the Web

🎯 (SE-12-04, SE-12-07)

📌 Explain the processes and technologies used to secure data and identity on the web.

📊 Big Data and Web Architecture

🎯 (SE-12-03, SE-12-05)

📌 Investigate the effect of big data on web architecture and the ethical considerations of large-scale data collection.

⛏️ Data Mining

Data mining is the process of discovering patterns, correlations, and insights within large datasets using statistical and machine learning techniques. Web platforms mine user interaction data (clicks, search queries, time on page) to personalise recommendations, optimise advertising, and predict future behaviour. For example, Netflix mines viewing history to recommend shows; Google mines search patterns to rank results. Ethical concerns include user consent, data sovereignty, and the potential for discriminatory algorithmic outcomes.

🏷️ Metadata

Metadata is "data about data" — descriptive information that provides context about other data without being the primary content itself. On the web, metadata includes HTTP headers (content type, cache directives), HTML <meta> tags (page description, author, viewport settings), and file metadata (creation date, author, geolocation embedded in photos). Metadata is critical for search engine indexing (SEO), content management, and security analysis. Importantly, metadata can reveal sensitive information even when primary content is private — for example, a photo's EXIF data can expose a user's exact GPS location.

📺 Streaming Service Management

Streaming services (e.g., YouTube, Netflix, Spotify) manage enormous volumes of concurrent data delivery. Key architectural solutions include: Content Delivery Networks (CDNs) — geographically distributed server networks that cache and serve content from the nearest node to reduce latency; Adaptive Bitrate Streaming (ABR) — which dynamically adjusts video quality based on the user's current bandwidth; and load balancers that distribute incoming requests across multiple server instances to prevent any single server from being overwhelmed.

🌍 Role of the W3C

🎯 (SE-12-05)

📌 Investigate and explain the role of the World Wide Web Consortium (W3C) in the development of web applications. The W3C is the international standards body that develops and maintains technical web standards to ensure the web remains open, accessible, and interoperable.

🏗️ Modelling a Web Development System

🎯 (SE-12-02, SE-12-06)

📌 Model the elements that form a complete web development system, including the client, server, and database tiers.

🎨 Client-Side (Front-End) Web Programming

The client side refers to all code that executes within the user's web browser. Front-end code consists of three complementary technologies: HTML (structure and content), CSS (visual presentation and layout), and JavaScript (interactivity and dynamic behaviour). The browser downloads these files from the server, parses them, and renders the visual page. Client-side code is visible to the user (via browser dev tools) and should never contain sensitive data such as API keys or database credentials.

🖥️ Server-Side (Back-End) Web Programming

The server side refers to code that executes on the web server — invisible to the client. The server receives HTTP requests, applies business logic (authentication, data processing, calculations), queries the database, and returns a response (HTML page or JSON data). Common back-end languages include Python (Django, Flask), JavaScript (Node.js/Express), Ruby (Rails), and PHP. The server environment is protected from end-users and may contain sensitive configuration, credentials, and proprietary algorithms.

💾 Databases — SQL and Non-SQL

🖥️ Web Browser Influence & Developer Tools

🎯 (SE-12-03, SE-12-06)

📌 Explore and explain how the web browser influences web development decisions, and how developer tools support the build and debug process.

⚙️ Browser Rendering Engines

Different browsers use different rendering engines to parse HTML/CSS and render the visual page: Blink (Chrome, Edge, Opera), WebKit (Safari), and Gecko (Firefox). Differences in engine implementations can cause the same CSS to render slightly differently across browsers — a core challenge of front-end development known as cross-browser compatibility. Developers use tools like Can I Use (caniuse.com) to check which CSS/JavaScript features are supported across browser versions before using them in production.

🛠️ Developer (Dev) Tools

All modern browsers include built-in developer tools (opened with F12 or right-click → Inspect) that allow engineers to inspect, debug, and optimise web applications in real time:

🎨 Cascading Style Sheets (CSS)

🎯 (SE-12-02, SE-12-06)

📌 Investigate CSS and its impact on the design and maintainability of web applications.

💅 Consistency of Appearance

CSS enables a single stylesheet to control the visual appearance of every page across an entire website. CSS Custom Properties (variables) allow designers to define a value once (e.g., --brand-colour: #6366F1) and reuse it throughout, ensuring colour, typography, and spacing remain consistent. Changing a single variable instantly updates every element that references it. Design systems (such as Google's Material Design or Apple's Human Interface Guidelines) are implemented through CSS to enforce consistent visual language across large products.

/* Define design tokens as CSS variables */
:root {
    --primary-colour: #6366F1;
    --font-body: 'Inter', sans-serif;
    --spacing-md: 1rem;
}

/* Apply consistently across components */
.btn-primary {
    background: var(--primary-colour);
    font-family: var(--font-body);
    padding: var(--spacing-md) calc(var(--spacing-md) * 2);
}

/* Media query for responsive design (flexibility with devices) */
@media (max-width: 768px) {
    .grid-3col { grid-template-columns: 1fr; }
}

📱 Flexibility with Browsers and Display Devices

Responsive web design ensures a single codebase adapts to any screen size — from a 27-inch desktop monitor to a 375px mobile screen. CSS media queries apply different styles at defined breakpoints. Flexbox and CSS Grid provide flexible layout systems that redistribute space and reflow content automatically. The viewport meta tag instructs the browser to scale the page to the device's width, preventing the "zoomed-out desktop site" appearance on mobile.

🛠️ CSS Maintenance Tools

🔀 Version Control

🎯 (SE-12-09)

📌 Investigate the reasons for version control and apply it when developing a web application.

🛡️ Why Version Control is Essential

Version control systems (VCS) track every change made to a codebase over time, enabling developers to: roll back to any previous working state if a new change breaks functionality; branch the codebase to develop features or fix bugs in isolation without affecting the main production code; merge contributions from multiple developers working simultaneously; and maintain a complete audit trail of who changed what and why. Git is the dominant distributed VCS; GitHub, GitLab, and Bitbucket are the popular remote hosting platforms.

# Initialise a new repository
git init

# Create a feature branch (isolates work from main)
git checkout -b feature/user-login

# Stage changed files
git add index.html styles.css app.js

# Commit with a descriptive message
git commit -m "Add user login form with client-side validation"

# Push branch to remote repository (GitHub)
git push origin feature/user-login

# Merge feature into main once reviewed
git checkout main
git merge feature/user-login

📦 Code Libraries for Front-End Development

🎯 (SE-12-06)

📌 Explore the types and significance of code libraries available for front-end web development.

⚛️ Frameworks for Complex Web Applications

Front-end frameworks provide a structured architecture for building large, complex web applications. They enforce separation of concerns (UI components, state management, routing) and provide build tools that optimise code for production.

🟨 Template Engines

Template engines allow developers to inject dynamic data into HTML templates on the server before sending the page to the client, avoiding duplicate HTML markup. For example, a product listing page uses a single template and loops through a database result to generate each product card.

🅱️ Pre-designed CSS Classes

🔓 Open-Source Software in Web Development

🎯 (SE-12-05)

📌 Explain the use and development of open-source software in relation to web development, including ethical and practical considerations.

The modern web is built almost entirely on open-source software. Web servers (Apache, Nginx), programming languages (Python, Node.js), frameworks (React, Django), and databases (PostgreSQL, MySQL) are all open source. The NPM (Node Package Manager) ecosystem alone hosts over 2 million open-source packages that developers can import with a single command (npm install package-name).

⚖️ Licences and Attribution

Open-source software is governed by licences that define how it may be used, modified, and redistributed. Engineers must understand these before incorporating libraries into commercial projects:

🔐 Security Dependency Risk

Relying on open-source libraries introduces a supply chain security risk: if a maintainer introduces a vulnerability (accidentally or maliciously), all downstream projects that depend on it are affected. Engineers must: regularly run npm audit or equivalent tools to detect known vulnerabilities in dependencies, promptly update packages, and only include libraries with active maintenance and community trust.

⚡ Web Performance & Load Times

🎯 (SE-12-07, SE-12-08)

📌 Investigate methods to support and manage the load times of web pages and applications. Page speed directly impacts user retention — studies show a 1-second delay in load time can reduce conversions by up to 7%.

📝 Web Content Management Systems (CMS)

🎯 (SE-12-06)

📌 Research, experiment with and evaluate the prevalence and use of web content management systems.

A Content Management System (CMS) is a software platform that allows users to create, edit, organise, and publish digital content via a graphical interface — without requiring direct coding knowledge. CMSs power approximately 43% of all websites on the internet (W3Techs, 2024).

⚙️ Assessing Back-End Contribution

🎯 (SE-12-07)

📌 Assess the contribution of back-end web development to the success of a web application.

Back-end development is responsible for all logic that occurs on the server — the invisible engine that powers every user-facing feature. Its contribution to project success encompasses several critical dimensions:

🖥️ Technology Selection

The choice of back-end framework determines the project's scalability, maintainability, and development speed. Django (Python) provides a "batteries-included" approach with an ORM, admin panel, and authentication built in — accelerating development of data-heavy applications. Node.js/Express enables the same language (JavaScript) on front-end and back-end, simplifying the development team's skill requirements. Flask offers a minimal, flexible microframework for APIs. The right technology choice directly impacts delivery timelines and long-term maintenance cost.

⚠️ Business Logic and Data Integrity

The back end enforces all business rules that protect data integrity. For example, validating that a user's age is above 18 before processing a purchase, calculating order totals including applicable tax rates, or checking inventory levels before confirming a stock reservation. Enforcing these rules on the server (rather than only client-side) is essential because client-side code can be bypassed by malicious users using browser developer tools.

🔐 Security Enforcement

The back end is the primary security boundary of a web application. It implements authentication (password hashing with bcrypt, JWT token management), authorisation (role-based access control), input sanitisation (preventing SQL injection and XSS), and rate limiting (preventing brute-force login attacks). A poorly secured back end exposes the entire database and all user data to attackers.

🔄 The Back-End Web Request Process

🎯 (SE-12-07)

📌 Observe and describe the back-end process used to manage a web request from receipt to response.

🔄 The Request-Response Lifecycle

💻 Developing Web Applications & Shell Scripting

🎯 (SE-12-02)

📌 Develop a web application using an appropriate scripting language, and use shell scripts to make files and directories and search for text in files.

# Create project directory structure
mkdir -p my-webapp/{static/{css,js,images},templates,routes}

# Create starter files
touch my-webapp/app.py my-webapp/requirements.txt

# Navigate into project
cd my-webapp

# Search for all TODO comments in Python files
grep -rn "TODO" --include="*.py" .

# Search for a specific function name across all JS files
grep -rn "handleLogin" --include="*.js" static/js/

# List all files modified in the last 24 hours
find . -name "*.py" -mtime -1

# Count lines in all HTML template files
find templates/ -name "*.html" | xargs wc -l

🖱️ JavaScript DOM Manipulation

🎯 (SE-12-02)

📌 Develop client-side scripts that dynamically update page content using the Document Object Model (DOM).

The Document Object Model (DOM) is a programming interface that represents an HTML page as a tree of objects. JavaScript can read and modify any part of this tree — changing text, styles, attributes, and structure in real time without a page reload. Events such as click, submit, and DOMContentLoaded allow scripts to respond to user actions.

✅ Form Validation with DOM Manipulation

A common use case is validating a registration form on the client side before submitting data to the server. The script below listens for the form's submit event, prevents the default browser action, and runs custom validation logic.

// DOM Manipulation - updating page content dynamically
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registrationForm');
    const messageDiv = document.getElementById('message');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        const username = document.getElementById('username').value.trim();
        const email = document.getElementById('email').value.trim();
        const password = document.getElementById('password').value;

        if (validateForm(username, email, password)) {
            messageDiv.innerHTML = '<p class="success">Registration successful!</p>';
            messageDiv.style.display = 'block';
        }
    });
});

function validateForm(username, email, password) {
    const errors = [];

    if (username.length < 3 || username.length > 20) {
        errors.push('Username must be 3-20 characters');
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        errors.push('Invalid email format');
    }
    if (password.length < 8) {
        errors.push('Password must be at least 8 characters');
    }

    if (errors.length > 0) {
        document.getElementById('errors').innerHTML = errors.map(e => `<li>${e}</li>`).join('');
        return false;
    }
    return true;
}

🧪 Form Validation Test Data

When testing form validation, boundary cases, invalid formats, and malicious inputs should all be included in the test plan.

⚖️ Client-Side vs Server-Side Validation

📡 Fetch API & AJAX (Asynchronous Requests)

The Fetch API allows JavaScript to make HTTP requests to a server in the background without reloading the page — this pattern is known as AJAX (Asynchronous JavaScript and XML). Modern JavaScript uses the async/await syntax to write asynchronous code that reads like synchronous code, making it easier to follow and debug.

// Fetching data from an API (async/await pattern)
async function loadUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        displayUser(data);
    } catch (error) {
        console.error('Failed to load user:', error);
        showErrorMessage('Could not load user data. Please try again.');
    }
}

function displayUser(user) {
    document.getElementById('userName').textContent = user.name;
    document.getElementById('userEmail').textContent = user.email;
}

🌐 CORS — Cross-Origin Resource Sharing

🗄️ Web-Based Databases & SQL

🎯 (SE-12-06, SE-12-08)

📌 Apply a web-based database and construct scripts that execute SQL to manage and retrieve application data.

-- Selecting specific fields
SELECT first_name, last_name, email
FROM users
WHERE is_active = 1;

-- Common query: find all orders above a price threshold
SELECT order_id, total_price, order_date
FROM orders
WHERE total_price > 100.00
ORDER BY order_date DESC;

-- GROUP BY: total revenue per product category
SELECT category, SUM(price) AS total_revenue, COUNT(*) AS num_orders
FROM products
JOIN order_items ON products.product_id = order_items.product_id
GROUP BY category
ORDER BY total_revenue DESC;

-- INNER JOIN: link users to their orders
SELECT users.first_name, users.last_name, orders.order_id, orders.total_price
FROM users
INNER JOIN orders ON users.user_id = orders.user_id
WHERE users.country = 'Australia';

-- Complex example: developers and their total game costs (Course Spec p. 23)
SELECT Developers.First_name, Developers.Last_name, SUM(Games.cost) AS Totalcost
FROM Games, Publishers, Developers
WHERE Publishers.Name = 'Games Inc'
AND Publishers.Publisher_ID = Games.Publisher_ID
AND Developers.Developer_ID = Games.Developer_ID
GROUP BY Developers.Developer_ID
ORDER BY Developers.Last_name DESC;

📜 Common SQL Statement Reference

🔁 Comparing ORM to SQL

🎯 (SE-12-06, SE-12-08)

📌 Compare Object-Relational Mapping (ORM) to raw SQL for interacting with web application databases.

# ── RAW SQL approach (using parameterised query for safety) ──
import sqlite3
conn = sqlite3.connect('store.db')
cursor = conn.cursor()
cursor.execute("SELECT name, price FROM products WHERE category = ?", ('Electronics',))
results = cursor.fetchall()

# ── DJANGO ORM equivalent ──
from .models import Product
results = Product.objects.filter(category='Electronics').values('name', 'price')
# Django automatically generates: SELECT name, price FROM products WHERE category = 'Electronics'

🤝 Collaborative Work Practices

🎯 (SE-12-05, SE-12-09)

📌 Describe how collaborative work practices between front-end and back-end developers improve the development of a web solution.

📜 API Contracts and Documentation

The primary collaboration mechanism between front-end and back-end developers is the API contract — an agreed-upon specification of every endpoint's URL, HTTP method, request parameters, and response format. Tools like OpenAPI/Swagger allow teams to document and even mock APIs before the back end is fully built, enabling front-end and back-end development to proceed simultaneously. This prevents integration errors at the end of the project and enables both teams to work independently with confidence.

🔀 Version Control and Branching Strategies

Teams use Git branching workflows to manage parallel development. In the Git Flow model: the main branch always contains production-ready code; develop is the integration branch for completed features; and individual feature/ branches are created for each task. Pull Requests (PRs) are submitted when a feature is complete — requiring at least one peer code review before merging. This enforces code quality and knowledge sharing across the team, and ensures no one developer is a single point of failure for any part of the system.

⚖️ Open-Source and Ethical Collaboration

Collaborative web development carries ethical responsibilities. Teams must fairly attribute contributions, respect the licences of all third-party code used, ensure equitable division of workload, and maintain transparent communication with stakeholders about progress and setbacks. When using open-source code libraries, teams must monitor for security vulnerabilities and update dependencies promptly to protect users (Outcome SE-12-05).

📱 Designing & Implementing a Progressive Web App

🎯 (SE-12-02, SE-12-03, SE-12-06)

📌 Design, develop and implement a Progressive Web App applying UI/UX design principles and accessibility standards.

🎨 UI and UX Principles

♿ Accessibility and Inclusivity

PWA interfaces must be designed to be usable by everyone, including people with visual, auditory, cognitive, or motor disabilities:

⚙️ Core PWA Technical Requirements

const CACHE_NAME = 'pwa-cache-v1';
const ASSETS_TO_CACHE = ['/', '/index.html', '/css/styles.css', '/js/app.js'];

// Install event: cache core app shell assets
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS_TO_CACHE))
    );
});

// Fetch event: serve from cache, fallback to network
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(cached => cached || fetch(event.request))
    );
});

📄 Web App Manifest

The manifest.json file tells the browser how to install and present the PWA. Link it in your HTML <head>: <link rel="manifest" href="/manifest.json">

{
  "name": "HSC Study Planner",
  "short_name": "StudyApp",
  "description": "A PWA for organising HSC study sessions",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4f46e5",
  "orientation": "portrait",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

⚖️ PWA vs Native App

🔌 REST API Design

🎯 (SE-12-02, SE-12-03, SE-12-06)

📌 Design and implement RESTful APIs that follow standard conventions for URLs, HTTP methods, and status codes to enable reliable client-server communication.

📏 REST Principles

📡 HTTP Methods

🔢 HTTP Status Codes

🔗 RESTful URL Design

🧪 Flask REST API — Full CRUD Example

from flask import Flask, request, jsonify

app = Flask(__name__)

# In-memory "database"
books = [
    {"id": 1, "title": "Clean Code", "author": "Robert Martin"},
    {"id": 2, "title": "The Pragmatic Programmer", "author": "Hunt & Thomas"}
]
next_id = 3

# GET all books
@app.route('/api/books', methods=['GET'])
def get_books():
    return jsonify(books), 200

# GET single book
@app.route('/api/books/<int:book_id>', methods=['GET'])
def get_book(book_id):
    book = next((b for b in books if b['id'] == book_id), None)
    if book is None:
        return jsonify({'error': 'Book not found'}), 404
    return jsonify(book), 200

# POST — create new book
@app.route('/api/books', methods=['POST'])
def create_book():
    global next_id
    data = request.get_json()
    if not data or 'title' not in data or 'author' not in data:
        return jsonify({'error': 'title and author required'}), 400
    new_book = {'id': next_id, 'title': data['title'], 'author': data['author']}
    books.append(new_book)
    next_id += 1
    return jsonify(new_book), 201

# DELETE
@app.route('/api/books/<int:book_id>', methods=['DELETE'])
def delete_book(book_id):
    global books
    original_len = len(books)
    books = [b for b in books if b['id'] != book_id]
    if len(books) == original_len:
        return jsonify({'error': 'Book not found'}), 404
    return '', 204

if __name__ == '__main__':
    app.run(debug=True)

⚛️ Modern JavaScript Frameworks

🎯 (SE-12-03, SE-12-06)

📌 Explore the purpose and structure of JavaScript frameworks and evaluate when a framework is appropriate versus vanilla JavaScript.

❓ Why Frameworks Exist

As web applications grow, manually manipulating the DOM with vanilla JavaScript becomes complex and error-prone. Frameworks solve these problems:

• State management: When data changes, which parts of the page should update? Frameworks handle this automatically.
• Component reuse: Build once, use anywhere — a navigation bar, card, or form component defined once can be used across all pages.
• Data binding: UI automatically reflects data changes without manual DOM manipulation.

⚛️ React — Component-Based UI

React (by Meta/Facebook) uses components — reusable UI building blocks — and a Virtual DOM to efficiently update only the parts of the page that changed.

import { useState } from 'react';

function Counter() {
  // useState hook: declares 'count' state, initially 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;

⚖️ Framework Comparison