Web Lab

1. Develop static pages (using only HTML) of an online Book store.
The pages should resemble:

www.amazon.com. The website should consist of the following pages.
• Home page
• Registration and user Login
• User profile page
• Books catalog
• Shopping cart
• Payment by credit card and Order Conformation
PROCEDURE:
Home page
Main.html:
<html>
<head>
<title>Amazon</title>
</head>
<body bgcolor="cyan"><center>
<strong><h1>Welcome to AMAZON</h1></strong>
<form method="post" action="login.html" target=_blank >
<h4>for books</h4>
<input type="submit" value="click here">
</form>
</center>
</body>
</html>
Registration and user Login
Login.html:
<html>
<head>
<title>
login page</title>
</head>
<body bgcolor="cyan"><center>
<strong><h1> AMAZON </h1></strong></center>
<right>
<table align="right">
<tr>
<td><h4>user name</td>
<td><input type="text" ></td>
<td></td>
1
</tr>
<tr>
<td><h4>password</td>
<td><input type="password"></td>
<td></td>
</tr>
<tr>
<td>
<form method="post" action="catalog.html" >
<input type="submit" value="submit" >
</form>
</td>
<td>
<form method="post" action="userpro.html" >
<input type="submit" value="register" >

<input type="reset" value="reset"></form></td>
</tr></table></body></html>
User profile page

