Scribd
Upload
12 views

Web Lab Manual

Lab 2

Uploaded by

KMC PRANAV
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Web Lab Manual

Lab 2

Uploaded by

KMC PRANAV
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

Web Technology Laboratory BCSL504

Table of Contents

Sl. No. Program Page No.


1. Develop the HTML page named as “Myfirstwebpage.html”. Add the 4
following tags with relevant content.
1. Set the title of the page as “My First Web Page”
2. Within the body use the following tags:
a) Moving text = “Basic HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style (, , , etc.)
2. Develop the HTML page named as “Table.html” to display your class 6
time table.
a) Provide the title as Time Table with table header and table
footer, row-span and col-span etc.
b) Provide various colour options to the cells (Highlight the lab
hours and elective hours with different colours.)
c) Provide colour options for rows.
3. Develop an external style sheet named as “style.css” and provide 9
different styles for h2, h3, hr, p, div, span, time, img & a tags. Apply
different CSS selectors for tags and demonstrate the significance of
each.
4. Develop HTML page named as “registration.html” having variety of 13
HTML input elements with background colors, table for alignment &
provide font colors & size using CSS styles.
5. Develop HTML page named as “newpaper.html” having variety of 17
HTML semantic elements with background colors, text-colors & size
for figure, table, aside, section, article, header, footer… etc.
6. Apply HTML, CSS and JavaScript to design a simple calculator to 22
perform the following operations: sum, product, difference, remainder,
quotient, power, square-root and square.
7. Develop JavaScript program (with HTML/CSS) for: a) Converting 27
JSON text to JavaScript Object b) Convert JSON results into a date c)
Converting From JSON To CSV and CSV to JSON d) Create hash
from string using crypto.createHash() method
8. a. Develop a PHP program (with HTML/CSS) to keep track of the 32
number of visitors visiting the web page and to display this count
of visitors, with relevant headings.
b. Develop a PHP program (with HTML/CSS) to sort the student
records which are stored in the database using selection sort.
9. Develop jQuery script (with HTML/CSS) for: 37
a. Appends the content at the end of the existing paragraph and list.
b. Change the state of the element with CSS style using animate()
method
c. Change the color of any div that is animated.

Dept. of CSE,ISE,SDIT,Mangalore Page | 2


Web Technology Laboratory BCSL504

10. Develop a JavaScript program with Ajax (with HTML/CSS) for: 40


a. Use ajax() method (without Jquery) to add the text content from
the text file by sending ajax request.
b. Use ajax() method (with Jquery) to add the text content from the
text file by sending ajax request.
c. Illustrate the use of getJSON() method in jQuery
d. Illustrate the use of parseJSON() method to display JSON
values.

Dept. of CSE,ISE,SDIT,Mangalore Page | 3


Web Technology Laboratory BCSL504

1. Develop the HTML page named as “Myfirstwebpage.html”. Add the following


tags with relevant content.
1. Set the title of the page as “My First Web Page”
2. Within the body use the following tags:
a) Moving text = “Basic HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style (, , , etc.)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<marquee>Basic HTML Tags</marquee>

<p>This is a paragraph. It demonstrates the use of the paragraph tag in


HTML. Paragraphs are used to group related content together.</p>
<hr>
<p>This is another paragraph.<br>This text appears on a new line due to the
line break tag.</p>
<blockquote>
This is a block quote. It's often used to highlight quoted text from another
source.
</blockquote>
<pre>
This is preformatted text.
It preserves both spaces and
line breaks, making it useful
for displaying code or ASCII art.
</pre>

Dept. of CSE,ISE,SDIT,Mangalore Page | 4


Web Technology Laboratory BCSL504

<p>
Here are examples of logical styles:<br>
<b>Bold text</b><br>
<i>Italic text</i><br>
<u>Underlined text</u><br>
<strong>Strong text</strong><br>
<em>Emphasized text</em><br>
Text with <sub>subscript</sub> and <sup>superscript</sup>
</p>
</body>
</html>

OUTPUT:

Dept. of CSE,ISE,SDIT,Mangalore Page | 5


Web Technology Laboratory BCSL504

2. Develop the HTML page named as “Table.html” to display your class time
table.
a) Provide the title as Time Table with table header and table footer, row-span
and col-span etc.
b) Provide various colour options to the cells (Highlight the lab hours and
elective hours with different colours.)
c) Provide colour options for rows.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
</head>
<body>
<h1 style="text-align: center;">Time Table</h1>

