S4 - Module 1- Introduction to web – php

# Internet: is a global system of interconnected comp networks that use the standard
Internet protocol suite(TCP/IP) to serve billions of users worldwide
#web: Web consists of billions of clients and server connected through wires and
wireless networks.
- The web clients make requests to web server. The web server receives the request,
finds the resources and return the response to the client.
- When a server answers a request, it usually sends some type of content to the client.
- The client uses web browser to send request to the server.
- The server send instructions written in HTML(HyperText Markup Language)

*WWW operation:
- User enters the URL (say, http://www.tutorialspoint.com) of the web page in the
address bar of web browser.
-Then browser requests the Domain Name Server for the IP address corresponding to
www.tutorialspoint.com.
-After receiving IP address, browser sends the request for web page to the web server using
HTTP protocol which specifies the way the browser and web server communicates.
-Then web server receives request using HTTP protocol and checks its search for the
requested web page. If found it returns it back to the web browser and close the HTTP
connection.
-Now the web browser receives the web page, It interprets it and display the contents of
web page in web browser’s window.

*web page: is a multimedia file which can be stored on a web server.

-it can include text, graphics, hypertext link, video and audio file
-there are 2 types of webpages they are;
 1.static web page: -when a server receives a request for a web page
-then the server sends the response to the client without doing any additional
process.
-And these web pages are seen through a web browser

2.dynamic web page: -the Content of pages is different for different visitors.
- It takes more time to load than the static web page.
-Dynamic web pages are used where the information is changed frequently,
eg: stock prices, weather information, etc.
*between Static and Dynamic Web Page
static dynamic
-Pages will remain same until -Content of pages are different
someone changes it manually for different visitors
-Static Web Pages are simple -Dynamic web pages are
Information are change rarely complicated
-less time for loading than dynamic -Information are change
web page frequently
-database is not used. more time for loading
-database is used.

*scripting language: Scripting languages are like programming languages that allow
us to write programs in form of script.
- These scripts are interpreted not compiled and executed line by line.
-Scripting language is used to create dynamic web pages.
-types of scripting language
1.server side scripting . 2.client side scripting

*Web server: is a computer where the web content is stored.web server is used to host the web
 sites but there are other web server also available like gaming,storage,email,etc
# WWW Architecture: www are commonly known as World Wide Web.it is created in
1989.
*Working of WWW: -The World Wide Web is based on several different technologies: Web
browsers, Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP).
-A Web browser is used to access webpages.
-Web browsers can be defined as programs which display text, data, pictures, animation and
video on the Internet.
- Hyperlinked resources on the World Wide Web can be accessed using software interface
provided by Web browsers.
-Web browsers can be used for several tasks including conducting searches, mailing,
transferring files, and much more.
-Some of the commonly used browsers are Internet Explorer, Opera Mini, Google Chrome.
*Components of Web: There are 3 components of web:
1. Uniform Resource Locator (URL): is used to specify address on www.
2.HyperText Transfer Protocol (HTTP): specifies communication of browser and server.
3.Hyper Text Markup Language (HTML): defines structure, organisation and content of
webpage
“bakki mukaliulndee www ,web page ennu oka parayunnathu www architecture thanna annu”

#Fundamentals of HTML
-HTML stands for Hypertext markup language
-it is the most widely used lang to write webpage
-we can write html with any available text editors .
-HTML is the language that allows text and graphics to be displayed as Web pages.
-HTML uses a series of Special Codes called Tags.
-Tags tell a browser application such as Internet Explorer how to display the web page.
Tags are surrounded with angle brackets”<> “along with some words
Eg:<title>
-open tag:<title>
-close tag:</title>
*structure of HTML document: A html file has two parts
1.Head part: <head>..........</head>
-head section can be viewed in the head tag
2.body part: <body>...........</body>
-body section encloses the info to be displayed in a web page
Eg; <html>
Head part
<head>
<title> web page</title>
</head>
Body part
<body>
<h1>hello</h1>
</body>
 </html>

*4 key concepts of HTML

1.Elements: all html are made up of element . an element contain 2 tags open tag and
close tag
2.tags:
3.attribute and value: is used to define the characteristics of an element and it is placed
inside the element’s opening tag
4.nesting: is a arrangement of the element in such a way that there is no overlapping of
element

# Text formatting tags

