TEXAS INTERNATIONAL SECONDARY SCHOOL

Mitrapark, Chabahil

Report on Lab-works of Web-Technology

Submitted by: Submitted to:

Name: Bipin Dongol Department of Computer Science
Registration No.: 793270770132 Texas Int’l Secondary School
 TEXAS INTERNATIONAL SECONDARY SCHOOL
Mitrapark, Chabahil

We certify that we have read this report work, and, in our opinion, it is satisfactory on scope and
quality as a report for lab assessment of Computer Science of Grade-XII.

___________________________ ____________________________
External Examiner Internal Examiner
 Acknowledgement

I would like to express my sincere thanks to our respected teacher/instructor/lecturer Mr. Manoj
Bhattarai for his inspiring commitment and cooperation in conducting lab assessment. This
report in this form is the yield of his inspiring and continuous support and co-operation.

I would also like to express my thankfulness to the Department of Computer Science, Texas Int’l
S.S. for providing workspace, laboratories and all facilities required to complete all lab
assessments. I would also like to thank my friends for their continuous help and guidance.
 Table of Contents

INTRODUCTION...............................................................................................................................i

OBJECTIVE...................................................................................................................................... ii

PROGRAMS................................................................................................................................... iii

CONCLUSION..................................................................................................................................v
 INTRODUCTION

Web technology refers to the collection of technologies, tools, and programming languages used
to create, develop, and maintain websites and web applications. JavaScript and PHP are both
popular programming languages used in web technology for different purposes. JavaScript is a
popular scripting language that is used extensively in web technology to create interactive and
dynamic web pages. JavaScript is primarily used on the client-side of web development,
allowing web developers to add interactivity and dynamic functionality to web pages. It is a
lightweight, interpreted language that can be embedded in HTML code to manipulate the
Document Object Model (DOM) and create interactive user interfaces. With the help of various
JavaScript frameworks and libraries like React, Vue, and Angular, developers can create highly
responsive, fast-loading web applications.

On the other hand, PHP (Hypertext Preprocessor) is a widely-used programming language that is
specifically designed for web development. PHP is primarily used on the server-side of web
development, allowing web developers to create dynamic web pages, handle user input, and
interact with databases. PHP is a server-side scripting language that can be used to generate
HTML code dynamically and interact with web servers and databases to create customized web
pages. It is often used in combination with MySQL, a popular open-source relational database, to
build dynamic web applications.

In summary, JavaScript and PHP are both important programming languages in web technology,
but they serve different purposes. JavaScript is used primarily for client-side programming, while
PHP is used for server-side programming. By combining both languages in web development,
web developers can create highly interactive, dynamic, and responsive web applications that
enhance the user experience.

i
 OBJECTIVE

The objective of preparing a lab report of Web-Technology is to demonstrate the writer’s

understanding and proficiency in the language. The report showcases the writer’s ability to write
efficient and effective code. The report also demonstrates the writer’s adherence to coding
standards and best practices, such as proper code formatting, commenting, and error handling.

Furthermore, the report aims to provide insight into the writer’s problem-solving abilities and
demonstrate the ability to implement solutions to real-world problems using JavaScript and PHP.
This may involve analyzing and optimizing existing code, identifying potential improvements,
and evaluating the performance of the programs. The lab report also includes a discussion of the
limitations and potential applications of the implemented solutions, as well as future directions
for research and development in the field of Web-Technology. Overall, the objective of preparing
a lab report on Web-Technology is to showcase the writer’s proficiency in the language and
problem-solving abilities, as well as to provide a comprehensive analysis of the implemented
solutions and potential for further development.

ii
 PROGRAMS

JavaScript

Program No. Programs Page no.

1. WAP taking inputs from and displaying result in form to perform 1

following activities using JS.

a. To find greatest among three numbers. 2

b. To display day based on the input number provided. 2

c. To find factorial of any number n. 3

2. Create a button that changes a color from Blue to Green while 5

clicking it.

3. Create a shape shifter button, clicking on which changes a triangle to 7

a rectangle.

Create two input fields to take two numbers as inputs and display the
4. sum of the number in another form field while clicking the ADD 10
button.

