Assignment Ipwt

COMS 458 WEB TECHNOLOGY
Submitted by
Name: PARTHA PRATIM BANIK Register No. :1102428
Master of Computer Application IV Semester April- 2012
DEPARTMENT OF COMPUTER SCIENCE SCHOOL OF ENGINEERING AND TECHNOLOGY PONDICHERRY UNIVERSITY
PONDICHERRY UNIVERSITY
(A Central University) Pondicherry
DEPARTMENT OF COMPUTER SCIENCE SCHOOL OF ENGINEERING AND TECHNOLOGY PONDICHERRY UNIVERSITY
CERTIFICATE
Certified that it is a bonafide record of practical work done by PARTHA PRATIM BANIK (Register No. 1102453) of M.C.A in IV semester, during Dec 2011 to April 2012.
Faculty In-Charge Submitted for the practical examination held on ____________ at the Department of Computer Science, Pondicherry University.
Internal Examine
External Examiner
INDEX
WEB TECHNOLOGY
S.NO 1 DATE CONTENTS PAGE NO. SIGN.
HTML
CSS
JAVASCRIPT
PHP
MYSQL
AJAX
XML
HTML
AIM-: To design User interface for Bikers Group Webpage
CODE-: LOGIN PAGE CODE <!DOCTYPE html> <html> <head> <title>Home Page</title> </head> <body background="images/new1.jpg"> <p> </p> <h1 ><center><font face="HARD ROCK">Welcome to M@DR!DER$ Zone.........<br>Enter on Your own Risk<br></font></center> </h1> <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> </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> <td><input type="button" name="register" value="Register" onClick="register1();"/></td> </tr> </table> </form> </body> </html> HOME PAGE CODE <!DOCTYPE html> <html> <head> <title>Bikers Group By Partha index</title> </head> <body> <ul> <li class="current"><a href="index.php">home</a></li> <li><a href="about.php">about</a></li> <li><a href="events.php">events</a></li> <li><a href="gallery.php">gallery</a></li> <li><a href="blog.php">poll</a></li> <li><a href="contact-us.php">contact</a></li> <li><a href="logout.php">Logout</a></li> </ul>
<a href="register.htm" class="join"></a> <h3>Join us</h3> <p>register and join me</p> <h2><font face="HARD ROCK">THIS IS THE PERFECT DESTINATION FOR THE MAD BIKERS</font></h2> <a href="about.htm"><img src="images/home-biker.jpg" width="270" height="180" alt="Bikers Club" title="Bikers Club"></a> <a href="about.htm"><img src="images/home-bikers.jpg" width="270" height="180" alt="Bikers Club" title="Bikers Club"></a> <p> This website is all about biking...those who are passionate about bike stunts and expeditions are invited to join us.... </p> <p>The site is free for registration.. </p> <h3><font face="HARD ROCK">Photo Gallery</font></h3> <ul> <li><a href="gallery.htm"><img src="images/9.jpg" width="125" height="80" alt="Bikers Club" title="Bikers Club"></a></li> <li><a href="gallery.htm"><img src="images/777.jpg" width="125" height="80" alt="Bikers Club" title="Bikers Club"></a></li> <li><a href="gallery.htm"><img src="images/img-101.jpg" width="125" height="80" alt="Bikers Club" title="Bikers Club"></a></li> <li><a href="gallery.htm"><img src="images/888.jpg" width="125" height="80" alt="Bikers Club" title="Bikers Club"></a></li> </ul> <a class="more" href="gallery.php">View more »</a> <h3><font face="HARD ROCK">Events</font></h3> <ul> <li>It is the stunt competion organised by Texas local biking group mamarangers , and it is well known competion that has been held for last 5 years... </li> <li>It is the contest between various bikers in Singapore ,its the biggest illegal biking competition in MALAYSIA .</li> <li class="last">It is longdrive to Gingee fort around 200km Journey from PONDICHERRY UNIVERSITY by the students MCA, Dept of Computer Science </li> </ul> <a class="more" href="events.php">Read more »</a> <ul> <li> <h3><font face="Maple Leaf Rag">EXHIBITIONS</font></h3> <p>Details about various bike competitions will be available in this site</p> </li> <li> <h3><font face="Maple Leaf Rag">PHOTOS</font></h3> <p>All user can upload their pictures in the gallery section </p> </li> <li> <h3><font face="Maple Leaf Rag">DEVELOPER</font></h3> <p>This site has been developed by PARTHA PRATIM BANIK</p> </li> </ul> <h3><font face="Maple Leaf Rag">Get In Touch</font></h3>
<form action="be_in_touch.php" method="POST"> <table> <tr><td><input type="text" name="name" value="Name" onblur="if(this.value==''){this.value=this.defaultValue;}" onfocus="if(this.value==this.defaultValue){this.value='';}" /></td></tr> <tr><td><input type="text" name="email" value="Email" onblur="if(this.value==''){this.value=this.defaultValue;}" onfocus="if(this.value==this.defaultValue){this.value='';}" /></td></tr> <tr><td><textarea name="message" onblur="if(this.value==''){this.value=this.defaultValue;}" onfocus="if(this.value==this.defaultValue){this.value='';}">Message</textarea></td></tr> <tr><td><input type="submit" value="submit" class="button" /></td></tr> </table> </form> <ul> <li><a href="http://facebook.com/profile.php?id=1656035496" target="_blank" class="fb">Facebook</a></li> <li><a href="http://twitter.com/partha1111" target="_blank" class="twitr">Twitter</a></li> </ul> © Copyright © 2012. <a href="index.htm">Partha </a> All Rights Reserved to Pondicherry University,Department of Computer Science </body> </html> REGISTRATION PAGE CODE <!DOCTYPE html> <html> <head> <title>Bikers Group By Partha</title> </head> <body> <ul> <li><a href="index_home.php">home</a></li> <li><a href="about.php">about</a></li> <li><a href="events.php">events</a></li> <li><a href="gallery.php">gallery</a></li> <li><a href="blog.php">poll</a></li> <li><a href="contact-us.php">contact</a></li> <li><a href="logout.php">Logout</a></li> </ul> <h1><font face="HARD ROCK">REGISTRATION<</font></h1> <p> This website is free for Registration...Register yourself to use this website's full functionality... </p> <form name="login" action="process.php" method="POST"> <table cellspacing="0" cellpadding="0"> <tbody> <tr><td><label>First Name*</label></td><td> <input name="firstname" type="text" value="" class="txtfield" /></td></tr> <tr><td><label>Last Name*</label></td><td><input name="lastname" type="text" value="" class="txtfield" /></td></tr>
<tr><td><label>Email*</label></td><td><input name="email"type="text" value="" class="txtfield" /></td></tr> <tr><td><label>Password*</label></td><td><input name="password" type="PASSWORD" value="" class="txtfield" /></td></tr> <tr><td><label>Confirm Password*</label></td><td><input name="cpassword" type="PASSWORD" value="" class="txtfield" /></td></tr> <tr><td><label>Address</label></td><td><input name="address" type="text" value="" class="txtfield" /></td></tr> <tr><td><label>Phone</label></td><td><input name="phone" type="text" value="" class="txtfield" /></td></tr> <tr><td colspan="2"><input name="newsletter" type="checkbox" class="checkbox" value="Yes" /><label>Join Our Newsletter</label></td></tr> <tr><td colspan="2"><input name="policy" type="checkbox" class="checkbox" value="yes" /><label>I agree to the Terms of Use and Privacy Policy</label></td></tr> <tr><td colspan="2"><input type="button" value="Register" class="button" onClick="checkpoint();"/></td></tr> <tr><td colspan="2">* = Required Field</td></tr> </tbody> </table> </form> </ul> <li><a href="http://facebook.com/profile.php?id=1656035496" target="_blank" class="fb">Facebook</a></li> <li><a href="http://twitter.com/partha1111" target="_blank" class="twitr">Twitter</a></li> </ul> © Copyright © 2012. <a href="index.htm">Partha </a> All Rights Reserved to Pondicherry University,Department of Computer Science </body> </html> GALLERY CODE <!DOCTYPE html> <html> <head> <title>Bikers Group By Partha</title> </head> <body> <ul> <li><a href="index.htm">home</a></li> <li><a href="about.htm">about</a></li> <li><a href="events.htm">events</a></li> <li class="current"><a href="gallery.htm">gallery</a></li> <li><a href="blog.htm">poll</a></li> <li><a href="contact-us.htm">contact</a></li> </ul> <h1><font face="HARD ROCK">GALLERY</font></h1> <ul> <li> <img src="images/777.jpg"></a> <h4>by ALEX </h4> <p>Stunt show in the streets of Siliguri,West Bengal</p> </li> <li>
<img src="images/888.jpg"></a> <h4>by SUJOY</h4> <p>LADAKH Expedition.....a journey to PARADISE</p> </li> <li> <img src="images/9.jpg"></a> <h4>by RAJEEV</h4> <p>@ STunT peRfOmEd By aN AmAteUr</p> </li> <ul> <li><a href="http://facebook.com/profile.php?id=1656035496" target="_blank" class="fb">Facebook</a></li> <li><a href="http://twitter.com/partha1111" target="_blank" class="twitr">Twitter</a></li> </ul> © Copyright © 2012. <a href="index.htm">Partha </a> All Rights Reserved to Pondicherry University,Department of Computer Science </body> </html>
POLL PAGE CODE <!DOCTYPE html> <html> <head> <title>Bikers Group By Partha about</title> </head> <body> <ul> <li><a href="index.htm">home</a></li> <li class="current"><a href="about.htm">about</a></li> <li><a href="events.htm">events</a></li> <li><a href="gallery.htm">gallery</a></li> <li><a href="contact-us.htm">contact</a></li> </ul> <h1><font face="HARD ROCK">poll</h1></font> <h3>DID u like the WEBSITE?</h3> <form> YES: <input type="radio" name="vote" value="0"/> <br /> NO: <input type="radio" name="vote" value="1"/> </form> <ul> <li><a href="http://facebook.com/" target="_blank" class="fb">Facebook</a></li> <li><a href="http://twitter.com/partha1111" target="_blank" class="twitr">Twitter</a></li> </ul> © Copyright © 2012. <a href="index.htm">Partha </a> All Rights Reserved to Pondicherry University,Department of Computer Science </div> </body> </html>
CONTACT US PAGE CODE <!DOCTYPE html> <html> <head> <title>Bikers Group By Partha Contact</title> </head> <body> <ul> <li><a href="index.htm">home</a></li> <li><a href="about.htm">about</a></li> <li><a href="events.htm">events</a></li> <li><a href="gallery.htm">gallery</a></li> <li><a href="blog.htm">poll</a></li> <li class="current"><a href="contact-us.htm">contact</a></li> </ul> <h1><font face="HARD ROCK">CONTACT DETAILS</h1></font> <p> This website has been designed by PARTHA PRATIM BANIK, persuing MCA degree from the DEPARTMENT OF COMPUTER SCIENCE,PONDICHERRY UNIVERSITY for you. You can join this forum only if u r mad about biking. </p> <br/> <p>Address : 33 SRK Hostel,PONDICHERRY UNIVERSITY,Puducherry-6055014</p> <br/> <p>Mobile Phone Number : +91-7200276735</p> <br/> <p>Email : partha1111@yahoo.co.in</p> <ul> <li><a href="http://facebook.com/profile.php?id=1656035496" target="_blank" class="fb">Facebook</a></li> <li><a href="http://twitter.com/partha1111" target="_blank" class="twitr">Twitter</a></li> </ul> © Copyright © 2012. <a href="index.htm">Partha </a> All Rights Reserved to Pondicherry University,Department of Computer Science </body> </html>
SAMPLE OUTPUT-: LOGIN PAGE
HOME PAGE
REGISTRATION PAGE
GALLERY
EVENTS PAGE
POLL PAGE
CONTACT US PAGE
CSS
AIM-: To provide style to User Interface CODE-: CODE OF STYLE.CSS body { background:#3e1d09 url(../images/bg-body.jpg) center top no-repeat; color: #c1c1c1; font-family: Arial, Verdana, Helvetica, sans-serif; margin:0; } #page { width:940px; margin:0px auto; padding:0px 10px; } #header div a.join, #header ul li a:hover, #header ul li.current, #sidebar input.button { background:url(../images/buttons.gif) no-repeat; } /*-----------------------Header -------------------------*/ #header { height:500px; margin:0px; text-align:right; } #header div a.join { background-position:0 -89px; display:inline-block; height:73px; width:187px; margin-bottom:5px; margin-right:13px; } #header ul { display:inline-block; margin:0px 15px 30px 0px; padding:0px; } #header ul li { float:left; line-height:80px; list-style-type:none; text-align:center; } #header ul li a { color:#888888;
display:block; height:80px; width:72px; text-decoration:none; } #header ul li a:hover, #header ul li.current { font-weight:600; background-position:0 0; } #header div { color:#ffffff; margin:0; padding:75px 30px 0px 0px; } #header div img { margin-right:11px; } #header div h3 { font-weight:normal; margin:0; } #header div p { display:inline-block; font-size:1.28em; margin:0px; } /*------------------------- Body -------------------------*/ #body { display:inline-block; margin:0; } #body p { font-size: 15px; line-height: 22px; margin:0px; padding:0px 0px 10px; text-align: justify; } #body a { color:#ffffff; font-weight: bold; text-decoration: none; outline: medium none; } #main { float:left; width:600px; margin-right:40px; }
#main h2 { color:#ff7800; margin:0px 0px 10px 0px; } #main .featured { background-color:#4a2105; border:1px solid #5a3721; border-radius:6px; padding:10px 10px 0px; } #main .featured img { margin:8px; } #main .featured p { margin:0px; padding-bottom:20px; } #main .section { display:inline-block; padding-top:18px; } #main .section h3 { color: #FF7800; margin:0px 0px 8px; } #main .section ul { list-style-type:none; padding:0px; } #gallery, #events { float:left; width:300px; overflow:hidden; } #gallery h3, #events h3 { margin-bottom:8px; } #gallery a.more, #events a.more { float:right; color:#ffffff; font-size:0.9em; font-weight:normal; text-decoration:none; } #gallery ul { display:inline-block; margin:0px; } #gallery li { float:left; margin:10px 20px 6px 0px;
} #gallery li img { border:1px solid #cd8147; } #gallery a.more { margin-right:24px; } #events ul { margin:0px 0px 10px; } #events ul li { font-size:0.95em; border-bottom:1px dashed #ffffff; padding:10px 0px; text-align:justify; } #events ul li.last { border:0px; } #sidebar { float:right; width:300px; } #sidebar h3 { font-weight:500; width:260px; margin:0px 0px 10px; } #sidebar h3 a { color:#FF7800; } #sidebar h2 a { color: #ff7800; text-decoration: none; outline: medium none; } #sidebar ul { margin:0px; padding:0px; } #sidebar ul li { list-style-type: none; margin-bottom: 20px; background: transparent url('../images/devider.jpg') bottom center; background-repeat: no-repeat; } #sidebar ul li:last-child { background: none; } #sidebar ul li p {
margin:16px 0px 0px; padding-bottom:20px; } #sidebar input.button { float: right; background-position:0 -172px; height: 24px; width: 69px; margin: 0; margin-right: 10px; padding: 0; border: 0; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ } #sidebar input { margin-bottom: 10px; height: 40px; width: 288px; color: #563e08; } #sidebar textarea { margin-bottom: 10px; height: 95px; width: 288px; color: #563e08; } #sidebar table { margin-bottom: 20px; }
/*------------------------- Inner Pages -------------------------*/ #body .contents { background-color:#4a2105; display:inline-block; min-height:870px; border:1px solid #5a3721; border-radius:6px; margin-bottom:20px; padding:10px 19px; } #body .contents .main { float:left; width:575px; padding-right:15px; } #body .contents .sidebar { float:right; width:280px;
padding-left:10px; } #body .contents .sidebar h3 { color: #ff7800; font-weight: 500; width: 260px; margin:10px 0px 6px; } #body .contents h1 { color: #ff7800; margin-bottom: 20px; } #body .contents h2 { color: #BFA58E; margin-bottom: 10px; font-size: 18px; } #body .contents h3 { color: #ff7800; font-weight: 500; margin:10px 0px 6px; padding:0px; } #body .contents ul { display:inline-block; margin: 20px 0; padding:0px; } /*------------------------- About us page -------------------------*/ #body .contents ul.aboutus li { float: left; list-style-type: none; width: 450px; } /*------------------------- Events page -------------------------*/ #body .contents ul.articles li { list-style-type: none; height:150px; margin:0px 0px 20px; } #body .contents ul.articles li h3 { font-size: 1.15em; margin-top:0px; } #body .contents ul.articles li img { float:left; margin-right:20px;
} /*------------------------- Gallery page -------------------------*/ #body .contents div.gallery { width:900px; margin: 20px 0px; overflow:hidden; } #body .contents div.gallery ul { width: 925px; } #body .contents div.gallery ul li { float: left; list-style-type: none; height: 355px; width: 282px; margin: 0px 26px 30px 0px; padding: 0; } #body .contents div.gallery ul li a img { border: 1px solid #000000; } #body .contents div.gallery ul li h4 { color: #ff7800; font-weight: 500; margin-bottom: 5px; } #body .contents div.gallery ul li p { font-size: 0.9em; text-align:left; }
/*------------------------- Register page -------------------------*/ #body .contents div.registration form table { border-collapse:separate; margin-top:20px; } #body .contents div.registration form table tbody tr td { vertical-align: top; padding:5px; } #body .contents div.registration form table tbody tr td input.txtfield { height: 26px; width: 298px; line-height:26px; margin: 0px; padding: 2px; } #body .contents div.registration form table tbody tr td input.checkbox {
border: 0px; margin-right: 8px; padding: 0px; } #body .contents div.registration form table tbody tr td textarea { height: 52px; width: 298px; } #body .contents div.registration form table tbody tr td input.button { background-color: #785339; color: #ffffff; cursor: pointer; border: 0px; margin: 0px; padding: 4px 10px; } #body .contents div.registration form table tbody tr td input.button:hover { color: #ff7800; } /*------------------------- Footer -------------------------*/ #footer { background-color: #CCFF33; height: 60px; width:100%; line-height: 60px; margin:0; position:absolute; left:0px; } #footer div { color: #4D4DFF; font-size: 0.8em; width: 940px; margin: 0 auto; padding:0px 10px; } #footer a { color: #4D4DFF; text-decoration: none; outline: medium none; } #footer a:hover { color: #4D4DFF; } #footer ul { float:left; height:60px; width:210px; margin:0px;
padding:0px; } #footer ul li { float: left; height: 30px; list-style-type: none; margin-right: 20px; padding:15px 0px; } #footer ul li a.fb, #footer ul li a.twitr{ background:url(../images/icons.gif) no-repeat; display:block; height:30px; line-height:30px; } #footer ul li a.fb { background-position:0 0; width:57px; padding-left:35px; } #footer ul li a.twitr { background-position:0 -40px; width:37px; padding-left:40px; } #footer span { float:right; display:block; line-height: 60px; width:335px; }
CODE FOR LIGHTBOX #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; lineheight: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; lineheight: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% norepeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% norepeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; backgroundcolor: #000; } CODE OF HOME PAGE AFTER ADDING CSS <!DOCTYPE html> <html> <head> <title>Bikers Group By Partha about</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page"> <div id="header"> <ul> <li><a href="index.htm">home</a></li> <li class="current"><a href="about.htm">about</a></li> <li><a href="events.php">events</a></li> <li><a href="gallery.php">gallery</a></li> <li><a href="blog.php">poll</a></li> <li><a href="contact-us.php">contact</a></li> <li><a href="logout.php">Logout</a></li> </ul></div> <div id="body"> <div class="contents"> <h1><font face="HARD ROCK">ABOUT</h1></font> <h2>WE ARE MAD ABOUT BIKING</h2> <p> Our main objective is to be form a free website for the bikers who are mad and passionate about bike stunts.... </p> <ul class="aboutus">
<li> <a href=""><img src="images/about-biker.jpg" width="450" height="299" alt="Bikers Club" title="Bikers Club"></a> </li> <li> <a href=""><img src="images/about-bikers.jpg" width="450" height="299" alt="Bikers Club" title="Bikers Club"></a> </li> </ul> <div class="main"> <h2>We Have Many More Things For U</h2> <p>You can have your bikers communities pictures upladed in the web.. then you can get information about various bikes exhibition...and many more..</p> <h2>Be Part of Our Community</h2> <p>To be part of our community is just take a few steps ... you need to do registration which is free of cost.. </div> <div class="sidebar"> <h3>Site Developer</h3> <p> PARTHA PRATIM BANIK<br/> MCA 2ND YEAR <br/> PONDICHERRY UNIVERSITY<br/> PH-+917200276735<br/> e-mail-partha1111@yahoo.co.in </p> <p> REFERENCE- www.w3schools.com</br> css downloaded modified as per site requirement<br/> php code from www.phpfreecode.com books of html,css,javascript,php </div> </div> </div> </div> <div id="footer"> <div><ul> <li><a href="http://facebook.com/" target="_blank" class="fb">Facebook</a></li> <li><a href="http://twitter.com/partha1111" target="_blank" class="twitr">Twitter</a></li> </ul> © Copyright © 2012. <a href="index.htm">Partha </a> All Rights Reserved to Pondicherry University,Department of Computer Science </div> </div> </body> </html>
SAMPLE OUTPUT-: HOME PAGE
PHOTO VIEWER
JAVASCRIPT
AIM-: To perform data validation at client side and make client side dynamic ALGORITHM-: Login page: Step 1-Get username and password from user Step 2-Validate the given input Step3- Fetch username from database table Step4-Match the fetched data and user input Step5- If comparisons is true give profile page Else Return to step1 Register page: Step 1 Provide registration page Step 2- Verified all the details given Step 3- Validate the form that none of the fields are left blank Step 4- Submit all the details Step 5- store the details in database Step 6-give an unique login id And Password Step 7-link to profile page CODE-: Code in login page: <script> function register1() { document.location="register.htm"; } </script>
Code for registration page: <script type="text/javascript"> flag=1; function check() { if(document.login.firstname.value=="") { alert("Name field is blank"); flag=0; } if(document.login.lastname.value=="") { alert("Address field is blank"); flag=0; } if(document.login.email.value=="") {
alert("Userid field is blank"); flag=0; } if(document.login.password.value=="") { alert("Userid field is blank"); flag=0; } if(document.login.cpassword.value=="") { alert("Confirm password field should not be blank"); flag=0; } else { ((document.login.password.value)!=(document.login.cpassword.value)) { alert("Password and Confirm password didn't match"); flag=0; } if(document.login.address.value=="") { alert("Address field is blank "); flag=0; } } if(document.login.phone.value=="") { alert("Name field is blank"); flag=0; } else { var mlen=document.login.phone.value.length; if(mlen<10) { alert("Mobile no must be of minimum 10digit"); flag=0; } } } function checkpoint() { check(); if(flag==1) document.login.submit(); else { alert("Give the detail and try again"); flag=1; }
} </script> SAMPLE OUTPUT-: Login page:
Validating a form
PHP
AIM-: To do server side scripting and database manipulation ALGORITHM-: Step 1-Give all the details in the register page Step 2-Sstore the data in the database we use php functions Step 3- Insert values from register page to the database Step 4-Validate the form we use php Step 5-Store the message in the be-in-touch section we use php function Step 6- we use php for authentication of the user Step 7-we use in the poll section
CODE-: Code for inserting the data of register page <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("bikes", $con); $newsletter = $_POST[newsletter]; $policy=$_POST[policy]; if ($newsletter == "") { $newsletter = "NO"; } if ($policy == "") $policy="NO"; $sql="INSERT INTO `bikes`.`register1` ( `firstname` , `lastname` , èmail` , `password` , àddress` , `phone` , `newsletter` , `policy` )VALUES ('$_POST[firstname]','$_POST[lastname]','$_POST[email]','$_POST[password]','$_POST[address]','$_ POST[phone]','$newsletter','$policy')"; if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); } //echo "1 record added";?>
<script>alert("You have successfully Registered."); window.location="index.php";</script> <?php mysql_close($con)?>
Code for be-in-touch <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("bikes", $con); $sql="INSERT INTO `bikes`.`messages` ( `name` , èmail` , `message` )VALUES ('$_POST[name]','$_POST[email]','$_POST[message]')"; if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); } //echo "1 record added";?> <script>alert("You have successfully Registered."); window.location="index.htm";</script> <?php mysql_close($con)?> Code for login : <?php session_start(); require_once('config.php'); $errmsg_arr = array(); $errflag = false; $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD); if(!$link) { die('Failed to connect to server: ' . mysql_error()); } $db = mysql_select_db(DB_DATABASE); if(!$db) { die("Unable to select database"); } function clean($str) { $str = @trim($str);
if(get_magic_quotes_gpc()) { $str = stripslashes($str); } return mysql_real_escape_string($str); } $login = clean($_POST['login']); $password = clean($_POST['password']); if($login == '') { $errmsg_arr[] = 'Login ID missing'; $errflag = true; } if($password == '') { $errmsg_arr[] = 'Password missing'; $errflag = true; } if($errflag) { $_SESSION['ERRMSG_ARR'] = $errmsg_arr; session_write_close(); header("location: index.php"); exit(); } $qry="SELECT * FROM register1 WHERE Email='$login' AND Password='$password'"; $result=mysql_query($qry); if($result) { if(mysql_num_rows($result) == 1) { session_regenerate_id(); $member = mysql_fetch_assoc($result); $_SESSION['SESS_MEMBER_ID'] = $member['id']; $_SESSION['SESS_FIRST_NAME'] = $member['FirstName']; $_SESSION['SESS_LAST_NAME'] = $member['LastName']; session_write_close(); header("location: index_home.htm"); exit(); }else { header("location: index_home.htm"); exit(); } }else { die("Query failed"); } ?>
SAMPLE OUTPUT-:
My sql
AIM-: To store data in relation database model ALGORITHM-: Step 1-open mysql Step 2-create a database Step 3-inside the databse put the tables Step 4-insert the values inside the tables Step 5-store all the data from the register page and message details Step 6-retrieve the data and verified the the valid login id and password Step 7-store all the information CODE-:
CREATE DATABASE `bike` ;
CREATE TABLE IF NOT EXISTS `register1` ( `FirstName` varchar(256) NOT NULL, `LastName` varchar(256) NOT NULL, Èmail` varchar(256) NOT NULL, `Password` varchar(256) NOT NULL, Àddress` varchar(256) NOT NULL, `phone` varchar(15) NOT NULL, `newsletter` varchar(5) NOT NULL, `policy` varchar(5) NOT NULL, ìd` int(11) NOT NULL AUTO_INCREMENT, PRIMARY KEY (ìd`) )
CREATE TABLE IF NOT EXISTS `messages` ( ìd` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(256) NOT NULL,
èmail` varchar(256) NOT NULL, `message` varchar(512) NOT NULL, PRIMARY KEY (ìd`), UNIQUE KEY ìd` (ìd`) )
SAMPLE OUTPUT-:
AJAX
AIM-:Exchanging data with a server, and update parts of a web page without reloading the whole page. ALGORITHM-: Step1:Start Step2: Make a new object of XmlHttpRequest Step3:Get the specifies element value on Onreadystatchange function Step4:Open the connection with .Open() function Step5:Send the user response to server using Send () function Step6:Pass user response to the php file Step7.Process the user response at server side using Php Step8: Send out put to client side element Step6.End CODE-: <script type="text/javascript"> 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(); } </script> <?php $vote = $_REQUEST['vote']; //get content of textfile $filename = "poll_result.txt"; $content = file($filename); //put content in array $array = explode("||", $content[0]); $yes = $array[0]; $no = $array[1];
if ($vote == 0) { $yes = $yes + 1; } if ($vote == 1) { $no = $no + 1; } //insert votes to txt file $insertvote = $yes."||".$no; $fp = fopen($filename,"w"); fputs($fp,$insertvote); fclose($fp); ?> <h2>Result:</h2> <table> <tr> <td>Yes:</td> <td> <img src="poll.gif" width='<?php echo(100*round($yes/($no+$yes),2)); ?>' height='20'> <?php echo(100*round($yes/($no+$yes),2)); ?>% </td> </tr> <tr> <td>No:</td> <td> <img src="poll.gif" width='<?php echo(100*round($no/($no+$yes),2)); ?>' height='20'> <?php echo(100*round($no/($no+$yes),2)); ?>% </td> </tr> </table> SAMPLE OUTPUT-: Put the Poll out put in two different value

Assignment Ipwt

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Assignment Ipwt

Uploaded by

Copyright:

Available Formats

COMS 458 WEB TECHNOLOGY

Master of Computer Application IV Semester April- 2012

DEPARTMENT OF COMPUTER SCIENCE SCHOOL OF ENGINEERING AND TECHNOLOGY PONDICHERRY UNIVERSITY

DEPARTMENT OF COMPUTER SCIENCE SCHOOL OF ENGINEERING AND TECHNOLOGY PONDICHERRY UNIVERSITY

SAMPLE OUTPUT-: LOGIN PAGE

SAMPLE OUTPUT-: HOME PAGE

} </script> SAMPLE OUTPUT-: Login page:

<script>alert("You have successfully Registered."); window.location="index.php";</script> <?php mysql_close($con)?>

CREATE DATABASE `bike` ;

You might also like