Introduction to Web

Programming
Web programming refers to the creation and management of dynamic,
dynamic, interactive websites and web applications. It involves writing code
code which allows the end user to interact with the content and perform
perform specific tasks. Web programming languages like HTML, CSS, and
and JavaScript are used to build and design web pages.

sa

Edited by:
Ts. Dr. Sarina Sulaiman
sarina@utm.my
Contents
o Introduction
o Internet
o World Wide Web
o Web Architecture
o Common Gateway Interface (CGI)
o CGI Programming
o Version Control
o Collaborative Projects
o Summary
Introduction

sa
Importance of Web Programming

1 Global Reach 2 Enhanced User Experience

Web programming allows businesses and Good web programming leads to intuitive,
and individuals to reach a global audience, intuitive, user-friendly interfaces, improving
audience, expanding their potential customer improving engagement and satisfaction.
customer base.

3 Competitive Advantage 4 Innovation and Creativity

Well-designed and functional websites give Web programming empowers the creation of
give businesses a competitive edge in the creation of cutting-edge web applications and
the digital landscape. applications and innovative digital
experiences.
Basic Concepts of Web Programming

o Client-server architecture: Websites are based on client-server architecture,

where web browsers act as clients and connect to web servers to retrieve and
display web pages.
o HTTP and HTTPS: Hypertext Transfer Protocol (HTTP) is used for transmitting
data, while HTTPS adds a layer of security through SSL/TLS encryption.
o Web protocols: Other important web protocols include FTP (File Transfer
Protocol), SMTP (Simple Mail Transfer Protocol), and DNS (Domain Name
System).
HTML: Structure of Web Pages

o HTML, or Hypertext Markup Language, is the standard

standard language for creating web pages.
o It provides the structure and content of a webpage,
using tags to define the elements.

o Elements include headings, paragraphs, images, links,

links, and more, organized within a hierarchical outline.
outline.
CSS: Styling Web Pages
o CSS (Cascading Style Sheets) is a crucial component of
web development, providing the design and layout for
web pages. It allows for the customization of fonts,
colors, spacing, and more, enhancing the visual appeal
and user experience.

o With CSS, web developers can create stunning,

responsive designs that adapt to various screen sizes,
ensuring a seamless experience for users.
JavaScript: Adding Interactivity
to Web Pages

o JavaScript is a powerful programming language used to

enhance the functionality of web pages.

o It allows for interactive features like dynamic content,

form validation, and user interface enhancements.

o With JavaScript, developers can create engaging and

responsive web experiences, driving user engagement
and satisfaction.
Front-end Back-end
Development Development
o Focuses on the part o Manages the
of the website that behind-the-scenes
users interact with functionality of a
directly, involving website, handling
server-side
Front-end vs. Back- HTML, CSS, and
JavaScript. operations and
end Web database
management.
Development o Requires a strong
sense of design and
user experience to o Requires
create visually knowledge of
appealing and programming
responsive languages like
interfaces. Python, Ruby, Java,
or PHP for building
robust and secure
systems.
Popular Web Programming Languages and
Frameworks

JavaScript HTML5 CSS3 React.js

JavaScript is a versatile HTML5 is the latest CSS3 is the latest React.js is a popular
programming language version of the standard evolution of Cascading JavaScript library for
used for adding standard markup Cascading Style Sheets, building user interfaces,
interactivity to web language for creating Sheets, used for styling interfaces, often used in
pages. creating web pages and styling web pages and used in single-page
and web applications. and user interfaces. applications.
applications.
Tools and Resources for Web Programming

Integrated Development Environments (IDEs) Tools for efficient coding, debugging, and project
project management.

Version Control Systems (VCS) Git, SVN, or Mercurial for tracking changes in code
in code and collaboration.

Package Managers NPM, Yarn, or Composer for managing

dependencies and libraries.

Browser Developer Tools Chrome DevTools, Firefox Developer Edition for

for debugging and optimizing websites.

Online Resources MDN Web Docs, Stack Overflow, and W3Schools

for learning and reference.
Internet

sa
Internet

All connections use TCP/IP

A world-wide network of
(Transport Control
computer networks.
Protocol/Internet Protocol)

Internet provides several

TCP/IP hides the differences protocols: Telnet(DOS Prompt),
among devices connected to the FTP, mailto, HTTP, etc. All with
Internet different interfaces. A solution is
the World Wide Web (WWW)
World Wide Web
(WWW)
World Wide Web
Allows users from anywhere on the internet to retrieve
documents from any other computers

The main protocol is the HTTP – HyperText Transfer Protocol

