EXIT EXAM

TUTORIAL

WEB PROGRAMMING
Web Design and Development I and II
1

Andargachew A. [HiLCoE] 11/24/2023

2 Objectives

 Review concepts
 Content Categorization
 Selecting focus area
 Tip and tricks
 Doing sample questions

Andargachew A. [HiLCoE] 11/24/2023

3 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

4 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

5 World Wide Web
1. Basic Terms and Concepts

 Internet is a global network of billions of computers and other

electronic devices.
 When someone says a computer is online, it's just another way of
saying it's connected to the Internet.
 World Wide Web is a way to access the information on the Internet.
 The Web uses common communication protocols (sets of rules) and special
languages.
 A web page is a single page of information on the World Wide
Web.
 A website refers to a group of web pages identified by a single
domain.

Andargachew A. [HiLCoE] 11/24/2023

6

 A homepage is the first or front page of a website.

 If you were to type “www.hilcoe.net” into your web browser, the first
web page that came up would be the website’s homepage.
 A URL or “Uniform Resource Locator” is the unique address of
each web page.
 For example, the URL for HiLCoE Graduate Admission page is:
https://www.hilcoe.net/postgraduate/

Andargachew A. [HiLCoE] 11/24/2023

7 World Wide Web
2. Web Design and Web Developer

 Web Design:
 Refers to both the visual portion of the website and it’s usability.
 Use various design programs such as Adobe Photoshop to create the
layout and other visual elements of the website
 Web Developers
 Take a website design and actually make a functioning website
from it.
 Web developers use HTML, CSS, JavaScript, PHP and other
programming languages to bring to life the design files.

Andargachew A. [HiLCoE] 11/24/2023

8 World Wide Web
3. Web Server and Web Client

 A Web server is a computer where the web content is stored.

 Basically web server is used to host the web sites but there exists
other web servers also such as FTP, DHCP, email etc.
 It has two functions basically:
1. Connect to databases or other web server and get data
2. Get that data and pass in to the client( mostly browser or an App)
which the client had requested.
 Web client:
 The client, or user, side of the Web.
 The term may imply the entire user machine or refer to a handheld
device that provides Web access.
 It typically refers to the Web browser in the user's machine.

Andargachew A. [HiLCoE] 11/24/2023

9

 Key Points
 When client sends request for a web page, the web server search
for the requested page . . .
 If requested page is found then it will send it to client with an HTTP
response.
 If the requested web page is not found, web server will the send
an HTTP response:Error 404 Not found.
 If client has requested for some other resources then the web server
will contact to the application server and data store to construct the
HTTP response.

Andargachew A. [HiLCoE] 11/24/2023

10

Andargachew A. [HiLCoE] 11/24/2023

11

Andargachew A. [HiLCoE] 11/24/2023

12 World Wide Web
4. Network Protocols

 Internet network protocols refer to data transmission processes

between computers, or routers, within a network.
 Below is a list of protocols used for the world wide web:

 DHCP: Dynamic Host  SSL: Secure Sockets Layer

Configuration Protocol  SSH: Secure Shell
 DNS: Domain Name  TCP: Transmission Control
Service
Protocol
 FTP: File Transfer Protocol  TELNET: TCP/IP
 HTTP: Hypertext Transfer Terminal Emulation
Protocol Protocol
 IP: Internet Protocol  UPD: User Datagram
 Protocol
SMTP: Simple Mail
Andargachew A. [HiLCoE] 11/24/2023
Transfer Protocol
13 World Wide Web
5. Architecture

 Web Server Architecture follows the following two approaches:

1. Concurrent Approach
2. Single-Process-Event-Driven Approach.
 Concurrent Approach
 Concurrent approach allows the web server to handle multiple client
requests at the same time. It can be achieved by following methods:
1. Multi-process
2. Multi-threaded
3. Hybrid method.

Andargachew A. [HiLCoE] 11/24/2023

14 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

15 Hyper Text Markup Language
1. Basic Terms and Concepts

 HTML stands for Hyper Text Markup Language.

 It is used to design web pages using markup language. HTML is the
combination of Hypertext and Markup language.
 Hypertext defines the link between the web pages.
 Markup language is used to define the text document within tag
which defines the structure of web pages.
 Most markup languages (e.g. HTML) are human readable.
Language uses tags to define what manipulation has to be done on
the text.
 HTML uses predefined tags and elements which tell the browser how to
properly display the content.

Andargachew A. [HiLCoE] 11/24/2023

16

 Features of HTML
 It is easy to learn and easy to use.
 It is platform independent.
 Images, video and audio can be added to a web page.
 Hypertext can be added to text.
 It is a markup language.

Andargachew A. [HiLCoE] 11/24/2023

17 Hyper Text Markup Language
2. HTM Structure

 An HTML document can be created using any text editor . Save the text
file using .html or .htm
 <!DOCTYPE!>
 This is the document type declaration (not technically a tag). It declares a
document as being an HTML document. The doctype declaration is not case-
sensitive.
 <html>
 This is called the HTML root element. All other elements are contained within it.
 <head>
 The head tag contains the “behind the scenes” elements for a webpage.
 <body>
 The body tag is used to enclose all of the visible content of a webpage. In other
words, the body content is what the browser will show on the front-end.

Andargachew A. [HiLCoE] 11/24/2023

18 Hyper Text Markup Language
3. Marking up Text

 Heading: <H1> – <H6>

 Paragraph: <P>
 Bold: <B>, Italic: <I>, Underline: <U>
 Superscript * Subscript: <SUP>, <SUB>
 Line break: <BR/>
 Horizontal Rule: <HR/>
 Strong & Emphasis: <STRONG>, <EM>
 Quotations: <BLOCKQUOTE>,<Q>
 Abbreviations & Acronyms: <ABBR>,<ACRONYM>
 Insert and Delete: <INS>, <DEL>

Andargachew A. [HiLCoE] 11/24/2023

19 Hyper Text Markup Language
4. Lists

 Ordered Lists: <OL>

 List items: <LI>
 Attributes: type
 Unordered lists: <UL>
 List items: <LI>
 Dictionary: <DL>
 Definition term: <DT>
 Definition: <DD>

Andargachew A. [HiLCoE] 11/24/2023

20 Hyper Text Markup Language
5. Links and Image

 Link (Anchor): <A>

 Attributes:
 HREF. TARGET

 Image: <IMG>
 Attributes:
 SRC, ALT ,ALIGN

 Figure and Figure Caption

 <FIGURE>
 <FIGCAPTION>

Andargachew A. [HiLCoE] 11/24/2023

21 Hyper Text Markup Language
6. Table Markup

 A table represents information in a grid format.

 Table: <TABLE>
 Table rows: <TR>
 Attributes
 Colspan, rowspan, border, bgcolor,align

 Table data (column): <TD>

 Table heading: <TH>

Andargachew A. [HiLCoE] 11/24/2023

