Ilovepdf Merged PDF

Name : Zala Meet Enrollment no : 200420107097 Date : 11-04-2022
Subject code : 3160713 Subject : Web programming
CSS Assignment
(1) Design Login and Registration Page using CSS.
Login page:
CODE:
<html>
<head>
<title>Login page</title>
<style>
.hey1 {
/* align="center"; */height:
auto;
width: 350px;
margin-left: 150px;
margin-top: 100px;
background-color: rgb(221, 242, 247);
font-size: 20px;
}
.hey2 {
background-color: aqua;
border: 2px solid black;
height: 25px;
color: black;
padding-top: 5px;
}
.hey2:hover {
}
.hey3 {
font-size: 15px;
}
.hey4 {
SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 1|Page


padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
.hey5 {
height: 30px;
width: 100px;
margin-left: 10px;
}
.hey6 {
float: right;
padding-top: 5px;
input[type=text],input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<form class="hey1">
<fieldset>
<legend align="center">Login page</legend>
<div>Enter user name:<br></div>

<input type="text" placeholder="User name"></input><br><br>
<div>Enter Password:<br></div>
<input type="password" placeholder="Password"><br><br>

<div class="hey2" align="center">Login</div><br>

<div class="hey3">
<input type="checkbox" checked>Remember Me<br><br>
</div>
<div class="hey4">
<button class="hey5">cancle</button>
<b class="hey6" align="right">
<a href="hey.html">Forgot Password?</a></b>
</div>
</fieldset>
</form>
</body>
</html>
Output:

Registration page:
<html>
<head>
<title>Login page</title>
<style>
.hey1 {
/* align="center"; */height:
auto;
width: 350px;
margin-left: 150px;
margin-top: 100px;
font-size: 20px;
}
.hey2 {
height: 25px;
color: black;
padding-top: 5px;
}
.hey2:hover {
}
.hey3 {
font-size: 15px;
}
.hey4 {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
.hey5 {
height: 30px;
width: 100px;
margin-left: 10px;
}
.hey6 {
float: right;
padding-top: 12px;
font-size: 15px;
input[type=text],input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<form class="hey1">
<fieldset>
<legend align="center">Registration page</legend>
<div>Enter user name:<br></div>

<input type="text" placeholder="User name"></input><br><br>
<div>Enter Password:<br></div>
<input type="password" placeholder="Password"><br><br>
<div>Confirm Password:<br></div>
<input type="password" placeholder="Confirm Password"><br><br>
<div class="hey2" align="center">Register</div><br>

<div class="hey3">
<input type="checkbox" checked>Accept terms & condition<br><br>
</div>
<div class="hey4">
<button class="hey5">cancle</button>
<b class="hey6" align="right">
<a href="hey.html">Back to login page</a></b>
</div>
</fieldset>
</form>
</body>
</html>
Output:

(2) Design Our Department Intranet Home page using CSS. (Use
CSSGradients and Responsive Images)
CODE:
CO-intra.html:
<!DOCTYPE html>
<html>
<head>
<title>COIntra</title>
</head>
<frameset rows="20%,80%">
<frame src="topframe.html" name="topframe">
<frameset cols="15%,60%,25%">
<frame src="leftframe.html" name="leftframe" >
<frame src="centerframe.html" name="centerframe">
<frame src="rightframe.html" name="rightframe">
</frameset>
<noframes>
<p>Your browser does not support frames.</p>
</noframes>
</frameset>
</html>
topframe.html:
<!DOCTYPE html>
<html>
<head>
<title>Top Frame</title>
<style>
body {
margin: 0px;
}
#d1 {
color: white;
text-align: center;
width: 100%;
}
#im1 {
width: 130px;
height: 120px;
float: left;
}
.h1,.h2 {
</style>
</head>
<body>
<img id="im1" src="scet.png" align="left">
<div id="d1">
<h3 class="h1">Sarvajanik College of Engineering and Technology</h6>
<div class="h2">
<h3>Shri Premchand Ishwarlal Public Chariable trust</h3>
<h4>Computer Engineering Department - Intra Page</h2>
</div>
</div>
</body>
</html>
leftframe.html:
<!DOCTYPE html>
<html>
<head>
<title>Left Frame</title>
<style>
body {
}
a{
color: white;
text-decoration: none;
font-size: small;
line-height:2;

}
a:hover{
color: orange;
}
</style>
</head>
<body>
<div id="frame1">
<b>
<a href="#">HOME</a><br/>
<hr/>
<a href="#">UG CURRICULAM</a><br/>
<hr/>
<a href="#">ME</a><br/>
<hr/>
<a href="#">CO SMRITI:E-MAGAZINE</a><br/>
<hr/>
<a href="#">INFRASTRUCTURE</a><br/>
<hr/>
<a href="#">STUDENT INTERENSHIP</a><br/>
<hr/>
<a href="#">PROJECT</a><br/>
<hr/>
<a href="#">SEMINAR</a><br/>
<hr/>
<a href="#">DESIGN ENGINEERING</a><br/>
<hr/>
<a href="#">STUDENT ACHIEVEMENTS</a><br/>
<hr/>
<a href="#">DESIGN ENGINEERING</a><br/>
<hr/>
<a href="#">ONLINE RESOURCES</a><br/>
<hr/>
<a href="#">EVENTS</a><br/>
<hr />
<a href="#">TRAINING AND PLACEMENTS</a><br/>
<hr/>
<a href="#">LIBRARY</a><br/>
<hr/>
<a href="#">STUDENTS'S INFO</a><br/>
<hr/>
<a href="#">RESULT ANALYSIS</a><br/>
<hr/>
</b>
</div>
</body>
</html>
centerframe.html:
<!DOCTYPE html>
<html>
<head>
<title>center Frame</title>
<style>
#p1{
color:rgb(255, 115, 0);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: large;
}
#p2{
color:rgb(35, 113, 185);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: medium;
}
</style>
</head>
<body>
<img src="co_updates_2022-1.jpg" height="400px" width="100%">
<h1 id="p1"><b>About Department:</b></h1>
<ul id="p2"><li>The department of Cpmpute Enginnering offers programs in B.E.(Computer)
since 1997. Initially the intake was 60.
with the addition of another division with intake of 60 in the year 2013, the total is 120. The
department of
Computer Enginnering also offers PG course with the specialization in 'ComputerEnginnering'.
the course
commenced in the year 2012 with intake of 18 has been increased to 24 in the year 2018.
Both these programs are
approved by Gujarat Technological Univaersity, Chankheda, Gandhinagar and AICTE.</li>
<li> The department imparts high quality technical education to its students with the help of
its state-of-the-art computing facilities and highly qualified teaching staff as well as supporting
staff. The department offers bachelor’s degree in computer engineering that covers the latest
subjects in the variety of areas like computer hardware, software, networking, microprocessors,
operating systems, database management, artificial intelligence, information security, web
SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 10 | P a g e
technologies etc. The department continues the journey towards ".The goal of creating technical
excellence which imparts the best knowledge and skills to students with the objective of
producing high calibre engineering graduates". A sound theoretical and practical work prepares
the students in wider area of computer engineering.
There are six well-equipped laboratories in the department. The ultimate laboratory facility
along with unlimited internet access helps the upcoming computer engineer to come out with
bright future. The department consists of highly capable teaching and non-teaching staff who
are always ready to inculcate the best knowledge to the students. The department always
strives for providing excellent and modernizes laboratory facilities to the students.
More Information about the department can be found at the IP Address :172.16.3.10</li></ul>
</body>
</html>
rightframe.html:
<!DOCTYPE html>
<html>
<head>
<title>right frame</title>
<style>
#s1,
#s2 {
color: orangered;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#p1,
#p2 {
font-style: italic;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
#btn {
width: 50%;
height: 30px;
color: #fff;
background-color: chocolate;
border-radius: 8px;
font-family: 'Times New Roman', Times, serif;
#btn:hover {
background-color: orangered;
#d1 {
background-color: darkgrey;
}
div#d2{
color: black;
font-family: Georgia, 'Times New Roman', Times, serif;

}
a{
text-decoration: none;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<h2 id="s1" align="center">MISSION STATEMENT-SCET</h2>
<p id="p1" align="center"><q>To from intellectually Competent, Proffessional Skilled, Spiritially
Evolved Moarally
Upright,Tolerant Citizens through Holistic "Sarvajanik" Technical Education For Creation of
Progressive
Civilization...</q></p>
<h2 id="s2" align="center">DEPARTMENT MISSION STATEMENT</h2>
<p id="p2" align="center"><q>Enhance the problem solving aptitude of students and instil in
them the best of
technical knowledge so that they are the best in industry...</q></p>
<p align="center"><button id="btn">UPDATES'20 REPORT</button></p>
<div id="d1" align="center">

<h2><B> QUICK LINKS</B></h2>
</div>
<div id="d2">
<ul>
<li><a href="#">ACADEMIC-CAL:2020-21_GTU</a><br/></li>
<hr/>
<li><a href="#">DEPARTMENT ACADEMIC-CAL:2020-21(EVEN)</a><br/>
<hr/></li>
<li><a href="#">CO-CONTINUOUS EVALUATION SCHEME (BE-I, II & III)</a><br/>
<hr/></li>
<li><a href="#">CO-CONTINUOUS EVALUATION SCHEME (BE-IV)</a><br/></ul>
</div></li>
</body>
</html>
Output:
(3) Design your own website / portfolio / blog using bootstrap.

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fitness website</title>
</head>
<link rel="stylesheet" href="style1.css">
<style>
body {
color: white;
padding: 0px;
margin: 0px;
background: url('gym.jpg');
/* height: auto; */
}
.left {
position: absolute;
top: 31px;
left: 57px;
/* border: 2px solid orange; */
}
.left img {
/* filter: invert(100%); */
opacity: 0.7;
width: 70px;
}
.left div {
text-align: center;
}
.mid {
display: block;
width: 45%;
margin: 20px auto;
/* border: 2px solid white; */
}
.right {
position: absolute;
top: 30px;
right: 34px;
/* border: 2px solid green; */
}
.navbar {
}
.navbar li {
color: white;
font-size: 24px;
}
.navbar li a {
color: black;
/* text-decoration: none; */
padding: 15px;
}
.navbar li a:hover,
.navbar li a.active {
text-decoration: underline;
color: blue;
}
.btn {
margin: 0px 9px;
color: black;
padding: 4px 8px;
border-radius: 5px;
font-size: 17px;
cursor: pointer;
}
.btn:hover {
background-color: beige;
color: grey;
}
.container {
border: 2px solid rgb(202 201 163);

margin: 90px 53px;
padding: 15px 23px;
width: 33%;
border-radius: 2px;
}
.form-group input{
margin: 6px auto;
padding: 7px;
border-radius: 10px;
text-align: center;
display: block;
width: 320px;
font-size: 15px;
}
.container button{
display: block;
width: 67%;
margin: 25px auto;
}
</style>
<body>
<header class="header">

<div class="left">
<img src="logo.jpg" alt="">
<div>my fitnesss</div>
</div>

<div class="mid">
<ul class="navbar">
<li> <a href="#">Home</a></li>
<li> <a href="#">About us</a></li>
<li> <a href="#">Fitness center</a> </li>
<li> <a href="#">Contact us</a></li>
</ul>
</div>

<div class="right">
<button class="btn">Call us now</button>

<button class="btn">Email us</button>
</div>
</header>
<div class="container">
<h1>Join the best gym of delhi now.</h1>
<form action="noaction.php">
<div class="form-group">
<input type="text" name="" placeholder="Enter your Name">
</div>
<input type="text" name="" placeholder="Enter your Age">
</div>
<input type="text" name="" placeholder="Enter your Gender">
</div>
<button class="btn">Submit</button>
</form>
</div>
</body>
</html>
Output:
Practical – 5.1
Problem Statement1: Write a javascript program to display “hello world” using internal
javascript and external javascript.
Algorithm/Program:
internal javascript
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script>
document.write("Enrollment number-200420107005" +"\n");
document.write("Hello World");
</script>
</head>
<body>
</body>
</html>
external javascript
Prac5_1.js
document.write("Enrollment number-200420107005" +"\n");
document.write("Hello World");
Prac5_1.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="prac.js"></script>
</head>
<body>
</body>
</html>

Problem Statement2: Write a javascript program to demo of local and global
variables. Algorithm/Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>variable</title>
</head>
<body>
</body>
<script>
// Global variable
var globalVar = "I am a global variable-200420107005";
function demoLocalGlobal() {
// Local variable
var localVar = "I am a local variable";
console.log(localVar); // Output: I am a local variable
console.log(globalVar); // Output: I am a global variable
}
demoLocalGlobal();
console.log(globalVar); // Output: I am a global variable
console.log(localVar); // Output: Uncaught ReferenceError: localVar is not defined
</script>
</html>

Problem Statement3: Write a javascript program to demo alert box,conditional box and
prompt box.
Algorithm/Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>box</title>
</head>
<body>
</body>
<script>
// Alert box
alert("Hello, world!");
// Conditional box
var result = confirm("Do you want to proceed?");
if (result == true) {
alert("You clicked OK!");
} else {
alert("You clicked Cancel!");
}
// Prompt box
var name = prompt("What is your name?");
if (name != null) {
alert("Hello, " + name + "!");
} else {
alert("You didn't enter your name.");
}
</script>
</html>
Output:


Problem Statement4: Write a javascript program to take user input as integer from
user and find out that number is prime or not.
Algorithm/Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>prime</title>
</head>
<body>
</body>
<script>
// Prompt the user to enter a number
var number = prompt("Enter a positive integer:");
// Convert the user input to an integer
number = parseInt(number);
// Check if the number is prime
var isPrime = true;
for (var i = 2; i <= Math.sqrt(number); i++) {

if (number % i == 0) {
isPrime = false;
break;
}
}
// Display the result
if (isPrime && number > 1) {
console.log("hello krisha \n" +number + " is a prime number.");
} else {
console.log("hello krisha \n" +number + " is not a prime number.");
}
</script>
</html>

Output:
Problem Statement5: Write a javascript program to calculate of a person age. Take

user's birthdate from user and current date from system.
Algorithm/Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>age</title>
</head>
<body>
</body>
<script>
// Prompt the user to enter their birthdate
var birthdateString = prompt("Enter your birthdate (YYYY-MM-DD):");
// Parse the birthdate string into a Date object
var birthdate = new Date(birthdateString);
// Get the current date
var currentDate = new Date();
// Calculate the person's age
var age = currentDate.getFullYear() - birthdate.getFullYear();
// Check if the person has had their birthday this year
if (currentDate.getMonth() < birthdate.getMonth() ||
(currentDate.getMonth() == birthdate.getMonth() &&
currentDate.getDate() < birthdate.getDate())) {
age--;
}
// Display the result
console.log("krisha you are " + age + " years old.");
</script>

</html>
Output:
Problem Statement6: Write a javascript program to print Fibonacci series using function.
Algorithm/Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fibonacci</title>
</head>
<body>
</body>
<script>
// Define a function to generate the Fibonacci series
function fibonacci(n) {
var fib = [0, 1];
for (var i = 2; i <= n; i++) {
fib[i] = fib[i-1] + fib[i-2];
}
return fib;
}
// Prompt the user to enter the number of terms to generate
var n = prompt("Enter the number of Fibonacci terms to generate:");
// Generate the Fibonacci series and display the result
var fibSeries = fibonacci(n);
console.log("The first " + n + " Fibonacci numbers are:");
for (var i = 0; i < fibSeries.length; i++) {
console.log(fibSeries[i]);
}
</script>
</html>
Output:

Practical 5.2 : JavaScript
7. Write a javascript function to find factorial of a given number and

return the answer.
<!DOCTYPE html>
<html>
<head>
<title>Factorial</title>
</head>
<body>
<h2>Factorial of the given number</h2>
Enter a number : <input type="text" id="num">
<br>
<br>
<button onclick="factorial()">Factorial</button>
<h2 id="ans"></h2>
<script>
function factorial(){
var i,num,f;
f = 1;
num = document.getElementById("num").value;
for(i = 1; i <= num; i++)
{
f = f * i;
}
i = i - 1;

document.getElementById("ans").innerHTML = "FACTORIAL OF GIVEN NUMBER " +

i + " IS = " + f;
}
</script>
</body>
</html>

8. Create different variables of Array and string objects. And use all
the functions related to that.
<html>
<head>
<title>Array and String Objects</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>ARRAY OBJECTS FUNCTIONS</h2>

<br>
<script>
var arr = [10,20,30,50,90,60,70,40,80,100];
arr.sort(function(a,b){return a-b});
document.write("SORTING OF ARRAY");
document.write("<br>");
document.write(arr);
arr.reverse(function(a,b){return a-b});
document.write("REVERSE OF ARRAY");

var len = arr.length;

document.write("LENGTH OF ARRAY");
document.write(len);
arr.push(200);
document.write("PUSH OPERATION ON ARRAY OBJECT");
arr.pop();
document.write("POP OPERATION ON ARRAY OBJECT");

</script>
<h2>STRING OBJECTS FUNCTIONS</h2>

<br>
<script>

s = "Jayanshu";
var len = s.length;

document.write("LENGTH OF STRING");
document.write(len);
var low = s.toLowerCase();

document.write("LOWERCASE OF STRING");
document.write(low);
var up = s.toUpperCase();
document.write("UPPERCASE OF STRING");
document.write(up);
var slice = s.slice(0,4);

document.write("SLICING OF STRING");
document.write(slice);

var replace = s.replace("Jayanshu", "I am Jayanshu");

document.write("REPLACE OF STRING");
document.write(replace);
</script>
</body>
</html>

9. Create javascript that scroll some message in Status window of

browser.
<html>
<head>
<title>Scrolling Message in Statusbar Example</title>
msg = "This is an example of a scrolling message.";
msg = ". ..... " + msg;
pos = 0;
window.status = msg;
function ScrollMessage() {
window.status = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0;
window.setTimeout("ScrollMessage()", 200);
}
ScrollMessage();
</script>
</head>
<body>
<h1>Scrolling Message Example</h1>

</body>
</html>

10. Write a javascript program to change the background color of

web page repeatedly.
<html>
<head>
<title>Changing Background</title>
</head>
<script>
color = ["red","green","yellow","blue","pink"];
var i = 0;
function changecolor(){
if(i>4)i = 0;
document.bgColor = color[i];
i++;
window.setTimeout("changecolor();",1000);
}
changecolor();
</script>
<body>
<h2>Changing Background Colour...</h2>
</body>
</html>

11. Create a webpage containing one button. clicking on this button

change the size of the window & position.
<!DOCTYPE html>
<html>
<head>
<title>Changing the Windows Property</title>
</head>
<body>
<h2>The Window Object</h2>
<h3>The resizeBy() Method</h3>
<h4>Open a new window, and resize it to 400 * 400 : </h4>
<button onclick="openWin()">Create Window</button>
<button onclick="resizeWin()">Resize Window</button>
<button onclick="moveWin()">Move Window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=500, height=300");
function resizeWin() {
myWindow.resizeTo(400, 400);
function moveWin() {
myWindow.moveTo(500, 300);

</script>
</body>
</html>
12. Put three button “OPEN NEW WINDOW”,”CLOSE CHILD

WINDOW”,”CLOSE MAIN WINDOW” in main HTML page, on click of
first button, execute some JavaScript code that will open one child
window. Clicking on second button child window will close and third
button main html page will close.
<html>
<head>
<title>Create a New Window</title>
function winopen() {
NewWin = window.open("", "NewWin", "toolbar=no,status=no,width=300,height=100");
NewWin.document.write("<h1>How Are you ?</h1>");
function cclose() {
NewWin.close();
function pclose() {
window.close();
</script>
</head>
<body>
<h1>Create a New Window</h1>
<p>Use the buttons below to test opening and closing windows in JavaScript.</p>
<form NAME="winform">
<input TYPE=button VALUE="Open New Window" onClick="winopen();">
<p><input TYPE=button VALUE="Close New Window" onClick="cclose()"></p>
<p><input TYPE="button" VALUE="Close Main Window" onClick="pclose()"></p>
</form>
<br>
</body>
</html>
13. Write a javascript to get details from visitors browser.

<!DOCTYPE html>
<html>
<body onload="fnBrowserDetect()">
<h1>The Window Navigator Object</h1>
<h2>The userAgent Property</h2>
<p id="demo"></p>
<script>
var agent = navigator.userAgent;
document.getElementById("demo").innerHTML = "User-agent:<br>" + agent;
function fnBrowserDetect() {
var userAgent = navigator.userAgent;
var browserName;
if (userAgent.match(/chrome|chromium|crios/i)) {
browserName = "chrome";
else if (userAgent.match(/firefox|fxios/i)) {
browserName = "firefox";
else if (userAgent.match(/safari/i)) {
browserName = "safari";
else if (userAgent.match(/opr\//i)) {
browserName = "opera";
else if (userAgent.match(/edg/i)) {
browserName = "edge";
}
else {
browserName = "No browser detection";
document.querySelector("h1").innerText = "You are using " + browserName + " browser";
</script>
</body>
</html>
14. Write a javascript program to rotate images.

<!DOCTYPE html>
<html>
<head>
<title>Image Rotating</title>
<style>
#img{
transition: transform 0.3s;
</style>
</head>
<body>
<h3>Image is rotating ...</h3>
<img src="Dwarka.png" alt="Dwarka temple image" id="img" height="200px" width="200px">
<br>
<br>
<button id="Rotate">Rotate Image</button>
</body>
<script>
var current_rotation = 0;
// change CSS transform property on click
document.querySelector("#Rotate").addEventListener('click', function () {
// update total rotation
// if angle is positive, rotation happens clockwise. if negative, rotation happens anti-clockwise.
current_rotation += 180;
// rotate clockwise by 90 degrees
document.querySelector("#img").style.transform = 'rotate(' + current_rotation + 'deg)';
});
</script>
</html>
15. Write a javascript program to zoom out the image. use

mouseover event for the same.
<html>
<head>
function smallImg(x) {
x.height = "100";
x.width = "200";
}
function normalImg(x) {
x.height = "300";
x.width = "500";
}
</script>
</head>
<body>
<img onMouseOver="smallImg(this)" onMouseOut="normalImg(this)" border="0"
src="Dwarka.png" alt="Dwarka Temple Image" width="300" height="300" />
</body>
</html>
16. Create a page that includes a select object to change the

background color of the current page. The property that needs to be
set is bgColor, Similar things for foreground color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change the background color</title>
function ccolor() {
i = document.bcolor.scolor.selectedIndex;
scol = document.bcolor.scolor.options[i].value;
document.bgColor = scol;
function fgcolor1() {
i = document.bcolor.fcolor.selectedIndex;
scol = document.bcolor.fcolor.options[i].value;
document.fgColor = scol;
</script>
</head>
<body>
<form name="bcolor">
<i>Change the background color:</i>
<select name="scolor" onChange="ccolor();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<br>
<br>
<i>Change the foreground color:</i>
<select name="fcolor" onChange="fgcolor1();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</form>
</body>
</html>
17. A document contains two forms, named form1 and form2. In the
form1 is a field named acc1(type=text) and form2 contains field
select(type=text). Write a program that will copy values of acc1 to
select .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<b>Form 1</b>
<br><br>
<form>
INPUT: <input type="text" name="Acc1">
<br>
<br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box if form 1 and form 2 are the same.</em>
<P>
<b>Form 2</b>
<br><br>
OUTPUT:<input type="text" name="select">
</form>
<script>
function FillBilling(f) {
if (f.billingtoo.checked == true) {
f.select.value = f.Acc1.value;
</script>
</body>
</html>
18. Create a webpage contains two textbox as userid and password

and one submit button. Check for validation for userid as mobile
number and password should contains minimum 8 character, with
special symbol and one upper case letter.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Validation</title>
<script>
function verify() {
var mobileNo = document.getElementById("num").value;

if (mobileNo == "" || mobileNo == null) {
alert("Please enter your UserId.");
}
else if(mobileNo.match(/[a-z]/g) || mobileNo.match(/[A-Z]/g)) {
alert("UserId should be mobile number.");
}
else if (mobileNo.length < 10 || mobileNo.length > 10) {
alert("UserId is not valid, as mobile No. is not valid, Please Enter 10 Digit Mobile
No.");
}
else {
alert("Correct UserId.");
}
var str = document.getElementById("pwd").value;
if (str.match(/[a-z]/g) && str.match(/[A-Z]/g) && str.match(/[0-9]/g) &&

str.match(/[â-zA-Z\d]/g) && str.length >= 8) {
alert("Correct Password.");
}
else {
alert("Password not according to rules.");
}
}
</script>
</head>
<body>
<h2>User id as a mobile number and password should contain minimum 8 character ,
with special symbol and one upper case letter.</h2>
<form onsubmit="verify()">
<label for="phone">User Id:</label>
<input type="tel" id="num" name="num"><br><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">

</form>
</body>
</html>
19. Perform javascript validation for HTML assignment 1: Question

No:5
<!DOCTYPE html>
<html>
<head>
<title>Registration page</title>
<script>
function verify() {
var reg_id = document.getElementById("rid").value;
var uname = document.getElementById("uname").value;
var pass = document.getElementById("pwd").value;
var f_name = document.getElementById("fname").value;
var l_name = document.getElementById("lname").value;
var male_check = document.getElementById("male");
var female_check = document.getElementById("female");
var dob = document.getElementById("birthday").value;
var dob_pattern = /^([0-9]{2})-([0-9]{2})-([0-9]{4})$/;
var empty_city = document.getElementById("cityid").value;
var empty_state = document.getElementById("stateid").value;
var empty_country = document.getElementById("countryid").value;
var mobile_no = document.getElementById("phone").value;
var fileInput = document.getElementById('myfile');
var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (reg_id == "" || reg_id == null) {

alert("Please enter Valid Registration Id.");
return false;
} else if (uname.length < 3) {
alert("Please enter Valid User Name.");
return false;
} else if (f_name.length < 3) {

alert("Please enter Valid First Name.");
return false;
} else if (l_name.length < 3) {
alert("Please enter Valid Last Name.");
return false;
} else if (male_check.checked == false && female_check.checked == false) {
alert("Please Select a Gender.");
return false;
} else if (dob == null || dob == "") {
alert("Please Select Valid Birth Date.");
return false;
} else if (empty_city == "0") {
alert('Please select a city.');
return false;
} else if (empty_state == "0") {
alert('Please select a State.');
return false;
} else if (empty_country == "0") {
alert('Please select a Country.');
return false;
} else if (mobile_no.length < 10 || mobile_no.length > 10) {
alert("Please enter Valid Mobile No.");
return false;
} else if (!allowedExtensions.exec(filePath)) {
alert('Invalid file type');
return false;
// fileInput.value = '';
} else if (pass.length < 8 || !(str.match(/[a-z]/g) && str.match(/[A-Z]/g) &&

str.match(/[0-9]/g) && str.match(/[â-zA-Z\d]/g) && str.length >= 8)) {
alert("Please enter Valid Password.");
return false;
}
// else {
// return true;
// }
}
</script>
</head>
<body>
<form onsubmit="verify()">
<table border="5" cellspacing="5">
<tr>
<td align="center" colspan="2">REGISTRATION PAGE</td>
</tr>
<tr>
<td>Registration ID : </td>
<td><input type="text" id="rid" name="rid"></td>
</tr>
<tr>
<td>User Name : </td>
<td><input type="text" id="uname" name="uname"></td>
</tr>
<tr>
<td>Password : </td>
<td><input type="password" name="pwd" id="pwd"></td>
</tr>
<tr>
<td>First Name : </td>
<td><input type="text" id="fname" name="fname"></td>

</tr>
<tr>
<td>Last Name : </td>
<td><input type="text" id="lname" name="lname"></td>
</tr>
<tr>
<td>Gender : </td>
<td>
<input type="radio" id="male" name="gender" value="Male">Male
<input type="radio" id="female" name="gender" value="Female" >Female
</td>
</tr>
<tr>
<td>Date Of Birth :</td>
<td><input type="date" id="birthday" name="birthday"></td>
</tr>
<tr>
<td>Address : </td>
<td><Textarea id="Addreass" name="Address"></Textarea></td>
</tr>
<tr>
<td>City :</td>
<td>
<select name="city" class="cities" id="cityid">

<option value="Surat">Surat</option>
<option value="Ahmedabad">Ahmedabad</option>
<option value="Mumbai">Mumbai</option>
<option value="Indore">Indore</option>
<option value="Banglore">Banglore</option>
<option value="Chennai">Chennai</option>
</select>
</td>
</tr>
<tr>
<td>State :</td>
<td>
<select name="state" class="states" id="stateid">
<option value="Gujarat">Gujarat</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Karnataka">Karnataka</option>
<option value="Tamilnadu">Tamilnadu</option>
</select>
</td>
</tr>
<tr>
<td>Country :</td>
<td>
<select name="country" class="countries" id="countryid">
<option value="India">India</option>
<option value="Usa">USA</option>
<option value="Canada">Canada</option>
</select>
</td>
</tr>
<tr>
<td>Hobbies :</td>
<td>
<input type="checkbox" name="read" value="read" id="">Reading
<input type="checkbox" name="Write" value="write" id="">Writing
<input type="checkbox" name="sing" value="sing" id="">Singing
</td>
</tr>
<tr>
<td>Mobile No : </td>
<td><input type="tel" name="phone" id="phone" pattern = "[0-9]{5}[0-
9]{5}"></td>
</tr>
<tr>
<td>Attach CV :</td>
<td><input type="file" name="myfile" id="myfile"></td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

</td>
</tr>
</table>
</form>
</body>
</html>
Practical No : 6.1
AIM: PHP Basics.
1) Write PHP Script to print Fibonacci series.
➢ CODE:
<html>
<head>
<title>fibonacci</title>
<style>
body{
font-size: 30px;
}
div {
width: 1000px;
border: 10pxsolidgreen;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<?php
$num = 0;
$n1 = 0;
$n2 = 1;
echo"<h3>Fibonacci series for first 12 numbers: </h3>";
echo"\n";
echo$n1.' '.$n2.' ';
while ($num<10 )
{
$n3 = $n2 + $n1;
echo$n3.' ';
$n1 = $n2;
$n2 = $n3;
$num = $num + 1;
}
?>
</div>
</body>
</html>
➢ OUTPUT:

2) Write PHP Script to find maximum number out of three given numbers.
➢ CODE:
<html>
<head>
<title>max of 3</title>
<style>
body{
font-size: 30px;
}
div {
width: 1000px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<formmethod="post">
<tableborder="0">
<tr>
<h3>Maximum of three number</h3>
<td> Enter 1st number:<inputtype="text"name="num1"value=""placeholder="Enter
1st number"/></td>
</tr>
<tr>
<td>Enter 2nd number:<inputtype="text"name="num2"value=""placeholder="Enter
2nd number"/></td>
</tr>
<tr>
<td>Enter 3rd number:<inputtype="text"name="num3"value=""placeholder="Enter
3rd number"/></td>
</tr>

<tr>
<td><inputtype="submit"name="submit"value="Submit"/>
</td>
</tr>
</table>
</form>
<?php
if(isset($_POST['submit']))
{
$a = $_POST['num1'];
$b = $_POST['num2'];
$c = $_POST['num3'];
if($a>$b&&$a>$c)
{
echo" $a is a Big number. ";
}
else
if($b>$c&&$b>$a)
{
echo" $b is a Big number. ";
}
else
if($c>$a&&$c>$b)
{
echo" $c is a Big number. " ;
}
return0;
}
?>
</body>
</div>
</html>
➢ OUTPUT:

3) Write a PHP program to compute the sum of the prime numbers less than
100.
➢ CODE:
<html>
<head>
<title>fibonacci</title>
<style>
body{
font-size: 30px;
}
div {
width: 1000px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<?php
$primes = array();
$is_prime_no = false;
for ($i = 2; $i<100; $i++) {
$is_prime_no = true;
for ($j = 2; $j<=($i/2); $j++) {
if ($i%$j==0) {
$is_prime_no = false;
break;
}
}
if ($is_prime_no) {
array_push($primes,$i);
}
if (count($primes)==100) {
break;
}
}
echoarray_sum($primes)."\n";
?>
</div>
</body>
</html>
➢ OUTPUT:

4) Find the Transpose of a matrix, Multiplication of two matrices and

Addition of two matrices.
➢ CODE:
<html>
<head>
<title>matrix</title>
<style>
body{
font-size: 20px;
}
div {
width: 1000px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<?php
$a = array(array(11,22,33),array(44,55,66),array(77,88,99));
$b = array(array(77,88,99),array(44,55,66),array(11,22,33));
$m=count($a);
$n=count($a[2]);
$p=count($b);
$q=count($b[2]);
echo"the first matrix :"."<br/>";
for ($row = 0; $row<$m; $row++) {
for ($col = 0; $col<$n; $col++)
echo" ".$a[$row][$col];
echo"<br/>";
}

echo"the second matrix :"."<br/>";

for ($row = 0; $row<$p; $row++) {
for ($col = 0; $col<$q; $col++)
echo" ".$b[$row][$col];
echo"<br/>";
}
echo"the transpose for the first matrix is:"."<br/>";
for ($row = 0; $row<$m; $row++) {
for ($col = 0; $col<$n; $col++)
echo" ".$a[$col][$row];
echo"<br/>";
}
echo"the transpose for the second matrix is:"."<br/>";
for ($row = 0; $row<$p; $row++) {
for ($col = 0; $col<$q; $col++)
echo" ".$b[$col][$row];
echo"<br/>";
}
echo"the addition of matrices is:"."<br/>";
for ($row = 0; $row<3; $row++) {
for ($col = 0; $col<3; $col++)
echo" ".$a[$row][$col]+$b[$row][$col]." ";
echo"<br/>";
}
echo" The multiplication of matrices: <br/>";
$result=array();
for ($i=0; $i<$m; $i++) {
for($j=0; $j<$q; $j++){
$result[$i][$j] = 0;
for($k=0; $k<$n; $k++)
$result[$i][$j] += $a[$i][$k] * $b[$k][$j];
}
}
for ($row = 0; $row<$m; $row++) {
for ($col = 0; $col<$q; $col++){
echo" ".$result[$row][$col];
}
echo"<br/>";
}
?>
</div>
</body>
</html>
➢ OUTPUT:

5) Write PHP script Using user defined function.
➢ CODE:
<html>
<head>
<title>User-define function</title>
<style>
body{
font-size: 20px;
}
div {
width: 1000px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<?php
//function definition
functionsayHello(){
echo"Hello World!";
}
//function call

sayHello();
?>
</div>
</body>
</html>
➢ OUTPUT:
6) Create form using text box, check box, radio button, select, submit button.
And display user inserted value in new PHP page.
➢ CODE:
→p6_6.html:
<html>
<head>
<title>Registration</title>
<style>
.main
{
width:30%;
margin:2emauto;
border:2pxsolidblack;
padding:;
}
.maininput[type="submit"]
{
width:95%;
border:1pxsolidrgb(255, 255, 255);
padding:.5em;
margin:.5em;
color: white;
}
.maininput[type="password"]
{

width:95%;
padding:.5em;
margin:.5em;
}
.maininput[type="text"],.maininput[type="email"]
{
width:45%;
padding:.5em;
margin:.5em;
}
</style>
</head>
<body>
<divclass="main">
<formmethod="post"action="p6_6(php).php">
<center><h2> Student Registration </h2></center>
<inputtype="text"name="fname"placeholder="First Name">
<inputtype="text"name="lname"placeholder="Last Name">
<inputtype="email"name="email"placeholder="Email">
<inputtype="text"name="mobile"placeholder="Mobile">
<center><inputtype="text"name="city"placeholder="City">
<labelfor="start"> Date of birth:</label><inputtype="date"id="start"name="trip-
start"value="">
<br>
</center>
<hr>
Gender<br>
<inputtype="radio"name="gender"value="Male">Male<br>
<inputtype="radio"name="gender"value="female">Female<br>
<hr>
Branch<br>
<inputtype="radio"name="gender"value="Male">computer<br>
<inputtype="radio"name="gender"value="female">IT<br>
<inputtype="radio"name="gender"value="female">EC<br>
<inputtype="radio"name="gender"value="female">Electrical<br>
<hr>
<inputtype="Password"name="pass"placeholder="Password"><br>
<inputtype="submit"name="submit"value="Register">
</form>
</div>
</body>
</html>

→p6_6(php).php:
<html>
<head>
<title>Registration</title>
<style>
body{
font-size: 20px;
}
div {
width: 1000px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<?php
if(isset($_POST['submit']))
{
$fn=$_POST['fname'];
$ln=$_POST['lname'];
$em=$_POST['email'];
$mob=$_POST['mobile'];
$city=$_POST['city'];
$gender=$_POST['gender'];
$pass=$_POST['pass'];
echo"First name : $fn<br><br>";

echo"Last name : $ln<br><br>";
echo"Email : $em<br><br>";
echo"Mobile : $mob<br><br>";
echo"City : $city<br><br>";
echo"Gender : $gender<br><br>";
}
?>
</div>
</body>
</html>
➢ OUTPUT:
Practical No : 6.2
AIM: PHP File & Session Management
1) Write PHP Script to display content of file and display total number of
lines, words and characters.
➢ CODE:
<html>
<body>
<?php
$filename = "F:\SEM - 6\WP\Practical 6.2 - PHP file & session management\\file.txt";
$fp = fopen($filename, "r");//open file in read mode $contents = fread($fp,
filesize($filename));//read file echo "<pre>$contents</pre>";//printing data of file
$no_of_lines = count(file($filename)); echo"There are $no_of_lines lines in
$filename"."\n"."<br>";
$cnt = 0;
$count = 0;
$cnt = str_word_count($contents); echo"There are $cnt words in
$num_of_char = strlen($contents); echo"There are $num_of_char words in
fclose($fp);//close file
?>
</body>
</html>
➢ OUTPUT:
2) Write a Program to upload image with extension gif or jpeg having size
less than 200kB.
➢ CODE:
→p6_2_2.html:
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>PHP basics</title>
</head>

<body>
<formaction="image.php"enctype="multipart/form-data"method="post">
Select image to upload:
<inputtype="file"name="fileToUpload"id="fileToUpload">
<inputtype="submit"value="Upload Image"name="submit">
</form>
</body>
</html>
→p6_2_2.php:
<?php
$target_dir = "C:/xampp/htdocs";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) { echo"File is an image<br>File Type - " . $check["mime"]
. ".";
$uploadOk = 1;
} else {
echo"File is not an image.";
$uploadOk = 0;
}
}
if ($uploadOk == 0)
{
echo"Sorry, your file was not uploaded.";
}
else
{
if($check["mime"]=="image/gif" or $check["mime"]=="image/jpeg")
{
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file))
{
echo"<br>Your file <b>". basename( $_FILES["fileToUpload"]["name"]). "</b>
has been uploaded.";
}
else
{
echo"Sorry, there was an error uploading your file.";
}
}
else
{
echo"<h3>Only .gif And .jpeg files allowed</h3>";
}

}
?>
➢ OUTPUT:
3) A web application that takes a name as input and on submit it shows a

hello page where name is taken from the request. It shows the start time at
the right top corner of the page and provides a logout button. On clicking
this button, it should show a logout page with Thank You message with the
duration of usage (hint: Use session to store name and time).
➢ CODE:
→index.php:
<html>
<head>
<title>Index</title>
<style>
body{
font-size: 20px;
}
input[type=text]{
width:50%;
padding: 12px20px;
margin:8px;
border:2pxsolidred;
}
input[type=submit] {
width: 10%;
background-color: #4CAF50;
color: white;
padding: 14px20px;
margin: 8px0;
border: none;
border-radius: 4px;
cursor: pointer;

}
</style>
</head>
<body>
<formname="form1"method="post">
<tablealign="center"width="70%"border="0"cellpadding="3"cellspacing="1">
<br/>
<tr>
<td>Name : </td>
<td><inputname="uname"type="text"></td>
</tr>
<tr>
<td></td>
<td><inputtype="submit"name="Submit"value="SUBMIT"></td>
</tr>
</table>
</form>
<?php
if(isset($_POST['Submit']))
{
date_default_timezone_set('Asia/Kolkata');
$currentTime = date( 'h:i:s A', time () );
$uname=$_POST["uname"];
session_start();
$_SESSION["name"] = $_POST["uname"];
$_SESSION["stime"] = $currentTime;
header('Location: home.php');
}
?>
</body>
</html>
→home.php:
<html>
<head>
<title>Welcome </title>
<style>
body{
font-size: 20px;
}
input[type=submit] {
width: 10%;
background-color: #4CAF50;
color: white;
padding: 14px20px;
margin: 8px0;
border: none;

border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<br/><?php
session_start();
$stime=$_SESSION['stime'];
echo"<p align='right'><b>".$_SESSION['stime']."</b></p>";
echo"Welcome : ".$_SESSION['name'];
?>
<formname="form1"method="post">
<inputtype="submit"name="logout"value="LOGOUT">
</form><?php
if(isset($_POST['logout']))
{
$uname=$_POST["uname"];
date_default_timezone_set('Asia/Kolkata');
$currentTime = date( 'h:i:s A', time () );
session_start();
$_SESSION["stime"] = $_SESSION['stime']; $_SESSION["etime"] = $currentTime;
header('Location: welcome.php');
}
?>
</body>
</html>
→welcome.php:
<html>
<head>
<title>Welcome</title>
<style>
body{
font-size: 20px;
}
div {
width: 1000px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<?php
session_start();

echo"Thank You ".$_SESSION["name"]."<br/>";

$stime=$_SESSION['stime'];
$etime=$_SESSION['etime'];
echo"Login time is :". $stime."<br/>";
echo"Logout time is : ".$etime."<br/>";
$to_time = strtotime($stime);
$from_time = strtotime($etime);
echoround(abs($to_time - $from_time) / 60,2). " minute";
?>
</body>
</div>
</html>
➢ OUTPUT:
4) Write PHP script to demonstrate variables with cookies.
➢ CODE:
<!DOCTYPEhtml>
<?php
$cookie_name = "Name";
$cookie_value = "Neel Patel";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
?>
<html>
<body>
<?php
if(!isset($_COOKIE['Name'])) {
echo"Cookie named '" . $cookie_name . "' is not set!";

} else {
echo"Cookie '" . $cookie_name . "' is set!<br>";
echo"Value is: " . $_COOKIE[$cookie_name];
}
?>
<p><strong>Note:</strong> You might have to reload the page to see the value of
the cookie.</p>
</body>
</html>
➢ OUTPUT:
5) Write a program to keep track of how many times a visitor has loaded the
page.
➢ CODE:
<!DOCTYPEhtml>
<head>
<title>Welcome</title>
<style>
body{
font-size: 20px;
}
</style>
</head>
<body>
<?php
session_start();
if(isset($_SESSION['views']))
$_SESSION['views'] = $_SESSION['views']+1;
else
$_SESSION['views']=1;
echo"views = ".$_SESSION['views'];
?>
</body>
</html>

➢ OUTPUT:

Practical 6.3 : PHP Database
1).Understand the PHP interface, Study PHPMyAdmin and Performfollowing:
1. Write a PHP script to create a database StudentDB.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "CREATE DATABASE StudentDB";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully";

} else {
echo "Error creating database: " . $conn->error;
}
$conn->close();
?>

2.Write a PHP script to list all the databases available in mysql.

<?php
$con = mysqli_connect("localhost", "root", "");
if (!$con) {
die('Could not connect: ' . mysql_error());

}
$sql = "SHOW DATABASES";

if ($result = mysqli_query($con, $sql)) {
while ($db = mysqli_fetch_object($result)) {
echo $db->Database . "<br />";
}
}
mysqli_close($con);
?>

3.Write a PHP script to list all the tables available in a particulardatabase.


<?php
$link = mysqli_connect("localhost", "root", "", "practical4db");
$query = mysqli_query($link, "SHOW TABLES IN practical4db");
$numrows = mysqli_num_rows($query);
echo "<b>Amount of tables: ".$numrows." and their names:</b> ";
while ($row = mysqli_fetch_array($query)) {
echo $row[0]." ";
}
?>
4.Write a PHP script to create a table student(Enroll_no,name,age,marks) in the

database StudentDB.

<?php
$username = "root";
$password = "";
$dbname = "StudentDB";
$conn = new mysqli($servername, $username, $password, $dbname);



}
// Enroll_no,name,age,marks
$sql = "CREATE TABLE student(Enroll_no INT(12) PRIMARY KEY, S_name VARCHAR(30)
NOT NULL,age INT(3) NOT NULL, marks INT(3) NOT NULL)";
echo "Table employees created successfully";
} else {
echo "Error creating table: " . $conn->error;
}
$conn->close();
?>
5.Write a PHP script to insert a row into the table student. Thevalues to be inserted
are taken from a HTML page.

<?php
$username = "root";
$password = "";



}
// Enroll_no,name,age,marks
$sql = "INSERT INTO Student VALUES ('26','Jayanshu','23','36');";
echo "Row created successfully";
} else {
echo "Error creating table: " . $conn->error;
}
$conn->close();
?>
6.Write a PHP script to list all the records in the student table intabular format.

<html>
<head>
<style>
table
{
border-style:solid;
border-width:2px;

border-color:pink;
}
</style>
</head>
<body bgcolor="#EEFDEF">
<?php
$username = "root";
$password = "";


}
$query = "SELECT * FROM student";
$result= mysqli_query($conn,$query);
echo "<table border='1'>
<tr>
<th>Id</th>
<th>name</th>
<th>Mobile</th>
<th>email</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Enroll_no'] . "</td>";
echo "<td>" . $row['S_name'] . "</td>";

echo "<td>" . $row['age'] . "</td>";

echo "<td>" . $row['marks'] . "</td>";
echo "</tr>";
}
echo "</table>";
$conn->close();
?>
</body>
</html>
7.Write a PHP script to delete all rows from student table whoseEnroll_no numbers are
between 1 and 3.

