dhasaradhi: February 2018

1. To create a simple student bio-data form using html5 . it should contain the following name (text box), address (multiline text box),gender (radio button male,female),skill sets known (check boxes – c,c++,java,C#etc), extra curricular activities (text box), nationality (combobox) ,submit and reset button.

Task1.html:

<html>

<head>

<title>Stuident Bio-Data</title>

</head>

<body>

Name<input type="text" name="t1"></br>

Age<input type="text" name="t2"></br>

Date of Birth<input type="date" name="d1"></br>

Father Name<input type="text" name="t3"></br>

Mother Name<input type="text" name="t4"></br>

Address<textarea name="ta" rows="10" cols="40"> </textarea></br>

Gender<input type="radio" name="gender" value="male" checked> male<input type="radio" name="gender" value="female"> female </br>

Languages Known(Skillset)<input type="checkbox" name="lan[]" value="C"> C

<input type="checkbox" name="lan[]" value="Java"> Java

Extra-curricular Activities<input type="checkbox" name="ea[]" value="sports"> Sports

<input type="checkbox" name="ea[]" value="BloodDonation"> BloodDonation

<input type="checkbox" name="ea[]" value="social"> Social</br>

Nationality <select name="v">

<option> Indian</option>

<option> Non-Indian</option>

</select></br>

</form>

</body>

</html>

output.php:

<html>

<head>

<title>Stuident Bio-Data</title>

</head>

<body>

<?php

echo "<h3>".$_POST['t1']."</h3></br>";

echo "<h3>".$_POST['t2']."</h3></br>";

echo "<h3>".$_POST['d1']."</h3></br>";

echo "<h3>".$_POST['t3']."</h3></br>";

echo "<h3>".$_POST['t4']."</h3></br>";

echo "<h3>".$_POST['ta']."</h3></br>";

echo "<h3>".$_POST['gender']."</h3></br>";

echo "<h3>Languages known</h3></br>";

if(!empty($_POST['lan']))

foreach($_POST['lan'] as $selected)

{

echo $selected."</br>";

}

echo "<h3>Extra Curricular Activities</h3></br>";

if(!empty($_POST['ea'])){

foreach($_POST['ea'] as $sel){

echo $sel."</br>"; }

}

echo "<h3>Nationality".$_POST['v']."</h3></br>";

</body>

</html>

2. To create an html page with different types of frames such as floating frame, navigation frame & mixed frame.

Mainpage.html

<html>
<body>
<a href="frames.html" target="two">navigation frame</a><br>
<a href="floatingframe.html" target="two">floating frame</a><br>
<a href="Noframe.html" target="two">no frame</a><br>
<a href="mixedframe.html" target="two">mixed frame</a><br>
</body>
</html>

Frame.html

<html>
<frameset cols="20%,35%,*" scrolling="no" noresize>
<frame name="one" src="MainPage.html"></frame>
<frame src="aa.gif"></frame>
<frame name="two" src="hulk.gif"></frame>
</frameset>
</html>

Floatingframe.html

<html>
<body>
<p> Explanation: There is a problem with the page you are trying to reach and it
cannot be displayed.
Try the following: * Refresh page: Search for the page again by clicking the Refresh
button. The timeout may have occurred due to Internet congestion.
* Check spelling: Check that you typed the Web page address correctly. The
address may have been mistyped.
* Access from a link: If there is a link to the page you are looking for, try accessing
the page from that link.
If you are still not able to view the requested page, try contacting you
<iframe src="bb.gif" height="225" width="500">
</iframe>
<iframe src="MainPage.html" height="50%" width="50%">
</iframe>
</body>
</html>

Mixedframe.html

<html>
<frameset cols="30%,*">
<frame src="pic.html"></frame>
<frameset rows="50%,*">
<frame src="video.html" autostart="true">
<frame src="Q3.html" >

</frameset>

</html>

navigationframe.html

</frame>
<frame name="two" ></frame>
<frameset rows="30%,*">
<frame src="hulk.gif">

</frame>
</frameset>

</html>

3. Design the webpage by applying the different styles using inline, external & internal style sheets.

Inline:

<html>

<head> Inline Web Page </head>

<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>

</html>

Internal:

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

External:-

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

4. Write a java script program to read .XML file and display data in a neat format.

Xml.xml

<?xml version="1.0"?>

</employee>

</company>

</xml>

Xml.html

<html>

<head>

<title>Reading HTML File</title>

function readXML()

{

var xml=new XMLHttpRequest();

xml.open('GET','xml.xml',false);

xml.send();

var xmlData=xml.responseXML;

if(!xmlData)

{

xmlData=(new DOMParser()).parseFromString

(xml.responseText,'text/xml');

var emp=xmlData.getElementsByTagName("employee");

var name=emp[0].getElementsByTagName("name")

[0].firstChild.data;

var name=emp[0].getElementsByTagName("age")

[0].firstChild.data;

var name=emp[0].getElementsByTagName("salary")

[0].firstChild.data;

document.write("Name="+name+"<br>");

document.write("Age="+age+"<br>");

document.write("Salary="+salary+"<br>");

}

</script>

</head>

<body>

</body>

</html>

5. To write a Javascript program to define a user defined function for sorting the values in an array. Use HTML5 for user interface.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Sort</h2>

<p>Click the button to sort the array in ascending order.</p>

var points = [40, 100, 1, 5, 25, 10];

document.getElementById("demo").innerHTML = points;

function myFunction() {

points.sort(function(a, b){return a - b});

document.getElementById("demo").innerHTML = points;

}

</script>

</body>

</html>

6. To create an html page to demonstrate exception handling in javascript

Create an html page named as “exception.html” and do the following.

i. within the script tag write code to handle exception

a) define a method RunTest() to get any string values(str) from the user and call

the method Areletters(str).

b) In Areletters(str) method check whether str contain only alphabets (a-z, A-

Z), if not throw exception.

