lOMoAR cPSD| 36713071
lOMoAR cPSD| 36713071
EX.NO:1
DATE :
CREATION OF INTERACTIVE WEB SITES - DESIGN USING HTML AND
AUTHORING TOOLS
Aim:
To develop a webpage to enter the student profiles.
Algorithm:
1. start the program
2. using html tags, create table to enter the student profile
3. For each row of the table, enter the data using <td> such that create studentname,fathers
name,address and e-mail,etc
4.Using <table> we have to enter the qualification of the students.
5.Using radio button,we have to choose the entertainment and software exposure ofthe
student.
6.Using <form>, we have to create a declare text to type the text.Step
7.Execute the web page in Internet explorer
Program :
<html>
<head>
<title>Resume page</title>
</head>
<body bgcolor="#fffFF">
<center><font
color="#6600CC"><h1><b><b><u>PROFILE</u></b></b></h1></center></font>
<form name="input" action ="z:\WebTech Lab\webpageprofile.htm" method="get">
<img height=100 width=100 src="z:\WebTech Lab\Photo.jpg" alt="angry face">
<table border="3">
<td>Name:</td>
<td><input type="text" height='10' width='25'></td>
</tr>
<tr>
<td>Father Name:</td>
<td><input type="text" height='10' width='25'></td> </tr>
<tr>
<td>Mother Name:</td>
<td><input type="text" height='10' width='25'></td></tr>
<tr>
<td>Date Of Birth:</td>
<td><input type="text" height='10' width='25'></td></tr>
<tr>
<td>Marital Status:</td>
<td><input type="text" height='10' width='25'></td></tr>
<tr>
<td>Communication:</td>
<td colspan="4"><textarea name="male" rows="4" cols='17'></textarea></td></tr>
<tr>
<td>Gender:</td>
<td>Male:<input type="checkbox" name="male">Female:<input type="checkbox"
name="female"></td>
</tr>
<tr>
<th colspan="6">Educational Qualifications</th></tr>
<tr>
<th>Name of the Deg.</th><th>name of the degree</th><th>Name of the
Instistution</th><th>Year of Pass</th><th>Grade</th><th>Specialization</th></tr>
<tr>
<td>SSLC:</td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
</tr>
<tr>
<td>HSC:</td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
</tr>
<tr>
<td>D.C.Tech:</td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
</tr>
<tr>
<td>M.C.A:</td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
</tr>
lOMoAR cPSD| 36713071
<tr>
<td>M.E:</td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
<td><input type="text" height='10' width='25'></td>
</tr>
<br><br><br>
<tr>
<th colspan="6">Software Exposure</th>
</tr>
<tr>
<td>OS:</td>
<<td colspan="5">Windows XP/00/03<input type="checkbox"
name="male">LINUX<input type="checkbox" name="female">UNIX<input
type="checkbox" name="female">others<input type="checkbox" name="female"></td>
</tr>
<tr>
<td>Languages:</td>
<td colspan="5">C:<input type="checkbox" name="male">C++:<input type="checkbox"
name="female">Java:<input type="checkbox" name="female">J2EE:<input
type="checkbox" name="female"></td>
</tr>
<tr>
<td>Extra Curriculam Acvtivities:</td>
<td colspan="5">Dance:<input type="checkbox" name="male">Swimming:<input
type="checkbox" name="female">Shuttle:<input type="checkbox"
name="female">Music:<input type="checkbox" name="female"></td>
</tr>
<tr>
<td>Any Other Information:</td>
<td><input type="text" name="male"></td>
</tr>
<tr>
<center><th>Declaration:</th></center>
<td colspan="5"><textarea name="male" rows="5" cols='70'></textarea></td>
</tr>
<tr>
<td>Date:</td>
<td><input type="text" name="male"></td>
<td>Place:</td>
<td><input type="text" name="male" ></td>
</tr>
<tr>
<td><input type="Submit" value="submit"> <A href="webpageprofile.htm"></A><br
CLEAR=both></td>
<td><input type="reset" value="reset"></td>
</tr>
</center>
</body>
</html>
Sample Output :
Result:
Thus the web page for student profile has been created.
EX.NO:2
DATE :
FORM VALIDATION USING JAVASCRIPT
Aim:
To create a form validation system using JavaScript that ensures user input
adheres to specified criteria before submission.
Algorithm:
1. Get the form element from the HTML document using JavaScript.
2. Add an event listener to the form element that listens for the submit event.
3.Inside the event listener function, prevent the default form submission behavior using
event.preventDefault().
4.Retrieve the values of the form fields using JavaScript and validate them using
conditional statements.
5..If any field is invalid, display an error message and prevent the form from submitting.
6..If all fields are valid, submit the form.
Program :
<html>
<head>
<title> Registration Form Tutorial</title>
<script type="text/javascript"></script>
<script type="text/javascript">
var ck_name = /^[A-Za-z0-9 ]{3,20}$/;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]
{2})?)$/i
var ck_username = /^[A-Za-z0-9_]{1,20}$/;
var ck_phoneno = /^[0-9!@#$%^&*()_]{10}$/;
var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
function validate(form){
var name = form.name.value;
var email = form.email.value;
var username = form.username.value;
var password = form.password.value;
var gender = form.gender.value;
var phoneno=form.phoneno.value;
var errors = [];
if (!ck_name.test(name)) {
errors[errors.length] = "You valid Name .";
if (!ck_email.test(email)) {
errors[errors.length] = "You must enter a valid email address.";
}
if (!ck_username.test(username)) {
errors[errors.length] = "You valid UserName no special char .";
}
if (!ck_password.test(password)) {
errors[errors.length] = "You must enter a valid Password min 6 char.";
}
if (gender==0) {
errors[errors.length] = "Select Gender";
}
if (!ck_phoneno.test(phoneno)) {
errors[errors.length] = "You must enter a valid phone no 10 char.";
}
if (errors.length > 0)
{ reportErrors(errors);
return false;
}
return true;
}
function reportErrors(errors){
var msg = "Please Enter Valide Data...\n";
for (var i = 0; i<errors.length; i++) {
var numError = i + 1;
msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}
</script>
</head>
<body id="public">
<div style="height:30px"></div>
<div id="container">
<div style="height:30px"></div>
lOMoAR cPSD| 36713071
<form autocomplete="off"
enctype="multipart/form-data" method="post" action="thanks.html"
onSubmit="return validate(this);" name="form">
<div class="info" style="padding-left:20px">
<h2>Registration Form</h2>
</div>
<ul>
<li id="foli1" class=" ">
<label class="desc" id="title1" for="Field1">
Full Name</label>
<div>
<input id="name" name="name" type="text" class="field text medium"
value="" maxlength="255" tabindex="1"/>
</div>
</li>
<li id="foli2" class=" ">
<label class="desc" id="title2" for="Field2">
Email </label>
<div>
<input id="email" name="email" type="text" class="field text medium"
value="" maxlength="255" tabindex="2"/>
</div>
</li>
<li id="foli3" class=" ">
<label class="desc" id="title3" for="Field3">
User-ID</label>
<div>
<input id="username" name="username" type="text" class="field text
medium" value="" maxlength="255" tabindex="3"/>
</div>
</li>
<li id="foli4" class=" ">
<label class="desc" id="title4" for="Field4">
Password</label>
<div>
<input id="password" name="password" type="password"
class="field text medium" value="" maxlength="255" tabindex="4"/>
</div>
</li>
<li id="foli5" class=" ">
<label class="desc" id="title5" for="Field5">
phoneno</label>
<div>
<input id="phoneno" name="phoneno" type="text" class="field text medium"
value="" maxlength="255" tabindex="4"/>
</div>
</li>
<li id="foli6" class=" ">
<label class="desc" id="title6" for="Field6">
Gender</label>
<div>
<select id="gender" name="gender" class="field select medium"
tabindex="5">
<option value="0">Gender</option><option
value="1">Male</option><option value="2">Female</option>
</select>
</div>
</li>
<li id="foli15" class=" "></li>
<li class="buttons">
<input type="submit" value="Submit" style=" background:#0060a1; color:#FFFFFF;
font-size:14px; border:1px solid #0060a1"/>
</li>
</ul>
</form>
<div style="height:20px"></div>
</div><!--container-->
</body>
</html>
lOMoAR cPSD| 36713071
Sample Output :
Result:
Thus the program for Javascript for displaying date and comparing two
Dates has been successfully compiled and executed.
EX.NO:3
DATE :
CREATION OF SIMPLE PHP SCRIPTS
Aim:
To create simple PHP scripts to perform various tasks such as handling form submissions,
interacting with databases, or processing data.
Algorithm:
1. start the program
2. using html tags, create table to enter the student profile
3. For each row of the table, enter the data using <td> such that create studentname,fathers
name,address and e-mail,etc
4.Using <table> we have to enter the qualification of the students.
5.Using radio button,we have to choose the entertainment and software exposure ofthe
student.
6.Using <form>, we have to create a declare text to type the text.Step
7.Execute the web page in Internet explorer
Program :
<html>
<head>
<title>Writing PHP Function with Parameters</title>
</head>
<body>
<?php
function addFunction($num1, $num2)
{
$sum = $num1 + $num2;
echo "Sum of the two numbers is : $sum";
}
addFunction(10, 20);
?>
</body>
</html>
Output:
Sum of the two numbers is : 30
Result:
Thus the program for Javascript for displaying date and comparing twoDates has been successfully
compiled and executed.
lOMoAR cPSD| 36713071
EX.NO:4
DATE :
HANDLING MULTIMEDIA CONTENT IN WEB SITES
Aim:
To create simple PHP scripts to perform various tasks such as handling form submissions,
interacting with databases, or processing data.
Algorithm:
1. Determine script goals like processing input or generating content.
2. Install PHP and configure the web server.
3. Use a text editor to create a .php file.
4. Start the script with <?php.
5. Create PHP code for tasks like form processing or database queries.
6. Save and test the script on a web server.
7. Identify and fix issues with error messages and tools.
8. Add comments for clarity and maintenance.
9. Improve code efficiency and performance.
10. Upload and integrate the script into the application.
Program :
<!DOCTYPE html>
<html>
<body>
<embed src="india.jpg"width="200" height="200"></br>
<embed src="animation.swf" type="application/vnd.adobe.flash-movie"></br>
<audio controls>
<source src="kalimba.mp3"
type="audio/mpeg"> Your browser does not
support the audio element.
</audio>
</body>
</html>
Sample Output:
Result:
Thus the program for handling multimedia content in web sites has been successfully compiled and
executed.
Write programs using Servlets:
Steps to Create Servlet Application in Netbeans IDE
To create a servlet application in Netbeans IDE, you will need to follow the following
steps
a. Open Netbeans IDE, Select File -> New Project
b. Select Java Web -> Web Application, then click on Next
lOMoAR cPSD| 36713071
c. Give a name to your project and click on Next,
d. and then, Click Finish
e. The complete directory structure required for the Servlet Application will be
created automatically by the IDE.
f. To create a Servlet, open Source Package, right click on default packages -> New -
> Servlet.
g. Give a Name to your Servlet class file,
h. Now, your Servlet class is ready, and we just need to change the method definitions
i. Write some code inside your Servlet class.
j. Create an HTML file, right click on Web Pages -> New -> HTML
k. Give it a name. We recommend you to name it index , because browser will always
pick up the index.html file automatically from a directory. Index file is read as the
first page of the web application.
l. Write some code inside your HTML file. We have created a hyperlink to our Servlet
in our HTML file.
m. Edit web.xml file. In the web.xml file you can see, we have specified the url-
pattern and the servlet-name, this means when hello url is accessed our Servlet
file will be executed.
n. Run your application, right click on your Project and select Run
o. Click on the link created, to open your Servlet.
p. Our First Servlet class is running.
EX.NO:5(A)
DATE :
TO INVOKE SERVLETS FROM HTML FORMS
Aim:
To create a servlet program and check the script validation.
Algorithm:
1.Start the program.
2.Get the context text at Servlet at text html.
3.Get the response from the user by entering the username field.Step
4.Get the response from the user by entering the password field.
5.If the username and password are correct, then the user is authenticatedand can enter
into web page.
6.Execute the program in Internet Explorer.7.Stop
the program.
Program :
HTML Code :
<HTMl>
<HEAD><CENTER> </CENTER></HEAD>
<CENTER>
<body bgcolor="green">
<form action="http://localhost:7001/parthi_servlet/servlet1" method="get">
<h1>USERNAME AND PASSWORD></h1>
<TABLE >
<TR>
<TD>USERNAME<INPUT TYPE="TEXT" name="username"></TD></TR>
<TR>
<TD> PASSWORD<INPUT TYPE="password" name="password"></TD></TR>
<TR>
<TD> <INPUT TYPE="submit" VALUE="SUBMIT" NAME=SUB></TD>
<TD> <INPUT TYPE="reset" VALUE="CLEAR" NAME=CLA></TD>
</TR>
</TABLE></CENTER>
</form>
</body>
</HTML>
lOMoAR cPSD| 36713071
Java Servlet Code :
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class servlet1 extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException
{
res.setContentType("text/html");
PrintWriter pw=res.getWriter();
String admin=req.getParameter("username");
String pass=req.getParameter("password");
pw.println(admin);
pw.println(pass);
if((admin.equals("admin2010")) && (pass.equals("abc123")))
{
pw.println("Authorized user");
}
else
{
pw.println("not an Authorized user");
}
}
}
Sample Output:
lOMoAR cPSD| 36713071
Result:
Thus the servlet program has been created and validated successfully.
EX.NO:5(B)
DATE :
SESSION TRACKING USING HIDDEN FORM FIELDS AND SESSION TRACKING
FOR A HIT COUNT
Aim:
To implement session tracking in a Servlet to keep track of the number of times a user has
visited a page.
Algorithm:
1. Create a JSP or HTML page with a form that has a hidden input field. This field should be
named "sessionId" and should have a value equal to the session ID.
2. In the Servlet, use the HttpServletRequest object to retrieve the session ID from the hidden
input field. If the session ID does not exist in the hidden input field, create a new session ID
and store it in the hidden input field.
3. Use the HttpServletResponse object to set a cookie with the session ID.
4. Use the HttpSession object to store any session attributes you need
Program :
index.html
<form method="post" action="validate">
Name:<input type="text" name="user" /><br/>
Password:<input type="text" name="pass" ><br/>
<input type="submit" value="submit">
</form>
web.xml
<web-app...>
<servlet>
<servlet-name>First</servlet-name>
<servlet-class>First</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>First</servlet-name>
<url-pattern>/First</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Second</servlet-name>
<servlet-class>Second</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Second</servlet-name>
<url-pattern>/Second</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
First.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class First extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//getting value submitted in form from HTML file
String user = request.getParameter("user");
//creating a new hidden form field
out.println("<form action='Second'>");
out.println("<input type='hidden' name='user' value='"+user+"'>");
out.println("<input type='submit' value='submit' >");
out.println("</form>");
}
}
Second.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Second extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//getting parameter from the hidden field
String user = request.getParameter("user");
out.println("Welcome "+user);
}
}
Output:
Result:
Thus the session tracking using hidden form fields and session tracking for a hit count has
been created and validated successfully.
EX.NO:6
DATE :
CREATION OF INFORMATION RETRIEVAL SYSTEM USING WEB, PHP AND
MYSQL
Aim:
To develop an efficient information retrieval system using web technologies (PHP and
MySQL) that enables users to search and access relevant information stored in a database.
Algorithm:
1. Design the database schema and create tables with proper relationships.
2. Populate the database with relevant data while ensuring integrity.
3. Design a user-friendly web interface with input forms for search queries.
4. Develop a search algorithm for retrieving relevant information.
5. Process user queries to extract search keywords and parameters.
6. Construct SQL queries for efficient data retrieval using MySQL's capabilities.
7. Present search results clearly with pagination for better user experience.
8. Enable user interaction with search results and implement feedback mechanisms.
9. Implement security measures against SQL injection and authenticate users if needed.
10. Optimize database queries and cache data for improved performance.
11. Thoroughly test the system and gather user feedback for evaluation.
12. Deploy the system on a web server and monitor performance post-deployment.
Program :
<?php
session_start();
// connect to mysql
$con= mysqli_connect("localhost", "root", "","feedback");
//In case of failure connectionif(!$con)
{
die("Server could not connected");
}
//After clicking on submit, those values get inserted into thetable named as data which is located in
feedback database.
if(isset($_POST["btn"]))
{
$name=$_POST["name"];
$feed=$_POST["feed"];
//mysql insert query
$sql="insert into data values('".$name."','".$feed."')";
$n=mysqli_query($con,$sql);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""<a
href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd</a>">
<html xmlns="<a
href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"
/>
<title>Feedback | Ashok Kumar |</title>
<meta name="distribution" content="global" />
<meta name="language" content="En" />
</head>
<script>
// function for creating alert after submission of feedbackfunction check()
{
alert('Thank you for your feedback.');
}
</script>
<div class="container">
<form id="contact" action="" method="post">
<h3>Feedback Form</h3>
<h4>"The key to learning is feedback.It is nearly impossible tolearn anything with out
it"</h4>
<fieldset>
<input placeholder="Your name" type="text" name="name"tabindex="1"
required autofocus>
</fieldset>
<fieldset>
<textarea placeholder="Write Something about me.." name="feed"tabindex="5" required
autofocus></textarea>
</fieldset>
<fieldset>
<input type="submit" name="btn" value="Submit"onclick="check()">
</fieldset>
</form>
</div>
Create the database, then create the table for data.
Enter the rows in the table. You have to connect to the database.
Now we understand each and every step as shown below.
Example 1: In this. we use PHPMyAdmin for the database handling. Start the server in
the XAMPP as shown in the below image
Making sure that both Apache and MySQL are showing green color, means that the server is
working.
XAMPP PANEL
After that create the database in the PHPMyAdmin. Open the below URL.
http://localhost/phpmyadmin/index.php
Creating the database:
creating the database in MySQL PHPMyAdmin
Create the table: Execute the SQL query in the “gfg” database.
CREATE TABLE student
name varchar(20),
branch varchar(20),
roll_no INT
);
Enter the data in the table.
INSERT INTO `student` ( `name`, `branch`, `roll_no`)
VALUES ( 'Rohan', 'CSE', '1' );
After the data is inserted, the table will look like this.
After entering the data in the table
PHP Code: Run the PHP script as shown below to fetch the data from the database.
PHP
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "gfg";
// connect the database with the server
$conn = new mysqli($servername,$username,$password,$dbname);
// if error occurs
if ($conn -> connect_errno)
{
echo "Failed to connect to MySQL: " . $conn -> connect_error;
exit();
}
$sql = "select * from student";
$result = ($conn->query($sql));
//declare array to store the data of database
$row = [];
if ($result->num_rows > 0)
{
// fetch all data from db into array
$row = $result->fetch_all(MYSQLI_ASSOC);
}
?>
<!DOCTYPE html>
<html>
<style>
td,th {
border: 1px solid black;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Branch</th>
<th>Roll Number</th>
</tr>
</thead>
<tbody>
<?php
if(!empty($row))
foreach($row as $rows)
{
?>
<tr>
<td><?php echo $rows['name']; ?></td>
<td><?php echo $rows['branch']; ?></td>
<td><?php echo $rows['roll_no']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>
<?php
mysqli_close($conn);
?>
Output:
Result:
Thus the creation of information retrieval system using web, PHP and MySQL has been created
and validated successfully.
EX.NO:7
DATE :
CREATION OF PERSONAL INFORMATION SYSTEM
Aim:
To develop a comprehensive information system that efficiently manages data, facilitates
data retrieval, analysis, and decision-making, and enhances organizational processes and
productivity.
Algorithm:
1. Implement secure user authentication with encryption for data protection.
2. Allow users to create and update personalized profiles with their information.
3. Organize data into structured sections like personal details and work history.
4. Provide user-friendly interfaces for inputting and editing data, ensuring completeness.
5. Develop efficient algorithms for retrieving and searching user data.
6. Implement security measures including encryption and access controls.
7. Allow users to specify sharing permissions and manage data access.
8. Develop backup mechanisms to prevent data loss and recovery procedures for emergencies.
9. Integrate with external services for data synchronization and interoperability.
10. Notify users about important events and allow them to customize notifications.
11. Gather user feedback for system improvement and update accordingly.
12. Provide comprehensive documentation and support resources, including user training if
needed.
Program :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD Operation</title>
<link rel="stylesheet" href="./Crud.css">
</head>
<body>
<div class="flex-container">
<div class="flex-child magenta">
<table class="table">
<tr class="table-row">
<td>
<form onsubmit="event.preventDefault(); onFormSubmit();" >
<div class="container">
<h1 id="heading1">Register</h1>
<p id="p1">Please fill this form to create a Record.</p>
<hr>
<label id="label" for="Emp-Name"><b>Emp-Name</b></label>
<input type="text" placeholder="Enter Name" name="name" id="name" required >
<label id="label" for="City"><b>City</b></label>
<input type="text" placeholder="Enter City" name="city" id="city" required >
<label id="label" for="salary"><b>Salary</b></label>
<input type="number" name="salary" id="salary"placeholder="Salary" required>
<hr>
<!-- <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> -->
<button type="submit" name="submit"class="registerbtn">Submit</button>
</div>
</form>
</td>
</tr>
</table>
</div>
<div class="flex-child green">
<td>
<table id="empList">
<h1 id="record">Record</h1>
<thead id="tab_head">
<tr>
<th>Emp-Name</th>
<th>City</th>
<th>Salary</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="tab_body">
</tbody>
</table>
</td>
</div>
</div>
<script src="./Crud.js"></script>
</body>
</html>
Crud.css
*{
box-sizing: border-box;
}
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
/* width: 30%; */
text-align: -webkit-center;
border: 2px solid rgb(255, 162, 162);
}
.flex-child:first-child {margin-
right: 20px;
}
/* Add padding to containers */
.container {
padding: 16px;
}
/* Full-width input fields */
input[type="text"],
input[type="text"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none; background:
#f1f1f1;
}
input[type="number"]:focus,
input[type="number"]:focus {
background-color: #ddd;
outline: none;
}
#heading1 {
margin-top: 0px; text-
align: center;font-size:
40px;
}
#p1 {
margin-top: 0px; text-
align: center;font-size:
20px;
}
#label {
font-size: 22px;
}
#salary {
border: 1px inherit;
border-radius: 30px;
font-size: 18px; height:
30px;
color: black;
/* background-color: rgb(252, 207, 230); */
/* display: block; */
justify-content: space-between;
}
/* Overwrite default styles of hr */hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit/register button */
.registerbtn {
background-color: #04aa6d;
color: white;
padding: 16px 20px;
margin: 8px 0; border:
none; cursor: pointer;
width: 100%;
opacity: 0.9;
height: 50px;
border-radius: 30px;
font-size: 20px;
}
.registerbtn:hover {
opacity: 1;
}
/* Add a blue text color to links */a {
color: dodgerblue;
cursor: pointer;
}
/* Set a grey background color and center the text of the "sign in" section
*/
.signin {
background-color: #f1f1f1;text-
align: center;
}
/*
*/
#empList,
th,
td {
border: 2px solid rgb(214, 130, 130);
/* border-radius: 30px; */
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
th {
background-color: rgb(175, 173, 173);
}
#empList#alter tr:nth-child(even) {
background-color: rgb(230, 89, 89);
}
#empList#alter tr:nth-child(odd) {
background-color: rgb(197, 38, 38);
}
#empList#alter th { color:
white; background-color:
gray;
}
#record { display:
flex;
justify-content: center;
}
Crud.js
let selectRow = null; function
onFormSubmit() {
let formData = readFormData();
if (selectRow == null) insertNewRecord(formData);else
updateRecord(formData);
resetForm();
}
// Getting value from
User-----------------------------------------------------
function readFormData() {var
formData = {};
formData["name"] = document.getElementById("name").value; formData["city"] =
document.getElementById("city").value; formData["salary"] =
document.getElementById("salary").value;
// console.log(formData);
return formData;
}
// Inserting & Showing Record in Another
Table-----------------------------------------------
function insertNewRecord(data) {let
table = document
.getElementById("empList")
.getElementsByTagName("tbody")[0];
let newRow = table.insertRow(table.length);cell1 =
newRow.insertCell(0); cell1.innerHTML =
data.name;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.city; cell3 =
newRow.insertCell(2);
cell3.innerHTML = data.salary;cell4
= newRow.insertCell(3);
cell4.innerHTML = `<a onclick="onEdit(this)">Edit</a>`;cell5 =
newRow.insertCell(4);
cell5.innerHTML = `<a onclick="onDelete(this)">Delete</a>`;
}
// Reseting
Form-----------------------------------------------------------------------
function resetForm() {
document.getElementById("name").value = "";
document.getElementById("city").value = "";
document.getElementById("salary").value = "";
selectRow = null;
}
// Editing Record
-
function onEdit(td) {
selectRow = td.parentElement.parentElement; document.getElementById("name").value =
selectRow.cells[0].innerHTML; document.getElementById("city").value =
selectRow.cells[1].innerHTML; document.getElementById("salary").value =
selectRow.cells[2].innerHTML;
}
// Update
Record---------------------------------------------------------------------
function updateRecord(formData) { selectRow.cells[0].innerHTML =
formData.name; selectRow.cells[1].innerHTML = formData.city;
selectRow.cells[2].innerHTML = formData.salary;
}
// Dleteing
Record---------------------------------------------------------------------
function onDelete(td) {
if (confirm("Are you want to delete this record ?")) {row =
td.parentElement.parentElement;
document.getElementById("empList").deleteRow(row.rowIndex);resetForm();
}
}
Output:
Result:
Thus the creation of personal information system has been created and validated successfully.
