[go: up one dir, main page]
Scribd
Upload
22 views27 pages

WP Lab Manual List

Web Programming lab manual 5th sem BCA (NEP syllabus)

Uploaded by

pradeepganesan78
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views27 pages

WP Lab Manual List

Web Programming lab manual 5th sem BCA (NEP syllabus)

Uploaded by

pradeepganesan78
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

KLE Society’s S Nijalingappa College

Bachelor of Computer Application

Web Programming Lab Manual


5th Semester NEP Syllabus
Labcycle 1: Create a form with the elements of Textboxes, Radio buttons, Checkboxes, and so on. Write JavaScript code
to validate the format in email, and mobile number in 10 characters, If a textbox has been left empty, popup an alert
indicating when email, mobile number and textbox has been left empty.

<!xml version="1.0" encoding="utf-8" ?>


<!DOCTYPE html>
<head>
<title> Validate Text Boxes </title>
<script type="text/javascript">
function check()
{
varmyArray=new Array();
for(vari=0;i<document.myForm.length;i++)
{
if(document.myForm.elements[i].value.length ==0)
{
myArray.push(document.myForm.elements[i].name);
}
}
if(myArray.length !=0)
{
alert("The following Text Boxes are Empty: \n" +myArray);
return false;
}
else
{
validateEmail();
validatePhoneNumber();
return false;
}
}
functionvalidateEmail() {
var email = document.getElementById("email").value;
var pattern1 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
varisValid = pattern1.test(email);

if (isValid) {
document.getElementById("result1").innerHTML += "Email is valid.";
} else {
document.getElementById("result1").innerHTML += "Email is invalid.";
}
}

functionvalidatePhoneNumber() {
varPh_number = document.getElementById("ph_no").value;
if (Ph_number.length ==10)
{
document.getElementById("result2").innerHTML += "Phone number is valid.";
}
else
{
document.getElementById("result2").innerHTML += "Phone number is invalid.";
}
}

</script>

</head>
<body>
<form name="myForm"onsubmit="return check()">
Email: <input type="text" id="email" name="Email"/>
Phone_Number:<input type="text" id="ph_no" name="Phone_Number"/>
Age: <input type="text" name="Age"/><br/><br/>
<input type="submit" value="Send message"/><br/><br/>
</form>

<p id="result1"></p>
<p id="result2"></p>
</body>
</html>

Output:
Labcycle 2: Develop a HTML Form, which accepts any Mathematical expression. Write JavaScript code to Evaluates the
expression and Displays the result.

<!xml version="1.0" encoding="utf-8" ?>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8" />
<title>Expression Evaluation</title>
<script type="text/javascript">
function Evaluate()
{
varenteredExpr = document.getElementById("expr").value;
document.getElementById("result").value = eval(enteredExpr);
}
</script>
</head>

<body>
<form name="myForm">
Enter any valid expression: <input type="text" id="expr" /><br /><br />
<input type="button" value="Evaluate"onClick="Evaluate()" /><br /><br />
Result of expression: <input type="text" id="result" /><br /><br />
</form>
</body>
</html>

Output:
Labcycle 3:Create a page with dynamic effects. Write the code to include layers and basic animation.

<!xml version="1.0" encoding="utf-8" ?>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Basic Animation </title>
<style>
#layer1{position:absolute; top:50px;left:50px;}
#layer2{position:absolute; top:50px;left:400px;}
#layer3{position:absolute; top:50px;left:800px;}
</style>

<script type="text/javascript">
functionmoveImage(layer)
{
var top = window.prompt("Enter top value");
var left = window.prompt("Enter left value");
document.getElementById(layer).style.top =top+'px';
document.getElementById(layer).style.left =left+'px';
}
</script>
</head>

<body>
<div id="layer1"><imgsrc="ball.jpg"onclick="moveImage('layer1')" alt="My Image."/></div>
<div id="layer2"><imgsrc="ball.jpg"onclick="moveImage('layer2')" alt="My Image."/></div>
<div id="layer3"><imgsrc="ball.jpg"onclick="moveImage('layer3')" alt="My Image."/></div>
</body>
</html>

