Scribd
Upload
7 views

Mean Stack Technologies Lab

The document is a lab manual detailing experiments related to web development using the MEAN stack. It includes instructions for creating static HTML pages for an online bookstore, JavaScript functions for converting numbers to words, and various interactive JavaScript applications. Additionally, it covers creating a visual bean in Java and an XML document with user information, along with a Java program to retrieve user details using a parser.

Uploaded by

damarlanaganandini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Mean Stack Technologies Lab

The document is a lab manual detailing experiments related to web development using the MEAN stack. It includes instructions for creating static HTML pages for an online bookstore, JavaScript functions for converting numbers to words, and various interactive JavaScript applications. Additionally, it covers creating a visual bean in Java and an XML document with user information, along with a Java program to retrieve user details using a parser.

Uploaded by

damarlanaganandini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 124

Mean Stack Technologies Lab Manual

Experiment - 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 Order Conformation

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</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>
</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="reg.html" >
<input type="submit" value="register" >
&nbsp;&nbsp;
<input type="reset" value="reset"></form></td>
</tr>
</table>
</body>
</html>

Registration page
reg.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>
<td><input type="password"></td>
</tr>
<tr>
<td><h4>confirm password</td>
<td><input type="password"></td>
</tr>
<tr>
<td><h4>male &nbsp;&nbsp;
<option >
<input type="radio" name="sex" id="male"></td>
<td><h4>female &nbsp; &nbsp;
<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>

User Profile
userprofile.html
<html>
<head>
<title>
userprofile</title>
</head>
<body bgcolor="cyan"> <center>
<strong><h1>Welcome to AMAZON Online Book Store
</h1></strong></center>
Edit your profile here...
<form method="post" action="catalog.html" >
<right>
<table align="left">
<tr>
<td><h4>Edit user name</td>
<td><input type="text" ></td>
<tr>
<tr>
<td><h4>Edit password</td>
<td><input type="password"></td>
</tr>
<tr>
<option >
<td><h4>male &nbsp;&nbsp;
<input type="radio" name="sex" id="male"></td>
<td><h4>female &nbsp; &nbsp;
<input type="radio" name="sex" id="female" ></td>
</option>
</tr>
<tr>
<td>Edit Address</td>
<td><textarea name="address" rows=5 cols=19>
</textarea>
</td>
<tr>
<td>
<input type="submit" value="submit" ></td>
</tr>
</form>
</body>
</html>

Books catalog
Catalog.html:
<html>
<head>
<title>
books catalog</title>
</head>
<body bgcolor="cyan">
<center><h1>AMAZON</h1></center>
<form method="post" action="shopping.html">
<left>
<table>
<tr>
<td><b><h3>frontend books</td>
<td></td></tr>
<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:
<html>
<head><title>shopping cart</title>
</head>
<body bgcolor="cyan">
<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>
</html>

Payment by credit card


Payment.html:
<html>
<head><title>payment</title></head>
<body bgcolor="cyan">
<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
Orderconform:
<html>
<head><title>order conformation</title><M/head>
<body bgcolor="cyan">
<center>
<h1><b>BOOK SHOPPING</h1>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU</h2>
</center>
</body></html>
OUTPUT:
Experiment - 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:
0-999.html:
<html>
<head>
<title>HTML - Convert numbers to words using JavaScript</title>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode
> 57)) return false;
return true;
}
//-->
</SCRIPT>
<script>
function NumToWord(inputNumber, outputControl)
{
var str = new String(inputNumber) 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'];
numLength = rev.length;
var word = new Array();
var j = 0;
for (i = 0; i < numLength; 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;
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 finalOutput = '';
for (i = 0; i < numLength; i++)
{
finalOutput = finalOutput + word[i];
}
document.getElementById(outputControl).innerHTML=finalOutput;
}
</script>
</head>
<body>
<h1>HTML - Convert numbers to words using JavaScript</h1>
<input id="Text1" type="text" onkeypress="return isNumberKey(event)"
onkeyup="NumToWord(this.value,'divDisplayWords');
" maxlength="3" style="background- color: #efefef; border: 2px solid
#CCCCC; font-size: large" />
<br /> <br />
<div id="divDisplayWords" style="font-size: 30; color: Teal; font-family:
Arial;"> </div>
</body>
</html>
OUTPUT:
Experiment - 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) b) Input: A number n obtained using prompt Output: Factorial of n
number using alert
c) c) Input: A number n obtained using prompt Output: A multiplication
table of numbers from 1 to 10 of n using alert
d) 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:
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:
c) multable.html
<html>
<head><title> Multiplication Table </title></head>
<body>
<script type="text/javascript">
<!--
var n=prompt("Enter positive value for n: "," ");
if(!isNaN(n))
{
var table=""; var number="";
for(i=1;i<=10;i++)
{
number = n * i;
table += n + " * " + i + " = " + number + "\n";
}
}
else
{
}
}
alert(table);
}
alert("Enter positive value"); n=prompt("Enter positive value for n: "," ");
document.write(n+" table values displayed using alert ..<br />");
// -->
</script>
</body>
</html>
OUTPUT:
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:
Experiment - 4:
Create a simple visual bean with a area filled with a color. 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 color of the area should be
changed dynamically for every mouse click.

