Web Development Lab Roll no.
16EGJCS014
Experiment 6
Task 1
Q. Write a code for Login form using validation in JavaScript.
Sol. Code
<html>
<head>
<script>
function myfunction() {
var a = document.forms["Username"]["a1"].value;
if (a=="") {
alert("Can't Leave Empty."); return False;
}
document.getElementById('demo').innerHTM L="Your Username is "+a+"<br> Your Password is "+b;
}
</script>
<style> form {
margin:auto;
padding:5%;
border:2px solid green
; border-collapse:collapse;
width:15%;
height:35%;
text-align:center;
color:white;
background-color:green;
}
</style>
<title>Login Form With Validation</title>
</head>
<body> <form name="Username" onsubmit="myfunction();">
<div>
<h1 style="text- align:center">APPDECORS</h1>
<h3 style="text-align:center">Login to your account</h3>
Web Development Lab Roll no. 16EGJCS014
<input style="height:30px; width:180px" type="text" name="Username" id="a1" required="true"
placeholder="Username"/>
<br><br><input style="height:30px; width:180px" type="password" name="Password" id="a1" required="true"
placeholder="Password"/><br><br>
<input type="submit" value="Login" style="height:30px; width:180px"><br><br>
<br><br> Forget password? </div>
<div>
<h3 style="color:green">NOT A MEMBER YET?</h3>
<input style="background-color:green; color:white; text-align:center;" type="submit" value="Sign Up">
</div> </form> </body> </html>
Task 2
Q. Write a code for Login form using validation in JavaScript.
Sol. Code
<!doctype html> <html>
<head>
<meta charset="utf-8"> <title>form</title>
<script>
function myfunction() {
var a = document.table[""]["a1"].value; if (a=="")
{
alert("Can't leave empty."); return False;
Web Development Lab Roll no. 16EGJCS014
}}
</script>
</head>
<body style="background-color: #7C55BB"> <table>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">FIRST NAME</font></strong></td>
<td><input type="text" placeholder="first Name" id="a1"></td>
</tr>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">LAST NAME</font></strong></td>
<td><input type="text" placeholder="last Name" id="a1"></td>
</tr>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">DATE OF BIRTH</font></strong></td>
<td><input type="date" placeholder="DATE OF BIRTH" id="a1"></td>
</tr>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">EMAIL ID</font></strong></td>
<td><input type="email" placeholder="EMAIL ID" id="a1"></td>
</tr>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">MOBILE NUMBER</font></strong></td>
<td><input type="number" placeholder="Mobile Number" id="a1"></td>
</tr>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">GENDER</font></strong></td>
<td><input type="radio" name="gender" checked><font color="white">MALE</font><input type="radio"
name="gender"><font color="white">FEMALE</font></td>
</tr>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">ADDRESS</font></strong></td>
<td><textarea></textarea></td>
</tr>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">COUNTRY</font></strong></td>
<td><select name="con">
Web Development Lab Roll no. 16EGJCS014
<option value="" selected="selected">Please Select</option>
<option value="INDIA">INDIA</option>
<option value="INDIA">USA</option> <option value="INDIA">RUSSIA</option> <option
value="INDIA">ENGLAND</option> </select></td>
</tr>
<tr>
<td style="padding: 1% 1% 1% 0%"><strong><font color="white">HOBBIES</font></strong></td>
<td><input type="checkbox"><font color="white">Drawing</font>
<input type="checkbox"><font color="white">Singing</font>
<input type="checkbox"><font color="white">Dancing</font>
<input type="checkbox"><font color="white">Sketching</font></td>
</tr>
<tr valign="top">
<th rowspan="6" style="padding: 1% 1% 1% 0%"><strong><font
color="white">QUALIFICATION</font></strong ></th>
<th><font color="white">S.No.</font></th> <th><font color="white">Examination</font></th>
<th><font color="white">Board</font></th> <th><font color="white">Percentage</font></th> <th><font
color="white">Year of Passing</font></th>
</tr>
<tr>
<td align="center"><font color="white">1</font></td>
<td align="center"><font color="white">Class X</font></td>
<td align="center"><input type="text" placeholder="BOARD NAME" id="a1"></td> <td
align="center"><input type="text" placeholder="%" id="a1"></td>
<td align="center"><input type="text" placeholder="Passing Year" id="a1"></td> </tr>
<tr>
<td align="center"><font color="white">2</font></td>
<td align="center"><font color="white">Class XII</font></td>
<td align="center"><input type="text" placeholder="BOARD NAME" id="a1"></td> <td
align="center"><input type="text" placeholder="%" id="a1"></td>
<td align="center"><input type="text" placeholder="Passing Year" id="a1"></td> </tr>
<tr>
<td align="center"><font color="white">3</font></td>
<td align="center"><font color="white">Graduation</font></td>
<td align="center"><input type="text" placeholder="BOARD NAME" id="a1"></td> <td
align="center"><input type="text" placeholder="%" id="a1"></td>
<td align="center"><input type="text" placeholder="Passing Year" id="a1"></td> </tr>
Web Development Lab Roll no. 16EGJCS014
<tr>
<td align="center"><font color="white">4</font></td>
<td align="center"><font color="white">Masters</font></td>
<td align="center"><input type="text" placeholder="BOARD NAME" id="a1"></td> <td
align="center"><input type="text" placeholder="%" id="a1"></td>
<td align="center"><input type="text" placeholder="Passing Year" id="a1"></td> </tr>
<tr>
<td align="center" style="padding: 30px"><input type="submit" value="Submit"><input type="reset"></td>
</tr>
</table>
</body>
</html>
Web Development Lab Roll no. 16EGJCS014
Experiment 7
Task 1 Q. Give a brief introduction to JQuery.
Ans: jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to
make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require
many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a
single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX
calls and DOM manipulation. The jQuery library contains the following features:
· HTML/DOM manipulation
· CSS manipulation
· HTML event methods
· Effects and animations
· AJAX
· Utilities
There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and
also the most extendable. Many of the biggest companies on the Web use jQuery, such as:
· Google
· Microsoft
· IBM
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the
element(s). Basic syntax is: $(selector).action()
· A $ sign to define/access jQuery
· A (selector) to "query (or find)" HTML elements
· A jQuery action() to be performed on the element(s)
· jQuery selectors allow you to select and manipulate HTML element(s).
· jQuery selectors are used to "find" (or select) HTML elements based on their name,
· id, classes, types, attributes, values of attributes and much more. It's based on the
· existing CSS Selectors, and in addition, it has some own custom selectors.
· All selectors in jQuery start with the dollar sign and parentheses: $().
All the different visitors' actions that a web page can respond to are called events. An event represents
the precise moment when something happens.
Examples:
Web Development Lab Roll no. 16EGJCS014
· moving a mouse over an element
· selecting a radio button
· clicking on an element
Task 2
Q. Write a code for Hide, Show and Toggle the given content using jQuery.
Sol. Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jque ry/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $("#hide").click(function(){
$("p1").hide();
});
});
$(document).ready(function(){ $("#show").click(function(){
$("p1").show();
});
});
$(document).ready(function(){
OUTPUT
$("#toggle").click(function(){ $("p2").toggle();
});
});
</script></head><body>
<button id="hide">Hide</button><br> <p1>Click to HIDE</p1><br>
<button id="show">Show</button><br> <p1>Click to SHOW!</p1><br>
<button id="toggle">Toggle</button><br> <p2>Click to TOOGLE</p2><br>
</body> </html>
Output:
Web Development Lab Roll no. 16EGJCS014
Task 3
Q. Write a code for Slide given content using jQuery.
Sol. Code
<!DOCTYPE html>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jque ry/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $("#slideUp").click(function(){ $("p1").slideUp();
});
});
$(document).ready(function(){ $("#slideDown").click(function(){ $("p1").slideDown();
});
});
$(document).ready(function(){ $("#slideToggle").click(function(){ OUTPUT
$("p2").slideToggle(); });});
</script>
</head>
<body>
<button id="slideUp">Slide Up</button><br> <p1>SLIDING UP</p1><br>
<button id="slideDown">Slide Down</button><br>
<p1>SLIDING DOWN</p1><br>
<button id="slideToggle">Slide Toggle</button><br>
<p2>SLIDING UP AND DOWN</p2><br>
</body> </html>
Web Development Lab Roll no. 16EGJCS014
Output:
Task 4
Q. Write a code for Animate given content using jQuery.
Sol. Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#animate").click(function(){
$("div").animate({left: '250px'});
}); });
</script>
</head>
<body>
<button id="animate">Click to Animate</button><br>
<div> style="background:#CC3399;height:100px;width:100px;position:absolute;"></div><br><br><br>
<br><br><br>
</body>
</html>
Task 5
Q. Write a code for Fade IN & OUT given content using jQuery.
Sol. Code
<!DOCTYPE html>
<html>
Web Development Lab Roll no. 16EGJCS014
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>
$(document).ready(function(){
$("button").click(function(){ $("#a1").fadeToggle(); $("#a2").fadeToggle("slow"); $("#a3").fadeToggle(3000);
}); });
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/out
boxes</button><br><br>
<div id="a1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="a2"
style="width:80px;height:80px;background-color:green;"></div><br> <div id="a3"
style="width:80px;height:80px;background-color:blue;"></div> </body>
</html>
Experiment 8
Task 1
Q. What is WAMP Server and its installation.
Ans:
WampServer is a Windows web development environment. It allows you to create web
applications with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to
manage easily your database.
Web Development Lab Roll no. 16EGJCS014
WampServer installs automatically all you need to start developing web applications and is very
intuitive to use. You will be able to tune your server without even touching the setting files.
Installation of WAMP :-
• Double click on the downloaded file and just follow the instructions. Everything is automatic. The
WampServer package is delivered with the latest releases of Apache, MySQL and PHP.
• Once WampServer is installed, you can manually add Apache, Php or MySQL (only VC9, VC10
and VC11 compiled) versions. Explanations will be provided on the forum.
• Each release of Apache, MySQL and PHP has its own settings and its own files (data’s for
MySQL).
Using WAMP Server :-
• The “www” directory will be automatically created (usually c:\wamp\www)
• Create a subdirectory in “www” and put your PHP files inside.
• Click on the “localhost” link in the WAMP Server menu or open your internet browser and go to
the URL : http://localhost
Q. What is PHP and its usage.
Ans: PHP: Hypertext Preprocessor (earlier called, Personal Home Page)
PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is
a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. PHP 7 is the latest stable
release.
Use of PHP :-
·It runs on different platforms such as Windows, Linux, Unix, etc.
·This language is very simple to learn and runs efficiently on the server side.
·It is compatible with almost all servers used today,such as Apache, IIS, etc.
·It supports many databases such as MySQL, Oracle, PostgreSQL etc.
·It is perfectly suited for Web development and can be embedded directly into the HTML code.
·• PHP can also be used to create dynamic web pages.
Q. What is the syntax of PHP. Explain with the help of an example.
• It runs on different platforms such as Windows, Linux, Unix, etc.
• This language is very simple to learn and runs efficiently on the server side.
• It is compatible with almost all servers used today,such as Apache, IIS, etc.
• It supports many databases such as MySQL, Oracle, PostgreSQL etc.
• It is perfectly suited for Web development and can be embedded directly into the HTML code.
Web Development Lab Roll no. 16EGJCS014
• PHP can also be used to create dynamic web pages.
Ans: A PHP script can be placed anywhere in the document. A PHP script starts with <?php and ends with ?>:
<?php
// PHP code goes here
?>
The default file extension for PHP files is " ".
.php
A PHP file normally contains HTML tags, and some PHP scripting code.
Below, we have an example of a simple PHP file, with a PHP script that uses a built-in PHP function "echo" to
output the text "Hello World!" on a web page:
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1> <?php
echo "Hello World!"; ?>
</body>
</html>
Task 2
Q. Write a code for finding Prime Number by using PHP.
Sol. Code:
<h1>Prime Number</h1> <?php
$num =50;
for( $j = 2; $j <= $num; $j++ ){ for( $k = 2; $k < $j; $k++ ){
if( $j % $k == 0 ){
break;}}
if( $k == $j )
echo "Prime Number : ".$j."<br>";}
?>
Output:
Task 3
Q. Write a code for calculate Addition and Multiplication by using PHP.
Sol. Code:
Web Development Lab Roll no. 16EGJCS014
<h1>Addition and Multiplication</h1>
<?php
$a = 10;
$b = 20;
$c = $a + $b;
$d = $a * $b;
echo "Sum of two numbers : ".$c;
echo "<br>Multiplication of two numbers : ".$d; ?>
OUTPUT:
Task 4
Q. Write a code for finding even number by using PHP.
Sol. Code:
<h1>Even Numbers</h1>
<?php $s; for($s=1; $s<=50; $s++)
{
if($s%2 == 0) {
echo $s."<br>";
}
} ?>
Task 5
Q. Write a code for finding Greater number by using PHP.
Sol. Code:
<h1>Greater Number</h1>
<?php $a = 20; $b = 25;
$c = 15;
if ($a>$b && $a>$c) {
echo "<br>$a is greater.";
}
elseif ($b>$c) {
echo "<br>$b is greater.";
}
else {
Web Development Lab Roll no. 16EGJCS014
echo "<br>$c is greater.";
} ?>
Task 6
Ques. Write a code for finding Factorial by using PHP.
Sol. Code:
<h1>Factorial</h1>
<?php $n = 4; $f = 1;
for ($x=$n; $x>=1; $x--) {
$f = $f * $x;
}
echo "Factorial of $n is $f";
?>
OUTPUT :