<table border="1" style="width: 80%; margin: auto;" cellpadding="10">


<thead>
<tr>
<th colspan="7" style="text-align: center;">Class Time Table</th>
</tr>
<tr style="background-color: lightgray;">
<th>Day/Time</th>
<th>9:00 AM - 10:00 AM</th>
<th>10:00 AM - 11:00 AM</th>
<th>11:00 AM - 12:00 PM</th>
<th>12:00 PM - 1:00 PM</th>
<th>Lunch Break</th>
<th>2:00 PM - 3:00 PM</th>
</tr>
</thead>

<tbody>
<tr>
<td style="background-color: lightblue;">Monday</td>
<td>Math</td>
<td>Physics</td>
<td style="background-color: lightcoral;" colspan="2">Lab</td>
<td rowspan="5" style="background-color: lightyellow;">Lunch Break</td>
<td>English</td>
</tr>
<tr>

Dept. of CSE,ISE,SDIT,Mangalore Page | 6


Web Technology Laboratory BCSL504

<td style="background-color: lightblue;">Tuesday</td>


<td style="background-color: lightgreen;">Elective</td>
<td>Chemistry</td>
<td>Biology</td>
<td>Math</td>
<td style="background-color: lightcoral;">Lab</td>
</tr>
<tr>
<td style="background-color: lightblue;">Wednesday</td>
<td>Physics</td>
<td>Math</td>
<td>English</td>
<td>Chemistry</td>
<td>History</td>
</tr>
<tr>
<td style="background-color: lightblue;">Thursday</td>
<td>Biology</td>
<td>Math</td>
<td style="background-color: lightgreen;" colspan="2">Elective</td>
<td>Physics</td>
</tr>
<tr>
<td style="background-color: lightblue;">Friday</td>
<td>History</td>
<td>Chemistry</td>
<td>English</td>
<td>Biology</td>
<td style="background-color: lightcoral;">Lab</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" style="text-align: center;">End of Week</td>
</tr>
</tfoot>
</table>
</body>
</html>

Dept. of CSE,ISE,SDIT,Mangalore Page | 7


Web Technology Laboratory BCSL504

OUTPUT:

Dept. of CSE,ISE,SDIT,Mangalore Page | 8


Web Technology Laboratory BCSL504

3. Develop an external style sheet named as “style.css” and provide different styles
for h2, h3, hr, p, div, span, time, img & a tags. Apply different CSS selectors for
tags and demonstrate the significance of each.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling sheet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="main-content">
<h2>Welcome to Our Styled Page</h2>

<p>This is a paragraph right after an h2. It demonstrates the adjacent


sibling selector.</p>
<h3>Hover over me!</h3>
<hr>
<p lang="en">This paragraph has a lang attribute, demonstrating the
attribute selector.</p>
<section>
<p>Here's a <span class="highlight">highlighted</span> word using the
class selector.</p>
<p>This paragraph is inside a section, showing the descendant
selector.</p>
<span>This span is a direct child of the section.</span>
</section>

<p>The current date and time: <time datetime="2023-08-31">August 31,


2023</time></p>
<p>Notice how the first letter of each paragraph is styled differently.</p>
<article class="special">
<p>This paragraph is inside an article with class="special".</p>
</article>
<img src="https://motionbgs.com/media/216/zoro-purgatory-onigiri.jpg" alt="A placeholder
image">
<p>Check out this <a href="https://searchcreators.org/">link</a> to see
different link states.</p>
</main>
</body>
</html>

style.css file
/* Element Selector */

Dept. of CSE,ISE,SDIT,Mangalore Page | 9


Web Technology Laboratory BCSL504

h2 {
color: #2c3e50;
font-family: 'Arial', sans-serif;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
/* Element Selector with Pseudo-class */
h3:hover {
color: #e74c3c;
cursor: pointer;

transition: color 0.3s ease;


}
/* Element Selector */
hr {
border: 0;
height: 1px;
width: 800px;
border: dashed;
}
/* Element Selector with Attribute */
p[lang] {
font-style: italic;
}
/* Class Selector */
.highlight {
background-color: #f1c40f;
padding: 5px;
}

/* ID Selector */
#main-content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #c5f4cf;
}
/* Descendant Selector */
div p {
line-height: 1.6;
margin-bottom: 15px;
}
/* Child Selector */
div > span {
font-weight: bold;

Dept. of CSE,ISE,SDIT,Mangalore Page | 10


Web Technology Laboratory BCSL504

color: #16a085;
}

