Scribd
Upload
107 views

WT Lab Manual

The student created a class timetable for Division I of 6th semester using HTML table tags. The timetable spans Monday to Friday and lists the subjects from 10:30AM to 5:15PM in half hourly slots. It also includes the subject codes, names and faculty names in the last column.

Uploaded by

Dev Sejvani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
107 views

WT Lab Manual

The student created a class timetable for Division I of 6th semester using HTML table tags. The timetable spans Monday to Friday and lists the subjects from 10:30AM to 5:15PM in half hourly slots. It also includes the subject codes, names and faculty names in the last column.

Uploaded by

Dev Sejvani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

CERTIFICATE

This is to certify that Shri/Ms.

Of Branch in Semester S
Enrolment No. has satisfactorily
completed the term work in subject code subject
name within four walls of
Vishwakarma Government Engineering College, Chandkheda.

Date of Submission:ddddddddddddddddd

Subject in charge:ddddddddddddddddddddd Sign:

Head of Department: dddddddddddddddddddd


VISHWAKARMA GOVERNMENT ENGINEERING COLLEGE

ELECTRONICS AND COMMUNICATION DEPARTMENT


WEB TECHNOLOGY (SUBJECT CODE: 3161012)

LIST OF PRACTICALS

SR No. Name of Practical Page Date Sign


no.
1. Create your resume using HTML tags. Experiment with
colours, text, link, andalso other tags you studied.
2. Design static web pages for your college containing a
description of the courses,departments, faculties, library etc.
Provide links for navigation among pages.
3. Create your class timetable using table tag.
4. Create user feedback form using textbox, textarea, checkbox,
radio button, selectbox,button etc.
5. Create a web page using frame. Divide the page into two
parts with Navigation links on left hand side of page
(width=20%) and content page on right hand sideof page
(width= 80%). On clicking the navigation Links
corresponding content must be shownon the right‐ hand
side.
6. Write html code to develop a webpage having two frames that
divide the webpageinto two equal rows and then divide the
row into equal columns fill each frame with a different
background color.
7. Use External CSS to format your class timetable as you
created in practical no 03.
8. Use External, Internal, Inline CSS to format college web page
that you created inpractical no 02.
9. Develop a java script to display Current date and time
dynamically.
10. Develop simple calculator for addition, subtraction,
multiplication and divisionoperation using java script.
11. Create HTML Page with java script which takes Integer
number as input and tellswhether the number is Prime or not.
12. Write a PHP script for user authentication using PHP‐
MYSQL. Use sessionfor storing username.
13. Create a login form, after login maintain the session, user
should be kept loginfor 5 mins (Either on click event and
using timer). Then after user should be automatically logged
out and redirected to login page
Web Technology (3161012) Enrollment No: 190170111061

Practical: 1
Aim: Create your resume using HTML tags. Experiment with colors, text, link,
and also other tags you studied.

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>RESUME</title>
<style> body
{

font-family: Tahoma;
} a {
text-decoration: none; color: black;
} hr
{

border-width: 10px; border-bottom-color: rgb(41, 41, 41); border-top-


color: rgb(41, 41, 41);
}
</style>
</head>
<body>
<h3 style="text-align: center; font-weight: lighter; color: black;"> Resume
</h3>

<p>
<h2>Anupam Mathur </h2>
<b>Email: </b><a href="mailto: aannuuppaamm11@gmail.com"
target="_blank">aannuuppaamm11@gmail.com</a>
<br>
<b>Contact Number: </b>+91 8989068956
<br>
</p>
<hr>
<p>
<h2><u>About </u></h2>
<h3 style="font-weight: 200; text-align: justify;">
To work in a challenging and dynamic environment and to keep adding value to
the organization that I represent and serve, while also concurrently
upgrading my skills and knowledge.
Good communicator,
Quick learner with crisp problem solving and analysis skills.

1|Page
Web Technology (3161012) Enrollment No: 190170111061

</h3>
</p>
<br>
<p>
<h2><u>Education</u></h2>
<b style="color: rgb(41, 41, 41);">Vishwakarma Government Engineering
College</b><br>
Bachelor of Engineering - BE, Electronics and Communications Engineering<br>
2019-2023
<br>
<br>
<b style="color: rgb(41, 41, 41);">Hillwoods School </b><br>

Secondary School Education<br> 2019<br>


