Scribd
Upload
0 views47 pages

WP Lab Manual

The document outlines the process of creating a webpage using image maps and cascading style sheets (CSS) with HTML. It includes detailed algorithms and source code for various HTML pages such as home, state details, and college information, as well as JavaScript validation for user registration, login, and payment pages. The aim is to demonstrate web development techniques including image mapping and CSS styling.

Uploaded by

23cs037
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views47 pages

WP Lab Manual

The document outlines the process of creating a webpage using image maps and cascading style sheets (CSS) with HTML. It includes detailed algorithms and source code for various HTML pages such as home, state details, and college information, as well as JavaScript validation for user registration, login, and payment pages. The aim is to demonstrate web development techniques including image mapping and CSS styling.

Uploaded by

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

CREATING A WEBPAGE USING IMAGE MAP

AIM:
To create a web page with image and hot spots using HTML
i) To embed an image map in a web page
ii) To fix the hot spots
iii) Show all the related information when the hot spots are clicked.

ALGORITHM:
Step 1 : Open a notepad.
Step 2 : Write the code for imagemap.html.
Step 3 : Enter a program that includes tags for <MAP> and other tags.
Step 4 : Insert Hyperlink using <A href>.
Step 5 : Save the file with .html extension.
Step 6 : Run the program in a web browser
Step 7 : Display Results.

HTML CODE:
HOME.HTML

<html>
<head>
<title>Home - States of India!!!</title>
</head>
<body bgcolor="gold">
<h1><u><center>Republic of India</center></u></h1>
<p>
India is the Seventh Lagest country in the world by geographical area, the second most populous
country with over 1.2 billion people, and the populus democracy in the world. India is a federal
constitutional republic with a parliamentry democracy consisting of 28 states and 7 union
Terriories.
</p>
<center>
<img align="center" size="100" src="IndiaMap.gif" usemap="#india"/>
<map name="india">
<area shape="circle" coords="160,340,20" href="ANDHRAPRADESH.html">
<area shape="circle" coords="120,440,10" href="KERALA.html">
<area shape="circle" coords="140,420,20" href="TAMILNADU.html">
</map>
</center>
<h2> Features</h2>
<ul>
<li><b>Population</b> - 1,028,783,343(2001 census).
<li><b>Capital</b> - New Delhi
<li><b>Largest City</b> - Mumbai
<li><b>Currency</b> - Indian Rupee
<li><b>Time Format</b> - IST (UTC + 5:30)
<li><b>National Sport</b> - Hockey
<li><b>Current PM</b> - Narendra Modi
<li><b>Current President</b> - Pranab Mukerji
</li>
</ul>
<h2>
<b>To view details of states please click on the specified area in the
map !!!</b>
</h2>
</body>
</html>

ANDHRAPRADESH.HTML
<html>
<head><title>Andhra Pradesh - India</title></head>
<body bgcolor="tan">
<h1><center>Andhra Pradesh</center></h1>
<h3>A.P., is a state situated on the southeastern coast of India. It is
India's fourth largest state by area and fifth largest by population.</h3>
<h3>
<ul>
<li>Districts<i> - 23</i>
<li>Capital City<i> - Hyderabad</i>
<li>Largest City<i> - Hyderabad</i>
<li>Governor<i> - E. S. L. Narasimhan</i>
<li>Chief Minister<i> - N. Kiran Kumar Reddy</i>
<li>Population<i> - 78,323,330</i>
<li>Tourist spots<i> - Tirumala Tirupati, Charminar, Golconda Fort,
Chandragiri, Chowmahalla Place, Falaknuma Palace etc.,</i>
</ul>
<a href="Home.html">back</a>
</body>
</html>

KERALA.HTML
<html>
<head><title>Kerala - India</title></head>
<body bgcolor="indianred">
<h1><center>Kerala</center></h1>
<h3>
<ul>
<li>Districts<i> - 14</i>
<li>Capital City<i> - Thiruvanandapuram</i>
<li>Largest City<i> - Thiruvanandapuram</i>
<li>Governor<i> - Justice.P.Sadasivam</i>
<li>Chief Minister<i> -Oommen Chandy </i>
<li>Population<i> - 33,387,677</i>
<li>Tourist spots<i> - Edakkal Caves, Palayur, Kovalam Beach,Munnar, Kochi, Alapuzha
etc.,</i>
</ul>
</h3>
<a href="Home.html">Back</a>
</body>
</html>

TAMILNADU.HTML
<HTML>
<HEAD>
<TITLE>About Tamil Nadu</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tamil Nadu</H1></CENTER>
<HR>
<UL>
<LI>Area : 1,30,058 Sq. Kms.</LI>
<LI>Capital : Chennai</LI>
<LI>Language : Tamil</LI>
<LI>Population : 6,21,10,839</LI>
</UL><hr>
<a href="Home.html">back</a>
</BODY></HTML>
OUTPUT:
RESULT:
Thus the program to create a webpage using with Image-map was executed and the
Output was verified successfully.
CREATION OF HTML PAGE USING CASCADING STYLE SHEET
AIM:
To create a web page that displays college information using various style sheets.

ALGORITHM:
Internal CSS:
STEP 1: Create a HTML program with <style> tag.
STEP 2: Inside the <style> tag, specify the format required for that web page.
STEP 3: Run the program with a web browser.

External CSS:
STEP 4: Open a notepad, type the needed CSS in it and save it with .css extension.
STEP5: Refer this .css file in the HTML using the tag <link>.
STEP 6: Run the program with a web browser.

SOURCE CODE:
xyz.css

h3{font-family:arial;font-size:20;color:cyan}
table{border-color:green}
td{font-size:20pt;color:magenta}

College.html