PROGRAM:
package sunw.demo.colors;
import java.awt.*;
import java.awt.event.*;
public class Colors extends Canvas
{
transient private Color color;
private boolean rectangular;
public Colors()
{
addMouseListener(new MouseAdapter()
{
public void mousePressed(MouseEvent me)
{
change();
}
});
rectangular=false;
setSize(100,100);
change();
}
public boolean getRectangular()
{
return rectangular;
}
public void setRectangular(boolean flag)
{
this.rectangular=flag;
repaint();
}
public void change()
{
color=randomColor();
repaint();
}
private Color randomColor()
{
int r=(int)(255*Math.random());
int g=(int)(255*Math.random());
int b=(int)(255*Math.random());
return new Color(r,g,b);
}
public void paint(Graphics g)
{
Dimension d=getSize();
int h=d.height;
int w=d.width;
g.setColor(color);
if(rectangular)
{
g.fillRect(0,0,w-1,h-1);
}
else
{
g.fillOval(0,0,w-1,h-1);
}
}
}
OUTPUT:
Experiment - 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
<usersinformation>
<user>
<rollno>501</rollno>
<name>aaa</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>502</rollno>
<name>bbb</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>503</rollno>
<name>ccc</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>504</rollno>
<name>ddd</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>505</rollno>
<name>eee</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>506</rollno>
<name>fff</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>507</rollno>
<name>ggg</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>508</rollno>
<name>hhh</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>509</rollno>
<name>iii</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>510</rollno>
<name>jjj</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
</usersinformation>
UserDom.java
import java.io.File;
import javax.xml.parsers.*;
import org.w3c.dom.*;
import java.util.Scanner; public class UserDom
{
public static void main(String args[]) throws Exception
{
DocumentBuilderFactory
fac=DocumentBuilderFactory.newInstance();
DocumentBuilder b=fac.newDocumentBuilder();
Document doc=b.parse(new File("users.xml"));
doc.getDocumentElement().normalize();
Element root=doc.getDocumentElement();
Scanner in=new Scanner(System.in);
System.out.println("Enter User ID:");
int n=in.nextInt();
int flag=0;
NodeList nl=doc.getElementsByTagName("user");
for(int i=0;i<nl.getLength();i++)
{
Node node=nl.item(i);
if(node.getNodeType()==Node.ELEMENT_NODE)
{
Element e=(Element)node;
int x= Integer. parseInt (e.getElementsByTagName
("rollno").item(0).getTextContent());
if(x==n)
{
System.out.println(root.getNodeName());
System.out.println(" ------------------------------ ");
System.out.println("rollno:\t"+e.getElementsBy
TagName("rollno").item(0).getTextContent());
System.out.println("name:\
t"+e.getElementsByTagName("name").item(0).
getTextContent()); System.out.println("branch:\
t"+e.getElementsByTagName("branch").item(0
).getTextContent());
System.out.println("college:"+e.getElementsBy
TagName("college").item(0).getTextContent());
flag=1;
break;
}
else
{
flag=0;
}
}
}
if(flag==0)
System.out.println("User not available");
}
}
OUTPUT:
Experiment - 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:
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:
Experiment - 7:
Implement the following in CSS
a) Implementation of ‘get’ and ‘post’ methods.
b) Implementation in colors, boarder padding.
c) Implementation button frames tables, navigation bars.

a) Get method program:


