2011

Coursework
Web Technology
Module Leader: Mr. Sriyal Jayasinghe

Thushara Kasun Ranawaka Sahan Serasinghe Janith Amarawickrama Kasun Samaranayake Keshan Fernando 1/1/2011

Homepage - Discussion
I created the homepage which comprises of an Ajax poll, a live search and several other interesting stuff to give a better experience to the user. I also created the logo, slogan, GIF animation and web page layout using CSS.

Figure 1

Unlike the usual way, we agreed to put our sites main navigation bar on top of everything else in the homepage. Hence, its much easier to the user to navigate through our website without confusion. I used a table to create it and made it more beautiful using CSS. <div id="menubar"> <table width="100%"> <tr> <td class="current"><a href="index.html">Homepage</a></td> <td onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="traveller.html">Traveller</a></td></tr> <tr><td class="menu"><a href="adventure.html">Adventure</a></td></tr> <tr><td class="menu"><a href="valentine.html">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="beach.html">Beach</a></td></tr>

<tr><td class="menu"><a href="season.html">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="round_trip.html">Round Trip</a></td></tr> </table> </td> <td><a href="login.html">Booking</a></td> <td onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a> <table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a ref="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr> </table> </td> <td><a href="sitemap.html">Site Map</a></td> </tr> </table> </div>

I have surrounded by a <div> tag by giving it an id as menubar, so that I can control it using CSS. To show the user in what section hes currently in, I created a CSS class called current so that itll highlight the currently showing section in the menubar. Moreover, sections like Packages and About us need to have rollover menus to choose specific pages by the user. onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')" This will trigger the function I have written in the scripts section called showmenu() so that we can make it appear when ever its needed and make it disappear as well.

function showmenu(elmnt)

{ document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } This javascript which I wrote basically, takes in the id of the element that we are calling from , and sets its style to visible or hidden from the user. Regarding the logo, I created it using Adobe Photoshop CS5. It is a transparent png image which complies with the coursework specification. The slogan is also a transparent image. As you can see, the main banner consists of images that are relavent to our website and I created 5 banners, each containing 3 photos by using Adobe Photoshop. Then, in order to make it moving I used Ulead Gif Animator 5 to add the transition effects and to convert it to an animated gif. Then I divided the content of the pages into two sections as, main content and a sidebar. Main content is the place where all the details, quizzes, polls etc. reside. In the sidebar the users can instantly access the Ajax-based live search service, Flight schedules, Weather information, Contact information and Feedback page where people can put comments and read what others have said about our site. Speaking of main content, I have titled them as follows, Introduction Latest Packages Support Center Weekly Poll Picture Gallery Meet our team Subscribe Travel Trivia(Quiz)

Latest Packages This section basically gives the user a showcase of the packages we offer them. I created these thumbnails using Adobe Photoshop and made them transparent pngs so that they fit well the websites content. Support Center This section contains links to various government and non government sites (trustworthy) where users can get further details regarding Sri Lanka. For instance, we provide details of embassies, airport information, emergency numbers etc.

Weekly Poll According to the coursework specification, I decided to add the AJAX poll in the homepage where users can take part in it while surfing. I have asked only one question from them (That is: Which city would you like to visit the most?) and gave them 5 opitions to choose from. Whenever a user clicks on a radio button it will call a function which I wrote in scripts section namely, getVote(int)

Figure 2

Mechanisms I used to prevent users from double voting. The problem arises just because the HTTP protocol is stateless. Therefore we must find mechanisms to track users when they are dealing with certain features of our site. Its been mentioned in the coursework specification that we should find out a way to prevent the same user voting twice. There are many options as, Placing a cookie on users machine Using a user database to store vote information Use a text file to store data Asking the user to login

I implemented the 1st option I have mentioned here, which is by placing a cookie on users machine. The reason for me to choose that was that other alternatives were heavier than that. function getVote(int) { var voteCookie = getCookie('voted'); if(voteCookie == null)

{ setCookie('voted','yes',7); if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("poll").innerHTML=xmlht tp.responseText; } } xmlhttp.open("GET","poll_vote.php?vote="+int,true); xmlhttp.send(); } else { alert("You have already voted!"); } } The logic behind my code is that, first I check whether we have already placed a cookie or not. If Yes, I prompted that he/she has already voted. But if not, we pass the name as voted and the value as yes and I have set the date of expiration for 7 days because one poll question is meant to last only one week. I learnt how to get and set cookies in W3Schools Javascript reference section http://www.w3schools.com/JS/js_cookies.asp Once the checking is done, we send the users vote by using AJAX to my poll_vote.php file by attaching the integer value of the vote to the URL. After the processing of the poll_vote.php is done, modify the content surrounded by the div tag namely, poll.

<?php $vote = $_REQUEST['vote']; //get content of textfile

$filename = "poll_result.txt"; $content = file($filename); //put content in array $array = explode("||", $content[0]); $kandy = $array[0]; $apura = $array[1]; $nuwara = $array[2]; $hikka = $array[3]; $other = $array[4]; if ($vote == 0) { $kandy = $kandy + 1; } if ($vote == 1) { $apura = $apura + 1; } if ($vote == 2) { $nuwara = $nuwara + 1; } if ($vote == 3) { $hikka = $hikka + 1; } if ($vote == 4) { $other = $other + 1; } //insert votes to txt file $insertvote = $kandy."||".$apura."||".$nuwara."||".$hikka."||".$other; $fp = fopen($filename,"w"); fputs($fp,$insertvote); fclose($fp); ?> <h2>Result:</h2> <table> <tr> <td>Kandy:</td>

