0% found this document useful (0 votes)
44 views36 pages

Full Stack Development Lab Manual

Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
44 views36 pages

Full Stack Development Lab Manual

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

SRI RAMAKRISHNA INSTITUTE OF

TECHNOLOGY
(An Autonomous Institution)
(Approved by AICTE – New Delhi, Affiliated to Anna University - Chennai)
Pachapalayam, Perur Chettipalayam, Coimbatore

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

LAB MANUAL

VI – SEMESTER

20CS015 – FULLSTACK PROGRAMMING LABORATORY

—Ms. V. Preetha

Assistant Professor

Department of Computer
Science and Engineering
FULL STACK PROGRAMMING LABO L T P C
20CS015
RATORY 0 0 4 2

This course will enable the students to learn Front end and back end programming and to develop dynamic and
interactive websites / web applications using internet technologies

LIST OF EXPERIMENTS:

1. Creation of static and functional websites using HTML5 and CSS3 that could pass W3C validation. Include
maps and images.
2. Creation of webpage / website that employs advanced aesthetic effects supported by CSS3.
3. Creation of Interactive web page / website using JavaScript and employing DOM manipulation and Event
Handling features of JavaScript
4. Creation of dynamic website like Online result portal using Java Servlet as server-side scripting language.
Implementation should also include database access.
5. Creation of dynamic webpage that provides count of number of unique visitors to the website. Use the
concept of cookies and use Java Servlet as server-side scripting language.
6. Creation of dynamic web page that provides user session management. Use PHP as server-side scripting
language.
7. Create a single page web application using AJAX.

COURSE OUTCOMES:

At the end of the course, the students will have the

CO1: Ability to learn the structure of web application development. CO1: Ability to implement a static
website with latest W3C standards
CO2: Ability to implement an interactive website with client-side programming
CO3: Ability to implement a dynamic web page / web application with database access and session management.

REFERENCES:

1. Deitel and Deitel and Nieto, “Internet and World Wide Web - How to Program”, Prentice Hall, 5th Edition,
2012.
2. Jeffrey C. Jackson, Web Technologies A Computer Science Perspective, 1st edition, Pearson Education,
2011.
3. Chris Bates, Web Programming: Building Internet Applications, 3rd Edition, Wiley India Pvt. Limited,
2007.
4. Robert W. Sebesta, Programming the World Wide Web, 7th Edition, Pearson, 2013.
5. Eric Freeman, Elisabeth Robson, Head First HTML5 Programming, Building Web Apps with JavaScript,
1st Edition, O'Reilly Media, Incorporated, 2011.
6. Jason Hunter, William Crawford, Java Servlet Programming, 2nd Edition, O'Reilly Media, 2010.
1. Creation of static webpage
<!DOCTYPE html>

<html>
<head>

<title>My Personal Diary</title>

<meta charset=”UTF-8”>

</head>

<body>

<h1>Personal Diary 2023 &#128212</h1>

<hr>

<h2>January 2023</h2>

<hr>

<h3>Calender</h3>

<table>

<thead>

<caption>Monthly calender</caption>

<tr>

<th colspan=”7”>January 2023</th>

</tr>

</thead>

<tbody>

<tr>

<td>Sunday</td>

<td>Monday</td>

<td>Tuesday</td>

<td>Wednesday</td>

<td>Thursday</td>

<td>Friday</td>
<td>Saturday</td>

</tr>

<tr>

<td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td>

</tr>

<tr>

<td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td>

</tr>

<tr>

<td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td>

</tr>

<tr>

<td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td>

</tr>

<tr>

<td>29</td><td>30</td><td>31</td><td colspan=”3”>End of month January</td>

</tr>

</tbody>

</table>

<h3>Activity logs</h3>

<ul>

<li>January 1 New year Holiday. But unfortunately happens to be on Sunday</li>

<li>Submission of DVV Completed on 2.01.2023</li>