Userpro.html:
<html>
<head>
<title>
login page</title>
</head>
<body bgcolor="cyan">
<center><strong><h1> AMAZON </h1></strong></center>
<form method="post" action="catalog.html" >
<right>
<table align="left">
<tr>
<td><h4>user name</td>
<td><input type="text" ></td>
<tr>
<tr>
<td><h4>password</td>
</tr>
<tr>
2
<td><h4>confirm password</td>
</tr>
<tr>
<td><h4>male
<option >
<input type="radio" name="sex" id="male"></td>
<td><h4>female
<input type="radio" name="sex" id="female" ></td>
</option>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" rows=5 cols=19>
</textarea>
</td>
<tr>
<td>
<input type="submit" value="submit" ></td>
<td>
<input type="reset" value="reset"></td>
</tr>
</form>
</body>
</html>
Books catalog
Catalog.html:
<html>
<head>
<title>
books catalog</title>
</head>
<center><h1>AMAZON</h1></center>
<form method="post" action="shopping.html">
<left>
<table>
<tr>
<td><b><h3>frontend books</td>
<td></td></tr>
3
<tr>
<td></td>
<td><h4>C&Ds</td>
</tr>
<tr>
<td></td>
<td><h4>Ads</td>
</tr>
<tr>
<td></td>
<td><h4>JAVA
</td></tr>
<tr>
<td><b><h3>backend books</td>
<td></td>
</tr>
<tr>
<td></td>
<td><h4>Oracle</td>
</tr>
<tr>
<td></td>
<td><h4>Ms SQL Server
</td></tr>
<tr>
<td></td>
<td><h4>MySql </td>
</tr>
</table>
</h4>
<center>
<b>for buy one of these books
<br>
</b><input type="submit" value="click here">
</center>
</form>
</body>
</html>
Shopping cart
Shopping.html:
4
<html>
<head><title>shopping cart</title>
</head>
<center><h1>
Shopping Cart</h1></center>
<br><br><br><br><br>
<table align="center">
<tr>
<td>Text Books</td>
<td>
<select >
<optgroup label="select the book">
<option value="C&Ds">C&Ds
<option value="Ads">Ads
<option value="Java">Java
<option value="Oracle">Oracle
<option value="Ms SQL Server">Ms SQL Server
<option value="MySql">MySql
</optgroup>
</select>
</td></tr>
<tr>
<td>
Quantity</td>
<td>
<input type="text" id="q">
</td></tr>
<tr>
<td></td>
<td>
<form method=post action="payment.html">
<input type="submit" value=ok />
</form>
</td></tr>
</table>
<center>
<pre>Cost of one book is"500" + shipping "100"</pre>
</center>
<body>
5
</html>
Payment by credit card
Payment.html:
<html>
<head><title>payment</title></head>
<center><h1>Payment By Credit Card</h1></center>
<form method=post action="ordrconform.html">
<br><br><br><br><br>
<table align="center">
<tr> <td>
<h4>Total Amount</h4></td>
<td><input type="text">
</td> </tr>
<tr>
<td><h4>Credit Card Number</td>
<td><input type="text"></td>
</tr> <tr> <td> </td>
<td><input type="submit" value=OK>
</td> </tr>
</table>
</form></body>
</html>
Order Conformation
Ordrconform.html
<html>
<head><title>order conformation</title><M/head>
<body bgcolor="cyan"> <center>
<h1><b>AMAZON</h1>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU</h2>
</center> </body> </html>
6
2. Write an HTML page including any required JavaScript that takes a number from text field in the
range of 0 to 999 and shows it in words. It should not accept four and above digits, alphabets and special
characters.
PROGRAM:
<html>
<script type="text/javascript">
var nume=document.getElementById('num').value;
function isNumeric(){
var elem=document.niw.num.value;
if(elem!="") {
var numericExpression = /^[0-9]+$/;
if(elem<0||elem>999)
{ alert("Please Enter Number from 0 to 999");
document.niw.num.value="";
return false;
}
else if(elem.match(numericExpression)){
return true;
}else{ alert("Please Enter Only Number ");
document.niw.num.value="";
return false;
}}}
function numinwrd()
{
var numbr=document.getElementById('num').value;
var str=new String(numbr)
var splt=str.split("");
var rev=splt.reverse();
var once=['Zero', ' One', 'Two', 'Three', 'Four','Five', 'Six', 'Seven', 'Eight', 'Nine'];
var twos=['Ten', ' Eleven', ' Twelve', ' Thirteen', ' Fourteen', ' Fifteen', ' Sixteen', ' Seventeen', ' Eighteen',
' Nineteen'];
var tens=[ '', 'Ten', ' Twenty', ' Thirty', ' Forty', ' Fifty', ' Sixty', ' Seventy', ' Eighty', ' Ninety' ];
numlen=rev.length;
var word=new Array();
var j=0;
7
for(i=0;i<numlen;i++) {
switch(i) {
case 0:
if((rev[i]==0) || (rev[i+1]==1)) {word[j]='';}
else {word[j]=once[rev[i]];}
word[j]=word[j] ;
break;
case 1:
abovetens();
break;
case 2:
if(rev[i]==0) {word[j]='';}
else if((rev[i-1]==0) || (rev[i-2]==0) )
{word[j]=once[rev[i]]+"Hundred ";}
else
{word[j]=once[rev[i]]+"Hundred and";}
break;
case 3:
if(rev[i]==0 || rev[i+1]==1) {word[j]='';}
else{word[j]=once[rev[i]];}
default:break;}j++;
}
function abovetens()
{if(rev[i]==0){word[j]='';} else if(rev[i]==1){word[j]=twos[rev[i-1]];}else{word[j]=tens[rev[i]];}
}
word.reverse();
var finalw='';
for(i=0;i<numlen;i++)
{finalw= finalw+word[i];
}
document.niw.word.value=finalw;
}
</script>
<form name="niw">
<table align=center width=100% style="font-size: 12px; display: block;">
<tr><td>
<table width=100% style="font-family: Monaco, Verdana, Sans-serif; font-size: 12px;
display: block; margin-top: 14px;padding: 12px 20px 12px 20px;">
<tr> <td>Number:</td>
<td><input type="text" name="num" id="num" maxlength=9 onKeyup="isNumeric()"></td>
8
<td><input type="button" name="sr1" value="Click Here" onClick="numinwrd()"></td>
<td>Number in Words:</td>
<td><input type="text" name="word" id="word" size=30></td></tr>
</table>
</td></tr>
</table>
</form>
</html>
OUTPUT: If the value is in range and enters value is a number
If the value is out of range
If the given value is not a number
9
3. Develop and demonstrate JavaScript with POP-UP boxes and functions for the following problems:
a) Input: Click on Display Date button using on click ( ) function Output: Display date in the textbox
b) Input: A number n obtained using prompt Output: Factorial of n number using alert
c) Input: A number n obtained using prompt Output: A multiplication table of numbers from 1 to 10 of n
using alert
d) Input: A number n obtained using prompt and add another number using confirm Output: Sum of the
entire n numbers using alert
PROGRAM:
a) date.html
<html>
<body>
<script>
function display(){
var x="You have clicked";
var d=new Date();
var date=d.getDate();
var month=d.getMonth();
month++;
var year=d.getFullYear();
document.getElementById("dis").value=date+"/"+month+"/"+year;
}
</script>
<form>
<input type="text" id="dis" /><br />
<input type="button" value="Display Date" onclick="display()" />
</form>
<body>
</html>
OUTPUT:
26/10/2020
10
b) factorial.html
<html>
<head>
<title>factorial</title>
<script language='javascript'>
function factorialcalc()
{
number = parseint(prompt("enter a number, i'll calculate its factorial", "whole
numbers bigger than zero, please"))
factorial = 1
for (i=1; i <= number; i++)
{
factorial = factorial * i
}
alert("the factorial of " + number + " is " + factorial)
}
</script>
</head>
<body><form name=frm>
<input type=button value='factorial' onclick="factorialcalc();">
</form>
</body>
</html>
OUTPUT:
11
c) multable.html
<html>
<head><title> Multiplication Table </title></head>
<body>
<script type="text/javascript">

</script>
</body>
</html>
OUTPUT:
12
d) sum of n numbers.html
<html>
<head><title>sum of n numbers using popup boxes</title>
<script language='javascript'>
function addsum()
{
alert("you're going to give me a list of numbers. i'm going to add them together for you");
var keepgoing = true
var sumofnums = 0
while (keepgoing) {
sumofnums = sumofnums + parseint(prompt("what's the next number to add?",""))
keepgoing = confirm("add another number?")
}
alert("the sum of all your numbers is " + sumofnums)
}
</script>
</head>
<body>
<form name=frm>
<input type=button value='sum of n numbers' onclick="addsum();">
</form>
</body>
</html>
OUTPUT:
13
4. Create a simple visual bean with an area filled with a colour. The shape of the area depends on the
property shape. If it is set to true then the shape of the area is Square and it is Circle, if it is false. The
colour of the area should be changed dynamically for every mouse click.
Save as colors.java
import
java.io.*
; import
java.awt
.*;
import java.awt.event.*;
public class colors extends Canvas
{
public boolean
square; public
Color color;
public colors()
{
addMouseListener(new MouseAdapter()
{
public void mouseClicked(MouseEvent me)
{
change();
}
});
square=true;
setSize(200,20
0); change();
}
public void change()
{
color =
random();
repaint();
}
public Color getColor()
{
return color;
}
public void setColor(Color color)
{
this.color=color;
}
private Color random()

{
int red = (int)(255*Math.random());
int green =
(int)(255*Math.random()); int
blue =
14
(int)(255*Math.random());
return new
Color(red,green,blue);
}
public boolean isSquare()
{
return square;
}
public void setSquare(boolean square)

{
this.square=sq
uare; repaint();
}
public void paint(Graphics g)
{
if(square)
{
g.setColor(color);
//g.drawRect(10,10,160,160)
; g.fillRect(10,10,180,180);
}
else
{
g.setColor(color);
//g.drawOval(10,10,160,160)
; g.fillOval(10,10,180,180);
}
}
}
Create a jar file

