1 Introduction to Web Development with PHP

Hiren Joshi

The World Wide Web or simply Web consists of many components. These components work together to display web page. Web Applications use client/server architecture. This architecture has mainly 3 components.

1. Client

2. Network

3. Server

Client connects to the server by Internet. Client send request to the server and server response to the client. Server shares resources with clients. These resources can be files, printers, web sites, databases, emails. The server which share web site is known as Web server. In the same way, if a server share files, it is called file server. Client software is used web browser software to access web server. Client and server are communicated by a communication system. This communication system is known as network.

Computer connects to the network through NIC (Network Interface Card). The connection between client and server through network can be wired or wireless. Ethernet is a common type of wired network. The most common type of wireless network is Wi-Fi.

The information is transported from one computer to another by network.

Routing is the process to determine route to get information from one computer to another. A router is a device that is connected to two or more networks. Router determines the route to communicate between source and destination. When information comes from source network, router decides which network is closets to the destination network and sends information to the closets network.

Network can be categorized by size. According to the size network can be classified as LAN, MAN and WAN.

LAN (Local Area Network) is a small network of computers. The computers are communicating for short distance in LAN. LAN is used to connect computers in the same building or in adjacent buildings. This type of network is used as intranet. Intranet can be used to run web applications for use by employees only.

A Wide Area Network (WAN) consists of multiple LANs. Many LANs can be connected one WAN. WANs are connected together over long distance using routers. A WAN can be proprietary to one company or it can be shared by multiple companies. WAN is owned by an Internet Service Provider (ISP). ISP owns WAN which are connected to the Internet. Any company want to use Internet can lease access from ISP.

The Internet is network of network. Internet consists of multiple WANs. All these WANs have connected together. ISPs connect their WANs together by Internet Exchange Points (IXP). IXPs is considers as large routers. This architecture allows anyone connected to the Internet to exchange information with anyone else.

The following diagram shows how data are travelled in Internet.

In the diagram. Client sends data to the server. Data travel from LAN to WAN to the IXP. The WAN is owned by client’s ISP. WAN is owned by ISP. There may be different ISP for client and server. The time taken to complete the request/response on Internet is less than 1/10th of a second.

Web Pages are mainly classified as static web page and dynamic web pages.

A static web page is a web page which only changed when web developer change it. It does not give you output according to your query. It is a plain text file. It contains all the content to be displayed in the web browser.

Following figure shows how a web server processes static web page.

TCP/IP (Transmission Control Protocol/Internet Protocol) is a suite of protocol.

TCP/IP allows two computers to communicate over a Network.

A dynamic web page is a web page which changed as per the query. Dynamic web page shows output according to query. Dynamic web page is created by program or script. The program or script resides on the web server.

Following figure shows how a web server processes dynamic web page.

User asks web page by typing URL (Uniform Resource Locator) into the address bar of web browser or click on a link from current page. Now the web browser sends a request for the web page to the web server. The protocol used for request a web page is HTTP (Hyper Text Transfer Protocol). So this is known as HTTP request. When the web server receives HTTP request, the web server determines the file extension. File extension is determined by application mapping program of web server. Once file extension is determined, then the application engine process the request. For example, if the file extension is .php, then the web server forward the HTTP request to PHP interpreter. The PHP interpreter running on the web server. PHP interpreter processes the request. During the processing, if any data require then PHP application engine communicate with database server for data. Once the processing has completed, PHP interpreter pass the dynamically generated web page to the web server. Web server send page back to the browser as HTTP response. HTTP response includes HTML. On receiving HTTP response, the web browser format and display web page.

Formatting and displaying HTTP response in browser is known as rendering the web page. Rendering is happen for static or dynamic web page.

Once the page is display in browser, the user can view the content.

When the user request another page, the same process is begin again.

The process that starts when client requesting a web page and ends with server sending response of the request to the client is known as round trip.

Now let us look at the most common software for web application development.

The most common used web browsers are Internet Explorer, Firefox, Chrome, Safari and Opera. Internet Explorer is Microsoft Proprietary. Firefox is published by Mozila. Safari is Apple product. Chrome is Google proprietary. Opera is published by Opera. Most of the browser can supports for major operating systems like Microsoft, Linux, Apple.

