Scribd
Upload
28 views107 pages

Web Final

Uploaded by

Anik Hasan
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
28 views107 pages

Web Final

Uploaded by

Anik Hasan
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/ 107

PHP-

CREATE DATABASE WITH TABLE-


1.CONNECTION TO DATABASE-
<?php
$host="localhost";
$username = "root";
$password = "";
$database = "dem";
$con=mysqli_connect ($host, $username, $password, $database);

if ($con) {

echo "";
}

else
{
echo "databse failed to connect";
}
?>

2. INSERT DATA TO TABLE

<?php
include 'connection.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<form action="" method="POST">
<input type="text" name="firstname" placeholder="firstname"
required> <br><br>
<input type="text" name="lastname" placeholder="lastname"
required> <br><br>
<input type="number" name="age" placeholder="age" required>
<br><br>
<input type="submit" name="save_btn" value="SAVE">
<button><a href="View.PhP">View</a></button>
</form>
</div>
<?php
if (isset($_POST['save_btn'])) {
$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$age = $_POST['age'];

// Escape user inputs to prevent SQL injection


$fname = mysqli_real_escape_string($con, $fname);
$lname = mysqli_real_escape_string($con, $lname);
$age = mysqli_real_escape_string($con, $age);

$query = "INSERT INTO student (firstname, lastname, age) VALUES


('$fname', '$lname', '$age')";
$data = mysqli_query($con, $query);

if ($data) {
echo "Data inserted successfully";
} else {
echo "Error: " . mysqli_error($con);
}
}
?>
</body>

</html>
3. View-
<?php
include 'connection.php'; // Include the database connection file
?>

<a href="index1.php">Home</a>

<table border="1" cellpadding="10" cellspacing="0">


<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th colspan="2">Actions</th>
</tr>

<?php
// Prepare the SQL query
$query = "SELECT * FROM student";

// Execute the query


$result = mysqli_query($con, $query);

// Check if the query was successful


if ($result) {
// Loop through the rows
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<td><?php echo htmlspecialchars($row['firstname']); ?></td>
<td><?php echo htmlspecialchars($row['lastname']); ?></td>
<td><?php echo htmlspecialchars($row['age']); ?></td>
<td><a href="update.php?id=<?php echo htmlspecialchars($row['id']);
?>">Edit</a></td>
<td><a onclick="return confirm('Are you sure, you want to delete?')"
href="delete.php?id=<?php echo $row['id']; ?>">Delete</a></td>
</tr>
<?php
}
} else {
// Query failed, handle the error
echo "Error executing the query: " . mysqli_error($con);
}

// Close the database connection


mysqli_close($con);
?>
</table>

4. Update-

<?php
include 'Connection.php';
$id = $_GET['id'];
$select = "SELECT * FROM student WHERE id='$id'";
$data = mysqli_query($con, $select);
$row = mysqli_fetch_array($data);
?>

<div>
<form action="" method="POST">
<input value="<?php echo $row['firstname'] ?>" type="text"
name="firstname" placeholder="firstname"> <br><br>

<input type="text" name="lastname" placeholder="lastname" value="<?php


echo $row['lastname'] ?>"> <br><br>

<input type="number" name="age" placeholder="age" value="<?php echo


$row['age'] ?>"> <br><br>

<input type="submit" name="update_btn" value="Update">


<button><a href="view.php">Back</a></button>
</form>
</div>

<?php
if (isset($_POST['update_btn'])) {
$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$age = $_POST['age'];

$update = "UPDATE student SET firstname='$fname'


,lastname='$lname',age='$age' WHERE id='$id'";
$data = mysqli_query($con, $update);
if ($data) {
// Update successful
}
}
?>

4. delete

<?php
include 'connection.php';

$id = $_GET['id'];

$query = "DELETE FROM student WHERE id='$id'";

$data = mysqli_query($con, $query);

if ($data) {

?>
<script type="text/javascript">
alert("Data Deleted Successfully");
window.open("View.php", "_self"); // Redirect to the 'View.php' page in the
same window
</script>
<?php
} else {

echo "Error deleting record: " . mysqli_error($con);


}

mysqli_close($con);
?>

Ajax CLP

<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
<body>
<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadStudentData()">


Get Student Information
</button>
<button type="button" onclick="loadTeacherData()">
Get Teacher Information
</button>
<br /><br />
<table id="demo"></table>

<script>
function loadStudentData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
displayStudentInfo(this);
}
};
xhttp.open("GET", "ajax2.xml", true);
xhttp.send();
}

function loadTeacherData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
displayTeacherInfo(this);
}
};
xhttp.open("GET", "ajax2.xml", true);
xhttp.send();
}

function displayStudentInfo(xml) {
var i;
var xmlDoc = xml.responseXML;
var table =
"<tr><th>Student Code</th><th>Student Name</th><th>Student
ID</th><th>Email</th><th>Blood Group</th></tr>";
var students = xmlDoc.getElementsByTagName("STUDENT");
for (i = 0; i < students.length; i++) {
table +=
"<tr><td>" +
students[i].getElementsByTagName("St_Code")[0].childNodes[0]
.nodeValue +
"</td><td>" +

students[i].getElementsByTagName("Student_Name")[0].childNodes[0]
.nodeValue +
"</td><td>" +

students[i].getElementsByTagName("Student_ID")[0].childNodes[0]
.nodeValue +
"</td><td>" +
students[i].getElementsByTagName("Email")[0].childNodes[0]
.nodeValue +
"</td><td>" +

students[i].getElementsByTagName("Blood_Group")[0].childNodes[0]
.nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}

function displayTeacherInfo(xml) {
var i;
var xmlDoc = xml.responseXML;
var table =
"<tr><th>Teacher Code</th><th>Teacher Short
Name</th><th>Teacher Department</th></tr>";
var teachers = xmlDoc.getElementsByTagName("TEACHER");
for (i = 0; i < teachers.length; i++) {
table +=
"<tr><td>" +
teachers[i].getElementsByTagName("T_Code")[0].childNodes[0]
.nodeValue +
"</td><td>" +
teachers[i].getElementsByTagName("Teacher_Short_Name")[0]
.childNodes[0].nodeValue +
"</td><td>" +
teachers[i].getElementsByTagName("Teacher_Department")[0]
.childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

XML for this ajax


.

<SCHOOL_INFO>
<STUDENTS>
<STUDENT>
<St_Code>101</St_Code>
<Student_Name>anik</Student_Name>
<Student_ID>123456</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>O+</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>102</St_Code>
<Student_Name>Puja</Student_Name>
<Student_ID>234567</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>A-</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>103</St_Code>
<Student_Name>Nurul</Student_Name>
<Student_ID>345678</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>B+</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>104</St_Code>
<Student_Name>JUBU</Student_Name>
<Student_ID>456789</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>AB-</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>105</St_Code>
<Student_Name>tamim</Student_Name>
<Student_ID>567890</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>O-</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>106</St_Code>
<Student_Name>asad</Student_Name>
<Student_ID>678901</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>A+</Blood_Group>
</STUDENT>
</STUDENTS>

<TEACHERS>
<TEACHER>
<T_Code>T001</T_Code>
<Teacher_Short_Name>CM</Teacher_Short_Name>
<Teacher_Department>Computer Science</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T002</T_Code>
<Teacher_Short_Name>PR</Teacher_Short_Name>
<Teacher_Department>Physics</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T003</T_Code>
<Teacher_Short_Name>Pr</Teacher_Short_Name>
<Teacher_Department>Cyber Security</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T004</T_Code>
<Teacher_Short_Name>Df</Teacher_Short_Name>
<Teacher_Department>CS</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T005</T_Code>
<Teacher_Short_Name>Tj</Teacher_Short_Name>
<Teacher_Department>Math</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T006</T_Code>
<Teacher_Short_Name>MD</Teacher_Short_Name>
<Teacher_Department>English</Teacher_Department>
</TEACHER>
</TEACHERS>
</SCHOOL_INFO>
AJAX ANOTHER EXAMLE-
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest(); // call new req
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// req complete , req succesfull,
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax.xml", true);
xhttp.send();
}
</script>
</body>
</html>
//

<!DOCTYPE html>
<html>
<body onload="loadDoc()">
<div id="demo">
<h2>Let AJAX change this text</h2>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest(); // call new req
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// req complete , req succesfull,
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax.xml", true);
xhttp.send();
}
</script>
</body>
</html>

//

<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>

<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadDoc()">Get my CD collection</button>


<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>a

.XML FILE
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers
from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And
XML.</p>

AJAX AGAIN PROBEL -


REAL-
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
<body>
<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadStudentData()">


Get Student Information
</button>
<button type="button" onclick="loadTeacherData()">
Get Teacher Information
</button>
<br /><br />
<table id="demo"></table>

<script>
function loadStudentData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
displayStudentInfo(this);
}
};
xhttp.open("GET", "ajax2.xml", true);
xhttp.send();
}