<td> <img src="poll_bar.png" width='<?php echo(100*round($kandy/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>' height='20'> <?php echo(100*round($kandy/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>% </td> </tr> <tr> <td>A'pura:</td> <td> <img src="poll_bar.png" width='<?php echo(100*round($apura/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>' height='20'> <?php echo(100*round($apura/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>% </td> </tr> <tr> <td>N'Eliya:</td> <td> <img src="poll_bar.png" width='<?php echo(100*round($nuwara/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>' height='20'> <?php echo(100*round($nuwara/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>% </td> </tr> <tr> <td>Hikkaduwa:</td> <td> <img src="poll_bar.png" width='<?php echo(100*round($hikka/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>' height='20'> <?php echo(100*round($hikka/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>% </td> </tr> <tr> <td>Other:</td> <td> <img src="poll_bar.png"

width='<?php echo(100*round($other/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>' height='20'>

<?php

<?php echo(100*round($kandy/($apura+$kandy+$hikka+$nuwara+$ other),2)); ?>

echo(100*round($other/($apura+$kandy+$hikka+$nuwara+$other),2)); ?>% </td> </tr> </table> <p><b>Total votes: <?php echo $apura+$kandy+$hikka+$nuwara+$other?></b></p>

The above shown is the code of my poll_vote.php file. Simply, the logic is to extract the vote from the URL, read the previous votes from the poll_result.txt file, do the calculations, put the latest data back in to the txt file and show the results table. This line of code extracts data from the text file by reading data in it using a special delimiter as || which is used to separate numbers votes per each city given in the poll. After the extaction is done, we set those data to an array called $array. After that we count the votes and do the calculations according to the results we currently have. To show the bar chart I have used a small gif image and set its width according to the results we got for each city. Thats done by this line:

$array = explode("||", $content[0]);

Finally we show the total number of votes to the user. At first I worked out this solution by using a mysql database to store and retrieve the votes. However, it was not efficient and reliable than this solution as I tested out them with different computers with different browsers. Moreover, in real world, it is not a good practice to use databases to polls because we need to instantly read and store data. Eg: If any error occurs and the database system is down, we

wont be able to show the results to the user. Hence, its quite elegant to use a text file to store and retrieve data in scenarios like this. Its given that we should update the questions weekly and make the results per each question public. I didnt implement this functionality as we ran out of time. However, if I were to implement it, I would take advantage of the following solutions, 1. Use a text file/XML file to store the questions and retrieve them. 2. Use a database to store the questions. According to my experience the first solution would simply do the job effectively. Further, we have to use a javascript based count down timer (calculated by subtracting the current system time from the targeted time) to show users how many days are left We can automate the process of closing the poll and making the results public by calling a function which would display the results when the countdown is over.

Homepage - Full Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script type="text/javascript" src="scripts/mootools-1.2more.js"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script> <script src="search-script.js" type="text/javascript"></script> <script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true, showArrows: true, showCarousel: true, embedLinks: true }); } window.addEvent('domready', startGallery); </script> <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

<script type="text/javascript"> function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; } function getCookie(c_name) { var i,x,y,cookieArray=document.cookie.split(";"); for (i=0;i<cookieArray.length;i++) { x=cookieArray[i].substr(0,cookieArray[i].indexOf("=")); y=cookieArray[i].substr(cookieArray[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } } } function getVote(int) { var voteCookie = getCookie('voted'); if(voteCookie == null) { setCookie('voted','yes',7); if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200)

{ document.getElementById("poll").innerHTML=xmlht tp.responseText; } } xmlhttp.open("GET","poll_vote.php?vote="+int,true); xmlhttp.send(); } else { alert("You have already voted!"); } } function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } function validateSearch() { var searchStr = document.getElementById('searchbox').value; if(searchStr == "" || searchStr==null) { alert("Please enter a search string!"); return false; } else if(document.getElementById("searchbox").className == "error") { alert("No packages found!"); return false; } else { return true; } } </script> <link rel="stylesheet" type="text/css" href="site_style.css" /> <title>Paradise Tours</title>

</head> <body> <div id="wrap"> <div id="menubar"> <table width="100%"> <tr> <td class="current"><a href="index.html">Homepage</a></td> <td onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="traveller.html">Traveller</a></td></tr> <tr><td class="menu"><a href="adventure.html">Adventure</a></td></tr> <tr><td class="menu"><a href="valentine.html">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="beach.html">Beach</a></td></tr> <tr><td class="menu"><a href="season.html">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="round_trip.html">Round Trip</a></td></tr> </table> </td> <td><a href="login.html">Booking</a></td> <td onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a> <table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a href="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr> </table> </td> <td><a href="sitemap.html">Site Map</a></td> </tr>

</table> </div> <img src="img/logo.png" align="left" /> <div id="social"> <a href="http://facebook.com/Paradise_tours"><img src="img/ico/fb.png" /></a> <a href="http://twitter.com/Paradise_tours"><img src="img/ico/twitter.png" /></a> <a href="http://delicious.com/Paradise_tours"><img src="img/ico/delicious.png" /></a> <a href="http://plus.google.com/Paradise_tours"><img src="img/ico/google.png" /></a> <a href="http://myspace.com/Paradise_tours"><img src="img/ico/myspace.png" /></a> </div> <h3 align="right"><a href="login.html"><img src="img/cart.png" alt="" width="32" height="27" />My Cart</a></h3><br/> <img src="img/slogan.png" align="left" /> <div id="header"> </div> <div id="extras"> <h2>Search Package</h2> <form action="search.php" method="GET" id="searchform" onsubmit="return validateSearch()"> <div> <input type="text" value="" name="searchbox" id="searchbox" autocomplete="off" style="width:150px;" /> <div id="popups"></div> </div> </form><br/> <h2>Flight Schedule</h2> <form action="http://www.flightstats.com/go/Redirect/websiteRedirect.do" method="post" style="margin:0; padding:0" target="_blank"> <div id="FlightStats" style="width:170px; font-family: Hallmarke Condensed Light, Arial, Verdana, sans-serif; border:1px solid #BABABA;"> <div style="background:#353F53; color:#FFFFFF; fontsize:9pt; padding:0px; padding-top:3px; padding-bottom:3px; border-left:3px solid #353F53; width:170px; max-width:168px;"> Flight Status</div>

<div style="padding-left: 5px; font-size: 7pt; textalign:center"><span style="font-size: 8pt;">By Flight or Route</span><br><input style="font-family: Hallmarke Condensed Light, Arial, Verdana, sans-serif; font-size: 8pt; width:100px;" size="5" width="50" type="text" name="submission" value="AA 1241"/><p align="center"><br/><input style="width:70px; height:25px; font-size:10px;" type="submit" value="Submit" /></p><a target="_blank" href="http://www.flightstats.com/go/Downloads/websiteRedirectExamples.do">exa mples:</a> AA 123 or JFK to LHR<br><a target="_blank" href="http://www.flightstats.com/go/Downloads/websiteRedirectPopup.do">Don't Know the Code?</a></div><a target="_blank" href="http://www.flightstats.com"></a></div> </form> <br/> <h2>Weather</h2> <div id="cont_b71b02fdd297413fe7ebdf50b168a710"> <span id="h_b71b02fdd297413fe7ebdf50b168a710"><a id="a_b71b02fdd297413fe7ebdf50b168a710" href="http://www.yourweather.co.uk/weather_Katunayake-Asia-Sri+LankaKatunayake-VCBI-1-13142.html" target="_blank" style="color:#808080;fontfamily:2;font-size:14px;">Katunayake</a></span><script type="text/javascript" src="http://www.yourweather.co.uk/wid_loader/b71b02fdd297413fe7ebdf50b168a710 "></script> </div> <br/> <p align="center"><img src="img/test.jpg" width="100" height="100"></p> <br/> <h2>Contact Info</h2> <p>Paradise Tours<br /> Sri Lanka.<br/> <b>+94 11122023121</b><br/> <a href="support.html">Get support</a> </p> <h2><a href="comment_prev.php">Feedback</a></h2> </div> <div id="content"> <h2>Sri Lanka at a glance</h2> <p>

Set in the Indian Ocean in South Asia, the tropical island nation of Sri Lanka has a history dating back to the birth of time. It is a place where the original soul of Buddhism still flourishes and where natures beauty remains abundant and unspoilt. Few places in the world can offer the traveller such a remarkable combination of stunning landscapes, pristine beaches, captivating cultural heritage and unique experiences within such a compact location. Within a mere area of65, 610 kilometres lie 8 UNESCO World Heritage Sites, 1,330 kilometres of coastline - much of it pristine beach - 15 national parks showcasing an abundance of wildlife, nearly 500,000 acres of lush tea estates, 250 acres of botanical gardens, 350 waterfalls, 25,000 water bodies, to a culture that extends back to over 2,500 years. This is an island of magical proportions, once known as Serendib, Taprobane, the Pearl of the Indian Ocean, and Ceylon. Discover refreshingly Sri Lanka! </p> <h3></h3> <table> <tr><th colspan="2">Latest Packages</th></tr> <tr> <td><a href="traveller.html"><img src="img/traveller.png"/></a></td> <td><a href="beach.html"><img src="img/beach.png"/></a></td> </tr> <tr> <td><a href="adventure.html"><img src="img/adventure.png"/></a></td> <td><a href="round_trip.html"><img src="img/round.png"/></a></td> </tr> </table> <table border="0"> <tr> <th>Support Center</th> <th>Weekly Poll</th> <th>Picture Gallery</th> </tr> <tr> <td> <p align="left"><a href="http://www.sltda.gov.lk/embassies_in_sri_lanka" target="_blank">Embassies</a><br/>

<a href="http://www.airport.lk/" target="_blank">Airport Information</a><br/> <a href="http://www.srilankaportal.info/emergency_telephone_numbers.htm" target="_blank">Emergency Numbers</a><br/> <a href="http://edition.cnn.com/WORLD/" target="_blank">International Travel News</a><br/> <a href="quiz.html">Travel Questions</a><br/> <a href="feedback.html">Feedback/Suggestions</a><br/> <a href="sitemap.html">SiteMap</a> </p></td> <td> <div id="poll"> <form> <h3>Which city would you like to visit the most?</h3><br/> <input align="bottom" id="vaar" type="radio" name="vote" value="0" onclick="getVote(this.value)" /> Kandy <br /> <input type="radio" name="vote" value="1" onclick="getVote(this.value)" /> Anuradhapura <br /> <input type="radio" name="vote" value="2" onclick="getVote(this.value)" /> Nuwara Eliya <br /> <input type="radio" name="vote" value="3" onclick="getVote(this.value)" /> Hikkaduwa <br /> <input type="radio" name="vote" value="4" onclick="getVote(this.value)" /> Other <br /> </form> </div> </td> <td><div id="myGallery"> <div class="imageElement"> <h3>Elephant Ride</h3> <p>Yala Sanctuary</p>

<a href="homepage.html" title="open image" class="open"></a> <img src="img/slideshow/elephant-mini.jpg" class="full" /> <img src="img/slideshow/elephant-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Beach</h3> <p>Hikkaduwa</p> <a href="mypage2.html" title="open image" class="open"></a> <img src="img/slideshow/jetwing-mini.jpg" class="full" /> <img src="img/slideshow/jetwing-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Starfish</h3> <p>Pasikuda</p> <a href="mypage2.html" title="open image" class="open"></a> <img src="img/slideshow/starfish-mini.jpg" class="full" /> <img src="img/slideshow/starfish-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Tea Estate</h3> <p>Bogawanthalawa</p> <a href="mypage2.html" title="open image" class="open"></a> <img src="img/slideshow/tea-mini.jpg" class="full" /> <img src="img/slideshow/tea-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Cottage</h3> <p>Hikkaduwa</p> <a href="mypage2.html" title="open image" class="open"></a>

<img src="img/slideshow/cottage-mini.jpg" class="full" /> <img src="img/slideshow/cottage-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Lush</h3> <p>Diyathalawa</p> <a href="mypage2.html" title="open image" class="open"></a> <img src="img/slideshow/grass-mini.jpg" class="full" /> <img src="img/slideshow/grass-mini.jpg" class="thumbnail" /> </div> </div> </td> </tr> <tr> <th>Meet Our Team</th> <th>Subscribe</th> <th>Travel Trivia</th> </tr> <tr> <td><a href="about_us.html"><img src="img/we1.jpg"></a></td> <td>Let the travel experts do the workget the best deals sent to you!<br/><br/> <input type="text" value="Enter your email address" id="email_sub"/><br/><br/> <input type="submit" value="Submit"/> </td> <td>Do you like to challenge yourself? Participate in our travel trivia MCQs to measure your knowledge<br/> <h3><a href="quiz.html">Begin!</a></h3> </td> </tr> </table> </div> <div id="footer"> <p><span>2011 Paradise Tours<a href="#"></a></span><br />

Template design and coded by <a href="details_sahan.html">Sahan Serasinghe</a></p> </div> </div> </body> </html>

Ajax based live search

<?php $url = $_GET['searchbox']; $lnk1 = ""; $lnk2 = ""; $count = 0; $con = mysql_connect("localhost", "root", "") or die("ERROR!!!!!"); mysql_select_db("paradise_search"); $res = mysql_query("SELECT * FROM search WHERE city='$url'"); //header( 'Location: http://localhost/site/'+$url,'true' ) ; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="site_style.css" media="screen,projection" /> <title>Search Results</title> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head>

<body> <div id="wrap"> <div id="menubar"> <table width="100%"> <tr> <td><a href="index.html">Homepage</a></td> <td onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="/html/default.asp">Traveller</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">Adventure</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">Beach</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Round Trip</a></td></tr> </table> </td> <td><a href="buy_packs.html">Booking</a></td> <td onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a> <table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a href="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr> </table> </td> <td><a href="sitemap.html">Site Map</a></td> </tr>

</table> </div> <img src="img/logo.png" align="left" /> <div id="social"> <a href="http://facebook.com/Paradise_tours"><img src="img/ico/fb.png" /></a> <a href="http://twitter.com/Paradise_tours"><img src="img/ico/twitter.png" /></a> <a href="http://delicious.com/Paradise_tours"><img src="img/ico/delicious.png" /></a> <a href="http://plus.google.com/Paradise_tours"><img src="img/ico/google.png" /></a> <a href="http://myspace.com/Paradise_tours"><img src="img/ico/myspace.png" /></a> </div> <h3 align="right"><a href="cart.php"><img src="img/cart.png" alt="" width="32" height="27" />My Cart</a></h3><br/> <img src="img/slogan.png" align="left" /> <div id="footer"> </div> <div id="content-wide"> <?php echo '<table>'; echo '<tr><th>Search results</th></tr>'; while($row = mysql_fetch_array($res)) { $count = $count + 1; $lnk1 = $row['link1']; echo '<tr><td>Result '.$count.'</td></tr>'; echo '<tr><td><a href="'.$lnk1.'">'.str_replace(".html","",$lnk1 ).'</a></td></tr>'; if($row['link2'] == "") { $lnk2 = null; } else { $count++;

echo '<tr><td>Result '.$count.'</td></tr>'; $lnk2 = $row['link2']; echo '<tr><td><a href="'.$lnk2.'">'.str_replace(".html","",$lnk2 ).'</a></td></tr>'; } echo '</table>'; } mysql_close($con); ?> <a href="index.html"> Go back </a> </div> <div id="footer"> <p><span>2011 Paradise Tours<a href="#"></a></span><br /> Template design and coded by <a href="http://google.lk/">Sahan Serasinghe</a></p> </div> </div> </body> </html>

Search script
window.onload = initAll; var xhr = false; var locationsArr = new Array(); function initAll() { document.getElementById("searchbox").onkeyup = searchSuggest; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (xhr) { xhr.onreadystatechange = setlocationsArr;

xhr.open("GET", "locations.xml", true); xhr.send(null); } else { alert("Sorry, but I couldn't create an XMLHttpRequest"); } } function setlocationsArr() { if (xhr.readyState == 4) { if (xhr.status == 200) { if (xhr.responseXML) { var allLocations = xhr.responseXML.getElementsByTagName("item"); for (var i=0; i<allLocations.length; i++) { locationsArr[i] = allLocations[i].getElementsByTagName("label")[0].firstChild; } } } else { alert("There was a problem with the request " + xhr.status); } } } function searchSuggest() { var str = document.getElementById("searchbox").value; document.getElementById("searchbox").className = ""; if (str != "") { document.getElementById("popups").innerHTML = ""; for (var i=0; i<locationsArr.length; i++) { var thisState = locationsArr[i].nodeValue; if (thisState.toLowerCase().indexOf(str.toLowerCase()) == 0) { var tempDiv = document.createElement("div"); tempDiv.innerHTML = thisState; tempDiv.onclick = makeChoice; tempDiv.className = "suggestions"; document.getElementById("popups").appendChild(tempDiv); } }

var foundCt = document.getElementById("popups").childNodes.length; if (foundCt == 0) { document.getElementById("searchbox").className = "error"; } if (foundCt == 1) { document.getElementById("searchbox").value = document.getElementById("popups").firstChild.innerHTML; document.getElementById("popups").innerHTML = ""; } } } function makeChoice(evt) { var thisDiv = (evt) ? evt.target : window.event.srcElement; setURL(thisDiv.innerHTML); document.getElementById("searchbox").value = thisDiv.innerHTML; } function setURL(url) { document.getElementById("popups").innerHTML = "";
}

Google maps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>travel</title> <script type="text/javascript"> var image1=new Image() image1.src="p1.jpg" var image2=new Image() image2.src="p2.jpg" var image3=new Image() image3.src="p3.jpg" var image4=new Image()

image4.src="p4.jpg" function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> <link rel="stylesheet" type="text/css" href="site_style.css" /> <title>Paradise Tours</title> </head> <body> <div id="wrap"> <div id="menubar"> <table width="100%"> <tr> <td class="current"><a href="index.html">Homepage</a></td> <td onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="traveller.html">Traveller</a></td></tr> <tr><td class="menu"><a href="adventure.html">Adventure</a></td></tr> <tr><td class="menu"><a href="valentine.html">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="beach.html">Beach</a></td></tr> <tr><td class="menu"><a href="season.html">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="round_trip.html">Round Trip</a></td></tr> </table> </td> <td><a href="login.html">Booking</a></td> <td onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a> <table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a href="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr>

</table> </td> <td><a href="sitemap.html">Site Map</a></td> </tr> </table> </div> <img src="img/logo.png" align="left" /> <div id="social"> <a href="http://facebook.com/Paradise_tours"><img src="img/ico/fb.png" /></a> <a href="http://twitter.com/Paradise_tours"><img src="img/ico/twitter.png" /></a> <a href="http://delicious.com/Paradise_tours"><img src="img/ico/delicious.png" /></a><a href="http://plus.google.com/Paradise_tours"><img src="img/ico/google.png" /></a><a href="http://myspace.com/Paradise_tours"><img src="img/ico/myspace.png" /></a> </div> <h3 align="right"><a href="cart.php"><img src="img/cart.png" alt="" width="32" height="27" />My Cart</a></h3><br/> <img src="img/slogan.png" align="left" /> <div id="footer"> </div> <div id="content-wide"> <h1><center>platinum</center></h1> <CENTER><img src="p1.jpg" name="slide" border="0" width="300" height="300" /></CENTER> <script type="text/javascript"> var step=1 var whichimage=1 function slideit() { if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<4) step++ else

step=1 setTimeout("slideit()",5500) } slideit(); </script> <h5>day 1</h5> <p>Arrival at the Airport. You will be met by our National Tour Guide and Airport Staff and offer assistance. <b>Thereafter will travel directly to Kandy by air taxi Travel time: Approximately 45mins</b></p> <h5>Kandy</h5> <p> A lovely exotic city, the Hill Capital and last stronghold of the Sinhala Kings is a UNESCO World Heritage Site which retains an aura of grandeur, time has not affected. Encircled by hills, with a tranquil lake in its centre, it is the site of the renowned temple that enshrines the Tooth Relic of the Buddha and the Royal Botanical gardens home to one of the worlds best collections of Orchids. A cultural sanctuary where many legends, traditions and folklore are still lovingly kept alive, Kandy and its satellite villages are the centre of the islands handicraft industry (items of wood, brass & silver) exquisite silver or gold jewellery and precious gems of many varieties including the worlds best blue and star sapphires. Check in to the hotel in Kandy & relax Dinner & overnight in Kandy</p> <iframe width="800" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&a mp;q=Kandy,+Sri+Lanka&amp;aq=3&amp;sll=37.0625,95.677068&amp;sspn=39.235538,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Kandy,+ Central+Province,+Sri+Lanka&amp;z=13&amp;ll=7.284459,80.637459&amp;output=em bed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode =&amp;q=Kandy,+Sri+Lanka&amp;aq=3&amp;sll=37.0625,95.677068&amp;sspn=39.235538,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Kandy,+ Central+Province,+Sri+Lanka&amp;z=13&amp;ll=7.284459,80.637459" style="color:#0000FF;text-align:left">View Larger Map</a></small> <h5>day 2</h5> <p>Breakfast at the hotel. Later, check out on time and proceed to the Nuwara Eliya Travel time: Approximately 2 hrs.</p> <h5>day 3</h5> <p>Breakfast at the hotel. Later, check out on time and proceed to the Horton Plains

(This Trek will consume at least 3 hours) Travel time: Approximately 1 hr (One way to the Entrance) Horton Plains - Sri Lanka's highest plateau 7200 ft above sea level in the central mountain country. This Fen is a very scenic region with an astounding variety of scenery from mountains to grasslands, from marshes to trout streams. Sri Lanka's best flavored high grown teas are grown in the surrounding areas. Spectacular view from 'Worlds End' where the plateau plunges a thousand feet in a straight sheer drop. Cool and bracing climate, excellent for trout fishing and very good hiking country. Distinctive flora (many English field flowers grow on the plains) colourful butterflies and many rare highland birds. After the Horton Plains Trek, return back to the hotel PM: Relax at the hotel or evening walk in the city of Nuwara Eliya Dinner & overnight in Nuwara Eliya</p> <iframe width="800" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&a mp;q=Horton+Plains,+Central+Province,+Sri+Lanka&amp;aq=0&amp;sll=6.123861,81 .120537&amp;sspn=0.120843,0.220757&amp;g=Hambantota,+Southern+Province,+Sri+ Lanka&amp;ie=UTF8&amp;hq=Horton+Plains,+Central+Province,+Sri+Lanka&amp;ll=6 .813548,80.782728&amp;spn=0.177267,0.256119&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode =&amp;q=Horton+Plains,+Central+Province,+Sri+Lanka&amp;aq=0&amp;sll=6.123861 ,81.120537&amp;sspn=0.120843,0.220757&amp;g=Hambantota,+Southern+Province,+S ri+Lanka&amp;ie=UTF8&amp;hq=Horton+Plains,+Central+Province,+Sri+Lanka&amp;l l=6.813548,80.782728&amp;spn=0.177267,0.256119" style="color:#0000FF;textalign:left">View Larger Map</a></small> <h5>day 4</h5> <p>Breakfast at the hotel. Later, check out on time and proceed to the Airport on time for the DEPARTURE Travel time: Approximately 1 hour</p> <center>::: End of Program :::</center> </div> </div> </body> </html> Login <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript">

function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> <link rel="stylesheet" type="text/css" href="site_style.css" /> <title>Paradise Tours</title> </head> <body> <div id="wrap"> <div id="menubar"> <table width="100%"> <tr> <td><a href="index.html">Homepage</a></td> <td onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="traveller.html">Traveller</a></td></tr> <tr><td class="menu"><a href="adventure.html">Adventure</a></td></tr> <tr><td class="menu"><a href="valentine.html">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="beach.html">Beach</a></td></tr> <tr><td class="menu"><a href="season.html">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="round_trip.html">Round Trip</a></td></tr> </table> </td> <td class="current"><a href="login.html">Booking</a></td> <td onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a> <table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a href="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr> </table>

</td> <td><a href="sitemap.html">Site Map</a></td> </tr> </table> </div> <img src="img/logo.png" align="left" /> <div id="social"> <a href="http://facebook.com/Paradise_tours"><img src="img/ico/fb.png" /></a> <a href="http://twitter.com/Paradise_tours"><img src="img/ico/twitter.png" /></a> <a href="http://delicious.com/Paradise_tours"><img src="img/ico/delicious.png" /></a><a href="http://plus.google.com/Paradise_tours"><img src="img/ico/google.png" /></a><a href="http://myspace.com/Paradise_tours"><img src="img/ico/myspace.png" /></a> </div> <br/><br/><br/><br/><br/> <img src="img/slogan.png" align="left" /> <div id="footer"> </div> <div id="header"> </div> <div id="content"> <b><font size="+3"><u>Login</u></font size="+4"></b><p></p> <form name="LoginForm" action="login.php" method="post"> <table border cellpadding ="2"> <tr> <td>Username</td> <td><input type="text" name="uname" size="20"></td> <tr/> <tr> <td>Password</td> <td><input type="password" name="password" size="20" VALUE=""/></td> </tr> </table> <input type="submit" value="Login"/> </form> </br>

If your not registered <b>Please</b> <a href="http://localhost/site/register.html"><u><b>Register</b></u></a> </div> <div id="footer"> <p><span>2011 Paradise Tours<a href="#"></a></span><br /> Template design and coded by <a href="details_janith.html">Janith Amarawickrama</a></p> </div> </body> </html> Login php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> <link rel="stylesheet" type="text/css" href="site_style.css" /> <title>Paradise Tours</title> </head> <body> <div id="wrap"> <div id="menubar"> <table width="100%"> <tr> <td><a href="index.html">Homepage</a></td> <td class="current" onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="/html/default.asp">Traveller</a></td></tr>

<tr><td class="menu"><a href="/xhtml/default.asp">Adventure</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">Beach</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Round Trip</a></td></tr> </table> </td> <td><a href="buy_packs.html">Booking</a></td> <td onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a> <table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a href="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr> </table> </td> <td><a href="sitemap.html">Site Map</a></td> </tr> </table> </div> <img src="img/logo.png" align="left" /> <div id="social"> <a href="http://facebook.com/Paradise_tours"><img src="img/ico/fb.png" /></a> <a href="http://twitter.com/Paradise_tours"><img src="img/ico/twitter.png" /></a> <a href="http://delicious.com/Paradise_tours"><img src="img/ico/delicious.png" /></a><a href="http://plus.google.com/Paradise_tours"><img src="img/ico/google.png" /></a><a href="http://myspace.com/Paradise_tours"><img src="img/ico/myspace.png" /></a> </div> <h3 align="right"><a href="cart.php"><img src="img/cart.png" alt="" width="32" height="27" />My Cart</a></h3><br/> <img src="img/slogan.png" align="left" /> <div id="footer"> </div> <div id="header"> </div>

</body> </html> <?php $host="localhost"; $username="root"; $password=""; $db_name="paradise"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); $myusername=$_POST['uname']; $mypassword=$_POST['password']; $sql1="SELECT * FROM users WHERE username='$myusername' "; $sql2="SELECT * FROM users WHERE password='$mypassword'"; $result1=mysql_query($sql1); $count2=strcmp($sql2,$mypassword); $count1=mysql_num_rows($result1); if($count2==1 && $count1==1) { session_register("username"); session_register("password"); header("location:index.php"); } else { echo "<table><tr><th><p>Wrong Username or Password. Please Renter</p></th><tr></table>"; } ?> <meta http-equiv="refresh" content="2; URL=http://localhost/site/login.html">

