Scribd
Upload
41 views36 pages

Full Stack Prog Lab Manual

Uploaded by

mohanapraba.82102092
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
41 views36 pages

Full Stack Prog Lab Manual

Uploaded by

mohanapraba.82102092
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
You are on page 1/ 36

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=https://www.w3schools.com/html/>HTML W3 Schools Tutorial</a></li>

<li> <a href=https://www.tutorialspoint.com/html/index.htm>HTML 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=”srit.jpeg” alt=”srit college”>

</body>

</html>
2. Cascading style sheet

<!DOCTYPE html>

<html>
<head>

<title> PROFILE </title>

<link rel=”stylesheet” href=”style.css”>

<style>

Table, th, td {

Border: 1px solid black;

</style>

</head>

<style>

H1 {color:red;}

H2 {color:blue;}

</style>

<body>

<img src=”photo.jpg” 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 S.Deepadharshini 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>[email protected] </i></p>

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

</body>

</html>

Style.css

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=’tamilnadu.html’

Shape=’circle’

Coords=’175,495,30’

Title=’Tamilnadu’/>

<area href = “karnataka.html”

Shape = “rect”

Coords = “100,400,150,450”

Title = “Karnataka” />

<area href = “andhrapradesh.html”

Shape = “poly”

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

Title = “AndhraPradesh” />

<area href = “kerala.html”

Shape = “poly”

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

Title = “Kerala” />

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

Tamilnadu.html:

<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>

Karnataka.html:

<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>


Andhrapradesh.html:

<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 = document.forms[“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=re.test(email);

If(x){

}else{

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

Return false;

Var mobile = document.forms[“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=”welcome.php” 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=document.getElementById(‘aname’).value;

K=parseInt(document.getElementById(‘ta’).value);

R=parseInt(document.getElementById(‘E’).value);

E=parseInt(document.getElementById(‘M’).value);

V=parseInt(document.getElementById(‘S’).value);

Z=parseInt(document.getElementById(‘SS’).value);

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

Avg=sum/5;

Var newTable=document.getElementById(“TableScore”);

Var row=newTable.insertRow();

Var cell1=row.insertCell(0);

Var cell2=row.insertCell(1);

Var cell3=row.insertCell(2);

Var cell4=row.insertCell(3);

Cell1.innerHTML=n;

Cell2.innerHTML=sum;

Cell3.innerHTML=avg;

If(avg>=70)

Cell4.innerHTML=”Pass”;

Else

Cell4.innerHTML=”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>

Document.addEventListener(“click”, myFunction);

Function myFunction() {

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

Document.getElementById(“wel”).innerHTML = “Welcome to our college website”;

Document.getElementById(“wel”).style.color = “red”;

Document.getElementById(“wel”).style.fontSize = “largest”;

Function myFunction() {

Document.getElementById(“wel”).innerHTML = “Welcome to our college website”;

Function cse() {
Document.getElementById(“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.";

Document.getElementById(“val”).innerHTML = “300”;

Function mech() {

Document.getElementById(“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.”;

Document.getElementById(“val2”).innerHTML = “150”;

Function it() {

Document.getElementById(“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. “;

Document.getElementById(“val3”).innerHTML = “89”;

Document.getElementById(“ce”).addEventListener(“mouseover”,mouseOver);

Document.getElementById(“ce”).addEventListener(“mouseout”,mouseOut);

Function mouseOver(){

Document.getElementById(“ce”).style.color = “red”;

Function mouseOut(){

Document.getElementById(“ce”).style.color = “blue”;

Document.getElementById(“me”).addEventListener(“mouseover”,mouseOVer);

Document.getElementById(“me”).addEventListener(“mouseout”,mouseOUt);

Function mouseOVer(){

Document.getElementById(“me”).style.color = “yellow”;

}
Function mouseOUt(){

Document.getElementById(“me”).style.color = “green”;

Document.getElementById(“itt”).addEventListener(“mouseover”,mouseOVEr);

Document.getElementById(“itt”).addEventListener(“mouseout”,mouseOUT);

Function mouseOVEr(){

Document.getElementById(“itt”).style.color = “pink”;

Function mouseOUT(){

Document.getElementById(“itt”).style.color = “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.
Index.html
<!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="store.php" method="POST">

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

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


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

</form>

</body>

</html>

Store.php

<?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 java.io.*;

Import java.sql.Date; Import java.util.*;

Import javax.servlet.*;

Import javax.servlet.http.*;

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

Response.setContentType(“text/html”);

// This method executes whenever the servlet is hit

// increment hitCount

hitCount++;

PrintWriter out = response.getWriter();

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

String docType

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

+ “transitional//en\”>\n”;
Out.println(

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

Index.jsp (Short Program)

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

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<%

Integer i = (Integer)session.getAttribute("count");

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

i=1;

else{

i++;
}

out.println("You have visited this webpage " + i + " times");

session.setAttribute("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’);

Login.php

<?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: dashboard.php” );

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>

Admin.php

<?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=”logout.php”> Logout </a>
</body>
</html>

Faculty.php

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

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

<a href=”logout.php”> Logout </a>


</body>
</html>

Student.php

<?php

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


?>

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

<a href=”logout.php"> Logout </a>


</body>
</html>
Dashboard.php

<?php
Session_start();

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

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

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 field.Suggest.html
<html>

<body>

<script>

Var myAjax = ajax();

Function ajax() {

Var ajax = null;

If (window.XMLHttpRequest) {

Try {

Ajax = new XMLHttpRequest();

}
Catch€ {}

Else if (window.ActiveXObject) {
Try {

Ajax = new ActiveXObject(“Msxm12.XMLHTTP”);

Catch €{

Try{

Ajax = new ActiveXObject(“Microsoft.XMLHTTP”);

Catch € {}

Return ajax;

Function request(str) {

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


myAjax.open(“GET”, “autosuggest.php?q=”+str,true);

myAjax.onreadystatechange = result;

myAjax.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

myAjax.send(“q=”+str);

Function result() {

If (myAjax.readyState == 4) {

Var liste = myAjax.responseText;

Var cible = document.getElementById(‘tag_update’).innerHTML = liste;

// document.getElementById(‘tag_update’).style.display = “block”;

Function selected(choice){

Var cible = document.getElementById(‘s’);


Cible.value = choice;

Document.getElementById(‘tag_update’).style.display = “none”;

</script>

<form method=”get” id=”searchform” action=”display.php”>

<div>

<input autocomplete=”off” type=”text” value=”” name=”s” id=”s” onkeyup=”request(this.value);”/>

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

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

</form>

</body>

</html>

Autosuggest.php
<?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(this.innerHTML);”>’.$a[$i].’</a></li>’;

Else

$add_me = ‘<li><a href=”#” onclick=”selected(this.innerHTML);”>’.$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;

?>

You might also like