<?php
$username = "root";
$password = "";

}
$sql = "DELETE FROM student WHERE Enroll_no<3";


echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn->error;

}
$conn->close();
?>
8.Write a PHP script to display all rows from student table whosemarks are >=35.

<?php
$username = "root";
$password = "";


}
$query = "SELECT * FROM student WHERE marks>35";
$result= mysqli_query($conn,$query);
echo "<table border='1'>
<tr>
<th>Id</th>
<th>name</th>
<th>age</th>
<th>marks</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Enroll_no'] . "</td>";
echo "<td>" . $row['S_name'] . "</td>";
echo "<td>" . $row['age'] . "</td>";

echo "<td>" . $row['marks'] . "</td>";
echo "</tr>";
}
echo "</table>";
$conn->close();
?>

9.Write a PHP script to update row from the table student whoseage is 30.

<?php
$username = "root";
$password = "";

}
$sql = "UPDATE student SET marks=100 WHERE age=30";
echo "Record updated successfully";
} else {
echo "Error deleting record: " . $conn->error;
}
$conn->close();
?>
10.Write a PHP script to drop the table student and drop the database StudentDB.
<?php
$username = "root";
$password = "";
$conn = newmysqli($servername, $username, $password, $dbname);
}
$sql = "drop table student";
echo"Drop table successfully";
} else {
echo"Error droping table: " . $conn->error;
}
$conn->close();
?>
<?php
$username = "root";
$password = "";
$conn = newmysqli($servername, $username, $password, $dbname);
}
$sql = "drop database StudentDB";
echo"Drop database successfully";
} else {
echo"Error droping database: " . $conn->error;

}
$conn->close();
?>
➢ OUTPUT:
2).Write a web application code using PHP, HTML and MySql for Employees that stores
employee’s id, name, department, designation, etc. in database. Create proper GUI
including buttonsthat run separate .php file for each database operation like insert,update,
delete, select etc.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
margin: 0 auto;
}
table tr td:last-child {
width: 120px;
}
</style>
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="mt-5 mb-3 clearfix">
<h2 class="pull-left">Employees Details</h2>
<a href="create.php" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Add New
Employee</a>
</div>
<?php
// Include config file
require_once "config.php";
// Attempt select query execution
$sql = "SELECT * FROM employees";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo '<table class="table table-bordered table-striped">';

