Web Application
Web Application
(IT) Sem-II
Architecture:
The search engine architecture comprises of the three basic layers listed below:
• Content collection and refinement.
• Search core
• User and application interfaces
Query Process
Query process comprises of the following three tasks:
• User interaction- It supporst creation and refinement of user query and displays the
results.
• Ranking- It uses query and indexes to create ranked list of documents.
• Evaluation- It monitors and measures the effectiveness and efficiency. It is done
offline.
Answer:
<!DOCTYPE html>
<html>
<body>
<ol type="A">
<li>Scripting Languages
<ol type="i">
<li>VB SCRIPT</li>
<li>JAVA SCRIPT</li>
</ol>
</li>
<li>DBMS
<ul type="Square">
<li>ORACLE</li>
<li>MY SQL</li>
</ul>
</li>
</ol>
</body>
</html>
Client-Side Imagemap:-
In this type of Imagemapping, information about the hot region is downloaded on the
client machine with HTML page. So any time (offline) client can use this Imagemap
information. This method is more [Link]-side imagemaps gives faster imagemap
processing and enhance the portability of your HTML documents. Client-side imagemaps
involve sending the map data to the client as part of an HTML file rather than having the
client contact the server each time the map data is needed.
There are three steps involved in creating a client-side imagemap. They are as follows:
1. Create the graphic (image) that you want to map into an imagemap.
2. Define the hot regions for the graphic (using <AREA> tag) and place that information
between the <MAP> and </MAP> tags in your HTML document.
3. Use the <IMG> tag to insert the graphic for the imagemap and link it to the hot region
information you defined in the <MAP>section by using USEMAP attribute of <IMG> tag.
To set up a circular hot region, you would use code such as the following:
<MAP NAME=”circle”>
<AREA SHAPE=”circle” COORDS=”123, 89, 49” ALT=”Circle
Link” HREF=[Link]
</MAP>
Now this mapping information should be linked with an image using:
<IMG SRC=”images/[Link]” USEMAP=”#circle”>
E.g., creating client-side mapping for the image with three shapes viz., circle, rectangle
and triangle, which is saved as [Link].
First Create Hot regions:
<MAP NAME=shape>
<AREA SHAPE=”circle” COORDS=”23,24,20” HREF=[Link] ALT=”circle
clicked”>
<AREA SHAPE=”rect” COORDS=”28,61,92,93” HREF=[Link] ALT=”rectangle
clicked”>
<AREA SHAPE=”poly” COORDS=”80,4,63,37,98,33,80,4” HREF=[Link]
ALT=”triangle clicked”>
</MAP>
Link hot region with image:
<IMG SRC=”[Link]” ALT=”showing different shapes” USEMAP=#shape>
Note: If <MAP> tag is in some other file ([Link]) then use:
<IMG SRC=”[Link]” ALT=”showing different shapes” USEMAP=[Link]#shape>
Server-Side Imagemap:-
In this type of Image mapping, information about the hot region is lying on the server.
When any area or hot region of the Imagemap graphic is clicked, coordinates of that area
are passed by browser to the server. Then server does processing and sends the output.
Steps for creating a server-side imagemap
There are three steps involved in creating a client-side imagemap. They are as follows:
1. Create the graphic (image) that you want to map into an imagemap.
2. Create map file. The map file is a text file that contains information about the hot
regions of a specific imagemap graphics. A separate map file is needed for each imagemap
graphic.
3. Link map file with image by using ‘ISMAP’ attribute of <IMG> tag and putting <IMG>
tag into a hyperlink where ‘HREF’ is pointing to map file.
E.g., creating server-side imagemap for the image with three shapes viz., circle, rectangle
and triangle, which is saved as [Link].
First create a map file that will contain information about hot region. Type the following in
notepad and save as shapes_map.map:
circle [Link] 23,24,44,21
rect [Link] 28,61,92,93
poly [Link] 80,4,63,37,98,33,80,4
Setting ISMAP attribute and using <A> tag:
<A HREF= [Link]
<IMG SRC=[Link] ISMAP>
</A>
When the link is clicked, the browser will request the given link, and add “?x,y” at the end
of it, as the click offset from the left, top corner of the image (such as Shapes_map.map
?47,8). If the user is not using a mouse (or equivalent), then the coordinates will be 0, 0.
b. Write the purpose of using: rowspan, colspan, cellspacing and cellpadding in Table
tag. Give example. [5 Marks]
Answer: [purpose of using:3 marks + example:2 marks]
c. Write HTML code for embedding an audio and video in a web page. [5 marks]
Answer:
<!DOCTYPE html>
<html>
<head>
<title> Embedding an Audio and Video </title>
</head>
<body>
Video:
<br/>
<video width="400" controls>
<source src="myvideo.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<br/>
Audio:
<br/>
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
1) <header>- The <header> element specifies a header for a document or section. The
<header> element should be used as a container for introductory content.
Example:
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
2) <nav>- The <nav> element defines a set of navigation links.
Example:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
3) <section>- The <section> element defines a section in a document. A section is a
thematic grouping of content, typically with a heading."
Example:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
4) <article>: The <article> element specifies independent, self-contained
content.<article> element can be used for Forum post,Blog post,Newspaper article etc.
Example:
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
5) <aside>-The <aside> element defines some content aside from the content it is placed
in (like a sidebar).
Example:
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
6) <footer>- The <footer> element specifies a footer for a document or section.
Example:
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="[Link]
someone@[Link]</a>.</p>
</footer>
e. Write HTML code to design a form to enter name of the user, his password, and
gender (radio button for male/female), hobbies (checkbox for reading/singing/sports),
favorite color (list box red/green/blue) and submit and reset button. [5 marks]
Answer:
<!DOCTYPE html>
<html>
<body>
<form >
User Name : <input type="text" name="user_name" />
<br/>
Password: <input type="password" name="password" />
<br/>
Gender:
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/> Female
<br/>
Hobbies:
<input type="checkbox" name="hobbies1" value="reading"/> Reading
<input type="checkbox" name="hobbies2" value="singing"/> Singing
<input type="checkbox" name="hobbies3" value="sports"/> Sports
<br/>
Favorite color :
<select name="favoritecolor">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<br/>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
f. Explain <DIV> tag with the help of suitable example. [5 Marks]
Answer: [Marks: explanation 4 Marks + example 1 Mark]
<DIV> tag:
• The HTML <div> tag is used for defining a division or a section in an HTML
document.
• With the div tag, you can group large sections of HTML elements together and
format them with CSS.
• So, the <div> tag is used to group block-elements to format them with CSS.
• The <div> element is very often used together with CSS, to layout a web page.
• By default, browsers always place a line break before and after the <div> element.
However, this can be changed with CSS.
• The <div> element is often used as a container for other HTML elements.
• The <div> element has no required attributes, but both style and class are common.
• The <div> tag also supports the Global and the Event Attributes in HTML.
• When used together with CSS, the <div> element can be used to style blocks of
content:
Example:
A section in a document that will be displayed in blue:
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
JavaScript that runs at the client side (i.e. at the client’s browser) is client side JavaScript
(CCJS) and JavaScript that runs at the server is server side JavaScript (SSJS).
Client side JavaScript:
• Client side JavaScript runs on your computer after you load a web page.
• The script should be included in or referenced by an HTML document for the code
to be interpreted by the browser.
• It means a web page need not be a static HTML, but can include code that interact
with the user, controls the browser and dynamically create HTML contents.
• The JavaScript Code is executed when the user submits the form, and only if all the
entries are valid, they would be submitted to the web server.
• It enables web pages on browsers to run active online content.
• It uses <SCRIPT>tag in HTML document.
• This script is interpreted by the browser at run time.
Server side JavaScript:
• Server side JavaScript refers to JavaScript that runs on the server side and is
therefore not downloaded to the browser.
• There are many languages that support Server side scripts like ASP, JSP etc.
• The advantage of the Server side JavaScript is that the code can validate data on
both the client for immediate user validations and on the server for security.
• It enables back-end access to databases, file systems and servers.
• It uses <SERVER>tag in HTML document.
• The Server side JavaScript is deployed only after compilation.
b. Write a JavaScript program to display all the prime numbers between 1 and 100.
[5 marks]
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Prime number between 1 and 100</title>
</head>
<body>
<script>
for(var i=2;i<=100;i++)
{
var flag=0;
for(var j=2;j<=i/2;j++)
{
if(i%j==0)
{
flag=1;
break;
}
}
if(flag==0)
{
[Link](i+"<br>");
}
}
</script>
</body>
</html>
c. List and explain the methods of string object of JavaScript. [5 marks]
Answer: (Any Five:1 mark for each)
Method Description
concat() Joins two or more strings, and returns a new joined strings
indexOf() Returns the position of the first found occurrence of a specified value
in a string
lastIndexOf() Returns the position of the last found occurrence of a specified value
in a string
match() Searches a string for a match against a regular expression, and returns
the matches
substring() Extracts the characters from a string, between two specified indices
toLowerCase() Converts a string to lowercase letters
e. Write the codes to design following web page and validate all the controls placed on
the form using JavaScript as given:
Name should not be blank,
Check email-id is valid,
Check Pin code is 6 digits long.
Name:
Email-id:
Pin code:
SUBMIT
Answer: [5 marks]
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate()
{
if( [Link] == "" )
{
alert( "Please enter your name!" );
[Link]();
return false;
}
email=[Link];
if( email == "" )
{
alert( "Please provide your Email-id" );
[Link]();
return false;
}
var x=[Link]("@");
var y=[Link](".");
if((x<1)||(y<x+2)||(y+2>=[Link]))
{
alert("Enter username@domain");
[Link]();
return false;
}
if( [Link] == "" ||isNaN( [Link] ) ||
[Link] != 6 )
{
alert( "Please enter 6 digit Pin code" );
[Link]();
return false;
}
return(true);
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return(validate());">
<table>
<tr>
<td align="right">Name:</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">Email-id:</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Pin code:</td>
<td><input type="text" name="Pincode" /></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
f. Define events and event handlers. [3 marks]
List various types of mouse event. [2 marks]
Answer:
Events are actions that can be detected by JavaScript. Every element on a web page has
certain events which can trigger a JavaScript. For example, we can use the onClick event
of a button element to indicate that a function will run when a user clicks on the button.
Examples of events:
• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input field in an HTML form
• Submitting an HTML form
• A keystroke
Events are normally used in combination with functions, and the function will not be
executed before the event occurs.
Event handlers are JavaScript code that are not added inside the <script> tags, but rather,
inside the html tags, that execute JavaScript when something happens, such as pressing a
button, moving your mouse over a link, submitting a form etc.
When events are associated with functions, the functions are written in the head section
within the <script> tag and are called from the event handlers.
Example:
< h1 onmouseover= “[Link]= ‘blue’” onmouseout= “[Link]= ‘red’”>Mouse over
this text</h1>
Answer:
There are two ways the browser client can send information to the web server.
• The GET Method
• The POST Method
Before the browser sends the information, it encodes it using a scheme called URL
encoding. In this scheme, name/value pairs are joined with equal signs and different pairs
are separated by the ampersand.
name1=value1&name2=value2&name3=value3
The GET Method:-
The GET method sends the encoded user information appended to the page request. The
page and the encoded information are separated by the ? character.
[Link]
• The GET method produces a long string that appears in your server logs, in the
browser's Location: box.
• The GET method is restricted to send upto 1024 characters only.
• Never use GET method if you have password or other sensitive information to be
sent to the server.
• GET can't be used to send binary data, like images or word documents, to the
server.
• The data sent by GET method can be accessed using QUERY_STRING
environment variable.
• The PHP provides $_GET associative array to access all the sent information
using GET method.
Example:
<html>
<body>
<form action="welcome_get.php" method="get">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
"welcome_get.php":
<html>
<body>
Welcome <?php echo $_GET["name"]; ?><br>
Your email address is: <?php echo $_GET["email"]; ?>
</body>
</html>
The POST Method:-
The POST method transfers information via HTTP headers. The information is encoded
as described in case of GET method and put into a header called QUERY_STRING.
• The POST method does not have any restriction on data size to be sent.
• The POST method can be used to send ASCII as well as binary data.
• The data sent by POST method goes through HTTP header so security depends on
HTTP protocol. By using Secure HTTP you can make sure that your information
is secure.
• The PHP provides $_POST associative array to access all the sent information
using POST method.
Example:
<html>
<body>
<form action="[Link]" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
"[Link]":
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
Answer:
In PHP, there are three types of arrays:
1)Numeric/Indexed arrays are Arrays with a numeric index.
There are two ways to create indexed arrays:
The index can be assigned automatically (index always starts at 0), like this:
$cars = array("Volvo", "BMW", "Toyota");
or the index can be assigned manually:
$cars[0] = "Volvo";
$cars[1] = "BMW";
$cars[2] = "Toyota";
2) Associative arrays are arrays that use named keys that you assign to them.
There are two ways to create an associative array:
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
or:
$age['Peter'] = "35";
$age['Ben'] = "37";
$age['Joe'] = "43";
The named keys can then be used in a script:
<?php
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
echo "Peter is " . $age['Peter'] . " years old.";
?>
Answer:
The default error handling in PHP is very simple. An error message with filename, line
number and a message describing the error is sent to the browser.
When creating scripts and web applications, 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.
Different error handling methods:
• Simple "die()" statements
• Custom errors and error triggers
• Error reporting
Basic Error Handling: Using the die() function
The die() function is used to check the code for errors, display appropriate error messages
and exit the script.
For example in the following program,the code checks to see if the [Link] file is
found. if the file does not exist you get an error like this: File not found.
<?php
if(!file_exists("[Link]")) {
die("File not found");
} else {
$file=fopen("[Link]","r");
}
?>
Creating a Custom Error Handler
Creating a custom error handler is quite simple. We simply create a special function that
can be called when an error occurs in PHP.
This function must be able to handle a minimum of two parameters (error level and error
message) but can accept up to five parameters (optionally: file, line-number, and the error
context):
Syntax
error_function(error_level,error_message,error_file,error_line,error_context)
Parameter Description
error_level Required. Specifies the error report level for the user-defined
error. Must be a value number. See table below for possible error
report levels
error_message Required. Specifies the error message for the user-defined error
error_line Optional. Specifies the line number in which the error occurred
Answer:
As with other programming languages, PHP allows you to define variables. In PHP there
are several variable types, but the most common is called a String. It can hold text and
numbers. All strings begin with a $ sign. To assign some text to a string you would use the
following code:
$text = "welcome to my website.";
This is quite a simple line to understand, everything inside the quotation marks will be
assigned to the string. You must remember a few rules about strings:
1. Strings are case sensitive so $Text is not the same as $text
2. String names can contain letters, numbers and underscores but cannot begin with a
number or underscore.
When assigning numbers to strings you do not need to include the quotes so:
$emp_id = 456
would be allowed.
Variable Types
PHP is weakly typed, meaning that variables do not need to be assigned a type (E.g.,
Integer) at the time they are declared. Rather, the type of a PHP variable is determined by
the value the variable holds and the way in which it is used.
PHP Code:
<?php
$hello = "Hello World!";
$a_number = 4;
$anotherNumber = 8;
?>
Note: PHP does not require variables to be declared before being initialized.
Variable Naming Conventions:
There are a few rules that you need to follow when choosing a name for your PHP
variables.
1. PHP variables must start with a letter or underscore "_".
2. PHP variables may only be comprised of alpha-numeric characters and underscores. a-z,
A-Z, 0-9, or _ .
3. Variables with more than one word should be separated with underscores. $my_variable
4. Variables with more than one word can also be distinguished with capitalization.
$myVariable
f Write a PHP program to create one dimensional array. [5 marks]
Answer:
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
echo "<br>";
echo count($cars);
echo "<br>";
$arrlength = count($cars);
for($x = 0; $x < $arrlength; $x++)
{
echo $cars[$x];
echo "<br>";
}
?>
Output:
I like Volvo, BMW and Toyota.
3
Volvo
BMW
Toyota
Answer:
A cookie is often used to identify a user. A cookie is a small file that the server embeds on
the user's computer. Each time the same computer requests a page with a browser, it will
send the cookie too. With PHP, you can both create and retrieve cookie values.
Create Cookies With PHP
A cookie is created with the setcookie() function.
Syntax
setcookie(name, value, expire, path, domain, secure, httponly);
Only the name parameter is required. All other parameters are optional.
The following example creates a cookie named "user" with the value "John Doe". The
cookie will expire after 30 days (86400 * 30). The "/" means that the cookie is available in
entire website (otherwise, select the directory you prefer).
We then retrieve the value of the cookie "user" (using the global variable $_COOKIE). We
also use the isset() function to find out if the cookie is set:
Example:
<?php
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>
</body>
</html>
b. Explain any five PHP/MYSQL functions with example. [5 marks]
$email_txt .= $msg_txt;
$data = chunk_split(base64_encode($data));
Answer:
Session variables hold information about one single user, and are available to all pages in
one application.
Start a PHP Session:
A session is started with the session_start() function.
Session variables are set with the PHP global variable: $_SESSION.
Example:
In this page("demo_session1.php")., we start a new PHP session and set some session
variables:
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Set session variables
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
echo "Session variables are set.";
?>
</body>
</html>
1 [0-9]
It matches any decimal digit from 0 through 9.
2 [a-z]
It matches any character from lower-case a through lowercase z.
3 [A-Z]
It matches any character from uppercase A through uppercase Z.
4 [a-Z]
It matches any character from lowercase a through uppercase Z.
PHP's Regexp POSIX Functions
PHP currently offers seven functions for searching strings using POSIX-style regular
expressions −
[Link] Function & Description
1 ereg()
The ereg() function searches a string specified by string for a string specified
by pattern, returning true if the pattern is found, and false otherwise.
2 ereg_replace()
The ereg_replace() function searches for string specified by pattern and
replaces pattern with replacement if found.
3 eregi()
The eregi() function searches throughout a string specified by pattern for a
string specified by string. The search is not case sensitive.
4 eregi_replace()
The eregi_replace() function operates exactly like ereg_replace(), except that
the search for pattern in string is not case sensitive.
5 split()
The split() function will divide a string into various elements, the boundaries
of each element based on the occurrence of pattern in string.
6 spliti()
The spliti() function operates exactly in the same manner as its sibling
split(), except that it is not case sensitive.
7 sql_regcase()
The sql_regcase() function can be thought of as a utility function, converting
each character in the input parameter string into a bracketed expression
containing two characters.
Example:
<?php
$password = "abc";
if (! eregi ("[[:alnum:]]{8,10}", $password))
{
print "Invalid password! Passwords must be from 8 - 10 chars";
}
else
{
print "Valid password";
}
?>
This will produce the following result −
Invalid password! Passwords must be from 8 - 10 chars
1 preg_match()
The preg_match() function searches string for pattern, returning true if
pattern exists, and false otherwise.
2 preg_match_all()
The preg_match_all() function matches all occurrences of pattern in string.
3 preg_replace()
The preg_replace() function operates just like ereg_replace(), except that
regular expressions can be used in the pattern and replacement input
parameters.
4 preg_split()
The preg_split() function operates exactly like split(), except that regular
expressions are accepted as input parameters for pattern.
5 preg_grep()
The preg_grep() function searches all elements of input_array, returning all
elements matching the regexp pattern.
6 preg_ quote()
Quote regular expression characters
Example:
<?php
$line = "Vi is the greatest word processor ever created!";
// perform a case-Insensitive search for the word "Vi"
Answer:
<?php
//to create database
$con=mysql_connect("localhost","root","");
if(!$con)
die('could not connect:'.mysql_error());
if(mysql_query("create database Company",$con))
echo"Database Created successfully";
else
echo "Error creating database:".mysql_error();
//to create table
mysql_select_db("Company",$con);
$query="create table Employee(emp_id int,emp_name varchar(50), emp_dept
varchar(50),emp_salary int)";
if(mysql_query($query,$con))
echo"Table Created successfully";
else
echo "Error creating table:".mysql_error();
mysql_close($con);
?>
_____________________________