5. Create a simple calculator using JS. 12

6. What is JQuery. Validate a simple registration form using JQuery. 14

7. Create a multi-player Tic-Tac-Toe game using JS. 17

iii
PHP

Program No. Programs Page no.

8. WAP taking inputs from and displaying result in form to perform 34

following activities using JS.

9. WAP to check if 407 is armstrong or not. 35

10. Write a php code for the following: 36

a. Create a connection to MYSQL database. 36

b. To create a database named texasplustwo. 37

c. Create a table named TexasStudent inside texasplustwo database. 38

Include the fields no, name, address and grade.

d. Insert a set of data in TexasStudent table. 40

e. Fetch the number of rows of TexasStudent table. 42

iv
1. WAP taking inputs from and displaying result in form to perform following activities
using JS.
a. To find greatest among three numbers.
b. To display day based on the input number provided.
c. To find factorial of any number n.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Activities</title>
</head>
<body>
<h1>JavaScript Activities</h1>
<form>
<label for="num1">Enter Number 1:</label>
<input type="number" id="num1" name="num1"><br>
<label for="num2">Enter Number 2:</label>
<input type="number" id="num2" name="num2"><br>
<label for="num3">Enter Number 3:</label>
<input type="number" id="num3" name="num3"><br>
<button type="button" onclick="findGreatest()">Find Greatest
Number</button><br><br>
<label for="day">Enter a Number between 1-7:</label>
<input type="number" id="day" name="day"><br>
<button type="button" onclick="findDay()">Find
Day</button><br><br>
<label for="factorial">Enter a Number:</label>
<input type="number" id="factorial" name="factorial"><br>
<button type="button" onclick="findFactorial()">Find
Factorial</button><br><br>
</form>
<script>

1
// Function to find the greatest among three numbers
function findGreatest() {
let num1 = parseInt(document.getElementById("num1").value);
let num2 = parseInt(document.getElementById("num2").value);
let num3 = parseInt(document.getElementById("num3").value);
let greatest = num1;
if(num2 > greatest) {
greatest = num2;
}
if(num3 > greatest) {
greatest = num3;
}
alert("The greatest number is " + greatest);
}
// Function to find the day based on the input number provided
function findDay() {
let day = parseInt(document.getElementById("day").value);
switch(day) {
case 1:
alert("Monday");
break;
case 2:
alert("Tuesday");
break;
case 3:
alert("Wednesday");
break;
case 4:
alert("Thursday");

2
 break;
case 5:
alert("Friday");
break;
case 6:
alert("Saturday");
break;
case 7:
alert("Sunday");
break;
default:
alert("Invalid Input");
}
}
// Function to find the factorial of a number
function findFactorial() {
let n = parseInt(document.getElementById("factorial").value);
let factorial = 1;
for(let i=1; i<=n; i++) {
factorial *= i;
}
alert("The factorial of " + n + " is " + factorial);
}
</script>
</body>
</html>

3
4
2. Create a button that changes a color from Blue to Green while clicking it.
<!DOCTYPE html>
<html>
<head>
<title>Button Color Change</title>
</head>
<body>
<h2>Here is the example of simple click event in
Javascript.</h2>
<button id="myButton" onclick="changeColor()">Click
Me</button>
<script>
// Function to change the button color from blue to green
function changeColor() {
var myButton = document.getElementById("myButton");
var color = myButton.style.backgroundColor;
if(color === "blue") {
myButton.style.backgroundColor = "green";
}
else {
myButton.style.backgroundColor = "blue";
}
}
</script>
</body>
</html>

5
6
3. Create a shape shifter button, clicking on which changes a triangle to a rectangle.
<!DOCTYPE html>
<html>
<head>
<title>Shape Shifter Button</title>
<style>
#myCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<br>
<button onclick="changeShape()">Shape Shifter</button>
<script>
// Function to draw a triangle on the canvas
function drawTriangle() {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.lineTo(150, 50);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();

7
 }