HTTP provides a standard form of communication between web

browsers and web servers.

Internet is a collection of computers.

Web or Internet? Web is a collection of software and protocols
• a set of HTML pages accessible using the HTTP protocol
The World Wide Web
(History)
o 1989 – WWW concept by Tim Berners-Lee
• Scientist at CERN (European centre for
High Energy Physics – Geneva)
• Hypertext Markup Language (HTML)

16
The World Wide Web (History)
1994 1995 1998

Hotmail starts web based email JAVA source code was released Google is founded

World Wide Web Consortium

(W3C) was founded Mirabilis (Israel) starts ICQ

1994 1996
The Simplified WWW
• Web browser wants a page from a web server
This is the World
• Pages structured into HTML and referenced via URLs Wide Web

• HTTP used to structure communication between client and

server

• Get bytes (in this case HTTP packets) from users program Protocol Use
from one machine to another behind

• Route groups of bytes (IP PACKET) between networks The internet

(independent of hardware) TCP, UDP and
IP
• Get groups of bytes (FRAME) from A to B on a single Network
(hardware dependant) Existing
network
• Get bits from A to B on a single network (hardware dependant) technologies
World Wide Web (Continue)
o Web browsers
• Programs running on client computers
• Request for documents using URL
• eg. MS Internet Explorer, Mozilla Firefox, Google
Chrome etc.

o Web servers
• Programs that provide documents to browsers
• eg. Apache, IIS(Internet Information Services) by
Microsoft

o URL – Uniform Resource Locator

o A reference of a document on the web.
o eg. http://comp.utm.my/index.html
o http://comp.utm.my/images/logo.jpg
Web Client (Browser)
Web Server
22

URL

Abbreviation of Uniform The first part of the address For example, the two URLs
Resource Locator, the global indicates what protocol to below point to two different
address of documents and use, and the second part files at the domain
other resources on the World specifies the IP address or the pcwebopedia.com. The first
Wide Web. domain name where the specifies an executable file
resource is located. that should be fetched using
the FTP protocol; the second
specifies a Web page that
should be fetched using the
HTTP protocol:
ftp://www.pcwebopedia.com/stuff.exeftp://
www.pcwebopedia.com/stuff.zip
http://www.pcwebopedia.com/index.html
URL (Continue)
<protocol> <host name> <path>

o HTTP--Hypertext Transfer Protocol

• Protocol for accessing World Wide Web
documents
o FTP--File Transfer Protocol
• Protocol for transferring files from one
computer to another
o Gopher
• Protocol for accessing documents via
Gopher menus (archaic; no longer
widely used)
o Telnet
• Protocol that allows users to logon to a
remote computer
URL (Continue)
<protocol> <host name> <path>

<host>.<organization>.<org type>

E.g.:
www.utm.my
www.google.com
www.acm.org
www.jpa.gov.my
Organization
Types
o .org: non-profit
organizations
o .com: commercial
hosts
o .net: network hosts
o .edu: educational
institutions
o .int : international
treaty organizations
o .gov: government
agencies and
organizations
o .mil: U. S. military
o .my: Malaysia
o .jp: Japan
URL Examples
Full URL
o http://www.utm.my/
o http://elearning.utm.my/
o http://www.maxis.net.my/
o http://www.lhdn.gov.my/
Web Surfing (Logical View)
Web Architecture

sa
Web Architecture

How web pages are delivered

to us?

2 approaches:
Static content Dynamic content
Static vs. Dynamic
o HTML documents are usually static
o The contents can only be changed
manually
o There are needs for dynamic documents
to:
• Search results
• Database access
• Context sensitive reply
o Static
• Page appears exactly as it was
encoded, nothing changes
o Dynamic
• Page is compiled, or able to be
changed
Dynamic Web Pages

Applications executed by the Generating dynamic Web pages

server at run-time to process requires programming
client input or generate document
in response to client request
Web Architecture: Static Content

Client TCP/IP /HTTP Server

HTML doc
1 Web Server
Browser ………….
………….
………….
HTML doc ………….
………….
………….
………….
………….

1. Client browser send a request for HTML document to web server

Web Architecture: Static Content

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
………….
HTML doc ………….
………….
………….
………….
………….

2. Web server try to find and read the document at server directory
Web Architecture: Static Content

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
3 ………….
HTML doc ………….
………….
………….
………….
………….

3. Web server send the HTML document to the client browser

Web Architecture: Static Content

How the Web works for static contents (Basic architecture)?

Client Server