Cart
<?php

ini_set( "display_errors", 0); session_start(); //require_once("includes/connect.php"); $host="localhost"; // Host name $username="root"; // Mysql username $password=""; // Mysql password $db_name="paradise"; // Database name //$tbl_name="users"; // Table name // Connect to server and select databse. mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); if(isset($_GET['page'])){ $pages = array("products","cart"); if(in_array($_GET['page'],$pages)){ $page = $_GET['page']; } else { $page = "products"; } } else { $page = "products"; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> <link rel="stylesheet" type="text/css" href="site_style.css" /> <title>Paradise Tours</title> </head> <body> <div id="wrap"> <div id="menubar"> <table width="100%"> <tr> <td><a href="index.html">Homepage</a></td> <td class="current" onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="/html/default.asp">Traveller</a></td></tr>

<tr><td class="menu"><a href="/xhtml/default.asp">Adventure</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">Beach</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Round Trip</a></td></tr> </table> </td> <td><a href="buy_packs.html">Booking</a></td> <td onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a> <table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a href="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr> </table> </td> <td><a href="sitemap.html">Site Map</a></td> </tr> </table> </div> <img src="img/logo.png" align="left" /> <div id="social"> <a href="http://facebook.com/Paradise_tours"><img src="img/ico/fb.png" /></a> <a href="http://twitter.com/Paradise_tours"><img src="img/ico/twitter.png" /></a> <a href="http://delicious.com/Paradise_tours"><img src="img/ico/delicious.png" /></a><a href="http://plus.google.com/Paradise_tours"><img src="img/ico/google.png" /></a><a href="http://myspace.com/Paradise_tours"><img src="img/ico/myspace.png" /></a> </div> <h3 align="right"><a href="index.php"><img src="img/cart.png" alt="" width="32" height="27" />My Cart</a></h3><br/> <img src="img/slogan.png" align="left" /> <h3 align="right"><a href="Logout.php"><u>logout</u></a></h3><br/> <div id="footer"> </div> <div><?php require($page . ".php");?></div> <div> <table> <tr>