1. Bold text: if you write anything within <b>....</b> .it show in bold letters
Eg; <b>hello</b>
hello
2.Italic: if you write anything within <i>....</i> .it show in italic letters
Eg;
3.HTML marked format: if you want to mark or hightlight a text use <mark>....</mark>
Eg:hello
4. Underlined Text:If you write anything within <u>.........</u> element, is shown in
underlined text
Eg:hello
5. Strike Text: Anything written within <strike>.. ..</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
eg:hello
6. Monospaced Font: If you want that each letter has the same width then you should write
the content within <tt>............</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because different
letters have different width. (for example: 'w' is wider than 'i'). Monospaced Font provides
similar space among every letter.
Example: Hello <tt>Write Your First Paragraph in monospaced font.</tt>
Output: Hello Write Your First Paragraph in monospaced font.
7. Superscript Text: If you put the content within ^... element, is shown in
superscript; means it is displayed half a character's height above the other characters.
Example: a ^2.
Output:a2.
8.Subscript Text: If you put the content within _{..............} element, is shown in
subscript; means it is displayed half a character's height below the other characters..
Example: H _2.
Output:H2
9. Deleted Text: Anything that puts within <del>........</del> is displayed as deleted text
Example: <p>Hello <del>Delete your first paragraph.</del>
Output: Hello Delete your first paragraph.
10. Inserted Text: Anything that puts within <ins>........</ins> is displayed as inserted text.
 Example: <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins>
Output: Delete your first paragraph.Write another paragraph.

11.Larger Text: If you want to put your font size larger than the rest of the text then put
the content within <big>........</big>. It increase one font size larger than the previous
one.
12. Smaller Text: If you want to put your font size smaller than the rest of the text then put
the content within<small>........./small>tag. It reduces one font size than the previous
one.
*HTML heading: there are six diff heading which is <h1> to<h6>.h1 is larger heading
tag and h6 is the smallest heading tag bakki nammal thanna ezhuthuka pinna
eg:<h1>hello</h1>.....

*HTML paragraph: <p> is used to define a paragraph in a webpage

*Horizontal rule: use the <hr> tag to display line across the screen
Note; horizontal tag has no ending tag
<hr> tags are;
-Width: to specify width of the line. width can specify in pixel or percentage
-size:
-align: specifies the alignment of the line and center is the default alignment

#marquee: The <marquee> tag is a container tag of HTML is implemented for creating scrollable
text or images within a web page from either left to right or vice versa, or top to bottom or vice
versa

1.width: This specifies the width of the marquee. This can be a value like 10 or 20% etc.
2.height: This specifies the height of the marquee. This can be a value like 10 or 20% etc.
3.direction: This specifies the direction in which marquee should scroll. This can be a
value like up, down, left or right.
4.behavior: This specifies the type of scrolling of the marquee. This can have a value
like scroll, slide and alternate.
5.scrolldelay: This specifies how long to delay between each jump. This will have a value
like 10 etc.
6.scrollamount: This specifies the speed of marquee text. This can have a value like 10 etc.
7.loop: This specifies how many times to loop. The default value is INFINITE, which means
that the marquee loops endlessly.
8.bgcolor: This specifies background color in terms of color name or color hex value.
9.hspace: This specifies horizontal space around the marquee. This can be a value like 10
or 20% etc.
10.vspace: This specifies vertical space around the marquee. This can be a value like 10 or
20% etc.
some example of are; scroll up, scroll down, scroll left to right,scroll speed
#Inserting images: Html provide a tag <IMG> to insert in HTML pages.
-The <IMG> tag is an empty tag
-it means that it contain only list of attributes
-it has no closing tag
-following are imp attribute of<IMG>tag
• src - Specifies the path (url) to the image
• alt - Specifies an alternate text for the image
#HTML Hyperlink(linking)/HTML links: The anchor tag can be used to create a link to
another document.
-A hyperlink (or link) is a word, group of words, or image that you can click on to jump
to a new document or a new section within the current document.
-When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
-This type of text that provides linking is called "Hyper Text".
Eg; <a href=”url”>link text </a>
A=create an anchor
Herf=target url
-two types of linking
1. External linking: is used to interconnect two html webpages.
- When you want to navigate to some other page or any other URL by clicking
on a link on webpage, external links are created.
-An external link can be created by using anchor tag in html web page
2. Internal linking: is used in html page to navigate properly in the webpage.
- If you want to go to any specific location in the same page by clicking on a link,
you can create an internal link in the webpage.
- <a> tag is used for link creation in html page
#HTML Lists: are used to specify lists of information.
- All lists may contain one or more list elements.
- There are three different types of HTML lists:
1. Ordered List or Numbered List (ol): all the list items are marked with numbers by default.
- It is known as numbered list also. The ordered list starts with <ol> tag and the list items
start with <li> tag.
Eg; 1.albert 2.appu...
2. Unordered List or Bulleted List (ul): all the list items are marked with bullets.
-It is also known as bulleted list also.
-The list starts with <ul> tag and list items start with the <li> tag.
Eg;
• Aries
• Bingo
3.Description List or Definition List (dl): This arranges your items in the same way as they are
arranged in a dictionary.
 -Definition List makes use of following three tags.