<li>Submission and Verification of AQAR completed on 25.01.2023</li>

</ul>

<h3>To Do Activities in order of Priority</h3>

<ol>

<li>&#10004Submission of lecture plan</li>

<li>&#10004Submission of UAF and SLT</li>


<li>&#10004Submission of Time table</li>

<li>&#10060Submission of Question Paper for vetting</li>

</ol>

<h3>References</h3>

For creation of this website I used<br>

The following reference

<ol>

<li> <a href=[Link] W3 Schools Tutorial</a></li>

<li> <a href=[Link] Tutorials Point </a></li>

</ol>

<h3>My Instituition</h3>

<p>SRIT is one among the most eminent Educational Institutions in Coimbatore district. SRIT is
recognized as one of the leaders in Engineering Education, Research and Application of knowledge for
the betterment of the society and the country. The college has imprinted a position in the Engineering
Education by creating graduates to the industry and the society. Since its inception in the year 2002, the
institution has been continuously motivated to make a permanent mark in the education field by
creating technocrats, sound in Academics and Value system.</p>

<img src=”[Link]” alt=”srit college”>

</body>

</html>
2. Cascading style sheet

<!DOCTYPE html>

<html>
<head>

<title> PROFILE </title>

<link rel=”stylesheet” href=”[Link]”>

<style>