<br>CBSE 89% </p>
<br>
<p>
<h2><u>Skills</u></h2>
<b>1.</b> MATLAB & Simulink<br>
<b>2.</b> Python Programming<br>
<b>3.</b> C Language Programming<br>
<b>4.</b> HTML<br>
<b>5.</b> Verilog<br>
<b>6.</b> Arduino Programming<br>
</p>
<p>
<h2><u>Activity </u></h2>
<b>1.</b> Playing Cricket,Footbal <br>
<b>2.</b> Listening Music <br>
<b>3.</b> Reading books<br>
<b>4.</b> Exploring new places<br>
<b>5.</b> Solving Rubik's Cube<br>
</p>
</body>
</html>

2|Page
Web Technology (3161012) Enrollment No: 190170111061

OUTPUT:

3|Page
Web Technology (3161012) Enrollment No: 190170111061

4|Page
Web Technology (3161012) Enrollment No: 190170111061

Practical: 2
Aim: Design static web pages for your college containing a description of
the courses, departments, faculties, library etc. Provide links for navigation
among pages

CODE:

<html>

<head>

<title> VGEC
</title>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">

</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/5.13.1/css/all.min.css">
<style> * { margin: 0; padding: 0; box-sizing:
border-box;

} ul

border: 1px solid; width: 100%; list-style-type: none; background-color:


#f1f1f1;
}

li {

display: inline-block; font-size: 20px; font-family: Arial, Helvetica, sans-


serif; padding: 6px; margin: 0 50px;
}

li a {

color: black; text-decoration:

none;

} li a:hover { color: #6aa1e9;


} section { margin-top: 100px; text-align: center; font-family: 'Gill Sans',
'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
} section h1, h2 { margin-top: 30px;
} section p

5|Page
Web Technology (3161012) Enrollment No: 190170111061

line-height: 30px;

</style>

</head>

<body>

<ul>

<li><a href="WD_B3_19_21_2.html">Home</a></li>

<li><a href="WD_B3_19_21_2_1.html">Course</a></li>

<li><a href="WD_B3_19_21_2_2.html">Departments</a></li>

<li><a href="WD_B3_19_21_2_3.html">Library</a></li>

</ul>

<section>

<H1>Welcome TO VGEC</H1>

<p>

Vishwakarma Government Engineering College, Ahmedabad was established in


August 1994, with an objective of imparting higher education in various
fields of engineering and technology. This institute is recognized by All
India Council of Technical Education

(AICTE), New Delhi and Institute of Engineers (India). The college is


administrated by Directorate of Technical Education, Gujarat State,
Gandhinagar and is affiliated with Gujarat Technological University. VGEC
shifted to its own campus at
Chandkheda, Ahmedabad in the year 2004.

</p>

<h2>MISSION</h2>

<p>

To develop state-of-the-art laboratories and well-equipped academic


infrastructure.</p>

<p> To motivate faculty and staff for qualification up-gradation, and


enhancement of subject knowledge.</p
<p>To promote research, innovation and real life problem solving skills.</p>

6|Page
Web Technology (3161012) Enrollment No: 190170111061

<p> To strengthen linkages with industries, academic and research


organizations.</p>

<p>To reinforce concern for sustainability, natural resource conservation and


social responsibility.
</p>

</section>

</body>

</html>

7|Page
Web Technology (3161012) Enrollment No: 190170111061

Output

8|Page
Web Technology (3161012) Enrollment No: 190170111061

Practical: 3

Aim: Create your class timetable using table tag.

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>Division I timetable</title>

<style>

table, th, td

border: 1px solid black;

border-collapse: collapse;

padding: 0.2cm; text- align: center;


}

th

border: 2px solid black;

</style>

9|Page
Web Technology (3161012) Enrollment No: 190170111061

</head>

<body>

<h2 style="text-align: center;">6th Sem, Division I</h2>

<br />

<table style="width: 100%;">

<tr>

<th>Day/Time</th>

<th>10:30 - 11:30</th>

<th>11:30 - 12:30</th>

<th>01:00 - 02:00</th>

<th>02:00 - 03:00</th>

<th>03:15 - 05:15</th>

<th>Subjects/Faculties</th>

</tr>

<!-- Mon -->

<tr>

<td style="border: 2px solid black;"><b>Monday</b></td>

<td>AP - GRA</td>

