Interactive Web Development

Lecture 1: Introduction to Web Environments

This Lecture
• The Internet and the Web
– Protocols
– IP Addresses
– Domain Names

• Architecture of the Web

– Client-Server Models
– Forms
– Web Development Environments

2
The Internet and the Web
The Web and the Internet
• To begin with, the Web is not the Internet (or vice-versa)

– The Internet is a set of interconnected networks which use Transmission Control

Protocol / Internet Protocol (TCP/IP) to exchange data in a standardised way

– The Web is a system of hyperlinked documents which resides on the Internet, mainly
using Hyper Text Transfer Protocol (HTTP) to transfer these documents

• Numerous other systems and protocols exist on the Internet, typically associated
with a specific “port number”
– Requests to/from certain port numbers can inform servers of the protocol to expect

4
Protocols, lots of them!

Protocol Port #
HTTP 80
FTP 21
SMTP 25
POP3 110
TELNET 23
5
Some common protocols
• HTTP (Hyper Text Transfer Protocol): Transfers documents over the Web

• FTP (File Transfer Protocol): Used for file transfer, not as widely used as it once
was, but important in web development (e.g. to upload files to web server)

• SMTP (Simple Mail Transfer Protocol): Used to transmit emails

• POP3 (Post Office Protocol) & IMAP (Internet Message Access Protocol):
Used by local email applications to retrieve/access emails from a remote server

• TELNET: Allows for command line access to a remote computer/device, usually

for administrative purposes

– Secure versions of these protocols that encrypt the data they transmit exist,
often named with an “S” at the start or the end, e.g. “SFTP” and “HTTPS”
6
Internet Protocol (IP) addresses
• Devices connected to the Internet have an IP address
– IP version 4 (IPv4) addresses are in “dotted quad” format, consisting of four numbers,
e.g.139.230.82.149
– Each number can range in value from 0 to 255, giving a theoretical max of
4,294,967,296 devices (256x256x256x256)
– ECU owns the 139.230 range, allowing a theoretical 65,536 (256x256) IP addresses
• In reality the figure can be much higher as we can use private (intranet only) addresses
within this structure – one external IP address servicing multiple internal addresses

• IPv6 is gradually being rolled out to replace IPv4, and instead of a 32-bit address
range, it has a 128-bit address range – this means many more IP addresses
– 79,228,162,514,264,337,593,543,950,336 times more addresses than IPv4
– Example IPv6 address: 2001:db8:0:1234:0:567:1:1

7
IPv6 adoption
• Google keeps statistics on IPv6 adoption on the Internet…

8
Domain Names
• While IP addresses allow computers to communicate, humans prefer more easily
remembered addresses, i.e. “domain names”, such as “www.ecu.edu.au”

• A Name Server (or Domain Name System Server – DNS Server) maps IP
addresses to domain names
– For example – 142.250.66.174 maps to www.google.com

• Domain names can be mapped to entire IP ranges, or mapped to individual

addresses or ports

• Purchasing a domain name is crucial to having a presence on the Web, and the
range of domain and regional extensions can be intimidating (and confusing)

9
Structure of a Domain Name
• Domain names have a hierarchical structure that goes from right to left

• Top-level domains (TLDs) include .com, .org, .net, .edu, and country code based
ones (ccTLDs) such as .au, .uk and .ca
– More TLDs were added in 2000, e.g. .biz, .name and .info
• Many more have been added since – e.g. .dev, .to, .app, .game and .xyz
• In “.edu.au”, the “.au” is the TLD and “.edu” is a subdomain of it

• Second-level domains are purchased by companies and individuals as needed –

e.g. google.com, ecu.edu.au
– When using a ccTLD, this is technically a third-level domain…
– Some TLDs have criteria that must be met in order to register under that domain

• Subdomains can then be created as needed by owner of a domain. e.g.