/* Adjacent Sibling Selector */


h2 + p {
font-size: 1.1em;
color: #7f8c8d;
}
/* Attribute Selector */
time[datetime] {
color: #8e44ad;
font-weight: bold;
}
/* Pseudo-element Selector */
p::first-letter {
font-size: 1.5em;
font-weight: bold;
color: #c0392b;

}
/* Multiple Selectors */
img, a {
border: 1px solid #bdc3c7;
padding: 5px;
width:400px;
}
/* Pseudo-class Selector for Links */
a:link, a:visited {
color: #dd10f4;
text-decoration: none;
}
a:hover, a:active {
color: #e74c3c;
text-decoration: underline;
}
/* Attribute Selector for Images */
img[alt] {

max-width: 100%;
height: auto;
}
/* Combining Selectors */
div.special p {
text-indent: 20px;
color: #27ae60; }

Dept. of CSE,ISE,SDIT,Mangalore Page | 11


Web Technology Laboratory BCSL504

OUTPUT:

Dept. of CSE,ISE,SDIT,Mangalore Page | 12


Web Technology Laboratory BCSL504

4. Develop HTML page named as “registration.html” having variety of HTML


input elements with background colors, table for alignment & provide font colors
& size using CSS styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<style>
/* Basic reset for margin and padding */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body styling */
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Form styling */
.registration-form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

h2 {
color: #4CAF50;
font-size: 24px;
margin-bottom: 15px;
}

table {
width: 100%;
}

Dept. of CSE,ISE,SDIT,Mangalore Page | 13


Web Technology Laboratory BCSL504

td {
padding: 8px;
font-size: 16px;
color: #333;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #45a049;
}

/* Styling labels */
label {
font-weight: bold;
}
</style>
</head>
<body>

<div class="registration-form">
<h2>Registration Form</h2>
<form action="#" method="post">
<table>

Dept. of CSE,ISE,SDIT,Mangalore Page | 14


Web Technology Laboratory BCSL504

<tr>
<td><label for="name">Full Name:</label></td>
<td><input type="text" id="name" name="name" required></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob"></td>
</tr>
<tr>
<td><label for="State">State:</label></td>
<td>
<select id="state" name="State">
<option value="Maharashtra">Maharashtra</option>
<option value="Karnataka">Karnataka</option>
<option value="Tamil Nadu">Tamil Nadu</option>
</select>
</td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
<td>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">


<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="other">


<label for="other">Other</label>
</td>
</tr>
<tr>
<td><label for="phone">Phone Number:</label></td>
<td><input type="text" id="phone" name="phone" required></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>

Dept. of CSE,ISE,SDIT,Mangalore Page | 15


Web Technology Laboratory BCSL504

<td><input type="text" id="address" name="address"></td>


</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="Register">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

OUTPUT:

Dept. of CSE,ISE,SDIT,Mangalore Page | 16


Web Technology Laboratory BCSL504

5. Develop HTML page named as “newpaper.html” having variety of HTML


semantic elements with background colors, text-colors & size for figure, table,
aside, section, article, header, footer… etc.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newspaper</title>
<style>
/* General page styling */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f0f0f0;
color: #333;
}

/* Header styling */
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}

/* Footer styling */
footer {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
font-size: 0.9em;
}

/* Section styling */
section {
padding: 2em;
background-color: #fff;
margin: 1em;
}

Dept. of CSE,ISE,SDIT,Mangalore Page | 17


Web Technology Laboratory BCSL504

/* Article styling */
article {
background-color: #e3f2fd;
color: #0056b3;
padding: 1em;
margin-bottom: 1em;
border-radius: 8px;
}

/* Aside styling */
aside {
background-color: #ffeb3b;
color: #333;
padding: 1em;
margin: 1em;
border-radius: 8px;
}

/* Figure styling */
figure {
margin: 1em 0;
text-align: center;
}

figure img {
width: 100%;
max-width: 300px;
border: 2px solid #333;
}

figcaption {
font-size: 0.9em;
color: #555;
}

/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
}

th, td {
padding: 0.5em;

Dept. of CSE,ISE,SDIT,Mangalore Page | 18


Web Technology Laboratory BCSL504

text-align: left;
border: 1px solid #ddd;
}