jar cfmv colors.jar colors.mft colors.class
colors$1.class Now jar file has been created.
Go to
C:\beans\beanbox>run
[press enter] Opens four
dialogue boxes toolbox,
beanbox,
Goto file->Loadjar [load the jar colors.jar]

In the toolbox you can observe colors bean, select the colors the bean and place on the beanbox Click
the shape of the area, you can observe the color changing dynamically for every mouse click
15
5. Create an XML document that contains 10 users' information. Write a Java Program, which takes
User Id as input and returns the user details by taking the user information from XML document using
DOM parser or SAX parser
PROGRAM:
users.xml
<?xml version="1.0" encoding="UTF-8"?>
<employees>
<employee id="501">
<firstName>Sunil</firstName>
<lastName>Yadav</lastName>
<location>Hyd</location>
</employee>
<employee id="502">
<firstName>Trilok</firstName>
<lastName>Reddy</lastName>
<location>Chevella</location>
</employee>
<employee id="503">
<firstName>Mallikarjun</firstName>
<lastName>Tiger</lastName>
<location>Forest</location>
</employee>
<employee id="504">
<firstName>Neelima</firstName>
<lastName>Lakshmi</lastName>
<location>MP</location>
</employee>
<employee id="505">
<firstName>Abhi</firstName>
<lastName>Shambu</lastName>
<location>LD</location>
</employee>
<employee id="506">
<firstName>Nikitha</firstName>
<location>UP</location>
16
</employee>
<employee id="507">
<firstName>Ashwini</firstName>
<location>ADB</location>
</employee>
<employee id="508">
<firstName>Vinod</firstName>
<lastName>Kumar</lastName>
<location>MGD</location>
</employee>
<employee id="509">
<firstName>Raghu</firstName>
<location>MBD</location>
</employee>
<employee id="510">
<firstName>Uma Shankar</firstName>
<lastName>Kommana</lastName>
<location>DSNR</location>
</employee>
</employees>
6(a) EMPLOYEEPARSING.JAVA (USING DOM PARSER)
import org.w3c.dom.*;
import javax.xml.parsers.*;
import java.io.*;
public class EmployeeParsing {
public static void main(String[] args)throws Exception {
//Get Document Builder
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
//Build Document
Document document = builder.parse(new File("User.xml"));
//Normalize the XML Structure; It's just too important !!
//document.getDocumentElement().normalize();
// TODO Auto-generated method stub
//Here comes the root node
Element root = document.getDocumentElement();
BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
17
System.out.println("Enter User Id");
String id=br.readLine();
//Get all employees
NodeList nList = document.getElementsByTagName("employee");
System.out.println(root.getNodeName());
System.out.println("============================");
for (int temp = 0; temp < nList.getLength(); temp++)
{
Node node = nList.item(temp);
System.out.println(""); //Just a separator
if (node.getNodeType() == Node.ELEMENT_NODE)
{
//Print employee's details of given id
Element eElement = (Element) node;
if(eElement.getAttribute("id").equals(id))
{
System.out.println("Employee id : " + eElement.getAttribute("id"));
System.out.println("First Name : " +
eElement.getElementsByTagName("firstName").item(0).getTextContent());
System.out.println("Last Name : " +
eElement.getElementsByTagName("lastName").item(0).getTextContent());
System.out.println("Location : " +
eElement.getElementsByTagName("location").item(0).getTextContent());
}
}
}
}
}
OUTPUT:
18
6. Develop and demonstrate PHP Script for the following problems:
a) Write a PHP Script to find out the Sum of the Individual Digits.
b) Write a PHP Script to check whether the given number is Palindrome or not
a) Find out Sum of the individual Digits