<html>
<head><h1><center>ALL STYLE
SHEETS</center></h1>
<title>USE of INTERNAL and EXTERNAL STYLESHEETS
</title>
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css">
.vid{font-family:verdana;fontstyle:
italic;color:red;text-align:center}
.ani{font-family:tahoma;font-style:italic;fontsize:
20;text-align:center;}
font{font-family:georgia;color:blue;font-size:20}
ul{list-style-type:circle}
</style>
</head>
<body>
<ol style="list-style-type:lower-alpha">
<b> KNOWLEDGE INSTITUTE OF TECHNOLOGY </b><br><br><br>
</ol>
<p style="font-size:20pt;color:purple"> Dr.NGP INSTITUTE OF TECHNOLOGY </p>
<p class="ani">Dr.NGP INSTITUTE OF TECHNOLOGY.<br>It is approved by AICTE(All
India Council for Technical Education).It is
affliated to Anna University.<br></p>
<h2 class="vid"> Dr.NGP INSTITUTE OF TECHNOLOGY </h2>
<br>
<font>It is an ISO certified Institution</font><br>
<br>
<font>

<h2>List of Courses offered</h2>


<ul>
<li>Computer Science and Engineering</li>
<li>Electronics and Communication Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical and Electronics Engineering</li>
<li>ME_CSE</li>
<li>ME_CAD</li>
<li>ME_Structural</li>
<li>ME_ECE</li>
</ul>
</font>
<h3>Results of cse students</h3>
<table width="100%" cellspacing="2"
cellpadding="2" border="5">
<tr>
<th>S.NAME</th>
<th>MARKS</th>
<th>RESULT</th>
</tr>
<tr>
<td align="center">Ram</td>
<td align="center">100</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Bala</td>
<td align="center">99</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Ramu</td>
<td align="center">98</td>
<td align="center">pass</td>
</tr>
</table>
</body>
</html>
<body>
<ol style="list-style-type:lower-alpha">
<li> Dr.NGP INSTITUTE OF TECHNOLOGY </li>

</ol>
<p style="font-size:20pt;color:purple"> Dr.NGP INSTITUTE OF TECHNOLOGY </p>
<p class="ani">Dr.NGP INSTITUTE OF TECHNOLOGY <br>It is approved by AICTE(All
India
Council for Technical Education). It is affliated to Anna University.<br></p>
<h2 class="vid">OEC</h2>
<br>
<font>It is an ISO certified Institution</font><br>
<br>
<font>
<h2>List of Courses offered</h2>
<ul>
<li>Computer Science and Engineering</li>
<li>Electronics and Communication Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical and Electronics Engineering</li>
<li>ME_CSE</li>
<li>ME_CAD</li>
<li>ME_Structural</li>
<li>ME_ECE</li>
</ul>
</font>
<h3>Results of cse students</h3>
<table width="100%" cellspacing="2" cellpadding="2" border="5">
<tr>
<th>S.NAME</th>
<th>MARKS</th>
<th>RESULT</th>
</tr>
<tr>
<td align="center">Dinesh</td>
<td align="center">100</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Bala</td>
<td align="center">99</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Gopi</td>
<td align="center">98</td>
<td align="center">pass</td>
</tr>
</table>
</body>
</html>

OUTPUT

RESULT:
Thus the program to create a HTML page using types of Cascading Style Sheet was
executed and the output was verified successfully.
VALIDATE THE REGISTRATION, USER LOGIN, USER PROFILE AND PAYMENT
BY CREDIT CARD PAGES USING JAVASCRIPT

AIM:
To Validate the Registration, user login, user profile and payment by credit card pages using
JavaScript.

PROCEDURE:
1. Static web pages of an online Book store is developed with following pages.
• Home page
• Registration and user Login
• User profile page
• Books catalog
• Payment by credit card
2. Each input box in webpage is validated using java script code using <script> tag in html
file.
3. Designed output is displayed.

PROGRAM:

Main.html:
<html>
<head>
<title> ONLINE BOOK STORES</title>
</head>
<body bgcolor="pink">
<marquee><h1 align=”center”><b><u><font color="white"> ONLINE BOOK
STORAGE</u></font>
</b></h1></marquee>
<H2 ALIGN="CENTER">
<b><p><U><FONT COLOR="PURPLE">Welcome to online book storage.
Press login if you are having id otherwise press registration.</U></FONT></p></b></H2>
<H2> <FONT COLOR="WHITE"></FONT></H2>
<H3 ALIGN="CENTER">
<A HREF="reg.html"><BR><BR><FONT COLOR="black"><ITALIC>REGISTRATION
FORM</FONT></ITALIC><BR><BR>
<BR><BR><A HREF="profile.html"><FONT COLOR="black"><ITALIC>USER
PROFILE</FONT></ITALIC><BR>
<BR><BR><A HREF="login.html"><FONT COLOR="black"><ITALIC>USER
LOGIN</FONT></ITALIC><BR>
<BR><BR><A HREF="catalog.html"><FONT COLOR="black"><ITALIC>BOOKS
CATALOG</FONT></ITALIC><BR>
<BR><BR><A HREF="payment.html"><FONT
COLOR="black"><ITALIC>PAYMENT</FONT></ITALIC><BR>
<BR><BR><A HREF="Order.html"><FONT COLOR="black"><ITALIC>ORDER
CONFIRMATION</H3></FONT></ITALIC><BR>
</body>
</html>

Login.html:
<html>
<body bgcolor=”blue”><br><br><br>
<script language=”javascript”> function validate()
{
var flag=1; if(document.myform.id.value==""||document.myform.pwd.value=="")
{
alert("LoginId and Password must be filled") flag=0;
}
if(flag==1)
{
alert(“VALID INPUT”);
window.open("catalog.html","right");
}
else
{
alert(“INVALID INPUT”);
//document.myform.focus();
}
}
</script>
<form name=”myform”>
<div align=”center”><pre>
LOGIN ID:<input type=”text” name=”id”><br> PASSWORD:<input type=”password”
name=”pwd”>
<br><br>
</pre>
<input type=”button” value=”ok” onClick=”validate()”>
<input type=”reset” value=”clear”>
</div>
</form>
</body>
</html>

