Meanstack Lab

PRIYADARSHINI INSTITUTEOF TECHNOLOGY&MANAGEMENT
5TH MILE, PULLADIGUNTA,GUNTUR-522017
DEPARTMENT OF CSE
I-II M.TECH (CSE)
MEAN STACK TECHNOLOGIES

LABORATORY MANUAL(R19)
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
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.
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) 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
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.
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.
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
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.
Experiment-8:
Implement the web applications with Database using
a) PHP,
b) Servlets and
c) JSP.
Experiment-9:
Write a program to design a simple calculator using
a) JavaScript
b) PHP
c) Servlet and
d) JSP.
Experiment-10:
Create registration and login forms with validations using Jscript query.
Experiment-11:
Jscript to retrieve student information from student database using database
connectivity.
Experiment-12:
Implement the following in React JS
a) Using React Js creating constructs data elements.
b) Using React Js implementations DoM.
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.
Experiment-14:
Develop and demonstrate Invoking data using Jscript from Mongo DB.
Experiment-15:
Create an Online fee payment form using JSCript and MangoDB
1. Develop static pages (using Only HTML) of an online Book store. The pages should
resemble: www.amazon.com The website should consist 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>
<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" >

<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>
<right>
<table align="left">
<tr>
<td><h4>user name</td>
<tr>
<tr>
<td><h4>password</td>
</tr>
<tr>
<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>
Userprofile
userprofile.html
<html>
<head>
<title>
userprofile</title>
</head>
<strong><h1>Welcome to AMAZON Online Book Store </h1></strong></center>
Edit your profile here...
<right>
<table align="left">
<tr>
<td><h4>Edit user name</td>
<tr>
<tr>
<td><h4>Edit password</td>
</tr>
<tr>
<option >
<td><h4>male
<input type="radio" name="sex" id="male"></td>
<td><h4>female
<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>
<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>
<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>
<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>
<head><title>order conformation</title><M/head>
<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.
<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;
ca 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:
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
a) Input: Click on Display Date button using on click ( ) function Output:
Display date in the textbox
<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+"/"+m
onth+"/"+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";
}
alert(table);
}
else {
alert("Enter positive value");
n=prompt("Enter positive value for
} n: "," ");
OUTPUT:
d)sum of n numbers.html
<html>
<head><title>sum of n numbers using popup boxes</title>
<script
language='java
script'>
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
sumofnu
ms = 0
while
(keepgoi
ng) {
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.
Create a New Bean

Here are the steps that you must follow to create a new Bean:
1. Create a directory for the new Bean.
2. Create the Java source file(s).
3. Compile the source file(s).
4. Create a manifest file.
5. Generate a JAR file.
6. Start the BDK.
7. Test.
Create a Directory for the New Bean

You need to make a directory for the Bean. To follow along with this
example, create
z:\WtLab\week6. Then change to that directory.
Create the Source File for the New Bean

The source code for the Colors component is shown in the following
listing. It is located in the file Colors.java.
The color of the component is determined by the private Color

variable color, and its shape is determined by the private boolean
variable rectangular.
The constructor defines an anonymous inner class that extends

MouseAdapter and overrides its mousePressed( ) method. The
change( ) method is invoked in response to mouse presses. The
component is initialized to a rectangular shape of 200 by 100 pixels.
The change( ) method is invoked to select a random color and
repaint the component.
The getRectangular( ) and setRectangular( ) methods provide
access to the one property of this Bean. The change( ) method calls
randomColor( ) to choose a color and then calls repaint( ) to make
the change visible. Notice that the paint( ) method uses the
rectangular and color variables to determine how to present the
Bean.
Compile the Source Code for the New Bean

Compile the source code to create a class file. Type
the following: javac Colors.java.
Create a Manifest File
You must now create a manifest file. First, switch to the z:\WtLab\
week7 directory. This is the directory in which the manifest files for the
BDK demos are located. Put the source
code for your manifest file in the file colors.mft. It is
shown here: Name: Colors.class
Java-Bean: True
This file indicates that there is one .class file in the JAR file and that it is a
Java Bean.
Generate a JAR File

Beans are included in the ToolBox window of the BDK only if they are in
JAR files in the directory z:\WtLab\week7. These files are generated
with the jar utility. Enter the following: jar cfm Colors.jar Colors.mft
*.class
This command creates the file colors.jar and places it in the directory z:\
WtLab\week7
Start the BDK

Change to the directory BDK and run run.bat. This causes the BDK to start.
You should see three windows, titled ToolBox, BeanBox, and
Properties. The ToolBox window should include an entry labeled
"Colors" for your new Bean.
Create an Instance of the Colors Bean

After you complete the preceding steps, create an instance of the
Colors Bean in the BeanBox window. Test your new component by
pressing the mouse anywhere within its borders. Its color
immediately changes. Use the Properties window to change the
rectangular property from false to true. Its shape immediately
changes.
Source Code
Colors.java
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(200, 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(col
or);
if(rectangular)
{
g.fillRect(0, 0, w-1, h-1);
}
else {
illOval(0, 0, w-1, h-1);
}
}
}
Colors.mft
Name:
Colors.class
Java-Bean: True
Creation of jar file:

Z:\ jar cfm Colors.jar Colors.mft
*.class Now the jar file is created .
Execution procedure
1. Write the source program in the notepad and save it as Colors.java
2. Complile the java file as
follows javac
Colors.java
now two .class files are created
3. create the manifest file with the
following code Name: Colors.class
Java-Bean: true
Save it as
Colors.mft
4. create the jar file for by the following
syntax Z:\ jar cfm Colors.jar
Colors.mft *.class
5. now the jar file is created so we can open the

bdk/beanbox/run.bat in that we go to the file menu in
that select the loadjar...
then load the jar file .. it can be shown in the tools box..
now we can select the Colors bean and place it on the bean box...
6. we click the ovel it can change the colors.. and click the rectangular
is true then it changes to the rectangle.....
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.
<usersinformation>
<user>
<rollno>501</rollno>
<name>aaa</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<name>bbb</name>
</user>
<user>
<name>ccc</name>
</user>
<user>
<name>ddd</name>
</user>
<user>
<name>eee</name>
</user>
<user>
<name>fff</name>
</user>
<user>
<name>ggg</name>
</user>
<user>
<name>hhh</name>
</user>
<user>
<name>iii</name>
</user>
<user>
<name>jjj</name>
</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_NO
DE)
{
Element
e=(Element)node; int
x=Integer.parseInt(e.getElementsByTagName("rollno").item(0).getTe
xtContent()); if(x==n)
{
System.out.println(root.getNodeName());
System.out.println("
")
;
System.out.println("rollno:\
t"+e.getElementsByTagName("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.getElementsByTagName("college").item(0).get
TextContent()); 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";
?>
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
d) Implementation of ‘get’ and ‘post’ methods.
e) Implementation in colors, boarder padding.
f) Implementation button frames tables, navigation bars.
Experiment-8:
Implement the web applications with Database using
a) PHP,
b)Servlets and
c)JSP.
a) To display current date , Time and Day using PHP.