<th><center>Packages in your Cart</center></th> </tr> </table>

<?php if(isset($_SESSION['cart'])){ $sql = "SELECT * FROM products WHERE packageID IN ("; foreach($_SESSION['cart'] as $id => $value){ $sql .= $id. ","; } $sql = substr($sql,0,-1) . ") ORDER BY package ASC"; $query = mysql_query($sql); while($row = mysql_fetch_array($query)){ ?> <table> <tr> <td><p><?php echo $row['package']; ?><?php echo " x " . $_SESSION['cart'][$row['packageID']]['quantity']; ?></p></td> </tr> </table> <?php } } else { echo "<p>Your cart is empty.<br/> Please add some Products"; } echo "<a href='index.php?page=cart'> <u>Go to cart</u></a>"; ?> </div> <div id="footer"> <p><span>2011 Paradise Tours<a href="#"></a></span><br /> Template design and coded by <a href="http://google.lk/">Janith Amarawickrama</a></p> </div> </body> </html>

Cart.php
<?php if(isset($_POST['submit'])){ foreach($_POST as $key => $value){

$key $key $key $key

= = = =

explode("-",$key); end($key); explode("submit",$key); end($key);

if($_POST['quantity-'.$key] <= 0){ unset($_SESSION['cart'][$key]); } else if ($_POST['quantity-'.$key] >= 100){ $_SESSION['cart'][$key]['quantity'] = 100; }else{ $_SESSION['cart'][$key]['quantity'] = $value; } } } error_reporting(0); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="site_style.css" media="screen,projection" /> <title>Cart</title>