c) Define a exception method Input Exception(str) to handle the exception

thrown by the above method.

ii. Within the body tag define a script tag to call Runtest() method define.

<html>

<head>

function InputException(msg)

{

this.val = msg;

this.toString = function()

{

return "Input Exception in = "+this.val;

}

function AreLetters(msg)

{

var input = msg;

var re = new RegExp("[^a-zA-Z]");

if(input.match(re))

{

oops = new InputException(input);

throw oops;

}

else

{

document.write("<br>"+input);

}

function RunTest()

{

var input = prompt("type something","");

try

{

AreLetters(input);

}

catch(e)

{

document.write("<br>exception occured and caught"+e.toString());

}

document.write("<h1>Exception Handling</h1>");

}

</script>

</head>

<body>

RunTest();

</script>

</body>

</html>

7. Write a jsp servlet program to implement the single text field calculator.

Calculator.html

<html>

<title>calculator</title>

<head><h1><center>Basic Calculator</center></h1></head>

<body>

<label for="num1"><b>Number 1</b></label>

<label for = "num2"><b>Number 2</b></label>

<input type ="radio" name = "r1" value="Add">+

<input type="radio" name="r1" value ="mul">*

</center>

</body>

</html>

Calculator.jsp

<html>

<title>calculator</title>

<body>

<%@page language="java"%>

int num1 = Integer.parseInt(request.getParameter("num1"));

int num2 = Integer.parseInt(request.getParameter("num2"));

String operation = request.getParameter("r1");

if(operation.equals("Add")){

int add=num1+num2;

out.println("Addition is: "+add);

}

else if(operation.equals("Sub")){

int sub=num1-num2;

out.println("Substraction is: "+sub);

}

else if(operation.equals("mul")){

int mul=num1*num2;

out.println("multiplication is: "+mul);

}

else if(operation.equals("div"))

{

int div = num1/num2;

if(num1>=num2)

out.println("division is: "+div);

else

out.println("The division cannot be performed");

}

</body>

</html>

8. Write a jsp servlet program to demonstrate session handling using

– url rewriting

--hidden formfield

--cookies

--sessions

Index.html

Name:<input type="text" name="userName"/><br/>

</form>

FirstServlet.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class FirstServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response){

try{

response.setContentType("text/html");

PrintWriter out = response.getWriter();

String n=request.getParameter("userName");

out.print("Welcome "+n);

Cookie ck=new Cokkie(“uname”,n); //creating cookie object

Response.addCookie(ck); //adding cookie in the response

HttpSession session=request.getSession();

session.setAttribute("name",n);

//creating form that have invisible textfield

out.print("<form action='servlet2'>");

out.print("<input type='hidden' name='uname' value='"+n+"'>");

out.print("<input type='submit' value='go'>");

out.print("</form>");

out.close();

}catch(Exception e){System.out.println(e);}

}

SecondServlet.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class SecondServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

try{

response.setContentType("text/html");

PrintWriter out = response.getWriter();

Cookie ck[]=request.getCookies();

out.print(“Hello”+ck[0].getValue());

HttpSession session=request.getSession(false);

String n=(String)session.getAttribute(“uname”);

out.print(“Session”+n);

//Getting the value from the hidden field

String n=request.getParameter("uname");

out.print("Hello "+n);

out.close();

}catch(Exception e){System.out.println(e);}

}

web.xml

<web-app>

<servlet-name>s1</servlet-name>

<servlet-class>FirstServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>s1</servlet-name>

<url-pattern>/servlet1</url-pattern>

</servlet-mapping>

<servlet-name>s2</servlet-name>

<servlet-class>SecondServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>s2</servlet-name>

<url-pattern>/servlet2</url-pattern>

</servlet-mapping>

</web-app>

9. To create a php program to demonstrate the different predefined function in array, Math, Data & Regular Expression.

<!DOCTYPE html>
<html>
<body>

<?php

//math functions

echo(abs(6.7) . "<br>");

echo(floor(0.60) . "<br>");
echo(pow(2,4) . "<br>");

echo(round(0.60) . "<br>");

//add date

$date=date_create("2013-03-15");
date_add($date,date_interval_create_from_date_string("40 days"));
echo date_format($date,"Y-m-d");

//array values
$cars=array("Volvo","BMW","Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";

$regex = "/[a-zA-Z]+ \d+/";

if (preg_match($regex, "June 24"))

{

// Indeed, the expression "[a-zA-Z]+ \d+" matches the date string

echo "Found a match!";

}

else

{

// If preg_match() returns false, then the regex does not

// match the string

echo "The regex pattern does not match. :(";

}

?>

</body>
</html>

dhasaradhi

flipkart

Friday, 9 February 2018

HTML, CSS,XML & JavaScript Programs

SecondServlet.java

web.xml