<td>FOC - UNF</td>

<td>CN - JKN</td>

<td>WT - ARA</td>

<td>AP - GRA</td>

<td rowspan="6" style="text-align: left;"><b>Subject Name:<br/></b>

1. FOC:Fiber Optic Communication <br/>(3161005)<br/> 2.AP: Antennas and


Propagation <br/>(3161003)<br/>
3. CN: Computer Networks <br/>(3161007)<br/>

4. ES: Embedded Systems <br/>(3161010)<br/>

5. WT: Web Technology <br/>(3161012)<br/>


10 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

6. IPDP: Integrated Personality Development Program <br/>(3160002)<br/>

7. DE-2B: Design Engineering II B <br/>(3160001)

<br/><br/><br/>

<b>Faculty Name:<br/></b>

1. KRT: Kiran Trivedi<br/>

2. RMP: Rahul Patel<br/>

3. UNF: Urvisha Fatak<br/>

4. JKN: Jagruti Naik<br/>

5. NPP: Naresh Patel<br/>

6. KNP: Ketan Patel<br/>

7. AMP: Alpesh Patel<br/>

8. GRA: Gaurav Asari<br/>

9. JJM: Jagruti Makwana<br/>

10. ARA: Amit Agrawal<br/>

11. KBC: Kalpesh Chaudhary<br/>

12. JND: Jayesh Diwan<br/>

</td>

</tr>

<!-- Tue -->

<tr>

<td style="border: 2px solid black;"><b>Tuesday</b></td>

<td>FOC - UNF</td>

<td>IPDC - NPP</td>

<td>AP - GRA</td>

<td>ES - RMP</td>

<td>FOC - UNF</td>

</tr>
11 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

<!-- Wed -->

<tr>

<td style="border: 2px solid black;"><b>Wednesday</b></td>

<td>CN - JKN</td>

<td>AP - JJM</td>

<td>IPDC - AMP</td>

<td>ES - RMP</td>

<td>WT - KBC</td>

</tr>

<!-- Thu -->

<tr>

<td style="border: 2px solid black;"><b>Thursday</b></td>

<td>ES - JND</td>

<td>FOC - UNF</td>

<td>CN - KRT</td>

<td>AP - JJM</td>

<td>ES - RMP</td></td>

</tr>

<!-- Fri -->

<tr>

<td style="border: 2px solid black;"><b>Friday</b></td>

<td> </td>

<td>WT - KBC</td>

<td colspan="2">DE-2B-NPP</td>

<td>CN - JKN</td>

</tr>

12 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

<!-- Sat -->

<tr>

<td style="border: 2px solid black;"><b>Saturday</b></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

13 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

OUTPUT:

14 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 4

Aim: Create user feedback form using textbox, text area, checkbox, radio
button, select box, button etc.

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>HTML Forms</title>

</head>

<body>

<h2 style="text-
align: center;">HTML form containing: textbox, textarea, radio button,
checkbo x and button</h2>

<br/> <br

/>
<form>

<label for="name">Name: </label>

<input type="text" id="name" name="name"><br/>

<br />

<label for="w3review">Write Something about yourself: </label><br />

<textarea name="detail" rows="5" cols="50"></textarea>

<br/>

<br />
Select Gender:<br />

15 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

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

<label for="male">Male</label><br>

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

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

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

<label for="other">Other</label>

<br/>
<br />
Take any two courses:<br />

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<label for="vehicle1">course on python </label><br>

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2">course on web development</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3">course on verilog </label>

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

</form>

</body>

</html>

16 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

OUTPUT:

17 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

18 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 5
Aim: Create Webpage using frame. Divide the page into two parts with
navigation links on left hand side of page(width=20%) and current page on right
hand side of page(width=80%).on clicking the navigation links corresponding
content must be shown on the right hand side.

CODE:

<!DOCTYPE html>
<html>
<head>
<title>Frames</title>
</head>
<body>
<div style="float: left; width: 20%; height: 100vh;">
<ol>
<li><a style="font-size:x-large" href="Timetable.html"
target="screen">TimeTable</a></li>
<li><a style="font-size:x-large" href="resume.html"
target="screen">Resume</a></li>
<li><a style="font-size:x-large" href="vgec.html"
target="screen">VGEC</a></li>
</div>
<div style="float: right; width: 80%; height: 100vh;">
<iframe name="screen" style="width: 100%; height:
100vh;"></iframe>
</div>
</body>
</html>

