CSC309 – LECTURE 01

INTRODUCTION TO THE WEB

Khai Truong
Course info & structure
CSC309: Programming on the Web
An introduction to software development on the web. Concepts
underlying the development of programs that operate on the web;
survey of technological alternatives; greater depth on some
technologies. Operational concepts of the internet and the web,
static client content, dynamic client content, dynamically served
content, n-tiered architectures, web development processes, and
security on the web. Assignments involve increasingly more complex
web-based programs. Guest lecturers from leading e-commerce
firms will describe the architecture and operation of their web sites.
The term ends with an open-ended project for students to showcase
their mastery over the course content
https://artsci.calendar.utoronto.ca/course/csc309h1
Show of hands…

Have you ever built a web page of any sort before?

Have you ever built a dynamic web page before?
Have you built or are you interested in building a web application?
Course delivery
Morning section: M9-11AM; W10-11AM
Afternoon section: M1-3PM; W2-3PM

Mondays cover content that may show up on the midterm and the final.
Wednesdays focus on helping you with understanding the assignments or
the projects

The two sections are the same

• Attend either lectures
• Same instructor, TA’s, assessments, etc.
Classes will NOT be recorded
Instructor

Khai Truong
Professor (2006-present)
Ph.D. in CS from Georgia Institute of Technology
B.Sc. in CmpE from Georgia Institute of Technology

Research interests:
• Human-Computer Interaction (HCI)
• Ubiquitous Computing (Ubicomp)
• Accessibility
• Health & Assistive Technology

http://www.cs.toronto.edu/~khai
Teaching assistants
• Jun Ni (Jenny) Du
• Erica Floreani
• Mohammad (Kian) Kianpisheh
• Elizabeth Li
• Jiankai (Kevin) Pu
• Alireza Shateri
• Yichen Shen
• Zixuan Wan
Topics covered

Static
How the Web Dynamic Interactive Website
Web
works Websites Web pages deployment
pages

Week 1 Week 2 Week 3-6 Week 8-11 Week 12

● Web ● CSS ● Django framework ● JavaScript ● Deployment
architecture Styling ● MVC, MTV & Django ● jQuery platforms
● HTML template language ● React
● Database & object
relational models
(ORM)
● Restful APIs
(40 % of total grade)

Term project
A small and complete Web site
Group project with 4 team members
Split into 3 parts
• P1: Static design (10 % of total grade)
• P2: Backend implementation with Django (10 % of total grade)
• P3: Frontend implementation with JavaScript & React
(20 % of total grade; basic requirements: 15% , extra features: 5%)

For each milestone, book a grading session with TAs before

deadline
Form a group later this week on MarkUs to start planning
Term project topic
A small and complete Web site

Similar to Doodle or When2Meet, but different!

Doodle & When2Meet: help a group of users determine an overlapping

free time for everyone to meet
OneOnOnes: help the users schedule regular 1-1 meetings/lessons
with others
See project description for more detail
(30 % of total grade)

Individual assignments
3 assignments designed to help you master materials needed to
complete the project
• A1: Static Web pages (10 % of total grade)
• A2: Server side scripting (10 % of total grade)
• A3: Client side scripting (10 % of total grade)

Individual assignments are to be completed without discussion, help,

or code from other students
All the code must be written by yourself
(10 % of total grade)

Midterm exam
50-minute open book test, completed on Feb. 28 during regular
lecture time slot you enrolled in
Will cover content taught prior to reading week
To be completed at home or in lecture room on your own laptop/tablet
with Internet connectivity
(20 % of total grade)