// Function to draw a rectangle on the canvas
function drawRectangle() {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 200, 100);
}
// Function to change the shape from triangle to rectangle and
vice versa
function changeShape() {
let button = document.querySelector("button");
if(button.innerHTML === "Shape Shifter") {
button.innerHTML = "Back to Triangle";
drawRectangle();
}
else {
button.innerHTML = "Shape Shifter";
drawTriangle();
}
}
// Draw the initial triangle on page load
window.onload = function() {
drawTriangle();
};
</script>
</body>
</html>

8
9
4. Create two input fields to take two numbers as inputs and display the sum of the
number in another form field while clicking the ADD button.
<!DOCTYPE html>
<html>
<head>
<title>Addition of Two Numbers</title>
</head>
<body>
<form>
<label for="num1">Number 1:</label>
<input type="number" id="num1" name="num1"><br><br>
<label for="num2">Number 2:</label>
<input type="number" id="num2" name="num2"><br><br>
<button type="button" onclick="add()">ADD</button><br><br>
<label for="result">Result:</label>
<input type="number" id="result" name="result" readonly>
</form>
<script>
// Function to add the numbers and display the result
function add() {
let num1 = Number(document.getElementById("num1").value);
let num2 = Number(document.getElementById("num2").value);
let result = document.getElementById("result");
result.value = num1 + num2;
}
</script>
</body>
</html>

10
11
5. Create a simple calculator using JS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
</head>
<body>
<h1>Simple Calculator</h1>
<label>Enter first number:</label>
<input type="text" id="num1"><br><br>
<label>Enter second number:</label>
<input type="text" id="num2"><br><br>
<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>
<button onclick="multiply()">Multiply</button>
<button onclick="divide()">Divide</button><br><br>
<label>Result:</label>
<input type="text" id="result" readonly>
<script>
function add() {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let result = num1 + num2;
document.getElementById("result").value = result;
}
function subtract() {
let num1 = parseFloat(document.getElementById("num1").value);

12
 let num2 = parseFloat(document.getElementById("num2").value);
let result = num1 - num2;
document.getElementById("result").value = result;
}
function multiply() {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let result = num1 * num2;
document.getElementById("result").value = result;
}
function divide() {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let result = num1 / num2;
document.getElementById("result").value = result;
}
</script>
</body>
</html>

13
6. What is JQuery. Validate a simple registration form using JQuery.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script src="https://code.jquery.com/jquery-
3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#submit-btn").click(function() {
// Validate Name
if ($("#name").val() === "") {
alert("your input field is empty.");
return false;
}
// Validate Email
if ($("#email").val() === "") {
alert("Please enter your email.");
return false;
}
// Validate Password
if ($("#password").val() === "") {
alert("Please enter your password.");
return false;
}
// Validate Confirm Password
if ($("#confirm-password").val() === "") {
alert("Please confirm your password.");
return false;

14
 }
if ($("#password").val() !== $("#confirm-password").val()) {
alert("Passwords do not match.");
return false;
}
// Validate Gender
if (!$("input[name='gender']:checked").val()) {
alert("Please select your gender.");
return false;
}
// Form submission
alert("Registration successful!");
return true;
});
});
</script>
</head>
<body>
<h2>Registration Form</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-
password"><br><br>

15
 <label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">Male
<input type="radio" id="female" name="gender"
value="female">Female<br><br>
<label for="agreement">I agree to the terms and
conditions:</label>
<input type="checkbox" id="agreement" name="agreement"><br><br>
<button type="button" id="submit-btn">Submit</button>
<button type="reset" id="submit-btn">reset</button>
</form>
</body>
</html>

16
7. Create a multi-player Tic-Tac-Toe game using JS.
// HTML file (index.html)
<!DOCTYPE html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- CSS file Included -->
<link rel="stylesheet"
type="text/css" href="tic.css">
<!-- JavaScript file included -->
<script src="tic.js"></script>
</head>
<body>
<div id="main">
<h1>TIC TAC TOE</h1>
<!-- Game Instructions -->
<p id="ins">Game starts by just Tap on
box<br><br>First Player starts as
<b>Player X</b><br>And<br>Second
Player as <b>Player 0</b>
</p>
<br><br>
<!-- 3*3 grid of Boxes -->
<input type="text" id="b1" onclick=
"myfunc_3(); myfunc();" readonly>
<input type="text" id="b2" onclick=
"myfunc_4(); myfunc();" readonly>
<input type="text" id="b3" onclick=

17
 "myfunc_5(); myfunc();" readonly><br><br>
<input type="text" id="b4" onclick=
"myfunc_6(); myfunc();" readonly>
<input type="text" id="b5" onclick=
"myfunc_7(); myfunc();" readonly>
<input type="text" id="b6" onclick=
"myfunc_8(); myfunc();" readonly><br><br>
<input type="text" id="b7" onclick=
"myfunc_9(); myfunc();" readonly>
<input type="text" id="b8" onclick=
"myfunc_10();myfunc();" readonly>
<input type="text" id="b9" onclick=
"myfunc_11();myfunc();" readonly>
<!-- Grid end here --> <br><br><br>
<!-- Button to reset game -->
<button id="but" onclick="myfunc_2()">
RESET
</button><br><br>
<!-- Space to show player turn -->
<p id="print"></p>
</div>
</body>
</html>
>> CSS file (tic.css)
/* CSS Code */
/* Heading */
h1 {
color: orangered;
font-size: 45px;

18
}
/* 3*3 Grid */
#b1, #b2, #b3, #b4, #b5,
#b6, #b7, #b8, #b9 {
width: 80px;
height: 52px;
margin: auto;
border: 1px solid gray;
border-radius: 6px;
font-size: 30px;
text-align: center;
}
/* Reset Button */
#but {
box-sizing: border-box;
width: 95px;
height: 40px;
border: 1px solid dodgerblue;
margin: auto;
border-radius: 4px;
font-family: Verdana,
Geneva, Tahoma, sans-serif;
background-color: dodgerblue;
color: white;
font-size: 20px;
cursor: pointer;
}
/* Player turn space */
#print {

19
 font-family: Verdana,
Geneva, Tahoma, sans-serif;
color: dodgerblue;
font-size: 20px;
}
/* Main Container */
#main {
text-align: center;
}
/* Game Instruction Text */
#ins {
font-family: Verdana,
Geneva, Tahoma, sans-serif;
color: dodgerblue;
font-size: 17px;
}
Javascript file(tic.js)
// Function called whenever user tab on any box
function myfunc() {
// Setting DOM to all boxes or input field
var b1, b2, b3, b4, b5, b6, b7, b8, b9;
b1 = document.getElementById("b1").value;
b2 = document.getElementById("b2").value;
b3 = document.getElementById("b3").value;
b4 = document.getElementById("b4").value;
b5 = document.getElementById("b5").value;
b6 = document.getElementById("b6").value;
b7 = document.getElementById("b7").value;
b8 = document.getElementById("b8").value;

20
b9 = document.getElementById("b9").value;
// Checking if Player X won or not and after
// that disabled all the other fields
if ((b1 == 'x' || b1 == 'X') && (b2 == 'x' ||
b2 == 'X') && (b3 == 'x' || b3 == 'X')) {
document.getElementById('print')
.innerHTML = "Player X won";
document.getElementById("b4").disabled = true;
document.getElementById("b5").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b8").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player X won');
}
else if ((b1 == 'x' || b1 == 'X') && (b4 == 'x' ||
b4 == 'X') && (b7 == 'x' || b7 == 'X')) {
document.getElementById('print')
.innerHTML = "Player X won";
document.getElementById("b2").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b5").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b8").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player X won');
}
else if ((b7 == 'x' || b7 == 'X') && (b8 == 'x' ||
b8 == 'X') && (b9 == 'x' || b9 == 'X')) {

21
document.getElementById('print')
.innerHTML = "Player X won";
document.getElementById("b1").disabled = true;
document.getElementById("b2").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b4").disabled = true;
document.getElementById("b5").disabled = true;
document.getElementById("b6").disabled = true;
window.alert('Player X won');
}
else if ((b3 == 'x' || b3 == 'X') && (b6 == 'x' ||
b6 == 'X') && (b9 == 'x' || b9 == 'X')) {
document.getElementById('print')
.innerHTML = "Player X won";
document.getElementById("b1").disabled = true;
document.getElementById("b2").disabled = true;
document.getElementById("b4").disabled = true;
document.getElementById("b5").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b8").disabled = true;
window.alert('Player X won');
}
else if ((b1 == 'x' || b1 == 'X') && (b5 == 'x' ||
b5 == 'X') && (b9 == 'x' || b9 == 'X')) {
document.getElementById('print')
.innerHTML = "Player X won";
document.getElementById("b2").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b4").disabled = true;

22
document.getElementById("b6").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b8").disabled = true;
window.alert('Player X won');
}
else if ((b3 == 'x' || b3 == 'X') && (b5 == 'x' ||
b5 == 'X') && (b7 == 'x' || b7 == 'X')) {
document.getElementById('print')
.innerHTML = "Player X won";
document.getElementById("b1").disabled = true;
document.getElementById("b2").disabled = true;
document.getElementById("b4").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b8").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player X won');
}
else if ((b2 == 'x' || b2 == 'X') && (b5 == 'x' ||
b5 == 'X') && (b8 == 'x' || b8 == 'X')) {
document.getElementById('print')
.innerHTML = "Player X won";
document.getElementById("b1").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b4").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player X won');
}

23
else if ((b4 == 'x' || b4 == 'X') && (b5 == 'x' ||
b5 == 'X') && (b6 == 'x' || b6 == 'X')) {
document.getElementById('print')
.innerHTML = "Player X won";
document.getElementById("b1").disabled = true;
document.getElementById("b2").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b8").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player X won');
}
// Checking of Player X finish
// Checking for Player 0 starts, Is player 0 won or
// not and after that disabled all the other fields
else if ((b1 == '0' || b1 == '0') && (b2 == '0' ||
b2 == '0') && (b3 == '0' || b3 == '0')) {
document.getElementById('print')
.innerHTML = "Player 0 won";
document.getElementById("b4").disabled = true;
document.getElementById("b5").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b8").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player 0 won');
}
else if ((b1 == '0' || b1 == '0') && (b4 == '0' ||
b4 == '0') && (b7 == '0' || b7 == '0')) {

24
document.getElementById('print')
.innerHTML = "Player 0 won";
document.getElementById("b2").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b5").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b8").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player 0 won');
}
else if ((b7 == '0' || b7 == '0') && (b8 == '0' ||
b8 == '0') && (b9 == '0' || b9 == '0')) {
document.getElementById('print')
.innerHTML = "Player 0 won";
document.getElementById("b1").disabled = true;
document.getElementById("b2").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b4").disabled = true;
document.getElementById("b5").disabled = true;
document.getElementById("b6").disabled = true;
window.alert('Player 0 won');
}
else if ((b3 == '0' || b3 == '0') && (b6 == '0' ||
b6 == '0') && (b9 == '0' || b9 == '0')) {
document.getElementById('print')
.innerHTML = "Player 0 won";
document.getElementById("b1").disabled = true;
document.getElementById("b2").disabled = true;
document.getElementById("b4").disabled = true;

25
document.getElementById("b5").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b8").disabled = true;
window.alert('Player 0 won');
}
else if ((b1 == '0' || b1 == '0') && (b5 == '0' ||
b5 == '0') && (b9 == '0' || b9 == '0')) {
document.getElementById('print')
.innerHTML = "Player 0 won";
document.getElementById("b2").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b4").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b8").disabled = true;
window.alert('Player 0 won');
}
else if ((b3 == '0' || b3 == '0') && (b5 == '0' ||
b5 == '0') && (b7 == '0' || b7 == '0')) {
document.getElementById('print')
.innerHTML = "Player 0 won";
document.getElementById("b1").disabled = true;
document.getElementById("b2").disabled = true;
document.getElementById("b4").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b8").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player 0 won');
}

26
else if ((b2 == '0' || b2 == '0') && (b5 == '0' ||
b5 == '0') && (b8 == '0' || b8 == '0')) {
document.getElementById('print')
.innerHTML = "Player 0 won";
document.getElementById("b1").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b4").disabled = true;
document.getElementById("b6").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player 0 won');
}
else if ((b4 == '0' || b4 == '0') && (b5 == '0' ||
b5 == '0') && (b6 == '0' || b6 == '0')) {
document.getElementById('print')
.innerHTML = "Player 0 won";
document.getElementById("b1").disabled = true;
document.getElementById("b2").disabled = true;
document.getElementById("b3").disabled = true;
document.getElementById("b7").disabled = true;
document.getElementById("b8").disabled = true;
document.getElementById("b9").disabled = true;
window.alert('Player 0 won');
}
// Checking of Player 0 finish
// Here, Checking about Tie
else if ((b1 == 'X' || b1 == '0') && (b2 == 'X'
|| b2 == '0') && (b3 == 'X' || b3 == '0') &&
(b4 == 'X' || b4 == '0') && (b5 == 'X' ||

27
 b5 == '0') && (b6 == 'X' || b6 == '0') &&
(b7 == 'X' || b7 == '0') && (b8 == 'X' ||
b8 == '0') && (b9 == 'X' || b9 == '0')) {
document.getElementById('print')
.innerHTML = "Match Tie";
window.alert('Match Tie');
}
else {
// Here, Printing Result
if (flag == 1) {
document.getElementById('print')
.innerHTML = "Player X Turn";
}
else {
document.getElementById('print')
.innerHTML = "Player 0 Turn";
}
}
}
// Function to reset game
function myfunc_2() {
location.reload();
document.getElementById('b1').value = '';
document.getElementById("b2").value = '';
document.getElementById("b3").value = '';
document.getElementById("b4").value = '';
document.getElementById("b5").value = '';
document.getElementById("b6").value = '';
document.getElementById("b7").value = '';

28
 document.getElementById("b8").value = '';
document.getElementById("b9").value = '';
}
// Here onwards, functions check turn of the player
// and put accordingly value X or 0
flag = 1;
function myfunc_3() {
if (flag == 1) {
document.getElementById("b1").value = "X";
document.getElementById("b1").disabled = true;
flag = 0;
}
else {
document.getElementById("b1").value = "0";
document.getElementById("b1").disabled = true;
flag = 1;
}
}
function myfunc_4() {
if (flag == 1) {
document.getElementById("b2").value = "X";
document.getElementById("b2").disabled = true;
flag = 0;
}
else {
document.getElementById("b2").value = "0";
document.getElementById("b2").disabled = true;
flag = 1;
}

29
}
function myfunc_5() {
if (flag == 1) {
document.getElementById("b3").value = "X";
document.getElementById("b3").disabled = true;
flag = 0;
}
else {
document.getElementById("b3").value = "0";
document.getElementById("b3").disabled = true;
flag = 1;
}
}
function myfunc_6() {
if (flag == 1) {
document.getElementById("b4").value = "X";
document.getElementById("b4").disabled = true;
flag = 0;
}
else {
document.getElementById("b4").value = "0";
document.getElementById("b4").disabled = true;
flag = 1;
}
}
function myfunc_7() {
if (flag == 1) {
document.getElementById("b5").value = "X";
document.getElementById("b5").disabled = true;

30
 flag = 0;
}
else {
document.getElementById("b5").value = "0";
document.getElementById("b5").disabled = true;
flag = 1;
}
}
function myfunc_8() {
if (flag == 1) {
document.getElementById("b6").value = "X";
document.getElementById("b6").disabled = true;
flag = 0;
}
else {
document.getElementById("b6").value = "0";
document.getElementById("b6").disabled = true;
flag = 1;
}
}
function myfunc_9() {
if (flag == 1) {
document.getElementById("b7").value = "X";
document.getElementById("b7").disabled = true;
flag = 0;
}
else {
document.getElementById("b7").value = "0";
document.getElementById("b7").disabled = true;

31
 flag = 1;
}
}
function myfunc_10() {
if (flag == 1) {
document.getElementById("b8").value = "X";
document.getElementById("b8").disabled = true;
flag = 0;
}
else {
document.getElementById("b8").value = "0";
document.getElementById("b8").disabled = true;
flag = 1;
}
}
function myfunc_11() {
if (flag == 1) {
document.getElementById("b9").value = "X";
document.getElementById("b9").disabled = true;
flag = 0;
}
else {
document.getElementById("b9").value = "0";
document.getElementById("b9").disabled = true;
flag = 1;
}
}