th {
background-color: #2196f3;
color: #fff;
}
</style>
</head>
<body>

<!-- Header -->


<header>
<h1>Newspaper Layout</h1>
<p>A simple newspaper layout using semantic HTML elements</p>
</header>

<!-- Main Section -->


<section>
<h2>Welcome to the Newspaper Section</h2>
<p>This is the main section of the newspaper layout where articles and news content are
displayed.</p>

<!-- Article -->


<article>
<h3>Breaking News: Technology Advances</h3>
<p>Recent advances in technology have led to groundbreaking developments in various fields,
including AI, robotics, and more.</p>
</article>

<!-- Another Article -->


<article>
<h3>Health Update: Staying Fit</h3>
<p>Experts emphasize the importance of regular exercise and a balanced diet in maintaining a
healthy lifestyle.</p>
</article>

<!-- Figure with Caption -->


<figure>
<img src="C:\Users\Tejas\Pictures\Wallpapers\1276191.png" alt="Sample Image">
<figcaption>Figure 1: Sample Image in Newspaper Layout</figcaption>
</figure>

<!-- Aside -->

Dept. of CSE,ISE,SDIT,Mangalore Page | 19


Web Technology Laboratory BCSL504

<aside>
<h4>Did You Know?</h4>
<p>Many tech companies are investing heavily in AI to stay ahead in the market. AI is expected
to transform industries globally.</p>
</aside>

<!-- Table -->


<table>
<thead>
<tr>
<th>Headline</th>
<th>Category</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tech Trends in 2024</td>
<td>Technology</td>
<td>November 6, 2024</td>
</tr>
<tr>
<td>Maintaining Mental Health</td>
<td>Health</td>
<td>November 5, 2024</td>
</tr>
</tbody>
</table>

</section>

<!-- Footer -->


<footer>
<p>&copy; 2024 Newspaper. All Rights Reserved.</p>
</footer>

</body>
</html>

Dept. of CSE,ISE,SDIT,Mangalore Page | 20


Web Technology Laboratory BCSL504

OUTPUT:

Dept. of CSE,ISE,SDIT,Mangalore Page | 21


Web Technology Laboratory BCSL504

6. Apply HTML, CSS and JavaScript to design a simple calculator to perform the
following operations: sum, product, difference, remainder, quotient, power,
square-root and square.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>

<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
background-color: antiquewhite;
}

.calculator {
width: 400px;
height:630px;
background-color: #fff;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 1);
}

#display {
width: 100%;
height: 100px;
font-size: 40px;
text-align: right;
margin-bottom: 10px;
border: 5px solid #080808;

Dept. of CSE,ISE,SDIT,Mangalore Page | 22


Web Technology Laboratory BCSL504

padding: 5px;
border-radius: 5px;

.buttons {
display: grid;
height:500px;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}

button {
padding: 10px;
font-size: 38px;
background-color: #e0e0e0;
border-radius: 5px;
cursor: pointer;
border: 1px solid black;
}

button:hover {
background-color: #d0d0d0;
}

button:active {
background-color: #c0c0c0;
}

.zero {
grid-column: span 3;
}

</style>

</head>
<body>
<div class="calculator">
<input type="text" id="display" placeholder="0" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendOperator('/')">/</button>
<button onclick="appendOperator('*')">*</button>
<button onclick="deleteLast()">DEL</button>
<button onclick="appendNumber('7')">7</button>

Dept. of CSE,ISE,SDIT,Mangalore Page | 23


Web Technology Laboratory BCSL504

<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="calculate()">=</button>
<button onclick="appendNumber('0')" class="zero">0</button>
<button onclick="appendNumber('.')">.</button>
<button onclick="power()">x<sup>y</sup></button>
<button onclick="squareRoot()">√</button>
<button onclick="square()">x<sup>2</sup></button>
<button onclick="remainder()">%</button>
</div>
</div>
</body>
<script>
const display = document.getElementById('display');

// Clears the display


function clearDisplay() {
display.value = '';
}

// Deletes the last character in the display


function deleteLast() {
display.value = display.value.slice(0, -1);
}

// Appends a number to the display


function appendNumber(number) {
display.value += number;
}

// Appends an operator to the display


function appendOperator(operator) {
const lastChar = display.value.slice(-1);
if (lastChar && !isNaN(lastChar)) {
display.value += operator;
}
}