</head> <body>

</br> <table> <tr> <th><center>Your cart</center></th> </tr> </table> <a href="index.php?page=products" title="Go back to products page"><u>Go to Our Packages</u></a> <?php $sql = "SELECT * FROM products WHERE packagesID IN ("; foreach ($_SESSION['cart'] as $id => $value){ $sql .= $id . ","; } $sql = substr($sql,0,-1).") ORDER BY packages ASC"; $query = mysql_query($sql); if(empty($query)){ echo "<br/><spab class = '1'>You need to add an item to view the cart</span>";

} ?> <form method="post" action="index.php?page=cart"> <fieldset> <table> <tr> <th>Package Name</th> <th>Quantity</th> <th>Price per package</th> <th>Total cost</th> </tr> <?php $sql = "SELECT * FROM products WHERE packageID IN ("; foreach ($_SESSION['cart'] as $id => $value){ $sql .= $id . ","; } $sql = substr($sql,0,-1).") ORDER BY package ASC"; $query = mysql_query($sql); $total_price = 0; if(!empty($query)){ while($row = mysql_fetch_array($query)){ $subtotal = $_SESSION['cart'][$row['packageID']]['quantity']*$row['price']; $total_price += $subtotal; ?> <tr> <td><?php echo $row['package'];?></td> <td><input type="text" name="quantity-<?php echo $row['packageID'];?>" size="5" value="<?php echo $_SESSION['cart'][$row['packageID']][quantity];?>"/></td> <td><?php echo "LKR." . $row['price']; ?></td> <td><?php echo "LKR." . $_SESSION['cart'][$row['packageID']]['quantity']*$row['price']; ?></td> </tr> <?php } } ?> <tr> <td> </td> <td></td> <td>Total price</td> <td><?php echo "LKR." . $total_price; ?></td> </tr> </table> <input type="submit" name="submit" value="Update cart" /><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_login-run"><input type="button" value="Check out" ></a></fieldset> </form> <p>To remove any package please remove the Quantity and Update Cart </p>