32
8. WAP to find factorial of 4.

SOURCE CODE:
<?php
$num=4;
$factorial=1;
for($x=$num;$x>=1;$x--)
{
$factorial=$factorial*$x;
}
echo"Factorial of $num is $factorial";
?>

OUTPUT:

33
9. WAP to check if 407 is armstrong or not.

SOURCE CODE:
<?php
$num=407;
$total=0;
$x=$num;
while($x!=0)
{
$rem=$x%10;
$total=$total+$rem*$rem*$rem;
$x=$x/10;
}
if($num==$total)
{
echo "Yes it is an Armstrong number";
}
else
{
echo "No it is not an armstrong number";
}
?>

OUTPUT:

34
10. Write a php code for the following:
a. Create a connection to MYSQL database.

SOURCE CODE:
<?php
echo "Now we are connecting database";
echo"<br>";
$servername = "localhost";
$username = "root";
$password = "";
$conn=mysqli_connect($servername, $username, $password);
if(!$conn) {
die("Unable to connect".mysqli_connect_error());
}
echo"Connected successfully";
?>

OUTPUT:

35
b. To create a database named texasplustwo.

SOURCE CODE:
<?php
echo"<br>";
$servername = "localhost";
$username = "root";
$password = "";
$conn=mysqli_connect($servername, $username, $password); if(!
$conn) {
die("Unable to connect".mysqli_connect_error());
}
else {
echo"Connected successfully";
}
$sql = “CREATE DATABASE texasplustwo”; ?>

OUTPUT:

36
c. Create a table named TexasStudent inside texasplustwo database. Include the fields no,
name, address and grade.

SOURCE CODE:
<html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database ="texasplustwo";
$conn=mysqli_connect($servername, $username, $password,
$database);
if(!$conn) {
die("Unable to connect".mysqli_connect_error());
}
else {
echo"Connected successfully";
}
$sql = "CREATE TABLE `TexasStudent` ( `Sno.` INT(11) NOT NULL
AUTO_INCREMENT , `Name` VARCHAR(20) NOT NULL , `Address`
VARCHAR(20) NOT NULL , `Grade` INT(11) NOT NULL , PRIMARY KEY
(`Sno.`)) ";
$result = mysqli_query($conn, $sql);
if ($result ) {
echo "The table is created successfully<br>";
}
else {
echo "The table was not created because of this
erroe :".mysqli_error($conn);
}
?>

37
OUTPUT:

38
d. Insert a set of data in TexasStudent table.

SOURCE CODE:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database ="texasplustwo";
$conn=mysqli_connect($servername, $username, $password,
$database); if(!$conn) {
die("Unable to connect".mysqli_connect_error());
}
else {
echo"Connected successfully";
}
$sql ="INSERT INTO `TexasStudent` (`Sno.`, `Name`, `Address`,
`Grade`) VALUES ('2', 'harry', 'Kathmandu', '12')";
$result = mysqli_query($conn, $sql);
if ($result ) {
echo "Data is inserted successfully<br>";
}
else {
echo "Data is not inserted because of the
error :".mysqli_error($conn);
}
?>
</html>

39
OUTPUT:

40
e. Fetch the number of rows of TexasStudent table.

SOURCE CODE:
<html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database ="texasplustwo";
$conn=mysqli_connect($servername, $username, $password,
$database); if(!$conn) {
die("Unable to connect".mysqli_connect_error());
}
else {
echo"Connected successfully <br>";
}
$sql ="SELECT * FROM `TexasStudent` "; $result =
mysqli_query($conn, $sql); echo mysqli_num_rows($result); ?>
</html>

OUTPUT:

41
 CONCLUSION

In conclusion, this lab report of Web-technology has provided a valuable opportunity to apply the
theoretical knowledge gained in the classroom to practical programming tasks. Through this lab,
we have learned how to write JavaScript and PHP programs to solve various programming
problems, ranging from simple input/output operations to complex data structures and
algorithms.

Overall, this lab has helped us to develop a deeper understanding of Web-Technology and its
potential for solving real-world problems. It has also provided us with valuable hands-on
experience, which will be useful in future programming endeavors.