Dept. of CSE,ISE,SDIT,Mangalore Page | 24


Web Technology Laboratory BCSL504

// Evaluates the entire expression in the display


function calculate() {
try {
display.value = eval(display.value.replace('^', '**'));
} catch (error) {
display.value = 'Error';
}
}

// Raises the current display value to the power of 2 (square)


function square() {
let number = parseFloat(display.value);
display.value = Math.pow(number, 2);
}

// Calculates the square root of the current display value


function squareRoot() {
let number = parseFloat(display.value);
display.value = Math.sqrt(number);
}

// Calculates the remainder (modulus) of the current expression


function remainder() {
try {
display.value = eval(display.value) % parseFloat(display.value);
} catch (error) {
display.value = 'Error';
}
}

// Calculates the power of the current display value to an entered exponent


function power() {
if (display.value && !isNaN(display.value.slice(-1))) {
display.value += '^';
}
}
</script>
</html>

Dept. of CSE,ISE,SDIT,Mangalore Page | 25


Web Technology Laboratory BCSL504

Output:

Dept. of CSE,ISE,SDIT,Mangalore Page | 26


Web Technology Laboratory BCSL504

7. Develop JavaScript program (with HTML/CSS) for: a) Converting JSON text


to JavaScript Object b) Convert JSON results into a date c) Converting From
JSON To CSV and CSV to JSON d) Create hash from string using
crypto.createHash() method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Utility Program</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
textarea, input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;

Dept. of CSE,ISE,SDIT,Mangalore Page | 27


Web Technology Laboratory BCSL504

}
button:hover {
background-color: #45a049;
}
.result {
background: #e7e7e7;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>JSON Utility Program</h1>

<!-- JSON to Object -->


<h2>a) Convert JSON Text to JavaScript Object</h2>
<textarea id="jsonInput" placeholder="Enter JSON text here..."></textarea>
<button onclick="convertJsonToObject()">Convert to Object</button>

<!-- JSON to Date -->


<h2>b) Convert JSON Results into a Date</h2>
<textarea id="jsonDateInput" placeholder='Enter JSON date (e.g., {"date": "2023-05-
15T12:00:00Z"})'></textarea>
<button onclick="convertJsonToDate()">Convert to Date</button>

<!-- JSON <-> CSV -->


<h2>c) JSON to CSV and CSV to JSON</h2>
<textarea id="dataInput" placeholder="Enter JSON or CSV here..."></textarea>
<button onclick="convertJsonToCsv()">JSON to CSV</button>
<button onclick="convertCsvToJson()">CSV to JSON</button>

<!-- Create Hash -->


<h2>d) Create Hash from String</h2>
<input id="hashInput" type="text" placeholder="Enter text to hash...">
<button onclick="createHash()">Generate Hash</button>

<!-- Result Section -->


<div class="result" id="result"></div>
</div>

<script>
// a) Convert JSON Text to JavaScript Object
function convertJsonToObject() {

Dept. of CSE,ISE,SDIT,Mangalore Page | 28


Web Technology Laboratory BCSL504

try {
const jsonInput = document.getElementById('jsonInput').value;
const jsObject = JSON.parse(jsonInput);
document.getElementById('result').innerText = 'JavaScript Object:\n' +
JSON.stringify(jsObject, null, 2);
} catch (error) {
document.getElementById('result').innerText = 'Error: ' + error.message;
}
}

// b) Convert JSON Results into a Date


function convertJsonToDate() {
try {
const jsonDateInput = document.getElementById('jsonDateInput').value;
const parsed = JSON.parse(jsonDateInput);
const date = new Date(parsed.date);
document.getElementById('result').innerText = 'Converted Date: ' + date.toString();
} catch (error) {
document.getElementById('result').innerText = 'Error: ' + error.message;
}
}

// c1) Convert JSON to CSV

function convertJsonToCsv() {
try {
const jsonInput = document.getElementById('dataInput').value;
const jsObject = JSON.parse(jsonInput); // Parse JSON string into a JavaScript object

const headers = Object.keys(jsObject[0]); // Extract keys as headers


const csvRows = [
headers.join(','), // First row contains headers
...jsObject.map(row =>
headers.map(fieldName => JSON.stringify(row[fieldName] || "")).join(',') // Map each row
to CSV
)
];
const csvString = csvRows.join('\n'); // Join all rows with newline
document.getElementById('result').innerText = 'Converted CSV:\n' + csvString;
} catch (error) {
document.getElementById('result').innerText = 'Error: ' + error.message;
}
}

