Scribd
Upload
21 views32 pages

WT Lab Final Print

Uploaded by

Global Scientific Research Services
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
21 views32 pages

WT Lab Final Print

Uploaded by

Global Scientific Research Services
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/ 32

BACHELOR OF COMPUTER

APPLICATIONS

“WEB TECHNOLOGY LAB”

REG.NO:

SEMESTER-V

NOV–2024
DEPARTMENT OF COMPUTER APPLICATIONS
SRINIVASAN COLLEGE OF ARTS & SCIENCE
(AFFILIATED TO BHARATHIDASAN
UNIVERSITY, TIRUCHIRAPPALLI)
PERAMBALUR - 621212
DEPARTMENT OF COMPUTER

APPLICATIONS

SRINIVASAN COLLEGE OF ARTS & SCIENCE


PERAMBALUR-621 212
CERTIFICATE
This is to certify that the bonafied record of the work done in the
Computer laboratory during the academic year 2023-2024.

SUBMITTED BY
NAME :
REG.NO :
CLASS :
TITLE :

SEMESTER :

For The Practical Examination Held on_____________

STAFF IN-CHARGE HEAD OF THE DEPARTMENT

EXAMINERS:

1. 2.
CONTENTS
EX. PAGE REMARKS/
DATE LIST OF PROGRAMS NO. SIGNATURE
NO

1 Design for online book store web site

The Registration page validate to JavaScript


2

3 Inline, internal and external style sheet using CSS

4 Conversion of Numbers to Words using JavaScript

5 Online library using servlets and cookies

6 First character of a string is uppercase or not using java script

7 The Fibonacci series for n series using VB-Script

8 Display Date & Time using VB-Script

9 Convert the string to lowercase using VB-Script

10 Students' information, store and display for XML document


1. Design for online book store web site