HTML doc
1 Web Server 2
Browser ………….
………….
3 ………….
HTML doc
………….
………….
………….
………….
………….
Web Architecture: Dynamic Content

o Dynamic contents:
• Common Gateway Interface (CGI)
• Server pages
Common Gateway
Interface (CGI)

sa
Common Gateway
Interface (CGI)
o A CGI program is a program that follows the
CGI specifications.

o The main role of CGI programs is producing

documents in HTML format – i.e. The only
language that the web browsers can
understand.

o E.g. Getting data from a database,

• A CGI program submits SQL queries
to the database server.
• After getting the result, the program
formats it into HTML, then give it to
the web server.
• The web servers then passes the
HTML document to web browsers.
Common
Gateway
Interface
(CGI)

How it works

???
Common Gateway Interface (CGI)

Client TCP/IP /HTTP Server

HTML doc
1 Web Server
Browser ………….
………….
………….
HTML doc
………….
………….
………….
………….
………….

1. Client browser send a request for HTML document to web server

Common Gateway Interface (CGI)

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
………….
HTML doc
………….
………….
………….
………….
………….

2. Web server try to find and read the document at server directory
Common Gateway Interface (CGI)

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
3 ………….
HTML doc
………….
………….
………….
………….
………….

3. Web server send the HTML document to the client browser

Common Gateway Interface (CGI)

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
3 ………….
HTML doc
………….
…………. 4
………….
CGI Script / Program
………….
………….

Database Server
4. User may click a submit button in the HTML
form that make a call to web server to run CGI
program at server directory
Common Gateway Interface (CGI)

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
3 ………….
HTML doc
………….
…………. 4
5
………….
CGI Script / Program
………….
………….

Database Server
5. If CGI program is exist, web server will try to
invoke the OS to run it
Common Gateway Interface (CGI)

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
3 ………….
HTML doc
4 ………….
………….
5
………….
CGI Script / Program
………….
…………. 6

Database Server
6. CGI program may make a connection to
database application to retrieve data
Common Gateway Interface (CGI)

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
3 ………….
HTML doc
4 ………….
………….
5 7
………….
CGI Script / Program
………….
…………. 6

Database Server
7. CGI program then pass any data requested
by user to the Web server
Common Gateway Interface (CGI)

Client TCP/IP /HTTP Server

HTML doc
1 Web Server 2
Browser ………….
………….
3 ………….
HTML doc
4 ………….
………….
8 5 7
………….
CGI Script / Program
………….
…………. 6

Database Server
8. Web server send the data to client browser
Common
Gateway Interface
(CGI)

How the Web works for

dynamic contents

???
CGI Programming

sa
CGI Programming

o CGI programs can be written using any

programming language

o The languages can be categorized into two

types: Server-Pages and Conventional CGI

o Server-pages languages:
• The CGI codes are embedded into HTML
• eg. PHP, JSP and ASP

o Conventional CGI:
• using common programming languages
• eg. C, Pascal, Perl, Python, etc.
CGI Programming (Continue)

o HTML and CGI

• Accessing CGI program through a form
<form method="POST" name="form1" action=“login.php">
……..
……..
</form>

• Accessing CGI program through a URL

E.g. http://comp.fsksm.utm.my/view.php? id=1235&order=ASC

HTML vs. Javascript vs. CGI

o HTML
• is the main language for delivering document over the web.
• is the only language that web browsers can understand.

o Javascript
• Documents that are created by HTML are static.
• HTML does not support logical features.
• Javascript is used to make the document dynamic.
• E.g. before we can perform any delete operation, the browser should ask the user first for confirmation. This
cannot be done by the HTML. Javascript can.

o CGI
• Javascript is executed at client computers – ie. in web browsers. It is called client-side scripting language.
• Databases or other resources are located at the server computer. We need another programs to access them –
i.e. CGI programs.
• CGI languages such as PHP, JSP, Perl, etc are called server-side scripting languages, because they are executed at
the server.
Our
Objectives…

HTML, CSS,
PHP
& Javascript

SQL
HTMLClients
vs. Javascript vs. CGI
vs. Servers

Clients (Browser) Servers

• Internet Explorer • Apache
• Firefox • IIS (Microsoft)
• Mozilla • Netscape
• Netscape • zeus
• Opera • AOLserver
• Amaya • AV
• AOL • JavaWebServer
• MSN • Oracle
56

Scripts: Server-Side vs. Client-Side

Server-side Client-side
The first type possible on the Web Generally easier to implement
action occurs at the server may be prepared and
implemented offline action occurs
on the client side (Browser)
57

Client-side Scripting

Client side scripts are When Web browser Provide response to