Output:
Labcycle 4: Write a JavaScript code to find the sum of N natural Numbers. (Use userdefined function)

<html>
<head>
<title>JavaScript program to find the Sum of n natural numbers</title>
</head>
<body>
<table>
<tr>
<td> <input type="text" name="a" id="first" placeholder="Enter a number"/> </td>
</tr>
<tr>
<td> <button onclick="sum ()">Submit</button></td>
</tr>
</table>
<div id="num"></div>
</body>

<script type="text/javascript">
function sum()
{
var n,i, sum = 0;
n = parseInt(document.getElementById ("first").value);
for (i = 1; i<= n; i++)
{
sum = sum+i;
}
document.getElementById ("num").innerHTML="Sum of "+n+ " natural numbers is :"+sum;
}
</script>
</html>

Output:
Labcycle 5: Write a JavaScript code block using arrays and generate the current date in words, this should include the
day, month and year.

<!xml version="1.0" encoding="utf-8" ?>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Date Display</title>
<script type="text/javascript">
var days = [ "First" , "Second" , "Third" , "Fourth" , "Fifth" , "Sixth" , "Seventh" , "Eighth" , "Ninth" , "Tenth" ,
"Eleventh" , "Twelfth" , "Thirteenth" , "Fourteenth" , "Fifteenth" , "Sixteenth" , "Seventeenth" , "Eighteenth" ,
"Ninteenth" , "Twentyeth" , "TwentyFirst" , "TwentySecond" , "TwentyThird" , "TwentyFourth" , "TwentyFifth" ,
"TwentySixth" , "TwentySeventh" , "TwentyEighth" , "TwentyNinth" , "Thirtyeth" , "ThirtyFirst"];

var months = [ "January" , "February" , "March" , "April" , "May" , "June" , "July" , "August" , "September" ,
"October" , "November" , "December" ];

var year = "Two Thousand Twenty Three";


vardateObj = new Date();
varcurrMonth = dateObj.getMonth();
varcurrDate = dateObj.getDate();
varcurrYear = dateObj.getFullYear();

if (currYear == 2023)
alert ("Today's Date is : " + days [ currDate - 1 ] + "" + months [ currMonth ] + "" + year );
else
alert ("Today's Date is : " + days [ currDate - 1 ] + "" + months [ currMonth ] + "" + currYear );
</script>
</head>
<body>
</body>
</html>

Output:
Labcycle 6: Create a form for Student information. Write JavaScript code to find Total, Average, Result and Grade.

<!xml version="1.0" encoding="utf-8" ?>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Data Example</title>
<script type="text/javascript">
functionshowResult()
{
var name = document.getElementById ( "name" ) .value;
varcls = document.getElementById ( "class" ) .value;
var marks1 = parseInt ( document.getElementById ("sub1").value );
var marks2 = parseInt ( document.getElementById ("sub2").value );
var marks3 = parseInt ( document.getElementById ("sub3").value );
var total = marks1 + marks2 + marks3;
varavg = total / 3;
var grade, result;
if ( avg>= 60 )
{
grade = "A";
result = "First Class";
}
else if ( avg< 60 &&avg>= 50 )
{
grade = "B";
result = "Second Class";
}
else if ( avg< 50 &&avg>= 40 )
{
grade = "C";
result = "Third Class";
}
else
{
grade = "D";
result = "Fail";
}
document.write("<h2> Results </h2>" );
document.write("<b> Name: " + name + "</b><br />" );
document.write("<b> Class: " + cls + "</b><br />" );
document.write("<b> Total Marks: " + total + "</b><br />" );
document.write("<b> Average: " + avg + "</b><br />" );
document.write("<b> Grade: " + grade + "</b><br />" );
document.write("<b> Result: " + result + "</b><br />" );
}
</script>
</head>

<body>
<form>
<table border="5">
<tr>
<th align="center"colspan="2">Student Details</th>
</tr>

<tr>
<td>Student Name: </td>
<td><input type="text" id="name" /></td>
</tr>

<tr>
<td>Student Class: </td>
<td><input type="text" id="class" /></td>
</tr>

<tr>
<td>Student Marks1: </td>
<td><input type="number" id="sub1" /></td>
</tr>