19 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

OUTPUT:

Before clicking on any link

On clicking TimeTable (Link 1)

On clicking VGEC (Link 3)

20 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 6

Aim: write html code to develop a webpage having two frames that divide
the webpage into two equal rows and then divide the row into equal
columns fill each frame with a different background color.

CODE:
<html>
<head>
<title>Nested frame</title>
</head>
<frameset rows="50%,*">
<frameset cols="25%,25%,25%,*">
<frame style="background-color: black ">
<frame style="background-color: white;" >
<frame style="background-color: black; ">
<frame style="background-color: white; ">
</frameset>
<frameset cols="25%,25%,25%,* ">
<frame style="background-color: white; ">
<frame style="background-color: black; ">
<frame style="background-color: white; ">
<frame style="background-color: black; ">
</frameset>
</frameset>
</html>
OUTPUT:

21 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

22 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 7

Aim: Use External CSS to format your class timetable as you created in
practical no 03

NOTE: For External CSS just add the following highlighted link to an external CSS file
{here styles.css} in the head tag of the HTML webpage for class timetable created in
practical 03.

CODE:

<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" href="styles.css">

<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>Division I timetable</title>

</head>

Contents of styles.css

h2{

font-family: Copperplate, Papyrus, fantasy;


}

body{

background-color: blanchedalmond;
}

table, th, td

border: 1px solid black;

23 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

border-collapse: collapse;

padding: 0.2cm; text- align: center;

background-color: cyan;
font-family: Garamond, serif;

th

border: 2px solid black;


background-color: coral;

Output:

24 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 8
Aim: Use External, Internal, Inline CSS to format college web page that you
created in practical no 02

Note: The contents of <style>tag consists of Internal CSS. For External CSS
A link to an external stylesheet {here: styles.css} has been added in the <head>
Tag of the HTML file whereas for Inline CSS various elements are provided with
Nested <style> element.

CODE:
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="styles.css">

<title> VGEC</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box;

} ul {

border: 1px solid; width: 100%; list-style-type: none;


background-color: #f1f1f1;

li {
25 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

display: inline-block; font-size: 20px; font-family: Arial,


Helvetica, sans-serif; padding: 6px; margin: 0 50px;

li a {

color: black; text-decoration: none;

} li a:hover { color: #6aa1e9;

} section { margin-top: 100px; text-align: center; font-family:


'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-
serif;

} section h1, h2 { margin-top: 30px;

section p {

line-height: 30px;

</style>

</head>

<body>

26 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

<ul>

<li style="font-family: Lucida handwriting, cursive;"><a


href="WD_B3_19_21_2.html">Home</a></li>

<li style="font-family: Lucida handwriting, cursive;"><a


href="WD_B3_19_21_2_1.html">Course</a></li>

<li style="font-family: Lucida handwriting, cursive;"><a


href="WD_B3_19_21_2_2.html">Departments</a></li>

<li style="font-family: Lucida handwriting, cursive;"><a


href="WD_B3_19_21_2_3.html">Library</a></li>

</ul>

<section>

<H1 style="font-family: Lucida handwriting, cursive;">Welcome TO


VGEC</H1>

<p id="para1">

Vishwakarma Government Engineering College, Ahmedabad was


established in August 1994, with an objective of imparting
higher education in various fields of engineering and
technology. This institute is recognized by All India Council of
Technical Education

(AICTE), New Delhi and Institute of Engineers (India). The


college is administrated by

27 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Directorate of Technical Education, Gujarat State, Gandhinagar


and is affiliated with Gujarat Technological University. VGEC
shifted to its own campus at

Chandkheda, Ahmedabad in the year 2004.

</p>

<h2 style="font-family:Lucida Handwriting,cursive;">MISSION</h2>

<p id="para2">

To develop state-of-the-art laboratories and well-equipped


academic infrastructure.<br>

To motivate faculty and staff for qualification up-gradation,


and enhancement of subject knowledge.<br>

To promote research, innovation and real life problem solving


skills.<br>

To strengthen linkages with industries, academic and research


organizations.<br>

To reinforce concern for sustainability, natural resource


conservation and social responsibility.<br>

</p>

</section>

</body>

</html>

28 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Output:

29 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

30 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 9

Aim: Develop a java script to display Current date and time dynamically.

CODE:

<!DOCTYPE html>

<html>
<head>
<style>

h1{

font-family: "lucida handwriting",cursive;


}

#p2,#p1{

font-family: "lucida console",Monospace;


}

</style>
</head>

<body>

<h1>current date and time</h1>

<p id="p1"></p>

<p id="p2">This example shows the current date and time using
Javascript</p>

<script>

var today = new Date();

31 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-


'+today.getDate();

var time = today.getHours() + ":" + today.getMinutes() + ":" +


today.getSeconds(); var dateTime = date+' '+time;
document.getElementById("p1").innerHTML=dateTime;
</script>

</body>

</html>

OUTPUT:

32 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 10
Aim: Develop simple calculator for addition, subtraction, multiplication and
division operation using java script

CODE:

<!DOCTYPE html>

<html lang = "en">

<head>

<title> JavaScript Calculator </title>

<style> h1 {
text-align: center; padding: 23px;
background-color: coral; color: white;
}

#clear{
width: 270px;
border: 3px solid gray; border-radius: 3px; padding: 20px; background-color:
gold;
font-family:"lucida console",monospace;
}

.formstyle

width: 300px;

height: 530px; margin: auto;


border: 3px solid skyblue; border-radius: 5px; padding: 20px;
}

input

width: 20px;

background-color: green; color: white;


border: 3px solid gray; border-radius: 5px; padding: 26px; margin: 5px;
font-size: 15px;

33 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

#calc{

width: 250px;

border: 5px solid black; border-radius: 3px; padding: 20px; margin: auto;
}