Reg.html:
<html>
<body bgcolor=”blue”><br><br>
<script language=”javascript”>
var str=document.myform.phno.value; var x;
if(flag==1)
{

}
else
{

}
}

alert("VALID INPUT");
alert("INVALID INPUT");
document.myform.focus();

</script>
<form name="myform">
<div align="center"><pre>
NAME :<input type="text" name="name"><br> ADDRESS :<input type="type"
name="addr"><br>
CONTACT NUMBER:<iput type="text" name="phno"><br> LOGINID :<input type="text"
name="id"><br>
PASSWORD :<input type="password" name="pwd"></pre><br><br>
</div>

<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear">
</form></body></html>

Catalog.html:
<html>
<body bgcolor="pink"><br><br><br>
<div align="center">
<pre>
BOOK TITLE:<input type="text" name="title"><br>
</pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" name="button1">
<input type="reset" value="clear" name="button2">
</body>
</html>

Order.html:
<html>
<body bgcolor="pink"><br><br><br>
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br> TITLE :<input type="text" name="title"><br>
NO.OF BOOKS :<input type="text" name="no"><br> COST OF BOOK:<input
type="text"name="cost"><br>
DATE :<input tpe="text" name="date"><br></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" name="button1">
<input type="reset" value="clear" name="button2">
</body>
</html>

Payment.html:
<html>
<body bgcolor="pink"><br><br><br>
<script language="javascript"> function validate()
{
var flag=1; if(document.myform.id.value==""|| document.myform.pwd.value==""||
document.myform.amount.value==""|| document.myform.num.value=="")
{

flag=0;
}
var str=document.myform.amount.value; var x;
for(var i=0;i<str.length;i++)
{
x=str.substr(i,1); if(!(x<=9))
{
flag=0; break;
}
}
str=document.myform.num.value; for(var i=0;i<str.lenght;i++)
{
x=str.substr(i,1); if(!(x<=9))
{
flag=0; break;
}
}
if(flag==1)
{

}
else
{

}
}

alert("VALID INPUT");
alert("INVALID INPUT");
document.myform.focus();
</script>
<form name="myform">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br> PASSWORD :<input type="password"
name="pwd"><br> AMOUNT :<input type="text" name="amount"><br>
CREDITCARDNUMBER:<input type="PASSWORD" name="num+"><br></pre><br><br>
</div>
<br><br><div align="center">
<input type="submit" value="ok" onClick="validate()">
<input type="reset" value="clear">
</form>
</body>
</html>

Profile.html:
<html>
<body bgcolor="pink"><br><br><br>
<script type="text/javascript"> function validate()
{
var flag=1; if(document.myform.id.value==""|| document.myform.pwd.value=="")
{
flag=0;
}
if(flag==1)
{

}
else
{

}
}

alert("VALID INPUT");
alert("INVALID INPUT");
document.myform.focus();
</script>
<form name="myform">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br>
PASSWORD:<input type="password" name="pwd"></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">
<input type="reset" value="clear" >
</form>
</body></html>

OUTPUT:
RESULT:
Thus the web page for online book store is created and its webpages are validated using
Javascript.
DEVELOP STUDENT MANAGEMENT SYSTEM AND PERFORM CRUD
OPERATIONS USING PHP

AIM:
To store a PHP form data into database.

PROCEDURE:
 Form is created with fileds name, mail id, contact and address.
 Table is created in mysql.
 The input data entered into the fields are stored using PHP code.

PROGRAM:

index.php:
<!DOCTYPE html>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website =$result= "";if
($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-
9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "iplab";
$conn = new mysqli($servername, $username, $password, $dbname);if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO register (name, email,website,comments,gender)VALUES ('$name',
'$email', '$website','$comment', '$gender')";
if ($conn->query($sql) === TRUE) {
$result="New Record Inserted Successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);return $data;
}
?>
<h2>Registration Form</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo $result;
?>
</body>
</html>
OUTPUT:

RESULT:
The PHP form data is stored into the database.
DEVELOP A SHOPPING CART APPLICATION THAT CAN BE USED IN AN HERBAL
COMPANY USING JAVA SERVLETS AND JDBC

AIM:
To write java servlet programs for Shopping cart.

PROCEDURE:
Client:
1. In index.html on the client side declare the contents that you like to transfer to the
server using html form and input type tags.
2. Create a submit button and close all the included tags.
Server:
1. Import all necessary packages
2. Define a class that extends servlet
3. In the doPost() method, do the following:
i) Set the content type of the response to "text/html"
ii) Create a writer to the response
iii) Get a paratmeter from the request
iv) If its value is equal to right answer then add 5 to mark variable
v) Similarly repeat step
vi) for all parameters
vii) Display the result in an html format using the writer
Database:
1. Import necessary to java packages and javax packages and classes
2. Create a class that extends HttpServlet and implements ServletException
3. and IOException
4. In the doGet() method, do the following:
i) Create a PrintWriter object
ii) Open a connection with the data source name
iii) Write a sql query and execute to get the resultset
5. Display the resultset information in html form

PROGRAM:

Demo.html
<html>
<body>
<form method = “get” action= “http:\\127.0.0.1:8080\servlet-html\Servlet_jdbc.html”>
Name <input type=input name=”Name” value=””> <br>
RollNo <input type=input name=”RollNo” value=””> <br>
<input type=submit value=”submit”>
</form>
</body>
</html>
Servletdemo.java
import java.io.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Servlet_jdbc extends HttpServlet {
public void doGet(HttpServletRequest req,HttpServletResponse res) throws ServletException
,IOException
{
res.setContentType(“text/html”);
PrintWriter out = res.getWriter();
String str1=req.getParameter(“Name”);
String str2=req.getParameter(“RollNo”);
try
{
Class.forName(“sun.jdbc.odbc.JdbcOdbcDriver”);
Connection con=DriverManager.getConnection(“jdbc:odbc:test”);
Statement st=con.createStatement();
String query=”select * from student”;
String q2 = “insert into student values („” + str1 + “„,” + str2 + “)”;
st.executeUpdate(q2);
ResultSet rs=st.executeQuery(query);
while(rs.next())
{
out.println(rs.getString(“Name”)); //getString()
out.println(rs.getInt(“RollNo”));//getInt()
}
con.close();
}
catch(Exception e)
{
}
out.println(“Submission Successful”);
}
Serveltdemo2.java
import java.io.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class DemoServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType(“text/html;charset=UTF-8”);
try (PrintWriter out = response.getWriter())
{
out.println(“<!DOCTYPE html>”);
out.println(“<html>”);
out.println(“<head>”);
out.println(“<title>Servlet DemoServlet</title>”);
out.println(“</head>”);
out.println(“<body>”);
String db_driver=request.getParameter(“driv”);
String db_name=request.getParameter(“ur”);
String db_uname=request.getParameter(“uname”);
String db_pwd=request.getParameter(“pwd”);
String db_query=request.getParameter(“qry”);
try
{
Class.forName(db_driver);
Connection connection=DriverManager.getConnection(“jdbc:mysql://localhost:3306/“+db_name
,db_uname,db_pwd);
Statement stmt=connection.createStatement(); String q=db_query;
String first_word=q.split(” “)[0];
if(first_word.equals(“Select”)||first_word.equals(“select”)||first_word.equa ls(“SELECT”))
{
ResultSet rs=stmt.executeQuery(q);
ResultSetMetaData rsmd=rs.getMetaData();
int columncount=rsmd.getColumnCount(); out.println(“<TABLE BORDER=1
ALIGN=‟CENTER‟>”); if(columncount>=1)
{
out.println(“<TR>”);
for(int i=1;i<=columncount;i++)
{
out.println(“<TH>”+rsmd.getColumnName(i));
}
out.println();
while(rs.next())
{
out.println(“<TR>”);
for(int i=1;i<=columncount;i++)
{
out.println(“<TD>”+rs.getString(i));
}
out.println();
}
out.println(“</TABLE>”);
connection.close();
}
else
{
out.println(“<h1>No Records found!</h1>”); connection.close();
}
}else
{
int ers=stmt.executeUpdate(q); if(ers>0)
{
out.println(“<h1>Statement Executed! “+ers+” rows affected</h1>”);
}
else
{
out.println(“<h1>Statement Executed and 0 rows affected!</h1>”);
}
connection.close();
}
}
catch(ClassNotFoundException cnfe)
{
System.err.println(“Error Loading Driver:”+cnfe);
}
Catch(SQLException sqle)
{
System.err.println(“Error Connecting:”+sqle);
}
catch(Exception ex)
{
System.err.println(“Error with Input:”+ex);
}
out.println(“</body>”);
out.println(“</html>”);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
Protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
}

OUTPUT:

RESULT:

Thus the development of shopping cart application with servlet and JDBC has been successfully
developed.
ONLINE EXAMINATION USING SERVLETS

AIM:
To write java servlet programs to conduct online examination and to display student mark list
available in a database

PROCEDURE:
Client:
1. In index.html on the client side declare the contents that you like to transfer to the
server using html form and input type tags.
2. Create a submit button and close all the included tags.
Server:
1. Import all necessary packages
2. Define a class that extends servlet
3. In the doPost() method, do the following:
i) Set the content type of the response to "text/html"
ii) Create a writer to the response
iii) Get a paratmeter from the request
iv) If its value is equal to right answer then add 5 to mark variable
v) Similarly repeat step
vi) for all parameters
vii) Display the result in an html format using the writer
Student Mark List Database:
1. Import necessary to java packages and javax packages and classes
2. Create a class that extends HttpServlet and implements ServletException
3. and IOException
4. In the doGet() method, do the following:
i) Create a PrintWriter object
ii) Open a connection with the data source name
iii) Write a sql query and execute to get the resultset
iv) Display the resultset information in html form

PROGRAM:

Servlet Code:
import java.io.*; import java.sql.*; import javax.servlet.*;
import javax.servlet.http.*;
public class StudentServlet3 extends HttpServlet
{
String message,Seat_no,Name,ans1,ans2,ans3,ans4,ans5; int Total=0; Connection connect;
Statement stmt=null; ResultSet rs=null;
public void doPost(HttpServletRequest request,HttpServletResponse response) throws
ServletExcep- tion,IOException
{
try
{
String url="jdbc:odbc:NEO"; Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
connect=DriverManager.getConnection(url," "," "); message="Thank you for participating in
online Exam";
}
catch(ClassNotFoundException cnfex){ cnfex.printStackTrace();
}
catch(SQLException sqlex){ sqlex.printStackTrace();
}
catch(Exception excp){ excp.printStackTrace();
}
Seat_no=request.getParameter("Seat_no"); Name=request.getParameter("Name");
ans1=request.getParameter("group1"); ans2=request.getParameter("group2");
ans3=request.getParameter("group3"); ans4=request.getParameter("group4");
ans5=request.getParameter("group5"); if(ans1.equals("True"))
Total+=2; if(ans2.equals("False")) Total+=2; if(ans3.equals("True")) Total+=2;
if(ans4.equals("False")) Total+=2; if(ans5.equals("False")) Total+=2; try
{
Statement stmt=connect.createStatement();
String query="INSERT INTO student("+"Seat_no,Name,Total"+") VAL-
UES('"+Seat_no+"','"+Name+"','"+Total+"')";
int result=stmt.executeUpdate(query); stmt.close();
}catch(SQLException ex){
}
response.setContentType("text/html"); PrintWriter out=response.getWriter();
out.println("<html>"); out.println("<head>"); out.println("</head>"); out.println("<body
bgcolor=cyan>"); out.println("<center>"); out.println("<h1>"+message+"</h1>\n");
out.println("<h3>Yours results stored in our database</h3>"); out.print("<br><br>");
out.println("<b>"+"Participants and their Marks"+"</b>"); out.println("<table border=5>"); try
{
Statement stmt=connect.createStatement(); String query="SELECT * FROM student";
rs=stmt.executeQuery(query); out.println("<th>"+"Seat_no"+"</th>");
out.println("<th>"+"Name"+"</th>"); out.println("<th>"+"Marks"+"</th>"); while(rs.next())
{
out.println("<tr>"); out.print("<td>"+rs.getInt(1)+"</td>");
out.print("<td>"+rs.getString(2)+"</td>"); out.print("<td>"+rs.getString(3)+"</td>");
out.println("</tr>");
}
out.println("</table>");
}
catch(SQLException ex){ } finally
{
try
{
if(rs!=null) rs.close(); if(stmt!=null) stmt.close(); if(connect!=null)
connect.close();
}
catch(SQLException e){ }
}
out.println("</center>"); out.println("</body></html>"); Total=0;
}}
HTML Code:
<html><head><title>Database Test</title></head> <body>
<center><h1>Online Examination</h1> </center>
<form action="StudentServlet3.view" method="POST"> <div align="left"><br></div>
<b>Seat Number:</b> <input type="text" name="Seat_no"> <div align="Right">
<b>Name:</b> <input type="text" name="Name" size="50"><br> </div>
<br><br>
<b>1. Every host implements transport layer.</b><br/> <input type="radio" name="group1"
value="True">True <input type="radio" name="group1" value="False">False<br>
<b>2. It is a network layer's responsibility to forward packets reliably from source to destina-
tion</b><br/>
<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False<br>
<b>3. Packet switching is more useful in bursty traffic</b><br/> <input type="radio"
name="group3" value="True">True<input type="radio" name="group3"
value="False">False<br> <b>4. A phone network uses packet switching</b><br/> <input
type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False<br>
<b>5. HTML is a Protocol for describing web contents</b><br/> <input type="radio"
name="group5" value="True">True
<input type="radio" name="group5" value="False">False<br> <br><br><br>
<center>
<input type="submit" value="Submit"><br><br> </center>
</form></body></html>
OUTPUT:

RESULT:
Thus to write java servlet programs to conduct online examination and to display student mark list
available in a database was successfully executed and verified.
INSTALL TOMCAT SERVER

AIM:
Install TOMCAT web server. Convert the static web pages of assignments 2 into dynamic web
pages using servlets and cookies. Hint: Users information (user id, password,) would be stored in
web.xml. Write a servlet program to check user login.

Tomcat Installation Procedure: Step 1: Install JDK 1.7 Download the latest JDK here:
http://www.oracle.com/technetwork/java/javase/downloads/index.html Start by creating a new
directory /usr/java:

1. [root@srv6 ~]# mkdir /usr/java Change to the /usr/java directory


1. [root@srv6 ~]# cd /usr/java
2. [root@srv6 java ]#
Download the appropriate JDK and save it to /usr/java directory we created above. Unpack jdk-
7u5-linux-x64.tar.gz in the /usr/java directory using tar -xzf:
1. [root@srv6 java]# tar -xzf jdk-7u5-linux-x64.tar.gz
This will create the directory /usr/java/jdk1.7.0_05. This will be our JAVA_HOME. We can now
set JAVA_HOME and put Java into the path of our users.
To set it for your current session, you can issue the following from the CLI:
1. [root@srv6 java]# JAVA_HOME=/usr/java/jdk1.7.0_05
2. [root@srv6 java]# export JAVA_HOME
3. [root@srv6 java]# PATH=$JAVA_HOME/bin:$PATH
4. [root@srv6 java]# export PATH
To set the JAVA_HOME permanently, however, we need to add below to the ~/.bash_profile of
the user (in this case, root).
We can also add it /etc/profile and then source it to give to all users.
1. JAVA_HOME=/usr/java/jdk1.7.0_05
2. export JAVA_HOME
3. PATH=$JAVA_HOME/bin:$PATH
4. export PATH
Once you have added the above to ~/.bash_profile, you should log out, then log back in and check
that the JAVA_HOME is set correctly.
1. [root@srv6 ~]# echo $JAVA_HOME 2. /usr/java/jdk1.7.0_05
Step 2: Download and Unpack Tomcat 7.0.29 (or latest)

We will install Tomcat 7 under /usr/share. Switch to the /usr/share directory:


1. [root@srv6 ~]# cd /usr/share
2. [root@srv6 share ]#
Download apache-tomcat-7.0.29.tar.gz (or the latest version) here and save it to /usr/share Once
downloaded, you should verify the MD5 Checksum for your Tomcat download using the md5sum
command.
1. [root@srv6 share ]# md5sum apache-tomcat-7.0.29.tar.gz
2. 307076fa3827e19fa9b03f3ef7cf1f3f *apache-tomcat-7.0.29.tar.gz
Compare the output above to the MD5 Checksum provided next to the download link and you
used above and check that it matches.
unpack the file using tar -xzf:
1. [root@srv6 share ]# tar -xzf apache-tomcat-7.0.29.tar.gz This will create the directory
/usr/share/apache-tomcat-7.0.29 Step 3: Configure Tomcat to Run as a Service.
We will now see how to run Tomcat as a service and create a simple Start/Stop/Restart script, as
well as to start Tomcat at boot.
Change to the /etc/init.d directory and create a script called 'tomcat' as shown below.
1. [root@srv6 share]# cd /etc/init.d
2. [root@srv6 init.d]# vi tomcat And here is the script we will use.
1. #!/bin/bash
2. # description: Tomcat Start Stop Restart
3. # processname: tomcat
4. # chkconfig: 234 20 80
5. JAVA_HOME=/usr/java/jdk1.7.0_05
6. export JAVA_HOME

7. PATH=$JAVA_HOME/bin:$PATH
8. export PATH
9. CATALINA_HOME=/usr/share/apache-tomcat-7.0.29
10. case $1 in
11. start)
13. sh $CATALINA_HOME/bin/startup.sh
;;
15. stop)
16. sh $CATALINA_HOME/bin/shutdown.sh
;;
18. restart)
19. sh $CATALINA_HOME/bin/shutdown.sh
20. sh $CATALINA_HOME/bin/startup.sh 21. ;;
22. esac
23. exit 0
The above script is simple and contains all of the basic elements you will need to get going. As
you can see, we are simply calling the startup.sh and shutdown.sh scripts located in the Tomcat
bin directory (/usr/share/apache-tomcat-7.0.29/bin).
You can adjust your script according to your needs and, in subsequent posts, we'll look at
additional examples.
CATALINA_HOME is the Tomcat home directory (/usr/share/apache-tomcat-7.0.29) Now, set
the permissions for your script to make it executable:
1. [root@srv6 init.d]# chmod 755 tomcat
We now use the chkconfig utility to have Tomcat start at boot time. In my script above, I am using
chkconfig: 234 20 80. 2345 are the run levels and 20 and 80 are the stop and start priorities
respectively. You can adjust as needed.
1. [root@srv6 init.d]# chkconfig --add tomcat
2. [root@srv6 init.d]# chkconfig --level 234 tomcat on
Verify it:
1. [root@srv6 init.d]# chkconfig --list tomcat
2. tomcat 0:off 1:off 2:on 3:on 4:on 5:off 6:off Now, let's test our script.
Start Tomcat:
1. [root@srv6 ~]# service tomcat start
2. Using CATALINA_BASE: /usr/share/apache-tomcat-7.0.29
3. Using CATALINA_HOME: /usr/share/apache-tomcat-7.0.29
4. Using CATALINA_TMPDIR: /usr/share/apache-tomcat-7.0.29/temp
5. Using JRE_HOME: /usr/java/jdk1.7.0_05
6. Using CLASSPATH: /usr/share/apache-tomcat-7.0.29/bin/bootstrap.jar:/usr/share/apache-
tomcat-7.0.29/bin/tomcat-juli.jar
Stop Tomcat:
1. [root@srv6 ~]# service tomcat stop
2. Using CATALINA_BASE: /usr/share/apache-tomcat-7.0.29
3. Using CATALINA_HOME: /usr/share/apache-tomcat-7.0.29
4. Using CATALINA_TMPDIR: /usr/share/apache-tomcat-7.0.29/temp
5. Using JRE_HOME: /usr/java/jdk1.7.0_05
6. Using CLASSPATH: /usr/share/apache-tomcat-7.0.29/bin/bootstrap.jar:/usr/share/apache-
tomcat-7.0.29/bin/tomcat-juli.jar
Restarting Tomcat (Must be started first):
1. [root@srv6 ~]# service tomcat restart
2. Using CATALINA_BASE: /usr/share/apache-tomcat-7.0.29
3. Using CATALINA_HOME: /usr/share/apache-tomcat-7.0.29
4. Using CATALINA_TMPDIR: /usr/share/apache-tomcat-7.0.29/temp