embedded inside HTML encounters a script, it calls a questions and queries
document. scripting interpreter, which without interventions from
They are interpreted by parses and deciphers the the server.
browser. scripting code.
- Validate user data
- Calculate expressions
- Link to other applications
58

Client-side Scripting

Client side advantages Client side disadvantages

Faster response time Longer load time

Better animation Browser compatibility

Simpler server programs Complexity in web page design

59

Client-side Scripting: JavaScript

A scripting language for Web pages, developed by Netscape in
1995

JavaScript code is embedded directly in HTML (interpreted by

browser)

Good for adding dynamic features to Web page, controlling forms

and GUI

Advantage Disadvantage
• Easy to learn and use • Browser compatibility issues
• Wide browser support • Not object oriented
• Protection of local resources • Unable to gain access to local
resources
60

Client-side Scripting: Java Applet

Can define small, Provides full

Can be server-side or special-purpose expressive power of
client-side programs in Java Java (but more
called applets overhead)

Interpreted by the Good for more

Applets are included
Java Virtual Machine complex tasks or data
in Web pages using
embedded in the heavy tasks, such as
special HTML tags
browser graphics
61

Client-side Scripting: Java Applet

Advantage Disadvantage
High functionality
• JVM(Java Virtual Machine) compatibility
issues
• Difficulty to install and configure for local
Object oriented and full graphics functionality access
• Loading time and performance may be poor
Protection of local resources for large application.

Wide Browser support

With Java2, be able to gain access to local

resources with signed applets
62

Server-side Scripting

Advantages Disadvantages
Allows creation of dynamic web pages • More complicated then HTML (with
debugging)
• Slower to load on the server
Modifies HTML code on the server
before sent to client • Harder to learn
• Web server must be enabled
Uses databases such as Access, MySQL
and Oracle

Responds to user input

63

Examples of Server-side Scripts

Common Gateway Interface (CGI)

o A standard for interfacing external applications with information
servers, such as HTTP or Web servers
o CGI program is any program designed to accept and return data
that conforms to the CGI specification
o CGI program can be written in any language that allows it to be
executed on the system, such as: C/C++, Fortran, PERL, TCL, Any
Unix shell, Visual Basic, AppleScript etc.

PHP (Hypertext Preprocessor)

o Widely-used Open Source general-purpose scripting language
that is especially suited for web development and can be
embedded into HTML.
64

Examples of Server-side Scripts

Active Server Pages (Microsoft)

o ASP is a Microsoft Technology and run on IIS (Internet

Information Server) & PWS (Personal Web Server).

Java Server Pages (Sun)

o Sun's solution for developing dynamic web sites.

o JSP enable the developers to directly insert java code into jsp file,
this makes the development process very simple and its
maintenance also becomes very easy.
Version Control

sa
What is Version
Control?
Version control is a system that records changes to a file or set of files over
time so that you can recall specific versions later. It allows you to track
modifications and work collaboratively with others on a project.

sa
Why Use Version Control
Systems?
• Ensures a centralized repository for all project files, allowing easy
collaboration and tracking changes.
• Facilitates the ability to revert to previous versions, reducing the risk of
permanent data loss.
• Provides a systematic approach to manage different versions of files,
enhancing team productivity.
Introduction to Git
Git is a distributed version control system, enabling developers to track
changes in code files, collaborate with others, and maintain project history.

It is known for its speed, data integrity, and support for non-linear workflows,
making it a crucial tool for modern software development.
Key Features of Git

1 Branching and Merging 2 Snapshot-based Tracking

Git enables easy branching and merging Git uses a snapshot-based approach to
of code, allowing for parallel version control, capturing changes as a
development and efficient team series of snapshots, making it fast and
collaboration. efficient.

3 Distributed Architecture 4 Staging Area

Git's distributed architecture allows for Git's staging area provides a powerful
offline work, multiple remote mechanism for preparing and reviewing
repositories, and seamless collaboration changes before committing them to the
across teams. repository.
How to Use Git for Version Control
1 Initialize a Git repository
Use the command "git init" in the desired project folder to start tracking changes.

2 Add and commit changes

Use "git add" to stage changes and "git commit" to save them to the repository.

3 Push and pull from remote repositories

Use "git push" to send committed changes to a remote repository and "git pull" to
retrieve changes from a remote repository.
Introduction to GitHub
GitHub is a web-based platform for version control using Git. It allows
developers to collaborate, host, and review code, making it an essential tool
for open-source projects and development teams.

GitHub provides features like issue tracking, project management, and