Logout.php

<? session_start(); session_destroy(); ?> <meta http-equiv="refresh" content="0; URL=index.html">

Quiz
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="site_style.css" media="screen,projection" /> <title>Quiz</title> <script type="text/javascript"> var ans = new Array(); var done = new Array(); var yourAns = new Array(); var explainAnswer = new Array(); var score = 0; ans[1] = "a"; ans[2] = "a"; ans[3] = "a"; ans[4] = "a"; ans[5] = "a"; ans[6] = "b"; ans[7] = "c"; ans[8] = "a"; ans[9] = "a"; ans[10] = "a"; var c = 59; var t; var myTimer; function alertUser() { alert("Time's up!");

clearTimeout(myTimer); clearTimeout(t); Score(); } function updateText() { document.getElementById('txt').value=c; c=c-1; t = setTimeout("updateText()",1000); } function startTimer() { myTimer = setTimeout("alertUser()",60000); updateText(); } function Anwserscheck(question, answer) { yourAns[question]=answer; } function Score(){ clearTimeout(myTimer); clearTimeout(t); var answerText = "<h3>Your Results</h3>"; for(i=1;i<=10;i++) { answerText=answerText+"<br/><b>Question:</b><b> "+i+"</b><br/>"; if(ans[i] != yourAns[i]) { answerText=answerText+"<br/>The correct answer is "+ans[i]+"<br/>"; answerText=answerText+"<br/>Your answer was "+yourAns[i]+"<br/><br/>"; score--; } else{ answerText=answerText+" <br/>Correct!<br/>"; score += 2; } } answerText=answerText+"<br/><br/>Your total score is : "+score+"<br/>";

//now score the user answerText=answerText+"<br/>Comment : "; if(score<=0){ answerText=answerText+"You need to learn some more"; document.getElementById('qCell').innerHTML = <font color="red"><h3>BAD</h3></font>; } if(score>=0 && score <=10){ answerText=answerText+"Bit more practice"; document.getElementById('qCell').innerHTML = <font color="blue"><h3>Way to go</h3></font>; } if(score>10){ answerText=answerText+"You rock!"; document.getElementById('qCell').innerHTML = <font color="green"><h3>Congratulations</h3></font>; } document.getElementById('quizForm').innerHTML = answerText; } function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body onload="startTimer()"> <div id="wrap"> <div id="menubar"> <table width="100%"> <tr> <td><a href="index.html">Homepage</a></td> <td onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="/html/default.asp">Traveller</a></td></tr>

<tr><td class="menu"><a href="/xhtml/default.asp">Adventure</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">Beach</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Round Trip</a></td></tr> </table> </td> <td><a href="login.html">Booking</a></td> <td onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a> <table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a href="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr> </table> </td> <td><a href="sitemap.html">Site Map</a></td> </tr> </table> </div> <img src="img/logo.png" align="left" /> <div id="social"> <a href="http://facebook.com/Paradise_tours"><img src="img/ico/fb.png" /></a> <a href="http://twitter.com/Paradise_tours"><img src="img/ico/twitter.png" /></a> <a href="http://delicious.com/Paradise_tours"><img src="img/ico/delicious.png" /></a> <a href="http://plus.google.com/Paradise_tours"><img src="img/ico/google.png" /></a> <a href="http://myspace.com/Paradise_tours"><img src="img/ico/myspace.png" /></a> </div> <h3 align="right"><a href="cart.php"><img src="img/cart.png" alt="" width="32" height="27" />My Cart</a></h3><br/> <img src="img/slogan.png" align="left" /> <div id="footer"> </div> <BODY> <h1>Quiz</h1> <table>

<tr> <td>Timer(seconds): <input type="text" id="txt" readonly="readonly"/></td> <td id="qCell">Color</td> </tr> </table> <hr> <FORM id="quizForm"> <b>1.What is the capital city in Sri Lanka?</b><br> <input type=radio name="q1" value="a" onClick="Anwserscheck(1, this.value)">a) Colombo<br> <input type=radio name="q1" value="b" onClick="Anwserscheck(1, this.value)">b) Kandy<br> <input type=radio name="q1" value="c" onClick="Anwserscheck(1, this.value)">c) Galle<br> <hr> <b>2.What is the main religion is SL?</b><br> <input type=radio name="q2" value="a" onClick="Anwserscheck(2, this.value)">a) Buddhism<br> <input type=radio name="q2" value="b" onClick="Anwserscheck(2, this.value)">b) Catholic<br> <input type=radio name="q2" value="c" onClick="Anwserscheck(2, this.value)">c) Islam<br> <hr> <b>3.What beach would be the best in SL?</b><br> <input type=radio name="q3" value="a" onClick="Anwserscheck(3, this.value)">a) Nilaweli<br> <input type=radio name="q3" value="b" onClick="Anwserscheck(3, this.value)">b) Mount lavania<br> <input type=radio name="q3" value="c" onClick="Anwserscheck(3, this.value)">c) Kankasanthure<br> <hr> <b>4.What is the hill country in SL?</b><br> <input type=radio name="q4" value="a" onClick="Anwserscheck(4, this.value)">Kandy<br> <input type=radio name="q4" value="b" onClick="Anwserscheck(4, this.value)">Jaffna<br> <input type=radio name="q4" value="c" onClick="Anwserscheck(4, this.value)">Mirissa<br> <hr> <b>5.What is the most famous world heritage in Sri Lanka?</b><br> <input type=radio name="q5" value="a" onClick="Anwserscheck(5, this.value)">Adams Peak<br> <input type=radio name="q5" value="b" onClick="Anwserscheck(5, this.value)">Polonnaruwa<br> <input type=radio name="q5" value="c" onClick="Anwserscheck(5,