echo "<thead>";
echo "<tr>";
echo "<th>#</th>";
echo "<th>Name</th>";
echo "<th>Address</th>";
echo "<th>Salary</th>";
echo "<th>Action</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";

echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['address'] . "</td>";
echo "<td>" . $row['salary'] . "</td>";
echo "<td>";
echo '<a href="read.php?id='. $row['id'] .'" class="mr-3" title="View Record" data-
toggle="tooltip"><span class="fa fa-eye"></span></a>';
echo '<a href="update.php?id='. $row['id'] .'" class="mr-3" title="Update Record" data-
toggle="tooltip"><span class="fa fa-pencil"></span></a>';
echo '<a href="delete.php?id='. $row['id'] .'" title="Delete Record" data-
toggle="tooltip"><span class="fa fa-trash"></span></a>';
echo "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
// Free result set
mysqli_free_result($result);
} else{
echo '<div class="alert alert-danger"><em>No records were found.</em></div>';
}
} else{
echo "Oops! Something went wrong. Please try again later.";

}
// Close connection
mysqli_close($link);
?>
</div>
</div>
</div>
</div>
</body>
</html>
config.php
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'EmployeeDB');
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>
create.php
<?php
// Define variables and initialize with empty values
$name = $address = $salary = "";
$name_err = $address_err = $salary_err = "";
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Validate name
$input_name = trim($_POST["name"]);
if(empty($input_name)){
$name_err = "Please enter a name.";
} elseif(!filter_var($input_name, FILTER_VALIDATE_REGEXP,
array("options"=>array("regexp"=>"/^[a-zA-Z\s]+$/")))){
$name_err = "Please enter a valid name.";
} else{
$name = $input_name;
}
// Validate address
$input_address = trim($_POST["address"]);
if(empty($input_address)){
$address_err = "Please enter an address.";

} else{
$address = $input_address;
}
// Validate salary
$input_salary = trim($_POST["salary"]);
if(empty($input_salary)){
$salary_err = "Please enter the salary amount.";
} elseif(!ctype_digit($input_salary)){
$salary_err = "Please enter a positive integer value.";
} else{
$salary = $input_salary;
}
// Check input errors before inserting in database
if(empty($name_err) && empty($address_err) && empty($salary_err)){

// Prepare an insert statement
$sql = "INSERT INTO employees (name, address, salary) VALUES (?, ?, ?)";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters

mysqli_stmt_bind_param($stmt, "sss", $param_name, $param_address, $param_salary);
// Set parameters
$param_name = $name;
$param_address = $address;
$param_salary = $salary;
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
// Records created successfully. Redirect to landing page
header("location: index.php");
exit();
} else{
}
}
// Close statement
mysqli_stmt_close($stmt);
}
// Close connection
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Record</title>
<style>
.wrapper{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="row">
<h2 class="mt-5">Create Record</h2>
<p>Please fill this form and submit to add employee record to the database.</p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label>Name</label>
<input type="text" name="name" class="form-control <?php echo (!empty($name_err)) ?

'is-invalid' : ''; ?>" value="<?php echo $name; ?>">
<span class="invalid-feedback"><?php echo $name_err;?></span>
</div>
<label>Address</label>
<textarea name="address" class="form-control <?php echo (!empty($address_err)) ? 'is-
invalid' : ''; ?>"><?php echo $address; ?></textarea>
<span class="invalid-feedback"><?php echo $address_err;?></span>
</div>
<label>Salary</label>
<input type="text" name="salary" class="form-control <?php echo (!empty($salary_err)) ?
'is-invalid' : ''; ?>" value="<?php echo $salary; ?>">
<span class="invalid-feedback"><?php echo $salary_err;?></span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
<a href="index.php" class="btn btn-secondary ml-2">Cancel</a>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
read.php
<?php
// Check existence of id parameter before processing further
if(isset($_GET["id"]) && !empty(trim($_GET["id"]))){

// Prepare a select statement
$sql = "SELECT * FROM employees WHERE id = ?";

mysqli_stmt_bind_param($stmt, "i", $param_id);
// Set parameters
$param_id = trim($_GET["id"]);
$result = mysqli_stmt_get_result($stmt);
if(mysqli_num_rows($result) == 1){
/* Fetch result row as an associative array. Since the result set
contains only one row, we don't need to use while loop */
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
// Retrieve individual field value
$name = $row["name"];
$address = $row["address"];
$salary = $row["salary"];
} else{
// URL doesn't contain valid id parameter. Redirect to error page
header("location: error.php");
exit();
}
} else{
}
}
// Close statement
// Close connection
} else{
// URL doesn't contain id parameter. Redirect to error page
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>View Record</title>
<style>
.wrapper{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="row">
<h1 class="mt-5 mb-3">View Record</h1>

<label>Name</label>
<p><b><?php echo $row["name"]; ?></b></p>
</div>
<p><b><?php echo $row["address"]; ?></b></p>
</div>
<p><b><?php echo $row["salary"]; ?></b></p>
</div>
<p><a href="index.php" class="btn btn-primary">Back</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
update.php
<?php
// Define variables and initialize with empty values
$name = $address = $salary = "";
$name_err = $address_err = $salary_err = "";

// Processing form data when form is submitted
if(isset($_POST["id"]) && !empty($_POST["id"])){
// Get hidden input value
$id = $_POST["id"];
// Validate name
$input_name = trim($_POST["name"]);
if(empty($input_name)){
$name_err = "Please enter a name.";
} elseif(!filter_var($input_name, FILTER_VALIDATE_REGEXP,
array("options"=>array("regexp"=>"/^[a-zA-Z\s]+$/")))){
$name_err = "Please enter a valid name.";
} else{
$name = $input_name;
}
// Validate address address
$input_address = trim($_POST["address"]);
if(empty($input_address)){
$address_err = "Please enter an address.";

} else{
$address = $input_address;
}
// Validate salary
$input_salary = trim($_POST["salary"]);
if(empty($input_salary)){
$salary_err = "Please enter the salary amount.";

} elseif(!ctype_digit($input_salary)){
$salary_err = "Please enter a positive integer value.";
} else{
$salary = $input_salary;
}
// Check input errors before inserting in database
if(empty($name_err) && empty($address_err) && empty($salary_err)){
// Prepare an update statement
$sql = "UPDATE employees SET name=?, address=?, salary=? WHERE id=?";

mysqli_stmt_bind_param($stmt, "sssi", $param_name, $param_address, $param_salary,

$param_id);
// Set parameters
$param_name = $name;
$param_address = $address;
$param_salary = $salary;
$param_id = $id;
// Records updated successfully. Redirect to landing page

exit();
} else{
}
}
// Close statement
}
// Close connection
} else{
// Check existence of id parameter before processing further
if(isset($_GET["id"]) && !empty(trim($_GET["id"]))){
// Get URL parameter
$id = trim($_GET["id"]);
// Prepare a select statement
$sql = "SELECT * FROM employees WHERE id = ?";
// Set parameters
$param_id = $id;
$result = mysqli_stmt_get_result($stmt);
if(mysqli_num_rows($result) == 1){
/* Fetch result row as an associative array. Since the result set
contains only one row, we don't need to use while loop */
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);

// Retrieve individual field value
$name = $row["name"];
$address = $row["address"];
$salary = $row["salary"];
} else{
// URL doesn't contain valid id. Redirect to error page
exit();
}
} else{

}
}
// Close statement
// Close connection
} else{

exit();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Update Record</title>
<style>
.wrapper{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="row">
<h2 class="mt-5">Update Record</h2>
<p>Please edit the input values and submit to update the employee record.</p>
<form action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI'])); ?>"
method="post">
<label>Name</label>
<input type="text" name="name" class="form-control <?php echo (!empty($name_err)) ?
'is-invalid' : ''; ?>" value="<?php echo $name; ?>">
<span class="invalid-feedback"><?php echo $name_err;?></span>
</div>
<textarea name="address" class="form-control <?php echo (!empty($address_err)) ? 'is-
invalid' : ''; ?>"><?php echo $address; ?></textarea>
<span class="invalid-feedback"><?php echo $address_err;?></span>
</div>
<input type="text" name="salary" class="form-control <?php echo (!empty($salary_err)) ?

'is-invalid' : ''; ?>" value="<?php echo $salary; ?>">
<span class="invalid-feedback"><?php echo $salary_err;?></span>

</div>
<input type="hidden" name="id" value="<?php echo $id; ?>"/>
<input type="submit" class="btn btn-primary" value="Submit">
<a href="index.php" class="btn btn-secondary ml-2">Cancel</a>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
delete.php
<?php
// Process delete operation after confirmation
if(isset($_POST["id"]) && !empty($_POST["id"])){
// Prepare a delete statement
$sql = "DELETE FROM employees WHERE id = ?";
// Set parameters
$param_id = trim($_POST["id"]);
// Records deleted successfully. Redirect to landing page
exit();
} else{
}
}
// Close statement
// Close connection
} else{
// Check existence of id parameter
if(empty(trim($_GET["id"]))){
exit();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Delete Record</title>
<style>
.wrapper{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="row">
<h2 class="mt-5 mb-3">Delete Record</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="alert alert-danger">

<input type="hidden" name="id" value="<?php echo trim($_GET["id"]); ?>"/>
<p>Are you sure you want to delete this employee record?</p>
<p>
<input type="submit" value="Yes" class="btn btn-danger">
<a href="index.php" class="btn btn-secondary">No</a>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Main page:
Create record:
Update record:
Delete record:
View records:

Ilovepdf Merged PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ilovepdf Merged PDF

Uploaded by

Copyright:

Available Formats

Name : Zala Meet Enrollment no : 200420107097 Date : 11-04-2022

Subject code : 3160713 Subject : Web programming

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 1|Page

background-color: rgb(177, 238, 238);

<div>Enter user name:<br></div>

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 2|Page

<div class="hey2" align="center">Login</div><br>

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 3|Page

<div>Enter user name:<br></div>

<div class="hey2" align="center">Register</div><br>

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 6|Page

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 8|Page

font-family: Georgia, 'Times New Roman', Times, serif;

technical knowledge so that they are the best in industry...</q></p>

<p align="center"><button id="btn">UPDATES'20 REPORT</button></p>

<div id="d1" align="center">

(3) Design your own website / portfolio / blog using bootstrap.

border: 2px solid rgb(202 201 163);

<button class="btn">Call us now</button>

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 1|Page

Problem Statement2: Write a javascript program to demo of local and global

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 2|Page

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 3|Page

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 4|Page

for (var i = 2; i <= Math.sqrt(number); i++) {

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 5|Page

Problem Statement5: Write a javascript program to calculate of a person age. Take

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 6|Page

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 8|Page

Practical 5.2 : JavaScript

7. Write a javascript function to find factorial of a given number and

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 1|Page

document.getElementById("ans").innerHTML = "FACTORIAL OF GIVEN NUMBER " +

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 2|Page

<h2>ARRAY OBJECTS FUNCTIONS</h2>

var arr = [10,20,30,50,90,60,70,40,80,100];

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 3|Page

var len = arr.length;

document.write("POP OPERATION ON ARRAY OBJECT");

<h2>STRING OBJECTS FUNCTIONS</h2>

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 4|Page

var len = s.length;

var low = s.toLowerCase();

var slice = s.slice(0,4);

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 5|Page

var replace = s.replace("Jayanshu", "I am Jayanshu");

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 6|Page

9. Create javascript that scroll some message in Status window of

<h1>Scrolling Message Example</h1>

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 7|Page

10. Write a javascript program to change the background color of

<h2>Changing Background Colour...</h2>

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 8|Page

11. Create a webpage containing one button. clicking on this button

<title>Changing the Windows Property</title>

<h2>The Window Object</h2>

<h3>The resizeBy() Method</h3>

<h4>Open a new window, and resize it to 400 * 400 : </h4>

<button onclick="openWin()">Create Window</button>

<button onclick="resizeWin()">Resize Window</button>

<button onclick="moveWin()">Move Window</button>

myWindow = window.open("", "", "width=500, height=300");

SCET/CO/2022-23/EVEN/BE Div-2/Sem-VI 9|Page