The most common web servers used nowadays are Apache and IIS. Apache is an open source web server. Apache can run on major operating systems. Apache can support many database servers also. The most common configuration in web development is LAMP, which is acronym for Linux (Operating System), Apache (Web Server), MySQL (Database Server) and PHP (Web Application Engine). IIS is Microsoft proprietary product. IIS runs only on windows operating system. IIS mainly used for ASP.NET Web Applications and SQL Server database. IIS is a short form of Internet Information Services.

The most common server side scripting languages are PHP, JSP, ASP.NET, Perl and Python. PHP is open source web engine mainly used with Apache Web server. JSP also works with Apache. JSP generally work with servlets. The servlets are written in Java. ASP.NET is used with IIS. ASP.NET is used VB or C# for server side scripting. Perl is originally developed to work with Unix. Python is used for many types of application now a days.

The most usable database servers are MySQL, Oracle, DB2 and SQL Server. MySQL is initially an open source database. MySQL is now acquired by Oracle. Oracle database is Oracle’s proprietary database server which can run on major operating systems. DB2 is a product from IBM that is also available for major operating system. MS SQL Server can run only on Microsoft operating system.

HTML

HTML stands for Hyper Text Markup Language. Only HTML pages make static web application. HTML is invented by Tim Berners-Lee. HTML is derived from SGML (standard General Markup Language). HTML has predefined tags. Tags are defined by opening and closing angle brackets(< >). There are opening and closing tags. The content is written between opening and closing tag. The closing is preceded by slash (</>). Tags are generally written in lowercase. Some tags do not require closing tags while some tags required opening and closing tag. A tag can have attributes. Attribute has value. A tag can have more than one attribute. Attribute should write inside double quotes (“ “). Though to write attribute in double quotes is not compulsory for HTML, but it makes HTML page, XHTML compatible also.

XHTML is short form of eXtensible Hyper Text Markup Language. XHTML is very similar to HTML 4.01. XHTML syntaxes are more strict then HTML. XHTML makes HTML compatible to XML. XHTML is supported by many leading browsers.

There are very few differences between HTML and XHTML.

<!DOCTYPE> is compulsory in XHTML
<HTML> tag is compulsory in XHTML.
XHTML must have <html>, <head>, <title>, and <body> tag.
XHTML each tag must always be closed.
Each XHTML tag must be in lowercase.
Each attribute within XHTML tag must be enclosed in double quotes.
XHTML must be properly nested.

The general syntax of HTML tag is:

Content between the

tag. </tagname>

Let’s start with HTML tags.

The general HTML file structure is as follows:

<html>

<head>

</head>

<body>

</body>

</html>

DTD (Data Type Definition) declaration is used in HTML. <!DOCTYPE> declaration is referred as DTD. The <!DOCTYPE> is used to give instruction to the browser. The information is to specify in what version of HTML page has written. The <!DOCTYPE> declaration is not an HTML tag. The <!DOCTYPE> declaration must be the very first line in HTML document. It is preceded even <html> tag also. The <!DOCTYPE> tag has no end tag.

There are 3 types of <!DOCTYPE> in HTML 4.01. These types are

1. Strict

2. Transitional

3. Frameset

The strict flavour disallows the use of deprecated elements and attributes of HTML. Deprecated elements are elements which will be removed in the new version of that HTML standard. Transitional allows the use of deprecated elements. This is the most common use flavours. Frameset is similar to transitional plus it also supports the use of frames. Frame is HTML tag which is not much used in modern web site.

Example of <!DOCTYPE>:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> [W3Schools.com]

HTML has also meta tag. Meta data is data about data. The meta tags used meta data. Meta tag allows assigning the document as whole information about the general type of a HTML page contain. Meta data will not be displayed on web page. The meta tags are parsed by machine. The main uses of meta tags are to describe page description, keywords, document author and when the document last modified. Meta tags are helpful for search engine. Meta tags are always passed as name/value pair. Meta tags must be written inside the <head> tag. There are 3 attributes of meta tag. They are