</style>

</head>

<body>

<h1 style="font-family:lucida handwriting,cursive;"> Calculator Program in


JavaScript </h1>

<div class= "formstyle">

<form name = "form1">

<!-- This input box shows the button pressed by the user in calculator. -->

<input id = "calc" type ="text" name = "answer"> <br> <br>

<!-- Display the calculator button on the screen. -->

<!-- onclick() function display the number prsses by the user. -->

<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">

<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">

<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">

<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">

<br> <br>

<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">

<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">

<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">

<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">

<br> <br>

<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">

34 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">

<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">

<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">

<br> <br>

<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">

<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">

<input type = "button" value = "." onclick = "form1.answer.value += '.' ">

<!-- When we click on the '=' button, the onclick() shows the sum results on
the calculator screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value =
eval(form1.answer.value) ">
<br>

<!-- Display the Cancel button and erase all data entered by the user. -->

<input type = "button" value = "Clear All" onclick = "form1.answer.value = '


' " id= "clear"
>

<br>

</form>

</div>

</body>

</html>

35 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

OUTPUT:

36 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 11

Aim: Create HTML Page with java script which takes Integer number as input
and tells whether the number is Prime or not.

CODE:
<html>

<head>

<style>

h1{

margin-top: 150px;
}
</style>

<script>

function Prime()

var i,flag=0,number;

number = Number(document.getElementById("N").value); for(i=2; i


<= number/2; i++)
{

if(number%i == 0)

flag = 1; break;
}}

if(flag == 0)

window.alert("prime number");

else

window.alert("not a Prime number");


37 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

}}

</script>

</head>

<body>

<br>

<h1 style="font-family: lucida handwriting,cursive">Check


Whether a number is Prime or not</h1> <p style="font-family:
lucida console,monospace">Enter Number :</p><input type="text"
name="n" id = "N"/>
<button onClick="Prime()">submit</button>

</body>

</html>

OUTPUT:

38 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 12

Aim: Write a PHP script for user authentication using PHP-MYSQL. Use
session for storing username.

CODE:
Connect.php

<?php

$server = "localhost";

$user = "root";

$password = "";

$db = "wd";

$conn = new mysqli($server,$user,$password,$db); if(!$conn)

die("Error Connecting Database");

?>

Login.php

<?php require 'connect.php'; require 'header.php'; require

'footer.php'; session_start();

$message = '';