<tr>
<td>Student Marks2: </td>
<td><input type="number" id="sub2" /></td>
</tr>

<tr>
<td>Student Marks3: </td>
<td><input type="number" id="sub3" /></td>
</tr>

</table>
<input type="button" value="View Results"onClick="showResult()" />
</form>
</body>
</html>

Output:
Labcycle 7: Create a form for Employee information. Write JavaScript code to find DA, HRA, PF, TAX, Gross pay,
Deduction and Net pay.

<!xml version="1.0" encoding="utf-8" ?>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Employee Salary Details</title>
<script type="text/javascript">
functionshowSalary()
{
varempname = document.getElementById ( "empname" ) .value;
varempno = document.getElementById ( "empno" ) .value;
var basic = parseInt ( document.getElementById ( "basic" ) .value );
varhra = basic * 0.4;
varda = basic * 0.6;
var gross = basic + hra + da;
varpf = gross * 0.13;
var tax = gross * 0.2;
var deductions = pf + tax;
varnetsalary = gross - deductions;
document.writeln( "<table border='5'>");
document.writeln( "<tr><th> Employee Salary Details </th></tr>");
document.writeln( "<tr><td>Emp Name: </td><td>" + empname + "</td></tr>");
document.writeln( "<tr><td>Emp No: </td><td>" + empno + "</td></tr>" );
document.writeln( "<tr><td> Basic Salary: </td><td>" + basic + "</td></tr>" );
document.writeln( "<tr><td> HRA: </td><td>" + hra + "</td></tr>" );
document.writeln( "<tr><td> DA: </td><td>" + da + "</td></tr>" );
document.writeln( "<tr><td> Gross Salary: </td><td>" + gross + "</td></tr>" );
document.writeln( "<tr><td> PF: </td><td>" + pf + "</td></tr>" );
document.writeln( "<tr><td> Tax: </td><td>" + tax + "</td></tr>" );
document.writeln( "<tr><td> Deductions: </td><td>" + deductions + "</td></tr>" );
document.writeln( "<tr><td> Net Salary: </td><td>" + netsalary + "</td></tr>" );
}
</script>
</head>

<body>
<form>
<table border="5">

<tr>
<th> Employee Details </th>
</tr>

<tr>
<th> Employee Name: </th>
<td><input type="text" id="empname" /></td>
</tr>

<tr>
<th> Employee No: </th>
<td><input type="text" id="empno" /></td>
</tr>

<tr>
<th> Basic Pay: </th>
<td><input type="number" id="basic" /></td>
</tr>
</table>
<br /><input type="button" value="Show Salary Details"onClick="showSalary()" />
</form>
</body>
</html>

Output:
Labcycle 8: Write a program in PHP to change background color based on day of the week
using if else if statements and using arrays .

<?php
$dayColors = [
'Sunday'=>'#ffcccb',
'Monday'=>'#ffebcd',
'Tuesday'=>'#add8e6',
'Wednesday' =>'#98fb98',
'Thursday'=>'#f0e68c',
'Friday'=>'#dda0dd',
'Saturday'=>'#c0c0c0'
];
$currentDay =date('l');
$backgroundColor ='#ffffff';

if (array_key_exists($currentDay, $dayColors))
{
$backgroundColor = $dayColors[$currentDay];
}
?>

<html>
<head>
<title> Background Color based on the day of the week </title>
<style>
body {
background-color:<?php echo $backgroundColor; ?>;
}
</style>
</head>
<body>
<h1> welcome! today is <?php echo $currentDay; ?></h1>
</body>
</html>
Labcycle 9: Write a simple program in PHP for i) generating Prime number ii) generate
Fibonacci series.

<?php
functionisPrime($num) {
if($num <=1)
{
return false;
}
for ($i=2;$i<=sqrt($num);$i++)
{
if($num % $i == 0)
{
return false;
}
}
return true;
}

functiongeneratePrimes($n)
{
$primeNumbers = [];
$count = 0;
$i =2;

while ($count <$n)


{
if(isPrime($i)) {
$primeNumbers[] = $i;
$count++;
}
$i++;
}
return $primeNumbers;
}