this.value)">Anuradhapura<br> <hr> <b>6.Where is the elephant orphanage?</b><br> <input type=radio name="q6" value="a" onClick="Anwserscheck(6, this.value)">Mathara<br> <input type=radio name="q6" value="b" onClick="Anwserscheck(6, this.value)">Pinnawala<br> <input type=radio name="q6" value="c" onClick="Anwserscheck(6, this.value)">Badulla<br> <hr> <b>7.What would be the safari national park in SL?</b><br> <input type=radio name="q7" value="a" onClick="Anwserscheck(7, this.value)">Sinharajaya<br> <input type=radio name="q7" value="b" onClick="Anwserscheck(7, this.value)">Kithulgala<br> <input type=radio name="q7" value="c" onClick="Anwserscheck(7, this.value)">Udawalawe<br> <hr> <b>8.What is the bird paradise in Sri Lanka?</b><br> <input type=radio name="q8" value="a" onClick="Anwserscheck(8, this.value)">Kumana<br> <input type=radio name="q8" value="b" onClick="Anwserscheck(8, this.value)">Yala<br> <input type=radio name="q8" value="c" onClick="Anwserscheck(8, this.value)">Koggala<br> <hr> <b>9.What is main currency use in there?</b><br> <input type=radio name="q9" value="a" onClick="Anwserscheck(9, this.value)">SL Rupees<br> <input type=radio name="q9" value="b" onClick="Anwserscheck(9, this.value)">US Dollers<br> <input type=radio name="q9" value="c" onClick="Anwserscheck(9, this.value)">Indian Rupees<br> <hr> <b>10.What is the most famous hotel in SL?</b><br> <input type=radio name="q10" value="a" onClick="Anwserscheck(10, this.value)">Cinnamon Grand<br> <input type=radio name="q10" value="b" onClick="Anwserscheck(10, this.value)">Hilton<br> <input type=radio name="q10" value="c" onClick="Anwserscheck(10, this.value)">Kandalama<br> <input type=button onClick="Score()" value="Submit"> </FORM> <p><center> </html>

About Us
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="site_style.css" media="screen,projection" /> <title>Thusara Kasun Ranawaka</title> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body> <div id="wrap"> <div id="menubar"> <table width="100%"> <tr> <td><a href="index.html">Homepage</a></td> <td onmouseover="showmenu('packages')" onmouseout="hidemenu('packages')"><a href="packages.html">Packages</a><br/> <table class="menu" id="packages"> <tr><td class="menu"><a href="/html/default.asp">Traveller</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">Adventure</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">Romantic Getaways</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">Beach</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Seasonal Tours</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">Round Trip</a></td></tr> </table> </td> <td><a href="buy_packs.html">Booking</a></td> <td class="current" onmouseover="showmenu('aboutus')" onmouseout="hidemenu('aboutus')"><a href="about_us.html">About Us</a>

<table class="menu" id="aboutus"> <tr><td class="menu"><a href="details_sahan.html">Sahan</a></td></tr> <tr><td class="menu"><a href="details_thushara.html">Thushara</a></td></tr> <tr><td class="menu"><a href="details_janith.html">Janith</a></td></tr> <tr><td class="menu"><a href="details_kasun.html">Kasun</a></td></tr> <tr><td class="menu"><a href="details_keshan.html">Keshan</a></td></tr> </table> </td> <td><a href="sitemap.html">Site Map</a></td> </tr> </table> </div> <img src="img/logo.png" align="left" /> <div id="social"> <a href="http://facebook.com/Paradise_tours"><img src="img/ico/fb.png" /></a> <a href="http://twitter.com/Paradise_tours"><img src="img/ico/twitter.png" /></a> <a href="http://delicious.com/Paradise_tours"><img src="img/ico/delicious.png" /></a> <a href="http://plus.google.com/Paradise_tours"><img src="img/ico/google.png" /></a> <a href="http://myspace.com/Paradise_tours"><img src="img/ico/myspace.png" /></a> </div> <h3 align="right"><a href="cart.php"><img src="img/cart.png" alt="" width="32" height="27" />My Cart</a></h3><br/> <img src="img/slogan.png" align="left" /> <div id="footer"> </div> <div id="content"> <img src="thushara.jpg" ALT="Thushara Kasun" align="right" HEIGHT=190> <b><font size="+2" align="left">Thushara Kasun Ranawaka</font size="+3"></b><br/> <b>Address:<b>87/A "Lumbini",<br>&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Rahula Road,<br/>&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Matara.</b><br/> <b>Tel No(Home):041 2222812</b><br/> <b>Tel No(Mobile):071 6216319 </b><br/> <a href="mailto:thushara35@gmail.com"> E-mail :thushara35@gmail.com</a><br/> <div id="footer"> </div> <b><font size="+2"> <u>Personal Details</u> </font size="+2"></p></b>

