CS100 Intro to Web Applications

Module 01: Introduction

By CS100 Instructor Team
Department of Computer Science
Faculty of Science & Technology, Thammasat University
Last update: August 2023
Objectives
● Understanding important concepts and major components regarding web
application development
● Bridge the important concepts and major components of web application
development to courses in CS@TU B.Sc. In Computer Science 2566

2 Lecture 01: Introduction

Outline
● Hands-On Activity #1.1
● What is the Internet?
● The World Wide Web system
● Web Applications
○ Users' viewpoint
○ Developers’ viewpoint -> Web Development

● Hands-On Activity #1.2 Seeing Web Components in Action

○ Web server
○ Web client (Web browser)
○ HTTP Request and HTTP Response messages

3 Lecture 01: Introduction

Hands-On Activity #1.1
● Working in group to choose the web site / web application and discuss the components of
web site / web application

4 Lecture 01: Introduction

What is the Internet?
● simply called "the Net"
● a worldwide system of computer networks
-- a network of networks
● at the end of the Internet, there are end
hosts where network applications resided
● end hosts: servers, pc, smart phones,
tablets wearable devices, sensors, etc.
● network applications: Line, Outlook,
Network games, FB mobile app, etc.
● the Internet makes communications
among network applications at end hosts
Pictures taken from
- https://www.researchgate.net/figure/Network-structures-of-Internet_fig1_319357560/download

happen

5 Lecture 01: Introduction

The World Wide Web System
[also known as the web, WWW, W3]

● Web servers running

○ web server program
and
○ server-side script/program
● Web clients
○ running web browsers
● Web server and Web client
machines are connected via the
Internet
Pictures taken from
- https://www.researchgate.net/figure/Network-structures-of-Internet_fig1_319357560/download
- Freepik - Flaticon
- PNGWING.com

6 Lecture 01: Introduction

The World Wide Web System: Web Pages and HTML

● a web server machine maintains related web pages

related web pages are collectively called a website
○

● a web page can contain information in various formats, including text,

images, audio, video, and script
● web pages are interconnected by means of hyperlinks
● web pages are written in Hypertext Markup Language (HTML )
○ HTML describes the structure of web pages using tags, contents, and

attributes
○ web browser reads an HTML file and displays the corresponding page

7 Lecture 01: Introduction

The World Wide Web System (3)
● Infrastructure: Web server and Web client machines are connected via the
Internet
● Software Architecture: Client-Server Architecture
○ Web server process vs. Web client process
○ a Web client process requests for services from a desired Web server
■ services = desired resources

E.g., web pages, image files, audio clips, video clips, etc.
■ clients specify desired services using URL (Uniform Resource Locator)

○ the Web server process responds to requests from the Web client process

8 Lecture 01: Introduction

The World Wide Web System : URL

Protocol Host name file path and resource name

http:// www.example.com /dir1/somepicture.jpg

A URL (Uniform Resource Locator) is a unique identifier used to locate a

resource on the Internet.
It is also referred to as a web address.
From TechTarget

9 Lecture 01: Introduction

The World Wide Web System: HTTP
● Communication Protocol for Web server and Web Client processes is called
HyperText Transfer Protocol (HTTP )
○ the protocol standardizes communications and data transfer between

web server and web client processes

● HTTP Request message:
○ used by web client processes to request for services from corresponding

web server processes

○ method GET, method POST

● HTTP Response message:

○ used by web server processes to send requested services back to web
client processes

10 Lecture 01: Introduction

The World Wide Web System (6)

GET http://www.example.com/somepicture.jpg

11 Lecture 01: Introduction