askus.ecu.edu.au, portal.ecu.edu.au, courses.ecu.edu.au…
10
Structure of a Domain Name
• The leftmost portion of a URL is typically a host name, specifying the service or
protocol that it provides, e.g.
– www.example.com, ftp.example.com, mail.example.com

• Many hosts can be associated with the same domain

• A name that specifies everything from the top-level domain name to a host name
is known as a “fully qualified domain name” (FQDN)

• Identify the components of the following FQDN:

Host name Second-level domain
www.stuff.example.com
Subdomain TLD
11
Structure of a Domain Name
• This example contains a “.org.au” domain.
– The “.org” is a subdomain of the “.au” ccTLD

• Every section of a domain name is a subdomain of the section which appears to

the right of it

• Identify the components of the following FQDN:

Third-level domain TLD (ccTLD)

www.example.org.au
Host name Second-level domain

12
DNS and You
• As a web developer, your interaction with the domain name system involves…

1. Purchasing/Registering desired domain name(s)

• The cost varies depending upon the TLD (from tens to thousands of dollars per year)
• Common TLDs are often less than $20 per year, with most under $100 per year

2. Create subdomains as desired

3. Point your domain’s “nameservers” to the web server hosting your website
• This is flexible, allowing for things such as pointing a specific subdomain to a specific
location on the web server…
• New domain names / changes to nameservers can take a day to propagate throughout
the DNS and become active on the internet

13
Structure of a Domain Name
• What about the parts of a URL that appear after the domain name?

• In the case of a website, the domain name points to the web server which hosts
the website’s files, e.g. www.examplecafe.com/menu.html
– Just like files on your computer, the files on a web server can be stored in directories,
resulting in URLs such as www.examplephotos.com/albums/2019/image1.jpg

• Data can also be passed via a URL, allowing the code of the page to use it, e.g.
www.examplesearch.com/search.php?query=cats&type=image
– The “?” indicates the end of the file path / the start of the data
– Each piece of data is a “name-value pair”, i.e. “name=value” – essentially a variable
– There is an “&” between each piece of data
– You will use this quite a lot in the unit – it’s often referred to as “URL data”

14
Architecture of the Web
Basic “Client-Server” model
• The basic “client-server” model is applicable when dealing with static websites,
i.e. No code is being run to dynamically produce the page

• The elements involved are:

– Client: The user’s side, typically a web browser
– Server: The web server which stores/hosts the website files

1. URL requested
Client Server
(Browser) 2. File sent (Web Server, e.g.
Apache or IIS...)
3. File displayed by Client

(supporting files may be required,

repeating steps 1 & 2)

16
Basic “Client-Server” model

bobscoolwebsite.com
“index.html” requested
(web server)

“stylesheet.css” requested

“background.jpg” requested

“logo.png” requested

17
Basic “Client-Server” model (missing image file)

bobscoolwebsite.com

(web server)

“logo.png” requested
Error 404: File Not Found

18
Three Tier “Client-Server” model
• More common is the three tier “client-server” model. The elements involved are:
– Client: The user’s side, typically a web browser
– Server/Logic: The web server and associated scripting languages capable of
programmatic logic, database interaction and producing output
– Data: The database server, which stores data

• In this model, when a client requests a file requested from the server, the code
inside that file is run (which may involve interaction with the database server)
and the result of running the code is then sent to the client

• The diagram on the following slide illustrates the three tier “client-server” model!

19
Three Tier “Client-Server” model

1. URL request Server / Logic

(Web Server, e.g.
Client
6. Response sent Apache or IIS...) 2. File is
(Browser)
processed
7. Response displayed Processing by scripting
(Scripting language, e.g. language
PHP, or ASP.NET...)
0. DN resolved
to IP address
3. Data request 5. Data returned

DNS
Data
(Database Server, e.g.
MySQL or Oracle...)

4. Data request processed

20
Three Tier “Client-Server” model

exampleforum.com
“index.php” requested
+
Result of running “index.php” sent

SELECT Query
thread_id Results
…

MixAllofHTML
HTML and PHP
/
PHP code is run Database
on the web server