Program:
1. Home Page (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Book Store</title>
</head>
<frameset rows="100,*">
<frame Src="header.html" name="headerFrame">
<frameset cols="200,*">
<frame src="navigation.html" name="navFrame">
<frame src="content.html" name="contentFrame">
</frameset>
</frameset>
</html>

2. Header Page (header.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Header</title>
</head>
<body>
<h1>Welcome to the Online Book Store</h1>
</body>
</html>

3. Navigation Page (navigation.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation</title>
</head>
<body>
<h2>Navigation</h2>
<ul>
<li><a href="login.html" target="contentFrame">Login</a></li>
<li><a href="catalogue.html" target="contentFrame">Catalogue</a></li>
<li><a href="registration.html" target="contentFrame">Registration</a></li>
</ul>
</body>
</html>
4. Content Page (content.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
</head>
<body>
<h2>Please select an option from the navigation menu.</h2>
</body>
</html>

5. Login Page (login.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

6. Catalogue Page (catalogue.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Catalogue</title>
</head>
<body>
<h2>Available Books</h2>
<table border="1">
<tr>
<th>Title</th>
<th>Author</th>
<th>Price</th>
<th>Genre</th>
</tr>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>$10.99</td>
<td>Fiction</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>$8.99</td>
<td>Dystopian</td>
</tr>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>$12.99</td>
<td>Classic</td>
</tr>
<!-- Add more books as needed -->
</table>
</body>
</html>

7. Registration Page (registration.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration</title>
</head>
<body>
<h2>Registration</h2>
<form>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
OUTPUT:
Home Page: Displays a welcome message and provides links to login, catalogue, and registration.

Login Page: Contains a form for user login.


Catalogue Page: Shows a table with details of available books.

Registration Page: Contains a form for user registration.


2. The Registration page validate to JavaScript

Program:
HTML and JavaScript Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form Validation</title>
<script>
function validateForm() {
// Get values from input fields
const firstName = document.getElementById("firstName").value.trim();
const lastName = document.getElementById("lastName").value.trim();
const password = document.getElementById("password").value.trim();
const email = document.getElementById("email").value.trim();
const mobile = document.getElementById("mobile").value.trim();
const address = document.getElementById("address").value.trim();
let errors = [];

// Validate First Name


if (!/^[A-Za-z]{6,}$/.test(firstName)) {
errors.push("First Name must be at least 6 characters long and contain only alphabets.");
}

// Validate Last Name


if (lastName === "") {
errors.push("Last Name cannot be empty."); }

// Validate Password
if (password.length < 6) {
errors.push("Password must be at least 6 characters long."); }

// Validate Email
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
errors.push("Invalid email format. It should be like [email protected]."); }

// Validate Mobile Number


if (!/^\d{10}$/.test(mobile)) {
errors.push("Mobile Number must contain exactly 10 digits."); }

// Validate Address
if (address === "") {
errors.push("Address cannot be empty."); }

// Display errors or success message


const errorList = document.getElementById("errorList");
errorList.innerHTML = "";
if (errors.length > 0) {
errors.forEach(error => {
const li = document.createElement("li");
li.textContent = error;
errorList.appendChild(li); });
return false; // Prevent form submission
} else {
alert("Registration successful!");
return true; // Allow form submission
}
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<form onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" required><br><br>

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" required><br><br>

<label for="email">E-mail:</label>
<input type="email" id="email" required><br><br>

<label for="mobile">Mobile Number:</label>


<input type="text" id="mobile" required><br><br>

<label for="address">Address:</label>
<textarea id="address" required></textarea><br><br>

<input type="submit" value="Register">


</form>

<ul id="errorList" style="color: red;"></ul>


</body>
</html>
Output:
When the user submits the form with valid inputs: - An alert will display:

Registration successful!
If the user provides invalid input, for example:
- Entering "John" as the first name or a password like "12345", an error list will show:

- First Name must be at least 6 characters long and contain only alphabets.
- Password must be at least 6 characters long.
3. Inline, internal and external style sheet using CSS

Program:
1. HTML File (index.html)

<!DOCTYPE html>7
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=de77vice-width, initial-scale=1.0">
<title>CSS Styles Demonstration</title>
<link rel="stylesheet" href="styles.css"> <!-- External CSS Link -->
<style>
/* Internal CSS */
h1 {
color: blue;
}
p{
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is an Example of CSS Styles</h1>
<p style="color: green;">This paragraph uses inline CSS to make the text green.</p> <!-- Inline
CSS -->
<p>This paragraph uses internal CSS for styling.</p>
<p>This is another paragraph that will be styled using external CSS.</p>
</body>
</html>

2. External CSS File (styles.css)

/* External CSS */
p{
color: purple; /* This will override internal styles for paragraphs */
}
Output:
When you open index.html in a web browser, the output will appear as follows:
- The first heading (h1) will be blue (styled by internal CSS).
- The first paragraph will be green (styled by inline CSS).
- The second paragraph will be black (styled by internal CSS).
- The last paragraph will be purple (styled by external CSS, overriding the internal styles).
4. Conversion of Numbers to Words using JavaScript
HTML and JavaScript Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number to Words Converter</title>
<script>
function convertToWords(num) {
const belowTwenty = [
"", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine",
"Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen",
"Seventeen", "Eighteen", "Nineteen"];
const tens = [
"", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety" ];

if (num < 20) return belowTwenty[num];


if (num < 100) return tens[Math.floor(num / 10)] + (num % 10 !== 0 ? " " +
belowTwenty[num % 10] : "");
if (num < 1000) return belowTwenty[Math.floor(num / 100)] + " Hundred" + (num % 100
!== 0 ? " and " + convertToWords(num % 100) : "");
return ""; }

function validateAndConvert() {
const input = document.getElementById("numberInput").value;
const output = document.getElementById("output");

// Validate input
if (!/^\d{1,3}$/.test(input)) {
output.innerHTML = "Please enter a valid number between 0 and 999.";
return; }

const num = parseInt(input);


if (num < 0 || num > 999) {
output.innerHTML = "Please enter a number in the range of 0 to 999.";
return; }

// Convert to words
const words = convertToWords(num);
output.innerHTML = words ? words : "Zero"; }
</script>
</head>
<body>
<h1>Number to Words Converter</h1>
<label for="numberInput">Enter a number (0 - 999): </label>
<input type="text" id="numberInput">
<button onclick="validateAndConvert()">Convert</button>
<p id="output"></p>
</body>
</html>
OUTPUT:

1. When the user enters 123, the output will be:


One Hundred and Twenty Three
2. For an invalid input like 1000, the message will be:
Please enter a number in the range of 0 to 999.

3. For non-numeric input like abc, the message will be:

Please enter a valid number between 0 and 999.


5. Online library using servlets and cookies

1. index.html
<!DOCTYPE html>
<html>
<head>
<title>Online Library</title>
</head>
<body>
<h1>Welcome to the Online Library</h1>
<form action="LoginServlet" method="post">
Username: <input type="text" name="username"><br>
<input type="submit" value="Login">
</form>
</body>
</html>

2. HomeServlet.java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/HomeServlet")
public class HomeServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
Cookie[] cookies = request.getCookies();
String username = null;
if (cookies != null) {
for (Cookie cookie : cookies) {
if (cookie.getName().equals("username")) {
username = cookie.getValue();
}
}
}
response.setContentType("text/html");
response.getWriter().println("<h1>Welcome " + (username != null ? username : "Guest") +
"</h1>");
}
}
3. LoginServlet.java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
String username = request.getParameter("username");

// Set a cookie for the username


Cookie userCookie = new Cookie("username", username);
userCookie.setMaxAge(60*60); // Cookie expires in 1 hour
response.addCookie(userCookie);

// Redirect to HomeServlet
response.sendRedirect("HomeServlet");
}
}
Output:

1. *When the user accesses index.html:*


- A login form will be displayed.

2. *After logging in:*


- If the user inputs "John":

Welcome John

3. *If cookies exist:*


- Personalized welcome message based on the cookie data.
6. First character of a string is uppercase or not using java script

JavaScript Program:
let inputString = prompt("Enter a string:");

if (inputString.length > 0) { // Ensure the string is not empty


let firstChar = inputString.charAt(0);

if (firstChar === firstChar.toUpperCase()) {


alert("The first character is uppercase.");
} else {
alert("The first character is not uppercase.");
}
} else {
alert("Please enter a valid string.");
}
Output:

If the user inputs Hello, the alert will display:

The first character is uppercase.

If the user inputs hello, the alert will display:

The first character is not uppercase.


7. Fibonacci series up to n numbers using VBScript

Save : Fibonacci.vbs

Function Fibonacci(n)
Dim fibSeries
Dim i

' Initialize the array to hold Fibonacci numbers


ReDim fibSeries(n - 1) ' Correct the ReDim syntax

' First two Fibonacci numbers


If n > 0 Then fibSeries(0) = 0
If n > 1 Then fibSeries(1) = 1

' Generate Fibonacci series


For i = 2 To n - 1
fibSeries(i) = fibSeries(i - 1) + fibSeries(i - 2)
Next

' Return the series as a string


Fibonacci = Join(fibSeries, ", ")
End Function

' Get the number of terms from the user


Dim numTerms
numTerms = InputBox("Enter the number of Fibonacci terms you want:")

' Call the function and display the result


MsgBox "Fibonacci series up to " & numTerms & " terms: " & Fibonacci(CInt(numTerms))
Output:

1.Opent the Terminal and change the file path(Where Your vbs File is Saved)
2.Enter The Comment (PS E:\ar>cscript Fibonacci.vbs) Replace your FileName.vbs
8. Display Date & Time using VB-Script

Save : DisplayDateTime
Program:
' Function to display the current date and time
Function DisplayDateTime()
Dim currentDate, currentTime, formattedDateTime
currentDate = Date() ' Get the current date
currentTime = Time() ' Get the current time

' Format the date and time in a user-friendly way


formattedDateTime = "Current Date: " & FormatDateTime(currentDate, vbLongDate) & vbCrLf
formattedDateTime = formattedDateTime & "Current Time: " & FormatDateTime(currentTime,
vbLongTime) & vbCrLf

DisplayDateTime = formattedDateTime
End Function

' Function to add or subtract days from the current date


Function AddDaysToDate(daysToAdd)
Dim modifiedDate
modifiedDate = DateAdd("d", daysToAdd, Date()) ' Add days to the current date
AddDaysToDate = "Date after adding " & daysToAdd & " days: " &
FormatDateTime(modifiedDate, vbLongDate)
End Function

' Function to add or subtract hours from the current time


Function AddHoursToTime(hoursToAdd)
Dim modifiedTime
modifiedTime = DateAdd("h", hoursToAdd, Time()) ' Add hours to the current time
AddHoursToTime = "Time after adding " & hoursToAdd & " hours: " &
FormatDateTime(modifiedTime, vbLongTime)
End Function

' Main Program Flow


Dim userChoice, daysInput, hoursInput

' Display current date and time


MsgBox DisplayDateTime(), vbInformation, "Current Date and Time"

' Ask the user if they want to add days to the current date
userChoice = MsgBox("Do you want to add or subtract days to the current date?", vbYesNo +
vbQuestion, "Add Days")

If userChoice = vbYes Then


daysInput = InputBox("Enter the number of days to add (negative for subtracting):",
"Add/Subtract Days")

' Check if the input is a valid number


If IsNumeric(daysInput) Then
MsgBox AddDaysToDate(CInt(daysInput)), vbInformation, "Modified Date"
Else
MsgBox "Invalid input. Please enter a numeric value.", vbCritical, "Error"
End If
End If

' Ask the user if they want to add hours to the current time
userChoice = MsgBox("Do you want to add or subtract hours to the current time?", vbYesNo +
vbQuestion, "Add Hours")

If userChoice = vbYes Then


hoursInput = InputBox("Enter the number of hours to add (negative for subtracting):",
"Add/Subtract Hours")

' Check if the input is a valid number


If IsNumeric(hoursInput) Then
MsgBox AddHoursToTime(CInt(hoursInput)), vbInformation, "Modified Time"
Else
MsgBox "Invalid input. Please enter a numeric value.", vbCritical, "Error"
End If
End If

' Thank the user and end the program


MsgBox "Thank you for using the Date and Time Program!", vbInformation, "Goodbye!"
Output:
9. Convert the string to lowercase using VB-Script

Save: ConvertToUpper
Program:
' Function to convert a string to uppercase
Function ConvertToUpper(str)
ConvertToUpper = UCase(str)
End Function

' Function to convert a string to lowercase


Function ConvertToLower(str)
ConvertToLower = LCase(str)
End Function

' Main Program Flow

Dim userInput, upperCaseString, lowerCaseString

' Get input from the user


userInput = InputBox("Enter a string to convert:", "String Conversion")

' Check if user provided input


If Len(userInput) > 0 Then
' Convert the input to uppercase and lowercase
upperCaseString = ConvertToUpper(userInput)
lowerCaseString = ConvertToLower(userInput)

' Display the results


MsgBox "Original String: " &userInput&vbCrLf& _
"Uppercase: " &upperCaseString&vbCrLf& _
"Lowercase: " &lowerCaseString, vbInformation, "String Conversion Results"
Else
MsgBox "No input provided.", vbExclamation, "Error"
End If
OUTPUT:
10. Students' information, store and display for XML document

Program:
XML Document (students.xml)

<?xml version="1.0" encoding="UTF-8"?>


<students>
<student id="1">
<name>John Doe</name>
<age>20</age>
<grade>A</grade>
</student>
<student id="2">
<name>Jane Smith</name>
<age>21</age>
<grade>B</grade>
</student>
<student id="3">
<name>Emily Johnson</name>
<age>19</age>
<grade>A</grade>
</student>
<student id="4">
<name>Michael Brown</name>
<age>22</age>
<grade>C</grade>
</student>
<student id="5">
<name>Linda Davis</name>
<age>20</age>
<grade>B</grade>
</student>
<student id="6">
<name>James Wilson</name>
<age>23</age>
<grade>A</grade>
</student>
<student id="7">
<name>Mary Garcia</name>
<age>21</age>
<grade>B</grade>
</student>
<student id="8">
<name>David Martinez</name>
<age>22</age>
<grade>C</grade>
</student>
<student id="9">
<name>Susan Rodriguez</name>
<age>20</age>
<grade>A</grade>
</student>
<student id="10">
<name>Daniel Hernandez</name>
<age>19</age>
<grade>B</grade>
</student>
</students>

Output:
When you open students.xml in a web browser, you will see a structured display of student
information. The output will look something like this:

<?xml version="1.0" encoding="UTF-8"?>


<students>
<student id="1">
<name>John Doe</name>
<age>20</age>
<grade>A</grade>
</student>
...
</students>
// Redirect to HomeServlet
response.sendRedirect("HomeServlet");
}
}

Output:
1. *When the user accesses index.html:*
- A login form will be displayed.

2. *After logging in:*


- If the user inputs "John":

Welcome John

3. *If cookies exist:*


- Personalized welcome message based on the cookie data.

// Redirect to HomeServlet
response.sendRedirect("HomeServlet");
}
}

Output:
1. *When the user accesses index.html:*
- A login form will be displayed.

2. *After logging in:*


- If the user inputs "John":

Welcome John

3. *If cookies exist:*


- Personalized welcome message based on the cookie data.

You might also like