Final exam
3 hour test
Date & time will be scheduled by Arts & Sciences
The final exam format will be online and open book
Will cover all course material, including topics that were tested on the
midterm exam & covered in the assignments
Course materials
Quercus (https://q.utoronto.ca/courses/337266)
• Syllabus
• Lecture slides & exercises
• Assignment handouts
• Project handouts
• Grades

Piazza (https://piazza.com/utoronto.ca/winter2024/csc309)
• Announcements
• Course discussion
• Assignment discussion
Note
A lot of material is covered over 12 weeks
Lectures and tests are focused on knowledge and concepts, with some
simple coding exercises
Project requires self-motivated learning
• Lecture itself is not sufficient to teach every detail of web
programming
• Consult reference manuals
• Search for answers to gaps in your knowledge online
• Complete the assignments for practice
• Ask questions!
Join or lead a Recognized Study Group (RSG)
Last year, over 3000 students joined a
Recognized Study Group (RSG)where they
met friends and reached their study goals
• Meet weekly with up to 8 classmates online
• Review and discuss course material
• Prepare for tests and exams
• Get student advice from upper year mentors
Join an RSG today:
http://uoft.me/recognizedstudygroups
Course policy
Deadlines & late work
All assignments and project milestones must be submitted
electronically and are due at 5:00PM sharp on the date of the
deadline for all students, regardless of when they enroll in the course
Late submissions will not be accepted

Late enrollment policy

All students are expected to follow the course along (and complete assignments)
as if they are enrolled in the course

To do this, students without Quercus access must email the instructor

([email protected]) their full name (which they used to enrolled at
UofT with), UofT email address, Quercus Login ID, and SIS ID, with "[CSC309]
Student Needing Quercus Access" as the email subject.
Extensions
If you need an extension, complete the special consideration form
• Need to fill some basic information
• Guarantees up to 2-days of extension
Project Milestones
• Entire group will receive the 2-day extension
• Extensions are non-stacking
Assignments
• MarkUs autotester may not work after original due date
Remarking
Remarking requests must be made via the remark request form within one
week of receiving your graded work.
Any requests to have work remarked must contain written reasons as to
why the students believe the work was incorrectly marked.
Re-evaluation appeals are at the discretion of the teaching team.
Note: adjustments in marks will be rare and could equally result in a
lowering or raising of the mark. If a re-revaluation is completed by the
instructors, the student must accept the resulting mark as the new mark,
whether it goes up or down or remains the same. When appealing a
re-evaluation decision, the student accepts this condition.
Academic integrity
Plagiarism and cheating are very serious academic offenses
All assignments and exercises are to be completed individually
Do not submit code for grading that is not your own
If you re-use any code, document the source
Ask (and answer) questions on Piazza, but don’t add details about your
solution
Exception: For term project, you may use open-source
packages, but they must be clearly referenced
Tip: Do not look at others’ code, and do not share your code
(including after the term)
Communications
Please note this is a large class
We highly encourage students to ask general questions about course
material or organization on Piazza
Please do not ask general questions privately—everyone with similar
questions can benefit from this
Private posts are intended for (and should only be used for) discussing
personal matters or for showing personal work (e.g., source code)
to the instructor/TA
Not posting questions correctly will only delay your chance to receive
the reply
Communications (part 2)
If additional communication is required after you have followed the
procedures described above, only then send an email to
[email protected]
Always use your UofT email address (i.e., @cs.toronto.edu or
@utoronto.ca). Emails sent from addresses other than your UofT
official email address will not be answered.
Always include your full name, and UTORId in your communication by
email.
Always prepend "[CSC309]" to your subject title, when emailing your
questions to the instructor or TAs
Allow up to 72 business hours for a reply
TA office hours
Schedule a meeting with the TAs using the TA office hour meeting request
form.
You have time to sign up until 2 hours before each office hour. You will get
a confirmation email of the appointment. If you do not receive a
confirmation email, please try another date
We will maintain a strict schedule and priority based on the booked time
Please respect the time and effort of the teaching team & your peers
Keep your meeting within a 10-15 minutes duration and please show up
on time
Instructor office hours
If your problem cannot be solved by the TAs, send an email to the
instructor ([email protected]), with "[CSC309]" at the
front of your subject title, to request an office hour meeting (over
Zoom or in-person)
Accessibility, accommodations & special considerations

This course is guided by the University of Toronto's goal to create a

community that is inclusive of all persons and treats all members of
the community in an equitable manner. In creating such a
community, the University aims to foster a climate of
understanding and mutual respect for the dignity and worth of all
persons. Please find details here:
https://www.utoronto.ca/accessibility

Students with diverse learning styles and needs are welcome in this
course.
Accessibility, accommodations & special considerations

If you have a disability or a health consideration that may require

accommodations, please register with Accessibility Services at the
beginning of the academic year by visiting
http://www.studentlife.utoronto.ca/as/new-registration.
Accessibility Services will assess your situation, develop an
accommodation plan with you, and support you in requesting
accommodation for your course work.
Only after you have registered will Accessibility Services verify your
situation with your instructors, and the instructors will then be
advised about your accommodation needs and the appropriate
accommodations.
An accessibility letter can then be provided to the teaching team
before 1-2 business days a deadline for accommodations & special
considerations to be arranged.
Accessibility, accommodations & special considerations

Students who have missed class time and/or are experiencing illness or other
emergencies that prevent them from being able to complete homework on time,
or write a test, can request special consideration. You will be required to affirm
that you are abiding by the Code of Behaviour on Academic Matters, in particular,
to be aware that it is an academic offence
to engage in any form of cheating, academic dishonesty or misconduct, fraud or
misrepresentation not herein otherwise described, in order to obtain academic
credit or other academic advantage of any kind

Note: making a request does not guarantee that you will always be granted special
consideration.
a.k.a., the Web

The World Wide Web

https://lydiavportfolio.weebly.com/infographic-timeline.html
The Internet
The Internet is an interconnected network of computers which can
communicate with each other through standardized protocols
TCP/IP (Transmission Control Protocol/Internet Protocol): suite of
protocols that provide reliable end-to-end communication between
two applications on different computers

Why was the invention of the WWW important given the

Internet already existed?
 Internet Protocol (IP)
Identifies computers on the network by assigning a unique IP address
Knows how to route data from to the destination computer
Data sent in packets
Can be unreliable because packets can be lost, reordered, duplicated,
or corrupted
Two versions:
● IPv4 uses 32-bit address (which supports a limited number of
devices; ~4 billion)
● IPv6 uses 128-bit address
Transmission Control Protocol (TCP)
Allows multiple virtual connections to share a single physical IP
address
Each connection is identified by a unique port number
Addresses unreliable nature of data transmission over network
How do computers talk to each other?
Listens on port 5000

Connects to
IP: 192.168.7.48:5000 IP:
192.168.23.1 192.168.7.48

Two-way connection established

Computer A Computer B
“Client” Port 12345 Port 5000 “Server”
ip, port, … ip, port, …

ip, port, … ip, port, …

ip, port, … ip, port, …

The World Wide Web
A collection of information and services that can be accessed on local
devices through the Internet in user-friendly ways

Conceived by Tim Berners-Lee as a "universal linked information

system"

Contents from the Web is transferred across the Internet via HTTP
(Hypertext Transfer Protocol)
Hypertext Transfer Protocol (HTTP)
A protocol for distributing and accessing hypertext documents
Built on top of TCP/IP
Human readable protocol
HTTP servers typically listen on port 80

HTTPS (HTTP Secure)

● Messages are encrypted for security purposes (protects against
eavesdropping and tampering)
● Used by 81.3% of all public websites
End user perspective

The Web in action

1. The user enters a Web address
in the browser
2. The browser fetches and
displays the according Web
page
End user perspective – with a little bit more detail

The Web in action

1. The user enters a Web address in a browser
2. The browser sends a request to the server
3. The server processes the request and responds with the Web page

https://medium.com/@lokeshchinni123
But actually…

The Web in action

1. The user enters a Web address in a browser
2. The browser sends a request to the server
3. The server processes the request and responds with the Web page

Oftentimes, the browser sends

lots of requests to one or more
servers and receives multiple
responses
Lots of HTML/CSS/JS get fetched

https://medium.com/@lokeshchinni123
HTTP messages
Components of an HTTP Request
● Method: describes what you want to do
● Path: specifies which resource you want to access
● Header: describes various settings and client environment
● Body: additional data to be sent to server

Components of an HTTP Response

● Response code: describes the outcome of the request
● Header: describes various settings and server environment
● Body: data from the server (usually the hypertext of the web page)
HTTP messages

https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages
HTTP methods
POST: Create a new resource
GET: Read information about a resource (most used)
PUT: Replace a resource
PATCH: Modify a resource
DELETE: Delete a resource

This will become more important later, when we learn about

REST API
Response codes
Success: 200 –299
● 200 OK, 201 Created
Redirection: 300 –399
● Instructs user to check out a different web address
● 301 Moved Permanently
Client error: 400 – 499
● 404 Not Found, 400 Bad Request, 403 Permission Denied
Server error: 500 – 599
● 500 Internal Server Error, 502 Bad Gateway
Stateless protocol
HTTP is a stateless protocol
HTTP servers do not remember previous interaction with their clients
A stateless server typically gives the client a cookie to be passed back
later so that the client can remind the server about the user's
interactions and past requests
 Example: eCommerce
1. Login with user name and password
2. Select items to purchase
3. Confirm order

A stateless eCommerce site would require the client to pass cookies

with the user name, password, and items previously added to the
cart to the server at step 3
Statefulness
A stateful service reacts differently to the same input
Server tracks the states of all open connections
A stateful server remembers user's interactions and past requests on
the server-side
Stateful vs stateless
Stateful service
● Requires server to keep information about a session (interaction
with client)
● More complicated to design and implement
● Server crash or power outage would result in loss of session states
● Difficult to scale (work smoothly with increased number of users)
Stateless service
● Does not require server to remember session states
● Simple to design and implement
● Server outage does not result in loss of session states
● Easier to scale and optimize (e.g., by caching responses)
Web browser
A client-side application that takes a Web address and retrieves a web
page
● Using the HTTP/HTTPS protocol over TCP/IP
● Web pages are typically written in Hypertext Markup Language
(HTML)
The web browser then renders the hypertext to display formatted
content
Popular modern browsers
Uniform resource locators (URL)
A string address referencing a Web resource and how to retrieve it
Format of a hyperlink for navigating through hypertext documents
Example: https://www.utoronto.ca/current-students

protocol to use domain name resource name

URL encoding
● Some characters are not safe in documents where URLs may be used
● Escaped using percent encoding: e.g., space is converted to %20
Domains
IP addresses are hard to remember
Websites might move to new locations
Some Websites may be hosted on multiple physical machines
● Content Delivery Network (CDN)

Domain name
● Maps an easy-to-remember name to IP address(es)
● E.g., www.google.com → 142.251.41.78
Domain name system (DNS)
A collection of mappings from domain names to their IP addresses

DNS servers translates domain names into IP addresses

DNS servers can be manually assigned by system administrators or
automatically configured when computer connects to Internet
Modern web architecture
Contains many components, each used for different purposes

https://medium.com/storyblocks-engineering/web-architecture-101-a3224e126947
Summary
Web server listens on a specific port
● Client(s) connect to IP address and port number
DNS translates domain names to IP addresses
● Users can refer to Websites by domain name rather than IP address
HTTP protocol
● Stateless
● Client sends a request and server replies with a response
HTTP response body is usually in HTML format
● Browsers understand this format and renders accordingly
We will learn more about HTML on Wednesday!
Much of this lecture was taken from content previously created by Jack Sun & Kianoosh Abbasi

Reproduction and/or sharing of course materials is prohibited. Course materials include lecture slides, course notes,
assignments, data and documents provided by the instructors. Course materials created by the instructors of this course
are their intellectual properties. They may not be shared, posted, rehosted, sold, or otherwise distributed and/or
modified without expressed permission from the authors. All such reproduction or dissemination is an infringement of
copyright and is prohibited. All rights are reserved by the instructors.

Thank you & questions?