• <dl> − Defines the start of the list
• <dt> − A term
• <dd> − Term definition
• </dl> − Defines the end of the list
#HTML tables: is used to display data in tabular form (row * column). There can be
Many columns in a row
-We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
-In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table
data is defined by <td> tags
-most imp tags related to table creation are;
1.<table>.....</table>: It defines a table. Most important attributes of table tag are;
(i) Allign;- Takes LEFT, RIGHT OR CENTER as its values and aligns the table with
respect to surrounding information.
(ii) Background: - The value of this attribute has to be an image URL. This image is
displayed as the background of the table.
(iii) BgColor: - Specifies the background color.
(iv) Border: - It makes a border around the table. The thickness of this border
depends on the number of pixels supplied as its value.
(v) BorderColor:- Table borders can be coloured using his attribute.
(vi) CellPadding:- Its value supplied as number of pixels, denotes the amount of
space between the edge of the table and its contents.
(vii) Height: specifies the table height
(viii) Width:
2. <CAPTION>........ <CAPTION>: It defines the table caption.
-which gives the reader a content for the information in the tables.
-Table headings are called captions
-Captions can be provided to the table using the <caption> tag .
- It has an attribute ALIGN
ALIGN= BOTTOM will place the caption immediately below the table
TOP will place the caption immediately above the table.

3, <TR>.......</TR>: It defines a row in a table using <TR>...</TR> tags.

-Any special formatting like boldface or italics is done by including appropriate
formatting tags Inside the <TR>..... </TR> tags.
-An image can also displayed in a data cell.

4. <TD>........ </TD>: It is used to insert data into the table. Its attributes are;
(i) Align:
(ii) Valign:-Aligns the contents to the top, middle or bottom of the cell
 (ii) BGColor:
(iv) BorderColor:
(v) Rowspan:- To extend data cell across more than one row. Value has to be an integer
number.
(vi) COLSPAN: - To extend data cells across more than one columns Its value has to be
an integer
(vi) Height:- Specifies the height of the cell. (vii) Width:- Specifies the width of the cell.
(vii)width:
5<TH>.....</TH>: It defines a header cell in a table
#HTML frames: are used to divide your browser window into multiple sections
where each section can load a separate HTML document.
- A collection of frames in the browser window is known as a frameset.
-The window is divided into frames in a similar way the tables are organized: into
rows and columns

*Disadvantages of Frames
-There are few drawbacks with using frames, so it's never recommended to use frames in
Your webpages they are;
-Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
-Sometimes your page will be displayed differently on different computers due to
different screen resolution.
-The browser's back button might not work as the user hopes.
-There are still few browsers that do not support frame technology.
-Frames are generated by
1. frame document: the tag <body>is replaced by <frameset> tag , that describes the
sub htmldocument or frames that make up the page
2.frame tags: Name,height,width etc..
#HTML Forms: is used to collect user input. The user input is most often sent to a server for
Processing
Eg:

First name:
John

Last name:
Doe

-Form attributes:
1.Action: Backend script ready to process your passed data.
2.Method: Method to be used to upload data. The most frequently used are GET and
POST methods
3.Target: Specify the target window or frame where the result of the script will be
 displayed. It takes values like _blank, _self, _parent etc
4.Enctype: You can use the enctype attribute to specify how the browser encodes the data
before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in
simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of
files like image, word file etc

*HTML Form Controls: There are different types of form controls that you can use to
collect data
• Text Input Controls: thaza explain unde
• Checkboxes Controls: used when more than one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to checkbox
• Radio Box Controls: are used when out of many options, just one option is required
to be selected. They are also created using HTML <input> tag but type attribute is set
to radio
• Select Box Controls: which provides option to list down various options in the form
of drop down list, from where a user can select one or more options.
• File Select boxes: user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input>
element but type attribute is set to file.
• Hidden Controls:
• Clickable Buttons:
• Submit and Reset Button:

$ Text Input Controls:There are three types of text input used on forms −
1.Single-line text input controls − This control is used for items that require only
one line of user input, such as search boxes or names. They are created using
HTML <input> tag.
2.Password input controls − This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTMl <input>
tag.
3.Multi-line text input controls − This is used when the user is required to give
details that may be longer than a single sentence. Multi-line input controls are
created using HTML <textarea> tag.

module 2 – CSS

# CSS/Cascading Style Sheets: -CSS stands for Cascading Style Sheets

-it describes how HTML elements are to be displayed on screen, paper, or in other media
-it saves a lot of work. It can control the layout of multiple web pages all at once
 -External stylesheets are stored in CSS files
-is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes
*CSS Syntax: The CSS syntax comprises a set of rules. The rule-set has 3 parts, a selector, a
property and a value as shown below
Sy: h1 { color:blue; font-size:12px; }
- h1 is the selector’
-color and font-size are properties
-blue and 12px are values
*Advantages of CSS
o Saves time
o Easy maintenance
o Faster page loading.
o Platform Independence: It offers platform independence and also supports the latest
browsers.
o Multiple device compatibility: It allows you optimize content for more than one type of
devices.

*Adding Styles to HTML Elements

These are the three methods of implementing styling information to an HTML document.

• Inline styles - is used to apply a unique style to a single HTML element.

-uses the style attribute of an element
-The style attribute includes a series of CSS property and value pairs.
-Each ‘ property : value ‘ pair is separated by a semicolon ( ; ).
Eg; <p style="color:red;">
• Embedded style :- Embedded or internal style sheets only affect the document they are
embedded in.
-Embedded style sheets are defined in the <head> section of an HTML document using
the <style> tag..
• External style sheet :- An external style sheet is ideal when the style is applied to many
Pages
-External style sheets are the most flexible because with an external style sheet, you can
change the look of an entire website by updating just one file
-There are two ways of attaching external style sheets;
1.Linking External Style Sheets
2.Importing External Style Sheets

*css properties are;

1. initial: Changes all the properties applied to the element or the element's parent to
their initial value
2.inherit: Changes all the properties applied to the element or the element's parent to
their parent value
 3. unset: Changes all the properties applied to the element or the element's parent to
Their parent value if they are inheritable or to their initial value if not

Syntax; all: initial|inherit|unset;

*CSS Font: -CSS Font property is used to control the look of texts.
-By the use of CSS font property you can change the text size, color, style
and more.
-These are some important font attributes:
1.CSS Font color: This property is used to change the color of the text. (standalone attribute)
2. CSS Font family: This property is used to change the face of the font.
-can be divided in two types:
i)Generic family: It includes Serif, Sans-serif, and Monospace.
ii)Font family: It specifies the font family name like Arial, New Times
Roman etc.

3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and lightness
of the font.
“bakki ullathu onnu explain cheyanaaa”
*Text formatting: -used to format text and style text.
-types of text fromating;
1.Text-color: -is used to set the color of the text
-Text-color can be set by using the name “red” or hex value or by its RGB value
 2.Text Alignment: Text alignment property is used to set the horizontal alignment of
the text.
-The text can be set to left, right, centered and justified alignment
3. Text Decoration:- is used to add or remove decorations from the text.
-it can be underline, overline, line-through or none
4. Text Transformation: This property can be used to change cases of the text.
- It can be defined by using capitalize, uppercase, lowercase properties.
5. Word Spacing: This property can be used to give space between words
6. Letter Spacing: This property can be used to give space between characters
7. Line Height: This property can be used to give space between the lines.
-It can be defined by using line-height property
8. Line width:
9. Font Family: This property is used to provide various types of font-family names for
the selected text.
10. Text-shadow: This property can be used to give shadow for the text
*Text- pseudo classes: -are used to add special effects text.
-most commonly used pseudo-classes are;
1.link: Use this class to add special style to an unvisited link.
2.visited: Use this class to add special style to a visited link.
3.active: It is used to add style to an active element.
4.hover: It adds special effects to an element when the user moves the
mouse pointer over the element.
*CSS selectors: are used to select the content you want to style
-We can divide CSS selectors into five categories:
1. Simple selectors (select elements based on name, id, class)
2.Combinator selectors (select elements based on a specific relationship
between them)
3.Pseudo-class selectors (select elements based on a certain state)
4.Pseudo-elements selectors (select and style a part of an element)
5.Attribute selectors (select elements based on an attribute or attribute value)
#javascript:-is a powerful, object-based scripting language
- developed by Netscape.
- it is the world's most popular programming language.
-it is the programming language of the Web.
-it is easy to learn.
- It can be embedded directly into HTML pages.
-There are some rules while declaring a JavaScript variable (also known as identifiers).
1.Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )
sign.
2.After first letter we can use digits (0 to 9), for example value1.
 3.JavaScript variables are case sensitive, for example x and X are different
variables.

*javascript variables: There are two types of variables in JavaScript

1. local variable : is declared inside block or function. It is accessible within the function or
block only
2. global variable: is accessible from any function. A variable i.e. declared outside the
function or declared with window object is known as global variable
*Applications of Javascript Programming: is one of the most widely used
programming languages (Front-end as well as Back-end).
- it's presence in almost every area of software development.
- I'm going to list few of them here;
• Client side validation - This is really important to
verify any user input before submitting it
to the server and Javascript plays an important
role in validting those inputs at front-end
itself.
• Manipulating HTML Pages -. This helps in adding
and deleting any HTML tag very easily
using javascript.
• User Notifications - You can use Javascript to raise dynamic pop-ups on the
webpages to
give different types of notifications to your website visitors.
• Back-end Data Loading - Javascript provides Ajax library which helps in loading
back-end data while you are doing some other processing
• Presentations - JavaScript also provides the facility of creating presentations which
gives website look and feel.
• Server Applications - Node JS is built on Chrome's Javascript runtime for building
fast and scalable network applications. This is an event based library which helps in
developing very sophisticated server applications including Web Servers
*Javascript Data Types: JavaScript provides different data types to hold different types
Of values. There are two types of data types they are;
i)JavaScript primitive data types
ii)javascript non-primitive data types
*JavaScript Operators: are symbols that are used to
perform operations on operands. they are;
1. Arithmetic operators: are used to perform arithmetic operations on the operands.
$ + Addition 10+20 = 30
$ - Subtraction 20-10 = 10
$ * Multiplication 10*20 =
200
 $ / Division 20/10 =
2
$ % Modulus (Remainder)
20%10 = 0
$ ++ Increment var a=10;
a++; Now a = 11
$ -- Decrement var a=10;
a--; Now a = 9
2. comparison operator: compares the two operands.
$ == Is equal to 10==20 = false
$ === Identical (equal and of same type) 10==20 = false
$ != Not equal to 10!=20 = true
$ !== Not Identical 20!==20 = false
$ > Greater than 20>10 = true
$ >= Greater than or equal to 20>=10 = true
$ < Less than 20<10= false
$ <= Less than or equal to 20<=10 = false
3. The bitwise operators: perform bitwise operations on operands.
$ & Bitwise AND (10==20 & 20==33) = false
$ | Bitwise OR (10==20 | 20==33) = false
$ ^ Bitwise XOR (10==20 ^ 20==33) = false
$ ~ Bitwise NOT (~10) = -10
$ << Bitwise Left Shift (10<<2)=40
$ >> Bitwise Right Shift (10>>2) = 2
$ >>> Bitwise Right Shift with Zero (10>>>2) = 2
4.logical operation: The following operators are known as JavaScript logical operators

5. Assignment Operators: The following operators are known as JavaScript assignment

operators.
$ = Assign 10+10 = 20
$ += Add and assign
var a=10; a+=20; Now a = 30
$ -= Subtract and assign
var a=20; a-=10; Now a = 10
$ *= Multiply and assign
var a=10; a*=20; Now a = 200
$ /= Divide and assign
var a=10; a/=2; Now a = 5
$ %= Modulus and assign
var a=10; a%=2; Now a = 0
1. Special Operators: The following operators are known as JavaScript special
 operators.
$ Comma- Operator allows multiple expressions to be evaluated as single
statement
$ delete- Delete Operator deletes a property from the object
$ new-creates an instance (object)
*JS Decision Control Statements: Sometimes, we may want to perform different
actions for different decisions. We can use decision control statements in our code to do
this. They are also called conditional statements.
1. if Statement: if we want to execute some code only if a specified condition is true.
Syntax
if (condition)
{
code to be executed if condition is true
}
N.B. that if is written in lowercase letters. Using uppercase letters (IF) will generate a JS
error!
2. if…else Statement
If we want to execute some code if a condition is true and another code if the condition is
not true, use the if….else statement.
Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

3. if…else nesting
We should use the if….else nesting if we want to select one of many sets of lines to execute.
Syntax
if (condition1) {
code to be executed if condition1 is true
}
else if (condition2) {
code to be executed if condition2 is true
}
else {
code to be executed if condition1 and condition2 are not true
}
4. switch Statement
We should use the switch statement if we want to select one of many blocks of code to be
executed.
Syntax
switch(n)
{
case 1:
execute code block 1
break;
case 2:
 execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
This is how it works: First we have a single expression n (most often a variable), that is
evaluated once. The value of the expression is then compared with the values for each case in
the structure. If there is a match, the block of code associated with that case is executed.
Use break to prevent the code from running into the next case automatically.
*JavaScript loops : if you want to run the same code over and over again, each time with a
different value.
-There are four types of loops in JavaScript;
1)For loop: iterates the elements for the fixed number of times. It should be used if number of
iteration is known. The syntax of for loop is given below.
for (initialization; condition; increment)
{
code to be executed
}
2)while loop: iterates the elements for the infinite number of times. It should be used if number of
iteration is not known. The syntax of while loop is given below.
while (condition)
{
code to be executed
}
3)do while loop: iterates the elements for the infinite number of times like while loop. But, code
is executed at least once whether condition is true or false. The syntax of do while loop is given
below.
Do

code to be executed

while (condition);

4) for in loop: is used to iterate the properties of an object.

*JavaScript Functions:- is a block of code designed to perform a particular task.
-is defined with the function keyword, followed by a name, followed by parentheses ().
-Function names can contain letters, digits, underscores, and dollar signs (same rules as
variables).
-The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
-The code to be executed, by the function, is placed inside curly brackets: {}
 Sy;
function name(parameter1, parameter2, parameter3)
{
// code to be executed
}

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.
1.Code reusability: We can call a function several times so it save coding.
2.Less coding: It makes our program compact. We don’t need to write many lines of code
each time to perform a common task.
*JavaScript arrays: are used to store multiple values in a single variable.
-An array is a special variable, which can hold more than one value at a time.
-If you have a list of items (a list of car names, for example), storing the cars in single
Variable could look like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Syntax:
const array_name = [item1, item2, ...];
eg; const cars = ["Saab", "Volvo", "BMW"];
*javaScript event:- is a interaction with HTML is handled through events