<?php if(isset($_GET["name"])){ echo " Welcome," . $_GET["name"] . "
"; } ?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form method="get" action="<?php echo $_SERVER["PHP_SELF"];?>">
<label for="inputName">Name:</label>
<input type="text" name="name" id="inputName">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Post method program:
<?php if(isset($_POST["name"])){ echo " Welcome," . $_POST["name"] . "
"; } ?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
<label for="inputName">Name:</label>
<input type="text" name="name" id="inputName">
<label for="password">password:</label>
<input type="password" name="pass">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
colors:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam.</p>
</body>
</html>
Output:
borders:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
OUTPUT:
Padding:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a
bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
Output:
Button:
<!DOCTYPE html>
<html>
<body>
<h1>The button Element</h1>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
</html>
Output:
Frames:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Output:
Tables:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Output:
navigation bar:
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
app:startDestination="@id/blankFragment">
<fragment
android:id="@+id/blankFragment"
android:name="com.example.cashdog.cashdog.BlankFragment"
android:label="Blank"
tools:layout="@layout/fragment_blank" />
</navigation>
Experiment - 8:
Implement the web applications with Database using
a) PHP,
b) Servlets and
c) JSP.

a) A user validation web application, where the user submits the login name
& 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 failure message is shown to the user.

AIM: To design an application that verifies user details from database using
PHP.

PROGRAM:
db.php
<html>
<body>
<?php
$severname="localhost";
$username="root";
$password="TIGER";
$conn=new mysqli($severname,$username,$password);
if($conn->connect_error)
{
die("connection failed".$conn->connect_error);
}
echo "Connected successfully <br>";
//Create database
$sql = "CREATE DATABASE reg";
if(mysqli_query($conn,$sql))
echo "Database created successfully<br>";
else
echo "error";
$servername="localhost";
$dbname="reg";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn)
{
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully <br>";
// sql to create table
$sql = "CREATE TABLE Guests ( name VARCHAR(30) NOT NULL, pwd
VARCHAR(30) NOT NULL)";
if (mysqli_query($conn, $sql))
{
echo "Table MyGuests created successfully<br>";
}
else {
echo "Error creating table: " . mysqli_error($conn);
}
$sql = "INSERT INTO Guests (name, pwd) VALUES ('cse', '5')";
if (mysqli_query($conn, $sql))
{
echo "New record created successfully";
}
else
{
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
</body>
</html>
Output of db.php:
Login.html
<html>
<head> <title> Login Page </title> </head>
<body>
<center> <h1> Login Page </h1>
<form action="loginform.php" method="post">
<table>
<tr> <td> <label> Name: </label> </td>
<td> <input type="text" name="uname" /> </td>
</tr>
<tr> <td> <label> Password: </label> </td>
<td> <input type="password" name="upwd" /> </td>
</tr>
<tr> <td> <input type="submit" value="submit" /> </td>
<td> <input type="reset" value="reset" /> </td>
</tr>
</table>
</form>
</center>
</body>
</html>

loginform.php
<html>
<head> <title> Registration page </title> </head>
<body>
<?php
$name=$_POST["uname"];
$pwd=$_POST["upwd"];
$conn=mysql_connect("localhost","root","TIGER") or die("mysql_error()");
mysql_select_db("reg") or die("mysql_error()");
$query=mysql_query("SELECT * from guests where name='$name'");
while($row=mysql_fetch_array($query))
{
$duser=$row['name'];
$dpwd=$row['pwd'];
}
if($pwd==$dpwd && $name==$duser) echo "welcome $name branch";
else
echo "invalid user";
?>
</body>
</html>
OUTPUT:
(b) USING SERVLET
DBExample.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
import java.sql.*;
public class DBExample extends HttpServlet{
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException
{
String JDBC_DRIVER="com.mysql.jdbc.Driver";
String DB_URL="jdbc:mysql://localhost/csec";
String USER = "root";
String PASS = "TIGER";
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body><h1>Welcome to MRCET</h1>\n") ;
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection(DB_URL, USER,
PASS);
Statement stmt = conn.createStatement();
String sql;
sql = "SELECT * FROM Emp";
ResultSet rs = stmt.executeQuery(sql);
while(rs.next())
{
out.println("ID: " + rs.getString(1));
out.println("Age: " + rs.getString(2));
out.println("First Name: " + rs.getString(3)+"<br>");
}
rs.close();
stmt.close();
conn.close();
}
catch(SQLException se)
{
out.println(se.getMessage());
}
catch(Exception e)
{
out.println(e.getMessage());
}
out.println("</body></html>");
}
}

