Ipwtcontent

Aim
Hyper Text Markup Language (HTML) is the main markup language for web pages HTML elements are the basic building-blocks of webpages. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (<html>........</html>).
Procedure
Step 1: Open the <HTML> tag and write its <head> and <title> Step 2: Open the <form> tag and write the relevant codes of the form tag Step 3: Create the <table> and fix its table width, height, border, cell padding and cell Spacing Step 4: Under the <tr> and <td> write the relevant title and its contents. Step 5: Fix the image background for the page and align each content which was placed inside <td> Step 6: Add the hyper link by using the <a> anchor tag in the menu in order to toggle the pages from one page to another page. Step 7: Close all the opened tags such as <td>, <tr>, <table>, <a>, <form>, <body>, <html>
HTML Code : index.html

<html> <head> <title>National e-Goverance Plan</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/assam.js"> function login() { document.login.submit(); } </script> </head> <body onload="goforit();"> <div class="container">
1|Page
<div class="clock"> <span id="clock"> </span> </div> <div class="header"> <img src="images/home2.png" border=0 width=1300 height=100 ></a> <div class="navbar"> <li><a href="home.html">Home</a> <a href="faccenter.php">Facilitation Centers</a> <a href="appln.php">Application Forms</a> <a href="implink.php">Important Links</a> <a href="gallery.php">Photo Gallery</a> <a href="help.php">Help</a></li> <a href="logout.php">Logout</a> </div> </div> <div class="left"> <form name="login" action="login-exec.php" method="post"> Username: <input type="text" name="login" /><br /> Password: <input type="password" name="password" /> </br> <input type="submit" value="Sign In" onClick="login();"> </br></br></br> <a href="regn.html">Registration</a></br> <a href="javascript:gotoshow()"><img src="images/11.jpg" name="slide" border=0 width=150 height=150></a> </form> </div> <body> <script> slideshowimages("images/11.jpg","images/13.jpg","images/4.jpg","images/6.jpg") var slideshowspeed=2000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) }
2|Page
slideit() </script> <div class="content"> <h1>About Home e-District</h1> <p>The e-District project is an important enhancement of the States e-Governance implementation programme,Information, in which majority of the G2C and G2G services are delivered by the district administration leveraging Communication and Technology (ICT).This project is a Mission Mode Project (MMP) under National e-Governance Plan(NEGP),funded by Government of India. The key focus is on citizen-centric services as against merely computerization of the Departments.The Government of Assam has chosen two districts,Sonitpur and Goalpara for the pilotimplementation of the e-District provides support to the District Administration Services, which would optimally utilize the ASWAN and State Data Center at Guwahati to deliver services to to enable Citizen Centricthe stakeholders.These services will also be available to the stakeholders over internet.It is envisaged that the Common Service Centers would act as the front end for acceptance of applications and delivery of the services for the eDistrict project. </p> </div> <div id="poll"> <h3>Save One horned Rhino !!!!</h3> <form> Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)" /> <br />No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)" /> </form> </div> <div class="footer">Copyright 2010-13 by Pinku Biswas </div> </div> </body> </html>
3|Page
4|Page
HTML Code : faccenter.php