if(isset($_POST["username"]) && isset($_POST["password"])) {

$username = $_POST["username"]; $password =

$_POST["password"];

39 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

$sql = "SELECT * FROM user WHERE user_name = '$username' AND


pass word

= '$password'";

$result = $conn->query($sql);

$rows = @$result>num_rows; if($rows !=

0) {

$_SESSION['username'] = $username; header('Location:

loggedon.php');

} else {

$message = "Username or password is incorrect";

?>

<div class="container">

<div class="card mt-2">

<div class="card-header">

<h2>

Login

</h2>

</div>

<div class="card-body">

<form method="POST" action="login.php">

<div class="form-group">
40 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

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

<input type="text" name="username" class="form- control"


id="exampleInputEmail1" aria-describedby="emailHelp" required >

<small id="emailHelp" class="form-text text- muted">We'll never


share your email with anyone else.</small>

</div>

<div class="form-group">

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

<input type="password" name="password" class="form- control"


id="exampleInputPassword1" required >

</div>

<button type="submit" class="btn btn-primary">Submit</button>

<?php if(!empty($message)): ?>

<div class="alert alert-danger mt-2">

<?= $message ?>

</div>

<?php endif; ?>

</form></div>

</div>

</div> Loggedon.php

<?php require 'header.php'; require 'footer.php';

?>

41 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

<div class="container-fluid">

<div class="alert alert-success mt-2"> You are successfully


logged in

</div>

<a href="login.php" class="btn btn-info">Logout</a>

</div>

OUTPUT:

42 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

Practical: 13
Aim: Create a login form, after login maintain the session, user should be
kept login for 5 mins (Either on click event and using timer). Then after
user should be automatically logged out and redirected to login page.

CODE:

Login.php <?php

error_reporting( E_ALL &

~E_NOTICE );

?>

<style> * { box-

sizing: border-

box;

body{ background-

color: pink;

} input[type=password],input[type=email], select,

textarea { width: 100%; padding: 12px; border: 1px solid

#ccc; margin-top: 6px; margin-bottom: 16px; resize:

vertical;

input[type=submit] { background-

color: #4CAF50; color: white;

padding: 12px 20px; border: none;

cursor: pointer;

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

43 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

.container { border-radius: 5px;

background-color: #f2f2f2; padding: 10px;

@media screen and (max-width: 600px) {

.column, input[type=submit] {

width: 100%; margin-top: 0;

.form{ margin-left: 200px; margin-right:

200px; padding- left:100px; padding-

right:100px;

</style>

<div class="container">

<div style="text-align:center" width="">

<h2>Login here</h2>

<form action="prac9_2.php" class="form" method="post">

<label style="color:red;"><?php echo $_GET['message'];?></label><br>

<label for="fname">Email</label>

<input type="Email" id="fname" name="email" placeholder="Your Email..">

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

<input type="password" id="fname" name="password" placeholder="Your


password..">
<input type="submit" value="Login"name="submit">

</form>

</div>

</div>

Logout.p

hp
44 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

<?php session_destroy();

$message = "Sorry !!!! Your session timed out";

header("location: login.php?message=$message");

?>

Display.php

<?php session_start();

error_reporting( E_ALL & ~E_NOTICE );

?>

<style> * { box-sizing:

border-box;

} input[type=password],input[type=email], select,

textarea { width: 100%; padding: 12px; border: 1px solid

#ccc; margin-top: 6px; margin-bottom: 16px; resize:

vertical;

input[type=submit] { background-color: #4CAF50; color:

white; padding: 12px 20px; border: none; cursor:

pointer;

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

border-radius: 5px; background-color: #f2f2f2; padding: 10px;

@media screen and (max-width: 600px) {

.column, input[type=submit] {

width: 100%; margin-top: 0;

45 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

.form{ margin-left: 200px; margin-right: 200px; padding-

left:100px; padding- right:100px; }

</style>

<div class="container">

<div style="text-align:center" width="">

<h2><?php echo "Welcome".$_SESSION["name"]; ?></h2>

<label> You will be redirected to login page after 5 mins</label>

</div>

</div>

<script> window.onload=function(){ window.setTimeout(function()

{ redirect(); }, 5000*60);

};

function redirect() { window.location = "logout.php";

</script>

prac9_2.p

hp

<?php

$email = $_POST["email"]; $password =

$_POST["password"];

if(($email=='parth@gmail.com')&&($password

=='123')){ session_start();

$_SESSION['id'] = session_id();

$_SESSION['name']= $name;

$_SESSION["login_time_stamp"]=time(); header("location: display.php");

?>

46 | P a g e
Web Technology (3161012) Enrollment No: 190170111061

OUTPUT:

47 | P a g e

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy