Web Record
Web Record
21131A05R3
CSE4
<body >
<div class="Form">
<form name="registration" justify-
content="center"display="flex"action="reg.html"align="center">
<h3><u>Registration Page</u></h3>
<label
for="Username">Username     &#
160;    </label>
<input type="text"id="username" ><br><br>
<label
for="PhoneNumber">PhoneNumber    </l
abel>
<input type="text"id="phone" ><br><br>
<label
for="Email">Email      
60;        
0; </label>
<input type="text"id="email" ><br><br>
<label for="DateofBirth">Date of
Birth      </label>
<input type="date"id="dob"><br><br>
<label
for="Gender"      >Gender</
label>
<select name="gender"id="gender">
<option value="male">MALE</option>
<option value="female">FEMALE</option>
<option value="other">OTHER</option>
</select><br><br>
<label
for="Address">Address      
         
 </label>
<input type="text"id="address"><br><br>
<label
for="pwd">Password      &
#160;      </label>
<input type="password"id="pwd" ><br><br>
<label for="retype">ConfirmPassword</label>
<input type="password"id="confpwd" ><br><br>
<center>
<button type="submit"
align="center">Register</button><br>
</center>
</form>
</div>
</body>
</html>
Login.html:
<html>
<head>
<style>
button{
background-color: cadetblue;
border: 0vmax;
border-color: black;
border-radius: 0cqh;
display: ruby-base-container;
size: 0pt;
font-size: x-large;
cursor: pointer;
}
body{
background-image: url("bgimg.avif");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
form{
margin: auto;
background-image: -moz-linear-gradient();
}
.log{
width: 300px;
margin: 100px auto; /* Adjust the values based on your design
*/
background-color: #914a87;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-image: url("bgimg.avif");
backdrop-filter: blur(10px);
}
</style>
</head>
<center>
<body>
<div class="log">
<form name="Login Page" action="submit.html">
<h3><u>Login Page</u></h3>
<label for="Username">Username</label>
<br><input type="text"id="uname"name="username"
placeholder="enter username"required><br><br>
<label for="Password">Password</label>
<br><input type="password"id="pwd"name="password"
placeholder="enter password"required><br><br>
<button type="submit"> Login</button><br><br>
<a href="/forgot.html">ForgotPassword?</a><br>
<small>New User?</small>
<a href="registration.html">Register Here</a>
</form>
</div>
</body>
</center>
</html>
Contactus.html:
<html>
<head>
<title>Contact us</title>
<style>
p,pre{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida
Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: small;
color: purple;
}
.About{
column-count: 4;
column-gap: 40px;
column-rule-color: black;
}
body{
background-image: url("bgimg.avif");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h3>About Us</h3>
<div class="About">
<p>
The Engineering education by the <i>GVP</i> Society was
first initiated by
establishing an Engineering College in the year 1 996 with the
divine
blessings of Sadguru Sri K. Sivananda Murthy garu, Prof. P.S.
Rao, former
Professor & Dean of Industrial Consultancy and Sponsored
Research, lIT Madras,
- a renowned Structural Engineering consultant in the country
— was the founder
Principal and it is initially started with four different branches
in B.Tech
program with an initial intake of 200. Now the college is
functioning with 7 different
branches in B.Tech and 12 PG (11 M.Tech + MCA) programs
with a total intake 1218 students.
</p>
</div>
<section>
<pre>
For any further queries feel free to <b>Reach us</b>
<i>Phone:</i><var><u
color="blue">9381239320</u></var><br>
<i>EmailId: </i><var>[email protected]</var>
</pre>
</section>
</body>
</html>
Output:
WEEK 4
Week 4: Perform the client-side data validations using javascript for
Scenario 3 and 4 in Week 1 & 2
Scenario 1: In login form, define username and password constraints
and ensure that the credentials follow them.
Scenario 2: In registration form, username must be of atleast 6
characters. Password must be of atleast 8 characters and follow
password constraints. Password and confirm password fields must
match with each other. E-mail id must be of the form
“[email protected]”. Mobile number must be of 10 digits only
and starting digit must be any number from 6-9 etc…
Program:
Registration.html
<html>
<style>
body{
background-image: url("bgimg.avif");
background-repeat: no-repeat;
background-size: cover;
}
form {
/* display: flex;
flex-direction: column;
max-width: 300px; /* Adjust as needed */
/* margin: auto;
color: rgb(109, 8, 8); */
/* background-color:rgb(16, 126, 159); */
display: grid;
grid-template-columns: 1fr;
max-width: 300px; /* Adjust as needed */
margin: auto;
}
button{
background-color: rgb(9, 84, 87);
color: coral;
font-size: x-large;
size: 0cqb;
cursor: pointer;
}
label{
color: rgb(32, 2, 2);
align-items: baseline;
}
input{
color: rgb(115, 27, 152);
}
.Form{
align-items: center;
width: 300px;
margin: 100px auto; /* Adjust the values based on your design
*/
background-color: #914a87;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-image: url("bgimg.avif");
backdrop-filter: blur(10px);
}
</style>
<script>
function vauname(){
var ip=document.getElementById("username").value;
var reg=/^[a-zA-B]/;
if(reg.test(ip)){}
else{
alert('error enter a valid username');
}
}
function valpwd(){
var pwd=document.getElementById("pwd").value;
var pwdval=/^(?=.*[a-z])(?=.*[A-
Z])(?=.*\d)(?=.*[@.#$!%*?&^])[A-Za-z\d@.#$!%*?&]{8,15}$/;
if(pwdval.test(pwd)){}
else{
alert("password must contain a special character and a digit
and atleast 8 characters");
}
}
function valre(){
var pwd=document.getElementById("pwd").value;
var re=document.getElementById("confpwd").value;
if(pwd!=re){
alert("Enter the password you have previously entered!");
}
}
function valphn(){
var phn=document.getElementById("phone").value;
var reg=/^[6-9]\d{9}$/
if(reg.test(phn)){}
else{
alert("Enter valid phone Number");
}
}
function valemail(){
var emil=document.getElementById("email").value;
var reg= /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected]/
if(!reg.test(emil)){
alert("valid email address");
}
}
</script>
<body >
<div class="Form">
<form name="registration" justify-
content="center"display="flex"action="reg.html"align="center">
<h3><u>Registration Page</u></h3>
<label
for="Username">Username     &#
160;    </label>
<input
type="text"id="username"onfocusout="vauname()"><br><br>
<label
for="PhoneNumber">PhoneNumber    </l
abel>
<input
type="text"id="phone"onfocusout="valphn()"><br><br>
<label
for="Email">Email      
60;        
0; </label>
<input
type="text"id="email"onfocusout="valemail()"><br><br>
<label for="DateofBirth">Date of
Birth      </label>
<input type="date"id="dob"><br><br>
<label
for="Gender"      >Gender</
label>
<select name="gender"id="gender">
<option value="male">MALE</option>
<option value="female">FEMALE</option>
<option value="other">OTHER</option>
</select><br><br>
<label
for="Address">Address      
         
 </label>
<input type="text"id="address"><br><br>
<label
for="pwd">Password      &
#160;      </label>
<input
type="password"id="pwd"onfocusout="valpwd()"><br><br>
<label for="retype">ConfirmPassword</label>
<input
type="password"id="confpwd"onfocusout="valre()"><br><br>
<center>
<button type="submit"
align="center">Register</button><br>
</center>
</form>
</div>
</body>
</html>
Login.htm:
<html>
<head>
<style>
button{
background-color: cadetblue;
border: 0vmax;
border-color: black;
border-radius: 0cqh;
display: ruby-base-container;
size: 0pt;
font-size: x-large;
cursor: pointer;
}
body{
background-image: url("bgimg.avif");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
form{
margin: auto;
background-image: -moz-linear-gradient();
}
.log{
width: 300px;
margin: 100px auto; /* Adjust the values based on your design
*/
background-color: #914a87;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-image: url("bgimg.avif");
backdrop-filter: blur(10px);
}
</style>
<script>
function validate(){
var ip=document.getElementById("uname").value;
var reg=/^[a-zA-B]/;
if(reg.test(ip)){
}
else{
alert('error enter a valid username');
}
}
function val(){
var pwd=document.getElementById("pwd").value;
var pwdval=/^(?=.*[a-z])(?=.*[A-
Z])(?=.*\d)(?=.*[@.#$!%*?&^])[A-Za-z\d@.#$!%*?&]{8,15}$/;
if(pwdval.test(pwd)){
}
else{
alert("password must contain a special character and a
digit");
}
}
</script>
</head>
<center>
<body>
<div class="log">
<form name="Login Page" action="submit.html">
<h3><u>Login Page</u></h3>
<label for="Username">Username</label>
<br><input
type="text"id="uname"name="username"onfocusout="validate()"plac
eholder="enter username"required><br><br>
<label for="Password">Password</label>
<br><input
type="password"id="pwd"name="password"onfocusout="val()"place
holder="enter password"required><br><br>
<button
type="submit"onclick="validate()">Login</button><br><br>
<a href="/forgot.html">ForgotPassword?</a><br>
<small>New User?</small>
<a href="registration.html">Register Here</a>
</form>
</div>
</body>
</center>
</html>
Output:
WEEK5
Create XML documents for chosen applications and validate using
DTD and schema. Also render the content of XML document using
XSL.
Scenario 1: XML document must have attributes and elements so that
they can be validated against DTD/Schema.
Scenario 2: Check the data types of variables declared in XML
document using Schema.
Scenario 3: Display the details of data contained in XML document in
a table using XSL.
Program:
File.xml:
<?xml version="1.0"?>
<!DOCTYPE items SYSTEM "regis.dtd">
<!-- <items xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance"
xsi:noNamespaceSchemaLocation="regis.xsd"> -->
<?xml-stylesheet type="text/xsl" href="regis.xsl"?>
<items>
<item category="Theory">
<item-name> NSC</item-name>
<credits> 3 </credits>
<semester>VI</semester>
</item>
<item category="Theory">
<item-name> Machine learning</item-name>
<credits>3</credits>
<semester>VI</semester>
</item>
<item category="Theory">
<item-name> Compiler Design </item-name>
<credits>3</credits>
<semester>VI</semester>
</item>
<item category="LAB">
<item-name> BDA </item-name>
<credits>3</credits>
<semester>VI</semester>
</item>
<item category="LAB">
<item-name> WEB </item-name>
<credits>1.5</credits>
<semester>VI</semester>
</item>
<item category="LAB">
<item-name> IOT </item-name>
<credits>1.5</credits>
<semester>VI</semester>
</item>
</items>
File.dtd:
<!ELEMENT items (item+)>
<!ELEMENT item (item-name, credits, semester)>
<!ELEMENT item-name (#PCDATA)>
<!ELEMENT credits (#PCDATA)>
<!ELEMENT semester (#PCDATA)>
<!ATTLIST item
category CDATA #REQUIRED>
File.xsd:
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="items">
<xs:complexType>
<xs:sequence>
<xs:element name="item" type="ItemType" minOccurs="1"
maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:complexType name="ItemType">
<xs:sequence>
<xs:element name="item-name" type="xs:string"/>
<xs:element name="credits" type="xs:string"/>
<xs:element name="semester" type="xs:string"/>
</xs:sequence>
<xs:attribute name="category" type="xs:string" use="required"/>
</xs:complexType>
</xs:schema>
File.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<html>
<head>
<style>
/* Add your CSS styles here */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Course Details</h2>
<table>
<tr>
<th>Category</th>
<th>Item Name</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<xsl:for-each select="items/item">
<tr>
<td><xsl:value-of select="@category"/></td>
<td><xsl:value-of select="item-name"/></td>
<td><xsl:value-of select="credits"/></td>
<td><xsl:value-of select="semester"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:
Validation:
WEEK6
Create necessary tables for the application chosen using JDBC,
establish the database connectivity.
Scenario 1: Establish the connectivity using JDBC drivers.
Scenario 2: Use create and select statements. Scenario
3: Use insert, update and delete queries
Program:
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.swing.JOptionPane;
public class CreateDB {
try {
// Database connection parameters
String url = "jdbc:mysql://localhost:3306/data";
String username = "root";
String password = "#importPython3";
// Establishing connection to MySQL server
connection = DriverManager.getConnection(url, username,
password);
statement = connection.createStatement();
// Update query
String updateQuery = "UPDATE table1 SET name = 'Shree
Divya' WHERE roll='R3'";
int rowsAffected = statement.executeUpdate(updateQuery);
JOptionPane.showMessageDialog(null, "Records updated: " +
rowsAffected);
// Delete query
String deleteQuery = "DELETE FROM table1 WHERE
name='Shree Divya'";
rowsAffected = statement.executeUpdate(deleteQuery);
JOptionPane.showMessageDialog(null, "Records deleted: " +
rowsAffected);
//select query
String selectQuery = "SELECT * FROM table1 WHERE
roll='Q6'";
rs = statement.executeQuery(selectQuery);
JOptionPane.showMessageDialog(null, "Records selected " );
while (rs.next()) {
// Access data from the result set
String col1 = rs.getString("name");
String col2 = rs.getString("roll");
// Process data as needed
System.out.println("roll no.: " + col1 + ", Name: " + col2);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
// Closing resources
try {
if (statement != null) {
statement.close();
}
if (connection != null) {
connection.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
Output:
roll no.: Pranathi, Name: Q6