<?php require_once('auth.php'); ?> <html> <head> <title>National e-Goverance Plan</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/assam.js"></script> </head> <body onload="goforit();"> <div class="container"> <div class="clock"> <span id="clock"> </span> </div> <div class="header"> <img src="images/home2.png" border=0 width=1300 height=100 ></a> <div class="navbar"> <li><a href="home.html">Home</a> <a href="faccenter.php">Facilitation Centers</a> <a href="appln.php">Application Forms</a> <a href="implink.php">Important Links</a> <a href="gallery.php">Photo Gallery</a> <a href="help.php">Help</a></li> <a href="logout.php">Logout</a> </div> </div> <style type="text/css"> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:30%; border-collapse:collapse; } #office td, #office th #office1 td, #office1 th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #office th
5|Page
{ font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#778899; color:#ffffff; } #office tr.alt td { color:#000000; background-color:#778899; } #office1 th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #office1 tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="office"> <tr> <th>DC Office, Goalpara</th> </tr> <tr> <td>Bobita Guha</td> </tr> <tr class="alt"> <td>Anowar Hussain</td> </tr> <tr> <td>Nazmin Sultana</td> </tr> <tr class="alt">
6|Page
<td>Rajibul Ashan</td> </tr> <tr> <td>Nitul Nath</td> </tr> <tr class="alt"> <td>Kushal Chakravartty</td> </tr> </table1> <table1 id="office1"> <tr> <th>DC Office, Sonitpur</th> </tr> <tr> <td>Raman Kalita</td> </tr> <tr class="alt"> <td>Bornali Hazarikan</td> </tr> <tr> <td>Manash Pratim Borah</td> </tr> <tr class="alt"> </table1> </body> </html>
7|Page
HTML Code : appln.php

<?php require_once('auth.php'); ?> <html> <head> <title>National e-Goverance Plan</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/assam.js"> function login() { document.login.submit(); } </script> <style type="text/css"> #appln { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:70%; border-collapse:collapse; } #appln td, #appln th { font-size:1em; border:1px solid #98bf21; padding:4px 12px 4px 12px; } #appln th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#778899; color:#ffffff; } #appln tr.alt td { color:#000000; background-color:#EAF2D3; } </style>
8|Page
<body onload="goforit();"> <div class="container"> <div class="clock"> <span id="clock"> </span> </div> <div class="header"> <img src="images/home2.png" border=0 width=1300 height=100 ></a> <div class="navbar"> <li><a href="home.html">Home</a> <a href="faccenter.php">Facilitation Centers</a> <a href="appln.php">Application Forms</a> <a href="implink.php">Important Links</a> <a href="gallery.php">Photo Gallery</a> <a href="help.php">Help</a></li> <a href="logout.php">Logout</a> </div> </div> <body> <table id="appln"> <tr> <th>Certificate</th> <th>Download</th> </tr> <tr> <td>Permanent Residence Certificate</td> <td><a href=images/1.pdf>Click</a></td> </tr> <tr class="alt"> <td>Next of Kin Certificate</td> <t d><a href=images/2.pdf>Click</a></td> </tr> <tr> <td>Non-Creamy Layer Certificate</td> <td><a href=images/3.pdf>Click</a></td> </tr> <tr class="alt"> <td>Land Valuation Certificate</td> <td><a href=images/4.pdf>Click</a></td> </tr> <tr> <td>Bakijai Clearance Certificates</td> <td><a href=images/5.pdf>Click</a></td> </tr>
9|Page
<tr class="alt"> <td>Income Certificatee</td> <td><a href=images/6.pdf>Click</a></td> </tr> </table> </body> </html>
10 | P a g e
HTML Code : implink.php

<?php require_once('auth.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" lang="en" xml:lang="en"> <head> <title>National e-Goverance Plan</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("DockMenuFX.swf", "DockMenuDiv", "1000", "200", "9.0.0", false, flashvars, params, attributes); </script> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/assam.js"> function login() { document.login.submit(); } </script> </head> <body onload="goforit();"> <div class="container"> <div class="clock"> <span id="clock"> </span> </div> <div class="header"> <img src="images/home2.png" border=0 width=1300 height=100 ></a> <div class="navbar"> <li><a href="home.html">Home</a> <a href="faccenter.php">Facilitation Centers</a> <a href="appln.php">Application Forms</a>
11 | P a g e
<a href="implink.php">Important Links</a> <a href="gallery.php">Photo Gallery</a> <a href="help.php">Help</a></li> <a href="logout.php">Logout</a> </div> </div> <body> <div id="DockMenuDiv"> <a href="http://www.adobe.com/go/getflashplayer"> <imgsrc="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" /> </a> </div> <h1>Click the below image for link</h1> <p>Amtron <a href="http://www.amtron.in/"> <img border="0" src="images/l1.jpg" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>Assam Government <a href="http://www.assam.gov.in/"> <img border="0" src="images/l2.jpg" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>Indian Goverment <a href="http://www.india.gov.in/"> <img border="0" src="images/l3.jpg" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>President of India <a href="http://presidentofindia.nic.in/"> <img border="0" src="images/l4.jpg" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>Prime Minister of India <a href="http://pmindia.gov.in/"> <img border="0" src="images/l5.jpg" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>Department of Electronics and Information System <a href="http://www.mit.gov.in/"> <img border="0" src="images/l6.jpg" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html>
12 | P a g e
13 | P a g e
HTML Code : gallery.html

<html> <head><title>Assam e-district Photo Gallery</title> <style type="text/css"> { border:2px solid; padding:5px; background:#dddddd; border-top-left-radius:2em; -webkit-border-top-left-radius:2em; /* Safari */ } body { color:red; } h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> <script type="text/javascript"> var i=1 function starttimer() { document.getElementById('h_one').style.position="relative"; document.getElementById('h_one').style.left=+i; document.getElementById('h_two').style.position="relative"; document.getElementById('h_two').style.top=+i; i++; timer=setTimeout("starttimer()",10); } function stoptimer() { clearTimeout(timer); } </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> </head> <body onload="starttimer()" onunload="stoptimer(0)"> <h1 id="h_one">Assam e-District</h1> <h1 id="h_two">Assam e-District</h1> <body>
14 | P a g e
<div align="center" > <h2>Photo Galley</h2></br> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <a href="images/1.jpg" rel="lightbox[Photo Gallery]"><img src="images/1.jpg" width="120" height="80" alt="" /></a> &nbsp <a href="images/2.jpg" rel="lightbox[Photo Gallery]"><img src="images/2.jpg" width="120" height="80" alt="" /></a> &nbsp <a href="images/3.jpg" rel="lightbox[Photo Gallery]"><img src="images/3.jpg" width="120" height="80" alt="" /></a></br></br> <a href="images/4.jpg" rel="lightbox[Photo Gallery]"><img src="images/4.jpg" width="120" height="80" alt="" /></a> &nbsp <a href="images/5.jpg" rel="lightbox[Photo Gallery]"><img src="images/5.jpg" width="120" height="80" alt="" /></a> &nbsp <a href="images/6.jpg" rel="lightbox[Photo Gallery]"><img src="images/6.jpg" width="120" height="80" alt="" /></a></br></br> <a href="images/7.jpg" rel="lightbox[Photo Gallery]"><img src="images/7.jpg" width="120" height="80" alt="" /></a> &nbsp <a href="images/8.jpg" rel="lightbox[Photo Gallery]"><img src="images/8.jpg" width="120" height="80" alt="" /></a> &nbsp <a href="images/9.jpg" rel="lightbox[Photo Gallery]"><img src="images/9.jpg" width="120" height="80" alt="" /></a></br></br> </div> <h3>Note: Click any image to view original size.</h3> </body> </html>
15 | P a g e
Aim
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
Procedure
Step 1: Open the new notepad page and start writing the .css code for the html Step 2: Mention all the styles in the css, whichever you want to use in the html pages Step 3: Mention the attributes of each style in the css file. Step 4: Mention all the necessary images, by giving their links in the css file. Step 5: Attach the css file into the html, wherever the styles should be invoked. Step 6: Use the following code to attach the css file into the html pages. Step 7: Use the necessary <div> tag to invoke the stlyes whichever mentioned in the stlye sheet by calling them using the div class. Step 8: The inputs can calso be modified by using the input id and its class.
CSS Code: Style.css

div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left;
16 | P a g e
} h1.header { padding:0; margin:0; } div.left { float:left; width:150px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } #clock { position:absolute; right:300px; } #navbar { right:150; } ul { list-style-type:none; margin:0; padding:0; padding-top:6px; padding-bottom:6px; } li { display:inline; } a:link,a:visited { font-weight:bold; color:#000000;
17 | P a g e
background-color:#FFFFFF; text-align:center; padding:6px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#FFFFFF; } <script language="JavaScript1.1"> var slideimages=new Array() var slidelinks=new Array() function slideshowimages(){ for (i=0;i<slideshowimages.arguments.length;i++){ slideimages[i]=new Image() slideimages[i].src=slideshowimages.arguments[i] } } function slideshowlinks(){ for (i=0;i<slideshowlinks.arguments.length;i++) slidelinks[i]=slideshowlinks.arguments[i] } function gotoshow(){ if (!window.winslide||winslide.closed) winslide=window.open(slidelinks[whichlink]) else winslide.location=slidelinks[whichlink] winslide.focus() } slideshowimages("images/11.jpg","images/13.jpg","images/4.jpg","images/6.jpg") var slideshowspeed=2000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed)
18 | P a g e
} slideit()
19 | P a g e
Aim
JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it's up to the browser to do something with it.
Procedure
Step1. The JavaScript is used to validate the html pages. Step2. The validation can be like the null value checking, alphanumeric validation, number validation and mail id validation. Step 3. In assam e-district all the above said validation is done. Step 4. . The script code should be written inside the <head> tag. Step 5. It can be initiated by using the code <script type="text/javascript">. Step 6. The validation code should be written on the separate function and the function should be called whenever the function should be performed. Step 7. The java script function can be usually called while submitting the form for the validation. Step 8. The validation code should be written like it should intimate the users, to fill the left out field and misfiled field by focusing the appropriate field. Step9. It can be done by using the focus event.
Step10. The number check can also be done by using the onblur () function.
Java Script Code:

var slideimages=new Array() var slidelinks=new Array() function slideshowimages(){ for (i=0;i<slideshowimages.arguments.length;i++){ slideimages[i]=new Image() slideimages[i].src=slideshowimages.arguments[i]
20 | P a g e
} } function slideshowlinks(){ for (i=0;i<slideshowlinks.arguments.length;i++) slidelinks[i]=slideshowlinks.arguments[i] } function gotoshow(){ if (!window.winslide||winslide.closed) winslide=window.open(slidelinks[whichlink]) else winslide.location=slidelinks[whichlink] winslide.focus() } function getVote(int) { 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=xmlhttp.responseText; } } xmlhttp.open("GET","poll_vote.php?vote="+int,true); xmlhttp.send(); } var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","Septemb er","October","November","December") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay()
21 | P a g e
var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() var dn="AM" if (hours>=12) dn="PM" if (hours>12){ hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds //change font size here var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>" if (document.all) document.all.clock.innerHTML=cdate else if (document.getElementById) document.getElementById("clock").innerHTML=cdate else document.write(cdate) } if (!document.all&&!document.getElementById) getthedate() function goforit(){ if (document.all||document.getElementById) setInterval("getthedate()",1000) }
22 | P a g e
23 | P a g e
Aim
PHP is a general-purpose server-side scripting language originally designed for Web development to produce dynamic Web pages. It is one of the first developed serverside scripting languages to be embedded into an HTML source document, rather than calling an external file to process data. Ultimately, the code is interpreted by a Web server with a PHP processor module which generates the resulting Web page. It also has evolved to include a command-line interface capability and can be used in standalone graphical applications.
Procedure
Step1. PHP is used for the server side scripting. Step 2. In the AddProducts page the php is used to print the newly added products by using the echo statement. Step 3. The PHP is also useful in connecting the databases with the forms. Step 4. When ever the data is entered by the user in the php form, the data is fetched by the php and it will let those data to store in the table of a particular database. Step 5. The PHP code should be enclosed by using <? PHP .. ?>
Php Code : login.php

<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Login Form</title> <link href="loginmodule.css" rel="stylesheet" type="text/css" /> </head> <body> <p> </p> <form id="loginForm" name="loginForm" method="post" action="login-exec.php"> <table width="300" border="0" align="center" cellpadding="2" cellspacing="0"> <tr> <td width="112"><b>Login</b></td> <td width="188"><input name="login" type="text" class="textfield" id="login" /></td>
24 | P a g e
</tr> <tr> <td><b>Password</b></td> <td><input name="password" type="password" class="textfield" id="password" /></td> </tr> <tr> <td> </td> <td><input type="submit" name="Submit" value="Login" /></td> </tr> </table> </form> </body> </html>
Php Code : logout.php

<?php //Start session session_start(); //Unset the variables stored in session unset($_SESSION['SESS_MEMBER_ID']); unset($_SESSION['SESS_FIRST_NAME']); unset($_SESSION['SESS_LAST_NAME']); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Logged Out</title> <link href="loginmodule.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Logout </h1> <p align="center"> </p> <h4 align="center" class="err">You have been logged out.</h4> <p align="center">Click here to <a href="login-form.php">Login</a></p> </body> </html>
25 | P a g e
26 | P a g e
Php Code : register.php

<?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("myproject", $con); $sql="INSERT INTO `myproject`.`regn` ( `name` , àddress` , `phone_no` , èmail` , `password` )VALUES ('$_POST[name]','$_POST[address]','$_POST[phone_no]','$_POST[email]','$_POST[password] ')"; if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); } echo "1 Record Added";?> <script>alert("You have successfully Registered."); window.location="index.html";</script> <?php mysql_close($con) ?>
27 | P a g e
28 | P a g e
Aim
The MySQL database has become the world's most popular open source database because of its high performance, high reliability and ease of use. It is also the database of choice for a new generation of applications built on the LAMP stack (Linux, Apache, MySQL, PHP / Perl / Python). MySQL to save time and money powering their high-volume Web sites, business-critical systems and packaged software. MySQL runs on more than 20 platforms including Linux, Windows, Mac OS, Solaris, IBM AIX, giving you the kind of flexibility that puts you in control. Whether you're new to database technology or an experienced developer or DBA, MySQL offers a comprehensive range of database tools, support, training and consulting services to make you successful.
Procedure
Step1. The MySQL will act as a backend and it will store the records of the users in its database. Step2. The databases can be viewed and modified whenever the user in need. Step3. The assam e-district contains the database namely inventory and it contained two tables named as register and products. Step4. The configuration file should be written as the separate file in order to call the database everywhere. Step5. Whenever the form is submitted after the validation check, the content in the form should be stored in the database directly. Step6. The code for storing the data in the database should be written separately and the page of that code should be called by using the form action. Step7. The database updating can also be done by using the same method. Step8. The stock can be viewed by fetching the records from the database. It can be done by writing the mysql_query (); and the result of those query will be stored in a variable and the variable is displayed by using the echo statement. Step9. We can also view all the products by selecting all the record from the database and it can be fetched one by one using the array. Step10. The configure file will have the connection between the local host root and the database. The databases can be selected by using the mysql_select_db ();
29 | P a g e
Mysql Code : registration.php