function convertCsvToJson() {

Dept. of CSE,ISE,SDIT,Mangalore Page | 29


Web Technology Laboratory BCSL504

try {
const csvInput = document.getElementById('dataInput').value;
const lines = csvInput.split('\n'); // Split by line
const headers = lines[0].split(','); // First line contains headers

const jsonArray = lines.slice(1).map(line => {


const values = line.split(','); // Split each line by commas
return headers.reduce((obj, header, index) => {
obj[header] = values[index]?.trim() || ""; // Map each value to its header
return obj;
}, {});
});

document.getElementById('result').innerText = 'Converted JSON:\n' +


JSON.stringify(jsonArray, null, 2);
} catch (error) {
document.getElementById('result').innerText = 'Error: ' + error.message;
}
}
// d) Create Hash using crypto.createHash
function createHash() {
try {
const input = document.getElementById('hashInput').value;
const hash = CryptoJS.SHA256(input).toString();
document.getElementById('result').innerText = 'Generated Hash (SHA-256): ' + hash;
} catch (error) {
document.getElementById('result').innerText = 'Error: ' + error.message;
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</body>
</html>

Dept. of CSE,ISE,SDIT,Mangalore Page | 30


Web Technology Laboratory BCSL504

Output:

Dept. of CSE,ISE,SDIT,Mangalore Page | 31


Web Technology Laboratory BCSL504

8.
a. Develop a PHP program (with HTML/CSS) to keep track of the number of
visitors visiting the web page and to display this count of visitors, with
relevant headings.
b. Develop a PHP program (with HTML/CSS) to sort the student records
which are stored in the database using selection sort.

visitor_count.php
<?php
$filename = "counter.txt";
if (!file_exists($filename)) {
file_put_contents($filename, 0);
}
$visitorCount = (int) file_get_contents($filename);
$visitorCount++;
file_put_contents($filename, $visitorCount);
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitor Counter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f5f5f5;
margin-top: 50px;
}
.counter-container {
background: #ffffff;
border: 2px solid #ccc;
padding: 20px;
display: inline-block;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
p{
font-size: 18px;
color: #555;

Dept. of CSE,ISE,SDIT,Mangalore Page | 32


Web Technology Laboratory BCSL504

}
</style>
</head>
<body>
<div class="counter-container">
<h1>Welcome to Our Website!</h1>
<p>You are visitor number: <strong><?php echo $visitorCount; ?></strong></p>
</div>
</body>
</html>

Output:

Dept. of CSE,ISE,SDIT,Mangalore Page | 33


Web Technology Laboratory BCSL504

student_record.php
<?php
// db_config.php
$host = 'localhost';
$dbname = 'student_db';
$username = 'root';
$password = '';

// Establish connection using MySQLi


$conn = new mysqli($host, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Database connection failed: " . $conn->connect_error);
}

// Fetch records from the database


$sql = "SELECT * FROM students";
$result = $conn->query($sql);

// Store records in an array


$students = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$students[] = $row;
}
}

// Selection sort implementation