-when tha page loads,it is called an event.when the user clicks a button that click too is
an event .other example include events like pressing any key,closing a window,resizing
a window etc
-HTML events are”things” that happen to HTML element.

*Javascript popup boxes: are used to display the message or notification to the user.
-types of popup boxes are;
1.Alert Box: is often used if you want to make sure information comes through to the
User. When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
window.alert("sometext");
2. Confirm Box: is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to
Proceed.If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.
Syntax
window.confirm("sometext");
3. Prompt Box: is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed
after entering an input value.
Syntax
 window.prompt("sometext","defaultText");
*prompt(): - method displays a dialog box that prompts the visitor for input.
-A prompt box is often used if you want the user to input a value before entering a page.
-The prompt() method returns the input value if the user clicks "OK". If the user clicks
"cancel" the method returns null.
eg;

*confirm() :-method displays a dialog box with a specified message, along with an OK and
a Cancel button.
-A confirm box is often used if you want the user to verify or accept something.
“Note: The confirm box takes the focus away from the current window, and forces the
browser to read the message.”
-The confirm() method returns true if the user clicked "OK", and false otherwise.
*built-in objects:

*build in function: -is used to perform specific function.they are;

1.eval () function:- is used to convert a string into a numeric value
2.parselnt () function:- is used to convert a string value into an integer
-it return the 1st integer contained in the string
- the fn will return a () value in case the string doesnot begin with an integer.
3.parsefloat () function: is used to convert a string value into float value.

Module 3 -Introduction to PHP

#php: -Open-source, server-side scripting language

-Used to generate dynamic web-pages
-it can create, open, read, write, delete, and close files on the server
-it can send and receive cookies
-it can add, delete, modify data in your database
-it can encrypt data
-Structurally similar to C/C++
- All PHP statements end with a semi-colon
-A PHP script can be placed anywhere in the document.
 -A PHP script starts with : <?php and end with ?>
*server side scripting: mukaliundeee
*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 gaming, storage, FTP, email etc.
-Web Server Architecture follows the following two approaches:
1.Concurrent Approach: allows the web server to handle multiple client requests at
the same time.
2.Single-Process-Event-Driven Approach:
*PHP Comments: can be used to describe any line of code so that other developer can
understand the code easily.
- It can also be used to hide any code.
-PHP supports single line and multi line comments

i)PHP Single Line Comments: There are two ways to use single line comments in PHP.
o // (C++ style single line comment)
o # (Unix Shell style single line comment)

ii) PHP Multi Line Comments: need to enclose all lines within /* */
/*
Anything placed
within comment
will not be displayed
on the browser;
*/
*PHP echo Statement: -The echo statement can be used with or without
parentheses: echo or echo().
-echo has no return value.
*PHP print Statement: -The print statement can be used with or without
parentheses: print or print().
-print has a return value of 1.

*Difference between echo and print

echo print
echo is a statement, which is used to print is also a statement, used as an
display the output alternative to echo at many times to display
the output
echo can be used with or without print can be used with or without
parentheses parentheses
echo does not return any value print always returns an integer value, which
is 1
echo is faster than print statement
print is slower than echo statement.
* PHP operators: Operators are used to perform operations on variables and values.
-PHP divides the operators in the following groups:
• Arithmetic operators
• Assignment operators
• Comparison operators
• Increment/Decrement operators
• Logical operators
• String operators
• Array operators
• Conditional assignment operators
“explain cheyanam”

*PHP Data Types: Variables can store data of different types, and different data types
can do different things.

-PHP supports the following data types:

1.String:-is a sequence of characters, like "Hello world!".

-A string can be any text inside quotes
2.Integer: - An integer data type is a non-decimal number between -2,147,483,648 and
2,147,483,647.
-Rules for integers:
• An integer must have at least one digit
• An integer must not have a decimal point
• An integer can be either positive or negative
• Integers can be specified in: decimal (base 10), hexadecimal (base 16),
octal (base 8), or binary (base 2) notation

3.Float: -is a number with a decimal point or a number in exponential form.

4.Boolean: - Boolean represents two possible states: TRUE or FALSE.
$x = true;
$y = false;
5.Array: - An array stores multiple values in one single variable.
6.Object: -Classes and objects are the two main aspects of object-oriented
programming.
-A class is a template for objects, and an object is an instance of a class.
-When the individual objects are created, they inherit all the properties and
behaviors from The class, but each object will have different values for the
properties.
 7.NULL: - If a variable is created without a value, it is automatically assigned a value of
NULL.
8.Resource: -The special resource type is not an actual data type. It is the storing of a
reference to functions and resources external to PHP.
* PHP Conditional Statements/ branching statement:
•if statement
•if...else
•if...elseif...else statement
•switch statemen
“explain cheyanam”
*php loop : mukalill ezhuthiyyunde same thannayaa for loop,while loop’
*php array: array is a special variable, which can hold more than one value at a time
- there are three types of arrays:
• Indexed arrays - Arrays with a numeric index
• Associative arrays - Arrays with named keys
• Multidimensional arrays - Arrays containing one or more arrays