function loadTeacherData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
displayTeacherInfo(this);
}
};
xhttp.open("GET", "ajax2.xml", true);
xhttp.send();
}

function displayStudentInfo(xml) {
var i;
var xmlDoc = xml.responseXML;
var table =
"<tr><th>Student Code</th><th>Student Name</th><th>Student
ID</th><th>Email</th><th>Blood Group</th></tr>";
var students = xmlDoc.getElementsByTagName("STUDENT");
for (i = 0; i < students.length; i++) {
table +=
"<tr><td>" +
students[i].getElementsByTagName("St_Code")[0].childNodes[0]
.nodeValue +
"</td><td>" +

students[i].getElementsByTagName("Student_Name")[0].childNodes[0]
.nodeValue +
"</td><td>" +
students[i].getElementsByTagName("Student_ID")[0].childNodes[0]
.nodeValue +
"</td><td>" +
students[i].getElementsByTagName("Email")[0].childNodes[0]
.nodeValue +
"</td><td>" +
students[i].getElementsByTagName("Blood_Group")[0].childNodes[0]
.nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}

function displayTeacherInfo(xml) {
var i;
var xmlDoc = xml.responseXML;
var table =
"<tr><th>Teacher Code</th><th>Teacher Short Name</th><th>Teacher
Department</th></tr>";
var teachers = xmlDoc.getElementsByTagName("TEACHER");
for (i = 0; i < teachers.length; i++) {
table +=
"<tr><td>" +
teachers[i].getElementsByTagName("T_Code")[0].childNodes[0]
.nodeValue +
"</td><td>" +
teachers[i].getElementsByTagName("Teacher_Short_Name")[0]
.childNodes[0].nodeValue +
"</td><td>" +
teachers[i].getElementsByTagName("Teacher_Department")[0]
.childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

.XML FILE-
<SCHOOL_INFO>
<STUDENTS>
<STUDENT>
<St_Code>101</St_Code>
<Student_Name>anik</Student_Name>
<Student_ID>123456</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>O+</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>102</St_Code>
<Student_Name>Puja</Student_Name>
<Student_ID>234567</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>A-</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>103</St_Code>
<Student_Name>Nurul</Student_Name>
<Student_ID>345678</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>B+</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>104</St_Code>
<Student_Name>JUBU</Student_Name>
<Student_ID>456789</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>AB-</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>105</St_Code>
<Student_Name>tamim</Student_Name>
<Student_ID>567890</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>O-</Blood_Group>
</STUDENT>
<STUDENT>
<St_Code>106</St_Code>
<Student_Name>asad</Student_Name>
<Student_ID>678901</Student_ID>
<Email>[email protected]</Email>
<Blood_Group>A+</Blood_Group>
</STUDENT>
</STUDENTS>

<TEACHERS>
<TEACHER>
<T_Code>T001</T_Code>

<Teacher_Short_Name>CM</Teacher_Short_Name>
<Teacher_Department>Computer
Science</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T002</T_Code>

<Teacher_Short_Name>PR</Teacher_Short_Name>

<Teacher_Department>Physics</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T003</T_Code>

<Teacher_Short_Name>Pr</Teacher_Short_Name>
<Teacher_Department>Cyber
Security</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T004</T_Code>

<Teacher_Short_Name>Df</Teacher_Short_Name>

<Teacher_Department>CS</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T005</T_Code>

<Teacher_Short_Name>Tj</Teacher_Short_Name>

<Teacher_Department>Math</Teacher_Department>
</TEACHER>
<TEACHER>
<T_Code>T006</T_Code>

<Teacher_Short_Name>MD</Teacher_Short_Name>

<Teacher_Department>English</Teacher_Department>
</TEACHER>
</TEACHERS>
</SCHOOL_INFO>
JAVASCRIPT BASIC-
Turn on/off light
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById(`myImage`).src=`bulboff.gif`">
Turn on the image
</button>
<img id="myImage" src="bulboff.gif" style="width: 100px" />

<button onclick="document.getElementById(`myImage`).src=`bulbon.gif`">
Turn off the image
</button>
<p id="demo"></p>
<p id="rio"></p>
<script>
let text = "How are you doing today?";
const myArray = text.split(" ");

let result = text.repeat(3);


document.getElementById("rio").innerHTML = result;

document.getElementById("demo").innerHTML =
"Array Length: " + myArray.length + "<br>";
document.getElementById("rio").innerHTML += myArray.join(" ");
</script>
</body>
</html>
////////////////////
.js
let text = "How are you doing today";

const lent = text.length


console.log(lent)

const myarray = text.split(",");


console.log(myarray)

const repeat = text.repeat(3);


console.log(repeat)

JAVA SCRIPT BASIC-


function isPalindrome(str) {
// Remove non-alphanumeric characters and
convert to lowercase
const cleanedStr =
str.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();

// Reverse the cleaned string


const reversedStr =
cleanedStr.split('').reverse().join('');

// Compare the cleaned string with its


reversed version
return cleanedStr === reversedStr;
}

// Usage examples
console.log(isPalindrome("racecar")); // Output:
true
console.log(isPalindrome("A man a plan a canal
Panama")); // Output: true
console.log(isPalindrome("Hello, World!")); //
Output: false
console.log(isPalindrome("Step on no pets")); //
Output: true (after removing non-alphanumeric
characters)

<!DOCTYPE html>
<html>
<head>
<title>AJAX XML Example</title>
</head>
<body>
<h2>Employee List</h2>
<div id="result"></div>

<script>
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();

// Define a function to handle the response


xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Parse the XML response
var xmlDoc = xhr.responseXML;

// Get the employees element


var employees = xmlDoc.getElementsByTagName("employees")[0];

// Loop through each employee and create HTML elements


var result = "";
for (var i = 0; i < employees.childNodes.length; i++) {
var employee = employees.childNodes[i];
if (employee.nodeType === 1) {
var name = employee.getElementsByTagName("name")[0].childNodes[0].nodeValue;
var age = employee.getElementsByTagName("age")[0].childNodes[0].nodeValue;
var department =
employee.getElementsByTagName("department")[0].childNodes[0].nodeValue;
result += "<p>Name: " + name + ", Age: " + age + ", Department: " + department +
"</p>";
}
}

// Display the employee list


document.getElementById("result").innerHTML = result;
}
};

// Open the XMLHttpRequest and send the request


xhr.open("GET", "employees.xml", true);
xhr.send();
</script>
</body>
</html>

.xml
<?xml version="1.0" encoding="UTF-8"?>
<employees>
<employee>
<name>John Doe</name>
<age>32</age>
<department>Sales</department>
</employee>
<employee>
<name>Jane Smith</name>
<age>27</age>
<department>Marketing</department>
</employee>
<!-- Add more employee elements as needed -->
</employees>
HTML TABLE

<!DOCTYPE html>
<html lang="javascriptreact">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Table Practice</title>
</head>
<body>
<table border="1" height="0" width="0"
cellpadding="12" cellspacing="3">

<tr>
<th rowspan="3">Day</th>
<strong><th

colspan="3">Seminar</th></strong>

</tr>
<tr>
<strong><th

colspan="2">Schedule</th></strong>
<th rowspan="2">Topic</th>
</tr>
<tr>
<th>Begin</th>

<th>End</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8.00 a.m</td>
<td rowspan="2">5.00 p.m</td>
<td>Python</td>
</tr>
<tr>
<td>Artifial Intilligence and Machinc

Learning</td>
</tr>
<tr>
<td rowspan="3">Tuesday</td>
<td>8.00 a.m</td>
<td>11.00</td>
<td></td>
</tr>
<tr>
<td>11.00 a.m</td>
<td>2.00 p.m</td>
<td rowspan="2">IoT</td>
</tr>
<tr>
<td>2.00 p.m</td>
<td>12.00 p.m</td>
</tr>

<tr>
<td>Wednesday</td>
<td>8:00 a.m</td>
<td>12.00 p.m</td>
<td>Database SQL</td>
</tr>
</table>
</body>
</html>

OUTPUT—
<!DOCTYPE html>
<html lang="javascriptreact">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Table Practice</title>
</head>
<body>
<table border="1" height="0" width="0"
cellpadding="12" cellspacing="3">

<tr>
<th rowspan="3">Day</th>
<strong><th

colspan="3">Seminar</th></strong>
</tr>
<tr>
<strong><th

colspan="2">Schedule</th></strong>
<th rowspan="2">Topic</th>
</tr>
<tr>
<th>Begin</th>

<th>End</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8.00 a.m</td>
<td rowspan="2">5.00 p.m</td>
<td>Python</td>
</tr>
<tr>
<td>Artifial Intilligence and Machinc

Learning</td>
</tr>
<tr>
<td rowspan="3">Tuesday</td>
<td>8.00 a.m</td>
<td>11.00</td>
<td></td>
</tr>
<tr>
<td>11.00 a.m</td>
<td>2.00 p.m</td>
<td rowspan="2">IoT</td>
</tr>
<tr>
<td>2.00 p.m</td>
<td>12.00 p.m</td>
</tr>

<tr>
<td>Wednesday</td>
<td>8:00 a.m</td>
<td>12.00 p.m</td>
<td>Database SQL</td>
</tr>
</table>
</body>
</html>
OUTPUT—

CLASS ROUTINE TABLE-


Html only

<tr>
<td rowspan="2">CSE 323</td>
<td rowspan="2">Computer and Cyber Security</td>
<td rowspan="2">212_D3</td>
<td>Fri</td>
<td>J105</td>
<td>10.30:AM - 11.45:AM</td>
</tr>
<tr>
<td>Thu</td>
<td>J105</td>
<td>11.00:AM - 12.45:PM</td>
</tr>
<tr>
<td rowspan="2">GED 401-CSE(201)</td>
<td rowspan="2">Financial and Managerial Accounting</td>
<td rowspan="2">212_D1</td>
<td>Mon</td>
<td>J109</td>
<td>8.30:AM - 09.45:AM</td>
</tr>
<tr>
<td>Tue</td>
<td>J109</td>
<td>8.30:AM - 9.45:PM</td>
</tr>
<tr>
<td rowspan="2">CSE 403-CSE(201)</td>
<td rowspan="2">Information System and Design</td>
<td rowspan="2">212_D4</td>
<td>tue</td>
<td>J107</td>
<td>11.00:AM - 12.15:AM</td>
</tr>
<tr>
<td>Mun</td>
<td>J107</td>
<td>11.00:AM - 12.15:PM</td>
</tr>
<tr>
<td>CSE 324-CSE(201)</td>
<td>Integrated Design Project 1</td>
<td>212_D4</td>
<td>Fri</td>
<td>J103</td>
<td>02:15:PM - 04:45PM</td>
</tr>
<tr>
<td>CSE 302-CSE(181)</td>
<td>Web Progrmming Lab</td>
<td>213_D11</td>
<td>Tue</td>
<td>L104</td>
<td>02:00:PM - 04:30PM</td>
</tr>
</table>

LOGIN FORM-
<!DOCTYPE html>

<html lang="en" dir="ltr">


<head>
<meta charset="utf-8" />
<title>Login Form</title>
<link rel="stylesheet" href="login.css" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />


</head>
<body>
<div class="wrapper">
<div class="title-text">
<div class="title login">Login Form</div>
<div class="title signup">Signup Form</div>
</div>
<div class="form-container">
<div class="slide-controls">
<input type="radio" name="slide" id="login" checked />
<input type="radio" name="slide" id="signup" />
<label for="login" class="slide login">Login</label>
<label for="signup" class="slide signup">Signup</label>
<div class="slider-tab"></div>
</div>
<div class="form-inner">
<form action="#" class="login">
<div class="field">
<input type="text" placeholder="Email Address" required />
</div>
<div class="field">
<input type="password" placeholder="Password" required />
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Login" />
</div>
<div class="signup-link">
Not a member? <a href="">Signup now</a>
</div>
</form>
<form action="#" class="signup">
<div class="field">
<input type="text" placeholder="Email Address" required />
</div>
<div class="field">
<input type="password" placeholder="Password" required />
</div>
<div class="field">
<input type="password" placeholder="Confirm password" required
/>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Signup" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>

Login css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background-image: url(pexels-steve-johnson-1269968.jpg);
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
font-family: Arial, sans-serif;
background-size: cover;
color: white;

}
::selection{
background: #fa4299;
color: #fff;
}
.wrapper{
overflow: hidden;
max-width: 390px;
background: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title-text{
display: flex;
width: 200%;
}
.wrapper .title{
width: 50%;
font-size: 35px;
font-weight: 600;
text-align: center;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
position: relative;
display: flex;
height: 50px;
width: 100%;
overflow: hidden;
margin: 30px 0 10px 0;
justify-content: space-between;
border: 1px solid lightgrey;
border-radius: 5px;
}
.slide-controls .slide{
height: 100%;
width: 100%;
color: #fff;
font-size: 18px;
font-weight: 500;
text-align: center;
line-height: 48px;
cursor: pointer;
z-index: 1;
transition: all 0.6s ease;
}
.slide-controls label.signup{
color: #000;
}
.slide-controls .slider-tab{
position: absolute;
height: 100%;
width: 50%;
left: 0;
z-index: 0;
border-radius: 5px;
background: -webkit-linear-gradient(left, #7808e0, #c70626);
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
display: none;
}
#signup:checked ~ .slider-tab{
left: 50%;
}
#signup:checked ~ label.signup{
color: #fff;
cursor: default;
user-select: none;
}
#signup:checked ~ label.login{
color: #000;
}
#login:checked ~ label.signup{
color: #000;
}
#login:checked ~ label.login{
cursor: default;
user-select: none;
}
.wrapper .form-container{
width: 100%;
overflow: hidden;
}
.form-container .form-inner{
display: flex;
width: 200%;
}
.form-container .form-inner form{
width: 50%;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
height: 50px;
width: 100%;
margin-top: 20px;
}
.form-inner form .field input{
height: 100%;
width: 100%;
outline: none;
padding-left: 15px;
border-radius: 5px;
border: 1px solid lightgrey;
border-bottom-width: 2px;
font-size: 17px;
transition: all 0.3s ease;
}
.form-inner form .field input:focus{
border-color: #1b34c4;
/* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
color: #999;
transition: all 0.3s ease;
}
form .field input:focus::placeholder{
color: #b3b3b3;
}
.form-inner form .pass-link{
margin-top: 5px;
}
.form-inner form .signup-link{
text-align: center;
margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
color: #2216c5;
text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
text-decoration: underline;
}
form .btn{
height: 50px;
width: 100%;
border-radius: 5px;
position: relative;
overflow: hidden;
}
form .btn .btn-layer{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: -webkit-linear-gradient(right, #b24569, #dd0707, #0c67f0,
#c50a62);
border-radius: 5px;
transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
left: 0;
}
form .btn input[type="submit"]{
height: 100%;
width: 100%;
z-index: 1;
position: relative;
background: none;
border: none;
color: #fff;
padding-left: 0;
border-radius: 5px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}

GOOGLE FORM SURVEY HTML-


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Registration Form</title>
<link rel="stylesheet" href="./survey.css" />
</head>

<body div class="outline">


<h1>Programming Interest Of GUB Students</h1>

<p
id="descriptrion"
style="
text-align: center;
color: #e20e0e;
font-weight: bold;
font-size: large;
"
>
This form collects data about the programming interests of students from
all Engineering dicipline
</p>

<form method="post" action="https://Survey.com">


<div class="Anik"><h2>Personal Information</h2></div>
<fieldset div class="personal-info">
<label for="name">Name:</label><br />
<input
id="name-label"
name="name"
type="text"
placeholder="ANIK HASAN"
required
/><br />

<label for="email">Email:</label><br />


<input
id="email-label"
name="email"
type="email"
placeholder="[email protected]"
required
/><br />

<label for="age">Age(optional):</label><br />


<input
id="age-label"
name="age-label"
type="number"
placeholder="Enter your age"
min="18"
max="100"
required
/><br />

<label for="number">Enter your phone number:</label><br />


<select id="country-code">
<option value="+1">USA (+1)</option>
<option value="+91">India (+91)</option>
<option value="+880" selected>Bangladesh (+880)</option>
<option value="+975">Bhutan (+975)</option>
<option value="+977">Nepal (+977)</option>
<option value="+44">England (+44)</option>
<option value="+61">Australia (+61)</option>
</select>
<input
id="number-label"
type="tel"
placeholder="Phone Number"
min="11"
max="11"
pattern="\d{11}"
required
/><br />
</fieldset>

<div class="radio-group">
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required />
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required
/>
<label for="female">Female</label>
</div>

<div class="section">
<h2>Academic Information</h2>
<label for="student-id">Student ID:</label>
<input
type="text"
id="student-id"
name="student-id"
minlength="9"
maxlength="9"
pattern="\d{9}"
required
/>
<label for="department">Department/Program:</label>
<select id="department" name="department" required>
<option value="">Select your department</option>
<option value="cse">Computer Science and Engineering</option>
<option value="eee">Electrical and Electronics Engineering</option>
<option value="me">Mechanical Engineering</option>
<option value="ce">Civil Engineering</option>
</select>
<label for="year">Year Of Study:</label>
<select id="year" name="year" required>
<option value="">Select your year</option>
<option value="1">1st Year</option>
<option value="2">2nd Year</option>
<option value="3">3rd Year</option>
<option value="4">4th Year</option>
</select>
</div>
<fieldset div class="salary">
<label>Are you a Student?</label>
<select id="dropdown">
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
</fieldset>

<fieldset div class="current-role">


<label>Do you have any exprience in programming?</label>
<select id="dropdown">
<option value="Yes Very Professional">Yes Very Professional</option>
<option value="Yes Intermediate"></option>
<option value="NO">NO</option>
<option value="Very No">Very NO</option>
</select>
</fieldset>

<fieldset div class="salary">


<label>What you Preffer?</label>
<select id="dropdown">
<option value="Online">Online</option>
<option value="Offline">Offline</option>
</select>
</fieldset>

<fieldset div class="prog-styles">


<p>Type of programming interested in:</p>
<label for="functional"
>Functional<input
type="radio"
id="functional"
name="programming-style"
value="Functional" /></label
><br />

<label for="declarative"
>Declarative<input
type="radio"
id="declarative"
name="programming-style"
value="Declarative"
/>
</label>
<br />

<label for="object-oriented"
>Object Oriented<input
type="radio"
id="object-oriented"
name="programming-style"
value="Object Oriented"
/> </label
><br />
</fieldset>

<fieldset div class="languages">


<p>Programming Languages of Interests:</p>

<input type="checkbox" id="C++" value="C++" name="C++" />


<label for="C++">C++</label><br />

<input type="checkbox" id="Fortran" value="Fortran" name="Fortran" />


<label for="Fortran">Fortran</label><br />

<input type="checkbox" id="Java" value="Java" name="Java" />


<label for="Java">Java</label><br />

<input type="checkbox" id="Pascal" value="Pascal" name="Pascal" />


<label for="Pascal">Pascal</label><br />
<input type="checkbox" id="Ruby" value="Ruby" name="Ruby" />
<label for="Ruby">Ruby</label><br />

<input type="checkbox" id="C#" value="C#" name="C#" />


<label for="C#">C#</label><br />

<input type="checkbox" id="Python" name="Python" value="Python" />


<label for="Python">Python</label><br />

<input type="checkbox" id="PHP" name="PHP" value="PHP" />


<label for>PHP</label><br />
</fieldset>

<fieldset div class="more-info">


<label for="additional-info">Additional Information:</label><br />
<textarea
id="additional-info"
name="additional-info"
rows="6"
cols="50"
placeholder="Do you have anything else to add?"
></textarea>
</fieldset>

<input type="submit" value="Submit" />


</form>
</body>
</html>

////////////////////////

CSS OF SURVEY

/* COUNTRY CODE */
#country-code {
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(255, 128, 0, 0.3); /* Orange shadow */
}