function selectionSort(&$array, $key) {
$n = count($array);
for ($i = 0; $i < $n - 1; $i++) {
$minIndex = $i;
for ($j = $i + 1; $j < $n; $j++) {
if ($array[$j][$key] < $array[$minIndex][$key]) {
$minIndex = $j;
}
}
if ($minIndex != $i) {
$temp = $array[$i];
$array[$i] = $array[$minIndex];
$array[$minIndex] = $temp;
}
}

Dept. of CSE,ISE,SDIT,Mangalore Page | 34


Web Technology Laboratory BCSL504

// Sort records by marks


selectionSort($students, 'marks');
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorted Student Records</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 20px;
}
table {
width: 60%;
margin: 0 auto;
border-collapse: collapse;
background: #ffffff;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f4b400;
color: white;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Student Records (Sorted by Marks)</h1>
<table>
<thead>
<tr>
<th>ID</th>

Dept. of CSE,ISE,SDIT,Mangalore Page | 35


Web Technology Laboratory BCSL504

<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<?php foreach ($students as $student): ?>
<tr>
<td><?php echo htmlspecialchars($student['id']); ?></td>
<td><?php echo htmlspecialchars($student['name']); ?></td>
<td><?php echo htmlspecialchars($student['marks']); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>

Output:

Dept. of CSE,ISE,SDIT,Mangalore Page | 36


Web Technology Laboratory BCSL504

9. Develop jQuery script (with HTML/CSS) for: a. Appends the content at the
end of the existing paragraph and list. b. Change the state of the element with
CSS style using animate() method c. Change the color of any div that is animated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Task</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #f9f9f9;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
p, ul {
margin: 10px 0;
}
button {
margin: 10px 5px;
padding: 8px 15px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #0056b3;
}
.box {
width: 100px;
height: 100px;

Dept. of CSE,ISE,SDIT,Mangalore Page | 37


Web Technology Laboratory BCSL504

margin: 20px auto;


background-color: #f4b400;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery Demo</h1>
<p>This is an existing paragraph.</p>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<button id="append-btn">Append Content</button>
<button id="animate-btn">Animate Box</button>
<button id="change-color-btn">Change Box Color</button>
<div class="box"></div>
</div>
<script>

$(document).ready(function () {
// a. Append content to paragraph and list
$('#append-btn').click(function () {
$('p').append(' This is appended content.');
$('ul').append('<li>New appended item</li>');
});

// b. Animate the box element


$('#animate-btn').click(function () {
$('.box').animate({
width: '200px',
height: '200px',
left: '50px'
}, 1000, function () {
// Animation complete
alert('Animation complete!');
});
});

// c. Change color of the animated box


$('#change-color-btn').click(function () {
$('.box').css('background-color', '#28a745');
});
});

Dept. of CSE,ISE,SDIT,Mangalore Page | 38


Web Technology Laboratory BCSL504

</script>
</body>
</html>

Output:

Dept. of CSE,ISE,SDIT,Mangalore Page | 39


Web Technology Laboratory BCSL504

10. Develop a JavaScript program with Ajax (with HTML/CSS) for: a. Use ajax()
method (without Jquery) to add the text content from the text file by sending ajax
request. b. Use ajax() method (with Jquery) to add the text content from the text
file by sending ajax request. c. Illustrate the use of getJSON() method in jQuery
d. Illustrate the use of parseJSON() method to display JSON values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX with JavaScript and jQuery</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: #ffffff;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 15px;
margin: 10px 0;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
pre, p {
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>

Dept. of CSE,ISE,SDIT,Mangalore Page | 40


Web Technology Laboratory BCSL504

</head>
<body>
<div class="container">
<h1>AJAX Demo</h1>
<button id="ajax-js">Load Text (JavaScript AJAX)</button>
<p id="content-js"></p>

<button id="ajax-jquery">Load Text (jQuery AJAX)</button>


<p id="content-jquery"></p>

<button id="get-json">Load JSON (getJSON)</button>


<pre id="json-content"></pre>

<button id="parse-json">Parse JSON</button>


<pre id="parsed-json"></pre>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

// a. AJAX request using pure JavaScript


document.getElementById("ajax-js").addEventListener("click", function () {
const xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("content-js").textContent = xhr.responseText;
} else {
document.getElementById("content-js").textContent = "Error loading content.";
}
};
xhr.send();
});

// b. AJAX request using jQuery


$("#ajax-jquery").click(function () {
$.ajax({
url: "data.txt",
method: "GET",
success: function (data) {
$("#content-jquery").text(data);
},
error: function () {
$("#content-jquery").text("Error loading content.");
}
});

Dept. of CSE,ISE,SDIT,Mangalore Page | 41


Web Technology Laboratory BCSL504

});

// c. Using getJSON() method


$("#get-json").click(function () {
$.getJSON("data.json", function (data) {
$("#json-content").text(JSON.stringify(data, null, 2));
});
});

// d. Using parseJSON() method


$("#parse-json").click(function () {
const jsonString = '{"name": "Jane Doe", "age": 25, "location": "California"}';
const jsonData = $.parseJSON(jsonString);
$("#parsed-json").html(
`Name: ${jsonData.name}<br>Age: ${jsonData.age}<br>Location: ${jsonData.location}`
);
});

</script>
</body>
</html>

data.json
{
"name": "John Doe",
"age": 30,
"location": "New York"
}

data.txt
This is text to show output

Dept. of CSE,ISE,SDIT,Mangalore Page | 42


Web Technology Laboratory BCSL504

Output:

Dept. of CSE,ISE,SDIT,Mangalore Page | 43

You might also like