<?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("myproject", $con); $sql="INSERT INTO `myproject`.`regn` ( `name` , àddress` , `phone_no` , èmail` , `password` )VALUES ('$_POST[name]','$_POST[address]','$_POST[phone_no]','$_POST[email]','$_POST[ password]')"; if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); } echo "1 Record Added";?> <script>alert("You have successfully Registered."); window.location="index.html";</script> <?php mysql_close($con) ?>
30 | P a g e
31 | P a g e
Aim
Ajax ( Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not needed (JSON is often used instead), and the requests do not need to be asynchronous. Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads. Ajax is a technique for creating interactive web applications. Ajax makes it possible to create web pages which are responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability.
Procedure
Step1. The concept of Ajax has been implemented on click event. Step 2. When we
executed. choose a select option between two , a function called "getVote()" is
Step 3. Then the function is triggered by the "onclick" event. Step 4. The getVote() function does the following:

Create an XMLHttpRequest object Create the function to be executed when the server response is ready Send the request off to a file on the server Notice that a parameter (vote) is added to the URL (with the value of the yes or no option)
Step 5. The page on the server called by the JavaScript above is a PHP file called "poll_vote.php"
32 | P a g e
Step 6. The value is sent from the JavaScript, and the following happens
Get the content of the "poll_result.txt" file Put the content of the file in variables and add one to the selected variable Write the result to the "poll_result.txt" file Output a graphical representation of the poll result
Step 7. Lastly the text file (poll_result.txt) is where we store the data from the poll.
Ajax Code : index.html

<html> <head> <title>National e-Goverance Plan</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/assam.js"> function login() { document.login.submit(); } </script> </head> <body onload="goforit();"> <div class="container"> <div class="clock"> <span id="clock"> </span> </div> <div class="header"> <img src="images/home2.png" border=0 width=1300 height=100 ></a> <div class="navbar"> <li><a href="home.html">Home</a> <a href="faccenter.php">Facilitation Centers</a> <a href="appln.php">Application Forms</a> <a href="implink.php">Important Links</a> <a href="gallery.php">Photo Gallery</a> <a href="help.php">Help</a></li> <a href="logout.php">Logout</a> </div> </div> <div class="left"> <form name="login" action="login-exec.php" method="post"> Username: <input type="text" name="login" /><br /> Password: <input type="password" name="password" /> </br>
33 | P a g e
<input type="submit" value="Sign In" onClick="login();"> </br></br></br> <a href="regn.html">Registration</a></br> <a href="javascript:gotoshow()"><img src="images/11.jpg" name="slide" border=0 width=150 height=150></a> </form> </div> <body> <script> slideshowimages("images/11.jpg","images/13.jpg","images/4.jpg","images/6.jpg") var slideshowspeed=2000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) } slideit() </script> <div class="content"> <h1>About Home e-District</h1> <p>The e-District project is an important enhancement of the States e-Governance implementation programme,Information, in which majority of the G2C and G2G services are delivered by the district administration leveraging Communication and Technology (ICT).This project is a Mission Mode Project (MMP) under National e-Governance Plan(NEGP),funded by Government of India. The key focus is on citizen-centric services as against merely computerization of the Departments.The Government of Assam has chosen two districts,Sonitpur and Goalpara for the pilotimplementation of the e-District provides support to the District Administration Services, which would optimally utilize the ASWAN and State Data Center at Guwahati to deliver services to to enable Citizen Centricthe stakeholders.These services will also be available to the stakeholders over internet.It is envisaged that the Common Service Centers would act as the front end for acceptance of applications and delivery of the services for the eDistrict project. </p> </div>
34 | P a g e
<div id="poll"> <h3>Save One horned Rhino !!!!</h3> <form> Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)" /> <br />No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)" /> </form> </div> <div class="footer">Copyright 2010-13 by Pinku Biswas </div> </div> </body> </html>
35 | P a g e
END
36 | P a g e

Ipwtcontent

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ipwtcontent

Загружено:

Авторское право:

Доступные форматы

Aim

HTML Code : index.html

HTML Code : faccenter.php

HTML Code : appln.php

HTML Code : implink.php

HTML Code : gallery.html

CSS Code: Style.css

Java Script Code:

Php Code : login.php

Php Code : logout.php

Php Code : register.php

Mysql Code : registration.php

Ajax Code : index.html

Вам также может понравиться