CSC309 - Web Development Notes - Jenci Wei Winter 2023

Sep 19, 2026

Uploaded by Tawan

Comprehensive web development course notes outlining how end users access the World Wide Web through browser requests to servers. Covers core networking concepts such as TCP/IP, IP addressing, HTTP and HTTPS, and the role of DNS and domain names. Explains HTTP as a stateless protocol, contrasts stateful vs stateless services, and details HTTP message structure, methods, response codes, URLs, and URL encoding, forming a foundation for later backend, Django, and frontend topics.

LanguageEnglish

CategoryPresentations

FormatPDF

Pages83

Reading Time29 min

AccessFree to download

Introduction

End User Perspective

World Wide Web and Networking Basics

TCP/IP, IP Addressing, Ports

HTTP, HTTPS, and Stateless Protocols

HTTP Messages: Requests and Responses

HTTP Methods and Response Codes

URL and URL Encoding

CSC309 Notes Jenci Wei Winter 2023 Contents 1 Introduction 3 2 Hypertext Markup Language (HTML) 6 3 Cascading Style Sheet (CSS) 9 4 Backend 18 5 Django Templates and Models 27 6 Django Models 36 7 Migrations 40 8 Advanced Views 42 9 Django Forms 45 10 REST APIs 48 11 Django REST Framework (DRF) 50 12 Token-Based Authentication 53 13 JavaScript 54 14 Document Object Model (DOM) 58 15 Asynchronous Requests 60 16 jQuery 61 17 Advanced JavaScript 63 18 Event Loop and Promises 66 19 React 68 20 React Project 71 21 Hooks 74 22 Global State 76 23 Multi-Page React App 77 24 Web Deployent 79 25 Deploying Django Project 80 26 Deploy React Project 83 1 Introduction End User Perspective 1. User enters a web address inside a browser 2. Browser sends a request to the server 3. Server processes the request and responds with a web page World Wide Web (the Web) • A collection of information and services that can be accessed on local devices through the Internet • Internet { An interconnected network of computers { Can communicate with each other through standardized protocols • TCP/IP { Protocols that provide reliable end-to-end communication between two applications on di􀀋erent computers { IP (Internet Protocol) ∗ Identi􀀌es computers on the network by assigning a unique IP address, e.g. [192.168.7.41](192.168.7.41) ∗ Knows how to route data from/to the destination computer { TCP (Transmission Control Protocol) ∗ Allows multiple virtual connections to share a single physical IP address ∗ Each connection is identi􀀌ed by a unique port number, e.g. 80 ∗ Deals with the unreliable nature of data transmission over network • [HTTP](HTTP) { Protocol for delivery of contents from the Web Domains • IP addresses are hard to remember, and it is possible to move websites elsewhere • Some websites may be hosted on multiple physical machines (i.e. CDN: content delivery network) • Want addresses that are easy to remember, and also easy to remap to di􀀋erent IP addresses • Domain Name { Maps an easy-to-remember name to IP addresses { [E.g. www.google.com maps](E.g. www.google.com maps) to [142.251.41.78](142.251.41.78) { Clients must resolve the domain before making a connection Domain Name System (DNS) • A collection of mappings from domain names to their IP addresses • Want to 􀀌nd the DNS server • DNS manually assigned by system administrator { E.g. [8.8.8.8](8.8.8.8) is Google's public DNS • DNS automatically con􀀌gured when computer connects to Internet { Computer sends a broadcast message to everyone on the local network { The DHCP server is responsible for assigning an IP address to the computer, and it also provides the IP address of a DNS server Hypertext Transfer Protocal ([HTTP](HTTP)) • A protocol for distributing and accessing hypertext documents, where hypertext is text displayed on electronic devices • Built on top of TCP/IP • Human readable protocol • [HTTP servers](HTTP servers) typically listen on port 80 • [HTTPS](HTTPS) ([HTTP](HTTP)) secure { Messages are encrypted for security purposes, which protects against eavesdropping and tampering { Used by 81 .3% o􀀋 all public websites Stateless Protocol • Does not remember previous interaction with their clients • [HTTP is a stateless](HTTP is a stateless) protocol Statefulness • A stateful service reacts di􀀋erently to the same input • Server must track the states of all open connections • E.g. a website might want to know whether a user is logged in { A stateful server remembers this on the server-side { A stateless server gives the client a cookie to be passed back later, where the client reminds the server of the previous step | Stateful Service | Stateless Service | | --- | --- | | Requires server to keep information about a session (interaction with client) | Does not require server to remember session states | | More complicated to design and

FAQs

What is the basic request-response flow from the end user perspective?

A user enters a web address in a browser, the browser sends a request to the server, and the server processes it and returns a web page.

How do DNS and domain names help clients connect to websites?

Domain names map easy-to-remember names to IP addresses. Clients must resolve the domain, using DNS, before making a connection.

What are the main components of an HTTP request and an HTTP response?

An HTTP request includes method, path, header, and body, while an HTTP response includes response code, header, and body.

Sep 19, 2026

Uploaded by Tawan