1. name

2. http-equiv

3. content

Meta tag examples[W3schools.com]

Example 1 – Define keywords for search engines:

Example 2 – Define a description of your web page:

Example 3 – Define the author of a page:

Example 4 – Refresh document every 30 seconds:

HEAD

<head> is optional tag. It is used before <body>. <head> can include <title> and <link>.

<title> is always inside <head>.

The <title> is used to display text on title bar.

e.g.

<html>

<head>

<title>This is Title</title>

</head>

</html>

The below code shows example of favicon.

<html>

<head>

<title>This is Title</title>

</head>

</html>

For providing relation as style sheet,

<html>

<head>

<title> CSS Example </title>

Styles.css“> </head>

<body>

This is body

text. </body>

</html>

In the above example styles.css is an external style sheet.

<BODY>

The next important tag in HTML is <body>. The <body> has attributes for background image ,background color and text color of HTML page. <body> also allows to change by default color of hyperlink.

<html>

<head>

Body example.

</head>

This is white font on red

background. </body>

</html>

<html>

<head>

Body example.

</head>

This is white font on red background.

</body>

</html>

HEADING TAGS

HTML provides many heading tag to display various types of headings. Heading tags are vary from <h1> to <h6>.

Head tags (<h1> to <h6>) are block level elements. Block level elements are elements which start and end with a new line when display in a browser. The other types of elements are called inline level elements. The inline elements are generally displayed without starting a new line. <h1>, <p> , <ul> , <table> are some of the examples of block level element. Some of the examples of inline level elements are <b>, <td>, <a> and <img>.

Example:

<HTML>

<HEAD>

<TITLE>Document

Headings</TITLE> </HEAD>

<BODY>

Samples of the six heading types:

<H1>Level-1 (H1)</H1>

<H2>Level-2 (H2)</H2>

<H3>Level-3 (H3)</H3>

<H4>Level-4 (H4)</H4>

<H5>Level-5 (H5)</H5>

<H6>Level-6 (H6)</H6>

</BODY>

</HTML>

Align attribute can be used with some element to define the alignment of the text.

<HTML>

<HEAD>

<TITLE>Document

Headings</TITLE> </HEAD>

<BODY>

Samples of the six heading types:

<H1>Level-1 (H1)</H1>

<H2 ALIGN=”center”>Level-2 (H2)</H2>

<H3><U>Level-3 (H3)</U></H3>

<H4 ALIGN=”right”>Level-4

(H4)</H4> <H5>Level-5 (H5)</H5>

<H6>Level-6 (H6)</H6>

</BODY>

</HTML>

The figure shows that the Level-2 (H2) is in the centre of browser. Level-4(H4) is at the right side of the browser as align attribute is defined as right. By default, align is left.

The <B> tag is used to define the text bold. To make the content italic <i> is used. <u> is used to make the content/text underlined. These all tags (<b>, <i> and <u> ) required corresponding closing tag also. (</b>, </i> and </u>).

<p>

The <p> (read as paragraph tag) is used to make paragraph. It is used to separate text within a web page. It provides one line blank. Multiple <p> tags do not create multiple blank lines. It is a container tag means other tags can be inserted in it. Align attribute can be used with <p>. </p> is optional.

Example:

<BODY>

<P ALIGN=”center”> Centered text

</P> <P><P><P>

<P ALIGN=”right”> Right-justified text

<!– Note: no closing /P tag is not a problem —

> </BODY>

To write comment, <!– –> is used.

<br>

The <br> tag is used to put one line break. Multiple <br> allows multiple blank lines.

<html>

<head>

Break Tag example.

</head>

<body>

<p>

This is line 1.

This is line 2.

This is line 3.

This is line4.

This is line 1.<br>

This is line 2. <br>

This is line 3. <br>

This isline4. </body>

</html>

<PRE>

The <PRE> tag is used to display pre-formatted text. As we have seen in previous examples that to put the text in next line either <p> or <br> tag is used.

Example:

<PRE>

if (a < b)

{ a++;

b = c * d;

}

