WEB PROGRAMMING LAB MANUAL – FULL
PROGRAMS
WEB PROGRAMMING LAB MANUAL – FULL PROGRAMS
--------------------------------------------------
1. FORM VALIDATION PROGRAM (HTML + JS)
--------------------------------------------------
<!DOCTYPE html>
<html>
<head><title>Form Validation</title></head>
<body>
<h3 style="text-align:center">Validation Form</h3>
<form style="width:25%;margin:0 auto;border:1px solid orange;padding:20px">
Name: <input id="name"><br><br>
Email: <input id="email"><br><br>
Mobile: <input id="mobile"><br><br>
Gender:
<input type="radio" name="g">Male
<input type="radio" name="g">Female<br><br>
Hobbies:
<input type="checkbox">Reading
<input type="checkbox">Gaming
<input type="checkbox">Traveling<br><br>
<input type="button" value="Submit" onclick="v()">
</form>
<script>
function v(){
let n=[Link], e=[Link], m=[Link];
if(!n||!e||!m) return alert("Fill all fields");
if(!/^[a-z0-9]+@[a-z]+.[a-z]{2,3}$/[Link](e)) return alert("Invalid Email");
if(!/^[7-9]\d{9}$/.test(m)) return alert("Invalid Mobile");
}
</script>
</body>
</html>
--------------------------------------------------
2. MATHEMATICAL EXPRESSION EVALUATOR
--------------------------------------------------
<!DOCTYPE html>
<html>
<head><title>Math Expression Evaluator</title></head>
<body>
<h1>Math Expression Evaluator</h1>
<input id="expression">
<button onclick="calc()">Calculate</button>
<p>Result: <span id="result">---</span></p>
<script>
function calc(){
try{ [Link]("result").textContent = eval([Link]); }
catch(e){ [Link]("result").textContent ="Error"; }
}
</script>
</body>
</html>
--------------------------------------------------
3. BASIC ANIMATION USING LAYERS
--------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.layer{position:absolute;width:100px;height:100px;background:pink;border-radius:50%;transition:.5s;}
</style>
</head>
<body>
<div class="layer" id="l1" onmouseover="move(this)"></div>
<div class="layer" id="l2" onmouseover="move(this)"></div>
<div class="layer" id="l3" onmouseover="move(this)"></div>
<script>
function move(x){
let a=[Link]-120, b=[Link]-120;
[Link]=`translate(${[Link]()*a}px,${[Link]()*b}px)`;
}
</script>
</body>
</html>
--------------------------------------------------
4. SUM OF N NATURAL NUMBERS
--------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<input id="n"><button onclick="go()">Calculate</button>
<p id="out"></p>
<script>
function sum(n){return n*(n+1)/2;}
function go(){
let x=parseInt([Link]);
[Link]=(x>=1)?sum(x):"Enter positive number";
}
</script>
</body>
</html>
--------------------------------------------------
5. CURRENT DATE IN WORDS
--------------------------------------------------
<script>
let d=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
let m=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
let t=new Date();
[Link](`${d[[Link]()]}, ${m[[Link]()]} ${[Link]()}, ${[Link]()}`);
</script>
--------------------------------------------------
6. STUDENT INFORMATION – TOTAL, AVERAGE, GRADE
--------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<input id="m"><input id="s"><input id="h"><button onclick="calc()">Go</button>
<p id="t"></p><p id="a"></p><p id="r"></p><p id="g"></p>
<script>
function calc(){
let M=+[Link],S=+[Link],H=+[Link],T=M+S+H,A=T/3;
[Link]=T; [Link]=A;
if(M>=40&&S>=40&&H>=40){
[Link]="Pass";
[Link]=A>=70?"A":A>=60?"B":A>=50?"C":"D";
}else{[Link]="Fail";[Link]="F";}
}
</script>
</body>
</html>
--------------------------------------------------
7. EMPLOYEE SALARY CALCULATION
--------------------------------------------------
<?php
$basic=$_POST['basic'];
$da=$basic*$_POST['d']/100;
$hra=$basic*$_POST['h']/100;
$pf=$basic*$_POST['p']/100;
$tax=$basic*$_POST['t']/100;
$gross=$basic+$da+$hra;
$ded=$pf+$tax;
$net=$gross-$ded;
?>
--------------------------------------------------
8. BACKGROUND COLOR BY DAY
--------------------------------------------------
<?php
$bg=["Sunday"=>"#f66","Monday"=>"#fc9","Tuesday"=>"#9f9","Wednesday"=>"#69f","Thursday"=>"#f9c","Friday"=>"#
$d=date("l");
$c=$bg[$d];
?>
<body style="background:<?= $c ?>">Today is <?= $d ?></body>
--------------------------------------------------
9. PRIME + FIBONACCI
--------------------------------------------------
<?php
function prime($n){if($n<2)return 0;for($i=2;$i*$i<=$n;$i++)if($n%$i==0)return 0;return 1;}
for($i=2;$i<=50;$i++)if(prime($i))echo "$i ";
$a=0;$b=1;
for($i=0;$i<10;$i++){echo "$a ";$c=$a+$b;$a=$b;$b=$c;}
?>
--------------------------------------------------
10. REMOVE DUPLICATES
--------------------------------------------------
<?php
$l=[1,2,2,3,4,4,5];
$r=[$l[0]];
for($i=1;$i<count($l);$i++) if($l[$i]!=$l[$i-1]) $r[]=$l[$i];
?>
--------------------------------------------------
11. STAR PATTERN
--------------------------------------------------
<?php for($i=5;$i>=1;$i--){for($j=1;$j<=$i;$j++)echo "*";echo "\n";} ?>
--------------------------------------------------
12. SEARCH DATA PHP
--------------------------------------------------
<?php
$d=[["name"=>"Guru","email"=>"guru@[Link]","age"=>23]];
?>
--------------------------------------------------
13. CAPTCHA
--------------------------------------------------
<?php
session_start();
$c="";
$s="0123456789ABCDEF";
for($i=0;$i<6;$i++)$c.=$s[rand(0,15)];
$_SESSION["cap"]=$c;
?>
--------------------------------------------------
14. FILE UPLOAD & READ
--------------------------------------------------
<?php
if(move_uploaded_file($_FILES["file"]["tmp_name"],"u/".$_FILES["file"]["name"])) echo "OK";
?>
--------------------------------------------------
15. COLLEGE WEBSITE
--------------------------------------------------
<!DOCTYPE html>
<html><body>Simple College Webpage</body></html>
--------------------------------------------------
16. EXCEPTION HANDLING
--------------------------------------------------
<?php
try{
if($_POST["d"]==0) throw new Exception("Divide by zero");
echo 10/$_POST["d"];
}catch(Exception $e){ echo $e->getMessage(); }
?>