PROGRAM:
<?p
date_default_timezone_set ("Asia/Calcutta");
echo "Date: ";
echo ate("d/m/y"); echo
"<br> Time: ;
echo date(" H:i:s A", time());
echo "<br> Day: ";
$day=date(")
echo $day;
?>
Output
b)To display current date , Time and Day using Servlet.
importjava.*;
importjavax.
servlet.*;
public class DateSrv extends GenericServlet
{
public void service(ServletRequest req, ServletResponse res) throws
IOException, ServletException
{
content type
res.setContentType("text/
html");
PrintWriter pw = res.getWriter();
java.util.Date date = new java.util.Date();
pw.println("<h2>"+"Current Date & Time: " +date.toString()+"</h2>");
stream object
pw.close();
}
}
web.xml
<?xml version="1.0"?>
<web-app>
<servlet>
<servlet-name>Date</servlet-name>
<servlet-class>DateSrv</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Date</servlet-name>
<url-pattern>/date</url-pattern>
</servlet-mapping>
</web-app>
Output:
c)To display current date , Time and Day using JSP.
<html>
<head><title>JSPApp</title></head>
<body>
<form>
<fieldset style="width:50%; background-color: #ccffeb;">
<legend><b><i>JSP Application<i><b></legend>
<h3>Current Date and Time is :</h3>
<% java.util.Date d = new
java.util.Date();
out.println(d.toString()); %>
</fieldset>
</form>
</body>
</html>
Output:
Experiment-9:
Write a program to design a simple calculator using
e) JavaScript
f) PHP
g) Servlet and
h) 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=input
string;
}
</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>
<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:
(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.IOExceptio
n; import
java.io.PrintWriter
;
import
javax.servlet.ServletExcep
tion; import
javax.servlet.http.HttpSer
vlet;
import
javax.servlet.http.HttpServletReq
uest; import
javax.servlet.http.HttpServletRes
ponse; public class Cal extends
HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException,
IOException
{
response.setContentType("text/htm
l;charset=UTF-8"); PrintWriter pw=
response.getWriter();
int n1 =
Integer.parseInt(request.getParameter("
t1")); int n2 =
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 =
num1")); int num2 =
num2")); String operation =
request.getParameter("r1");
if(operation.equals("Add")){
int
add=num1+num2
;
out.println("Additi
on is: "+add);
}
else
if(operation.equals("
Sub")){ int
sub=num1-num2;
out.println("Substrac
tion 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("divisi
on 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.
$(document).ready(function() {
$("#register").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var cpassword = $("#cpassword").val();
if (name == '' || email == '' || password == '' || cpassword == '') {
alert("Please fill all fields...!!!!!!");
} else if ((password.length) < 8) {
alert("Password should atleast 8 character in length...!!!!!!");
} else if (!(password).match(cpassword)) {
alert("Your passwords don't match. Try again?");
} else {
$.post("register.php", {
name1: name,
email1: email,
password1: password
}, function(data) {
if (data == 'You have Successfully Registered.....') {
$("form")[0].reset();
}
alert(data);
});
}
});
});
Experiment-11:
Jscript to retrieve student information from student database using
database connectivity.
<%@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 driver = "com.mysql.jdbc.Driver";
String connectionUrl = "jdbc:mysql://localhost:3306/";
String database = "test";
String userid = "root";
String password = "";
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
Connection connection = null;
Statement statement = null;
ResultSet resultSet = null;
%>
<!DOCTYPE html>
<html>
<body>
<h1>Retrieve data from database in jsp</h1>

<table border="1">
<tr>
<td>first name</td>
<td>last name</td>
<td>City name</td>
<td>Email</td>
</tr>
<%
try{
connection = DriverManager.getConnection(connectionUrl+database, userid, password);
statement=connection.createStatement();
String sql ="select * from users";
resultSet = statement.executeQuery(sql);
while(resultSet.next()){
%>
<tr>
<td><%=resultSet.getString("first_name") %></td>
<td><%=resultSet.getString("last_name") %></td>
<td><%=resultSet.getString("city_name") %></td>
<td><%=resultSet.getString("email") %></td>
</tr>
<%
}
connection.close();
} catch (Exception e) {
e.printStackTrace();
}
%>
</table>
</body>
</html>
Output:
id first name last name City name Email Id

1 Divyasundar Sahu Mumbai [email protected]
2 Hritika Sahu Pune [email protected]
3 Milan Jena Chennai [email protected]
Experiment-12:
Implement the following in React JS
c) Using React Js creating constructs data elements.
d) Using React Js implementations DoM.

Meanstack Lab

Uploaded by

Copyright:

Available Formats

Meanstack Lab

Uploaded by

Document Information

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

Meanstack Lab

Uploaded by

Copyright:

Available Formats

PRIYADARSHINI INSTITUTEOF TECHNOLOGY&MANAGEMENT

5TH MILE, PULLADIGUNTA,GUNTUR-522017

I-II M.TECH (CSE)

MEAN STACK TECHNOLOGIES

Registration and user Login

Payment by credit card

Create a New Bean

Create a Directory for the New Bean

Create the Source File for the New Bean

The color of the component is determined by the private Color

The constructor defines an anonymous inner class that extends

Compile the Source Code for the New Bean

Generate a JAR File

Start the BDK

Create an Instance of the Colors Bean

Creation of jar file:

5. now the jar file is created so we can open the

a) Find out Sum of the individual Digits

b) Check whether the given number is Palindrome or not

a) To display current date , Time and Day using PHP.

b)To display current date , Time and Day using Servlet.

c)To display current date , Time and Day using JSP.

(b) USING PHP

<h1>Retrieve data from database in jsp</h1>

id first name last name City name Email Id

You might also like