<?php
$n=323;
$sum=0;
while($n>0)
{
$r=$n%10;
$sum+=$r;
$n=$n/10;
}
echo "sum of individual digits are: $sum";
?>
Output:
Sum of Individual digits are : 8
19
b) Check whether the given number is Palindrome or not
<?php
$n=323;
$t=$n;
$rev=0;
while($n>0)
{
$r=$n%10;
$rev=$rev*10+$r;
$n=(int)($n/10);
}
echo "Reverse digits are: $rev <br>";
if($t==$rev)
echo "$rev is a Palindrome";
else
echo "$rev is not a Palindrome";
?>
Output:
Reverse digits are 323

323 is a Palindrome
20
7. Implement the web applications with Database using
a) PHP,
b) Servlets and
c) JSP.
A user validation web application, where the user submits the login name and password to the server. The name
and password are checked against the data already available in database and if the data matches a successful
login page is returned otherwise a failure message is shown to the user.
SOURCE CODE:
<html>
<head>
<title>Login Now</title>
<script language="javascript">
function validate()
{
if(document.login.uname.value=="")
{
alert("enter username");
document.login.uname.focus();
return false;
}
if(document.login.pwd.value=="")
{
alert("enter password");
document.login.pwd.focus();
return false;
}
else{
return true;
}
}
</script>
</head>
<body>
<h3>Login</h3>
<form name="login" method="POST" action="" onsubmit="validate()">
<table>
<tr> <td>username</td>
<td><input type="text" name="uname"></td>
21
</tr>
<tr> <td>Password:</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr> <td></td>
<td><input type="submit" name="login" value="Login"></td>
</tr> </table> </form>
<?php mysql_connect("localhost","kgruser","acd");
mysql_select_db("kgrdb");
if(isset($_POST['login']))
{
$user=($_POST['uname']);
$pass=($_POST['pwd']);
$res=mysql_query("select *from users where userid='$user' and pwd='$pass'");
if(mysql_num_rows($res))
{
echo "<script> location.href='loginsuccess.php';</script>";
}
else
{
echo "Wrong Credentials";
}
} ?>
</body>
</html>
loginsuccess.php
<?php echo "Login successfully"; ?>
OutPut:
User Name: Narsi

Password : xxxxxx
Login Successfully
22
8. Write a program to design a simple calculator using
a) JavaScript
b) PHP
c) Servlet and
d) JSP.
(a) USING JavaScript
AIM: To design a simple calculator using JAVASCRIPT.
PROGRAM:
cal.html
<html>
<head>
<title>Calculator</title>
<script language="javascript">
var inputstring="";
function updatestring(value)
{
inputstring=inputstring+value;
document.calculator.input.value=inputstring;
}
</script>
</head>
<body>
<form name="calculator">
<table border="4" align="center" bgcolor="pink" bordercolor="black">
<tr>
<td colspan="4"><input type="text" name="input" maxlength="15" size="27"></td> </tr>
<tr> <td><input type="button" value="clear" onclick="input.value=' ';inputstring=' ' "></td>
<td><input type="button" value="mod" onclick="updatestring('%')"></td>
<td><input type="button" value="*" onclick="updatestring('*')"> </td> </tr>
<tr>
<td><input type="button" value="7" onclick="updatestring('7')"> </td>
<td><input type="button" value="/" onclick="updatestring('/')"> </td> </tr>
23
<tr>
<td><input type="button" value="-" onclick="updatestring('-')"> </td> </tr>
<tr>
<td><input type="button" value="+" onclick="updatestring('+')"> </td> </tr>
<tr>
<td><input type="button" value="." onclick="updatestring('.')"> </td>
<td><input type="button" value="=" onclick="input.value=eval(inputstring);"> </td> </tr>
</table> </form> </body> </html>
OutPut:
84*48 = 4032
24
(b) USING PHP
AIM: To design an application that works as a simple calculator using PHP
PROGRAM:
form.html
<html>
<head> <title> scientific calculator </title> </head>
<body bgcolor="bisque"> <br>
<form name='f1' action='add.php' method='post'>
1st Number<input type='text' name='t1'><br>
2nd Number<input type='text' name='t2'><br>
<input type='submit' name='add' value='add'>
<input type='submit' name='sub' value='sub'>
<input type='submit' name='mul' value='mul'>
<input type='submit' name='div' value='div'>
</form>
</body>
</html>
add.php
<?php
$a = $_POST['t1'];
$b = $_POST['t2'];
if (isset($_POST['add']))
{
$c = $a + $b;
print $a . "+" . $b . "=" . $c;
}
if (isset($_POST['sub']))
{
$c = $a - $b;
print $a . "-" . $b . "=" . $c;
}
if (isset($_POST['mul']))
{
$c = $a * $b;
print $a . "*" . $b . "=" . $c;
}
if (isset($_POST['div']))
25
{
$c = $a / $b;
print $a . "/" . $b . "=" . $c;
}
?>
OutPut:
1 st Number : 20
2 nd Number : 40
add sub mul div
20 + 40 =60
26
9. Create registration and login forms with validations using Jscript query
Form validation and security is very important while you are making a webpage. If there is no security in your
registration form then anyone can destroy your database.
First create a “style.css” file and copy the below style code and save it.
Style.css
.form-table
{
width:400px;
margin-left: auto;
margin-right: auto;
}
label{
font-weight: bold;
}
#form_submission_ajax{
background-color: #eee;
padding-top: 10px;
padding-bottom: 10px;
}
.error{
color: #ff0000;
}
Now create a html registration form using below code. Create a index.php file with below code.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Form validation using jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1><center>Form validation using jQuery</center></h1>
<form action="" method="post" onsubmit="return validate();" id="form_submission_ajax">
27
<table class="form-table">
<tr>
<td><label>Firstname:</label></td>
<td><input type="text" name="f_name" id="f_name">
</td>
</tr>
<tr>
<td></td>
<td id="f_name_error" class="error"></td>
</tr>
<tr>
<td><label>Lastname:</label></td>
<td><input type="text" name="l_name" id="l_name"></td>
</tr>
<tr>
<td></td>
<td id="l_name_error" class="error"></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td></td>
<td id="email_error" class="error"></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td></td>
<td id="password_error" class="error"></td>
</tr>
<tr>
<td><label>Retype Password:</label></td>
<td><input type="password" name="re_password" id="re_password"></td>
</tr>
<tr>
<td></td>
28
<td id="re_password_error" class="error"></td>
</tr>
<tr>
<td><label>Gender:</label></td>
<td><input type="radio" name="gender" id="gender" value="male" checked>Male
<input type="radio" name="gender" id="gender" value="female">Female
</td>
</tr>
<tr>
<td></td>
<td id="gender_error"></td>
</tr>
<tr>
<td><label>Known Language:</label></td>
<td>
<input type="checkbox" name="language[]" class="language" value="hindi">Hindi
<input type="checkbox" name="language[]" class="language" value="english">English
<input type="checkbox" name="language[]" class="language" value="gujarati">Gujarati
</td>
</tr>
<tr>
<td></td>
<td id="language_error" class="error"></td>
</tr>
<tr>
<td><label>Country:</label></td>
<td>
<select name="country" id="country">
<option value="">Select Country</option>
<option value="IN">India</option>
<option value="UK">United Kingdom</option>
<option value="US">United State</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td id="country_error" class="error"></td>
</tr>
<tr>
29
<td><label>Phone No:</label></td>
<td><input type="telephone" name="phone" id="phone"></td>
</tr>
<tr>
<td></td>
<td id="phone_error" class="error"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</form>
</body>
</html>
The above code is a html registration form. When you click on the submit form button it will check all the field
s by jquery. If they are empty then it will through the error code for particular field. Lets check here.
Related: Disable / Enable button using jQuery

main.js
function phoneNumberValidation(phoneNumber)
{
var phoneno = /^\d{10}$/;
if(phoneNumber.match(phoneno))
{
return true;
}
else
{
$('#phone_error').html("* Enter valid 10 digit number like this 9876543210.");
return false;
}
}
function validate(){
var valid = true;
var f_name = $('#f_name').val();
var l_name = $('#l_name').val();
var email = $('#email').val();
var password = $('#password').val();
30
var retype_password = $('#re_password').val();
var gender = $('#gender').val();
var checkedData=[];
$('.language').each(function(i){
if($(this).is(':checked'))
{
checkedData.push($(this).val());
}
});
var country = $('#country').val();;
var phone = $('#phone').val();;
if(f_name=='' || f_name==null)
{
valid=false;
$('#f_name_error').html("* Please enter firstname.");
}
else
{
$('#f_name_error').html("");
}
if(l_name=='' || l_name==null)
{
valid=false;
$('#l_name_error').html("* Please enter lastname.");
}
else
{
$('#l_name_error').html("");
}
if(email=='' || email==null)
{
valid=false;
$('#email_error').html("* Please enter email.");
}
else
{
$('#email_error').html("");
}
31
if(password=='' || password==null)
{
valid=false;
$('#password_error').html("* Please enter password.");
}
else
{
$('#password_error').html("");
}
if(retype_password=='' || retype_password==null)
{
valid=false;
$('#re_password_error').html("* Please enter retype password.");
}
else
{
$('#re_password_error').html("");
}
if(checkedData=='' || checkedData==null)
{
valid=false;
$('#language_error').html("* Please choose any language.");
}
else
{
$('#language_error').html("");
}
if(country=='' || country==null)
{
valid=false;
$('#country_error').html("* Please choose your country.");
}
else
{
$('#country_error').html("");
}
if(phone=='' || phone==null)
{
valid=false;
$('#phone_error').html("* Please enter your phone number.");
32
}
else
{
$('#phone_error').html("");
}
if(phone!='')
{
valid = phoneNumberValidation(phone);
}
if(password != retype_password)
{
valid=false;
$('#re_password_error').html("* Please retype password same as password.");
}
if(password == retype_password)
{
$('#re_password_error').html("");
}
if(valid==false)
{
return false;
}
else
{
alert("You form is ready to submit.");
return true;
}
}
33
10. Jscript to retrieve student information from student databases using database connectivity.
In this example we will use eclipse for writing the JSP and Tomcat 6.0.29 for deploying the application.
Syntax
<%=resultSet.getString("") %>
First off all We have a create table in MySQL.
CREATE TABLE `record` (
ìd` varchar(15) NOT NULL,
ùser_id` varchar(30) DEFAULT NULL,
`password` varchar(50) DEFAULT NULL,
`name` varchar(50) DEFAULT NULL,
èmail` varchar(50) DEFAULT NULL,
PRIMARY KEY (ìd`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%
String id = request.getParameter("userId");
String driverName = "com.mysql.jdbc.Driver";
String connectionUrl = "jdbc:mysql://localhost:3306/";
String dbName = "jsptutorials";
String userId = "root";
String password = "root";
try {
Class.forName(driverName);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
Connection connection = null;
Statement statement = null;
ResultSet resultSet = null;
%>
<h2 align="center"><font><strong>Retrieve data from database in jsp</strong></font></h2>
<table align="center" cellpadding="5" cellspacing="5" border="1">
<tr>
34
</tr>
<tr bgcolor="#A52A2A">
<td><b>id</b></td>
<td><b>user_id</b></td>
<td><b>Password</b></td>
<td><b>Name</b></td>
<td><b>Email</b></td>
</tr>
<%
try{
connection = DriverManager.getConnection(connectionUrl+dbName, userId, password);
statement=connection.createStatement();
String sql ="SELECT * FROM record";
resultSet = statement.executeQuery(sql);
while(resultSet.next()){
%>
<tr bgcolor="#DEB887">
<td><%=resultSet.getString("id") %></td>
<td><%=resultSet.getString("user_id") %></td>
<td><%=resultSet.getString("password") %></td>
<td><%=resultSet.getString("name") %></td>
<td><%=resultSet.getString("email") %></td>
</tr>
<%
}
} catch (Exception e) {
e.printStackTrace();
}
%>
</table>
35
Output :
When you will deploy this JSP page on Server then the output will be as follows
36
11. Implement the following in Angular JS
a) Angular Js data binding.
b) Angular JS directives and Events.
c) Using angular Js fetching data from MySQL
a) Angular Js data binding.
<!DOCTYPE html>
<html lang="en">
<title>Angular Directives</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>Enter Some text : <input type="text" ng-model="name"></p>
<p>Hello {{name}}!</p>
</div>
</body>
</html>
Angular JS directives and Events.

<!DOCTYPE html>
<html>
<title>Angular Directives - ng-int and ng-repeat</title>
<head>
</head>
<body ng-app>
<div ng-init="players = [{name:'Rooney', country:'England'},

{name:'Neymar', country:'Brazil'},
{name:'Messy', country:'Arjentina'}]">
<p>Name : <input type="text" ng-model="name"> {{name}}</p>
<ul>
<li ng-repeat="player in players">
[{{$index}}] {{player.name}} : {{player.country}}
37
</li>
</ul>
</div>
</body>
</html>
Using angular Js fetching data from MySQL

<!doctype html>
<html>
<head>
<title>How to get data from MySQL with AngularJS - PHP</title>
</head>
<body ng-app='myapp'>
<div ng-controller="userCtrl">
<table >
<tr>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
</tr>


<tr ng-repeat="user in users">
<td>{{user.fname}}</td>
<td>{{user.lname}}</td>
<td>{{user.username}}</td>
</tr>
</table>
</div>
</body>
</html>
38
39

Web Lab

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lab

Uploaded by

Copyright:

Available Formats

1. Develop static pages (using only HTML) of an online Book store.

The pages should resemble:

User profile page

private Color random()

public void setSquare(boolean square)

Create a jar file

Goto file->Loadjar [load the jar colors.jar]

a) Find out Sum of the individual Digits

Sum of Individual digits are : 8

Reverse digits are 323

User Name: Narsi

Related: Disable / Enable button using jQuery

a) Angular Js data binding.

<p>Enter Some text : <input type="text" ng-model="name"></p>

Angular JS directives and Events.

<div ng-init="players = [{name:'Rooney', country:'England'},

<p>Name : <input type="text" ng-model="name"> {{name}}</p>

Using angular Js fetching data from MySQL

You might also like

Web Lab

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lab

Uploaded by

Copyright:

Available Formats

1. Develop static pages (using only HTML) of an online Book store.

The pages should resemble:

User profile page

private Color random()

public void setSquare(boolean square)

Create a jar file

Goto file->Loadjar [load the jar colors.jar]

a) Find out Sum of the individual Digits

Sum of Individual digits are : 8

Reverse digits are 323

User Name: Narsi

Related: Disable / Enable button using jQuery

​a) Angular Js data binding.

<p>Enter Some text : <input type="text" ng-model="name"></p>

Angular JS directives and Events.

<div ng-init="players = [{name:'Rooney', country:'England'},

<p>Name : <input type="text" ng-model="name"> {{name}}</p>

Using angular Js fetching data from MySQL

You might also like

a) Angular Js data binding.