21
The Client
• For the purposes of this unit, “client-side” essentially means the user’s web
browser on their computer
– It can also include other devices and software, such as tablets, phones, embedded
devices, etc. – anything capable of sending a request over the internet!

• A “client-side” technology means that the functionality runs locally – i.e. the
processing is done on the user’s device
– HTML, CSS and JavaScript are all client-side

• Often, the term client-side is a logical rather than a physical concept – a single
PC can contain a client (e.g. a browser), a web server (e.g. Apache) and a
database server (e.g. MySQL)
– This is how we work in this unit, and is quite common for development environments
as it grants full control and accessibility, with minimal security complications

22
The Server
• Web servers receive requests from clients, process them, and send the result
(typically a HTML page) to the client
– Web servers can be integrated with programming/scripting languages,
allowing them to process files containing code in these languages
– The code in these files often interacts with databases, sending requests for data to a
database server and using the result in some way, or inserting data into them
• These files are “dynamic”, as the output may differ based on the code, input from users via
forms, URL data included with the request, or the results of database requests...

• Files hosted by a web server reside in a “root directory” (“htdocs” in Apache), and
can be requested via URLs – If www.example.com/ points to the root directory…
– www.example.com/file.html is a file named “file.html” in the root directory
– www.example.com/other/something.html is a file named “something.html”,
which is located in a directory named “other”, which is located in the root directory

23
The Server
• The programming/scripting languages are “server-side”
– The client’s browser cannot run the code inside these files
– The code is run on the server when the client requests the file

File on server containing PHP code

When requested by client, the

code is run, producing HTML
which is sent to client

24
The Database
• Databases on a database management server (i.e. DBMS or “database server”)
contain information in an efficient and structured manner

• Many web applications are dedicated, essentially, to providing a front end to

interact with this data – e.g. a Content Management System

• Many DBMSs available, supporting Structured Query Language (SQL)

– Oracle, MySQL, MariaDB, PostgreSQL, Microsoft SQL Server...

• Each database environment has a set of features which add value and make it
more suitable for certain tasks
– Select your DBMS carefully, and do not depend heavily on proprietary features,
as this can lessen portability

25
Forms
• Forms in websites are the primary means for clients to send data to the server
– Login forms and search boxes are commonly encountered forms
– As are the things like registration forms, forum posts/comments, status updates...

• Consists of fields – text entry, checkboxes, radio buttons, drop-down lists…

– Form content can be validated on client-side and/or on the server-side

• Form content is processed by the scripting language on the server, and typically
involves database interaction – e.g. searching, inserting or updating data

• Form processing is a core component in web development, one that ties together
the client, server and database tiers
– We will be doing a lot of it in this unit!

26
Development Environments
• Most web servers have a Common Gateway Interface (CGI) facility, allowing any
compatible scripting language to be “plugged-in” to that server
– Most scripting languages can speak to a database server directly, or via the web server
or operating system (e.g. ODBC)

• A large number of pre-configured packages now exist, which will install/set up a

three tier web development environment. We use one, XAMPP, in this unit
– XAMPP includes Apache, MySQL, PHP and more

– These packages take the hassle out of setting up this sort of development environment
• Good thing: anyone can do it!
• Bad thing: anyone can do it!

27
Conclusion
• This has been just a glimpse of what is involved in the web development process,
focused upon the architecture and components involved in a web environment

• Over the course of this semester we will immerse ourselves in the tools and
technologies required to develop significant database-driven web applications

• The key to success in both this unit and with these technologies is perseverance,
research (for problem solving) and lots of hard work and practise

• It is very important that you can access your development environment

and familiarise yourself with it before the start of next week
– You should know how to start and stop Apache and MySQL, where to place your files,
how to create and save a “.php” file, how to request a file from your browser, etc.

28
Readings and Research
• PHP and MySQL Web Development
– Introduction Chapter
– Chapter 1 - PHP Crash Course (optional – further explored in Module 4)

29