0 - JSP - Web-Lab Manual
Uploaded by
Farrukh Ahmed0 - JSP - Web-Lab Manual
Uploaded by
Farrukh AhmedLAB MANUAL
WEB ENGINEERING
STD_NAME:
STD ID :
PROGRAM: BS(CS)
INSTRUCTOR: Adnan Alam Khan
Subject: Web Engineering
Course ID: CSC-xxx
Section: A
Name of Student:
Student ID: Semester:Spring-2019
Lab Manual submitted on: ___________________________
Marks Obtained: ___________________________________
Remarks if any: ____________________________________
Signature: _______________________________________
Table of Contents
Lab # Description Date Signature
JavaScript
1,2 Printing Hello World
3 OnMouseover, onClick events and alert command
4 Prompt() function
5 If-else statement
6,7 Window.open() and window.close()
8,9,10,11 Validation checks
12 Validations checks using getElementById() function
13 Image Viewer
14 onMouseOver() & onMouseOUt() events
15,16 onChange() & onkeyup() events
17 Dinner Ordering System
18 Web Survey form
19 Scrolling Text on status bar
PHP
20 DB connection and insertion of record in database
21 Sign-in Program
22 Showing DB all records on browser page
23 Update Record
24 Delete Record
25,26 Sessions
27 File Uploading
28 Email form information
CSS
29 Box Shadow & Inset
30,31,32 Rotation, Translation and Scaling
33,34 Skew, Transition Effects
35 Text Shadow
36,37 Animation with keyframes
38 Border Style
39 Image Gallery
40,41 Navigation Bar
42 Expanding image of mouse over
43 Image Slider
JavaScript is the third mark-up language used to make up the front end of a web document. For simplicity, I like to call
JavaScript the interactive layer that sits on top of HTML and CSS.JavaScript is a scripting language that runs in the
browser and interacts with the HTML mark-up and CSS rules to change what you see and what you can do. What sets
JavaScript apart from other web programming languages like PHP and Ruby is it executes in the browser rather than
on the server. In other words, the interactivity happens locally on whatever device is accessing the document, and in
many cases it can run even if the internet and the connection to the web server is cut. Traditionally, JavaScript loads
into the browser to add interactive behaviours and make changes to DOM nodes within the browser instance. This
could be anything from a simple sliding animation or hide-show behaviour, to something much more complex, like
loading all new content into the document or changing the entire view. In recent years, JavaScript has migrated from
the browser to other environments, meaning you can now create server-side JavaScript applications and populate sites
almost entirely using JavaScript. When you visit a site like linkedin.com, you're seeing a basic HTML and CSS
document generated and managed almost entirely using JavaScript that loads content, adds interactivity, and makes
the site feel less like a web document than an interactive application.
Define JSP.
JavaScript is a scripting language that allows you to write small programs that run in the browser and change the HTML and CSS
of the current document. It interacts with the DOM by targeting and manipulating DOM nodes and reacts to events that take place
in the browser instance.
Here's how JavaScript works in the grand scheme of things?
When you point your browser at an address with an HTML document, the browser first pulls down the HTML document and indexes
all its contents, then downloads any CSS and JavaScript documents referenced, first runs the JavaScript to see if any of the HTML
markup has changed, then applies the CSS to make everything look the way it's supposed to, and finally, leaves the JavaScript
running in case an interaction or event triggers further further scripts.
Define Document Object Model DOM.
Ans: Structural representation of the elements in the document and their relationship.
LAB-1
Objective
The objective of this program is to print Hello World on Web page
Code
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write(“Hello World!”);
</script>
</body>
</html>
Output
LAB-2
Objective
The objective of this program is to print Hello World with HTML tag on Web page
Code
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript">
document.write('<h1>Hello World!</h1>');
</script>
</body>
</html>
Output
LAB-3
Objective
The objective of this program is to learn Events (onMouseover, onClick) and alert command
Code
<html>
<head>
<title> My Page </title>
</head>
<body>
<a href="myfile.html" onMouseover="alert('Mouse Over');"> My Page </A>
<br><br>
<input type = button name = Save Value ="Save" onClick="alert('Mouse Click');">
</body>
</html>
Output
LAB-4
Objective
The objective of this program is to learn prompt() method that displays a dialog box that prompts the
visitor for input.
Code
<html>
<head>
<title> My Page </title>
</head>
<body>
<script language="JavaScript">
prompt('Enter your name:','');
</script>
</body>
</html>
Output
LAB-5
Objective
The objective of this program is to learn if-else condition
Code
<HTML>
<TITLE> PROMPT() EXAMPLE </TITLE>
<HEAD>
<script language=javascript>
var sal = prompt("Enter Your salary")
if(sal<5000) {
alert("less"); }
else {
alert("greater"); }
</script>
</head>
</html>
Output
LAB-6
Objective
The objective of this program is to create a popup window using window.open() method
Code
<HTML>
<HEAD>
<TITLE> Pop-up Messages </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function instruct() {
window.open("instruct.html",“advert",
"status=no,toolbar=no,location=no,menu=no,width=400,height=300");
}
</SCRIPT>
<A HREF="#" onClick="instruct();"> instructions </A>.
</BODY>
</HTML>
Output
LAB-7
Objective
The objective of this program is to learn window.close() method
Code
<HTML>
<HEAD>
<TITLE> Instructions </TITLE>
</HEAD>
<BODY>
<H1> Instructions </H1>
These are the instructions. This is actually a separate HTML document, INSTRUCT.htm. Click the button
below to return.
<FORM NAME="form1">
<INPUT TYPE="button" VALUE="Close" onClick="window.close();">
</FORM>
</BODY>
</HTML>
Output
LAB-8
Objective
The objective of this program is to learn validation check on Text Boxes. This script will not allow user to
leave any text box blank.
Code
<HTML>
<HEAD>
<TITLE> Text Box Validation Check </TITLE>
</HEAD>
<BODY>
<script language="javascript">
function one() {
if(document.myform.t1.value=='') {
alert("Please fill the field first");
document.myform.t1.focus()
}
}
function two() {
if(document.myform.t2.value=='') {
alert("Please fill the field first");
document.myform.t2.focus()
}
}
</script>
<FORM name=myform>
<input type="text" name="t1"> <br>
<input type="text" name="t2" onfocus="one()"> <br>
<input type="submit" name="s1" value="submit" onfocus="two()">
</FORM>
</BODY
</HTML>
Output
LAB-9
Objective
The objective of this program is to learn validation check on Text Boxes. This script will not allow user to
take input in lowercase.
Code
<html>
<head>
<title> LOWERCASE VALIDATION CHECK </title>
</head>
<body>
<script language=javascript>
function check_it()
{
if (document.myform.uname.value != document.myform.uname.value.toUpperCase() ||
document.myform.fname.value != document.myform.fname.value.toUpperCase() )
{
alert("Please write again in Capital Letters");
document.myform.uname.value="";
document.myform.fname.value="";
document.myform.uname.focus();
}
Else
{
alert("Accepted Upper Case");
location="login.html";
}
}
</script>
<form name = myform>
Student Name <input type="text" name="uname"> <br>
Father's Name <input type="text" name="fname">
<input type="button" value="Check" onclick="check_it()">
</form>
</body>
</html>
Output
LAB-10
Objective
The objective of this program is to learn Email validation check.
Code
<html>
<head>
<title> EMAIL VALIDATION CHECK </title>
</head>
<body>
<script language=javascript>
function emailcheck()
{
var string1=document.myform.email.value
if (string1.indexOf("@")==-1)
{
alert("Please input a valid email address!")
}
else
{
alert("Valid Email Address.");
}
}
</script>
<form name="myform">
<strong> Enter your email address: </strong> <br>
<input type="text" size="20" name="email">
<input type="submit" value="Submit" onClick="emailcheck()">
</form>
</body>
</html>
Output
LAB-11
Objective
The objective of this program is to check maximum length of text entered in the Text Box.
Code
<html>
<head>
<title> Text Length </title>
</head>
<body>
<script language=javascript>
function validate()
{
x=document.myForm
input=x.myInput.value
if (input.length>5){
alert("The field cannot contain more than 5 characters!");
return false;
}
else
{
alert("Yes The Field Contain Less Than 5 Characters");
return true;
}
}
</script>
<form name="myForm">
Enter text (less than 5 characters):
<input type="text" name="myInput" size="20">
<input type="submit" value="Submit" onClick="validate()">
</form>
</body>
</html>
Output
LAB-12
Objective
This Lab contains five programs and objective is to learn Form validation
Code-1
<html>
<head>
<title> getElementById demonstration </title>
</head>
<body>
<script language ="javascript">
function validate()
{
if(document.getElementById("t1").value=='')
{
document.getElementById("t1").style.backgroundColor='red';
}
}
</script>
<form>
Name : <input type = text value="" ID="t1">
<input type = button value = "SEND" onClick = "validate()">
</form>
</body>
</html>
Output
Code-2
<html>
<head>
<title> check email demonstration </title>
</head>
<body>
<script language ="javascript">
function checkemail()
{
var myemail=document.abc.email.value;
if(myemail== "")
{
document.getElementById("email_error").innerHTML="No Email Address entered";
return false;
}
else
{
document.getElementById("email_error").innerHTML="";
return true;
}
}
</script>
<form name = abc>
EMAIL ADDRESS: <input type = text name="email"> <br>
<span style=color:red id = email_error> </span>
<input type = button value = "SEND" onClick = "checkemail()">
</form>
</body>
</html>
Output
Code-3
<html>
<head>
<title> check option button demonstration </title>
</head>
<body>
<script language ="javascript">
function checkoptions()
{
var payment="";
var len=document.abc.payment.length;
var i;
for (i = 0; i < len; i++)
{
if ( document.abc.payment[i].checked )
{
payment = document.abc.payment[i].value;
break;
}
}
if(payment== "")
{
document.getElementById("radio_error").innerHTML="No Option Selected";
return false;
}
else
{
document.getElementById("radio_error").innerHTML="";
return true;
}
}
</script>
<form name = abc>
Payment Options : <input type = radio name=payment value = CC> CREDIT CARD
<input type = radio name=payment value = DC> DEBIT CARD
<input type = radio name=payment value = CHQ> CHEQUE
<span style=color:red id = radio_error> </span> <br>
<input type = button value = "SEND" onClick = "checkoptions()">
</form>
</body>
</html>
Output
LAB-13
Objective
The objective of this program is to create an Image Viewer
Code
<html>
<head>
<title> image collections </title>
</head>
<body>
<table width=500>
<tr>
<td height=200 width=100> <img src="forward.gif" onClick="scroll_forward()"> </td>
<td width=300> <img src="pic_1.jpg" name = pic1> </td>
<td width=100> <img src="back.gif" onClick="scroll_backward()"> </td>
</tr>
</table>
<script language = "javascript">
var p1=new Image();
var p2=new Image();
var p3=new Image();
var p4=new Image();
var p5=new Image();
p1.src="pic_1.jpg"
p2.src="pic_2.jpg"
p3.src="pic_3.jpg"
p4.src="pic_4.jpg"
p5.src="pic_5.jpg"
var imgArray= new Array(p1,p2,p3,p4,p5);
var counter=0;
var end = imgArray.length-1;
function scroll_backward()
{
if(counter==0)
{
alert("START OF PICTURES");
}
else
{
counter--;
}
document.pic1.src = imgArray[counter].src;
}
function scroll_forward()
{
if(counter == end)
{
alert("NO MORE PICTURES");
}
else
{
counter++;
}
document.pic1.src = imgArray[counter].src;
}
</script>
</body>
</html>
Output
LAB-14
Objective
The objective of this program is to learn onMouseOver() and onMouseOut() events.
Code
<html>
<head>
<title> image changes on mouseover </title>
</head>
<body>
<IMG SRC="pic_1.jpg" ID="img1" onMouseOver="m_over()" onMouseOut = "m_out()">
<script language = "javascript">
function m_over()
{
document.getElementById("img1").src = "pic_2.jpg"
}
function m_out()
{
document.getElementById("img1").src = "pic_1.jpg";
}
</script>
</body>
</html>
Output
LAB-15
Objective
The objective of this program is to learn onchange() event.
Code
<html>
<head>
<title> onchange demonstration </title>
</head>
<body>
<script language = javascript>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
</body>
</html>
Output
LAB-16
Objective
This lab contains 2 programs and the objective is to learn onkeyup() event.
Code-1
<html>
<head>
<title> onkeyup demonstration </title>
</head>
<body>
<script language = javascript>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
</body>
</html>
Output
Code-2
<html>
<head>
<title> onkeyup demonstration </title>
</head>
<body>
<script language =javascript>
function writeMessage()
{
document.form1.mySecondInput.value=document.form1.myInput.value;
}
</script>
<form name = form1>
Enter your name:
<input type="text" name="myInput" onkeyup="writeMessage()" size="20">
<input type="text" name="mySecondInput" size="20">
</form>
</body>
</html>
Output
LAB-17
Objective
The objective of this program is to create dishes order system.
<html>
<head>
<TITLE> WEB DINNER </TITLE>
<SCRIPT language = javascript>
function updateOrder()
{
var orderString=""
var n=document.diner.entries.length
for(i=0;i<n;i++)
{
if(document.diner.entries.options[i].selected)
{
orderString+=document.diner.entries.options[i].value+"\n"
}
}
document.diner.summary.value=orderString
}
</SCRIPT>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">The Web Diner</H2>
<FORM NAME="diner">
<P><B>Place your order:</B></P>
<SELECT NAME="entries" SIZE="4" MULTIPLE="MULTIPLE" ONCHANGE="updateOrder()">
<OPTION VALUE="Hamburger">Hamburger</OPTION>
<OPTION VALUE="Hot Dog">Hot Dog</OPTION>
<OPTION VALUE="Chicken Sandwich">Chicken Sandwich</OPTION>
<OPTION VALUE="French Fries">French Fries</OPTION>
<OPTION VALUE="Onion Rings">Onion Rings</OPTION>
<OPTION VALUE="Soda">Soda</OPTION>
<OPTION VALUE="Milk Shake">Milk Shake</OPTION>
<OPTION VALUE="Coffee">Coffee</OPTION></SELECT>
<P><B>You ordered: </B></P>
<P>
<TEXTAREA NAME="summary" ROWS="4" COLS="20"></TEXTAREA></P>
<P><INPUT TYPE="SUBMIT" NAME="order" VALUE="Let me have it!"></P>
</FORM>
</BODY>
</HTML>
Output
LAB-18
Objective
The objective of this program is to create Web survey.
Code
<HTML>
<HEAD>
<TITLE> WEB SURVEY PROGRAM </TITLE>
<SCRIPT language = javascript>
function showResults()
{
var resultMsg="“
if(document.survey.age[0].checked) resultMsg+="under 30, "
if(document.survey.age[1].checked) resultMsg+="between 30 and 60, "
if(document.survey.age[2].checked) resultMsg+="over 60, "
if(document.survey.sex[0].checked) resultMsg+="male, "
if(document.survey.sex[1].checked) resultMsg+="female, "
if(document.survey.reading.checked) resultMsg+="reading, "
if(document.survey.eating.checked) resultMsg+="eating, "
if(document.survey.sleeping.checked) resultMsg+="sleeping, "
document.survey.results.value=resultMsg
}
function upperCaseResults()
{
var newResults=document.survey.results.value
document.survey.results.value=newResults.toUpperCase()
}
</SCRIPT>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">Survey Form</H2>
<FORM NAME="survey">
<P><B>Age:</B>
<INPUT TYPE="RADIO" NAME="age" VALUE="under30" ONCLICK="showResults()">Under 30
<INPUT TYPE="RADIO" NAME="age" VALUE="30to60" ONCLICK="showResults()">30 - 60
<INPUT TYPE="RADIO" NAME="age" VALUE="over60" ONCLICK="showResults()">Over 60</P>
<P><B>Sex: </B>
<INPUT TYPE="RADIO" NAME="sex" VALUE="male" ONCLICK="showResults()">Male
<INPUT TYPE="RADIO" NAME="sex" VALUE="female" ONCLICK="showResults()">Female</P>
<P><B>Interests: </B>
<INPUT TYPE="CHECKBOX" NAME="reading" ONCLICK="showResults()"> Reading
<INPUT TYPE="CHECKBOX" NAME="eating" ONCLICK="showResults()"> Eating
<INPUT TYPE="CHECKBOX" NAME="sleeping" ONCLICK="showResults()"> Sleeping</P>
<P>
<INPUT TYPE="BUTTON" NAME="makeUpper" VALUE="To Upper Case"
ONCLICK="upperCaseResults()"></P>
<P><B>Results: </B>
<INPUT TYPE="TEXT" NAME="results" SIZE="50"></P>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit" ONCLICK='return confirm("Sure?")'>
<INPUT TYPE="RESET" NAME="reset" ONCLICK='return confirm("Sure?")'>
</FORM>
</BODY>
</HTML>
Output
LAB-19
Objective
The objective of this program is to scroll text on browser status bar
Code-1
<HTML>
<body>
<Script LANGUAGE="JavaScript">
var Count = 0;
var Text = "Mr. Asim enjoy with this scrolling status bar text!";
var Speed = 90;
var timerID = null;
var TimerRunning = false;
var i = 0;
while (i ++ < 140)
Text = " " + Text;
function Scroll(){
window.status = Text.substring(Count++, Text.length);
if (Count == Text.length)
Count = 0;
timerID = setTimeout("Scroll()", Speed);
TimerRunning = true;
}
function Start(){
Stop();
Scroll();
}
function Stop(){
if(TimerRunning)
clearTimeout(timerID);
TimerRunning = false;
}
Start();
</Script>
</Body>
</Html>
Output
PHP
LAB-20
Objective
The objective of this lab is to create database connection, creation of registration form and insertion of
record in database.
Code
DBCON.PHP
<?php
mysql_connect("localhost", "root", "") or die("Could not connect: " . mysql_error());
mysql_select_db("mydata");
?>
FORM.PHP
<form action=“reg.php" method="post">
Username: <input type=text name=uname><br>
Password: <input type=text name=upass><br>
Name: <input type=text name=ufname><br>
Address: <input type=text name=uadd><br>
Phone: <input type=text name=uphone><br>
<input type=submit>
</form>
REG.PHP
<?php
include "dbcon.php";
$sql = "INSERT INTO users SET username='$_POST[uname]', password='$_POST[upass]',
name='$_POST[ufname]', address='$_POST[uadd]', phone=$_POST[uphone]";
if (@mysql_query($sql)) {
echo('<p><br><center><h1>Successfully added in the database<br><br> <a href=login.php>Login to
server</a></center></h1></p>');
} else {
echo('<p><br><center><h1>Error in registration: ' . mysql_error() . '</center></h1></p>');
}
mysql_close();
?>
Output
LAB-21
Objective
The objective of this lab is to learn Sign-In process
Code
LOGIN.PHP
<form action="usercheck.php" method="post">
Username: <input type=text name=uname><br>
Password: <input type=password name=upass><br>
<input type=submit>
</form>
<br /><h3><a href=reg.php>New user Registration</a>
USERCHECK.PHP
<?php
include "dblocal.php";
$query="SELECT * FROM users WHERE username= '$_POST[uname]' AND password= '$_POST[upass]' ";
$result = mysql_query($query) or die(mysql_error());
if($row = mysql_fetch_array($result)) {
echo "Logged on Successfully";
}
else
echo "Incorrect password:<a href=login.php>Try again";
mysql_close();
?>
Output
LAB-22
Objective
The objective of this lab is to view all records of table on browser page
Code
<?php
include "dbcon.php";
?>
<table align="center" border=2 cellpadding=20>
<tr>
<th>Username</th>
<th>Name</th>
<th>Address</th>
</tr>
<?php
$query="Select * from users";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<tr><td>$row[username]</td><td>$row[name]</td><td>$row[address]</td></tr>";
}
mysql_close();
?>
LAB-23
Objective
The objective of this lab is to make modifications in the record
Code
edit.php
<html>
<head>
<title> Untitled Document </title>
</head>
<body>
<table border="1">
<?php
include "dblocal.php";
$order = "SELECT * FROM users";
$result = mysql_query($order);
while ($row=mysql_fetch_array($result))
{
echo ("<td> $row[Password] </td>");
echo ("<td> $row[Address] </td>");
echo ("<td> $row[Phone] </td>");
echo ("<td><a href=\"edit_form.php?us=$row[Username]\">Edit</a></td>");
echo ("<td><a href=\"del.php?us=$row[Username]\">Delete</a></td></tr>");
}
?>
</table>
</body>
</html>
edit_form.php
<html>
<head>
<title>Form Edit Data</title>
</head>
<?php
$us = $_GET["us"];
?>
<body>
<table>
<?php
include "dblocal.php";
$order = "SELECT * FROM users where Username ='$us'";
$result = mysql_query($order);
$row = mysql_fetch_array($result);
?>
<form method="POST" action="edit_data.php">
<input type="hidden" name="us" value="<?php echo "$row[Username]" ?>" >
<tr>
<td> Password </td>
<td> <input type="text" name="pass" size="20" value="<?php echo "$row[Password]"?>"> </td>
</tr>
<tr>
<td> Name </td>
<td> <input type="text" name="name" size="20" value="<?php echo "$row[Name]"?>"> </td>
</tr>
<tr>
<td> Address </td>
<td> <input type="text" name="address" size="40" value="<?php echo "$row[Address]"?>"> </td>
</tr>
<tr>
<td> Phone </td>
<td> <input type="text" name="phone" size="20" value="<?php echo "$row[Phone]"?>"> </td>
</tr>
<tr>
<td align="right"> <input type="submit" name="submit" value="Edit"> </td>
</tr>
</form>
</table>
</body>
</html>
edit_data
<?php
include "dblocal.php";
$pass=$_POST['pass'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$user=$_POST['us'];
$order = "UPDATE users SET Password='$pass', Name='$name', Address='$address', Phone='$phone'
WHERE Username='$user'";
mysql_query($order);
header("location:edit.php");
?>
Output
LAB-24
Objective
The objective of this lab is to delete record
Code
<?php
include "dblocal.php";
?>
<html>
<head>
<title>Delete Student Record</title>
</head>
<body>
<?php
$user=$_GET["us"];
$query="delete from users where username='$user'";
$result2=mysql_query($query);
echo mysql_error();
echo "<center>Successfully Deleted</center>";
include("edit.php");
?>
</body>
</html>
LAB-25
Objective
The objective of this lab is to learn PHP sessions
Code
form1.php
<?php
include "dbcon.php";
?>
<form method="POST" action="form2.php">
Name: <input type="text" name="name"> <br>
Email: <input type="text" name="email_address">
<input type="submit" value="Go To Step 2">
</form>
form2.php
<?php
session_start();
$_SESSION['name'] = $_POST['name'];
$_SESSION['email_address'] = $_POST['email_address'];
?>
<form method="post" action="form3.php">
free: <input type="radio" name="membership_type" value="Free">
Normal: <input type="radio" name="membership_type" value="Normal">
Delux: <input type="radio" name="membership_type" value="Deluxe">
Terms & Condition: <input type="checkbox" name="terms_and_conditions">
<input type="submit" value="Go To Step 3">
</form>
form3.php
<?php
//let's start the session
session_start();
//finally, let's store our posted values in the session variables
$_SESSION['membership_type'] = $_POST['membership_type'];
$_SESSION['terms_and_conditions'] = $_POST['terms_and_conditions'];
?>
<form method="post" action="formProcess.php">
name_on_card <input type="text" name="name_on_card"><br>
credit_card_number<input type="text" name="credit_card_number"><br>
credit_card_expiration_date<input type="text" name="credit_card_expiration_date"><br>
<input type="submit" value="Finish">
</form>
formProcess.php
<?php
session_start();
include "dbcon1.php";
$sql = "INSERT INTO userform SET name='$_SESSION[name]', email='$_SESSION[email_address]',
membership_type='$_SESSION[membership_type]',
terms_and_condition='$_SESSION[terms_and_conditions]',
name_on_credit_card='$_POST[name_on_card]', credit_card_number='$_POST[credit_card_number]',
credit_card_expiration='$_POST[credit_card_expiration_date]'";
if (@mysql_query($sql))
{
echo('<p><br><center><h1>Successfully added in the database<br><br> </p>');
}
else
{
echo('<p><br><center><h1>Error Adding In DAtabase: ' . mysql_error() . '</center></h1></p>');
}
mysql_close();
?>
OUTPUT
LAB-26
Objective
The objective of this lab is to learn PHP sessions
Code
form1.php
<?php
include "dbcon.php";
?>
<form method="POST" action="form2.php">
Name: <input type="text" name="name"> <br>
Email: <input type="text" name="email_address">
<input type="submit" value="Go To Step 2">
</form>
form2.php
<?php
session_start();
$_SESSION['name'] = $_POST['name'];
$_SESSION['email_address'] = $_POST['email_address'];
?>
<form method="post" action="form3.php">
free: <input type="radio" name="membership_type" value="Free">
Normal: <input type="radio" name="membership_type" value="Normal">
Delux: <input type="radio" name="membership_type" value="Deluxe">
Terms & Condition: <input type="checkbox" name="terms_and_conditions">
<input type="submit" value="Go To Step 3">
</form>
form3.php
<?php
//let's start the session
session_start();
//finally, let's store our posted values in the session variables
$_SESSION['membership_type'] = $_POST['membership_type'];
$_SESSION['terms_and_conditions'] = $_POST['terms_and_conditions'];
?>
<form method="post" action="form_process.php">
name_on_card <input type="text" name="name_on_card"><br>
credit_card_number<input type="text" name="credit_card_number"><br>
credit_card_expiration_date<input type="text" name="credit_card_expiration_date"><br>
<input type="submit" value="Finish">
</form>
form_process.php
<?php
//let's start our session, so we have access to stored data
session_start();
echo "Name: $_SESSION[name]<br>";
echo "Email: $_SESSION[email_address]<br>";
echo "MemberShip Type: $_SESSION[membership_type]<br>";
echo "Terms & Condition: $_SESSION[terms_and_conditions]<br>";
echo "Name on Card: $_POST[name_on_card]<br>";
echo "Credit Card Number: $_POST[credit_card_number]<br>";
echo "Credit Card Expiration Date: $_POST[credit_card_expiration_date]<br>";
?>
OUTPUT
LAB-27
Objective
The objective of this lab is to upload file
Code
<html>
<head>
<title></title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<table>
<tr><td>Filename: </td><td><input type="file" name="file"></td>
<td><input type="submit" value="Upload"></td></tr>
</table>
</form>
</body>
</html>
upload.php:
<?php
if($_FILES["file"]["error"] > 0){
echo "Error" . $_FILES["file"]["error"];
}else{
echo "File name: " . $_FILES["file"]["name"] . "<br>";
echo "File Type: " . $_FILES["file"]["type"] . "<br>";
echo "File Size: " . ($_FILES["file"]["size"]) . " bytes <br>";
//Suppose we want to restrict size of file to 100KB. 100 KB = 102400 bytes
if($_FILES["file"]["size"] < 102400){
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
}else{
echo "Size limit exceeded! File size should be less than 100KB";
}
}
?>
OUTPUT
LAB-28
Objective
The objective of this lab is send email form information
Code
<?php
if(isset($_REQUEST['email']))
{
$to = $_REQUEST['email'];
$subject=$_REQUEST['subject'];
$messege= $_REQUEST['messege'];
mail($to,$subject,$messege);
echo "THANKYOU FOR USING OUR MAIL FORM";
}
else
{
echo "<form action="mail.php" method="post">
EMAIL <input type="email" name="email">
SUBJECT <input type="text" name="subject">
Messege <textarea name="messege" col=20 rows=20> </textarea>
<input type="submit" name="button" /> <br />
</form>";
}
?>
CSS
LAB-29
Objective
The objective of this lab is learn box-shadow with inset
Code
<html>
<head>
<style>
div
{
width:500px;
padding:50px;
box-shadow:inset 0px 0px 50px 25px blue;
margin:200px;
}
</style>
</head>
<body>
<div> STYLE SHEET</div>
</body>
</html>
OUTPUT:
LAB-30
Objective
The objective of this lab is to learn rotation
Code
<html>
<head>
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
-webkit-transform:rotate(180deg);
}
</style>
</head>
<body>
<div> hellow </div>
</body>
</html>
OUTPUT
LAB-31
OBJECTIVE:
The objective of this lab is to learn translation
CODE:
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:2px solid black;
}
div#div2
{
-webkit-transform:translate(50px,100px);
}
</style>
</head>
<body>
<div> hellow.this is a DIV element. </div>
<div id="div2"> hellow. This is a DIV element. </div>
</body>
</html>
LAB-32
OBJECTIVE:
The objective of this lab is to learn scaling
CODE:
<html>
<head>
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
margin:200px;
-webkit-transform:scale(2,4);
}
</style>
</head>
<body>
<div> Hello.This is a DIV element.</div>
<div id="div2"> Hellow.This is a Div element.</div>
</body>
</html>
OUTPUT:
LAB-33
OBJECTIVE:
The objective of this lab is to learn skew
CODE:
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:200px;
-webkit-transform:skew(30deg,20deg);
}
</style>
</head>
<body>
<div> Hello.This is a DIV element.</div>
<div id="div2"> Hellow.This is a Div element.</div>
</body>
</html>
OUTPUT:
LAB-34
OBJECTIVE:
The objective of this lab is to learn transition (changing width)
CODE:
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background:red;
-webkit-transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
OUTPUT:
LAB-35
OBJECTIVE:
The objective of this lab is to learn text shadow
CODE:
<html>
<head>
<style>
div
{
text-shadow:-5px -5px 3px #06C,
5px 5px 3px #936;
color:#333;
margin:50px;
}
</style>
</head>
<body>
<div> STYLE SHEET</div>
</body>
</html>
OUTPUT:
LAB-36
OBJECTIVE:
The objective of this lab is to learn animation with keyframes
CODE:
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
-webkit-animation:myfirst 5s;
}
@-webkit-keyframes myfirst
{
from {background:red;}
to {background:green;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
OUTPUT
LAB-37
OBJECTIVE:
The objective of this lab is to learn different animation function
CODE:
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
OUTPUT:
LAB-38
OBJECTIVE:
The objective of this lab is to learn border style
CODE:
<html>
<head>
<style>
div
{
width:220px;
padding:25px;
border:15px Solid green;
border-color:green blue pink black;
border-style:dashed dotted double groove;
margin:100px;
}
</style>
</head>
<body>
<div> HELLOW </div>
</body>
</html>
OUTPUT:
LAB-39
OBJECTIVE:
The objective of this lab is to learn horizontal image gallery
CODE:
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<img class="thumbnail" src="1.jpg" width="107" height="90">
<img class="thumbnail" src="2.jpg" width="107" height="80">
<img class="thumbnail" src="3.jpg" width="116" height="90">
<img class="thumbnail" src="4.jpg" width="120" height="90">
<img class="thumbnail" src="5.jpg" width="107" height="90">
<img class="thumbnail" src="6.jpg" width="107" height="80">
<img class="thumbnail" src="7.jpg" width="116" height="90">
<img class="thumbnail" src="8.jpg" width="120" height="90">
</body>
</html>
OUTPUT
LAB-40
OBJECTIVE:
The objective of this lab is to make list of hyperlinks
CODE:
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
OUTPUT:
LAB-41
OBJECTIVE:
The objective of this lab is to learn horizontal navigation bar
CODE:
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
OUTPUT:
LAB-42
OBJECTIVE:
The objective of this lab is to learn image expand on mouse over
CODE:
<html>
<head>
<style>
div.img
{
margin:5px;
padding:5px;
border:10px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:10px solid #ffffff;
}
div.img a:hover img{border:90px solid pink;}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="xyz.html"><img src="1.jpg" width="110" height="90"></a>
<div class="desc">PIC1</div>
</div>
<div class="img">
<a target="_blank" href="abc1.html"><img src="2.jpg" width="110" height="90"></a>
<div class="desc">PIC1</div>
</div>
<div class="img">
<a target="_blank" href="abc2.html"><img src="3.jpg" width="110" height="90"></a>
<div class="desc">PIC1</div>
</div>
<div class="img">
<a target="_blank" href="abc3.html"><img src="4.jpg" width="110" height="90"></a>
<div class="desc">PIC1</div>
</div>
</body>
</html>
OUTPUT:
LAB-43
OBJECTIVE:
The objective of this lab is to learn image slider
CODE:
<html>
<head>
<link rel="stylesheet" type="text/css" href="gal.css">
</head>
<body>
<div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="#">CANDY - 1</a>
</div>
<a href="#">
<img src="1.jpg" width=640px height=320px>
</a>
</li>
<li>
<div class="image_title">
<a href="#">CANDY - 2</a>
</div>
<a href="#"> <img src="4.jpg" width=640px height=320px> </a>
</li>
<li>
<div class="image_title">
<a href="#">CANDY - 3</a>
</div>
<a href="#"> <img src="6.jpg" width=640px height=320px> </a>
</li>
<li>
<div class="image_title">
<a href="#">CANDY - 4</a>
</div>
<a href="#"> <img src="10.jpg" width=640px height=320px> </a>
</li>
<li>
<div class="image_title">
<a href="#">CANDY - 5</a>
</div>
<a href="#"> <img src="12.jpg" width=640px height=320px> </a>
</li>
</ul>
</div>
CSS CODE:
*{
margin: 0;
padding: 0;
}
body {
background: #ccc;
font-family: arial, verdana, tahoma;
}
/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/
.accordian {
width: 805px; height: 320px;
overflow: hidden;
/*Time for some styling*/
margin: 100px auto;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
width: 2000px;
/*This will give ample space to the last item to move
instead of falling down/flickering during hovers.*/
}
.accordian li {
position: relative;
display: block;
width: 160px;
float: left;
border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
/*Transitions to give animation effect*/
transition: all 0.5s;
-webkit-transition: all 0.5s;
/*If you hover on the images now you should be able to
see the basic accordian*/
}
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}
.accordian li img {
display: block;
}
/*Image title styles*/
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0;
width: 640px;
}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 16px;
}
OUTPUT:
You might also like
- Internet Programming - 1: Javascript XML BasicNo ratings yetInternet Programming - 1: Javascript XML Basic57 pages
- CS1315: Introduction To Media ComputationNo ratings yetCS1315: Introduction To Media Computation41 pages
- Cs 952 Database and Web Systems Development: Lecture 6: JavascriptNo ratings yetCs 952 Database and Web Systems Development: Lecture 6: Javascript39 pages
- Web Engineering Javascript (Part 2) : Muhammad Umair Naru Department of Computer ScienceNo ratings yetWeb Engineering Javascript (Part 2) : Muhammad Umair Naru Department of Computer Science49 pages
- CS1113 Web Programming: Client Side ScriptingNo ratings yetCS1113 Web Programming: Client Side Scripting88 pages
- Functions: Function Square (Number) (Return Number Number)No ratings yetFunctions: Function Square (Number) (Return Number Number)18 pages
- CS101 Introduction To Computing: (Web Development Lecture 11)No ratings yetCS101 Introduction To Computing: (Web Development Lecture 11)47 pages
- Javascript Is The Scripting Language of The Web! - Javascript Is Used in Millions of Web Pages ToNo ratings yetJavascript Is The Scripting Language of The Web! - Javascript Is Used in Millions of Web Pages To47 pages
- Migrating Legacy JavaScript Projects to TypeScript: A Practical GuideFrom EverandMigrating Legacy JavaScript Projects to TypeScript: A Practical GuideNo ratings yet
- JavaScript. A Comprehensive manual for creating dynamic, responsive websites and applications: Suitable For Both Novice And Experts.From EverandJavaScript. A Comprehensive manual for creating dynamic, responsive websites and applications: Suitable For Both Novice And Experts.5/5 (1)
- Quick JavaScript Learning In Just 3 Days: Fast-Track Learning CourseFrom EverandQuick JavaScript Learning In Just 3 Days: Fast-Track Learning CourseNo ratings yet
- HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App DesignFrom EverandHTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design5/5 (3)
- JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event HandlersFrom EverandJavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event HandlersNo ratings yet