web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<servlet>
<servlet-name>DBExample</servlet-name>
<servlet-class>DBExample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DBExample</servlet-name>
<url-pattern>/db</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:
(c) USING JSP
import java.sql.*;
class MysqlCon
{
public static void main(String args[])
{
Try
{
Class.forName("com.mysql.jdbc.Driver");
Connection
con=DriverManager.getConnection(
"jdbc:mysql://localhost:3306/sonoo","root","root");
//here sonoo is database name, root is username and
password Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from emp");
while(rs.next())
System.out.println(rs.getInt(1)+" "+rs.getString(2)+"
"+rs.getString(3));
con.close();
}
catch(Exception e){ System.out.println(e);
}
}
}
OUTPUT:
Experiment - 9:
Write a program to design a simple calculator using
a) JavaScript
b) PHP
c) Servlet and
d) JSP.

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="8" onclick="updatestring('8')"> </td>
<td><input type="button" value="9" onclick="updatestring('9')"> </td>
<td><input type="button" value="/" onclick="updatestring('/')"> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="updatestring('4')"> </td>
<td><input type="button" value="5" onclick="updatestring('5')"> </td>
<td><input type="button" value="6" onclick="updatestring('6')"> </td>
<td><input type="button" value="-" onclick="updatestring('-')"> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick="updatestring('1')"> </td>
<td><input type="button" value="2" onclick="updatestring('2')"> </td>
<td><input type="button" value="3" onclick="updatestring('3')"> </td>
<td><input type="button" value="+" onclick="updatestring('+')"> </td>
</tr>
<tr>
<td><input type="button" value="0" onclick="updatestring('0')"> </td>
<td><input type="button" value="00" onclick="updatestring('00')"> </td>
<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:
(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']))
{
$c = $a / $b;
print $a . "/" . $b . "=" . $c;
}
?>
Output:
(c) USING SERVLETS
AIM: Develop Servlet Application of Basic Calculator(+,-,*,/,%) using
ServletInputStream and ServletOutputStream.

DESCRIPTION:
In java with using 2 operant’s and 1 operator we can calculate the basic
mathematically operation such as addition, subtraction, multiplication,
division Servlet is a Java class which extends the capabilities of server that
provides the application accessed by means of request response model. It
uses two interfaces i.e. HTTPRequest & HTTPResponse

HTTPRequest: This is an interface which provides methods for extracting


HTTP parameters from the query or request body depending on the type of
request i.e. get or post

HTTPResponse: This interface provides an OutputStream for retrieving


information such as images or PrintWriter for retrieving text output.

PROGRAM:
index.html
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h3>Please Enter Two Numbers :::</h3>
<form method="GET" action="http://localhost:8080/Cal/calc">
Number:<input type="text" id="t1" name="t1"/><br/>
<select name="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select></br>
Number:<input type="text" id="t2" name="t2">
<input type="submit" value="calculate"/></br>
</form>
</body>
</html>

Cal.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Cal extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse
response)throws ServletException, IOException
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw= response.getWriter();
int n1 = Integer.parseInt(request.getParameter("t1"));
int n2 = Integer.parseInt(request.getParameter("t2"));
String op=request.getParameter("op");
if(op.equals("+")){pw.println("Addition :::"+(n1+n2));
}
else if(op.equals("-"))
{
pw.println("Subtraction :::"+(n1-n2));
}
else if(op.equals("*"))
{
pw.println("Multiplication :::"+(n1*n2));
}
else if(op.equals("/"))
{
pw.println("Division :::"+(n1/n2));
}
Else
{
pw.println("Remainder :::"+(n1%n2));
}
pw.close();
}
}

