Web

Programming
Tutorial class for Computer Science students
 Contents

UNDERSTANDING HOW THE WEB WORKS BUILD WEBSITES, WEB FRAMEWORKS

USING BASIC HTML, CSS AND JAVASCRIPT
 How the Web works
• Computers connected to the web are
called clients and servers.

• Client-side and server-side are two different

parts of a web application that work
together to provide a seamless user
experience.
 Understanding Client side & Server side
CLIENT SIDE SERVER SIDE

• Client-side refers to the part of an application • Server-side refers to the part of an application that
that runs on the user's device, typically in
a web browser. runs on the server,
• This includes HTML, CSS, and JavaScript, • It typically uses a language like PHP, Python, or
Ruby.....
• It can be more responsive and interactive than
server-side code. • This includes code that interacts with
databases, processes user input, and
generates dynamic content.

In a typical web application, the client-side code sends requests to the server-side code
using HTTP (Hypertext Transfer Protocol). The server-side code processes the request, generates a response,
and sends it back to the client-side code, which then displays the updated content to the user.
 TERMINOLOGIES
• Web page: A document which can be displayed in a web browser such as Firefox,
Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari.
These are also often called just "pages."
• Website: is a collection of web pages and related content that is identified by a
common domain name and published on at least one web server.
The first page of a website is called home page.
Static websites: ones that are fixed and display the same content for every user,
usually written exclusively in HTML.
Dynamic websites: one that can display different content and provide user
interaction, by making use of advanced programming and databases in addition
to HTML
 TERMINOLOGIES

Web browser- A piece of software such as Mozilla Firefox, Google

Chrome and Microsoft Edge that allows a computer to access and
display documents, view pictures, hear sound, and view video clips
from the World Wide Web.
 TERMINOLOGIES
• Web server - A web server is software and hardware that uses HTTP
(Hypertext Transfer Protocol) and other protocols to respond to client
requests made over the World Wide Web.
 TERMINOLOGIES

• search engine - A web service that helps you find other web
pages, such as Google, Bing, Yahoo, or DuckDuckGo.
 TERMINOLOGIES
Hypertext - It’s a text which contains links to other texts. Hypertext documents
are interconnected by hyperlinks, which are typically activated by a mouse click,
keypress set, or screen touch.

Hyperlink - It’s a text, images, graphics that, when clicked with a mouse (or activated
by keystrokes) will connect the user to a new Web site. The link is usually obvious,
such as underlined text or a "button" of some type, but not always

Hypertext Transfer Protocol (HTTP) - It is the set of rules by which Web pages are
transferred across the Internet.
 TERMINOLOGIES
• Uniform Resource Locator (URL) - URL is one of the key concepts of the Web. It
is the mechanism used by browsers to retrieve any published resource on the
web.
 WEB DEVELOPMENT
Web development is coding or programming, which enables
website functionality based on client requirements and deals with
building websites’ non-design aspect.

Front-end development Back-end development

constructing what a user sees when they load a mainly controls on the backend of a web
web application. application. A back-end often uses a database
to generate the front-end.
 FRONT-END DEVELOPMENT

Understanding the core technologies

 U N D E R S TA N D I N G H T M L
• HTML is a markup language which serves as the basic language for
client-side web development, also referred to as front-end. The
presence of hypertext on a page denotes its hyperlinks.
• The markup language uses tags to define the structure and layout.
• Consists of Elements which tells the browser what content is on the
page and how it is organized.
• HTML element is comprised of :
1.Content: actual information being conveyed
2.Markup tags: tell the Web browser how to display the page.
 A N AT O M Y O F H T M L 1 document type declaration
- Identifies the document as HTML5
DOCUMENT 2 Root element

- contains all elements in the doc

3 HTML head section
- contains important information
about the page
4 Meta element
- Provides keywords and descriptions
- Helps search engine to rank the page
5 HTML Title
- to define the title of the web page
- mandatory
6 HTML body Section
- contains everything to be displayed

2 3 5 and 6 are four essential tags that form the basic structure called Document Structure tags.
 U N D E R S TA N D I N G C S S
• CSS stands for Cascading Style Sheets, which is a style sheet language
used to describe the look and formatting of a document written in
HTML, XHTML, or XML.

• CSS enables web developers to separate the presentation of a web page

from its content, making it easier to maintain and update the design
and layout of a website.
 A N AT O M Y O F A C S S R U L E
A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces
 LINKING HTML AND CSS
There are three ways of linking a style sheet:
 CSS SELEC TORS
Used to target and style specific elements on a web page.