#number-label {
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin-left: 5px;
box-shadow: 0 2px 4px rgba(255, 128, 0, 0.3); /* Orange shadow */
}

/* MALE FEMALE */
.radio-group {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 10px;
background-color: #f79191;
border-radius: 5px;
padding: 10px;
}

.radio-group input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #8e44ad;
outline: none;
margin-right: 5px;
transition: border-color 0.2s ease-in-out;

.radio-group input[type="radio"]:checked {
border-color: #8e44ad;
background-color: #8e44ad;
}

.radio-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

/* ACADEMIC INFO */
.section {
margin-bottom: 20px;
padding: 20px;
background-color: #f79191;opacity: inherit;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(240, 241, 238, 0.3); /* Green shadow */
}

.section h2 {
color: #d803a3f3;
margin-bottom: 10px;
text-align: center;
}

.section label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #082abe;
}

.section input[type="text"],
.section select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 3px;
background-color:#FFF5EE;
color: #ee3f3f; /*lekhar color*/
font-size: 14px;
margin-bottom: 15px;
}
.section input[type="text"]:focus,
.section select:focus {
outline: none;
border-color: #888;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/* BODY TO REST PART */

body {
background-image: url(pexels-fwstudio-129731.jpg);
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-position: center;
font-family: Arial, sans-serif;
background-size: cover;
color: white;

h1 {
text-align: center;
color: #e20e0e;
text-shadow: 2px 2px 4px rgba(238, 10, 10, 0.5);
margin-bottom: 20px;

#description {
text-align: center;
color: #350dc570;
margin-bottom: 30px;

.personal-info input[type=text], select{


color: #f79191;
}

.personal-info input[type=email], select{


color: #f79191;
}

form {
max-width: 600px;
margin: 0 auto;
background-color: #FFFFFF;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
color: #ee3f3f; /* Purple shadow */
}

fieldset {
border: none;
padding: 10px;
margin-bottom: 20px;
background-color: #f79191; /* background of all sections ofcolor i cant
undeerstnd*/
border-radius: 5px;
box-shadow: 0 2px 4px rgba(255, 192, 203, 0.3); /* Pink shadow */
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #082abe; /*background off all section heading*/
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #FF7F50;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
background-color: #FFF5EE;
color: #f79191;
}

.personal-info input[type=tel],select{
color: #f79191;
}

/* try to change personal info */


.Anik {
text-align: center;
color: #ad5444;
}

select {
width: 100%;
padding: 8px;
border: 1px ;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
background-color: #FFF5EE;
color: #ee3f3f;

.prog-styles p,
.languages p {
margin-bottom: 10px;
color: #1a75ff;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
textarea {
resize: vertical;
}

input[type="submit"] {
background-color: #FF6347;
color: #FFFFFF;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
box-shadow: 0 2px 4px rgba(255, 165, 0, 0.5); /* Orange shadow */
transition: background-color 0.3s ease;
}

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

HTML BASIC-MAIL ME
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ANIK FIRST LAB</title>
</head>
<body>
<p>
You can't rely on how you look to sustain you, what sustains us, what is
fundamentally beautiful is compassion; for yourself and your those
around
you. Lorem ipsum dolor sit amet.
</p>
<br />
<h1>HI ANIK</h1>
<h2>hlw how are you</h2>
<h3>im fine</h3>
<h4>do you have any money</h4>

<a href="company/about.html">ABOUT ME</a>


<a href="company/GUBBLOG.png"> </a>
<a href="images/GUBBLOG.png"> </a>
<a href="#section-css">CSS</a>
<a href="https://google.com" target="_blank">GOOGLE</a>
<a href="mailto:[email protected]" target="_blank">Email Me</a>
</body>
</html>

BASIC HTML WITH VIDEOL AUDIO


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Anik.css" />
<link
rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-aweso
me.min.css"
/>
</head>
<body>
<div class="bennar-contain">
<header>
<div class="logo">
<h1><strong>HW</strong></h1>
</div>

<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#audio">Audio</a></li>
<li><a href="#video">video</a></li>
<li><a href="#gubphoto">GUB-Photo Frame</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#routine">Routine</a></li>
</ul>
</header>

<section class="udaashi">
<div class="social-icons">
<span class="fa fa-linkedin"></span>
<span class="fa fa-youtube"></span>
<span class="fa fa-instagram"></span>
</div>
</section>

<div class="text">
<h1>Greetings <br /><span>Beautiful People</span></h1>
<h3>Welcome to my Website</h3>
</div>
</div>

<!--Abaute section-->
<section id="about">
<div class="aboutes-container">
<div class="aboute-herd">
<h1>About Me</h1>
</div>
<div class="about-info">
<div class="aboute-imge">
<img src="img/anik.jpg" width="100%" alt="" />
<img src="img/my.jpg" width="100%" alt="" />

<img src="img/gub4.jpg" width="100%" alt="" />


</div>
<div class="about-text">
<h4>This is Anik Hasan</h4>
<p>
I am outgoing, dedicated, and open-minded. I get across to
people and adjust to changes with ease. I believe that a person should work on
developing their professional skills and learning new things all the time.
Currently, I am looking for new career opportunities my current job position
cannot provide
HI <a href="http://127.0.0.1:5500/MyWebsite/protfolio.html"
target="_blank" >Visit My Personal Protfolio </a>
</p>

<p><em> <strong>Send Email to</em></strong>


<a target="_blank">ANIK HASAN</a>
<a href="mailto:[email protected]"><buton class="mail-btn">Mail
Me</buton></a>
</div>
</div>
</div>
<div class="aboutes-container">
<div class="autio-video-info">
<div class="audio-text" id="audio">
<h1>Audio Sections</h1>
<p>LIFE LESSONS</p>
<div>
<audio class="Audio-file" controls>
<source
src="img/Is your future already destined_ by Gaur Gopal
Das.webm"
/>
</audio>

<video class="video-file" controls>


<source src="img/gub-love1.mp4" />
</video>

</div>
</div>
<div class="video-text" id="video">
<h1>Video Sections</h1>
<p>Things You Have to Know</p>
<div>
<video class="video-file" controls>
<source
src="img/Internet will NEVER be the Same Again! _ Rise of AI
Videos _ Dhruv Rathee.mp4"
/>
</video>
</div>

<div class="second-video">
<h2>GUB MEMORY</h2>
<video class="video-file" controls>
<source src="img/gub-love.mp4" />
</video>
<video class="video-file" controls>
<source src="img/gub-love1.mp4" />
</video>
<video class="video-file" controls>
<source src="img/gub-lovely1.mp4" />
</video>
<video class="video-file" controls>
<source src="img/my-birthday.mp4" />
</video>
</div>
</div>
</div>
</div>
<div class="video-container">
<div class="fav-video">
<h2>My Favourite Videos</h2>
<video class="video-file" controls>
<source src="img/my-fav.mp4" />
</video>
<video class="video-file" controls>
<source src="img/my-fav2.mp4" />
</video>
</div>
<!--PHOTO FRAME-->
<section id="gubphoto">
<h1 style="text-align: center; font-size: 30px; color: aqua;margin:
20px 0;">GUB Photo frame</h1>
<div class="GUB-Photo">

<div class="gub-frame">
<img src="img/gub7.jpg" width="100%" alt="" />
</div>
<div class="gub-frame">
<img src="img/gub8.jpg" width="100%" alt="" />
</div>
<div class="gub-frame">
<img src="img/gub6.jpg" width="100%" alt="" />
</div>
<div class="gub-frame">
<img src="img/gub9.jpg" width="100%" alt="" />
</div>
<div class="gub-frame">
<img src="img/gub5.jpg" width="100%" alt="" />
</div>
<div class="gub-frame">
<img src="img/gub3.jpg" width="100%" alt="" />
</div>
<div class="gub-frame">
<img src="img/gub2.jpg" width="100%" alt="" />
</div>
<div class="gub-frame">
<img src="img/" width="100%" alt="" />
</div>
</div>
</div>
</section>
<section class="register-container" id="courses">
<div class="list-header">
<h1>Register Courses</h1>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="register-list">
<ul>
<li>INFORMATION SYSTEM AND DESING</li>
<li>Artificial Intelligence</li>
<li>Artificial Intelligence Lab</li>
<li>Web Programming</li>
<li>Web Progrmming Lab</li>
<li>Integrated Design Project 1</li>
<li>Financial and Managerial Accounting</li>
<li>Computer and Cyber Security</li>
</ul>
<div class="gub-img">
<img src="img/gub.jpeg" alt="" />
</div>
<ol>
<li>INFORMATION SYSTEM AND DESING</li>
<li>Artificial Intelligence</li>
<li>Artificial Intelligence Lab</li>
<li>Web Programming</li>
<li>Web Progrmming Lab</li>
<li>Integrated Design Project 1</li>
<li>Financial and Managerial Accounting</li>
<li>Computer and Cyber Security</li>
</ol>
</div>
</section>
<section class="routine-container" id="routine">
<div class="routine">
<table
border="1"
height="800"
width="900"
cellpadding="10"
cellspacing="2"
>
<div class="header">
<h1 class="title">Class Routine</h1>
<p class="student-name">Student Name: Anik hasan</p>
<p class="department">
Department of Computer science & Engineering
</p>
<p class="university">Green University of Bangladesh</p>
</div>
<tr class="header" style="background-color: green">
<th>Day</th>
<th>Course</th>
<th>Section</th>
<th>Day</th>
<th>Class-Room</th>
<th>Time</th>
</tr>
<tr>
<td rowspan="2">CSE 315-CSE(201)</td>
<td rowspan="2">Artificial Intelligence</td>
<td rowspan="2">212_D4</td>
<td>Mon</td>
<td>K104</td>
<td>09.45:AM - 11.00:AM</td>
</tr>
<tr>
<td>Tue</td>
<td>K103</td>
<td>09.45:AM - 11.00:AM</td>
</tr>
<tr>
<td>CSE 316-CSE(201)</td>
<td>Artificial Intelligence Lab</td>
<td>212_D6</td>
<td>Mon</td>
<td>K101</td>
<td>02:00:PM - 04:30PM</td>
</tr>

<tr>
<td rowspan="2">CSE 323</td>
<td rowspan="2">Computer and Cyber Security</td>
<td rowspan="2">212_D3</td>
<td>Fri</td>
<td>J105</td>
<td>10.30:AM - 11.45:AM</td>
</tr>
<tr>
<td>Thu</td>
<td>J105</td>
<td>11.00:AM - 12.45:PM</td>
</tr>
<tr>
<td rowspan="2">GED 401-CSE(201)</td>
<td rowspan="2">Financial and Managerial Accounting</td>
<td rowspan="2">212_D1</td>
<td>Mon</td>
<td>J109</td>
<td>8.30:AM - 09.45:AM</td>
</tr>
<tr>
<td>Tue</td>
<td>J109</td>
<td>8.30:AM - 9.45:PM</td>
</tr>
<tr>
<td rowspan="2">CSE 403-CSE(201)</td>
<td rowspan="2">Information System and Design</td>
<td rowspan="2">212_D4</td>
<td>tue</td>
<td>J107</td>
<td>11.00:AM - 12.15:AM</td>
</tr>
<tr>
<td>Mun</td>
<td>J107</td>
<td>11.00:AM - 12.15:PM</td>
</tr>
<tr>
<td>CSE 324-CSE(201)</td>
<td>Integrated Design Project 1</td>
<td>212_D4</td>
<td>Fri</td>
<td>J103</td>
<td>02:15:PM - 04:45PM</td>
</tr>
<tr>
<td>CSE 302-CSE(181)</td>
<td>Web Progrmming Lab</td>
<td>213_D11</td>
<td>Tue</td>
<td>L104</td>
<td>02:00:PM - 04:30PM</td>
</tr>
</table>
</div>
</section>
</body>
</html>

Css for all -


And this -
html{
scroll-behavior: smooth;
}
*{
margin: 0px;
padding: 0px;
}
.bennar-contain{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0,
0.5)),url(img/hi.jpj.jpg);
background-size: cover;
height: 100vh;
background-position: center;
position: relative;
}

.header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}

.title {
color: #800000;
font-size: 34px;
font-weight: bold;
margin-bottom: 10px;
}

.student-name,
.department,
.university {
color: #bd5252;
font-size: 20px;
margin: 5px 0;
}

header{
width: 100%;
height: 100px;
background: rgb(243, 241, 116);

display: flex;
justify-content: space-around;
align-items: center;
}
header .logo{
flex: 1 ;
color: #884141;
margin-left: 50px;
text-transform: uppercase;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: calc(100);
letter-spacing: 1.2px;
display: flex;
justify-content: center;
align-items: center;
}
header ul{
flex: 2;
display: flex;
justify-content: space-evenly;
}
header li{
list-style: none;
}
header li a{
text-decoration: wavy;
color: #884141;
font-weight: bold;
letter-spacing: 1.2px;
text-transform: capitalize;
padding: 20px 20px;
border: 1px solid transparent;
transition: .4s;
}
header ul li a:hover{
border: 1px solid rgb(255, 0, 0);
transform: scale(4);
}
header .menu{
font-size: 2.5em;
display: contents;
}

.udaashi{
padding: 210px;
background-image: url(images/anik-bg.jpg);
background-size: cover;
background-attachment: fixed;
position: relative;
}

/* .udaashi:before{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(34, 49, 34, .46);
} */
.udaashi .social-icons{
border-radius: 7px;
position: absolute;
max-width: 290px;
left: 0;
right: 0;
margin: auto;
text-align: center;
transform: translateY(200px);
}

.udaashi .social-icons span{


display: inline-block;
padding: 17px;
font-size: 38px;
background: rgba(189, 221, 189, .45);
border-radius: 3px;
margin: 0 3px;
transition: .34s;
}

.udaashi .social-icons span[class*=youtube]:hover{


background: #B2071D;
}

.udaashi .social-icons span[class*=linkedin]:hover{


background: #0E76A8;
}
.udaashi .social-icons span[class*=instagram]:hover{
background: #8331B4;
}

.text{
width: 100%;
display: flex;
flex-direction: column;
margin-left: 80px;
color: white;
transform: translateY(-300px);
}
.text h1{
margin-top: 430px;
font-family: "Poppins", sans-serif;
font-size: 30px;
text-align: center;
letter-spacing: 1.2px;
line-height: 50px;
font-weight: 100;
margin-bottom:10px;
}
.text h1 span{
font-size: 70px;
font-weight: 700;
color: rgb(255, 196, 4);
}
.text h3{
text-align: center;
font-size: 30px;
font-weight: 100;
}

.aboutes-container{
background-color: rgb(206, 206, 206);
padding-top: 50px;
padding-bottom: 50px;
}
.aboute-herd{
text-align: center;
margin-bottom: 40px;
}
.aboute-herd h1{
font-size: 40px;
font-weight: bold;
letter-spacing: 1.2px;
margin-bottom: 10px;
color: rgb(119, 110, 204);
}
.about-info{
width: 90%;
margin: 0px auto;
display: flex;
flex-direction: column-reverse;
justify-content: center;
align-items: center;
gap: 100px;
}
.aboute-imge{
width: 45%;

}
.aboute-imge img{
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,
0.19);
width: auto;
height: 400px;
}

.about-text{
width: 45%;
}
.about-text h4{
font-size: 30px;
letter-spacing: 1.2px;
margin-bottom: 10px;
color: rgb(119, 110, 204);
}
.about-text p{
font-size: 20px;
letter-spacing: 1.2px;
line-height: 30px;
color: rgb(119, 110, 204);
margin-bottom: 30px;
}
.about-text a{
text-decoration: none;

}
.about-text .mail-btn{
background-color: rgb(119, 110, 204);
padding: 10px 30px;
border: none;
border-radius: 20px;
color: rgb(255, 255, 255);
font-size: 20px;
font-weight: 700;
transform: translate(0.9s);
}
.about-text .mail-btn:hover{
background-color: green;
color: white;
}

.autio-video-info{
width: 60%;
margin: 0px auto;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
gap: 50px;
}
.audio-text{
text-align: center;
color: #7644ff;
}
.audio-text h1{
font-size: 40px;
letter-spacing: 1.2px;
margin-bottom: 0px;
}
.audio-text p{
font-size: 20px;
letter-spacing: 1.2px;
margin-bottom: 0px;
color: #7644ff;
}
.Audio-file{
background-color: rgb(255, 254, 254);
width: 500px;
border-radius: 5px;
margin-top: 40px;
}
.video-text{
text-align: center;
color: #fd4766;
}

.second-video{
margin-top: 40px;
color: #bd5252;
}

.fav-video{
text-align: center;
text-decoration: double;
color: #bd5252;
}

.gub-frame {
text-align: center;
text-decoration: double;
color: #bd5252;
}

.GUB-Photo{
width: 80%;
margin: 0px auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}

.gub-frame img {
border-radius: 5px;

}
.video-text h1{
font-size: 40px;
letter-spacing: 1.2px;
margin-bottom: 0px;
}
.video-text p{
font-size: 20px;
letter-spacing: 1.2px;
margin-bottom: 0px;
}
.video-file{
width: 500px;
border-radius: 5px;
margin-top: 20px;
}

.register-container{
background-color: #cece8ae0;
padding-top: 100px;
padding-bottom: 100px;
}
.list-header{
text-align: center;
}
.list-header h1{
font-size: 50px;
letter-spacing: 1.2px;
color: white;
}
.list-header p{
font-size: 20px;
letter-spacing: 1.2px;
color: rgb(187, 187, 187);
}

.register-list{
width: 80%;
margin: 0px auto;
display: flex;
justify-content: space-between;
align-items: center;

}
.register-list ul{
margin-top: 40px;
}
.register-list Ol{
margin-top: 40px;
}
.register-list li{
font-size: 20px;
letter-spacing: 1.2px;
color: white;
margin-bottom: 20px;
}
.gub-img img{
width: 400px;
height: auto;
border-radius: 5px;
}
.register-container{
background-color: #727202;
}

.routine-container{
background: #ffffe0;
padding-top: 50px;
padding-bottom: 50px;
}

table{
margin-left: auto;
margin-right: auto;
color: #333333;
}
.routine-head{
font-size: 40px;
letter-spacing: 1.0px;
margin-bottom: 10px;
}
.student{
font-size: 30px;
letter-spacing: 1.2px;
margin-bottom: 10px;
}
.cse{
font-size: 20px;
letter-spacing: 1.2px;
margin-bottom: 10px;
}
th{
background-color: #800000;
color: white;
font-size: 30px;
}
td{
text-align: center;
font-size: 20px;
}

PICNIN REG FORM-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Picnic Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}

