Web basics
Dr Benabderrezak
Researcher in Cyber Security
Full-stack Web developer 1
Work Plan
1. WEB basics
2. HTML
3. CSS
4. Javascript
5. Jquery
6. UML
7. Mysql
8. PHP
2
1. WEB basics
● Internet
● World Wide Web (W3)
● Client-server architecture
● Web browser (client) / Web server
● Static vs Dynamic Website
● Front-end vs Backend
● Library, Framework, Plug-in, Add-ons
● HTTP protocol
● URL, URI, URN
● Code editor 3
Internet
- Internet, also known as "network of networks"
- Is a vast global computer network that connects millions of computers and
other digital resources around the world.
4
World Wide Web (WWW , W3)
- Refers to all public websites or pages that users can access on their
local computers and other devices via the Internet
5
Client-Server Architecture
- A design model used for communication between computers, software or
services.
- 2 types of entities interact: client and server.
6
Browser
⇒ Represents an essential software that facilitates your Internet exploration.
⇒ It offers you the opportunity to:
1. Visit websites
2. Search online
3. Read emails
4. Watch videos
5. Make purchases on the Internet
6. …etc.
7
Web Server
A web server is a computer or software that stores and transmits web
pages to users when they access a website.
8
The most used Web servers
9
Static website
A static website is a website whose content is previously created and does
not change depending on the user or other variables.
10
Dynamic Website
A dynamic website is a website whose content is generated in real time
based on user interactions or other running data.
11
Frontend, Backend
1. Frontend : the visible and interactive part of an application
2. Backend : is the non-visible part of an application that manages
behind-the-scenes operations, such as data management and server
processes.
12
13
Library vs Framework
⇒ The technical difference between a framework and a library is a term
called inversion of control.
14
Plug-in
⇒ a plug-in is a small piece of software that adds specific functionality
to an existing application.
15
Add-ons
Add-ons is a general term used to describe modules, extensions or
add-ins that enhance ( ) ﺗﺤﺴﯿﻦfunctionality specific to an existing
software or system.
16
Protocol
A protocol is a set of rules for a specific mission
اﻟﺒﺮوﺗﻮﻛﻮل ھﻮ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﻘﻮاﻋﺪ ﻟﻤﮭﻤﺔ ﻣﻌﯿﻨﺔ
17
Or : A protocol is a set of rules that define how two entities can
communicate on the network.
18
18
HTTP protocol
- HTTP (HyperText Transfer Protocol) is a client-server communication
protocol developed for the World Wide Web
- Hypertext is a way to link and access information of various kinds, such as a
network of nodes in which the user can navigate at will
19
HTTP communication process
20
1. HTTP Query
21
URL, URI, URN
22
Code editor
- Software that allows developers to create, modify and organize
computer code for programming applications, websites, etc.
- Examples : Visual Studio Code, Sublime Text.
23
24
Mr Benabderrezak
Researcher in Cyber Security
Full-stack Web developer 25
HTML
● HTML is the standard markup language for creating web pages
● HTML describes the structure of a web page
● The extension of html files is . html (ex: page_1.html)
26
Basic structure
27
Basic structure
● <!DOCTYPE html> : defines this document as an HTML5 document
● <html> : the root element of an HTML page
● <head> : contains meta information about the HTML page (SEO part)
● <body> : defines the body of the document (which sees the user)
28
Html Elements
- The HTML element is everything from the start tag to the end tag:
- <tagname> The content goes here… </tagname>
29
Html Elements
30
Heading
31
Paragraphs
32
Lists
1. Unordered list
33
Lists
2. Ordered list
34
Lists
3. Description List
35
Links
Images
36
Tables
⇒ Used to organize data into rows and columns.
37
Les tables
38
HTML attributes
- All HTML elements can have attributes
- Attributes usually come in name / value pairs
39
Classes
● The HTML class attribute is used to specify a class for an HTML
element.
● Multiple HTML elements can share the same class.
40
IDs
● The HTML id attribute is used to specify a unique identifier for an HTML
element
● You cannot have more than one element with the same identifier in an HTML
document
41
Forms
42
Forms
43
Form elements
The HTML <form> element may contain one or more of the following
form elements:
● input : to insert data with specific type (text , email , number …)
● label : to add explanation to input element
● select : select option from list
● textarea : input multi row
● button
● ….etc
44
Form elements - Input types
45
input attributes
1. value : an initial value for an input field
2. readonly : an input field is read-only.
3. disabled : an input field must be disabled
4. size: the visible width, in characters, of an Input (default = 20 )
5. maxlength : the maximum number of characters allowed in an input
field.
46
input attributes
6. min and max : the minimum and maximum values of an input field.
7. multiple : multiple values in an input field is allowed.
8. pattern : a regular expression against which the value of the input
field is checked when the form is submitted
47
input attributes
9. placeholder : a short index that describes the expected value of an
input field.
10. required : an input field must be completed before submitting the
form
11. step : the legal number intervals for an input field.
12. height and width : specify the height and width of a <input
type="image">
48
Form elements - Button
49
SEO (Search Engine Optimization)
- The purpose of any website is to generate traffic
- And many of these visitors come from search engines.
- The best ways to engage an audience is to use HTML tags for SEO.
50
HTML tags pour SEO
⇒ SEO is the process of improving your website to increase its visibility
in search engines (google, bing, etc.)
51
52
HTML tags pour SEO
[Link]
53
HTML Emmet
⇒ it is a way to write html code quickly
54
HTML Emmet
[Link]
55
CSS
Dr Benabderrezak
Researcher in Cyber Security
Full-stack Web developer 57
CSS
CSS describes how HTML elements should be displayed on the screen
58
CSS integration in HTML
59
CSS integration in HTML
60
CSS Syntax
61
CSS Box model
62
Common CSS properties
63
64
65
Common CSS properties
[Link]
66
CSS selectors
67
68
69
JavaScript
Dr Benabderrezak
Researcher in Cyber Security
Full-stack Web developer 70
71
Usefulness of Javascript ﻓﺎﺋﺪة
● Create interactive elements : such as forms, drop-down menus, buttons and
animations.
● Event Processing : such as Mouse Clicks, Mouse Movements and Keyboard
Keys… e
● Data access : such as browsing history, cookies and user settings.
● Communication with the server : for example to send data or receive
answers. 72
JS integration
There are following 3 main ways to add JavaScript to your web pages:
1. Embedding code
2. Inline code
3. External file
73
JS integration
1. Embedding code : Adding the JavaScript code between a pair of
<script>...</script> tag
74
JS integration - Embedded
75
JS integration - Embedded
After clicking
on the button
76
JS integration - Inline
2. Inline code : Placing JS code directly inside HTML tags
After clicking on the button
77
JS integration - External file
3. External file : Making a separate JavaScript file having .js as an extension.
78
Output
JavaScript can “display” data in different ways:
1. Write in an HTML element, using innerHTML
2. Write to HTML output using [Link]()
3. Write to an alert box, using [Link]()
4. Writing to the browser console, using [Link]()
79
Output
80
Output
See different ways with example in :
[Link]
81
Keywords
82
Functions
84
Objects
const car = { type:"Fiat", model:"500", color:"white" };
85
Objects
86
HTML Events
An HTML event can be something the browser does, or something a user
does.
1. An HTML web page has finished loading
2. An HTML input field has been modified
3. An HTML button has been clicked
4. ….etc.
87
Common HTML Events
Html Events
See different ways with example in :
[Link]
90
Loops
JavaScript supports different types of loops:
91
Loops
1. for - loop through a block of code a number of times
2. for/in - loops the properties of an object
3. for/of - loops the values of an iterable object
4. while - loop through a block of code when a specified condition is true
5. do/while - loop also through a block of code when a specified condition
is true
92
Loops
for - loop through a block of code a number of times
● Expression 1 is executed (one time) before the execution of the code
block.
● Expression 2 defines the condition for executing the code block.
● Expression 3 is executed (every time) after the code block has been
executed. 93
Loops
94
For loop
95
Loops
for/in - loops the properties of an object
96
For in loop
97
Loops
for/of - loops the values of an iterable object
- variable : can be declared with const, let, or var.
- iterable : An object that has iterable properties.
98
For of loop
99
Loops
while - loop through a block of code when a specified condition is true
100
While loop
101
Loops
do/while - loop also through a block of code when a specified condition is true
102
Do while Loops
103
Break/continue
104
HTML DOM Elements
105
HTML DOM Elements
106
HTML DOM Elements
- Often, with JavaScript, you want to manipulate HTML elements.
- To do that, we must first find the elements. There are several ways of doing
it:
1. Find HTML elements by id
2. Find HTML elements by tag name
3. Find HTML elements by class name
4. Search for HTML elements by CSS selectors
5. Search for HTML elements by HTML object collections
107
HTML DOM Elements
108
HTML DOM Elements
109
API
API in simple words : a website without frontend
110
API call in Javascript
4 Ways to Make an API Call in JavaScript:
1. API Call in JavaScript Using XMLHttpRequest
2. API Call in JavaScript Using the fetch() method
3. API call in JavaScript using Axios
4. API call in JavaScript Using the jQuery AJAX
111
API call in Javascript - fetch() method
112
API call in Javascript
See all methods with examples :
[Link]
113
Jquery
Dr Benabderrezak
Researcher in Cyber Security
Full-stack Web developer 115
Jquery ?
- jQuery is a lightweight JavaScript library, "write less, do more".
- jQuery also simplifies a lot of complicated things about JavaScript,
like AJAX calls (calls BDD in real time) and DOM manipulation.
116
⇒ The jQuery library contains the following features:
● HTML/DOM manipulation
● CSS manipulation
● HTML Event Methods
● Effects and animations
● AJAX
117
Syntax
⇒ The basic syntax is: $(selector). action()
1. $ sign to set/access jQuery
2. selector to search (or find) HTML elements
3. action() to perform an action on the element(s)
118
Examples
$(document).ready(function(){
$("p"). hide() // hides all <p> elements.
$(".test"). hide() // hides all elements with class="test".
$("#test"). hide() // hides the element with id="test".
});
119
Jquery Selectors
120
Jquery Selectors
121
Jquery Events
122
123
- See more examples of Jquery events :
[Link]
124
Json
- JSON is one of the data exchange formats
- JSON comes in the form of light text
125
126
Jquery Ajax
⇒ AJAX = Asynchronous JavaScript and XML.
⇒ Load data in the background and display it on the web page, without
reloading the entire page.
127
Jquery Ajax
128
jQuery call api
$(document).ready(function() {
$.ajax({
url: '[Link]
method: 'GET',
dataType: 'json',
success: function(data) {
[Link]('API response:', data);
},
error: function(error) {
[Link]('Error:', error);
}
});
});
129
130
UML
Dr Benabderrezak
Researcher in Cyber Security
Full-stack Web developer 131
1. UML ?
The unified modeling language is a visual modeling language that is
intended to provide a standard way to visualize the design of a system.
132
132
1. why UML ?
- UML diagram provides a visual representation of an aspect of a
system.
- UML diagrams illustrate the quantifiable aspects of a system that can
be described visually, such as relationships, behavior, structure, and
functionality
133
133
2. UML diagrams
134
134
2. UML diagrams
1. Static View
Focuses on the structure of the system showing elements like classes,
objects, and packages, and their relationships.
2. Functional View
Represents the functionality of the system and how users interact with it
through use case diagrams.
135
135
2. UML diagrams
3. Dynamic View
Describes how the system behaves over time, detailing the flow of control
or data through various interactions and state changes.
136
136
Class diagram
- Used to represent the static structure of a software system.
- It represents the system plane ( classes, attributes, methods and relationships
between classes)
137
Class diagram
138
Class diagram
- An abstract class is a class that cannot be instantiated
- It serves as the basis for other derived (inherited) classes
139
Normalizing the Class Diagram
1NF : All data must be atomic ( a single value and not a list of values ) and constant over
time
Person Person Notes
ID
ID ID note
first_name_last_name first_name
age last_name
notes[100] birth_date
140
- 2NF: (on association classes)
1. In addition to respecting the rules of 1NF
2. a table must not contain partial dependencies. A partial dependency exists
when a non-primary key column depends only on part of a composite primary
key.
Product Com_Prod Command
ID
ID ID
quantity
name date
price
141
3NF:
1. In addition to respecting the rules of 2NF
2. A table must not contain any transitive dependency. A transitive dependency
exists when a non-primary key column depends on another non-primary key
column.
Employee Employee Grade
ID ID
first_name ID
first_name
last_name grade_name
last_name
grade salary
salary
142
Use case Diagram
It shows the interactions between the actors and the system, describing the
features offered by the system.
143
Sequences diagram
It illustrates the sequence of interactions between objects or system components
over time.
144
145
Mysql
Dr Benabderrezak
Researcher in Cyber Security
Full-stack Web developer 147
Database concept - ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت
The database is simply a huge file used to store information in an
organized way
ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت ھﻲ ﺑﺒﺴﺎطﺔ ﻣﻠﻒ ﺿﺨﻢ ﯾﺴﺘﺨﺪم ﻟﺘﺨﺰﯾﻦ اﻟﻤﻌﻠﻮﻣﺎت ﺑﻄﺮﯾﻘﺔ ﻣﻨﻈﻤﺔ
148
The importance of databases
- Easily accessible and managed data ()ﯾﺴﮭﻞ اﻟﻮﺻﻮل إﻟﻰ اﻟﺒﯿﺎﻧﺎت وإدارﺗﮭﺎ
- Access to information very quickly (especially if indexes are used)
(اﻟﻮﺻﻮل إﻟﻰ اﻟﻤﻌﻠﻮﻣﺎت ﺑﺴﺮﻋﺔ ﻛﺒﯿﺮة )ﺧﺎﺻﺔ إذا اﺳﺘﺨﺪﻣﺖ اﻟﻔﮭﺎرس
- No need to duplicate the information () ﻻ ﺣﺎﺟﺔ ﻟﺘﻜﺮار اﻟﻤﻌﻠﻮﻣﺎت
- The ability to create backups ( ) اﻟﻘﺪرة ﻋﻠﻰ إﻧﺸﺎء ﻧﺴﺦ اﺣﺘﯿﺎطﯿﺔ
- ……etc.
149
The tables of a database
- This is the basic structure in all BDD types
- Used to represent the information we will store in our BDD
150
The tables of a database
⇒ Each table is composed of 2 important notions
1. The name
2. The attributes with their type (one of them primary key)
151
The tables of a database
152
Key types
153
Key types
1. Primary Key
- A unique identifier for each record in a table.
- Ensures that no two rows have the same value.
- Cannot contain NULL values.
154
2. Foreign Key
- A field (or collection of fields) in one table that uniquely identifies a row of
another table.
- Establishes a relationship between two tables.
- Enforces referential integrity.
155
3. Composite Key
- A primary key composed of two or more columns to uniquely identify a row.
- Used when a single column is not sufficient to identify a row uniquely.
156
4. Candidate Key
- A column or set of columns that could be used as a primary key.
- There can be multiple candidate keys in a table.
- One of the candidate keys is chosen as the primary key.
157
5. Alternate Key
- A candidate key that is not chosen as the primary key.
- Still ensures uniqueness of the column.
158
6. Super Key
- A set of one or more columns that can uniquely identify a row in a table.
- Includes the primary key and candidate keys, as well as any additional
attributes.
159
7. Unique Key
- Ensures all values in a column or set of columns are unique.
- Similar to primary keys but can accept one NULL value (in some databases).
160
What is a relational database ?
- A relational database is a database that uses relationships between tables
to organize information
- This notion is implemented using another notion called “foreign keys”
161
What is a relational database ?
162
Relational vs Non-relational database?
163
Types of data in SQL
Data type Description Example
Int Integer 134
Varchar ( length) String (dynamic length) ‘Ahmed’
Date Dates ‘2024-02-23’
Float Floats 12.7
Boolean the boolean values True , False
Char ( length) string (fixed length) ‘ABC’
Decimal ( p , s ) Float with conditions 13.356 p = 5 , s=3
Timestamp Date and hour ‘2024-01-03 19:26:45’
Text long texts ‘ long text …….’
164
Types of data in SQL
165
SQL
- SQL is the standard language for processing relational databases.
- SQL is used to insert, search, update, and delete database records.
166
The most important SQL commands
● Data Definition Language (DDL)
● Data Manipulation Language (DML)
● Data Control Language (DCL)
● Transaction Control Language (TCL)
● Data Query Language (DQL)
167
The most important SQL commands
168
The most important SQL commands
1. SELECT - extracts data from a database
2. UPDATE - updates data in a database
3. DELETE - deletes data from a database
4. INSERT INTO - inserts new data into a database
5. CREATE DATABASE - creates a new database
6. ALTER DATABASE - modifies a database
169
The most important SQL commands
7. CREATE TABLE - create a new table
8. ALTER TABLE - modifies a table
9. DROP TABLE - delete a table
10. CREATE INDEX - create an index (search key)
11. DROP INDEX - delete an index
170
DBMS
A database management system (DBMS) is a system software that
allows users and programmers to create and manage databases.
171
- Well-known DBMS: Oracle, SQl server, Mysql, Postgresql,
Mariadb, mongoDB
172
Install MySQL in Ubuntu
[Link]
Install Postgres in Ubuntu
[Link]
tall-and-configure-postgresql-on-ubuntu-20-04-4fd3cf072d6f
Database Administration Tool
These tools provide a graphical / Web interface to automate related
tasks with databases
ﺗﻮﻓﺮ ھﺬه اﻷدوات واﺟﮭﺔ رﺳﻮﻣﯿﺔ ﻟﻠﻘﯿﺎم ﺑﺎﻟﻤﮭﺎم ذات اﻟﺼﻠﺔ ﺑﻘﻮاﻋﺪ اﻟﺒﯿﺎﻧﺎت
175
Exercise
1. Create a database called "ManageEmployees".
2. In this database, create a "Employees" table with the following
columns
● ID (integer, primary key, auto-incremented)
● Name (string of characters)
● Age (number)
● post (string)
176
Exercise (following)
1. Insert 3 dummy employees in the "Employees" table.
2. Display all employees at the table.
3. Update the age of the second employee to 30.
4. Remove the third employee from the table.
177
PHP
Mr Benabderrezak
Researcher in Cyber Security
Full-stack Web developer 179
PHP ?
● PHP is a server scripting language, and a powerful tool for creating dynamic
and interactive web pages.
180
How does PHP work?
181
Syntax
182
Variables
● A variable starts with $ followed by the variable name
- Ex: $variable_name
● A variable name must begin with a letter (a , b , z , i ) or the
underscore character ( _ )
● A variable name cannot start with a number
183
Variables
● A variable name can only contain alphanumeric characters and underscores
(A-z, 0-9 and _ )
● Variable names are case sensitive ($age and $AGE are two different
variables
184
Variables
185
Data types
String $name = ”ahmed”;
Integer $number = 12;
Float (double) $float_number = 10.367;
Boolean $bool_var = true;
$another = false;
Array $array = array(‘a’,’b’, ‘c’);
$array_2= [‘a’,’b’,c’];
Object instance of class
NULL $x = null;
186
Constants
- A constant is an identifier (name) for a single value.
- The value cannot be changed during the script.
- Unlike variables, constants are automatically global across
the entire script.
187
Constants
- A valid constant name begins with a letter or underscore (no $ sign
before the constant name).
- Ex: variable_name , _another_variable
188
Constants
- Syntaxe : define(nom, valeur)
189
Magic constants
PHP has 9 predefined constants that change values depending on
where they are used, and so they are called "magic constants".
190
Les constants magiques
191
Operators
1. Arithmetic: +, - , *, / , % , **
2. Assignment: $x = $y , $x += $y, $x -= $y, $x /= $y, $x %= $y
3. Comparison: == , ==, != , <>, !=, <, <= , > , >=, < = >
4. Increment/ Decrement: - -$x, $x - - , $x++ , ++$x
5. Logic: and, && , or, |, ! (not), xor
6. Strings : . (concatenation) , .= (concatenation with old value)
7. Arrays : + , == , ===, != , <> , !==
192
Operators
193
Conditions
1. if (condition) { // code}
2. if (condition { // code} else { // another code}
3. if (condition 1 ) { ……} elseif (condition 2 ) { ….} else { ….}
4. switch ($var) {
case 1 : instructions; break;
case 2 : instructions ; break;
…..
default : code to execute if n is different from all labels ;
}
194
Loop
1. while (condition) { // code}
2. do { // code } while (condition)
3. for ($val_init ; $stop_condition; $incrementation) { // code}
4. foreach ( $variables as $var) { // code}
195
Functions
⇒ syntax : function function_Name() { // code to be executed; }
196
PHP forms
⇒ PHP $_GET and $_POST superglobals are used to collect form
data.
[Link]
[Link]
197
Arrays
- An array is a special variable that can hold many values under a single name
- you can access the values by referring to an index number or name.
198
1- Indexed array
199
1- Indexed array
200
1- Indexed array
201
1- Indexed array
202
1- Indexed array
203
1- Indexed array
204
2- Associative array
205
2- Associative array
206
2- Associative array
207
208
209
3- Multidimensional Arrays
210
3- Multidimensional Arrays
211
3- Multidimensional Arrays
212
3- Multidimensional Arrays
213
3- Multidimensional Arrays (display elements using loops)
214
Array functions
215
Array functions
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
PHP with MySQL
232
PHP with MySQL
233
234
235
236
237
238
239
PHP sessions
- A session is a way to store information (in variables) to be used across
multiple pages.
- Unlike a cookie, the information is not stored on the users computer
240
PHP sessions
- To use php session , you must start it :
- Then, you define session attributes :
241
PHP sessions
- To use php session attributes:
242
PHP sessions
- To close or destroy php session
243
References
244