else {

a–;

b = (b-1)/2;

}

</PRE>

Special Characters

HTML also support many special characters for web page display. For example to write < (less than symbol) &lt is used.

<html>

<head>

<H1> Special Characters

</H1> </head>

<body>

To express less than use < <br>

To express greate than use > <br>

To express ampersaned use &

<br> To express quote use " <br>

To express space use   <br>

</body>

</html>

COLOR

HTML supports various types of color to display in web page. Some colors have predefined name such as Black, White etc. The rest of the colors are represented as hexadecimal values in RGB format. RGB (Red, Green and Blue) has values rang from 0 to 255. In hexadecimal number, 255 are represented as FF. For example, FF0000 represents red color. First two digit represents red color (FF), Next two digits represents green color (00) and the last two digits represents blue color (00).

Example:

<html>

<head>

Colors in HTML

</head>

<p>

<h2>The background color in this web page is Magenta.</h2> </body>

</html>

FONT

The <font> tag is used to specify particular font face (name), font size and font color. The content between <font> and </font> will be displayed as per the font attributes set.

<html>

<body>

<FONT COLOR=”green” SIZE=”4″ FACE=”Arial”> Line two contains this text </FONT>

<FONT COLOR=”blue” SIZE=”6″ FACE=”Courier”> The third line has this additional text </FONT> </body>

</html>

Lists

HTML supports 3 types of list. They are order list, unordered list and data list. Order list displays data in order wise like 1,2,3 etc. Unordered list displays data as either circular or squared. Data list displays data and their definitions.

<html>

<body>

This is order

list. <OL>

<LI> Item Three </LI>

</OL>

</body>

</html>

If the order list is not numeric but from A,B,C then type attribute is used.

<html>

<body>

This is order list with type list is alphabetic

order. <OL type=”A”>

<LI>Item Three</LI>

</OL>

</body>

</html>

Order list also allows to start list from another number also. For example, if the list is start from H on wards then you can use start attribute. Start attribute provide value from where you want to start order list.

<html>

<body>

This is order list with type list is alphabetic

order. <OL type=”A” start=8>

<LI>Item Three</LI>

</OL>

</body>

</html>

<html>

<body>

Item one </LI> <LI>

Item two </LI> <OL

TYPE=”I” >

<LI> Sublist item one </LI>

<LI> Sublist item two </LI>

<LI> Sub-sublist item one </LI>

<LI> Sub-sublist item two </LI>

</OL>

</body>

</html>

Unordered list is used to display items in bulleted format.

<html>

<body>

This is order

list. <UL>

<LI> Item Three </LI>

</UL>

<br>

</body>

</html>

You can choose bulleted list for unordered list as square bullet.

<html>

<body>

This is order list.

<LI> Item Three </LI>

</UL>

<br>

</body>

</html>

Data list allows showing you data term and data definition.

<html>

<body>

This is data list.

<DL>

<DD>Random Access

Memory</DD> <DT>ROM</DT>

<DD>Read Only

Memory</DD> </DL>

</body>

</html>

you can view video on Introduction to Web Development with PHP

References:

1.Ivan Bayross, Web Enabled Commercial Application Development Using HTML/Javascript/DHTML/PHP , BPB Publications
2. Steven Holzner, HTML Black book, Kogent Learning Solutions Inc
3. Deidre Hayes, Sams teach yourself HTML 4 in 10 minutes,
4. Ed Tittel , Mary Burmeister, HTML4 for Dummies, Wiley
5. Robert Sebesta, Programming the World Wide Web, Pearson Education Inc.
6. Deitel, Internet and World Wide Web How to Program, Pearson
7. Anne Boehm, Murach’s HTML, XHTML and CSS, Murachs
8. Elisabeth Robson, Eric Freeman, “Head First HTML and CSS “, O’Reilly
9. Thomas Powell, HTML and CSS The Complete Reference, McGrawHill Education India
10. John Duckett, Beginning HTML, XHTML, CSS and Java Script, Willy India
11. http://www.php.net/
12. http://www.w3schools.com/
13. http://www.tutorialspoint.com/