<table border cellpadding ="2"> <tr> <td width= "500"> <b><p> 1) Full Name :</b><br/> <b><p> 2) Date of Birth :</b><br/> <b><p> 3) Gender :</b> <br/> <b><p> 4) Address :</b><br/> <b><p> 5) Contact Numbers :</b><br/> <b><p> 6) Nationality :</b><br/> <b><p> 7) N.I.C.No :</b><br/> <p><b> 8) School attended :</b><br/> <p><b> 9) IIT student ID no :</b><br/> </td> <td width= "500"> <p>R.A.Thushara Kasun Ranawaka<p/> <p> 5^th March 1991<p/> <p> Male<p/> <p> 87/A "Lumbini",Rahula Road,Matara.<p/> <p> Home - 041 2222812 Mobile - 071 6216319<p/> <p> Sri Lankan<p/> <p> 910650076V<p/> <p> Rahula College,Matara<p/><p/> <p> 2010066<p/><p/> </td> </tr> </table> <p><u><b>EDUCATION QUALIFICATIONS </b></u></p> <p>Successfully completed Ordinary Level Examination(2007)</p> <table> <table border cellpadding ="2"> <tr> <td width= "500"> <ol> Sinhala Language :<br/> English :<br/> Social Studies :<br/> Mathematics :<br/> Science & Technology:<br/>

Buddhism :<br/> Health Science :<br/> Electronics :<br/> Western Music :<br/> </ol> </td> <td width= "500"> <ol> A<br/> A<br/> A<br/> A<br/> A<br/> A<br/> A<br/> A<br/> A<br/> A<br/> </ol> </td> </tr> </table> <p>Succesfully completed Advanced Level Examination(2010)</p> <table> <table border cellpadding ="2"> <tr> <td width= "500"> <ol> Mathematics :<br/> Chemistry :<br/> Physics :<br/> General English :<br/> </ol> </td> <td width= "500"> <ol> C<br/> C<br/>

C<br/> C<br/> </ol> </td> </tr> </table> <p><b><u>SKILLS AND EXPERIENCE</u></p></b> </div> </body> </html>

CSS
/*Main layout and header*/ body { background:url(img/bg.gif) repeat-y top center #eaeaea; font:76% Verdana,Tahoma,Arial,sans-serif; line-height:1.4em; margin:0 auto; } #wrap { background:#fff; color:#303030; margin:0 auto; padding:1px 15px; width:800px; }

#header { background:url(img/banner.gif) no-repeat bottom left; color:#505050; height:250px; margin:0 0 10px; } /*Social media icons set*/ #social {

padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 620px; } /*Menubar*/ #menubar { background:menubg2.gif repeat-x bottom; padding:0 10px 0 0; font-size:1.1em; } #menubar td { background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px; } #menubar td:hover, #menubar td.current { background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border-bottom:1px solid #b0b0b0; border-left:1px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050; } table.menu { width:200px; font-size:100%; position:absolute; visibility:hidden; } td.current{background:url(img/menubg2.gif) repeat-x left bottom #eaeaea;} /* Right sidebar */ #extras {float:right; margin:0 0 10px; padding:0; width:160px;} #extras p,#extras ul {font-size:0.9em; line-height:1.3em; margin:0 0 1.5em; padding:0;} #extras li {list-style:none; margin:0 0 6px; padding:0;} #extras h2 {font-size:1.5em; font-weight:400; letter-spacing:-1px; margin:0 0 6px;} /* Main content */ #content {

line-height:1.5em; margin:10px 170px 10px 10px; padding:0; text-align:left; } #contentwide {line-height:1.5em; margin:10px 0 10px 160px; padding:0; textalign:left;} #content h2,#contentwide h2 {font-size:1.8em; font-weight:400; letter-spacing:-1px; margin:8px 0 10px;} #content h3,#contentwide h3 {font-size:1.5em; font-weight:400; margin:6px 0; padding:0;} #content ul,#content ol,#contentwide ul,#contentwide ol {margin:0 0 16px 20px; padding:0;} #content ul ul,#content ol ol,#contentwide ul ul,#contentwide ol ol {margin:2px 0 2px 15px;} #content li,#contentwide li {margin:0 0 2px 5px; padding:0 0 0 4px;} /* Footer */ #footer {background:#fff; border-top:2px solid #dadada; clear:both; color:#666; fontsize:0.9em; margin:0 auto; padding:8px 0; text-align:center; width:800px;} #footer p {margin:0; padding:0;} #footer a {background:inherit; color:#666; font-weight:400; text-decoration:none;} #footer a:hover {text-decoration:underline;} #footer span {font-size:1.2em;} /* Links and paragraphs */ a {background:inherit; color:#166090; text-decoration:none; font-weight:700;} a:hover {background:inherit; color:#286ea0;} a img {border:0;} p {margin:0 0 16px;} /* Tables and forms */ table { border:1px solid #d8d8d8; border-collapse:collapse; line-height:1.3em; width:100%; margin:0 0 16px; padding:0; } caption {font-size:1.5em; font-weight:400; margin:0; padding:6px 0 8px; textalign:left;} th {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; color:#505050; padding:7px; text-align:left;} td { background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; color:#303030;

font-size:0.9em; padding:7px; text-align:left; } input,textarea {border:1px solid #ccc; font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px;} label {margin:2px 0 2px 0; font-size:1.2em;} /*input {width:200px;}*/ textarea {width:400px;} /* Search box */ #searchbox label,.hide {display:none;} #searchbox {margin:6px 0 16px; padding:0;} #searchbox { border:1px solid #ccc; color:#505050; font-size:0.9em; padding:4px; width:155px; } /*Javascript gallery*/ #myGallery { width: 200px !important; height: 150px !important; } /*Ajax search popup*/ #popups { position: absolute; } /*Make search box go yellow if no packages found*/ #searchbox.error { background-color: #FC0; } /*Search suggestions*/ div.suggestions { background-color: #FFF00; padding: 2px 6px; border: 1px solid #000; }

div.suggestions:hover { background-color: #69F; } /*Align poll results*/ td.poll_res { text-align:left; }