Element Selectors
• These selectors target elements based on their element type. For example, p targets all
paragraph elements, h1 targets all heading 1 elements, and so on.
Class Selectors
• These selectors target elements based on their class attribute. Class selectors begin with a period
(.) followed by the class name. For example, .my-class targets all elements with the class name
"my-class".
ID Selectors
• These selectors target elements based on their ID attribute. ID selectors begin with a hash (#)
followed by the ID name. For example, #my-id targets the element with the ID "my-id".
 CSS SELEC TORS

• A combinatory selectors

Selector Example Example description

Descendent div p Selects all <p> elements inside <div> elements

Child div > p Selects all <p> elements where the parent is a <div> element

Selects the first <p> element that are placed immediately after
Adjacent Sibling div + p
<div> elements

General Sibling p ~ ul Selects every <ul> element that are preceded by a <p> element
 U N D E R S TA N D I N G J AVA S C R I P T
• JS is a lightweight programming language (scripting language) , interpreted programming
language that is commonly used for creating interactive web applications.
• JavaScript to program the behavior of web pages
• insert text into HTML document.getElementById("demo").innerHTML = "Hello JavaScript";

• change HTML Attribute Values​ <button onclick="document.getElementById('myImage').src=‘dog.gif'"> Change</button>

JavaScript can:

• change HTML Styles (CSS)​ document.getElementById("demo").style.fontSize = "35px";

• react to events (ex: page load user click)​

• get information about a user's computer (ex: browser type)​

• perform calculations on user's computer (ex: form validation)​

• NOT related to Java other than by name and some syntactic similarities​
 L A N G U A G E F O R M AT O F J S
Comments in JS
// This is a single-line comment in JavaScript
/*
This is a
multi-line
comment in JavaScript
*/
Variable Declaration
// can be reassigned and re-declared later in the program
var message = "Hello, world!";
// can be reassigned but not re-declared and limited to the block scope
let myVariable = "Hello, world!";
const PI = 3.14; // cannot be reassigned and is also limited to the block scope.

Display the value of the "message" variable in the console

console.log(message);
Declare a function called "greet" that takes a parameter called "name"
function greet(name) {
console.log("Hello, " + name + "!"); // Display a personalized greeting in the console
}
Call the "greet" function with the argument "John"
greet("John");

JavaScript code can be embedded directly into an HTML file using the <script>, or placed in a separate file
and linked to an HTML file using <script src="filename.js"> tag
D I S P L AY I N G M E S S A G E S

Web Programming 23
 ACCESSING ELEMENTS

• Use the following methods to access elements:

• document.getElementById(id)
• document.getElementsByTagName(name)
• document.getElementsByClassName(name)
• document.getElementsByName(name)
• document.querySelectorAll(css-selector)

Web Programming 24
 E V E N T S I N J A VA S C R I P T

• Events: are actions or occurrences that happen in the

browser, such as a user clicking on a button or a page
finishing loading.
• Event handling: is the process of writing code to
respond to these events.
• Event listener: is a function that is attached to an
element and listens for a specific event to occur on
that element.
Web Programming 25
image source: (JavaScript Events with Examples - Dot Net Tutorials)
 SUMMARY
• Here are some common use cases for JavaScript in web
development:
• Validating user input: JavaScript can validate user input on a form before it is
submitted to the server, ensuring that the data is correct and complete.
• Creating dynamic user interfaces: JavaScript can be used to create interactive
user interfaces, such as collapsible menus, tabbed interfaces, and accordions.
• Handling events: JavaScript can handle user events such as clicks, key presses,
and form submissions. This allows you to respond to user actions in real-time,
without having to reload the entire page.
• Animating elements: JavaScript can be used to animate elements on a web
page, such as moving or resizing elements or creating visual effects.
• Communicating with servers: JavaScript can be used to make requests to a
server and receive data back, allowing you to update the content of a web page
without having to reload it.
 BACK-END DEVELOPMENT
Understanding the Back-end development
 B U I L D I N G S E R V E R - S I D E A P P L I C AT I O N
• Server-side applications are programs that run on a web server and
generate content dynamically in response to client requests.
• Server-side applications are an essential part of web development, as
they enable a wide range of functionality such as user authentication,
data storage, and communication with other systems.
• Steps in building server-side applications, including:
1. Choosing a server-side programming language
2. Setting up a development environment
3. Handling HTTP requests and responses
4. Working with databases
5. Authentication and security
6. Testing and debugging
7. Deployment and scaling
FA C TO R S TO C O N S I D E R W H E N C H O O S I N G
A LANGUAGE INCLUDE:
Familiarity with the language

Performance requirements of the application

Availability of libraries and frameworks for the language

Scalability and maintainability of the language and associated tools

 SERVER-SIDE LANGUAGES AND THEIR
POPULAR WEB FRAMEWORKS
PHP
• Laravel, Symfony, CodeIgniter

Python
• Django, Flask, Pyramid

Ruby
• Ruby on Rails, Sinatra, Hanami

Node.js
• Express, Koa, Hapi
 P H P F O R S E R V E R - S I D E A P P L I C AT I O N
DEVELOPMENT
• PHP is a popular server-side programming language that is widely
used for web development.
• Some of the key features and advantages of PHP include:
• Open-source and free to use
• Large and active community of developers
• Easy to learn for developers with experience in C or C++
• Built-in support for working with databases and web servers
• Many popular web frameworks and CMSs built with PHP,
including Laravel, Symfony, and WordPress
 COMMON USES OF PHP

• PHP performs system functions, i.e. from files on a system it can

create, open, read, write, and close them.
• PHP can handle forms, i.e. gather data from files, save data to a
file, through email you can send data, return data to the user.
• You add, delete, and modify elements within your database
through PHP.
• Access cookies variables and set cookies.
• Using PHP, you can restrict users to access some pages of your
website.
• It can encrypt data.

Web design and Programming 33

 KEY ELEMENTS OF PHP

• Some of the key elements of PHP include:

• Variables: Used to store data values such as numbers and strings.
• Control structures: Used to control the flow of execution within a PHP script,
including if/else statements, loops, and switch/case statements.
• Functions: Used to encapsulate code into reusable units and improve code
organization and maintainability.
• Arrays: Used to store collections of data, such as lists or maps.
• Classes and objects: Used to implement object-oriented programming
concepts, such as encapsulation and inheritance.
• File I/O: Used to read and write data to files on the server.
• Database connectivity: PHP has built-in support for working with databases,
including MySQL, PostgreSQL, and SQLite.
Web design and Programming 34
 B A S I C P H P S Y N TA X
Comments in PHP
// or # This is a single-line comment in PHP
/*
multi-line
comment in PHP
*/
Variable Declaration
$message = "Hello world!"; //starts with $ sign

define(“name“,“value"); // Constant variable – the value cannot be changed

Send the data to web browser

echo $message; //no return value, can take multiple parameter
Print $message //has return value (1), can take single parameter
Declare a function called "greet" that takes a parameter called "name"
function greet($name) {
echo "Hello“. Name."!"; // Display a personalized greeting in the console
}
Call the "greet" function with the argument "John"
greet("John");

PHP code can be embedded directly into an HTML code using the php tag <?php …. ?>, and it should be
saved as .php extension
 VA R I A B L ES I N P H P

• Variables are used to store data values in PHP.

• In PHP, variables are declared using the dollar( $ ) symbol followed by
the variable name.
• Example:
$name = "John";
$age = 25;
$height = 1.75;

Variable type is determined at runtime based on the value they are assigned.
 CONTROL STRUCTURES IN PHP

• Control structures are used to control the flow of execution within a

PHP script.
• PHP supports several types of control structures, including:
• Conditionals (or Selection):: Used to perform different actions based on the
value of a variable or expression. (if, if…else, if…elseif…, switch..case)
• Loops(or Iteration): Used to execute a block of code repeatedly,
including while loops, do…while loops, for loops and foreach loops.
• Control structures can be nested within each other to create more
complex logic.

Control structures are an essential part of programming in PHP and are used extensively in building dynamic
and interactive web applications.
HTML FORM AND PHP

Array Description

$_GET, $_POST parameters passed to GET and POST requests

$_REQUEST parameters passed to any type of request

$_SERVER, $_ENV information about the web server

$_FILES files uploaded with the web request

$_SESSION, $_COOKIE "cookies" used to identify

Web design the user (seen later)
and Programming 38
 D ATA B A S E C O N N E C T I V I T Y

• Server-side applications often need to store and retrieve data from a

database, such as user accounts, product information, or blog posts.

• PHP provides built-in support for working with databases,

including MySQL, PostgreSQL, and SQLite, among others.
• To connect to a database in PHP, the mysqli extension or the PDO
(PHP Data Objects) extension can be used.

Web design and Programming 39

P H P - D ATA B A S E C O N N E C T I O N S T E P S

Choose a Set
Create a Choose
database 1 2 up database 3
database a database API
system credentials
4

Connect to the 5 Execute 6

Close the
database queries connection

Web design and Programming 40

 MYSQLI VS PDO

MSQLI PDO
• Only mysql database system • 12 different database systems
• Needs to rewrite the entire code • Needs to change only the
to switch to another database. connection string and a few
• Procedural and Object Oriented queries
• support Prepared Statements • Object Oriented
• support Prepared Statements
 MYSQLI VS PDO
TASKS MYSQLI PDO

Connect to the $c=new PDO("mysql:host=$host;dbname=myDB", $user, $pass);

$c=new mysqli($host, $user, $pass, $dbname);
db

$c->exec($sql); //insert,update, delete

Execute queries $result = $c->query($sql);
$s=$c->query($sql); // select

$s->setFetchMode(PDO::FETCH_ASSOC);
while($row = $result->fetch_assoc())
while($row = $s->fetch())
{
{
echo "id: " . $row["id"]. " -
echo "id:".$row["id"]."-
Fetch result UserName: " . $row["username"]. "-
UserName:".$row["username"]."-
Email:" . $row["email"]. "<br>";
Email:".$row["email"]."<br>";
}
}

Close
Connection $c->close(); $c=null;
 SESSION & COOKIES
• In PHP, sessions and cookies are mechanisms used to store data
across multiple requests and responses in web applications.

Web design and Programming 43

SESSION & COOKIES

Web design and Programming 44

Thank You