22 Hyper Text Markup Language
7. HTM Form

 Adding text
 Text input: <INPUT type=‘text’>
 Password input: <INPUT type=‘password’>
 Text area: <TEXTAREA>…</TEXTAREA>
 Making Choices
 Radio buttons: <INPUT type=‘radio’>
 Checkboxes: <INPUT type=‘checkbox’>
 Dropdown boxes: <SELECT> . . . </SELECT>
 Options: <OPTION>..</OPTION>
 Submitting forms
 Submit buttons: <INPUT type=‘SUBMIT’>
 Images buttons: <INPUT type=‘IMAGE’>

Andargachew A. [HiLCoE] 11/24/2023

23

 Uploading files
 File upload: <INPUT type=‘FILE’>
 Buttons & Hidden Controls
 Button: <BUTTON>
 Hidden control: <INPUT type=‘HIDDEN’>
 Grouping form elements
 <FIELDSET> … </FIELDSET>
 <LEGEND> … </LEGEND>
 HTML Validations
 Date: <INPUT type=‘DATE’>
 Email: <INPUT type=‘EMAIL’>
 URL: <INPUT type=‘URL’>
 Search: <INPUT type=‘SEARCH’>

Andargachew A. [HiLCoE] 11/24/2023

24

 Extra Markup
 Comment: <!-- -->
 Attributes
 ID
 NAME
 CLASS
 Block Elements
 <DIV>
 Inline Elements
 <SPAN>
 Iframes
 <IFRAME>

Andargachew A. [HiLCoE] 11/24/2023

25 Hyper Text Markup Language
8. HTML5 Layout

 HTML has several semantic elements that define the different

parts of a web page:
 <header> - Defines a header for a document or a section
 <nav> - Defines a set of navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent, self-contained content
 <aside> - Defines content aside from the content (like a sidebar)

Andargachew A. [HiLCoE] 11/24/2023

26

 <footer> - Defines a footer for a document or a section

 <details> - Defines additional details that the user can open and
close on demand
 <summary> - Defines a heading for the <details> element

Andargachew A. [HiLCoE] 11/24/2023

27 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

28 Cascading Style Sheet (CSS)
1. Basic Terms and Concepts

 CSS allows you to create rules that specify how the content of
an element should appear.
 The key to understanding how CSS works is to imagine that there is
an invisible box around every HTML element
 CSS allows you to create rules that control the way that each
individual box (and the contents of that box) is presented.
 BLOCK & INLINE ELEMENTS
 Block level elements look like they start on a new line.
 Inline elements follow within the text and don’t start on a new line.

Andargachew A. [HiLCoE] 11/24/2023

29

 A CSS rule contains two parts: a selector and a declaration.

 Selectors indicate which element the rule applies to.
 The same rule can apply to more than one element if you separate the
element names with commas.
 Declarations indicate how the elements referred to in the selector
should be styled.
 Declarations are split into two parts (a property and a value), and are
separated by a colon.
 CSS declarations sit inside curly brackets and each is made up of two
parts:
 Properties indicate the aspects of the element you want to change.
 Values specify the settings you want to use for the chosen properties.

Andargachew A. [HiLCoE] 11/24/2023

30 Cascading Style Sheet (CSS)
2. CSS Selectors

Andargachew A. [HiLCoE] 11/24/2023

31

Andargachew A. [HiLCoE] 11/24/2023

32

 How CSS rules cascade?

 If there are two or more rules that apply to the same element, it is
important to understand which will take precedence.
 LAST RULE: If the two selectors are identical, the latter of the two will
take precedence.
 SPECIFICITY: If one selector is more specific than the others, the more
specific rule will take precedence over more general ones.
 IMPORTANT: You can add !important after any property value to
indicate that it should be considered more important than other rules that
apply to the same element.

Andargachew A. [HiLCoE] 11/24/2023

33 Cascading Style Sheet (CSS)
3. Type of CSS Styles

 CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements
 <h1 style="color:red;">Today’s Update</h1>
 Internal - by using a <style> element in the <head> section
 <style> h1 {color:red;}< /style>

 External - by using a <link> element to link to an external CSS file

 <link href="style.css" rel="stylesheet" type="text/css">

Andargachew A. [HiLCoE] 11/24/2023

34 Cascading Style Sheet (CSS)
4. Color

 You can specify any color in CSS in one of three ways:

 rgb values :These express colors in terms of how much red, green
and blue are used to make it up.
 For example: rgb(100,100,90) = #64645A

 hex codes These are six-digit codes that represent the amount of red,
green and blue in a color, preceded by a pound or hash # sign.
 For example: #ee3e80

 color names There are 147 predefined color names that are
recognized by browsers.
 For example: DarkCyan

Andargachew A. [HiLCoE] 11/24/2023

35

 Foreground Color
 The color property allows you to specify the color of text inside an
element.
 Background Color
 CSS treats each HTML element as if it appears in a box, and the
background-color property sets the color of the background for that
box.
 CSS3 Opacity: opacity, rgba
 CSS3 introduces the opacity property which allows you to specify
the opacity of an element and any of its child elements.
 The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50%
opacity and 0.15 is 15% opacity).

Andargachew A. [HiLCoE] 11/24/2023

36 Cascading Style Sheet (CSS)
5. Text

 The properties that allow you to control the appearance of text can
be split into two groups:
 Those that directly affect the font and its appearance
 Those that would have the same effect on text no matter what font you
were using
 Specifying Typefaces
 The font-family property allows you to specify the typeface that should
be used for any text inside the element(s) to which a CSS rule applies.
 font-size
 The font-size property enables you to specify a size for the font. There
are several ways to specify the size of a font. The most common are:

Andargachew A. [HiLCoE] 11/24/2023

37

 Bold font-weight
 The font-weight property allows you to create bold text. There are
two values that this property commonly takes:
 normal This causes text to appear at a normal weight.
 bold This causes text to appear bold.
 Italic font-style
 If you want to create italic text, you can use the font-style property.
There are three values this property can take:
 normal This causes text to appear in a normal style (as opposed to italic
or oblique).
 italic This causes text to appear italic.
 oblique This causes text to appear oblique

Andargachew A. [HiLCoE] 11/24/2023

38

 UpperCase & LowerCase

 The text-transform property is used to change the case of text giving it one of
the following values:
 uppercase This causes the text to appear uppercase.
 lowercase This causes the text to appear lowercase.
 capitalize This causes the first letter of each word to appear capitalized
 Underline & Strike
 The text-decoration property allows you to specify the following values:
 none This removes any decoration already applied to the text.
 underline This adds a line underneath the text.
 overline This adds a line over the top of the text.
 line-through This adds a line through words.
 blink This animates the text to make it flash on and off (however this is generally
frowned upon, as it is considered rather annoying)
Andargachew A. [HiLCoE] 11/24/2023
39

 Leading line-height
 Leading (pronounced ledding) is a term typographers use for the
vertical space between lines of text.
 Letter & Word Spacing
 You can control the space between each letter with the letter-spacing
property.
 You can also control the gap between words using the word-spacing
property.
 Alignment text-align
 The text-align property allows you to control the alignment of text.

Andargachew A. [HiLCoE] 11/24/2023

40

 Vertical Alignment
 It is more commonly used with inline elements such as <img>,
<em>, or <strong> elements.
 The values it can take are: baseline, sub, super, top, text-top,
middle, bottom, text-bottom
 Indenting Text text-indent
 The text-indent property allows you to indent the first line of text
within an element.
 CSS3: Drop Shadow
 The text-shadow property has become commonly used despite
lacking support in all browsers.

Andargachew A. [HiLCoE] 11/24/2023

41

 First Letter or Line :first-letter, :first-line

 You can specify different values for the first letter or first line of text
inside an element using :first-letter and :first-line.
 Styling Links
 :link This allows you to set styles for links that have not yet been
visited.
 :visited This allows you to set styles for links that have been clicked on.
 :hover This is applied when a user hovers over an element with a
pointing device such as a mouse.
 :active This is applied when an element is being activated by a user; for
example, when a button is being pressed or a link being clicked.
 :focus This is applied when an element has focus.

Andargachew A. [HiLCoE] 11/24/2023

42 Cascading Style Sheet (CSS)
6. Box

 You can set several properties that affect the appearance of these
boxes.
 Control the dimensions of your boxes
 Create borders around boxes
 Set margins and padding for boxes
 Show and hide boxes
 Box dimensions
 By default a box is sized just big enough to hold its contents.
 To set your own dimensions for a box you can use the height and
width properties.

Andargachew A. [HiLCoE] 11/24/2023

43

 Limiting Width and Height

 Some page designs expand and shrink to fit the size of the user's screen.
 To limit the height of the box we can use the min-height and max-height
properties.
 To limit the width of the box we can use the min-width and min-width
properties.
 Overflowing Content
 The overflow property tells the browser what to do if the content contained
within a box is larger than the box itself. It can have one of two values:
 hidden: This property simply hides any extra content that does not fit in the box.
 scroll: This property adds a scrollbar to the box so that users can scroll to see the
missing content

Andargachew A. [HiLCoE] 11/24/2023

44

 Border, Margin & Padding

 Every box has three available properties that can be adjusted to
control its appearance:
 The border-width property is used to control the width of a border.
 You can control the style of a border using the border-style property.
 You can specify the color of a border using border-color either RGB
values, hex codes or CSS color names
 The border property allows you to specify the width, style and color
of a border in one property

Andargachew A. [HiLCoE] 11/24/2023

45

 The padding property allows you to specify how much space should
appear between the content of an element and its border.
 The margin property controls the gap between boxes. Its value is
commonly given in pixels, although you may also use percentages or
ems.
 Centering Content
 If you want to center a box on the page (or center it inside the
element that it sits in), you can set the left-margin and right-margin
to auto.

Andargachew A. [HiLCoE] 11/24/2023

46

 Change inline/block
 The display property allows you to turn an inline element into a
block-level element or vice versa, and can also be used to hide an
element from the page.
 Hiding Boxes
 The visibility property allows you to hide boxes from users but It
leaves a space where the element would have been.
 This property can take two values:
 hidden This hides the element.
 visible This shows the element.

Andargachew A. [HiLCoE] 11/24/2023

47

 CSS3-Border Images
 The border-image property applies an image to the border of any
box. It takes a background image and slices it into nine pieces.
 CSS3: Rounded Corners
 CSS3 introduces the ability to create rounded corners on any box,
using a property called border-radius. The value indicates the size
of the radius in pixels.

Andargachew A. [HiLCoE] 11/24/2023

48 Cascading Style Sheet (CSS)
7. Lists, Tables, Forms and Images

 Lists
 Bullet point styles
 The list-style-type property allows you to control the shape or style of a
bullet point (also known as a marker).
 Unordered Lists
 none, disc circle, square

 Ordered Lists
 decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-
roman

 Images for bullets

 You can specify an image to act as a bullet point using the list-style-
image property

Andargachew A. [HiLCoE] 11/24/2023

49

 Positioning the Marker

 Lists are indented into the page by default and the list-style-position
property indicates whether the marker should appear on the inside or the
outside of the box containing the main points.
 List shorthand
 As with several of the other CSS properties, there is a property that acts
as a shorthand for list styles. It is called list-style, and it allows you to
express the markers' style, image and position properties in any order.

Andargachew A. [HiLCoE] 11/24/2023

50

 Tables
 Here are some tips for styling tables to ensure they are clean and easy
to follow:
 Give cells padding: adding padding helps to improve readability.
 Distinguish headings: Putting all table headings in bold makes them
easier to read.
 Shade alternate rows: shading every other row can help users follow
along the lines.
 Align numerals: you can use the text-align property to align the content
of any column that contains numbers to the right

Andargachew A. [HiLCoE] 11/24/2023

51

 Border on empty cells

 If you have empty cells in your table, then you can use the empty-cells
property to specify whether or not their borders should be shown.
 Gaps between cells
 The border-spacing property allows you to control the distance between
adjacent cells.

Andargachew A. [HiLCoE] 11/24/2023

52

 Styling Form
 It is most common to style:
 Text inputs and text areas
 Submit buttons
 Labels on forms, to get the form controls to align nicely
 Styling Text Inputs
 font-size: sets the size of the text entered by the user. color: sets the text color,
and background-color sets the background color of the input.
 border: adds a border around the edge of the input box, and border-radius can
be used to create rounded corners.
 The :focus is used to change the background color of the text input when it is
being used, and the :hover applies the same styles when the user hovers over
them
 background-image: adds a background image to the box.

Andargachew A. [HiLCoE] 11/24/2023

53

 Styling Submit buttons

 color: is used to change the color of the text on the button.
 text-shadow: can give a 3D look to the text in browsers that support this
property.
 border-bottom: has been used to make the bottom border of the button
slightly thicker, which gives it a more 3D feel.
 background-color: can make the submit button stand out from other
items around it.
 The :hover pseudo-class has been used to change the appearance of the
button when the user hovers over it.

Andargachew A. [HiLCoE] 11/24/2023

54

 Styling Fieldsets & Legends

 Fieldsets are particularly helpful in determining the edges of a form.
 In a long form they can help group together related information within it.

 The legend is used to indicate what information is required in the

fieldset.
 Properties commonly used with these two elements include:
 width, color, background-color, border, border-radius, padding

Andargachew A. [HiLCoE] 11/24/2023

55

 Images
 You can control the size of an image using the width and height
properties in CSS, just like you can for any other box
 Aligning images
 Use the float property to align images
 float: right/left

 Background images
 The background property acts like a shorthand for all of the other
background properties you have just seen, and also the background-color
property.

Andargachew A. [HiLCoE] 11/24/2023

56 Cascading Style Sheet (CSS)
8. CSS3 Layout

 Controlling the Position of Elements

 CSS has the following positioning schemes that allow you to control
the layout of a page: normal flow, relative positioning, and
absolute positioning.
 You specify the positioning scheme using the position property in CSS.
 You can also float elements using the float property

 Overlapping Elements
 If you want to control which element sits on top, you can use the z-
index property.
 Its value is a number, and the higher the number the closer that element
is to the front.

Andargachew A. [HiLCoE] 11/24/2023

57

 Creating Multi-Column Layouts with Floats

 Many web pages use multiple columns in their design.
 This is achieved by using a element to represent each column.
 The following three CSS properties are used to position the columns
next to each other:
 width: this sets the width of the columns.
 float: this positions the columns next to each other.
 margin: this creates a gap between the columns

Andargachew A. [HiLCoE] 11/24/2023

58 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

59 Client Side Scripting (JS)
1. Basic Terms and Concepts

 JavaScript is a very powerful client-side scripting language.

 JavaScript is used mainly for enhancing the interaction of a user
with the webpage.
 JavaScript is also being used widely in game development
and Mobile application development.
 The browser is responsible for running JavaScript code.
 When a user requests an HTML page with JavaScript in it, the
script is sent to the browser and it is up to the browser to execute
it.
 The main advantage of JavaScript is that all modern web browsers
support JavaScript.

Andargachew A. [HiLCoE] 11/24/2023

60

 How to Add JavaScript to a Page

 Add the <script> tag in the web page’s <head> section, and add
your JS code
 External JavaScript Files
 An external JavaScript file is a text file containing JavaScript code and
ending with the file extension .js—navigation.js,
 The file is linked to a web page using the <script> tag.
 <script src="navigation.js"></script>

Andargachew A. [HiLCoE] 11/24/2023

61 Client Side Scripting (JS)
2. Basic JavaScript Input Output

 Getting Input
 prompt() is a method of the window object.
 When JavaScript sees this prompt("...") it will open a dialog box.
 Displaying Output
 Using document.write().
 The word document refers to the HTML page that contains this
JavaScript program.
 It is an object, one of the most famous objects in the JavaScript
language.
 Using console.log().
 Using alert().

Andargachew A. [HiLCoE] 11/24/2023

62 Client Side Scripting (JS)
3. Data Types and Variable in JavaScript

 Unlike C, C++ and Java, JavaScript does not require variables to

have a declared type before they can be used in a program.
 JavaScript is referred to as a loosely typed language.
 When a variable is declared in JavaScript, but is not given a value,
the variable has an undefined value.
 Attempting to use the value of such a variable is normally a logic
error.
 Declare a JavaScript Variable
 Using var
 Using let
 Using const

Andargachew A. [HiLCoE] 11/24/2023

63

 Data Type Conversion

 JavaScript variables can be converted to a new variable and another
data type:
 Convert strings to numbers:
 Number() - Returns a number, converted from its argument
 parseFloat() - Parses a string and returns a floating point number
 parseInt() - Parses a string and returns an integer

Andargachew A. [HiLCoE] 11/24/2023

64 Client Side Scripting (JS)
4. Control Structure in JavaScript

 Normally, statements in a program execute one after the other in the order
in which they are written.
 This process is called sequential execution.
 Various JavaScript statements enable the programmer to specify that the
next statement to execute may not be the next one in sequence.
 This is known as transfer of control.
 Here are the control structures
 if . . . else if … else selection statement
 switch multiple-selection statement
 while repetition statement
 for repetition statement
 do…while Repetition Statement
 break and continue Statements
Andargachew A. [HiLCoE] 11/24/2023
65 Client Side Scripting (JS)
5. Array in JavaScript

 An array is a special variable, which can hold more than one

value:
 An array is a group of memory locations that all have the same name
and normally are of the same type (although this attribute is not
required in JavaScript).
 Creating an Array
 Using an array literal is the easiest way to create a JavaScript Array.
 const cars = ["Saab", "Volvo", "BMW"];
 Array Properties
 "length" property which returns number of elements in the array.
 “sort” property which sorts the elements of an array in place and returns
the array.

Andargachew A. [HiLCoE] 11/24/2023

66 Client Side Scripting (JS)
6. Function in JavaScript

 A JavaScript function is a block of code designed to perform a

particular task.
 A JavaScript function is executed when "something" invokes it
(calls it).

 To invoke a function somewhere later in the script, you would

simply need to write the name of that function.
 JavaScript is a dynamic type scripting language, so a function
parameter can have value of any data type.

Andargachew A. [HiLCoE] 11/24/2023

67

 You can specify less or more arguments while calling function.

 If you pass less arguments then rest of the parameters will be undefined.
 If you pass more arguments then additional arguments will be ignored.

 All the functions in JavaScript can use arguments object by default.

 An arguments object includes value of each parameter.
 The arguments object is an array like object.

 A function can return zero or one value using return keyword.

 A function can return another function in JavaScript.

Andargachew A. [HiLCoE] 11/24/2023

68

 Function Expression
 JavaScript allows us to assign a function to a variable and then use that
variable as a function. It is called function expression.

 Anonymous Function
 JavaScript allows us to define a function without any name.
 This unnamed function is called anonymous function. Anonymous function
must be assigned to a variable.

Andargachew A. [HiLCoE] 11/24/2023

69 Client Side Scripting (JS)
7. JavaScript DOM

 With the HTML DOM, JavaScript can access and change all the
elements of an HTML document.
 When a web page is loaded, the browser creates
a Document Object Model of the page.
 With the object model, JavaScript gets all the power it needs to create
dynamic HTML:
 JavaScript can change all the HTML elements in the page
 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page
Andargachew A. [HiLCoE] 11/24/2023
70

 Finding HTML Elements

 Often, with JavaScript, you want to manipulate HTML elements. To
do so, you have to find the elements first.
 There are several ways to do this:
 Finding HTML elements by id
 document.getElementById("intro");

 Finding HTML elements by tag name

 document.getElementsByTagName("p");

 Finding HTML elements by class name

 document.getElementsByClassName("intro");

Andargachew A. [HiLCoE] 11/24/2023

71

 Finding HTML elements by CSS selectors

 document.querySelectorAll("p.intro");

 Finding HTML elements by HTML object collections

 document.forms, document.head, document.images, document.links

 Changing HTML Content

 The easiest way to modify the content of an HTML element is by using
the innerHTML property.
 document.getElementById(id).innerHTML = new HTML
 Changing the value of an Attribute
 To change the value of an HTML attribute, use this syntax:
 document.getElementById(id).attribute = new value

Andargachew A. [HiLCoE] 11/24/2023

72

 Changing CSS
 The HTML DOM allows JavaScript to change the style of HTML
elements.
 Changing HTML Style
 To change the style of an HTML element, use this syntax:
 document.getElementById(id).style.property = new style

Andargachew A. [HiLCoE] 11/24/2023

73

 Creating New HTML Elements (Nodes)

 To add a new element to the HTML DOM, you must create the
element (element node) first, and then append it to an existing
element.

 Creating new HTML Elements - insertBefore()

Andargachew A. [HiLCoE] 11/24/2023

74

 Removing Existing HTML Elements

 To remove an HTML element, use the remove() method:

 Removing a Child Node

 Replacing HTML Elements

Andargachew A. [HiLCoE] 11/24/2023

75

 JavaScript Events
 An HTML event can be something the browser does, or something a
user does. Here are some examples of HTML events:
 An HTML web page has finished loading
 An HTML input field was changed
 An HTML button was clicked

 Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.
 HTML allows event handler attributes, with JavaScript code, to be
added to HTML elements.

Andargachew A. [HiLCoE] 11/24/2023

76

 Here is a list of some common HTML events:

Andargachew A. [HiLCoE] 11/24/2023

77 Client Side Scripting (JS)
8. JavaScript BOM

 The Browser Object Model (BOM) is the core of JavaScript on

the web. The BOM provides you with objects that expose the web
browser’s functionality.
 Window - is the global object of JavaScript in the browser and
exposes the browser’s functionality
 Open|Alert|Confirm|Prompt|setTimeOut|setInterval

 Location - manipulate the location of a document

 Navigator - query the information and capabilities of the browser
 Screen - get the information about the screen on which the browser
is running
 History - manage the web browser’s history stack

Andargachew A. [HiLCoE] 11/24/2023

78 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

79 Server Side Scripting (PHP)
1. Basic Terms and Concepts

 PHP – Hypertext Preprocessor

 A popular general-purpose scripting language that is especially
suited to web development.
 Fast, flexible and pragmatic, PHP powers everything from your blog
to the most popular websites in the world.
 A PHP script is executed on the server, and the plain HTML result
is sent back to the browser.
 PHP is platform independent: implementations exist for all major
UNIX, Linux, Mac and Windows operating systems.
 PHP also supports many databases, including MySQL

Andargachew A. [HiLCoE] 11/24/2023

80

 Basic PHP Syntax

 A PHP script can be placed anywhere in the document.
 A PHP script starts with <?php and ends with ?>
 The default file extension for PHP files is ".php".
 A PHP file normally contains HTML tags, and some PHP scripting
code.
 PHP script that uses a built-in PHP function "echo" to output the text
"Hello Ethiopia!" on a web page:
 Note:
 PHP statements end with a semicolon (;).

Andargachew A. [HiLCoE] 11/24/2023

81

 PHP case sensitivity

 In PHP, keywords (e.g. if, else, while, echo, etc.), classes, functions, and user-
defined functions are not case-sensitive.
 Note: However; all variable names are case-sensitive!
 Comments in PHP
 A comment in PHP code is a line that is not executed as a part of the program.
Its only purpose is to be read by someone who is looking at the code.
// This is a single-line comment
# This is also a single-line comment
/*
This is a multiple-lines comment block
that spans over multiple
lines
*/

Andargachew A. [HiLCoE] 11/24/2023

82 Server Side Scripting (PHP)
2. PHP Variable and Data type

 Rules for PHP variables:

 A variable starts with the $ sign, followed by the name of the variable
 A variable name must start with a letter or the underscore character
 A variable name cannot start with a number
 A variable name can only contain alpha-numeric characters and underscores
(A-z, 0-9, and _ )
 Variable names are case-sensitive ($age and $AGE are two different
variables)
 PHP is a Loosely Typed Language
 PHP automatically associates a data type to the variable, depending
on its value.

Andargachew A. [HiLCoE] 11/24/2023

83 Server Side Scripting (PHP)
3. PHP Control Structure

 A control structure allows you to control the flow of code

execution in your application.
 if . . . else if … else selection statement
 switch multiple-selection statement
 Loop statement
 while repetition statement
 for repetition statement
 do…while Repetition Statement
 foreach … as loop

 break and continue Statements

Andargachew A. [HiLCoE] 11/24/2023

84 Server Side Scripting (PHP)
4. PHP Array and String

 An array is a special variable, which can hold more than one

value at a time.
 An Array stores multiple values in one single variables.
 Create an Array in PHP
 In PHP, the array() function is used to create an array:
 array();

 There are 3 types of array in PHP.

1. Indexed arrays - Arrays with a numeric index
2. Associative arrays - Arrays with named keys
3. Multidimensional arrays - Arrays containing one or more arrays

Andargachew A. [HiLCoE] 11/24/2023

85

 PHP Array Functions

 count() - counts all elements in an array.
 sort() - sorts all the elements in an array.
 array_reverse() - returns an array containing elements in reversed
order.
 array_search() - searches the specified value in an array. It returns
key if search is successful.
 Example
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo count($cars);
?>

Andargachew A. [HiLCoE] 11/24/2023

86

 PHP string is a sequence of characters

 We can create a string in PHP by enclosing the text in a single-
quote or double-quoted.
 Example
$str='Hello text within single quote';
echo $str;
 It is not allowed to use double(single) quote directly inside
double(single) quoted string.
 We can store multiple line text, special characters and escape
sequences in a double(single) quoted PHP string.

Andargachew A. [HiLCoE] 11/24/2023

87

 PHP String Functions

 md5() - It is used to calculate the MD5 hash of a string.
 strcmp() - It is used to compare two strings (Binary safe string
comparison (case-sensitive))
 strlen() - It is used to return the length of a string
 strtolower() - Convert the string in lowercase
 strtoupper() - Convert the strings in uppercase
 ucfirst() - Make the first character of the string to uppercase
 ucwords() - Make the first character of each word in a string to
uppercase

Andargachew A. [HiLCoE] 11/24/2023

88 Server Side Scripting (PHP)
5. PHP Form Handing

 To collect user inputs submitted through a form using the PHP

super-global variables
 $_GET
 $_POST and
 $_REQUEST

Andargachew A. [HiLCoE] 11/24/2023

89

 The GET Method

 It sends the encoded user information appended to the page
request.
 The page and the encoded information are separated by the ? character

 Never use GET method if you have password or other sensitive

information to be sent to the server.
 GET can't be used to send binary data, like images or word
documents, to the server.
 The data sent by GET method can be accessed using
QUERY_STRING environment variable.
 The PHP provides $_GET associative array to access all the sent
information using GET method

Andargachew A. [HiLCoE] 11/24/2023

90

 The POST Method

 The POST method transfers information via HTTP headers. The
information is encoded as described in case of GET method and put
into a header called QUERY_STRING.
 The POST method does not have any restriction on data size to be sent.
 The POST method can be used to send ASCII as well as binary data.
 The data sent by POST method goes through HTTP header so security
depends on HTTP protocol. By using Secure HTTP you can make sure
that your information is secure.
 The PHP provides $_POST associative array to access all the sent
information using POST method.

Andargachew A. [HiLCoE] 11/24/2023

91

 The $_REQUEST variable

 The PHP $_REQUEST variable contains the contents of both
$_GET, $_POST, and $_COOKIE.
 The PHP $_REQUEST variable can be used to get the result from
form data sent with both the GET and POST methods.
 Here $_PHP_SELF variable contains the name of self script in
which it is being called.

Andargachew A. [HiLCoE] 11/24/2023

92 Server Side Scripting (PHP)
6. PHP Cookies and Session

 PHP COOKIE
 A cookie is a small file with the maximum size of 4KB that the web
server stores on the client computer.
 Once a cookie has been set, all page requests that follow return the
cookie name and value.
 A cookie can only be read from the domain that it has been issued
from.
 For example, a cookie set using the domain www.hilcoe.net can not be
read from the domain www.aau.edu.et
 A cookie created by a user can only be visible to them. Other users
cannot see its value.

Andargachew A. [HiLCoE] 11/24/2023

93

 Why and When to use Cookies

 Http is a stateless protocol; cookies allow us to track the state of the
application using small files stored on the user’s computer.
 The path were the cookies are stored depends on the browser.

 Personalizing the user experience – this is achieved by allowing

users to select their preferences.
 The page requested that follow are personalized based on the set
preferences in the cookies.
 Tracking the pages visited by a user

Andargachew A. [HiLCoE] 11/24/2023

94

 Creating Cookie
 A cookie is created with the setcookie() function.

setcookie (name, value, expire, path,

domain, secure, httponly);
 Only the name parameter is required. All other parameters are optional.

 Note: The setcookie() function must appear BEFORE the <html>

tag.
 Warning: Don't store sensitive data in cookies since it could
potentially be manipulated by the malicious user.
 To store the sensitive data securely use sessions instead.

Andargachew A. [HiLCoE] 11/24/2023

95

 Accessing Cookies Values

 The PHP $_COOKIE superglobal variable is used to retrieve a cookie
value.
 It typically an associative array that contains a list of all the cookies values
sent by the browser in the current request, keyed by cookie name.
 It's a good practice to check whether a cookie is set or not before
accessing its value.
 To do this you can use the PHP isset() function, like this:
// Verifying whether a cookie is set or not
if(isset($_COOKIE["username"])) { . . . }
 Delete Cookie
 To delete a cookie, use the setcookie() function with an expiration date in
the past:

Andargachew A. [HiLCoE] 11/24/2023

96

 PHP SESSION
 A session is a global variable stored on the server.
 Each session is assigned a unique id which is used to retrieve stored
values.
 Whenever a session is created, a cookie containing the unique
session id is stored on the user’s computer and returned with
every request to the server.
 If the client browser does not support cookies, the unique php session id
is displayed in the URL.
 Sessions have the capacity to store relatively large data compared
to cookies.

Andargachew A. [HiLCoE] 11/24/2023

97

 The session values are automatically deleted when the browser is

closed.
 Just like the $_COOKIE array variable, session variables are stored
in the $_SESSION array variable.
 Just like cookies, the session must be started before any HTML tags.

Andargachew A. [HiLCoE] 11/24/2023

98

 Why and When to use Sessions?

 To store important information such as the user id more securely
on the server where malicious users cannot temper with them.
 To pass values from one page to another.
 It is alternative to cookies on browsers that do not support cookies.
 To store global variables in an efficient and more secure way
compared to passing them in the URL.

Andargachew A. [HiLCoE] 11/24/2023

99

 Creating a Session
 In order to create a session, you must first call the PHP session_start
function and then store your values in the $_SESSION array
variable.
 Destroying session Variables
 The session_destroy() function is used to destroy the whole PHP
session variables.
 If you want to destroy only a session single item, you use the unset()
function.
session_destroy(); //destroy entire session

unset($_SESSION['product']);//destroy product session item

Andargachew A. [HiLCoE] 11/24/2023

100 Server Side Scripting (PHP)
7. PHP and MySQL Database

 PHP and MySQL database

 MySQL is the most popular database system used with PHP.
 MySQL is a database system used on the web
 MySQL is a database system that runs on a server
 MySQL is ideal for both small and large applications
 MySQL is very fast, reliable, and easy to use
 MySQL uses standard SQL
 MySQL compiles on a number of platforms
 MySQL is free to download and use
 MySQL is developed, distributed, and supported by Oracle Corporation

Andargachew A. [HiLCoE] 11/24/2023

101

 PHP Connects to MySQL

 PHP 5 and later can work with a MySQL database using:
 MySQL
 MySQLi extension (the "i" stands for improved)
 PDO (PHP Data Objects)

 PHP PDO
 The PHP Data Objects (PDO) defines a lightweight interface for
accessing databases in PHP.
 It provides a data-access abstraction layer for working with databases
in PHP.
 It defines consistent API for working with various database systems.

Andargachew A. [HiLCoE] 11/24/2023

102

 Following table shows a brief comparison

of PDO::exec, PDO::query and PDO::prepare:

Andargachew A. [HiLCoE] 11/24/2023

103

 PHP PDO query

 Create a connection
 The following variables are used to create a connection string to the
database.
$servername= "mysql:host=localhost;dbname=mydb";
$username= "user12";
$password= "12user";
 The servername is the Data Source Name, which contains the
information required to connect to the database.
$conn= new PDO($servername, $username, $password);
 Close connection
$conn=null;

Andargachew A. [HiLCoE] 11/24/2023

104

 PDO: Sending SQL Queries

 We can use $conn->exec, $conn->query and $conn->prepare
methods to send SQL queries:
 PDO::exec executes an SQL statement and return the number
of affected rows.
 You can use this method to execute any SQL query where you don’t
expect a result set, so this method must not use to SELECT rows
from a database

Andargachew A. [HiLCoE] 11/24/2023

105

 PDO::query executes an SQL statement, returning a result set as

a PDOStatement object.
 You must properly escape query data if it is coming from an
untrused source to avoid SQL injection.
 To check the affected rows we need to use
the PDOStatement::rowCount() method:

Andargachew A. [HiLCoE] 11/24/2023

106

 PDO::prepare prepares a statement for execution and returns

a PDOStatement object.
 You must use prepared statement if data is coming from an
untrusted source, such as from a web form, to prevent an SQL
injection attack.
 After binding the form parameters and executing the query you can
run the PDOStatement methods,
 such as
 rowCount(),
 fetch or
 fetchAll etc:

Andargachew A. [HiLCoE] 11/24/2023

107

 How PDO Prepared Statements Work

 PDO prepared statements work like this:
1. Prepare an SQL query with empty values as placeholders with either a
question mark or a variable name with a colon preceding it for each
value
2. Bind values or variables to the placeholders
3. Execute query simultaneously

Andargachew A. [HiLCoE] 11/24/2023

108 Server Side Scripting (PHP)
8. PHP Files and Input Output

 Opening and Closing Files

 The PHP fopen() function is used to open a file.
 It requires two arguments stating first the file name and then mode in
which to operate.
 If an attempt to open a file fails then fopen returns a value
of false otherwise it returns a file pointer which is used for further
reading or writing to that file.
 The PHP fclose() function is used to close a file.
 After making a changes to the opened file it is important to close it with
the fclose() function.
 The fclose() function requires a file pointer as its argument and then
returns true when the closure succeeds or false if it fails.

Andargachew A. [HiLCoE] 11/24/2023

109

Mode Purpose

r Opens the file for reading only. Places the file pointer at the beginning of the file.

r+ Opens the file for reading and writing. Places the file pointer at the beginning of the file.

w Opens the file for writing only. Places the file pointer at the beginning of the file. and
truncates the file to zero length. If files does not exist then it attempts to create a file.

w+ Opens the file for reading and writing only. Places the file pointer at the beginning of the
file. and truncates the file to zero length. If files does not
exist then it attempts to create a file.

a Opens the file for writing only. Places the file pointer at the end of the file. If files does not
exist then it attempts to create a file.

a+ Opens the file for reading and writing only. Places the file pointer at the end of the file. If
files does not exist then it attempts to create a file.
Andargachew A. [HiLCoE] 11/24/2023
110

 Reading a file
 Once a file is opened using fopen() function it can be read with a function
called fread().
 This function requires two arguments.
 These must be the file pointer and the length of the file expressed in bytes.
 The files length can be found using the filesize() function which takes the
file name as its argument and returns the size of the file expressed in bytes.
 So here are the steps required to read a file with PHP.
 Open a file using fopen() function.
 Get the file's length using filesize() function.
 Read the file's content using fread() function.
 Close the file with fclose() function.

Andargachew A. [HiLCoE] 11/24/2023

111

 Writing a file
 A new file can be written or text can be appended to an existing file
using the PHP fwrite() function.
 This function requires two arguments specifying a file pointer and
the string of data that is to be written.
 Optionally a third integer argument can be included to specify the
length of the data to write.
 If the third argument is included, writing would will stop after the
specified length has been reached.

Andargachew A. [HiLCoE] 11/24/2023

112 Server Side Scripting (PHP)
9. PHP Files Inclusion

 You can include the content of a PHP file into another PHP file
before the server executes it.
 There are two PHP functions which can be used to included one
PHP file into another PHP file.
 The include() Function
 The require() Function
 This helps in creating functions, headers, footers, or elements that
can be reused on multiple pages.
 Easy to change the layout of complete website with minimal effort.

Andargachew A. [HiLCoE] 11/24/2023

113

 The include() Function

 The include() function takes all the text in a specified file and copies
it into the file that uses the include function.
 If there is any problem in loading a file then the include() function
generates a warning but the script will continue execution.

Andargachew A. [HiLCoE] 11/24/2023

114

 The require() Function

 The require() function takes all the text in a specified file and copies
it into the file that uses the include function.
 If there is any problem in loading a file then the require() function
generates a fatal error and halt the execution of the script.
 So there is no difference in require() and include() except they
handle error conditions.
 It is recommended to use the require() function instead of include(),
because scripts should not continue executing if files are missing or
misnamed.

Andargachew A. [HiLCoE] 11/24/2023

115 Server Side Scripting (PHP)
10. PHP Date and Math Function

 The PHP Date Functions

 The PHP date() function formats a timestamp to a more readable date
and time.
 The computer stores dates and times in a format called UNIX
Timestamp, which measures time as a number of seconds since the
beginning of the Unix epoch (midnight Greenwich Mean Time on
January 1, 1970 i.e. January 1, 1970 00:00:00 GMT ).
 Syntax: date(format, timestamp);
 PHP time() function
 The time() function is used to get the current time as a Unix timestamp
 The number of seconds since the beginning of the Unix epoch: January 1 1970
00:00:00 GMT.

Andargachew A. [HiLCoE] 11/24/2023

116

 Get a Date
 The format parameter of the date() function specifies hrequiredow to format
the date (or time).
 Here are some characters that are commonly used for dates:
 d - Represents the day of the month (01 to 31)
 D – Represents day of the week (Mon to Sun).
 m - Represents a month (01 to 12)
 M – Represents month in text,(Jan to Dec).
 Y - Represents a year (in four digits)
 y – Represents year in two digits (08 or 14).
 l (lowercase 'L') - Represents the day of the week
 Other characters, like"/", ".", or "-" can also be inserted between the
characters to add additional formatting.

Andargachew A. [HiLCoE] 11/24/2023

117

 Get a Time
 Here are some characters that are commonly used for times:
 H - 24-hour format of an hour (00 to 23)
 h - 12-hour format of an hour with leading zeros (01 to 12)
 i - Minutes with leading zeros (00 to 59)
 s - Seconds with leading zeros (00 to 59)
 a - Lowercase Ante meridiem and Post meridiem (am or pm)
 A - Uppercase Ante meridiem and Post meridiem (AM or PM)

Andargachew A. [HiLCoE] 11/24/2023

118

 PHP Math Function

 PHP provides many predefined math constants and functions that can
be used to perform mathematical operations.
 The abs() function returns absolute value of given number.
 The round() function rounds to its nearest integer:
 The sqrt() function returns square root of given argument.
 The decbin() function converts decimal number into binary.
 The pow() function return x raised to the power of y.
 The rand() function is used to generates a random integer.

Andargachew A. [HiLCoE] 11/24/2023

119 Server Side Scripting (PHP)
11. PHP OOP

 Object-oriented programming is about creating objects that

contain both data and functions.
 Procedural programming is about writing procedures or functions
that perform operations on the data.
 Object-oriented programming has several advantages over
procedural programming:
 OOP is faster and easier to execute
 OOP provides a clear structure for the programs
 OOP helps to keep the PHP code DRY "Don't Repeat Yourself", and
makes the code easier to maintain, modify and debug
 OOP makes it possible to create full reusable applications with less
code and shorter development time

Andargachew A. [HiLCoE] 11/24/2023

120

 Classes and objects are the two main aspects of object-oriented

programming.
 Look at the following illustration to see the difference between
class and objects:

 So, a class is a template for objects, and an object is an instance

of a class.
Andargachew A. [HiLCoE] 11/24/2023
121

 Define a Class
 A class is defined by using the class keyword, followed by the name
of the class and a pair of curly braces ({}).
 Note: In a class, variables are called properties and functions are
called methods!
 All its properties and methods go inside the braces:

Andargachew A. [HiLCoE] 11/24/2023

122

 Define Objects
 Each object has all the properties and methods defined in the class,
but they will have different property values.
 Objects of a class is created using the new keyword.

Andargachew A. [HiLCoE] 11/24/2023

123

 PHP - The $this Keyword

 The $this keyword refers to the current object, and is only available
inside methods.
 We can change the value of the $name property using two ways:

1. Inside the class (by adding a 2. Outside the class (by directly
set_name() method and use changing the property value):
$this):

Andargachew A. [HiLCoE] 11/24/2023

124

 The __construct Function

 A constructor allows you to initialize an object's properties upon
creation of the object.
 If you create a __construct() function, PHP will automatically call this
function when you create an object from a class.
 Notice that the construct function starts with two underscores (__)!

 The __destruct Function

 A destructor is called when the object is destructed or the script is
stopped or exited.
 If you create a __destruct() function, PHP will automatically call this
function at the end of the script.

Andargachew A. [HiLCoE] 11/24/2023

125

 Access Modifiers
 Properties and methods can have access modifiers which control
where they can be accessed.
 There are three access modifiers:
 public - the property or method can be accessed from everywhere.
(This is default)
 protected - the property or method can be accessed within the class and
by classes derived from that class
 private - the property or method can ONLY be accessed within the
class

Andargachew A. [HiLCoE] 11/24/2023

126 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

127 Asynchronous JavaScript and XML
(AJAX)
1. Basic Terms and Concepts
 Asynchronous JavaScript And XML (AJAX)
 AJAX is a technique for creating fast and dynamic web pages.
 AJAX is about updating parts of a web page, without reloading the
whole page.
 AJAX allows web pages to be updated asynchronously by
exchanging small amounts of data with the server behind the scenes.
 This means that it is possible to update parts of a web page, without
reloading the whole page.
 Classic web pages, (which do not use AJAX) must reload the entire page if
the content should change.

 Examples of applications using AJAX:

 Google Maps, Gmail, Youtube, and Facebook tabs.

Andargachew A. [HiLCoE] 11/24/2023

128

 Why use AJAX?

 It allows developing rich interactive web applications just like
desktop applications.
 Validation can be performed done as the user fills in a form without
submitting it.
 This can be achieved using auto completion. The words that the user
types in are submitted to the server for processing. The server responds
with keywords that match what the user entered.
 It can be used to populate a dropdown box depending on the value
of another dropdown box

Andargachew A. [HiLCoE] 11/24/2023

129

 Data can be retrieved from the server and only a certain part of
a page updated without loading the whole page.
 This is very useful for web page parts that load things like
 Tweets
 Comments
 Users visiting the site etc

Andargachew A. [HiLCoE] 11/24/2023

130 Asynchronous JavaScript and XML
(AJAX)
2. Request and Response

1. AJAX - The XMLHttpRequest Object

 The XMLHttpRequest object can be used to exchange data with a
web server behind the scenes.
 This means that it is possible to update parts of a web page, without
reloading the whole page.
 Create an XMLHttpRequest Object
 All modern browsers (Chrome, Firefox, IE7+, Edge, Safari, Opera) have
a built-in XMLHttpRequest object.
 Syntax for creating an XMLHttpRequest object:

variable = new XMLHttpRequest();

Andargachew A. [HiLCoE] 11/24/2023

131

 Old Browsers (IE5 and IE6)

 Old versions of Internet Explorer (5/6) use an ActiveX object instead of
the XMLHttpRequest object:

variable = new ActiveXObject("Microsoft.XMLHTTP");

Andargachew A. [HiLCoE] 11/24/2023

132

 XMLHttpRequest Object Methods

Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method, url, async, Specifies the request
user, psw) method: the request type GET or POST
url: the file location
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password

send() Sends the request to the server

Andargachew A. [HiLCoE] Used for GET requests 11/24/2023
133

2. Define a function to be executed: onreadystatechange

Property
 With the XMLHttpRequest object you can define a function to be
executed when the request receives an answer.
 The function is defined in the onreadystatechange property of the
XMLHttpRequest object:

Andargachew A. [HiLCoE] 11/24/2023

134

3. AJAX - Send a Request To a Server

 To send a request to a server, we use the open() and send() methods
of the XMLHttpRequest object:

xhttp.open("GET", "info.php", true);

xhttp.send();
Method Description
open(method, url, Specifies the type of request
async)
method: the type of request: GET or POST
url: the server (file) location
async: true (asynchronous) or false (synchronous)
send() Sends the request to the server (used for GET)
send(string) Sends the request to the server (used for POST)
Andargachew A. [HiLCoE] 11/24/2023
135

 Get Requests
 Example
xhttp.open("GET", "demo.php", true);
xhttp.send();
 If you want to send information with the GET method, add the
information to the URL:

xhttp.open("GET", "demo.php?fname=Lema&sex=male", true);

xhttp.send();

Andargachew A. [HiLCoE] 11/24/2023

136

 Post Requests
 Example
xhttp.open("POST", “test.php", true);
xhttp.send();
 To POST data like an HTML form, add an HTTP header
with setRequestHeader(). Specify the data you want to send in
the send() method:

xhttp.open("POST", "test.php", true);

xhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xhttp.send("fname=Lema&sex=male");

Andargachew A. [HiLCoE] 11/24/2023

137 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

138

Andargachew A. [HiLCoE] 11/24/2023

139

Andargachew A. [HiLCoE] 11/24/2023

140

Andargachew A. [HiLCoE] 11/24/2023

141

Andargachew A. [HiLCoE] 11/24/2023

142

Andargachew A. [HiLCoE] 11/24/2023

143

Andargachew A. [HiLCoE] 11/24/2023

144

Andargachew A. [HiLCoE] 11/24/2023

145

Andargachew A. [HiLCoE] 11/24/2023

146 Contents

1. World Wide Web

2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. Client Side Scripting (JavaScript – JS)
5. Server-Side Scripting (PHP)
6. Asynchronous JavaScript and XML (AJAX)
7. Introduction to XML

Andargachew A. [HiLCoE] 11/24/2023

147 Introduction to XML
1. Basic Terms and Concepts

 XML is a software- and hardware-independent tool for storing

and transporting data.
 XML stands for eXtensible Markup Language
 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive
 XML is a W3C Recommendation

Andargachew A. [HiLCoE] 11/24/2023

148

 The Difference Between XML and HTML

 XML and HTML were designed with different goals:
 XML was designed to carry data - with focus on what data is
 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags are

Andargachew A. [HiLCoE] 11/24/2023

149 Introduction to XML
2. Building block of XML

 Seen from a Document Type Definition (DTD) point of view, all XML
documents are made up by the following building blocks:
 Elements
 It is the main building blocks of both XML and HTML documents.
 Attributes
 It provides extra information about elements.
 Entities
 Some characters have a special meaning in XML, like the less than sign (<)
that defines the start of an XML tag
 PCDATA (Parsed Character Data)
 The text will be examined by the parser for entities and markup.
 CDATA (Character Data)
 Text that will NOT be parsed by a parser
Andargachew A. [HiLCoE] 11/24/2023
150 Introduction to XML
3. XML Schema

 An XML Schema describes the structure of an XML document.

 The XML Schema language is also referred to as XML Schema
Definition (XSD).
 The purpose of an XML Schema is to define the legal building
blocks of an XML document:
 the elements and attributes that can appear in a document
 the number of (and order of) child elements
 data types for elements and attributes
 default and fixed values for elements and attributes

Andargachew A. [HiLCoE] 11/24/2023

151 Introduction to XML
4. XML Web Service

 Web services are web application components.

 Web services can be published, found, and used on the Web.
 WSDL
 WSDL stands for Web Services Description Language
 WSDL is an XML-based language for describing Web services.
 WSDL is a W3C recommendation
 SOAP
 SOAP stands for Simple Object Access Protocol
 SOAP is an XML based protocol for accessing Web Services.
 SOAP is based on XML
 SOAP is a W3C recommendation
Andargachew A. [HiLCoE] 11/24/2023
152

 RDF
 RDF stands for Resource Description Framework
 RDF is a framework for describing resources on the web
 RDF is written in XML
 RDF is a W3C Recommendation
 RSS
 RSS stands for Really Simple Syndication
 RSS allows you to syndicate your site content
 RSS defines an easy way to share and view headlines and content
 RSS files can be automatically updated
 RSS allows personalized views for different sites
Andargachew A. [HiLCoE] 11/24/2023
 RSS is written in XML
153

Questions?

Andargachew A. [HiLCoE] 11/24/2023

154

Thank You

Andargachew A. [HiLCoE] 11/24/2023