h1 {
text-align: center;
color: #333;
}
img {
margin-bottom: 20px;
display: block;
}

form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}

input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #45a049;
}
img {
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Picnic Registration Form</h1>
<img
src="ibrahim.jpj.JPG"
height="500px"
width="500px"
alt="Hurry hip hip"
/>
<form>
<label for="name">Student Name</label>
<input type="text" id="name" name="name"
required />

<label for="studentID">Student ID</label>


<input type="text" id="studentID"
name="studentID" required />

<label for="batch">Batch/Year</label>
<input type="text" id="batch" name="batch"
required />

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


<input type="text" id="mobile" name="mobile"
required />

<label for="email">Email Address</label>


<input type="email" id="email" name="email"
required />

<label for="username">Username </label>


<input type="text" id="username"
name="username" required />

<label for="password">Password </label>


<input type="password" id="password"
name="password" required />

<label for="payment">Payment Method</label>


<select id="payment" name="payment"
required>
<option value="">Select Payment
Method</option>
<option value="cash">Cash</option>
<option value="online">Online
Transfer</option>
<option value="online">Bkash</option>
<option value="online">Nagad</option>
<option value="online">Card</option>

<!-- Add more options as needed -->


</select>

<label for="food">Food Preference</label>


<select id="food" name="food" required>
<option value="">Select Food
Preference</option>
<option value="veg">Vegetarian</option>
<option
value="non-veg">Non-Vegetarian</option>
</select>

<label for="tshirt">T-Shirt Size</label>


<select id="tshirt" name="tshirt" required>
<option value="">Select T-Shirt
Size</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
<option value="xl">Extra Large</option>
</select>

<label for="emergencyName">Emergency Contact


Name</label>
<input type="text" id="emergencyName"
name="emergencyName" required />

<label for="specialRequirements">Any Special


Requirements </label>
<textarea id="specialRequirements"
name="specialRequirements"></textarea>

<label>
<input type="checkbox" id="terms"
name="terms" required />
Consent to Terms and Conditions
</label>

<label>
Willingness to Volunteer
<input
type="radio"
id="volunteerYes"
name="volunteer"
value="yes"
required
/>
<label for="volunteerYes">Yes </label>

<input
type="radio"
id="volunteerNo"
name="volunteer"
value="no"
required
/>
<label for="volunteerNo">No</label>
</label>

<label>
Transportation Required
<input
type="radio"
id="transportationYes"
name="transportation"
value="yes"
required
/>
<label for="transportationYes">Yes</label>
<input
type="radio"
id="transportationNo"
name="transportation"
value="no"
required
/>
<label for="transportationNo">No</label>
</label>
<label>
Accommodation Required
<input
type="radio"
id="accommodationYes"
name="accommodation"
value="yes"
required
/>
<label for="accommodationYes">Yes</label>
<input
type="radio"
id="accommodationNo"
name="accommodation"
value="no"
required
/>
<label for="accommodationNo">No</label>
</label>

<label for="comments">Additional
Comments/Queries</label>
<textarea id="comments"
name="comments"></textarea>

<input type="submit" value="Submit" />


</form>
</body>
</html>

CSS-table
/* CSS element Selector */
table {
border-collapse: collapse;
width: 80%;
margin: 0 auto;
animation: fadeIn 1s ease-in-out;
}

/* CSS id Selector */
#mainTable {
background-color: #f2f2f2;
}

/* CSS class Selector */


.header {
background-color: #4CAF50;
color: white;
text-align: center;
}
.schedule {
background-color: #e6e6e6;
text-align: center;
}

/* CSS color */
th, td {
color: #333333;
}

/* CSS Text Color */


.topic {
color: #ff6600;
}

/* Coloring all table data in red */


td {
color: red;
}

/* CSS Border Color */


th, td {
border-color: #ddd;
}

/* CSS Backgrounds */
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}

/* CSS background-color */
th {
background-color: #4CAF50;
color: white;
}

/* CSS Borders */
th, td {
border-style: solid;
}

/* CSS Border Width */


th, td {
border-width: 1px;
}

/* CSS Margin And Padding */


th, td {
padding: 10px;
margin: 5px;
}
/* CSS height And Width */
th, td {
height: 50px;
width: 150px;
}

/* CSS Font */
body {
font-family: Arial, sans-serif;
}

/* CSS Animations */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* Internal class design */


<style>
.internal-class {
font-weight: bold;
text-decoration: underline;
}
</style>

/* External class design */


.external-class {
font-style: italic;
text-transform: uppercase;
}

HTML NORMAL TABLE-

<!DOCTYPE html>
<html lang="javascriptreact">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Table Practice</title>
<link rel="stylesheet" href="desing-css.css"
/>
</head>
<body>
<table border="1" height="0" width="0"
cellpadding="12" cellspacing="3">
<tr>
<th rowspan="3">Day</th>
<strong><th
colspan="3">Seminar</th></strong>
</tr>
<tr>
<strong><th
colspan="2">Schedule</th></strong>
<th rowspan="2">Topic</th>
</tr>
<tr>
<th>Begin</th>

<th>End</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8.00 a.m</td>
<td rowspan="2">5.00 p.m</td>
<td>Python</td>
</tr>
<tr>
<td>Artifial Intilligence and Machinc
Learning</td>
</tr>
<tr>
<td rowspan="3">Tuesday</td>
<td>8.00 a.m</td>
<td>11.00</td>
<td></td>
</tr>
<tr>
<td>11.00 a.m</td>
<td>2.00 p.m</td>
<td rowspan="2">IoT</td>
</tr>
<tr>
<td>2.00 p.m</td>
<td>12.00 p.m</td>
</tr>

<tr>
<td>Wednesday</td>
<td>8:00 a.m</td>
<td>12.00 p.m</td>
<td>Database SQL</td>
</tr>
</table>
</body>
</html>

ANOTHER REGISTRATION FORM BASIC-

Registration Form
—-----------------------------
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="form.css" />
</head>
<body>
<div>
<div class="container">
<h1>Registration Form</h1>
</div>

<form>
<input
type="image"
src="your image.jpg"
height="150"
width="150"
/><br /><br />
<label for="A">Student Name:</label
><input
type="text"
id="A"
name="fname"
size="20"
value="Anik hasan"
/><br /><br />
<label for="B">Student ID: </label
><input
type="number"
id="B"
size="20"
placeholder="Enter a number"
/><br /><br />
<label for="C">Email: </label
><input
type="email"
id="C"
size="20"
placeholder="Enter Your Email"
required
/><br /><br />
<label for="D">Username: </label
><input
type="text"
id="D"
size="20"
maxlength="15"
placeholder="Enter UserName"
required
/>
<br /><br />
<label for="E">Password: </label
><input
type="password"
id="E"
size="20"
placeholder="Enter Password"
/><br /><br />
<label for="F">Date of Birth: </label
><input
type="date"
id="F"
size="20"
placeholder="Enter Date of Birth"
/><br />
Gender: <br />
<input type="radio" name="gender"
value="M" />Male<br />
<input type="radio" name="gender"
value="F" />Female<br />
Language: <br />
<input type="checkbox" name="language"
value="M" checked />Bengali<br />
<input type="checkbox" name="language"
value="F" />English<br />
Country: <br />
<select name="country">
<option>(Please select your
Country)</option>
<option value="B">Bangladesh</option>
<option value="I">India</option></select
><br /><br />
<label for="G">Address:</label><br />
<textarea
rows="5"
cols="30"
id="G"
placeholder="Enter Your Present Address"
></textarea
><br /><br />
Attach your Documents:<br />
<input type="file" name="Documents" /><br
/><br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</div>
</body>
</html>

—-----------------------------------------------
CSS DSING- FORM REAL
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #c0c0c0;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h1 {
text-align: center;
margin-top: 0;
}

form {
display: flex;
flex-direction: column;
}

label {
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}

textarea {
resize: vertical;
}

input[type="submit"],
input[type="reset"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}

input[type="reset"] {
background-color: #f44336;
margin-left: 10px;
}

SQ.
1.

1.a
<!DOCTYPE html>
<html>
<head>
<title>Favorite Hobbies</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 20px;
}
li {
margin-bottom: 10px;
color: #4CAF50;
font-family: Arial, sans-serif;
font-style: italic;
}

li::before {
content: "\2665"; /* Unicode character for a heart */
color: #ff0000;
font-weight: bold;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>My Favorite Hobbies</h1>
<ul>
<li>Reading books</li>
<li>Playing sports</li>
<li>Hiking</li>
<li>Photography</li>
<li>Traveling</li>
</ul>
</body>
</html>

1.b-

<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
<style>
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button>Click me!</button>
</body>
</html>

1.c
<!DOCTYPE html>
<html>
<head>
<title>Article Example</title>
<style>
h1 {
text-align: center;
}

h2 {
font-size: 20px;
color: #4CAF50;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<p>Paragraph 1 under subheading 1.</p>
<p>Paragraph 2 under subheading 1.</p>
<p>Paragraph 3 under subheading 1.</p>
<h2>Subheading 2</h2>
<p>Paragraph 1 under subheading 2.</p>
<p>Paragraph 2 under subheading 2.</p>
<p>Paragraph 3 under subheading 2.</p>
</body>
</html>

2(a) Create an HTML form that includes input fields for the initial term, last term, and
the increment of an arithmetic series. Upon clicking a button, use JavaScript to read
these values, calculate the sum of the arithmetic series, and display the result on the
HTML page.
—----------------------
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Series Sum Calculator</title>
</head>
<body>
<h1>Arithmetic Series Sum Calculator</h1>
<label for="initialTerm">Initial Term:</label>
<input type="number" id="initialTerm" required>
<br>
<label for="lastTerm">Last Term:</label>
<input type="number" id="lastTerm" required>
<br>
<label for="increment">Increment:</label>
<input type="number" id="increment" required>
<br>
<button onclick="calculateSum()">Calculate Sum</button>
<p id="result"></p>

<script>
function calculateSum() {
const initialTerm = parseInt(document.getElementById("initialTerm").value);
const lastTerm = parseInt(document.getElementById("lastTerm").value);
const increment = parseInt(document.getElementById("increment").value);

const n = (lastTerm - initialTerm) / increment + 1;


const sum = (n / 2) * (initialTerm + lastTerm);

document.getElementById("result").innerHTML = `The sum of the arithmetic series


is: ${sum}`;
}
</script>
</body>
</html>

3a-Insert-
<?php
// Database connection details
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$database = "your_database";

// Create a new connection


$conn = new mysqli($servername, $username, $password, $database);

// Check the connection


if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Get the form data


$name = $_POST['name'];
$email = $_POST['email'];
$age = $_POST['age'];

// Prepare and bind the SQL statement


$stmt = $conn->prepare("INSERT INTO students (name, email, age) VALUES (?, ?, ?)");
$stmt->bind_param("ssi", $name, $email, $age);

// Execute the statement


if ($stmt->execute()) {
echo "New record created successfully";
} else {
echo "Error: " . $stmt->error;
}

// Close the statement and connection


$stmt->close();
$conn->close();
?>

3b-
<?php
// Database connection details
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$database = "your_database";

// Create a new connection


$conn = new mysqli($servername, $username, $password, $database);
// Check the connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Retrieve the student data


$sql = "SELECT id, name, email, age FROM students";
$result = $conn->query($sql);

// Check if there are any results


if ($result->num_rows > 0) {
// Start the unordered list
echo "<ul>";

// Loop through each row and display the data


while ($row = $result->fetch_assoc()) {
echo "<li>ID: " . $row['id'] . ", Name: " . $row['name'] . ", Email: " . $row['email'] . ", Age: " .
$row['age'] . "</li>";
}

// End the unordered list


echo "</ul>";
} else {
echo "No students found";
}

// Close the connection


$conn->close();
?>

Ajax. on click
CRUD stands for Create, Read, Update, and Delete. These are the four basic operations
performed on a database, and PHP is commonly used to implement these operations in web
applications. Here's an overview of how CRUD operations can be implemented using
PHP<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>

<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadDoc()">Get my CD collection</button>


<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML += table;
}
</script>

</body>
</html>
.xml

<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Stax Records</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1968</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>

Now onload-
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body onload="loadDoc()">
<h1>The XMLHttpRequest Object</h1>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var
table="<tr><th>Country</th><th>Company</th><th>Price</th
><th>Year</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +

x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].n
odeValue +
"</td><td>" +

x[i].getElementsByTagName("COMPANY")[0].childNodes[0].n
odeValue +
"</td><td>" +

x[i].getElementsByTagName("PRICE")[0].childNodes[0].node
Value +
"</td><td>" +

x[i].getElementsByTagName("YEAR")[0].childNodes[0].node
Value +
"</td></tr>";
}
document.getElementById("demo").innerHTML += table;
}
</script>
</body>
</html>

You might also like