web.xml
<web-app>
<servlet>
<servlet-name>Calculator</servlet-name>
<servlet-class>Cal</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Calculator</servlet-name>
<url-pattern>/calc</url-pattern>
</servlet-mapping>
</web-app>
Output:
(d) USING JSP
Aim: To design a calculator using JSP.
calculator.html
<html>
<title>calculator</title>
<head><h1><center>Basic Calculator</center></h1></head>
<body>
<center>
<form action="http://localhost:8080/jsp/calculator.jsp" method="get">
<label for="num1"><b>Number 1</b></label>
<input type="text" name ="num1"><br><br>
<label for = "num2"><b>Number 2</b></label>
<input type="text" name="num2"><br><br>
<input type ="radio" name = "r1" value="Add">+
<input type = "radio" name = "r1" value="Sub">-<br>
<input type="radio" name="r1" value ="mul">*
<input type = "radio" name="r1" value="div">/<br><br>
<input type="submit" value="submit">
</center>
</body>
</html>

calculator.jsp
<html>
<title>calculator</title>
<head></head>
<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>
OUTPUT:
Experiment - 10:
Create registration and login forms with validations using Jscript query.

Program:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation,
Sample registration form" />
<meta name="description" content="This document is an example of
JavaScript Form Validation using a sample registration form. " />
<link rel='stylesheet' href='js-form-validation.css' type='text/css' />
<script src="sample-registration-form-validation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
Use tab keys to move from one input field to the next.
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male"
/><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female"
/><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked
/><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non
English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>
Output:
Experiment - 11:
Jscript to retrieve student information from student database using database
connectivity.

Program:
import java.io.*;
import java.util.Scanner;
class studentDetails
{
public String name[][] = new String[10][10];
void getDetails(int n)
{
Scanner get = new Scanner(System.in);
int limit=n;
System.out.println("Enter "+limit+" Student Details\n");
for(int i=0;i<limit;i++)
{
System.out.println("Enter Student #"+(i+1)+" Name, Roll
Number & Marks:");
for(int j=0;j<3;j++)
{
name[i][j] = get.nextLine();
}
}
display(limit);
}
void display(int limit)
{
System.out.println("Student Name"+"\t"+"Roll"+"\t\t"+"Marks");
for(int i=0;i<limit;i++)
{
for(int j=0;j<3;j++)
{
System.out.print(name[i][j]+"\t\t");
}
System.out.println();
}
}
}
class collegeOffice
{
public static void main(String args[]) throws IOException
{
Scanner in = new Scanner(System.in);
System.out.print("Enter Number of Students:");
int n = in.nextInt();
studentDetails std = new studentDetails();
std.getDetails(n);
PrintStream output = new PrintStream(new File
("StudentDetails.txt"));
output.println("Student Name"+"\t"+"Roll"+"\t\t"+"Marks");

output.println("=====================================
=");
for(int i=0;i<n;i++)
{
for(int j=0;j<3;j++)
{
output.print(std.name[i][j]+"\t\t");
}
output.println();
output.println("=====================================
=");
}
output.close();
}
}
Output:
Experiment - 12:
Implement the following in React JS
a) Using React Js creating constructs data elements.
b) Using React Js implementations DoM.

a)creating constructs data elements:


Program:
class Button extends React.Component
{
state = { counter: 1 };
handleClick = () =>
{
this.setState(
{
counter: this.state.counter + 1
});
}
render()
{
return(<button onClick={this.handleClick}>
{this.state.counter}
</button>);
}
}
ReactDOM.render(<Button />, mountNode);
Output:

Sample program:

function Button(props)
{
return(<button>{props.label}</button>);
}
ReactDOM.render(<Button label="Save" />, mountNode);