Bridge to CS@TU B.Sc. In Computer Science
Curriculum 2566
- Network Core details , Basic network applications (socket programming),
Web and HTTP will be discussed in
- CS331: Net-Centric Computing (Yr#3) --- CIS

- CS234: Computer Network and Cyber-Security (Yr#2) --- ACS

- Process and Process Management (Multi-process and Multi-thread

concepts) will be discussed in
- CS222: Operating Systems (Yr#3) --- CIS

- CS233: Computer Architecture and Operating Systems (Yr#2) --- ACS

12 Lecture 01: Introduction

Web Applications
and How it works?

13
Web Applications

Web applications are websites

with functionality and interactive elements.
Mary MacPherson, Digital Marketing Manager @Essential Designs

● E.g., Gmail, Facebook, YouTube, Twitter, Instagram, TikTok, Messenger, etc.

are all web applications that are dynamic, and built for user engagement.

14 Lecture 01: Introduction

 Web Applications – Users’ Viewpoint
● Users’ Viewpoint
○ compared to typical applications
○ web applications are those that
can be used with no installation
required
○ simply use your favorite web
browser and the Internet
connection
○

15 Lecture 01: Introduction

Web Applications – Developers’ Viewpoint
○ Front end : Client-side code/script
○ Client-side code are requested from web server to be executed at web browser
○ Client-side code instructs web browsers
to create and display pages
with specific structures and contents
(these are what users will experience ! )
○ HTML and CSS
○ JavaScript (JS)

o Back end : Sever-side code/script

○ Server-side code are executed only on web server (no downloading)
○ Sever-side code performs main computations, queries database, and generates
a corresponding html files (as a response to a user’s request)
○ PHP, Java, Node.js, Python
16 Lecture 01: Introduction
Bridge to CS@TU B.Sc. In Computer Science
Curriculum 2566
- Topics relating to both Front-end and Back-end Developments will be discussed in
- CS101: Discrete Structures --- Core Common
- CS102: Problem-Solving Basic and Computer Programming --- Core Common
- CS111: Object-Oriented Programming (Yr#1) --- Core Common
- Topics relating to Front-end Development will be discussed in
- CS180: Introduction to UI/UX (Yr#2) --- Core Common
- CS384: Human Computer Interaction --- Elective
- Topics relating to Back-end Development will be discussed in
- CS251: Database Systems 1 (Yr#2) --- Core Common
- Python will be programming tools in several courses along our curriculum
- JavaScript, PHP: self-study if desired

- Job Positions / Career Opportunities:

- UI/UX designers, Front-end Developers
- Back-end Developers, DB Administrators, Web Administrators
- Full-stack Developers

17 Lecture 01: Introduction

Hands-On Activity #1.2 :
Observe Web Components
● Ask students to list components of the World Wide Web system

● We will see them working together in this activity

18 Lecture 01: Introduction

Hands-On Activity #1.2 : Step 1
● เปิ ดเว็บเบราว์เซอร์
● เลือกเมนู “Developer Tools” โดยการคลิกเลือก
สัญลักษณ์ “3 จุดแนวตัง? ” ทีมC มุ บนขวา และเลือกเมนูยอ่ ยตาม
ภาพ

19 Lecture 01: Introduction

Hands-On Activity #1.2 : Step 2
● ทีห
C น้าต่างของเว็บเบราว์เซอร์ ดังภาพ
● เลือกแท็บ Network และ พิมพ์ URL ด้านล่างทีกC ล่องเว็บแอดเดรส
● สังเกตการเปลียC นแปลงทีเC กิดขึน?

20 Lecture 01: Introduction

Hands-On Activity #1.2 : Step 2
● ทีห
C น้าต่างของเว็บเบราว์เซอร์ ดังภาพ
● เลือกแท็บ Network
● และ พิมพ์ URL ทีกC ล่องเว็บแอดเดรส
● สังเกตการเปลียC นแปลงทีเC กิดขึน?
● หน้าต่างส่วนบนแสดงอะไร?
● หน้าต่างด้านล่างแสดงอะไร?

21 Lecture 01: Introduction

Hands-On Activity #1.2 : Step 3
● ทีห
C น้าต่างของเว็บเบราว์เซอร์ คลิกเลือกรายการดังภาพ

22 Lecture 01: Introduction

Hands-On Activity #1.2 : Step 4 :
Observe HTTP Request
● ทีห
C น้าต่างด้านข้างทีแC สดงขึน? มา
● เลือกแท็บ Headers และสังเกตผลลัพธ์ทเCี กิดขึน? นักศึกษารูจ้ กั ข้อมูลใดบ้าง?

23 Lecture 01: Introduction

Hands-On Activity #1.2 : Step 5 :
Observe HTTP Response
● ทีห
C น้าต่างด้านข้างทีแC สดงขึน? มา
● เลือกแท็บ Response และสังเกตผลลัพธ์ทเCี กิดขึน? นักศึกษารูจ้ กั ข้อมูลใดบ้าง?

24 Lecture 01: Introduction

Hands-On Activity #1.2 : Step 6 :
Try it yourself
● ไปที% URL ด้านล่าง และลองทําตาม Step 1 – 5

https://comscithammasatu.github.io/cs100/Static%20Web/

● ไปที% MS Team -> Assignment ให้นกั ศึกษาตอบคําถาม Module 1 – Web components

25 Lecture 01: Introduction

Summary
● We have learned what the Internet is
● We have learned about the World Wide Web system
● We have discussed about web applications
● We have seen web server and web browser working together via HTTP
Request and HTTP Response messages
● Finally, we have bridged topics related to web and web applications to our
curriculum 2566

26
END

27