Ram Devi Jindal Group of Institutions

Lalru, Mohali (140501)

DEPARTMENT OF COMPUTER SCIENCEAND ENGINEERING

Practical File
Subject Name: WEB TECHNOLOGY
Subject Code:BTCS520-18

SUBMITTED TO: SUBMITTED BY:

MR.DEEPAK VERMA NAME: AYUSH THAKUR
(Assistant Professor) ROLLNO:2236316
CLASS & SEM: B.TECH(CSE),5th

1
 INDEX

S.NO EXPERIMENTSNAME PAGE-NO REMARKS

1 ConfigurationandadministrationofApachewebserver 3-5
2 Develop an HTML page to demonstrate the use of basic HTML 6-8
tag using two different HTML page and Basic tag,links to
differenthtmlpageandalsolinkwithinapage,insertionofimages and
creation of tables.
3 Developaregistrationform by usingvariousformelementlike input 9-10
box text area radio button.
4 DesigninHTMLpagebyusingtheconceptofinternal inline 11-12
external style sheet.
5 WriteanHTMLpageincludingJavaScriptthattakesagivenset of 13-13
integer numbers and shows them after sorting in descending
order.
6 WriteanHTMLpageincludinganyrequiredJavaScriptthattakes a 14-15
numberfromonetextfieldintherangeof 0to999andshowsit in
another text field in words. if the number is out of range, it should
show “out of range” and if it is not a number, it should show “not
a number” message in the result box.

7 DemonstratetheuseofloopsandarrayinPHP 16-20
8 CreateaPHPfileusinggetandpostmethod 21-23
9 Asimplecalculatorwebapplicationthattakestwonumbersand an 24-25
operator ( ,-,/,* and %)from an HTML page and returns the
result page with the operation performed on the operands.

10 Aweb application for implementation: The user is first served a 26-28

login page which takes user’s name and password. After
submitting the details the server checks these values against the
datafromadatabaseandtakesthefollowingdecisions.•Ifname and
password matches serves a welcome page with user’s full name.
• If name and password doesn’t match, then serves “password
mismatch” page. • If name is not found in the database, serves a
registration page, where user’s full name is asked and on
submitting the full name, it stores, the login name, password and
full name in the database (hint: use session for storing data,
submitted login name and password).

11 DemonstratetheuseofAjaxandJSONandTechnologiesin 29-31
programming example
12 MinorProject 31-46

2
 PRACTICAL-1
Aim:Configuration and administration of Apache web server
Source Code :

• ApacheHTTPServerisa freeandopen-sourcewebserverthatdeliverswebcontentthroughthe internet.

• ItiscommonlyreferredtoasApacheandafterdevelopment,itquicklybecamethemostpopularHTTP client on
the web.
• It’swidelythoughtthatApachegetsitsnamefromitsdevelopmenthistoryandprocessofimprovement through
applied patches and modules but that was corrected back in 2000.
• ItwasrevealedthatthenameoriginatedfromtherespectoftheNativeAmericantribeforitsresiliency and
durability.
• Now,beforewegettooindepthonApache,weshouldfirstgooverwhatawebapplicationisandthe standard
architecture usually found in web apps.

WorkingofApache
• Apacheisnotanyphysicalserver;itissoftwarethatexecutesontheserver.However,wedefineitasa web
server. Its objective is to build a connection among the website visitor browsers (Safari, Google
Chrome, Firefox, etc.) and the server.
• Apachecanbedefinedascross-platformsoftware,soitcanworkonWindowsserversandUNIX.
• Whenanyvisitorwishesforloadingapageonourwebsite,thehomepage,forinstance,orour"About Us" page,
the visitor's browser will send a request on our server.
• Apachewillreturnaresponsealongwitheachrequestedfile(images,files,etc.).Theclientandserver
communicate byHTTPprotocol, andApache is liable for secure andsmooth communication amongt
both the machines.
• Apacheissoftwarethatishighlycustomizable.Itcontainsthemodule-basedstructure.Variousmodules permit
server administrators for turning additional functionality off and on.
• Apacheincludesmodulesforcaching,security,passwordauthentication,URLrewriting,andother
purposes.Also, wecansetup our ownconfiguration of the server with the help ofa file known as
.htaccess.It is asupportedconfigurationfileofApache.

3
 • Installation and configuration of theApache web server must be performed as root. Configuring the
firewallalsoneedstobeperformedasroot.Usingabrowserto viewtheresultsofthisworkshouldbe done as a
nonroot user. (I use the user student on my virtual host.)
Installation
• TheApachewebserveriseasytoinstall.Withonecommand,youcaninstallitandallnecessary
dependencies: $ dnf install httpd
• All the configuration files forApache are located in /etc/httpd/conf and /etc/httpd/conf.d. The data
forwebsitesyou'llrunwithApacheislocatedin/var/wwwbydefault,butyoucanchangethatifyou want.
Configuration
• TheprimaryApacheconfigurationfileis/etc/httpd/conf/httpd.conf.Itcontainsalotofconfiguration
statements that don't needto be changed for a basic installation. In fact, onlya few changes must be
made to this file to get a basic website up and running.
• Thefileis verylargeso,ratherthanclutterthisarticlewithalot ofunnecessarystuff,Iwillshowonly those
directives that you need to change.
• First, take a bit of time andbrowsethrough the httpd.conf file tofamiliarize yourself withit. One of the
thingsIlikeaboutRedHatversionsofmostconfigurationfilesisthenumberofcomments thatdescribe the
various sections and configuration directives in the files.
• Thehttpd.conffileisnoexception,asitisquitewellcommented.Usethesecommentstounderstand what the
file is configuring.
• Thefirstitemto changeistheListenstatement,whichdefinestheIPaddressandportonwhichApache is to
listen for page requests. Right now, you just need to make this website available to the local machine,
so use the localhost address.The line should look like this when you finish:
• Listen127.0.0.1:80
• WiththisdirectivesettotheIPaddressofthelocalhost,Apachewilllistenonlyforconnectionsfromthe local
host. If you want the web server to listen for connections from remote hosts, you would use the host's
external IP address.
• The DocumentRoot directive specifies the location of the HTML files that make up the pages of the
website.Thatlinedoesnotneedtobechangedbecauseitalreadypointstothestandardlocation.Theline should
look like this:
DocumentRoot"/var/www/html"
□ TheApacheinstallationRPMcreatesthe/var/wwwdirectorytree.Ifyouwantedtochangethelocation where
the website files are stored, this configuration item is used to do that. For example, you might want to
use a different name for the www subdirectory to make the identification of the website more explicit.
That might look like this:
DocumentRoot"/var/mywebsite/html"
• These are the onlyApacheconfigurationchanges needed tocreate a simple website. Forthis little
exercise,onlyonechangewasmadetothehttpd.conffile—theListendirective.Everythingelseis already
configured to produce a working web server.