functiongenerateFibonacci($n) {
$fibonacciSeries=[];
$first = 0;
$second = 1;
$fibonacciSeries[] = $first;
$fibonacciSeries[] = $second;

for($i=2;$i<$n; $i++) {
$next = $first + $second;
$fibonacciSeries[] = $next;
$first = $second;
$second = $next;
}
return $fibonacciSeries;
}

$numberOfPrimes = 50;
$numberOfTerms = 50;

$primes = generatePrimes($numberOfPrimes);
$fibonacci = generateFibonacci ($numberOfTerms);

echo"Prime numbers:";
echo"<pre>".print_r($primes,true). "</pre>";

echo"Fibonacci series:";
echo"<pre>".print_r($fibonacci, true). "</pre>";
?>
Labcycle 10: Write a PHP program to remove duplicates from a sorted list

<?php

functionremove_duplicates_list($list1) {

$nums_unique = array_values(array_unique($list1));

return $nums_unique ;

$nums = array(1,1,2,2,3,4,5,5);

echo"<pre>".print_r($nums,true)."</pre>";

echo"After removing duplicates";

echo"<pre>".print_r(remove_duplicates_list($nums), true)."</pre>";

?>
Labcycle 11: Write a PHP Script to print the following pattern on the Screen:

*****
****
***
**
*

<?php

$rows = 5;

for($i=$rows; $i>=1;$i--) {

for($j=$rows; $j>$i; $j--) {

echo"&nbsp;";

for($k=1;$k<=$i; $k++) {

echo"*";

echo"<br>";

?>
Labcycle 12: Write a simple program in PHP for Searching of data by different criteria.

<?php
$users=[ ['id' => 1, 'name' =>'Anjali', 'age' => 20, 'email' =>'anjali@example.com'],
['id' => 2, 'name' =>'Neha', 'age' => 19, 'email' =>'nena@example.com'],
['id' => 3, 'name' =>'Madhu', 'age' => 22, 'email' =>'madhu@example.com'],
['id' => 4, 'name' =>'Vinay', 'age' => 21, 'email' =>'vinay@example.com'],
];

functionsearchData($data, $criteria, $value) {


$results =[];
foreach ($data as $item) {
if($item[$criteria] == $value) {
$results[]=$item;
}
}
return $results;
}
$searchCriteria ='age';
$searchValue =20;
$searchResults = searchData($users, $searchCriteria, $searchValue);
echo"Search results for $searchCriteria = $searchValue:<br>";
if(count($searchResults) > 0) {
foreach ($searchResults as $result) {
echo "ID:" .$result['id'] .", Name:" .$result['name'].",Age:".$result['age']. ", Email: ".$result['email']. "<br>";
}
}
else
{
echo"no results found";
}
?>
Labcycle 13: Write a function in PHP to generate captcha code
<?php
functiongenerateCaptcha(){
$length = 6;
$characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
$captcha ='';
$charLength=strlen($characters);

for($i=0; $i<$length; $i++)


{
$captcha .=$characters[rand(0, $charLength - 1)];
}
$_SESSION["captcha"] = $captcha;
return $captcha;
}
session_start();
$captchaCode = generateCaptcha();
echo $captchaCode;

?>
Labcycle 15: Write a program in PHP to read and write file using form control.
<!DOCTYPE html>
<html>
<head>
<title> Read and Write File </title>
</head>
<body>
<h2>Write to File </h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"
method="post">
<textarea name="content" rows="5" cols="40" placeholder="Enter text to write"></textarea><br><br>
<input type="submit" name="write" value="write to File">
</form>
<hr>
<h2>Read from File </h2>
<?php
$file='data.txt';

if($_SERVER["REQUEST_METHOD"] == "POST"&&isset($_POST['write'])) {
$content = $_POST['content'];
file_put_contents($file, $content, FILE_APPEND|LOCK_EX);
echo"content written to file successfully!";
}
if(file_exists($file)) {
$content = file_get_contents($file);
echo"<pre>$content </pre>";
}
else
{
echo"file not found!";
}
?>
</body>
</html>
Labcycle 17: Write a program in PHP to Validate Input
<?php
// Function to validate an email address
functionvalidateEmail($email) {
// Define a regular expression for a valid email address
$emailRegex = '/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/';

// Use the preg_match function to check if the email matches the pattern
returnpreg_match($emailRegex, $email);
}

// Check if the form is submitted


if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve the values from the form
$email = $_POST["email"];

// Validate email and username


$isEmailValid = validateEmail($email);

// Display validation results


if ($isEmailValid) {
echo"Email is valid!";
} else {
echo"Invalid email ";
}
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Validation</title>
</head>
<body>
<h2>Enter Your Email </h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
/body>
</html>
Labcycle 18: Write a program in PHP for setting and retrieving a cookie

<?php
$cookie_name = "UserID";
$cookie_value = "A1B234C";
$expiration_time = time() + (24 * 3600);

setcookie($cookie_name, $cookie_value, $expiration_time, "/");


echo"Cookie '$cookie_name' is set. <br><br><br>";
if(isset($_COOKIE[$cookie_name]))
{
echo"Value of cookie '$cookie_name' is: ".$_COOKIE[$cookie_name];
}
else
{
echo"Cookie named '$cookie_name' is not set.";
}
?>
Labcycle 19.Write a PHP program to Create a simple webpage of a college

index.php
<!DOCTYPE html>
<html>
<head>
<title> KLE S Nijalingappa College</title>
<style>
body {
font-family: Arial, sans-serif;
}
header{
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
nav {
margin: 20px 0;
text-align: center;
}
nav a {
margin: 0 15px;
}
</style>
</head>
<body>
<header>
<imgsrc ="logo.jpg" alt="KLE society S Nijalingappa College" width="100">
<h1> KLE Society's S Nijalingappa College </h1>
<p> 642/1, 12th Main Rd, Basaveshwar Nagar, </p>
<p>Rajajinagar, Bengaluru, Karnataka 560010 </p>
</header>
<nav>
<a href="index.php">Home</a>
<a href="about.html">About us</a>
<a href="Courses.php">Courses</a>
<a href="Contact.html">Contact Us</a>
</nav>

<main>
<h2> Welcome to KLE College Rajajinagar</h2>
<p>We provide best education on computer applications courses </p>
</main>
</body>
</html>

about.html
<!DOCTYPE html>
<html>
<head>
<title> About us - KLE Society S Nijalingappa college </title>
</head>
<body>
<h1>About us </h1>
<p> University K.L.E. Society S. Nijalingappa College, established in the year 1963, is one of the
premier institutions of K.L.E Society. It made a humble beginning in a rented building
on Mahatma Gandhi Road, near Mayo Hall, as a Science College. It was shifted to the present
premises in 1966. The founder Principal Dr.V.G. Nelivigi laid a firm foundation
for the college and was responsible for development of the college,
by its inclusion under 2(f) and 12(B) of UGC.</p>
</body>
</html>

Courses.php:
<!DOCTYPE html>
<html>
<head>
<title> Courses - KLE College Rajajinagar</title>
</head>
<body>
<h1> Courses </h1>
<h2> BCA </h2>
<h2> MCA </h2>
</body>
</html>

Contact.html:
<!DOCTYPE html>
<html>
<head>
<title> Contact Us - KLE College Rajajinagar</title>
</head>
<body>
<h1> Contact Us </h1>
<p>KLE Society S Nijalingappa College </p>
<p>#1040, II Block, Rajajinagar,</p>
<p>Bengaluru-560010</p>
</body>
</html>
Labcycle 20: Write a program in PHP for exception handling for i) divide by zero ii) Checking
date format.
<?php
try {
$numerator = 10;
$denominator = 5;
if($denominator ===0) {
throw new Exception ("division by zero error");
}
$result = $numerator / $denominator;
echo"Result of division :" . $result ."<br>";

$dateString = '2023-12-25';
$dateFormat = 'Y-m-d';

$date = DateTime::createFromFormat($dateFormat, $dateString);

if(!$date || $date -> format($dateFormat)!== $dateString){


throw new Exception ("Invalid date format");
}
echo"Date is valid:" . $dateString;
} catch (Exception $e) {
echo"Error:" . $e->getMessage();
}
?>

You might also like