TalentHome SolutionsC Prog Java Data Structures DBMS Web Prog
HTML
Frame.html: Dividing the page into two parts. <html> <head> <title> frames</title> </head> <frameset cols="20%,80%"> <frame src="frametarget.html"/> <frame name="dd"/> </frameset> </html>
Frame Target <html> <head> <title>Frames Target</title> </head> <body> <h3> <a href="TableExample.html" target="dd">Table_Example</a></h3> </body> </html> OUTPUT:
TableExample.html <html> <head> <title> My first form</title> </head> <body> <center> <h1> <font color="pink"> <b><u> Student Registration form</u></b> </font> </h1> <form name="f1"> <table border=2 border color="black" cellspacing=5 cellpadding=5> <tr> <td> Student Name</td> <td> <input type="text" name="SN"> </td> </tr> <tr> <td> Gender:</td> <td> <input type="radio" name="r1"> Male<br> <input type="radio" name="r2"> Female </td> </tr> <tr> <td> Date of birth:</td> <td> <select name="date"> <option> --Select-- <option>1 <option>2 <option>3 <option>4 <option>5 <option>7 <option>8 <option>9 <option>10 <option>11 <option>12 <option>13 <option>14 <option>15 </select> <select name="month"> <option>--Select-- <option> Jan <option> Feb <option> Mar <option> Apr <option> May <option> June <option> July <option> Aug <option> Sep <option> Oct <option> Nov <option> Dec </select> <Select name="year"> <option>--Select-- <option> 1988 <option> 1989 <option> 1990 <option> 1991 <option> 1992 <option> 1993 <option> 1994 <option> 1995 <option> 1996 <option> 1997 <option> 1998 <option> 1999 <option> 2000 <option> 2001 <option> 2002 <option> 2003 <option> 2004 <option> 2005 <option> 2006 <option> 2007 <option> 2008 </select> </td> </tr> <tr> <td> Branch: </td> <td> <select name="sel"> <option> -- Select-- <option> Computer <option> IT <option>Extc <option> Elec </select> </td> </tr> <td> Address:</td> <td><textarea cols=20 rows=5 name="ta"></textarea> </td> </tr> <tr> <td> Hobbies:</td> <td> <input type="checkbox" name="hobbies" value="cricket"> Cricket<br> <input type="checkbox" name="hobbies" value="Football"> Football<br> <input type="checkbox" name="hobbies" value="Hockey"> Hockey </td> </tr> </table><br> <input type="submit" value="submit" > <input type="Reset" value="reset"> </form> </center> </body> </html> OUTPUT:
JavaScript and JQuery
JQuery Validation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Simple Form Validation</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"> </script> <script type="text/javascript"> $("document").ready(function(){ $('#submit').on('click', function() { var valid = true, message = ''; $('form input').each(function() { var $this = $(this); if(!$this.val()) { var inputName = $this.attr('name'); valid = false; message += 'Please enter your ' + inputName + '\n'; } }); if(!valid) { alert(message); } }); }); </script> </head> <body> <form action="" method="post" class="a"> Name : <input type="text" class="text" name="name" id="name" /> <br/> Address : <input type="text" class="text" name="address" id="address" /> <br/> email : <input type="text" class="text" name="email" id="email" /> <br/> <input type="button" id="submit" value="Submit" name="submit" /> </form> </body> </html>
Write a Javascript to change background color continuously
<html> <head> <script type="text/javascript"> var color = new Array("red", "orange", "green", "blue", "brown", "purple", "gray"); var colorInd = 0; var x; function changecolor() { document.bgColor=color[colorInd]; colorInd = (colorInd + 1)% color.length; } function startColorChange() { x = setInterval("changecolor()",1000); } function stopColorChange() { window.document.write("<b> The timer has been stopped...</b>"); clearTimeout(x); } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Disco Theathre Disco</title> </head> <body onload="startColorChange()"> <input type="button" value="STOP" onclick="stopColorChange()"> </body> </html>
JavaScript Validation Form
<html> <head> <script> function check() { var x=document.getElementById("n1").value; var y=document.getElementById("p1").value; if(x=="") { if(y=="") { alert("Enter Name and Password"); } else { alert("Enter Name"); } } else { if(y=="") { alert("Enter Password"); } else { document.forms[0].sumbmit(); } } } </script> </head> <body bgcolor="cyan"> <h1><b><font style="monospace" color="red"> TELEPHONE BILL LOGIN PAGE</font></b></h1> <br><hr> <form action="file:///C:/Users/Kremar%20Mehta/Desktop/Darshi/Web%20Design/HTML/fonts.htm"> <table> <tr> <th>Name</th> <td><input type="text" name="name" id="n1"></td> </tr> <tr> <th>Telephone No</th> <td><input type="password" name="pwd" id="p1"></td> </tr> <tr> <td> <input type="button" value="Login" onclick="check()"> </td> <td><input type="reset" value="RESET"></td> </tr> </table> </form> <br> <a href="file:///C:/Users/Kremar%20Mehta/Desktop/Darshi/Web%20Design/HTML/fonts.htm"> Go back to main page</a> </body> </html>
JSP
Login form using JSP
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Student details </title> </head> <body> </body> <form method="post"> <table border="2"> <tr> <td>ROLL NUMBER</td> <td>NAME</td> <td>EMAIL</td> <td>MARKS</td> </tr> <% try { Class.forName("com.mysql.jdbc.Driver"); String url="jdbc:mysql://localhost/test"; String username="root"; String password="root"; String query="select * from jsp1"; Connection conn=DriverManager.getConnection(url,username,password); Statement stmt=conn.createStatement(); ResultSet rs=stmt.executeQuery(query); while(rs.next()) { %> <tr> <td><%=rs.getInt("ROLL NUMBER ") %></td> <td><%=rs.getString("NAME") %></td> <td><%=rs.getString("EMAIL") %></td> <td><%=rs.getString("MARKS") %></td> </tr> <% } %> </table> <% rs.close(); stmt.close(); conn.close(); } catch(Exception e) { e.printStackTrace(); } %> </form> </html> OUTPUT:
Current Date - JSP
<html> <head> <title>Display Current Date & Time</title> </head> <body> <center> <h1>Display Current Date & Time</h1> </center> <% Date date = new Date(); out.print( "<h2 align = \"center\">" +date.toString()+"</h2>"); %> </body> </html>
PHP and AJAX
The PHP File - "gethint.php" The PHP file checks an array of names, and returns the corresponding name(s) to the browser:
<?php // Array with names $a[] = "Anna"; $a[] = "Brittany"; $a[] = "Cinderella"; $a[] = "Diana"; $a[] = "Eva"; $a[] = "Fiona"; $a[] = "Gunda"; $a[] = "Hege"; $a[] = "Inga"; $a[] = "Johanna"; $a[] = "Kitty"; $a[] = "Linda"; $a[] = "Nina"; $a[] = "Ophelia"; $a[] = "Petunia"; $a[] = "Amanda"; $a[] = "Raquel"; $a[] = "Cindy"; $a[] = "Doris"; $a[] = "Eve"; $a[] = "Evita"; $a[] = "Sunniva"; $a[] = "Tove"; $a[] = "Unni"; $a[] = "Violet"; $a[] = "Liza"; $a[] = "Elizabeth"; $a[] = "Ellen"; $a[] = "Wenche"; $a[] = "Vicky"; // get the q parameter from URL $q = $_REQUEST["q"]; $hint = ""; // lookup all hints from array if $q is different from "" if ($q !== "") { $q = strtolower($q); $len=strlen($q); foreach($a as $name) { if (stristr($q, substr($name, 0, $len))) { if ($hint === "") { $hint = $name; } else { $hint .= ", $name"; } } } } // Output "no suggestion" if no hint was found or output correct values echo $hint === "" ? "no suggestion" : $hint; ?>
AJAX
<html> <head> <script> function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET", "gethint.php?q=" + str, true); xmlhttp.send(); } } </script> </head> <body> <p><b>Start typing a name in the input field below:</b></p> <form> First name: <input type="text" onkeyup="showHint(this.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html>
PHP Form Handling
File: form1.html <form action="login.php" method="post"> <table> <tr><td>Name:</td><td> <input type="text" name="name"/></td></tr> <tr><td>Password:</td><td> <input type="password" name="password"/></td></tr> <tr><td colspan="2"><input type="submit" value="login"/> </td></tr> </table> </form> File: login.php <?php $name=$_POST["name"];//receiving name field value in $name variable $password=$_POST["password"];//receiving password field value in $password variable echo "Welcome: $name, your password is: $password"; ?>
Server Side Database Connectivity
PHP with MySQL connectivity example-
Create database- <?php // Create connection $conn = mysqli_connect(“localhost”, “talenthome”, “th@123”); // Check connection if (mysqli_connect_error()) { echo "error in connecting to database: " . mysqli_connect_ error ();} // Create database $sql = "CREATE DATABASE student"; if (mysqli_query($conn, $sql)) { echo "Database created successfully"; } else { echo "Error creating database: " . mysqli_error($conn);} ?>
Create table- <?php // Create connection $conn = mysqli_connect(“localhost”, “talenthome”, “th@123”); // Check connection if (mysqli_connect_ errno ()) { echo "error in connecting to database: " . mysqli_connect_ errno ());} // sql to create table $select = mysql_select_db($dbname, “$conn”); $sql = "CREATE TABLE class1 ( rollno NOT NULL AUTO_INCREMENT PRIMARY KEY, firstname VARCHAR(30) NOT NULL, lastname VARCHAR(30) NOT NULL, age INT)"; if (mysqli_query($conn, $sql)) { echo "Table class1 created successfully"; } else { echo "Error creating table: " . mysqli_error($conn); } ?>
Insert Records in table- <?php // Create connection $conn = mysqli_connect(“localhost”, “talenthome”, “th@123”); // Check connection if (mysqli_connect_ errno ()) { echo "error in connecting to database: " . mysqli_connect_ errno ());} $sql = "INSERT INTO class1 (firstname, lastname, age) VALUES (“Kremar”,” Mehta”, 40)"; if (mysqli_query($conn, $sql)) { echo "New record created successfully"; } else { echo "Error: " . $sql . "<br>" . mysqli_error($conn); } ?>