Output:
b) React Js implementations DoM.
Program:
Step 1 - Create the Root Folder
Create a folder with name reactApp on the desktop to install all the required
files, using the mkdir command.
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp
To create any module, it is required to generate the package.json file.
Therefore, after Creating the folder, we need to create a package.json file.
To do so you need to run the npm init command from the command
prompt.
C:\Users\username\Desktop\reactApp>npm init
This command asks information about the module such as packagename,
description, author etc. you can skip these using the –y option.
C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
{
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Step 2 - install React and react dom
Since our main task is to install ReactJS, install it, and its dom packages,
using install react and react-dom commands of npm respectively. You can
add the packages we install, to package.json file using the --save option.
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save
Or, you can install all of them in single command as −
C:\Users\username\Desktop\reactApp>npm install react react-dom --save

Step 3 - Install webpack


Since we are using webpack to generate bundler install webpack, webpack-
dev-server and webpack-cli.
C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --
save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save
Or, you can install all of them in single command as −
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-
server webpack-cli --save

Step 4 - Install babel


Install babel, and its plugins babel-core, babel-loader, babel-preset-env,
babel-preset-react and, html-webpack-plugin
C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-
dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-
dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --
save-dev
Or, you can install all of them in single command as −
C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader
babel-preset-env
babel-preset-react html-webpack-plugin --save-dev

Step 5 - Create the Files


To complete the installation, we need to create certain files namely,
index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create
these files manually or, using command prompt.
C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Step 6 - Set Compiler, Server and Loaders


Open webpack-config.js file and add the following code. We are setting
webpack entry point to be main.js. Output path is the place where bundled
app will be served. We are also setting the development server to 8001 port.
You can choose any port you want.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {entry: './main.js',output:


{
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer:
{
inline: true,
port: 8001
},
module:
{
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
Open the package.json and delete "test" "echo \"Error: no test
specified\" && exit 1" inside "scripts" object. We are deleting this line
since we will not do any testing in this tutorial. Let's add the start and build
commands instead.
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Step 7 - index.html
This is just regular HTML. We are setting div id = "app" as a root element
for our app and adding index_bundle.js script, which is our bundled app
file.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>

Step 8 − App.jsx and main.js


This is the first React component. We will explain React components in depth
in a subsequent chapter. This component will render Hello World.
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;
We need to import this component and render it to our root App element, so
we can see it in the browser.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));


Note − Whenever you want to use something, you need to import it first. If
you want to make the component usable in other parts of the app, you need
to export it after creation and import it in the file where you want to use it.
Create a file with name .babelrc and copy the following content to it.
{
"presets":["env", "react"]
}

Step 9 - Running the Server


The setup is complete and we can start the server by running the following
command.
C:\Users\username\Desktop\reactApp>npm start
It will show the port we need to open in the browser. In our case, it is
http://localhost:8001/. After we open it, we will see the following output.
Step 10 - Generating the bundle
Finally, to generate the bundle you need to run the build command in the
command prompt as −
C:\Users\Tutorialspoint\Desktop\reactApp>npm run build
This will generate the bundle in the current folder as shown below.
Using the create-react-app command
Instead of using webpack and babel you can install ReactJS more simply by
installing create-react-app.

Step 1 - install create-react-app


Browse through the desktop and install the Create React App using
command prompt as shown below −
C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app
This will create a folder named my-app on the desktop and installs all the
required files in it.

Step 2 - Delete all the source files


Browse through the src folder in the generated my-app folder and remove all
the files in it as shown below −
C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Step 3 - Add files


Add files with names index.css and index.js in the src folder as −
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js
In the index.js file add the following code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Step 4 - Run the project


Finally, run the project using the start command.
npm start
Experiment - 13:
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:


Program:
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta charset="UTF-8" name="viewport"
content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css"
href="css/bootstrap.css"/>
</head>
<body ng-controller="myController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand"
href="https://sourcecodester.com">Sourcecodester</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">JavaScrip - Simple Binding Element
Using AngularJS</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-3"></div>
<div class="col-md-6">
<textarea class = "form-control" style = "resize:none;
height:150px;" ng-model = "msg" placeholder="Please
enter something"></textarea>
<br />
<div>{{msg}}</div>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Output:
b) Angular JS directives:
Program:
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "StudentController">
<student name = "Mahesh"></student><br/>
<student name = "Piyush"></student>
</div>
<script src = "https://ajax.googleapis.com/ ajax/libs/ angularjs/
1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('student', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> ,
Roll No: <b>{{student.rollno}}</b>";
directive.scope =
{
student : "=name"
}
directive.compile = function(element, attributes)
{
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes)
{
element.html("Student: <b>"+$scope.student.name
+"</b> ,
Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
mainApp.controller('StudentController', function($scope)
{
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});
</script>
</body>
</html>
Output:
Angular JS Events:
Program:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="">
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<div>The Current Count is {{count}}</div>
</body>
</html>
Output:
c) angular Js fetching data from MySQL:
Program:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js /1.2.1/
angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http)
{
// email = $scope.email;
// psw = $scope.psw;
$http(
{
method: "GET",
url: "http://localhost:8080/AngularJSDemo/AngularJsServlet"
}).then(function mySuccess(response)
{
// a string, or an object, carrying the response from the server.
$scope.myRes = response.data.myArrayList;
$scope.statuscode = response.status;
}, function myError(response)
{
$scope.myRes = response.myArrayList;
});
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
{
{statuscode}
}
<div ng-repeat="x in myRes">
<h3>{{x.map.uname+ " " +x.map.upass+ "
"+x.map.email}}</h3>
</div>
</div>
</div>
</body>
</html>
Output:
Experiment - 14:
Develop and demonstrate Invoking data using Jscript from Mongo DB.
Program:
MongoDB driver install
We set up the project.
$ node -v
v11.5.0
We use Node.js version 11.5.0.
$ npm i mongodb
We install the mongodb native JavaScript driver. The npm is a Node.js
package manager. The MongoDB Node.js driver provides both callback based
as well as Promised based interaction.

MongoDB create database


The mongo tool is an interactive JavaScript shell interface to MongoDB, which
provides an interface for systems administrators as well as a way for
developers to test queries and operations directly with the database.
$ mongo testdb
MongoDB shell version v4.0.7
...
> db
testdb
> db.cars.insert({name: "Audi", price: 52642})
> db.cars.insert({name: "Mercedes", price: 57127})
> db.cars.insert({name: "Skoda", price: 9000})
> db.cars.insert({name: "Volvo", price: 29000})
> db.cars.insert({name: "Bentley", price: 350000})
> db.cars.insert({name: "Citroen", price: 21000})
> db.cars.insert({name: "Hummer", price: 41400})
> db.cars.insert({name: "Volkswagen", price: 21600})
We create a testdb database and insert eight documents in the cars
collection.

MongoDB promise
Promise is an object used for deferred and asynchronous computations. It
represents an operation that has not completed yet, but is expected in the
future.
asyncFunc()
.then(value => { /* success */ })
.catch(error => { /* failure */ })
.finally( => { /* cleanup */};
The then() method always returns a Promise, which enables us to chain
method calls.
Note: the MongoClient's connect returns a promise if no callback is passed.

We can also use async/await syntax to work with promises.

MongoDB JS driver
In the first example, we print the version of the Node.js driver.
driver_version.js
const mongo = require('mongodb');
const MongoClient = mongo.MongoClient;
const url = 'mongodb://localhost:27017';
MongoClient.connect(url, { useNewUrlParser: true }, (err, client) =>
{
if (err) throw err;
console.log(client.topology.clientInfo);
client.close();
});

In the example, we connect to the server and find out the client information.
const mongo = require('mongodb');
We use the mongodb module.
const client = mongo.MongoClient;
MongoClient is used to connect to the MongoDB server.
const url = 'mongodb://localhost:27017';
This is the URL to the database. The 27017 is the default port on which the
MongoDB server listens.
MongoClient.connect(url, { useNewUrlParser: true }, (err, client) => {
A connection to the database is created with connect().
$ node driver_version.js
{ driver: { name: 'nodejs', version: '3.2.2' },
os:
{ type: 'Windows_NT',
name: 'win32',
architecture: 'x64',
version: '10.0.17134' },
platform: 'Node.js v11.5.0, LE' }
The driver version is 3.2.2.

MongoDB list database collections


The listCollections() method lists available collections in a database.
list_collections.js
const mongo = require('mongodb');
const MongoClient = mongo.MongoClient;
const url = 'mongodb://localhost:27017';
MongoClient.connect(url, { useNewUrlParser: true }, (err, client) => {
if (err) throw err;
const db = client.db("testdb");
db.listCollections().toArray().then((docs) => {
console.log('Available collections:');
docs.forEach((doc, idx, array) => { console.log(doc.name) });
}).catch((err) => {

console.log(err);
}).finally(() => {
client.close();
});
});
The example connects to the testdb database and retrieves all its collections.
db.listCollections().toArray().then((docs) => {
console.log('Available collections:');
docs.forEach((doc, idx, array) => { console.log(doc.name) });
...
Experiment - 15:
Create an Online fee payment form using JSCript and MangoDB.
Program:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<title>Direct Post Tester</title>
<style type="text/css">
dd { margin-left: 75px; }
#mode_margin { margin-left: 0px; }
</style>
</head>
<body>
<form id="AriaPay" name="AriaPay" action="https:
//secure.future.stage.ariasystems.net/api/direct_post.php" method="post">
<fieldset class="paymethodfieldset">
<dl>
<dt>Client Number (normally hidden) </dt>
<dd>
<input id="client_no" type="text" name="client_no" value=""
size="30"/>
</dd>
<dt id>Mode (normally hidden)</dt>
<dd id="mode_margin">
<span style="color:#999">direct_post_</span><input
id="mode" type="text" name="mode" value="" size="30"/>
</dd>
<dt>Session ID (normally hidden)</dt>
<dd>
<input id="inSessionID" name="inSessionID" type="text"
value="" size="30"/>
</dd>
<dt>Collection Amount</dt>
<dd>
<input id="collection_amount" type="text" name=
"collection_amount" size="30"/>
</dd>
<div>
<h2>
<input type=radio name=formOfPayment
id=formOfPayment value=CreditCard /> Pay by Credit
Card</h2>
</div>
<dt>Card Number</dt>
<dd>
<input type="text" id="cc_no" name="cc_no" value=
"4111111111111111"/>
<span id="err_cc_no" class="jserror"> </span>
</dd>
<dt>Expiry Date</dt>
<dd>
<table cellpadding="0" cellspacing="0">
<tr>
<td><select id="cc_exp_mm" name="cc_exp_mm">
<option value="">Month</option>
<option value="1" selected ="selected">
January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select></td>
<td width="20">&nbsp;</td>
<td><select id="cc_exp_yyyy" name="cc_exp_yyyy">
<option value="">Month</option>
<option value="2016"
selected="selected">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</td>
</tr>
</table>
</dd>
<dt>Security Code</dt>
<dd>
<input id="cvv" type="text" size="5" name="cvv"
value="111"/>
</dd>
</dl>
</fieldset>
<fieldset >
<dl id="payMethodACH" >
<div class="Section_Header">
<h2>
<input type=radio name=formOfPayment
id=formOfPayment value=ACH />
Pay by ACH</h2>
</div>
<dt>Routing Number</dt>
<dd>
<input type="text" id="bank_routing_num"
name="bank_routing_num" value="999999992"/>
</dd>
<dt>Account Number</dt>
<dd>
<input type="text" id="bank_acct_num" name="bank_acct_num"
value= "1111111111" />
</dd>
</dl>
</fieldset>
<h2>Pay using Net Terms</h2>
<fieldset class="paymethodfieldset">
<dl id="payMethodNet0" >
<dt>
<div class="Section_Header">
<h3>
<input type=radio name=formOfPayment
id=formOfPayment value=Net0 /> Pay using Net 0</h3>
</div>
</dt>
</dl>
</fieldset>
<fieldset>
<dl id="payMethodNet10" class="paymethod2" >
<dt>
<div>
<h3>
<input type=radio name=formOfPayment
id=formOfPayment value=Net10 /> Pay using Net
10</h3>
</div>
</dt>
</dl>
</fieldset>
<fieldset>
<dl id="payMethodNet15">
<dt>
<div class="Section_Header">
<h3>
<input type=radio name=formOfPayment
id=formOfPayment value=Net15 />
Pay using Net 15</h3>
</div>
</dt>
</dl>
</fieldset>
<fieldset class="paymethodfieldset">
<dl id="payMethodNet30" class="paymethod2" >
<dt>
<div class="Section_Header">
<h3>
<input type=radio name=formOfPayment
id=formOfPayment value=Net30 /> Pay using Net
30</h3>
</div>
</dt>
</dl>
</fieldset>
<fieldset>
<dl id="payMethodNet15">
<dt>
<div>
<h3>
<input type=radio name=formOfPayment
id=formOfPayment value=Net45 /> Pay using Net
45</h3>
</div>
</dt>
</dl>
</fieldset>
<fieldset>
<dl id="payMethodNet60">
<dt>
<div class="Section_Header">
<h3>
<input type=radio name=formOfPayment
id=formOfPayment value=Net60 /> Pay using Net
60</h3>
</div>
</dt>
</dl>
</fieldset>
<fieldset>
<dl>
<dd class="button">
<input type="submit" name="submitPayment" id=
"submitPayment" value="Submit" />
</dd>
</dl>
</fieldset>
</form>
</div>
<footer>
<script src="https://secure.ariasystems.net/api/ariaCHD.js"></script>
<script language="javascript">
aria.environmentId ="future.stage";
</script>
</footer>
</body>
</html>
</html>
Output:

You might also like