integration with various development tools, making it a versatile and
comprehensive platform for software development.
Key Features of GitHub

Collaboration Workflow Integration Community

GitHub allows teams
Management Seamless integration Active community
to collaborate Streamlines the with various third- support and open-
efficiently on process of managing party tools and source collaboration
projects, managing tasks, issues, and services. opportunities.
contributions and code reviews.
updates.
Collaborating with Git and
GitHub
Collaborating with Git and GitHub allows
multiple developers to work on the same
project simultaneously, tracking changes and
merging their work seamlessly.

• Teams can create branches to work on

specific features or fixes without
affecting the main codebase.
• Version history and file comparison
tools help resolve conflicts and
maintain consistency.
Best Practices for Using Version
Control Systems
Commit Frequently Use Descriptive Commit
Make small, incremental commits to
Messages
capture changes accurately. Write clear and concise messages to
explain the purpose of each commit.

Branch Strategically Review and Test Changes

Plan branches for features, hotfixes, and Before pushing changes, review and test
releases to maintain a clean history. thoroughly to avoid conflicts.
Collaborative Projects

sa
Introduction to
Collaborative Projects
A collaborative project involves a group of people working together toward a
toward a common goal, sharing responsibilities, and leveraging each other's
other's strengths to achieve success.

s
Benefits of Collaboration

1 Enhanced Creativity 2 Increased Efficiency

Collaboration fosters creativity through the Teams working together can achieve tasks
the exchange of diverse ideas and more quickly and effectively than individuals
perspectives. working alone.

3 Improved Problem-Solving 4 Enhanced Learning

Collective brainstorming and knowledge Collaboration provides an opportunity for
sharing lead to innovative solutions for continuous learning and skill development
challenges. from peers.
Overview of Collaboration Tools

Slack Trello
A real-time communication and messaging platform An intuitive project management tool for task tracking
for seamless team collaboration. and workflow management.
Slack: Communication and Messaging
Platform
Real-time Messaging File Sharing Integration Capabilities

Enable instant communication Easily share files, documents, Seamless integration with other
that keeps teams in sync and and media directly on the tools and services for improved
productive. platform. workflow.
Trello: Project Management and Task
Tracking Tool
Visual Task Management
Organize tasks, projects, and deadlines with a clear visual interface.

Team Collaboration
Facilitate team collaboration through shared boards and task assignment.

Customizable Workflows
Tailor boards and cards to fit various project management approaches.
Google Drive: Document Sharing and
Collaboration
Seamless Collaboration File Storage
Simultaneously edit documents and Effortlessly store and access files with
provide feedback in real time with generous cloud storage space.
collaborators.

Integration with Apps

Connect with various apps for enhanced productivity and document creation.
Zoom: Video Conferencing and Remote
Collaboration

1.3M 99 49
Active Users Daily Video Quality Participants Per Call
Over 1.3 million users engage in Enjoy seamless communication Connect with up to 49
remote collaboration on Zoom with high-definition video and participants for productive and
daily. audio. interactive meetings.
YouTube Video
o Static vs Dynamic Website - What's the Difference?
https://www.youtube.com/watch?v=49PQCLiZGN0

o Server-side Web Programming

https://www.youtube.com/watch?v=zmSOnKkm8Y0

o Web Development In 2023 - A Practical Guide

https://www.youtube.com/watch?v=u72H_zZzkcw
Summary

sa
Summary
We will learn in this class how to:
o present our contents for web viewing in its most
simple way through (HTML code)
o systematically manage the formatting and
arrangement of content in HTML through CSS
o manage event, interaction and manipulating web
content (html doc) through Javascript
o manage of user and application data through
server-pages scripting (server code encoded in
html doc)
Summary (Continue)
We will learn in this class how to:

o adapt version control systems like Git and GitHub

are essential tools for efficient and organized
software development.

o enabe collaboration, tracking changes, and

maintaining a history of the project, these systems
streamline the development process and ensure the
integrity of the codebase.

o embrace best practices in version control is crucial

for successful project management and code
maintenance.
Summary (Continue)
We will learn in this class how to:

o do project review; reflect on project achievements,

challenges, and areas for improvement.

o do feedback gathering; collect feedback to identify

successful collaboration strategies and tools.

o do planning future projects; outline strategies and

tools to be used for upcoming projects.
Summary (Continue)
As we conclude our introduction to web programming,
it's important to take the next steps in your learning
journey. Explore advanced topics in HTML, CSS, and
JavaScript to strengthen your skills. Consider joining
online communities and forums to connect with other
web developers and stay updated with the latest trends
and technologies.