5. Using JRE_HOME: /usr/java/jdk1.7.0_05

6. Using CLASSPATH: /usr/share/apache-tomcat-7.0.29/bin/bootstrap.jar:/usr/share/apache-


tomcat-7.0.29/bin/tomcat-juli.jar
7. Using CATALINA_BASE: /usr/share/apache-tomcat-7.0.29
8. Using CATALINA_HOME: /usr/share/apache-tomcat-7.0.29
9. Using CATALINA_TMPDIR: /usr/share/apache-tomcat-7.0.29/temp
10. Using JRE_HOME: /usr/java/jdk1.7.0_05
11. Using CLASSPATH: /usr/share/apache-tomcat-7.0.29/bin/bootstrap.jar:/usr/share/apache-
tomcat-7.0.29/bin/tomcat-juli.jar
We should review the Catalina.out log located at /usr/share/apache-tomcat-
7.0.29/logs/catalina.out and check for any errors.
1. [root@srv6 init.d]# more /usr/share/apache-tomcat-7.0.29/logs/catalina.out We can now access
the Tomcat Manager page at:
http://yourdomain.com:8080 or http://yourIPaddress:8080 and we should see the Tomcat home page.

RESULT:
Thus the installation of Tomcat server is done successfully.
CONVERT THE STATIC WEB PAGES OF PROGRAMS INTO DYNAMIC WEBPAGES
USING SERVLETS

AIM:
To convert the static web pages into dynamic web pages using servlets (or JSP) and cookies.

PROCEDURE:
1. We will create ahtml form for entering the user name,password and card ID.
2. From the above HTML form, the servlet program is invoked in which the validity of
the user name,password and card id is checked.if it is a valid user then the welcome
message will be displayed otherwise the “invalid user” message will be displayed. In
this servlet we set the cookies in which the current user name is stored.
3. Compile the above servlet Login servlet.java and copy its class file in tomcats folder
at c:\tomcatdirectory\webapps\examples\WEB-INF\classes.
4. Then edit the web.xml in WEB-INF folder.We must store he user information such
as user name,password and card id in the web.xml using init-param.
5. On successful login , the information from the cookie is checked and shopping cart
page for corressponding user can be displayed.
6. Compile the above servlet LoginSuccess.java and copy its class file in the tomcat's
folder at c:\tomcatdirectory\webapps\examples\WEB-INF\classes.
7. Then edit the web.xml in WEB-INF folder.
8. Start tomcat web server.Open the web browser and display the login form created in
step1.

PROGRAM:

Loginform.html
<!DOCTYPE html>
<html>
<head>
<body>
<form action="http://localhost:8080/shopping/LoginServlet" method="post"> Enter username:
<input type="text" value="" name="User"><br><br> enter password:
<input type="password" value="" name="password"><br><br> enter card ID:
<input type="text" value="" name="CardID"><br><br>
<input type="submit" value="login">
</form>
</body>
</html>
LoginServlet.java
package shopping; import java.io.*; import javax.servlet.*;
import javax.servlet.http.*;
public class LoginServlet extends HttpServlet
{
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws
ServletException,IOException
{
res.setContentType("text/html"); PrintWriter out=res.getWriter(); String
usr=req.getParameter("User");
String pwd=req.getParameter("password"); String card=req.getParameter("CardID");

boolean flag=true;
String[] userID=getInitParameter("usernames").split(","); String[]
password=getInitParameter("passwords").split(","); String[]
cardids=getInitParameter("cardIDs").split(",");
int i; for(i=0;i<userID.length;i++)
{
if(userID[i].equals(usr) && password[i].equals(pwd)&&cardids[i].equals(card))
{
flag=false;
Cookie cookie1=new Cookie("CurrentUser",usr); Cookie cookie2=new Cookie("CreditCard",card);
res.addCookie(cookie1); res.addCookie(cookie2); out.println("<h2>Welcome "+usr+"</h2><hr>");
out.println("<h2>Select the book you would like to purchase<h2><hr>"); out.println("<form
action='LoginSuccess'>");
out.println("<input type=radio name='book' checked value='Let us C'/>Let us C<br>");

out.println("<input type=radio name='book' value='Exploring Python'/>Exploring Python<br>");


out.println("<input type=radio name='book' value='Mastering C'/>Mastering C<br>");
out.println("<input type=submit value='purchase'><hr>");

}
}
if(flag==true)
{
out.println("<h4>Invalid user name or password or card number,please try again by clicking
following link</h4>");
out.println("<a href='LoginForm.html'>"+"LoginForm.html");
}
}
}
LoginSuccess.java
package shopping; import java.io.*; import javax.servlet.*;
import javax.servlet.http.*;
public class LoginSuccess extends HttpServlet
{
protected void doGet(HttpServletRequest req,HttpServletResponse res) throws
ServletException,IOException
{
Cookie[] mycookie=req.getCookies(); res.setContentType("text/html"); PrintWriter
out=res.getWriter();
String book=req.getParameter("book");
out.print("<h2>welcome "+mycookie[0].getValue()+"</h2><hr>"); out.print("<h3>Thank you for
purchasing book:"+book+"</h3><hr>"); out.print("<h3>Rs.250 debited from credit card:
"+mycookie[1].getValue()); out.close();
}
}
Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-
app_3_1.xsd">
<servlet>
<init-param>
<param-name>usernames</param-name>
<param-value> indhu,abc,xyz</param-value>
</init-param>
<init-param>
<param-name>passwords</param-name>
<param-value>indhu,abc,xyz</param-value>
</init-param>
<init-param>
<param-name>cardIDs</param-name>
<param-value>111111,222222,333333</param-value>
</init-param>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>shopping.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>LoginSuccess</servlet-name>
<servlet-class>shopping.LoginSuccess</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginSuccess</servlet-name>
<url-pattern>/LoginSuccess</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:

RESULT:
Thus the conversion of the static web pages into dynamic web pages using servlets cookies has
been executed successfully.
FORM VALIDATION USING PHP

AIM:
To validate the form using PHP regular expression.

PROCEDURE:
1. Form is created for class registration with fileds.
2. These fields are validated using PHP code.
3. Form is displayed.

PROGRAM:

index.php:
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = ""; if
($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);

if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-
9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data); return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" value="<?php echo $name;?>">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email" value="<?php echo $email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo $website;?>">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo
$comment;?></textarea>
<br><br> Gender:
<input type="radio" name="gender" <?php if (isset($gender) &&
$gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo
"checked";?> value="male">Male
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="other") echo
"checked";?> value="other">Other
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>"; echo $name;
</body>
</html>
OUTPUT:

RESULT:
The form is validated using PHP regular expression.
CREATE LOGIN AND REGISTRATION FORM PAGE USING REACT JS.

AIM:
To create login and Registration form using React JS

PROCEDURE:
Step 1:Set Up Your Development Environment
 Install Node.js and npm: Ensure that Node.js and npm (Node Package Manager) are
installed on your computer. This is required to create and manage your React
application.
 Install a Code Editor: Choose a code editor like Visual Studio Code to write and
manage your code.
Step 2 Create a New React Project using
npm create-react-app myreactapp

Step 3 : Change your directory and enter your main folder.


cd myreactapp

Step 4 : Write the code using CSS, Javascript


Step 5 : Run the application using the following command
npm start

Step 6 : This output is visible on the http://localhost:3000/ on the browser window

CSS CODE:

App.css

.App {
text-align: center;
background-color: green;
}

.label {
display: block;
font-size: larger;
color: white;
padding: 5px;
}

.input {
font-size: larger;
padding: 5px;
margin: 2px;

.btn {
color: white;
background-color: red;
border-radius: 5px;
font-size: larger;
display: block;
padding: 5px;
margin: 10px auto;
}

.messages {
display: flex;
justify-content: center;
}

.error {
display: block;
background-color: red;
color: white;
width: fit-content;
height: 50px;
padding: 5px;
}

.success {
display: block;
background-color: lightblue;
color: black;
width: fit-content;
height: 50px;
padding: 5px;
}

Javascript code 1
App.js

'./App.css';
import Form from "./Form"

function App() {
return (
<div className="App">
<Form />
</div>

);
}

export default App;

Javascript code 2
Form.js

import { useState } from "react";

export default function Form() {


// States for registration
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

// States for checking the errors


const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState(false);

// Handling the name change


const handleName = (e) => {
setName(e.target.value);
setSubmitted(false);
};

// Handling the email change


const handleEmail = (e) => {
setEmail(e.target.value);
setSubmitted(false);
};

// Handling the password change


const handlePassword = (e) => {
setPassword(e.target.value);
setSubmitted(false);
};

// Handling the form submission


const handleSubmit = (e) => {
e.preventDefault();
if (name === "" || email === "" || password === "") {
setError(true);
} else {
setSubmitted(true);
setError(false);
}
};

// Showing success message


const successMessage = () => {
return (
<div
className="success"
style={{
display: submitted ? "" : "none",
}}
>
<h1>User {name} successfully registered!!</h1>
</div>
);
};

// Showing error message if error is true


const errorMessage = () => {
return (
<div
className="error"
style={{
display: error ? "" : "none",
}}
>
<h1>Please enter all the fields</h1>
</div>
);
};

return (
<div className="form">
<div>
<h1>User Registration</h1>
</div>

{/* Calling to the methods */}


<div className="messages">
{errorMessage()}
{successMessage()}
</div>

<form>
{/* Labels and inputs for form data */}
<label className="label">Name</label>
<input
onChange={handleName}
className="input"
value={name}
type="text"
/>

<label className="label">Email</label>
<input
onChange={handleEmail}
className="input"
value={email}
type="email"
/>

<label className="label">Password</label>
<input
onChange={handlePassword}
className="input"
value={password}
type="password"
/>

<button onClick={handleSubmit} className="btn" type="submit">


Submit
</button>
</form>
</div>
);
}

OUTPUT:

RESULT
Thus the login page and registration form was created end executed successfully
DEVELOP A SIMPLE CALCULATOR APPLICATION USING REACT JS.

AIM:
To create a simple calculator using multiple components in React JS

PROCEDURE:

Algorithm for Calculator Application


1. Initialization
o Start by setting up a React application (using Create React App or a similar
method).
o Create a directory structure to organize components (/src/components).
2. Component Creation
o CalculatorTitle Component
1. Create a functional component named CalculatorTitle.
2. Accept a prop value to display the title.
3. Render a div element containing the title.
o OutputScreenRow Component
1. Create a functional component named OutputScreenRow.
2. Render a div containing a read-only text input field to display the
output.
o OutputScreen Component
1. Create a functional component named OutputScreen.
2. Import OutputScreenRow.
3. Render a div that contains two OutputScreenRow components to
display the input and output.
o Button Component
1. Create a functional component named Button.
2. Accept a prop label to set the button's displayed text.
3. Render an input element of type button with the specified label.
o Calculator Component
1. Create a class component named Calculator.
2. In the render method:
 Import CalculatorTitle, OutputScreen, and Button components.
 Render a div that:
 Includes the CalculatorTitle with a static title
("GeeksforGeeks Calculator").
 Includes the OutputScreen to show inputs and outputs.
 Render multiple rows of Button components for the
calculator's keys (numbers and operations).
 Structure buttons in rows for better layout.
3. Main Entry Point
o Create an index.js file.
o Import necessary modules (React, ReactDOM, Calculator).
o Use ReactDOM.render to render the Calculator component into the HTML
element with the id root.
4. User Interaction (Not implemented)
o Implement state management in the Calculator component to handle button
clicks:
 Use state variables to manage input and output values.
 Update the state when buttons are clicked (e.g., adding numbers,
performing calculations).
 Display updated values in the output screen.
5. Styling (Optional)
o Create a CSS file to style the calculator components (buttons, input fields,
layout).
o Import the CSS file into the main components as needed.

CODING

 Create a calculatorTitle.js file for showing the title of the calculator

//calculatorTitle.js File

import React from "react"; // Import React (Mandatory Step)

// Create Functional Component.


// Takes title as props.value.
const CalculatorTitle = (props) => {
return (
<div className="calculator-title">{props.value}</div>
);
};
export default CalculatorTitle; // Export Calculator Title

 Now create a file outputScreenRow.js for taking input and showing the output of the
calculation, code of this file is given below.

// outputScreenRow.js File
import React from "react"; // Import React (Mandatory Step)

// Functional Component.
// Used to show Question/Answer.
const OutputScreenRow = () => {
return (
<div className="screen-row">
<input type="text" readOnly />
</div>
);
};
export default OutputScreenRow; // Export Output Screen Row

 Create an outputScreen.js file and import the outputScreenRow.js file. The code
of this file is given below.
// outputScreen.js File
import React from "react"; // Import React (Mandatory Step).
import OutputScreenRow from "./outputScreenRow.js"; // Import Output Screen Row.

// Functional Component.
// Use to hold two Screen Rows.
const OutputScreen = () => {
return (
<div className="screen">
<OutputScreenRow />
<OutputScreenRow />
</div>
);
};
export default OutputScreen; // Export Output Screen.

Create a button.js file


// button.js File
import React from "react"; // Import React (Mandatory Step)

// Create our Button component as a functional component.


const Button = (props) => {
return (
<input type="button" value={props.label} />
);
};
export default Button; // Export our button component

 Now create a calculator.js file and import calculatorTitle.js, outputScreen.js,


and button.js files. The code for this program is below.
Javascript

// calculator.js File
// Imports.
import React from "react";
import CalculatorTitle from "./calculatorTitle.js";
import OutputScreen from "./outputScreen.js";
import Button from "./button.js";

class Calculator extends React.Component {


render() {
return (
<div className="frame">
<CalculatorTitle value="GeeksforGeeks Calculator" />
<div class="mainCalc">
<OutputScreen />
<div className="button-row">
<Button label={"Clear"} />
<Button label={"Delete"} />
<Button label={"."} />
<Button label={"/"} />
</div>
<div className="button-row">
<Button label={"7"} />
<Button label={"8"} />
<Button label={"9"} />
<Button label={"*"} />
</div>
<div className="button-row">
<Button label={"4"} />
<Button label={"5"} />
<Button label={"6"} />
<Button label={"-"} />
</div>
<div className="button-row">
<Button label={"1"} />
<Button label={"2"} />
<Button label={"3"} />
<Button label={"+"} />
</div>
<div className="button-row">
<Button label={"0"} />
<Button label={"="} />
</div>
</div>
</div>
);
}
}
export default Calculator; // Export Calculator Component

 Inside the index.js file import, the calculator.js file and the code for this file is given
below.

//index.js File
import React from "react";
import ReactDOM from "react-dom";
import Calculator from "./components/calculator.js";

// Render the Calculator to the Web page.


ReactDOM.render(<Calculator />, document.getElementById("root"));
OUTPUT:

RESULT:
Thus the simple calculator application using React JS is implemented

You might also like