4
 • Oneotherchangeisneeded,however:openingport80inourfirewall.Iuseiptables asmyfirewall,soI change
/etc/sysconfig/iptables to add a statement that allows HTTP protocol. The entire file looks like this:

#sampleconfigurationforiptablesservice
#youcaneditthismanuallyorusesystem-config-firewall
#pleasedonotaskusto addadditional ports/servicestothisdefault configuration
*filter
:INPUTACCEPT[0:0]
:FORWARDACCEPT[0:0]
:OUTPUTACCEPT[0:0]
-AINPUT-mstate--stateRELATED,ESTABLISHED-jACCEPT
-AINPUT-picmp -jACCEPT
-AINPUT-ilo-jACCEPT
-AINPUT-ptcp-mstate--stateNEW-mtcp--dport22-jACCEPT
-AINPUT-ptcp-mstate--stateNEW-mtcp--dport80-jACCEPT
-AINPUT-jREJECT--reject-withicmp-host-prohibited
-AFORWARD-jREJECT--reject-withicmp-host-prohibited
COMMIT
• ThelineIaddedisthethirdfromthebottom,whichallowsincomingtrafficonport 80.NowIreloadthe altered
iptables configuration.
[root@testvm1~]#cd/etc/sysconfig/;iptables-restoreiptables

Createtheindex.htmlfile
• Theindex.html fileisthedefaultfileawebserverwillserveupwhenyouaccessthewebsiteusingjust the
domain name and not a specific HTML file name.
• Inthe/var/www/htmldirectory,createafilewiththenameindex.html.AddthecontentHelloWorld.You do not
need to add any HTML markup to make this work.
• The sole job of the web server is to serve up a stream of text data, and the server has no idea what the
dateisorhowtorenderit.It simplytransmitsthedatastreamtotherequestinghost.Aftersavingthefile, set the
ownership to apache.apache.
[root@testvm1html]#chownapache.apacheindex.html
StartApache
Apacheisveryeasytostart.Currentversions ofFedorausesystemd.Runthefollowingcommandsto startit and then to
check the status of the server: [root@testvm1 ~]# systemctl start httpd
[root@testvm1~]#systemctlstatushttpd
● httpd.service-TheApacheHTTPServer
Loaded:loaded(/usr/lib/systemd/system/httpd.service;disabled;vendorpreset:disabled)
Active: active (running) since Thu 2018-02-08 13:18:54 EST; 5s ago
Docs: man:httpd.service(8)
Main PID: 27107 (httpd)Status:
"Processing requests..."
Tasks:213(limit:4915)

CGroup:/system.slice/httpd.service
├─27107/usr/sbin/httpd-DFOREGROUND
├─27108/usr/sbin/httpd-DFOREGROUND
├─27109/usr/sbin/httpd-DFOREGROUND
├─27110/usr/sbin/httpd-DFOREGROUND
└─27111/usr/sbin/httpd-DFOREGROUND

5
Feb0813:18:54testvm1systemd[1]:StartingTheApacheHTTPServer... Feb 08
13:18:54 testvm1 systemd[1]: Started The Apache HTTP Server.

PRACTICAL-2
Aim:DevelopanHTMLpagetodemonstratetheuseof basicHTMLtagusingtwodifferentHTMLpage and Basic
tag,links to different html page and also link within a page,insertion of images and creation of tables.
Source Code :

HeadingTags
□ Any document starts with a heading. You can use different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any
heading, browser adds one line before and one line after that heading. Example
<!DOCTYPEhtml>
<html>
<head>
<title>HeadingExample</title>
</head>
<body>
<h1>Thisisheading1</h1>
<h2>Thisisheading2</h2>
<h3>Thisisheading3</h3>
<h4>Thisisheading4</h4>
<h5>Thisisheading5</h5>
<h6>Thisisheading6</h6>
</body>
</html>
ParagraphTag
□ The<p>tagoffersawaytostructureyourtextintodifferentparagraphs.Eachparagraphoftext shouldgoin between
an opening <p> and a closing </p> tag as shown below in the example −
Example
<!DOCTYPEhtml>
<html>
6
 <head>
<title>ParagraphExample</title>
</head>
<body>
<p>Hereisafirstparagraphoftext.</p>
<p>Hereisasecondparagraphof text.</p>
<p>Hereisathirdparagraphoftext.</p>
</body>
</html>

LineBreakTag
• Whenever you use the <br /> element, anything following it starts from the next line. This tag is an
exampleofanemptyelement,whereyoudonotneedopeningandclosingtags, asthereis nothingtogo in
between them.
• The<br/>taghasaspacebetweenthecharactersbrandtheforwardslash.Ifyouomit this space,older browsers
will have trouble rendering the line break, while if you miss the forward slash character and just use
<br> it is not valid in XHTML.
Example
<!DOCTYPEhtml>
<html>
<head>
<title>LineBreakExample</title>
</head>
<body>
<p>Hello<br/>
Youdeliveredyourassignmentontime.<br/>
Thanks<br />
Mahnaz</p></body></html>
CenteringContent
Youcanuse<center>tagtoputanycontentinthecenterofthepageoranytablecell. Example
<!DOCTYPEhtml>
<html>
<head>
<title>CentringContentExample</title>
</head>
<body>
<p>Thistextisnot inthe center.</p>
<center>
<p>Thistextisinthe center.</p>
</center>
</body>
</html>

HorizontalLines
□ Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line
fromthecurrentpositioninthedocumenttotherightmarginandbreaksthelineaccordingly.Forexample, you may
want to give a line between two paragraphs as in the given example below − Example

<!DOCTYPEhtml>
<html>
7
 <head>
<title>HorizontalLineExample</title>
</head>
<body>
<p>Thisisparagraphoneandshouldbeontop</p>
<hr/>
<p>Thisisparagraphtwoandshouldbeatbottom</p>
</body>
</html>
• Again<hr/>tagisanexampleoftheemptyelement,whereyoudonotneedopeningandclosingtags, as there is
nothing to go in between them.
• The<hr/>elementhasaspacebetweenthecharactershrandtheforwardslash.Ifyouomitthisspace, older
browsers will have trouble rendering the horizontal line, while if you miss the forward slash character
and just use <hr> it is not valid in XHTML Preserve Formatting
• Sometimes,youwantyourtexttofollowtheexactformatofhowitiswrittenintheHTMLdocument.In these
cases, you can use the preformatted tag <pre>.
Anytextbetweentheopening<pre>tagandthe closing</pre>tagwill preservethe formattingofthesource document.
Example
<!DOCTYPEhtml>
<html>
<head>
<title>PreserveFormattingExample</title>
</head>
<body>
<pre>
functiontestFunction(strText){ alert
(strText)
}
</pre>
</body>
</html>
Tryusingthesamecodewithoutkeepingitinside<pre>...</pre>tags
NonbreakingSpaces
□Supposeyouwanttousethephrase"12AngryMen."Here,youwouldnotwantabrowsertosplitthe"12, Angry" and
"Men" across two lines −
Anexampleofthistechniqueappears inthemovie"12AngryMen."

Incases,whereyoudonotwanttheclientbrowsertobreaktext,youshoulduseanonbreakingspace
entity&nbsp;insteadofanormalspace.Forexample,whencodingthe"12AngryMen" inaparagraph,you should use
something similar to the following code − Example
<!DOCTYPEhtml>
<html>
<head>
<title>NonbreakingSpacesExample</title>
</head>
<body>
<p>Anexampleofthistechniqueappears inthemovie "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>

8
Imageinsert
<!DOCTYPEhtml>
<html lang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<imgsrc="../Downloads/Image.jpg"width="400"height="200">
<br>HelloUser!<br>HowareYou?
</Body>
</Html>
</body>
</html>

PRACTICAL-3
Aim:Developaregistrationformbyusingvariousformelementlikeinputboxtextarearadiobutton. Source

Code :

<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width,initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif; background-
color: pink;}
.container
{ padding:50p
x;
background-color: lightblue;}
input[type=text], input[type=password],
textarea { width: 100%; padding:15px;
margin: 5px 0 22px 0; display:inline-block;
border: none; background: #f1f1f1;}
input[type=text]:focus, input[type=password]:focus { background-
color: orange;
9
outline:none;}

10
 div{ padding:10px 0;
} hr{ border:1pxsolid
#f1f1f1; margin-bottom:
25px;}
.registerbtn{
background-color:#4CAF50;
color: white;
padding: 16px
20px; margin:
8px0; border:
none; cursor:
pointer; width:
100%; opacity:
0.9; }
.registerbtn:hover
{ opacity:1;}
</style>
</head>
<body>
<form>

<div class="container">
<center><h1>StudentRegisterationForm</h1></center>
<hr>
<label>Firstname</label>
<inputtype="text"name="firstname"placeholder="Firstname"size="15"required/>
<label>Middlename:</label>
<inputtype="text"name="middlename"placeholder="Middlename"size="15"required/>
<label>Lastname:</label>
<inputtype="text"name="lastname"placeholder="Lastname"size="15"required />
<div><label></label>

<select>
<optionvalue="Course">Course</option><optionvalue="BCA">BCA</option>
<optionvalue="BBA">BBA</option><optionvalue="B.Tech">B.Tech</option>
<optionvalue="MBA">MBA</option><optionvalue="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div><div><label>Gender:</label><br>
<inputtype="radio"value="Male"name="gender"checked>Male
<inputtype="radio"value="Female"name="gender">Female
<inputtype="radio"value="Other"name="gender">Other
</div><label>Phone :</label>
<inputtype="text"name="countrycode"placeholder="CountryCode"value="+91" size="2"/>
<inputtype="text"name="phone"placeholder="phoneno."size="10"/required> Current
Address :
<textareacols="80"rows="5"placeholder="CurrentAddress"value="address"required>
</textarea>
<labelfor="email"><b>Email</b></label>
<inputtype="text"placeholder="EnterEmail"name="email"required>
<labelfor="psw"><b>Password</b></label>
<inputtype="password"placeholder="EnterPassword"name="psw"required>
11
 <labelfor="psw-repeat"><b>Re-typePassword</b></label>
<inputtype="password"placeholder="RetypePassword"name="psw-repeat"required>
<button type="submit" class="registerbtn">Register</button>

</form></body></html>Output:

PRACTICAL-4
Aim:DesigninHTMLpagebyusingtheconceptofinternalinlineexternalstylesheet. Source Code
:

• CascadingStyleSheets(CSS)describehowdocumentsarepresentedonscreens,inprint,orperhaps how
they are pronounced.W3C has actively promoted the use of style sheets on theWeb since the
consortium was founded in 1994.
• CascadingStyleSheets(CSS)provideeasyandeffectivealternativestospecifyvariousattributesforthe
HTMLtags. Using CSS, you can specify a number of style properties for a given HTMLelement. Each
property has a name and a value, separated by a colon (:). Each property declaration is separated by a
semicolon (;).
12
Example
• Firstlet'sconsideranexampleofHTMLdocumentwhichmakesuseof<font>tagandassociated
attributes to specify text color and font size −
Note −The font tag deprecated and it is supposed to be removed in a future version of HTML. So they
shouldnotbeusedrather,it'ssuggestedtouseCSSstylestomanipulateyourfonts.Butstillforlearning purpose, this
chapter will work with an example using the font tag.
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLCSS</title>
</head>
<body>
<p><fontcolor="green"size="5">Hello,World!</font></p>
</body>
</html>
Wecanre-writeaboveexamplewiththehelpofStyleSheetasfollows−
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLCSS</title>
</head>
<body>
<pstyle="color:green;font-size:24px;">Hello,World!</p>
</body>
</html>
YoucanuseCSSinthreewaysinyourHTMLdocument−
ExternalStyleSheet−Definestylesheetrulesin aseparate.cssfileandthenincludethatfileinyourHTML document
using HTML <link> tag.
InternalStyleSheet −DefinestylesheetrulesinheadersectionoftheHTMLdocumentusing<style>tag.
InlineStyleSheet −Definestylesheetrulesdirectlyalong-withtheHTMLelementsusingstyleattribute.

Let'sseeallthethreecasesonebyonewiththehelpofsuitableexamples. External
Style Sheet
Ifyouneedtouseyourstylesheettovariouspages,thenitsalwaysrecommendedtodefineacommonstylesheet in a separate
file.Acascading style sheet file will have extension as .css and it will be included in HTMLfiles using <link> tag.
Example
Considerwedefineastylesheetfilestyle.csswhich hasfollowingrules−
.red{color:red;}
.thick{font-size:20px;}
.green{color:green;}
□HerewedefinedthreeCSSruleswhichwillbeapplicabletothreedifferentclassesdefinedfortheHTML tags. I
suggest you should not bother about how these rules are being defined because you will learn them
whilestudyingCSS.Nowlet'smakeuseofthe aboveexternalCSSfile inourfollowingHTMLdocument−
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLExternalCSS</title>

13
 <linkrel="stylesheet"type="text/css" href="/html/style.css">
</head>
<body>
<pclass="red">Thisisred</p>
<pclass="thick">Thisisthick</p>
<pclass ="green">Thisisgreen</p>
<pclass="thickgreen">Thisisthickandgreen</p>
</body>
</html>
InternalStyleSheet
If youwanttoapplyStyleSheetrulestoasingledocumentonly,thenyoucanincludethoserulesinheader section of the
HTML document using <style> tag.
Rulesdefinedininternalstylesheet overridestherulesdefinedinanexternalCSSfile. Example
Let'sre-writeaboveexampleonceagain,butherewewillwritestylesheetrulesinthesameHTMLdocument using
<style> tag −
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLInternalCSS</title>
<styletype= "text/css">
.red { color:red; }
.thick{ font-size:20px; }
.green{ color:green; }
</style>
</head>
<body>
<pclass="red">Thisisred</p>
<pclass="thick">Thisisthick</p>
<pclass ="green">Thisisgreen</p>
<pclass="thickgreen">Thisisthickandgreen</p>
</body>
</html>
InlineStyleSheet
YoucanapplystylesheetrulesdirectlytoanyHTMLelementusingstyleattributeoftherelevanttag.This should be
done only when you are interested to make a particular change in any HTMLelement only.
Rulesdefinedinlinewiththeelementoverridesthe rulesdefinedinanexternalCSSfileaswellastherules defined in
<style> element. Example
Let'sre-writeaboveexampleonceagain,but herewewillwritestylesheetrulesalongwiththeHTMLelements using style
attribute of those elements.
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLInlineCSS</title>
</head>
<body>
<pstyle="color:red;">Thisisred</p>
<pstyle="font-size:20px;">Thisis thick</p>
<pstyle="color:green;">Thisis green</p>
<pstyle="color:green;font-size:20px;">Thisisthickandgreen</p>
</body>

14
</html>

PRACTICAL-5
Aim:WriteanHTMLpageincludingJavaScriptthattakesagivensetofintegernumbersandshowsthem after
sorting in descending order.
SourceCode:

<html>
<head>
<title>NumberinDescendingOrder</title>
<script language="javascript"> function
ndesc(){varnum_array=newArray();var
num=document.forms["frm1"].num.value
;document.forms["frm1"].desc.value="";
var nums =
num.split(','); var
len=num.split(',').length
;for(vari=0;i<len;i++){
num_array.push(nums[i
]);} function
sortN(a,b){returnb-
a;}
document.forms["frm1"].desc.value=num_array.sort(sortN);}
</script></head><body>
<form name="frm1">
<center>
<h3>NumbersinDescendingOrder</h3>
</center><br/><center>
EnterNumbersseparatedbyComma:<inputtype="text"name="num"</input><br/></center><br/><center>
<inputtype="button"name="inwords"value="InDescendingOrder"onclick="ndesc()"></input></center>
<br/><br/><center>NumberinDescendingOrder:<inputtype="text" name="desc"</input></center><br/>
</form>
</body>
</html>

Output:

15
 PRACTICAL-6
Aim:
WriteanHTMLpage includinganyrequiredJavaScriptthat takesanumberfromone textfieldinthe range
of 0 to 999 and shows it in anothertext field in words. if the number is out of range, it should
show“outofrange”andifitisnotanumber,itshouldshow“notanumber”messageintheresultbox.

SourceCode:

<html>
<head>
<title>Number in
words</title> <script
language="javascript">func
tion convert()
{
varnum=document.forms["frm1"].num.value;
document.forms["frm1"].words.value="";
if(isNaN(num))
{
alert("Nota Number");
}
elseif (num<0||num>999)
{
alert("Outof Range");
}
el
s
e
{
var
len=num.length;
var words="";
for(var
i=0;i<len;i++)
{
16
varn=num.substr(i,1);
switch(n)
{ case '0':words+="Zero
";break; case
'1':words+="One ";break;
case '2':words+="Two
";break; case
'3':words+="Three";break;
case '4':words+="Four
";break; case
'5':words+="Five ";break;
case '6':words+="Six
";break; case
'7':words+="Seven";break;
case '8':words+="Eight
";break;
default:words+="Nine ";
}
}
document.forms["frm1"].words.value=words;
}
}
</script>
</head>
<body>
<form name="frm1">
<center><h3>NUMBERINWORDS</h3></center>

<br/>
<center>EnteraNumber:<inputtype="text"name="num"</input><br/></center>
<br/>
<center><inputtype="button"name="inwords"value="InWords"onclick="convert()"></input></center>
<br/><br/><center>NumberinWords:<inputtype="text"name="words"</input></center><br/>
</form>
</body>
</html>

Output:

17
 PRACTICAL-7
Aim:DemonstratetheuseofloopsandarrayinPHP Source
Code :

• LoopsinPHPareusedtoexecutethesameblockofcodeaspecifiednumberoftimes.PHPsupports following
four loop types.
• for −loopsthrougha blockof codeaspecifiednumber of times.
• while−loopsthrougha blockof codeifand aslongasa specified conditionistrue.
• do...while−loopsthroughablockofcodeonce, andthenrepeatstheloopaslongasaspecial condition is true.
• foreach− loopsthroughablockofcodeforeachelement inanarray.
Wewilldiscussaboutcontinueandbreakkeywordsusedtocontroltheloopsexecution.
Theforloop statement
Theforstatementisusedwhenyouknowhowmanytimesyouwantto executeastatementorablockof statements.

18
Syntax
for(initialization;condition;increment)
{ code to be executed;
}
Theinitializeris usedtosetthestartvalueforthecounterofthenumberofloopiterations.Avariablemaybe declared here
for this purpose and it is traditional to name it $i.
Example
Thefollowingexamplemakesfiveiterationsandchangestheassignedvalueoftwovariablesoneachpass of the
loop − <html>
<body>

<?php
$a=0;
$b =0;

for($i=0;$i<5;$i++) {
$a+= 10;
$b+= 5;
}
echo("Atthe endof theloop a=$aandb=$b"
); ?>
</body>
</html>
This willproducethefollowingresult
−Attheendoftheloopa=50andb= 25
Thewhileloopstatement
Thewhile statementwillexecuteablockofcodeifandaslongasatestexpressionistrue.
Ifthetest expressionistruethenthecodeblockwill beexecuted.Afterthecodehas executedthetestexpression will again
be evaluated and the loop will continue until the test expression is found to be false.

19
Syntaxwhile
(condition)
{ code to be
executed;
}
Example
This exampledecrementsavariablevalueoneachiterationoftheloopandthecounterincrementsuntilitreaches 10 when
the evaluation is false and the loop ends.
<html>
<body>

<?php
$i= 0;
$num= 50;

while($i<10) {
$num--;
$i++;
}

echo("Loopstoppedati=$i andnum=$num");
?>

</body>
</html>

Thiswillproducethefollowingresult−
Loop stopped at i = 10 and num = 40
The do...while loop statement
Thedo...whilestatementwill executeablockofcodeat leastonce-it thenwillrepeattheloopaslongasa condition is true.
Syntax do {
codetobeexecuted;
}
while(condition);
Example

20
Thefollowingexamplewillincrementthevalueofi atleastonce,anditwillcontinueincrementingthevariablei as long as
it has a value of less than 10 −

<html>
<body>

<?php
$i= 0;
$num= 0;

do {
$i++;
}

while($i<10);
echo("Loopstoppedat i=$i");
?>

</body>
</html>
Thiswillproducethefollowingresult−
Loop stopped at i = 10
Theforeachloopstatement
The foreach statement is used to loop through arrays. For each pass the value of the current array element is
assignedto$valueandthearraypointerismovedbyoneandinthenextpassnextelementwillbeprocessed. Syntax
foreach (array as value) { code to be executed;
}
Example
Tryout followingexampletolistoutthevaluesofan array.

<html>
<body>

<?php
$array=array( 1,2,3,4,5);

foreach( $array as $value )

{ echo"Valueis$value<br/>";
}
?>

</body>
</html>Thiswillproducethefollowingresult− Value
is 1
Valueis2
Valueis3
Valueis4
Valueis5

21
Thebreak statement
ThePHPbreakkeywordisusedtoterminate theexecutionofaloopprematurely.
Thebreakstatementissituatedinsidethestatementblock.Itgivesyoufullcontrolandwheneveryouwantto exit from
the loop you can come out.After coming out of a loop immediate statement to the loop will be executed.
Example

Inthe followingexampleconditiontestbecomestruewhenthe countervaluereaches3andloopterminates.

<html>
<body>

<?php
$i= 0;

while($i<10) {
$i++;
if( $i== 3 )break;
}
echo("Loopstoppedat i=$i");
?>

</body>
</html>
Thiswillproducethefollowingresult−
Loop stopped at i = 3
Thecontinuestatement
ThePHPcontinuekeywordis usedtohaltthecurrentiterationofaloopbutitdoesnotterminate theloop.
Justlikethe breakstatementthecontinuestatementissituatedinsidethestatementblockcontainingthe codethat the loop
executes, preceded by a conditional test. For the pass encountering continue statement, rest of the loop code is
skipped and next pass starts.

22
Example
Inthefollowingexampleloopprintsthevalueofarraybutforwhichconditionbecomestrueitjustskipthecode and next
value is printed.
<html>
<body>
<?php
$array=array( 1,2,3,4,5);

foreach($arrayas$value)
{ if($value==3
)continue; echo"Valueis
$value<br/>";
}
?>
</body>
</html>
Thiswillproducethefollowingresult−
Value is 1
Valueis2
Valueis4
Valueis5

PRACTICAL-8
Aim:CreateaPHPfileusinggetandpostmethod Source
Code :

• PHPprovidestwomethodsthroughwhichaclient(browser)cansendinformationtotheserver.These
methods are given below, and discussed in detail:
GET method
POSTmethod
• GetandPostmethods aretheHTTP requestmethodsusedinsidethe<form>tagtosendformdatatothe server.
• HTTPprotocolenablesthecommunicationbetweentheclientandtheserverwhereabrowsercanbethe client,
and an application running on a computer system that hosts your website can be the server.
GETmethod
• TheGETmethodisusedtosubmit theHTMLformdata.Thisdataiscollectedbythepredefined$_GET variable
for processing.

23
 • TheinformationsentfromanHTML formusingtheGETmethodis visibletoeveryoneinthebrowser's address
bar, which means that all the variable names and their values will be displayed in the URL. Therefore,
the get method is not secured to send sensitive information.
ForExample
• localhost/gettest.php?username=Harry&bloodgroup=AB+
• TheboldpartintheaboveURListhevariablesnameanditalicpartcontainsthevaluesfortheir
corresponding variable.
• Withthehelpofanexample,let'sunderstandhowtheGETmethodworks-
Example
• ThebelowcodewilldisplayanHTMLformcontainingtwoinputfields andasubmitbutton.Inthis HTML
form, we used the method = "get" to submit the form data.
file: test1.html
<html>
<body>

<formaction="gettest.php"method= "GET">
Username: <input type = "text" name = "username" /><br>
BloodGroup:<inputtype="text"name="bloodgroup"/><br>
<inputtype="submit"/>
</form>

</body>
</html>

Creategettest.phpfile,whichwillacceptthedatasentbyHTMLform. file:
gettest.php
<html>
<body>

Welcome<?phpecho$_GET["username"];?></br>
Yourbloodgroupis:<?phpecho$_GET["bloodgroup"];?>

</body>
</html>
WhentheuserwillclickonSubmit buttonafterfillingtheform,theURLsenttotheservercouldlooksomething like this:
localhost/gettest.php?username=Harry&bloodgroup=AB-
The output will look like the below output:
WelcomeHarry
Yourbloodgroupis:AB-
AdvantagesofGETmethod(method="get")

24
YoucanbookmarkthepagewiththespecificquerystringbecausethedatasentbytheGETmethodisdisplayed in URL.
GETrequestscanbe cached.
GETrequestsarealwaysremainedinthebrowserhistory. Disadvantages
of GET Method
TheGETmethodshouldnotbeusedwhilesendinganysensitiveinformation.
Alimitedamountofdatacan besent usingmethod="get".Thislimit shouldnotexceed2048characters. For
security reasons, never use the GET method to send highly sensitive information like username and
password, because it shows them in the URL.
TheGETmethodcannotbeusedtosendbinarydata(suchasimagesorworddocuments)totheserver. POST method
SimilartotheGETmethod,thePOSTmethodisalsousedtosubmittheHTMLformdata.Butthedatasubmitted by this
method is collected by the predefined superglobal variable $_POST instead of $_GET.

UnliketheGETmethod,itdoesnot havealimit ontheamount ofinformationtobesent.Theinformationsent from an

HTMLform using the POST method is not visible to anyone. For Example
localhost/posttest.php
Withthehelpofanexample,let'sunderstandhowthePOSTmethodworks-
Example
ThebelowcodewilldisplayanHTMLformcontainingtwoinputfields andasubmitbutton.Inthis HTMLform, we used
the method = "post" to submit the form data.
file: test2.html
<html>
<body>

<formaction="posttest.php"method="post">
Username: <input type = "text" name = "username" /><br>
BloodGroup:<inputtype="text"name="bloodgroup"/><br>
<inputtype="submit"/>
</form>

</body>
</html>

Nowcreateposttest.phpfiletoacceptthedatasentbyHTMLform. file:
posttest.php
<html>
<body>

Welcome<?phpecho$_POST["username"];?></br>
Yourbloodgroupis:<?phpecho$_POST["bloodgroup"];?>

25
 </body>
</html>
WhentheuserwillclickonSubmit buttonafterfillingtheform,theURLsenttotheservercouldlooksomething like this:

localhost/posttest.php
Theoutputwilllooklike the belowoutput:
WelcomeHarry
Yourbloodgroupis:O+
AdvantagesofPOSTmethod(method="post")
ThePOSTmethodisusefulforsendinganysensitiveinformationbecausetheinformationsentusingthePOST method
is not visible to anyone.
ThereisnolimitationonsizeofdatatobesentusingthePOSTMethod.Youcansendalargeamountof information using
this method.
BinaryandASCIIdata canalsobe sentusingthe POSTmethod.
DatasecuritydependsontheHTTPprotocolbecausetheinformationsentusingthePOSTmethodgoesthrough the
HTTPheader. By using secure HTTP, you can ensure that your data is safe. Disadvantages of POST Method
POST requests do not cache.
POSTrequestsneverremaininthebrowser history.
Itis notpossibletobookmarkthepagebecausethevariablesarenotdisplayedinURL.
$_REQUESTvariable
The $_REQUEST variable is a superglobal variable, which can hold the content of both $_GET and $_POST
variable. In other words, the PHP $_REQUEST variable is used to collect the form data sent by either GET or
POSTmethods.Itcanalsocollectthedatafor$_COOKIEvariablebecauseitisnotamethod-specificvariable.

PRACTICAL-9
Aim:
Asimple calculator web application that takes two numbers and an operator ( ,-,/,* and %)from an
HTMLpageandreturnstheresultpagewiththeoperationperformedontheoperands.SourceCode:

<html>
<head>
<title>SimpleCalculator</title>
</head>
<body>
<h2align="center">SimpleCalculator</h2>
<formmethod="post" action="Simplecalc.php">
<tablealign="center">
<tr>
<td>EnterFirstNumber:</td>
<td><inputtype="text"name="fnum"></input></td>
</tr>
<tr>
<td>EnterSecondNumber:</td>
<td><inputtype="text"name="snum"></input></td>
</tr>
<tr><td><br/></td></tr>
<tr>

26
<tdcolspan=2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<inputtype="submit"name="op"value="+"></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<inputtype="submit"name="op"value="-"></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<inputtype="submit"name="op"value="*"></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" name="op"
value="/"></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<inputtype="submit"name="op"
value="%"></input></td></tr>
</table>
</form>
</body>
</html>

Simplecalc.php

<?php
$num1=$_POST["fnum"];
$num2=$_POST["snum"];
$op=$_POST["op"];
if($num1==""or$num2=="")
{
echo"Pleaseentertwonumbers...";
}
el
s
e
{

echo"First Number is:".$num1."<br/>";

echo"SecondNumberis:".$num2."<br/>";
echo"Operatoris:".$op."<br/>";
if($op=="+")
{
$res=$num1+$num2;
echo"Additonis:".$res;
}
if($op=="-")
{
$res=$num1-$num2;
echo "Subtraction is : ".$res; }
if($op=="*")
{ $res=$num1*$num2;
echo "Multiplication is : ".$res;}
if($op=="/")
{$res=$num1/$num2;echo"Div
isionis:".$res;}
if($op=="%")
{ $res=$num1%$num2;
echo"Modulusis:".$res; }}?>
27
Output:

PRACTICAL-10
Aim:Aweb application for implementation: The user is first served a login page which takes user’s name
and password.After submitting the details the server checks these values against the data from a
databaseandtakesthefollowingdecisions.•If nameandpasswordmatchesservesawelcomepagewith user’s
full name. • If name and password doesn’t match, then serves “password mismatch” page. • If name is
not found in the database, serves a registration page, where user’s full name is asked and on submitting
the full name, it stores, the login name, password and full name in the database (hint: use session for
storing data, submitted login name and password). Source Code:
Logindemo.php

<html><head><title>Login</title></head><body>
<formname="form1"method="post">
<tablealign="center"width="70%"border="0"cellpadding="3"cellspacing="1">
<tr><tdcolspan=2align="center">
<b><h3>MemberLogin</h3></b></td></tr><br/><tr><td>Username:</td>
<td><inputname="uname"type="text"></td></tr><tr><td>Password:</td>
<td><inputname="pwd"type="password"></td></tr><tr><td></td>
<td><inputtype="submit"name="btnlog"value="Login"></td>
</tr></table><br/><br/>
<center><h4>ForRegisteration:<ahref="Registrationdemo.php">ClickHere</a></h4></center>
</form><?phpif(isset($_POST['btnlog'])){$host='localhost';$user='root';$pass='';$dbname='Sampledb';
$conn=mysqli_connect($host,$user,$pass,$dbname);$uname=$_POST["uname"];$pwd=$_POST["pwd"];
$sql="SELECT*FROMpersonswhereUserId='$uname'";$retval=mysqli_query($conn,$sql);
if(mysqli_num_rows($retval) > 0){while($row = mysqli_fetch_assoc($retval)){ if($row["Password"]==$pwd)
{session_start();
$_SESSION["fname"]=$row["Fname"];header('Location:Welcomedemo.php');}else{
echo"<center><b><fontcolor='red'>PasswordMismatch</font></b></center>";}}}
else{header('Location: Registrationdemo.php');
//echo"<center><b><fontcolor='red'>UserNotExist..PleaseRegister</font></b></center>";}
mysqli_close($conn);}?></body></html>

28
Registrationdemo.php

<html><head><title>Registration</title></head><body><formname="form1"method="post">
<tablealign="center"width="70%"border="0"cellpadding="3"cellspacing="1">
<tr><tdcolspan=2align="center"><b><h3>UserRegistration</h3></b></td>
</tr><br/><tr><td>Fullname:</td><td><inputname="fname"type="text"></td>
</tr><tr><td>Username:</td><td><inputname="uname"type="text"></td></tr><tr>
<td>Password:</td><td><inputname="pwd"type="password"></td></tr><tr><td></td>
<td><inputtype="submit"name="btnreg"value="Register"></td></tr></table><br/><br/>
<center><h4>ForLogin:<ahref="LoginDemo.php">ClickHere</a></h4></center></form><?
phpif(isset($_POST['btnreg']))
{ $host= 'localhost';
$user='root';
$pass='';
$dbname='Sampledb';
$conn=mysqli_connect($host,$user,$pass,$dbname);
$fname=$_POST["fname"];
$uname=$_POST["uname"];
$pwd=$_POST["pwd"];
$sql="insertintopersonsvalues('$fname','$uname','$pwd')";
if(mysqli_query($conn, $sql)){
echo"<center><b><fontcolor='green'>RegistrationSuccessful</font></b></center>";}else{
echo"<center><b><fontcolor='red'>Registrationfailure</font></b></center>";}mysqli_close($conn);
}?></body></
html>Welcomedemo
.php

Warning:highlight_file(wt/Welcomedemo.php):failedtoopenstream:Nosuchfileordirectoryin
/home/u681245571/domains/studyglance.in/public_html/labprograms/wtdisplay.phponline112

Warning:highlight_file():Failedopening'wt/Welcomedemo.php'forhighlightingin
/home/u681245571/domains/studyglance.in/public_html/labprograms/wtdisplay.phponline112

Output:

29
 PRACTICAL-11
Aim:DemonstratetheuseofAjaxandJSONandTechnologiesinprogrammingexample Source
Code :

AjaxJava Example
Tocreateajaxexample,youneedtouseanyserver-sidelanguagee.g.Servlet,JSP,PHP,ASP.Netetc.Herewe are using
JSP for generating the server-side code.
In this example, we are simply printing the table of the given
number.StepstocreateajaxexamplewithjspYouneedtofollow
following steps:
load the org.json.jar file create input page
toreceiveanytextornumbercreateserver side
page to process the request provide entry
in web.xml file

Loadtheorg.json.jarfiledownloadthisexample,wehaveincludedtheorg.json.jarfile inside the

WEB-INF/lib directory.
createinputpagetoreceiveanytextornumber In
this page, we have created a form that gets input from the user. When user clicks on the showTable
button,sendInfo()functioniscalled.Wehavewrittenalltheajaxcodeinsidethisfunction.
WehavecalledthegetInfo()functionwheneverreadystatechanges.Itwritesthereturneddatainthewebpage dynamically by
the help of innerHTML property.
table1.html
<html>
<head>
<script>var
request;
function
sendInfo()
{
varv=document.vinform.t1.value;
var url="index.jsp?val="+v;

if(window.XMLHttpRequest){

30
request=newXMLHttpRequest();
}
else if(window.ActiveXObject){
request=newActiveXObject("Microsoft.XMLHTTP");
}

t
r
y

{
request.onreadystatechange=getInfo;
request.open("GET",url,true);
request.send();
}
catch(
e)
{
alert("Unabletoconnecttoserver");
}
}

function getInfo(){
if(request.readyState==4)
{ var
val=request.responseText;

document.getElementById('amit').innerHTML=val;
}
}

</script>
</head>
<body>
<marquee><h1>Thisisanexampleofajax</h1></marquee>
<form name="vinform">
<inputtype="text"name="t1">
<inputtype="button"value="ShowTable"onClick="sendInfo()">
</form>

<spanid="amit"></span>

</body>
</html>
createserversidepagetoprocesstherequest
Inthisjsppage,weprintingthetableofgiven number.
index.jsp<%
intn=Integer.parseInt(request.getParameter("val"));

for(inti=1;i<=10;i++)
31
out.print(i*n+"<br>");

%>
web.xml
<?xmlversion="1.0"encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-
app_2_5.xsd">

<session-config>
<session-
timeout>30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>table1.html</welcome-file>
</welcome-file-list>
</web-app>

Output:

JSONExample
JSONexamplecanbecreatedbyobjectandarray.Eachobjectcanhavedifferentdatasuchastext,number, boolean etc.
Let's see different JSON examples using object and array. JSON Object Example
AJSONobjectcontainsdataintheformofkey/valuepair.ThekeysarestringsandthevaluesaretheJSON types. Keys
and values are separated by colon. Each entry (key/value pair) is separated by comma. The { (curly brace)
represents the JSON object.
{
"employee":{
"name": "sonoo",
"salary": 56000,
"married": true
}
}
JSONArrayexample
The[(squarebracket)representstheJSONarray.AJSONarraycanhavevaluesandobjects. Let's see
the example of JSON array having values.

32
["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] Let's
see the example of JSON array having objects.
[
{"name":"Ram","email":"Ram@gmail.com"},
{"name":"Bob","email":"bob32@gmail.com"}
]
JSONExample1
{"employees":[
{"name":"Shyam","email":"shyamjaiswal@gmail.com"},
{"name":"Bob","email":"bob32@gmail.com"},
{"name":"Jai","email":"jai87@gmail.com"}
]}
TheXMLrepresentationofaboveJSONexampleis given below.
<employees>
<employee>
<name>Shyam</name>
<email>shyamjaiswal@gmail.com</email>
</employee>
<employee>
<name>Bob</name>
<email>bob32@gmail.com</email>

</employee>
<employee>
<name>Jai</name>
<email>jai87@gmail.com</email>
</employee>
</
employees>JSON
Example2
{"menu": {
"id":"file",
"value":"File",
"popup": {
"menuitem":[
{"value":"New","onclick": "CreateDoc()"},
{"value":"Open","onclick":"OpenDoc()"},
{"value":"Save","onclick": "SaveDoc()"}
]
}
}}
TheXMLrepresentationofaboveJSONexampleis given below.
<menuid="file"value="File">
<popup>
<menuitemvalue="New"onclick="CreateDoc()"/>
<menuitemvalue="Open"onclick="OpenDoc()"/>
<menuitemvalue="Save"onclick="SaveDoc()" />
</popup>
</menu>

33
 Practical-12
MinorProject
Overview- It is a webpage named as tindog formeeting dogs nearby .In this project
I have used html with some bootstrap and external source the snippets and code is
given below:-
HTMLfile:-
<!DOCTYPEhtml>
<htmllang="en"dir="ltr">

<head>
<metacharset="utf-8">
<title>TindogByHoney</title>
<linkrel="shortcuticon"href="dog.ico">
<!--bootstrapcdn-->
<link rel="stylesheet"
href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9
UJ0Z" crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS
6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hX
pG5KkN" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b
4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCm
Yl" crossorigin="anonymous"></script>

34
<linkrel="stylesheet"href="css\styles.css">
<!--googlefonts-->
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght@900&family=Ubuntu:wght@500&display=swap"
rel="stylesheet">
<!--fontawesome-->
<script src="https://kit.fontawesome.com/3abea29ba2.js"
crossorigin="anonymous"></script>

</head>

<body>

<sectionid="title">
<divclass="container-fluid">

<navclass="navbarnavbar-expand-lgnavbar-dark">
<aclass="navbar-brand"href="">Tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<spanclass="navbar-toggler-icon"></span>
</button>
<divclass="collapsenavbar-collapse"id="navbarSupportedContent">
<ulclass="navbar-navml-auto">
<liclass="nav-item">
<aclass="nav-link"href="#copyright-item">Contact</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#pricing">Pricing</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#copyright">Download</a>
</li>
</ul>
</div>
</nav>
<!--title-->
<divclass="row">
35
<divclass="col-lg-6">

<h1>meetnewandintrestingdogsnearby</h1>

<buttontype="button"class="btnbtn-darkbtn-lgdownload-
button"name="button"><i class="fab
fa-apple"></i>Download</button>
<buttontype="button"class="btnbtn-outline-lightbtn-lgdownload-button"
name="button"><i class="fab fa-google-play"></i> Download</button>
</div>
<divclass="col-lg-6">
<imgclass="title-image"src="images\iphone6.png"alt="iphonemockup">

</div>
</div>
</div>
</section>
<sectionid="features">
<divclass="row">
<divclass="feature-boxcol-lg-4">
<iclass="iconfasfa-check-circlefa-4x"></i>
<h3>EASYTOUSE</h3>
<p>easytouseevenyourdogcoulddo it.</p>

</div>
<divclass="feature-boxcol-lg-4">
<iclass="iconfasfa-bullseyefa-4x"></i>
<h3>ELITECLIENTELE</h3>
<p>wehaveallthedogs,thegreatestdogs</p>
</div>
<divclass="feature-boxcol-lg-4">
<iclass="iconfasfa-heartfa-4x"></i>

<h3>GUARANTEEDTOWORK</h3>

<p>findtheloveofyourdog'slifeormoneyback.

35
</div>

</section>
<sectionid="testimonials">

<divid="testimonial-carousel"class="carouselslide"data-ride="slide">
<divclass="carousel-inner">
<divclass="carousel-itemactive">
<h2>Inolongerhavetosniffotherdogsforlove.Ihavefoundthehottestdogion
Tindog.Woof.</h2>
<imgclass="testimonial-image"src="images\dog-img.jpg"alt="dog-img">
<em>pebbler,NewYork</em>
</div>
<divclass="carousel-item">
<h2>Inolongerhavetosniffotherdogsforlove.Ihavefoundthehottestdogion
Tindog.Woof.</h2>
<imgclass="testimonial-image"src="images\dog-img.jpg"alt="dog-img">
<em>ronaldo,Germany</em>
</div>
<divclass="carousel-item">
<h2>Inolongerhavetosniffotherdogsforlove.Ihavefoundthehottestdogion
Tindog.Woof.</h2>
<imgclass="testimonial-image"src="images\dog-img.jpg"alt="dog-img">
<em>coco,Paris</em>
</div>
</div>
<aclass="carousel-control-prev"href="#testimonial-carousel"role="button"data-
slide="prev">
<spanclass="carousel-control-prev-icon"aria-hidden="true"></span>
<spanclass="sr-only">Previous</span>
</a>
<aclass="carousel-control-next"href="#testimonial-carousel"role="button"data-
slide="next">
<spanclass="carousel-control-next-icon"aria-hidden="true"></span>

36
<spanclass="sr-only">Next</span>
</a>
</div>

</section>
<!--press-->
<sectionid="press">
<imgclass="press-logo"src="images\TechCrunch.png"alt="tc-logo">
<imgclass="press-logo"src="images\tnw.png"alt="tnw-logo">
<imgclass="press-logo"src="images\bizinsider.png"alt="bizinsider-logo">
<imgclass="press-logo"src="images\mashable.png"alt="mashable-logo">

</section>
<!--pricing-->
<sectionid="pricing">
<h2>APlanforEveryDog'sNeeds</h2>
<p>SimpleandAffordablePricePlansforyouAndyourDog.</p>
<divclass="row">
<divclass="pricing-columncol-lg-4col-md-6">
<divclass="card">
<divclass="card-header">
<h3>chihuahua</h3>
</div>
<divclass="card-body">
<h2>Free</h2>
<p>5Matchesperday.</p>
<p>10Messagesperday</p>
<p>unlimitedAppUsage.</p>
<buttonclass="btnbtn-outline-darkbtn-lgbtn-block"type="button"
name="button">Sign Up</button>

</div>
</div>

37
</div>

<divclass="pricing-columncol-lg-4col-md-6">
<divclass="card">
<divclass="card-header">
<h3>Labrador</h3>
</div>
<divclass="card-body">
<h2>$49/mo</h2>
<p>UnlimitedMatches.</p>
<p>UnlimitedDays</p>
<p>unlimitedAppUsage.</p>
<buttonclass="btnbtn-darkbtn-lgbtn-block"type="button"name="button">Sign
Up</button>

</div>
</div>
</div>
<divclass="pricing-columncol-lg-4">
<divclass="card">
<divclass="card-header">
<h3>Mastiff</h3>
</div>
<divclass="card-body">

<h2>$99/mo</h2>
<p>PriorityListing</p>
<p>UnlimitedMatches.</p>
<p>UnlimitedDays</p>
<p>unlimitedAppUsage</p>
<buttonclass="btnbtn-darkbtn-lgbtn-block"type="button"name="button">Sign
Up</button>
</div>

38
</div>

</div>
</div>

</section>
<!--copyright-->
<sectionid="copyright">
<h2>FindTrueLoveofYourDog'sLifeToday</h2>
<buttontype="button"class="btnbtn-darkdownload-button"name="button"><i
class="fab fa-apple"></i> Download</button>
<button type="button" class="btnbtn-outline-light download-button"
name="button"><iclass="fabfa-google-play"></i>Download</button>

</section>
<sectionid="copyright-item">
<iclass="itemfabfa-facebook"></i>
<iclass="itemfabfa-twitter"></i>
<iclass="itemfabfa-instagram"></i>
<iclass="itemfarfa-envelope"></i>
<pid="tagline">©copyright2020Tindog</p>
</section>

</body>

</html>

CSSfile:-
body{
font-family:'Montserrat',sans-serif;
}
#title{

39
 background-color:#ff4688;
color: #fff;
}
h1{
font-family:'Montserrat',sans-serif;
font-size: 3.5em;
line-height:1.5;
}
h2{
font-size:2.8rem;
line-height: 1.5;
}
h3{
font-family: 'Montserrat';
font-size:1.2em;
}
p{
font-family:'Montserrat-light';
font-size: 1.3em;
color:#8f8f8f;
}
.container-fluid{
padding:3%15%7%;
}
/*naviagtionbar*/
.navbar{
padding:004.5rem;
}
.navbar-brand{
font-family:'Ubuntu';
font-size:2.5em;
font-weight:bold;

40
 .nav-item{
padding:0
18px;
}
.nav-link{
font-family: 'Montserrat-light';
font-size: 1.2rem;

}
/*downloadbutton */
.download-button{
margin:5%3%5%0;
}
/*titleimage */
.title-
image{ margin:
auto;
right:30%;
width:60%;
transform:rotate(25deg);
position: absolute;
}
/*featues-section*/
#features{

background-color:#fff;
position: relative;
z-index:1;
padding:7%15%7%;
}
.feature-box{
text-align:center;
padding:5%;
}
.icon{ color:#ef817
2;

41
margin-bottom:1rem;
}
.icon:hover{ co
lor:#ff4688;

}
#testimonials{
text-align: center;
background-color:#ef8172;
color:#fff;
}
.testimonial-image{
width: 10%;
border-radius:100%;
margin:20px;

}
#press{
background-color:#ef8172;
text-align: center;
padding-bottom:7%;
}
.press-
logo{ width:15%;
margin:20px20px50px;

}
.carousel-
item{ padding:7%15
%;

42
#pricing{
text-align:center;
padding:100px;
}
.pricing-column{
padding:3%2%;
}
@media(max-width:1028px)
{ #title{
text-align:center;
}

.title-
image{ transform:rota
te(0); position:static;
}
}
#copyright{

background-color:#ff4c68;
color:#fff;
text-align:center;
padding:7% 25%;
}
#copyright-item {
padding:2%;
background-color:#fff;
text-align: center;
}
.item{ margin:
2px;
padding:5px;
}

43
#tagline{
letter-spacing:1px;
font-size: 1rem;
}

Output:-

44
45