Table, th, td {

Border: 1px solid black;

</style>

</head>

<style>

H1 {color:red;}

H2 {color:blue;}

</style>

<body>

<img src=”[Link]” alt=”photo” align=”right”>

<h1> <b>DEEPADHARSHINI S</b> </h1>

<p><i>Sri Ramakrishna Institute of Technology</i></p>

<p> 3<sup>rd</sup>year CSE A</p>

<p><i>Department of computer science and engineering</i></p>

<hr style=”height:2px;border-width:0;color:gray;background-color:gray”>

<h2> ABOUT MYSELF: </h2>

<p> Myself [Link] currently pursuing my degree at SRI RAMAKRISHNA INSTITUTE OF


TECHNOLOGY.I have completed my schooling at CHAVARA VIDYA BHAVAN,Coimbatore.I hope I am
doing well till now and I like to be placed in a software company.I till want to improve myself and gain
more knowledge. </p>

<hr style=”height:2px;border-width:0;color:pink;background-color:gray”>

<h2> SKILLS: </h2>

<ul>

<li>C</li>

<li>C++</li>
<li>JAVA</li>

</ul>

<hr style=”height:2px;border-width:0;color:gray;background-color:gray”>

<h2> EXTRA CURRICULAR ACTIVITIES:</h2>

<ol>

<li>Drawing</li>

<li>Gardening</li>

<li>Helping others</li>

</ol>

<hr style=”height:2px;border-width:0;color:gray;background-color:gray”>

<h2> EDUCATION QULIFICATION: </h2>

<table>

<tr>

<th>QUALIFICATION</th>

<th>PERCENTAGE</th>

</tr>

<tr>

<td>CSE(cgpa)</td>

<td>8.4%</td>

</tr>

<tr>

<td>12TH</td>

<td>74.5%</td>

</tr>

<tr>

<td>10th</td>

<td>91.8%</td>

</tr>

</table>
<hr style=”height:2px;border-width:0;color:gray;background-color:gray”>

<h2> CONTACT DETAILS: </h2>

<P><i> coimbatore </i><p>

<p><i>deepadharshini.2002@[Link] </i></p>

<hr style=”height:2px;border-width:0;color:gray;background-color:gray”>

</body>

</html>

[Link]

Body

Background-color: #ffca33;

Img{ Width:2

00px;

Height:200px;

Align=”right”;

3. Inserting map image in website

Image_map.html:

<html>

<head>

<title>IMAGE MAP</title>

</head>

<body>

<img src=”india_map.jpg” usemap=”#statemap” >

<map name=”statemap” id=”statemap”>


<area href=’[Link]’

Shape=’circle’

Coords=’175,495,30’

Title=’Tamilnadu’/>

<area href = “[Link]”

Shape = “rect”

Coords = “100,400,150,450”

Title = “Karnataka” />

<area href = “[Link]”

Shape = “poly”

Coords = “150, 415, 175,348,265,360,190,420,190,440”

Title = “AndhraPradesh” />

<area href = “[Link]”

Shape = “poly”

Coords = “108,455,150,515,115,490,148,495,110,448,155,501”

Title = “Kerala” />

</map></body></html>

[Link]:

<html>

<head>

<title>ABOUT TAMIL NADU</title>

</head>

<body>

<center>

<h1>TAMIL NADU</h1>

</center>

<hr>

<ul>

<li>Area : 1,30,058 sq. kms.</li>


<li>Capital : Chennai</li>

<li>Language : Tamil</li>

<li>Population : 6,21,10,839</li>

</ul>

<hr>

<a href=’image_map.html’>India Map </a>

</body>

</html>

[Link]:

<html>

<head>

<title>ABOUT KARNATAKA</title>

</head>

<body>

<center>

<h1>KARNATAKA</h1>

</center>

<hr>

<ul>

<li>Area : 1,91,791 sq. kms</li>

<li>Capital : Bangalore</li>

<li>Language : Kannada</li>

<li>Population : 5,27,33,958</li>

</ul>

<hr>

<a href=’image_map.html’>India Map</a></body></html>


[Link]:

<html>

<head>

<title>ABOUT ANDHRAPRADESH</title>

</head>

<body>

<center>

<h1>ANDHRA PRADESH</h1>

</center>

<hr>

<ul>

<li>Area : 2,75,068 sq. kms</li>

<li>Capital : Hyderabad</li>

<li>Language : Telugu</li>

<li>Population : 7,57,27,541</li>

</ul>

<hr>

<a href=’image_map.html’>India Map</a></body></html>

4. Email and Mobile number validation using javascript

<html>

<head>

<script type=”text/javascript”>

Function validate()

Var email = [Link][“myform”][“email”].value;

If(email==””){

Alert(“Please enter the email”);


Return false;

}else{

Var re = /^(?:[a-z0-9!#$%&amp;’*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;’*+/=?^_`{|}~-]+)*|”(?:[\x01-
\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*”)@(?:(?:[a-z0-9](?:[a-
z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-
9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-
\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;

Var x=[Link](email);

If(x){

}else{

Alert(“Email id not in correct format”);

Return false;

Var mobile = [Link][“myform”][“mobile”].value;

If(mobile==””){

Alert(“Please enter the mobile”);

Return false;

}else{ If(isNaN(m

obile)){

Alert(“Mobile number not valid”);

Return false;

</script>

</head>

<body>

<center>
<h1>Java Script Form validation Test</h1>

<h3>Sign Up Form</h3>

<form name=”myform” action=”[Link]” onsubmit=”return validate()” method=”post”>

Name : <input type=”text” name=”name”/><br>

Email : <input type=”text” name=”email”/><br>

Mobile : <input type=”text” name=”mobile”/><br>

Address : <textarea name=”address”></textarea><br>

<input type=”submit” value=”Submit”>

</form>

</center>

</body>

</html>

5. Create a Web page that displays the marks scored by students in semester exam using
HTML table. Use JavaScript to perform the following
a. Read the marks.
b. Calculate the total marks and Print the total along with average mark.
c. Print the result Pass / Fail in the next column.
<!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>Experiment-5</title>

</head>

<body>

<table>

<center>

<caption><b>Mark Statement</b></caption>

<tr>
<th>Name</th>
<th>Tamil</th>

<th>English</th>

<th>Maths</th>

<th>Science</th>

<th>Social Science</th>

</tr>

<tr>

<td><input type=”text” id=”aname”></td>

<td><input type=”number” id=”ta”></td>

<td><input type=”number” id=”E”></td>

<td><input type=”number” id=”M”></td>

<td><input type=”number” id=”S”></td>

<td><input type=”number” id=”SS”></td>

</tr>

<tr>

<th><input type=”Submit” Value=”Calculate” onclick=”Sub()”></th>

</tr>

</table>

<br>

<table id=”TableScore”>

<caption><b>Student Data</b></caption>

<tr>

<th>Name</th>

<th>Total</th>

<th>Average</th>

<th>Result</th>

</tr>

</table>

</center>
<script type=”text/Javascript”>

Function Sub() {

Var n,k,r,e,v,z,sum,avg;

N=[Link](‘aname’).value;

K=parseInt([Link](‘ta’).value);

R=parseInt([Link](‘E’).value);

E=parseInt([Link](‘M’).value);

V=parseInt([Link](‘S’).value);

Z=parseInt([Link](‘SS’).value);

Sum=k+r+e+v+z;

Avg=sum/5;

Var newTable=[Link](“TableScore”);

Var row=[Link]();

Var cell1=[Link](0);

Var cell2=[Link](1);

Var cell3=[Link](2);

Var cell4=[Link](3);

[Link]=n;

[Link]=sum;

[Link]=avg;

If(avg>=70)

[Link]=”Pass”;

Else

[Link]=”Fail”;

}
}

</script>

</body>

</html>

6. Design a webpage for a college and change the webpage content using DOM manipulation
and Event Handling features of JavaScript.
<!DOCTYPE html>

<html>

<head>

<title> DOM </title>

</head>

<body onload=”myFunction1()”>

<center>

<p id=”wel”>WELCOME</p>

</center>

<h1> <center> SRI RAMAKRISHNA INSTITUTE OF TECHNOLOGY </center> </h1>

<p1> SRIT is one among the most eminent Educational Institutions in Coimbatore district. SRIT is
recognized as one of the leaders in engineering education, research and application of knowledge to the
betterment of the society and the country. The college has imprinted a position in the engineering
education by delivering graduates to the industry and the society. </p1>

<br>

<center>

<table border=”1” cellspacing=”5” bgcolor=”white” height=”100” width=”500” cellpadding=”5”


id=”tablescore”>

<caption> <b> DEPARTMENT </b> </caption>

<tr>

<th>DEPARTMENT NAME</th>

<th> TOTAL NUMBER OF STUDENTS </th>

</tr>

<tr>
<td><button onclick=”cse()”>CSE</button></td>

<td id=”val”>250</td>

</tr>

<tr>

<td><button onclick=”mech()”>MECH</button></td>

<td id=”val2”>120</td>

</tr>

<tr>

<td><button onclick=”it()”>IT</button></td>

<td id=”val3”>180</td>

</tr>

</table>

</center>

<p id=”ce”></p>

<p id=”me”></p>

<p id=”itt”></p>

<script>

[Link](“click”, myFunction);

Function myFunction() {

Alert(“You clicked me!!!”);

[Link](“wel”).innerHTML = “Welcome to our college website”;

[Link](“wel”).[Link] = “red”;

[Link](“wel”).[Link] = “largest”;

Function myFunction() {

[Link](“wel”).innerHTML = “Welcome to our college website”;

Function cse() {
[Link](“ce”).innerHTML = “<P> COMPUTER SCIENCE DEPARTMENT :</P> The four
year under graduate programme in Computer Science Department is intended to train the students in
both advanced areas in the core courses and specialized topics in the emerging technology.";

[Link](“val”).innerHTML = “300”;

Function mech() {

[Link](“me”).innerHTML = “<p>MECHANICAL DEPARTMENT :</p> Mechanical


Department is primarily assigned with the responsibility for Design, Manufacture, deploy and maintain
the Rolling Stock of Indian Railways.”;

[Link](“val2”).innerHTML = “150”;

Function it() {

[Link](“itt”).innerHTML = “<p>INFORMATION TECHNOLOGY DEPARTMENT


:</P>Information technology (IT) is the use of computer systems or devices to access information.
Information technology is responsible for such a large portion of our workforce, business operations and
personal access to information that it comprises much of our daily activities. “;

[Link](“val3”).innerHTML = “89”;

[Link](“ce”).addEventListener(“mouseover”,mouseOver);

[Link](“ce”).addEventListener(“mouseout”,mouseOut);

Function mouseOver(){

[Link](“ce”).[Link] = “red”;

Function mouseOut(){

[Link](“ce”).[Link] = “blue”;

[Link](“me”).addEventListener(“mouseover”,mouseOVer);

[Link](“me”).addEventListener(“mouseout”,mouseOUt);

Function mouseOVer(){

[Link](“me”).[Link] = “yellow”;

}
Function mouseOUt(){

[Link](“me”).[Link] = “green”;

[Link](“itt”).addEventListener(“mouseover”,mouseOVEr);

[Link](“itt”).addEventListener(“mouseout”,mouseOUT);

Function mouseOVEr(){

[Link](“itt”).[Link] = “pink”;

Function mouseOUT(){

[Link](“itt”).[Link] = “black”;

Function myFunction1() {

Alert(“Page is loaded”);

</script>

</body>

</html>

7. Create dynamic website like Online result portal using PHP as server-side scripting
language. Implementation should also include database access.
[Link]
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

<body>

<form action="[Link]" method="POST">

<label for="regno">RegNo:</label><br>

<input type="number" name="rollno"><br>


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

</form>

</body>

</html>

[Link]

<?php

$conn = new mysqli("localhost", "root", "", "test");

if($conn->connect_error){

echo $conn->connect_error;

else{

$stmt = "select * from result where rollno=".$_POST["rollno"];

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

if($result->num_rows > 0){

echo"<table border='1'><tr><th>RegNo</th><th>Name</th><th>Grade</th></tr>";

while($row = $result->fetch_assoc()){

echo "<tr><td>".$row["rollno"]."</td>";

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

echo "<td>".$row["grade"]."</td></tr>";

echo "<table>";

?>

Table creation in xampp

1. Create database test

2. Create table result with 3 columns rollno, name, grade and add 3 rows with roll numbers 1, 2, 3
8. Create a dynamic webpage that provides count of number of unique visitors to the

website. Use the concept of cookies. (use Java Servlet or JSP).

Import [Link].*;

Import [Link]; Import [Link].*;

Import [Link].*;

Import [Link].*;

Public class shoppingcartviewerhidden extends HttpServlet {

Private int hitCount;

Public void init()

// Reset hit counter.

hitCount = 0;

Public void doGet(HttpServletRequest request,

HttpServletResponse response)

Throws ServletException, IOException

// Set response content type

[Link](“text/html”);

// This method executes whenever the servlet is hit

// increment hitCount

hitCount++;

PrintWriter out = [Link]();

String title = “Count of total number of hits”;

String docType

= “<!doctype html public \”-//w3c//dtd html 4.0 “

+ “transitional//en\”>\n”;
[Link](

docType + “<html>\n”

+ “<head><title>” + title + “</title></head>\n”

+ “<body bgcolor = \”#f0f0f0\”>\n”


+ “<h1 align = \”center\”>” + title + “</h1>\n”

+ “<h2 align = \”center\”>” + hitCount

+ “</h2>\n”

+ “</body>”

+ “</html>”);

Public void destroy()

// This is an optional step,

// however you may store the hitCount value in your

// database if you like.

OR

[Link] (Short Program)

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<%

Integer i = (Integer)[Link]("count");

if(i==null || i==0){

i=1;

else{

i++;
}

[Link]("You have visited this webpage " + i + " times");

[Link]("count", i);

%>

</body>

</html>

9. Create a dynamic web page that provide user session management. Use PHP as server-side
scripting language.
a. Create Database with following attributes: id, username, password and role.
b. Create credentials for admin, faculty and student.
c. Display the session for each user.
Table Creation
1. Create database name testing_one
2. Create table name login with four columns id`, `username`, `password`, `role’

-- Dumping data for table `login`

INSERT INTO `login` (`id`, `username`, `password`, `role`) VALUES

(1, ‘admin’, ‘admin’, ‘admin’),

(2, ‘22cs01’, ‘srit’, ‘student’),

(3, ‘Preetha’, ‘srit’, ‘faculty’);

[Link]

<?php

Session_start();

$con = new MySQLi(“localhost”, “root”, “”, “testing_one”);

If($con == TRUE)

//echo “connected”;

If(isset($_POST[‘username’]))

$sql = $con->query(“SELECT * FROM `login` WHERE username =

‘”.$_POST[‘username’].”’ And password = ‘”.$_POST[‘password’].”’;”);

If($sql->num_rows == 1)
{

While($row = $sql->fetch_assoc())

$_SESSION[‘username’] = $row[‘username’]; $_SESSION[‘role’] = $row[‘role’];

Header( “Location: [Link]” );

Else

Echo “Invalid username and password”;

?>

<html>

<body>

<form action=”” method=”post”>

Username: <input type=”text” name=”username” required><br><br>

Password: <input type=”password” name=”password” required><br><br>

<input type=”submit” value=”Login”>

</form>

</body>

</html>

[Link]

<?php

Session_start();
$con = new MySQLi(“localhost”, “root”, “”, “testing_one”);
?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Hi, Welcome to admin Page </h1>
<h2><?php echo $_SESSION[‘username’];?></h2>
<a href=”[Link]”> Logout </a>
</body>
</html>

[Link]

<?php
$con = new MySQLi(“localhost”, “root”, “”, “testing_one”);
?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Hi, Welcome to Faculty Page </h1>

<a href=”[Link]”> Logout </a>


</body>
</html>

[Link]

<?php

$con = new MySQLi(“localhost”, “root”, “”, “testing_one”);


?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Hi, Welcome to Student Page </h1>

<a href=”[Link]"> Logout </a>


</body>
</html>
[Link]

<?php
Session_start();

If($_SESSION[‘role’] == ‘admin’)
{
Header(“Location:[Link]”);
}
If ($_SESSION[‘role’] == ‘faculty’) {
Header(“Location:[Link]”);
}

If ($_SESSION[‘role’] == ‘student’){
Header(“Location:[Link]”);
?>

10. Implement auto complete text box using AJAX. The text box suggests technical terms to
the users based on the keyword they entered into the input [Link]
<html>

<body>

<script>

Var myAjax = ajax();

Function ajax() {

Var ajax = null;

If ([Link]) {

Try {

Ajax = new XMLHttpRequest();

}
Catch€ {}

Else if ([Link]) {
Try {

Ajax = new ActiveXObject(“[Link]”);

Catch €{

Try{

Ajax = new ActiveXObject(“[Link]”);

Catch € {}

Return ajax;

Function request(str) {

//Don’t forget to modify the path according to your theme


[Link](“GET”, “[Link]?q=”+str,true);

[Link] = result;

[Link](“Content-type”, “application/x-www-form-urlencoded”);

[Link](“q=”+str);

Function result() {

If ([Link] == 4) {

Var liste = [Link];

Var cible = [Link](‘tag_update’).innerHTML = liste;

// [Link](‘tag_update’).[Link] = “block”;

Function selected(choice){

Var cible = [Link](‘s’);


[Link] = choice;

[Link](‘tag_update’).[Link] = “none”;

</script>

<form method=”get” id=”searchform” action=”[Link]”>

<div>

<input autocomplete=”off” type=”text” value=”” name=”s” id=”s” onkeyup=”request([Link]);”/>

<input type=”submit” id=”searchsubmit” value=”search” class=”button” />

</div><div id=”tag_update”></div>

</form>

</body>

</html>

[Link]
<?php

If (isset($_GET[‘q’])) {

$a[]=”Server”;

$a[]=”Apache”;

$a[]=”IIS”;

$a[]=”HIS”;

$a[]=”HTTP Server”;

$a[]=”Tomcat”;

$a[]=”Perl”;

$a[]=”PHP”;

$a[]=”ASP”;

$a[]=”ASPX”;

$a[]=”Jsp”;

$a[]=”Application”;

$a[]=”Performance”;

$a[]=”Informatica”;

$a[]=”Documentum”;

$a[]=”Cognos”;

$a[]=”Sharepoint”;

$a[]=”Google”;

$a[]=”EssBase”;

$a[]=”Yahoo”;

$a[]=”Linux”;

$a[]=”Apple”;

$a[]=”Mozilla”;

$a[]=”Firfox”;

$a[]=”Chrome”;

$a[]=”Internet Explorer”;

$a[]=”Robots”;
$a[]=”Feeds”;

$a[]=”Websites”;

$a[]=”HTML”;

$a[]=”Xhtml”;

//get the q parameter from URL

$q=$_GET[“q”];

//lookup all hints from array if length of

q>0 If (strlen($q) > 0)

$hint=””;

For($i=0; $i<count($a); $i++)

If (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

If ($hint==””)

$hint=’<li><a href=”#” onclick=”selected([Link]);”>’.$a[$i].’</a></li>’;

Else

$add_me = ‘<li><a href=”#” onclick=”selected([Link]);”>’.$a[$i].’</a></li>’;

$hint=$hint.$add_me;

//$hint=$a[$i];

}
}

// Set output to “no suggestion” if no hint were found

// or to the correct values

If ($hint == “”)

$response=”<li <a href=’#’>no suggestion</a></li>”;

Else

$response=$hint;

//output the response

Echo $response;

Exit;

?>

Common questions

Powered by AI

The document emphasizes database integration in dynamic web applications, as seen in the use of MySQL databases for storing and retrieving student data in an online result portal and user credentials for session management. It covers database access methods in both Java Servlets and PHP scripts .

The lab manual mentions using Java Servlets and PHP for server-side scripting to create dynamic websites. Java Servlets are used for unique visitor count applications, while PHP is used for online result portals and session management .

Experiments involving JavaScript focus on creating interactive web pages using DOM manipulation and event handling, validating email and mobile number formats, and handling marks computation where JavaScript reads marks, calculates totals, and determines pass/fail status .

The techniques recommended for ensuring W3C validation include using HTML5 and CSS3 standards in the creation of static and functional websites with maps and images, ensuring compliance with the latest W3C standards for web development .

Upon completing the course, students are expected to have the ability to understand web application structure, implement static websites according to W3C standards, create interactive websites with client-side programming, and develop dynamic web pages or applications with database and session management capabilities .

Students will gain the ability to learn the structure of web application development, implement static and interactive websites with client-side programming, and create dynamic web pages or web applications with database access and session management .

Event handling is implemented using JavaScript to allow user interactions with webpage elements, such as button clicks or mouse events, to trigger changes in the DOM. This is significant because it enables dynamic changes to the webpage content, enhancing interactivity and user engagement .

AJAX is employed for creating single-page web applications, such as an autocomplete text box that suggests technical terms based on user input. This use of AJAX allows for dynamic content updates without reloading pages, enhancing user experience and application performance .

The lab manual suggests using PHP as the server-side scripting language for session management. It involves creating a database with attributes such as ID, username, password, and role, and establishing sessions for users based on their roles—admin, faculty, or student .

Incorporating client-side scripting, such as JavaScript, is crucial for developing interactive and responsive web applications. Client-side scripts handle dynamic visual effects, user input validation, and real-time data processing/updates without server interaction, enhancing the overall user experience and efficiency .

You might also like