Module-4 php function

#php function:- A Function is a block of statements that can be used repeatedly in a

program
- The real power of PHP comes from its functions
- PHP has more than 1000 built-in functions, and in addition you can create your own
custom functions
- A function will not execute immediately when a page loads.
-A function will be executed by a call to the function.
- There are two steps while using a function
*Name should start with keyword function
*A function name can start with a letter or underscore_ But, not a number .
*Function names are not case-sensitive.
*All the PHP code should be put inside { } braces
Sy;
function functionName()
{ code to be executed; }
* PHP User Defined Functions: -A function is a block of statements that can be used
repeatedly in a program.
-A function will not execute automatically when a page loads.
-A function will be executed by a call to the function
*Functions with Parameters : -Information can be passed to functions through
arguments.
 -An argument is just like a variable.
-Arguments are specified after the function name, inside the parentheses.
- You can add as many arguments as you want, just separate them with a comma.(,)
*Default Argument Value : -We can specify a default argument value in function.
-While calling PHP function if we specify any argument, it will take the default argument
* Functions Returning Values: -A function can return a value using the return
statement in conjunction with a value or object.
-The keyword return stops the execution of the functions And send back to the calling
code
*PHP Form: -We can create and use forms in PHP.
-To get form data, we need to use PHP super global $_GET and $_POST.
1.GET form/$_GET: -Information sent from a form with the GET method is visible
to everyone (all variable names and values are displayed in the URL).
-GET also has limits on the amount of information to send.
-The limitation is about 2000 characters. However, because the variables are
displayed in the URL
“Note: GET should NEVER be used for sending passwords or other sensitive
information!”
2.post form/$_POST: -Information sent from a form with the POST method
is invisible to others (all names/values are embedded within the body of the
HTTP request)
- has no limits on the amount of information to send, because the variables are
not displayed in the URL, it is not possible to bookmark the page .
*Passing information between pages: -the first method of passing info between pages is
through the pages URL
-we can combine variable in a URL by using an ampersand’&’.
Dis adv
• Evey one can see the values of the variable so,info isn’t very secure
• User can change the variable value in the URL
-Diff way of passing info between page they are;
 1.Passing variables between pages using cookies:-Cookies are stored at the user or the
client end and values can be passed between pages using PHP.
-But here the client browser can reject accepting cookies by changing the security
settings of the browser.
-So this system can fail to pass values between pages
2. Passing variables between pages using URL:-We can pass variable values between
pages through the URL ( in address bar of the browser).
- Here values are visible to the user and others as they appear in the address bar and
also in the browser history.
-This is not a secure way to transfer sensitive data like password, etc
3. Web Forms: -Forms are used mainly to collect data and then transfer them to a
processing page..
- Forms can be used to pass values to different sites.
4. Passing data from PHP to JavaScript:-JavaScript runs at client side , where PHP runs
at server end.
-We can pass data from PHP to JavaScript by sending the data to client end.
*PHP $_REQUEST:- is a PHP super global variable which is used to collect data after
submitting an HTML form.
“get form and post form inta kudathill ethu ezhutham”
*PHP String Functions:-The PHP string functions are part of the PHP core.
-No installation is required to use these functions.
• chop() Removes whitespace
• convert_uudecode() Decodes a uuencoded string
• convert_uuencode() Encodes a string using the uuencode algorithm
• echo() Outputs one or more strings
• explode() Breaks a string into an array
• strcmp() Compares two strings
• strlen() Returns the length of a string
• strrev() Reverses a string
• strtok() Splits a string into smaller strings
• strtolower() Converts a string to lowercase letters
• strtoupper() Converts a string to uppercase letters
• strtr() Translates certain characters in a string
• substr() Returns a part of a string
* PHP include and require Statements:
• require: - will produce a fatal error (E_COMPILE_ERROR) and stop the script
-execution of the script stops when an error occur
• include: -will only produce a warning (E_WARNING) and the script will continue
-execution of the script continues when an error occur
*PHP session and cookie management:
 1)Cookie: -Cookies, or browser cookies, are small pieces of data with a maximum size of
4KB which the web server asks the client's web browser to store
-cookies are client side files that contain user info
- A cookie is created with the setcookie() function.
- A cookie can only be read from the domain that it has been issued from. For example,
a cookie set using the domain www.guru99.com can not be read from the domain
- A cookie created by a user can only be visible to them. Other users cannot see its
2) PHP Sessions:- Sessions are an alternative to cookies.
-sessions are stored in server side
-stored un limited amount of data,
-these values are stored on the server, and only a reference identifier ("session ID") is
sent to the user's browser as a cookie.
- A session can also be unset and destroyed when expired or no longer needed
- it is more secure than cookie
* PHP Error Handling: -Error handling in PHP is simple.
-An error message with filename, line number and a message describing the error is sent
to the Browser.
-error handling is an important part. If your code lacks error checking code, your program
may look very unprofessional and you may be open to security risks
- most common error checking methods in PHP.
• Simple "die()" statements:
<?php
$file=fopen("mytestfile.txt","r");
?>
• Custom Error: -Creating a custom error handler is quite simple.
-We simply create a special function that can be called when an error occurs in
PHP
• Trigger an Error: - In a script where users can input data it is useful to trigger
errors when an illegal input occurs. In PHP, this is done by the
trigger_error() function.
• Error report:
* Object Oriented Programming using PHP: - Object-Oriented programming is faster
and easier to execute
-adv
• 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
- Classes and objects are the two main aspects of object-oriented programming
 ▪ Class: class is an entity that determines how an object will behave and what the
object will contain. it is a blueprint or a set of instruction to build a specific type
of object.
▪ Object: object are instance of class .

Module -5 – MySQL

#Introduction to MySQL:- MySQL is an open-source, fast reliable, and flexible relational

database management system, typically used with PHP
• MySQL is a relational database management system
• MySQL is open-source
• MySQL is free
• MySQL is ideal for both small and large applications
• MySQL is very fast, reliable, scalable, and easy to use
• MySQL is cross-platform
• MySQL was first released in 1995
• MySQL is developed, distributed, and supported by Oracle Corporation
*feature of MySQL
-“mukallillathathum ezhutham”
-MySQL Handles large databases.
-MySQL Server works in client/server or embedded systems.
-MySQL Works on many different platforms.

*Uses of MySQL
• Huge websites like Facebook, Twitter, Uber, YouTube, etc.
• Content Management Systems like WordPress, Drupal, Joomla!, Contao, etc.
• A very large number of web developers around the world.
#mysql datatypes :- Data Type specifies a particular type of data, like integer, floating
points, Boolean, etc.
-MySQL uses many different data types broken into three categories −
1.Numeric Data Type :- These data types can include the exact numeric data types (For
example, integer, decimal, numeric, etc.),
-as well as the approximate numeric data types (For example, float, real, and double
precision).
-It also supports BIT datatype to store bit values.
-In MySQL, numeric data types are categories into two types, either signed or
unsigned except for bit data type
*TINYINT:- It is a very small integer that can be signed or unsigned.
*SMALLINT:- It is a small integer that can be signed or unsigned.
 *MEDIUMINT:- It is a medium-sized integer that can be signed or unsigned.
*INT:- It is a normal-sized integer that can be signed or unsigned
*FLOAT:- It is a floating-point number that cannot be unsigned.
2.Date and Time Data Type:-This data type is used to represent temporal values such
as date, time, datetime, timestamp, and year.
-Each temporal type contains values, including zero.
-When we insert the invalid value, MySQL cannot represent it, and then zero value is
used.
*YEAR[(2|4)]:- Year value as 2 digits or 4 digits.
*DATE:- Values range from '1000-01-01' to '9999-12-31'.
*TIME:- Values range from '-838:59:59' to '838:59:59'.
3. String Data Types:-The string data type is used to hold plain text and binary data,
for example, files, images, etc
*TINYTEXT:- It can have a maximum size of 255 characters.
*TEXT:- Maximum size of 65,535 characters.
*MEDIUMTEXT:- It can have a maximum size of 16,777,215 characters.
*LONGTEXT:- t can have a maximum size of 4GB.

#SQL Commands:-SQL commands are instructions.

-It is used to communicate with the database. It is also used to perform specific tasks,
functions, and queries of data.
-SQL can perform various tasks like create a table, add data to tables, drop the table,
modify the table, set permission for users.
1. CREATE:- It is used to create a new table in the database.
Syn;
CREATE TABLE TABLE_NAME (COLUMN_NAME DATATYPES[,....]);
2.INSERT:- The INSERT statement is a SQL query. It is used to insert data into the row
of a table.
3.UPDATE: This command is used to update or modify the value of a column in the
table.
4. DELETE: It is used to remove one or more row from a table.
5. SELECT: This is the same as the projection operation of relational algebra. It is used
to select the attribute based on the condition described by WHERE clause.
#mysql connectivity and operation;
1.mysqli_connect() function is used to connect with MySQL database. It
returns resource if connection is established or null.
2.mysqli_select_db() function accepts a string value representing an existing
database and, makes it as a the default database.
3.mysqli_query() function accepts a string value representing a query as one of the
parameters and, executes/performs the given query on the database
4.mysqli_fetch_row() function accepts a result object as a parameter, retrieves the
contents of its current row as an array of strings.
5.mysqli_fetch_array() function accepts a result object as a parameter and, retrieves
the contents of current row in the given result object, and returns them as an
associative or, numeric array.
6. mysqli_use_result() function starts the retrieval of the result set from the previously
executed query
7. mysql_list_fields() retrieves information about the given table name.

8. mysqli_num_fields() function accepts a result object as a parameter, retrieves and

returns the number of fields in the given object.