Scribd
Upload
9 views

k1

Uploaded by

jagadish.jaggu2003
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
9 views

k1

Uploaded by

jagadish.jaggu2003
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/ 37

Course Code: CSA2009

Course Title: Web 2.0


Lab sheet 1 - Module 1

Write a php program to check whether given number is palindrome or not.

<html>

<body>

<form action="" method="post">

<br><center><h1><u><font color="red">PALINDROME</font></u></h1></center>

<br><table bgcolor="forestgreen" align="center">

<tr><td><br><input type="text" value=" Enter the Input" readonly>

<input type="text" name="n"></tr></td>

<tr><td><br><br><center><br><br>

<input type="submit" value="&nbsp;&nbsp; SUBMIT &nbsp;&nbsp;">

<br><br><br></center></tr></td></table>

</form>

<?php

if($_POST)

$n1=$_POST["n"];

$p=$n1;

$s=0;

while($n1>=1)
{

$r=$n1%10;

$n1=$n1*(10/100);

$s=$s*10+$r;

echo '<table align="center" border="2" width="46%"><tr align="center"><td><br>';

echo '<font color="forestgreen">';

if($p==$s)

echo"<h2> $p is Palindrome Number</h2>";

else

echo"<h2> $p is not Palindrome Number</h2>";

echo'</font>';

echo'</td></tr></table>';

?>

</body>

</html>
OUTPUT:
Course Code: CSA2009
Course Title: Web 2.0
Lab sheet 2 - Module 1
Problem Statement:

Write a PHP script to perform following file handling operation.


1. To open a file
2. To read a file line by line
3. To read a file character by character
4. To write a file
5. To append a file and close file.

Program
To open a file
<!DOCTYPE html>
<html>
<body>

<?php
$myfile=fopen("webdictionary.txt", "r") or die("Unable to open file!");
echo fread($myfile,filesize("webdictionary.txt"));
fclose($myfile);
?>

</body>
</html>

To read a file line by line


<?php
$myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
while(!feof($myfile)) {
echo fgets($myfile) . "<br>";
}
fclose($myfile);
?>
To read a file character by character
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
// Output one character until end-of-file
while(!feof($myfile)) {
echo fgetc($myfile);
}
fclose($myfile);
?>

To write a file
<?php
$myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
$txt = "John William\n";
fwrite($myfile, $txt);
$txt = "John Smith\n";
fwrite($myfile, $txt);
fclose($myfile);
?>
To append a file and close file.
<?php
$myfile = fopen("newfile.txt", "a") or die("Unable to open file!");
$txt = "Donald Duck\n";
fwrite($myfile, $txt);
$txt = “Harshith\n";
fwrite($myfile, $txt);
fclose($myfile);
?>
Output
webdictionary.txt
AJAX = Asynchronous JavaScript and XML
CSS = Cascading Style Sheets
HTML = Hyper Text Markup Language
PHP = PHP Hypertext Preprocessor
SQL = Structured Query Language
SVG = Scalable Vector Graphics
XML = EXtensible Markup Language

To open a file

To read a file line by line

To read a file character by character

To write a file
John William
John Smith
To append a file and close file.
John William
John Smith
Donald Duck
Harshith
Course Code: CSA2009
Course Title: Web 2.0
Lab sheet 3 - Module 1
Problem Statement:

Write a PHP MYSQL program to collect the student data and store in Server database.
a. Student Name, Roll_no, mail_id, mobile_no, gender, city, state and
department - Minimum 4 students records to insert.
b. Display the student’s details
b. Update the student’s details
c. Delete the student Record from database.

Step 1: run XAMPP application with MySQL


Step 2: create a new php file filename.php and place the php file in C:/xampp /
htdocs folder (accommodate required statements to establish connection with
your database)

Registaration.html

<!DOCTYPE html>
<html lang="en-us">
<head> <title>Responsive Registaration Form</title></head>

<body>
<h1>Student Registaration Form</h1>
<form class="srf" action="http://localhost/insertdb.php" method="post">
<br><br>Roll No:<input type="text" id="rollno" name="rollno" >
<br><br>Student Name:<input type="text" id="name" name="name" >
<br><br>Email:<input type="email" id="email" name="email" >
<br><br>Mobile:<input type="tel" id="mobile" name="mobile" >
<br><br>Gender:<input type="radio" id="male" name="gender" value="male"/>Male
<input type="radio" id="female" name="gender" value="female"/>Female
<br><br>City:<input type="text" id="city" name="city" maxlength="10">
<br><br>State:<input type="text" id="state" name="state">
<br><br>Specialization:<br><br>
<input type="checkbox" name="specialization" value="Computer Science">Computer
Science<br/>
<input type="checkbox" name="specialization" value="Information
Technology">Information Technology<br/>
<input type="checkbox" name="specialization" value="Computer
Architecture">Computer Architecture<br/>
<input type="checkbox" name="specialization" value="Tele Communication">Tele
Communication<br/>
<br><br><input type="submit" value="Register" onclick="SaveStudentDetails()">
</form>
</body>
</html>
</body>
</html>

insertdb.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ls9_srf"; // DB Name

$v1=$_POST["rollno"]; //name attribute value


$v2=$_POST["name"];//name attribute value
$v3=$_POST["email"];//name attribute value
$v4=$_POST["mobile"];//name attribute value
$v5=$_POST["gender"];//name attribute value
$v6=$_POST["city"];//name attribute value
$v7=$_POST["state"];//name attribute value
$v8=$_POST["specialization"];//name attribute value
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn)
{
die("Connection failed: " . mysqli_connect_error());
}

$sql = "INSERT INTO srf VALUES ('$v1','$v2','$v3','$v4','$v5','$v6','$v7','$v8')";


//srf table name
if (mysqli_query($conn, $sql))
{
echo "New record created successfully";
}
else
{
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>

updatedb.php

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "ls9_srf"; // DB Name

// Create connection

$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection

if (!$conn) {

die("Connection failed: " . mysqli_connect_error());


}
$sql = "UPDATE srf SET name='Arulan' WHERE Roll_No='20201CSE0004'";

if (mysqli_query($conn, $sql)) {

echo "Record updated successfully";

} else {

echo "Error updating record: " . mysqli_error($conn);

mysqli_close($conn);

?>

Deletedb.php

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "ls9_srf"; // DB Name

// Create connection

$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection

if (!$conn) {

die("Connection failed: " . mysqli_connect_error());

}
$sql = "DELETE FROM srf WHERE Roll_No='20201CSE0004'";

if ($conn->query($sql) === TRUE) {


echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn->error;
}

$conn->close();
?>
OUTPUT
Registration from

Display student data


After registration new record updated in database

Database table– Student registration form


Course Code: CSA2009
Course Title: Web 2.0
Lab sheet 4 - Module 1
Problem Statement:

Write a PHP script with MYSQL to display the employee data for following criteria.
a. Create the database with Minimum 5 employee records like (Id(primary key),
name, department and salary).
b. Create HTML page to search employee data using Id and Salary.

Step 1: run XAMPP application with MySQL

Step 2: create a new php file filename.php and place the php file in C:/xampp /
htdocs folder (accommodate required statements to establish connection with
your database)
Search.html

<!DOCTYPE html>
<html lang="en-us">
<head> <title>Employee Details</title> </head>
<body>
<h1>Employee Details</h1>
<form class="emp" action="http://localhost/dbdisplay.php"
method="post">
<br><h3>Search Employee Details Based on Employee ID</h3>
<br>Enter Employee ID:<input type="number" id="Id" name="Id" >
<br><br><input type="submit" value="Search"
onclick="SaveEmpDetails()">
</form>

<form class="emp" action="http://localhost/dbdisplay.php"


method="post">
<br><h3>Search Employee Details Based on Salary</h3>
<br>Enter Employee Salary Range:<input type="number" id="SS"
name="SS" >
Between
<input type="number" id="LS" name="LS" >
<br><br><input type="submit" value="Search"
onclick="SaveEmpDetails()">
</form>
</body>
</html>
</body>
</html>

Searchdb.php

<?php
$servername = "localhost"; // default
$username = "root"; // root is a username
$password = ""; // No password for my db that why it is blank
$dbname = "Employee"; // mydb is my db name

// Create connection

$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
die("Connection failed: " . mysql_connect_error());
}
// Query Processing
if($_POST["Id"]!=0) // search using ID
{
$v1=$_POST["Id"];
$sql = "SELECT * from emp where Id=$v1";
}
else // search using salary
{
$v2=$_POST["SS"];
$v3=$_POST["LS"];
$sql = "SELECT * from emp where Salary between $v2 AND $v3";
}

$result = mysqli_query($conn, $sql); // conn for connection execute


query

// Result processing
if (mysqli_num_rows($result) > 0)
{
// output data of each row
while($row = mysqli_fetch_array($result))
{
print "Employee ID: " . $row["Id"]."<br><br>";
print "Employee Name: " . $row["Name"]."<br><br>";
print "Employee Department: " . $row["Dept"]."<br><br>";
print "Employee Salary: " . $row["Salary"]."<br><br>";
print "*********************" ."<br><br>";

}
}

else
{
echo "0 results";
}

mysqli_close($conn);// close the database


?>
OUTPUT
Search from

Search using Employee ID


Search using Employee Salary

Manually Create Employee Database table


Course Code: CSA2009
Course Title: Web 2.0
Lab sheet 5 - Module 2
Problem Statement:

Develop a XML program to store book details like title, author, publication, year, price
etc. using CSS.

Solution

Books.xml

<?xml version="1.0" encoding="UTF-8"?>


<?xml-stylesheet type="text/css" href="Rule.css"?>
<books>
<heading>Welcome To NCET Book Store </heading>
<book>
<title>Title -: Web Programming</title>
<author>Author -: Chrisbates</author>
<publisher>Publisher -: Wiley</publisher>
<edition>Edition -: 3</edition>
<price> Price -: 300</price>
</book>
<book>
<title>Title -: Internet world-wide-web</title>
<author>Author -: Ditel</author>
<publisher>Publisher -: Pearson</publisher>
<edition>Edition -: 3</edition>
<price>Price -: 400</price>
</book>
<book>
<title>Title -: Computer Networks</title>
<author>Author -: Foruouzan</author>
<publisher>Publisher -: Mc Graw Hill</publisher>
<edition>Edition -: 5</edition>
<price>Price -: 700</price>
</book>
<book>
<title>Title -: DBMS Concepts</title>
<author>Author -: Navath</author>
<publisher>Publisher -: Oxford</publisher>
<edition>Edition -: 5</edition>
<price>Price -: 600</price>
</book>
<book>
<title>Title -: Linux Programming</title>
<author>Author -: Subhitab Das</author>
<publisher>Publisher -: Oxford</publisher>
<edition>Edition -: 8</edition>
<price>Price -: 300</price>
</book>
</books>
Rule.css

books {
color: white;
background-color : gray;
width: 100%;
}
heading {
color: green;
font-size : 40px;
background-color : powderblue;
}
heading, title, author, publisher, edition, price {
display : block;
}
title {
font-size : 25px;
font-weight : bold;
}
OUTPUT
Course Code: CSA2009
Course Title: Web 2.0
Lab sheet 6 - Module 2
Problem Statement:

Write an XSL style sheet for an XML document consisting of details about the
shopping cart purchase list with 50gms of Badam, 100gms of Cashew nuts, 150gms of
coffee powder, 250gms of salt, 500gms of Dhal, 750 liter of oil and 1000gms of sugar
and displays the document about shopping cart information in an HTML table.

Online compiler Link:


https://www.w3schools.com/xml/tryxslt.asp?xmlfile=cdcatalog&xsltfile=cdcatalog

Solution

Product.xml

<?xml version="1.0" encoding="UTF-8"?>


<?xml-stylesheet type="text/xsl" href=" Displayproduct..xsl"?>
<class>
<product id="101">
<productname>Badam</productname>
<weight>50 gms</weight>
</product>
<product id="102">
<productname>Cashew nuts</productname>
<weight>100 gms</weight>
</product>
<product id="103">
<productname>Coffee Powder</productname>
<weight>150 gms</weight>
</product>
<product id="104">
<productname>Salt</productname>
<weight>250 gms</weight>
</product>
<product id="105">
<productname>Dhal</productname>
<weight>500 gms</weight>
</product>
<product id="106">
<productname>Oil</productname>
<weight>500 liter</weight>
</product>
<product id="107">
<productname>Sugar</productname>
<weight>1000 gms</weight>
</product>
</class>

Displayproduct.xsl

<?xml version="1.0" encoding="UTF-8"?>


<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Product List</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Product ID</th>
<th>Product Name</th>
<th>Quantity</th>
</tr>
<xsl:for-each select="class/product">
<tr>
<td> <xsl:value-of select="@id"/> </td>
<td> <xsl:value-of select="productname"/> </td>
<td> <xsl:value-of select="weight"/> </td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

OUTPUT
7. Write a HTML and J Query program to create a webpage to fetch
the details of the event and display the invitation.

<html>
<head>
<title>Create Invitation</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$(document).ready(function(){
$("#create").click(function(){
var b = $("#bride").val();
var bg =
$("#bridegroom").val();
var q =
$("#quotes").val();
var v = $("#venue").val();
var d = $("#date").val();

$(".input").hide();

$("*").css("background-color","violet");
$("h3").css("background-color","blue");

$("#content,#destination").css("background-color","pink");
$("h3").html(b + " &" + bg + " Cordially Invites You");
$("#content").html(q);
$("#destination").html("@ " + v + " on " + d);
});
});
</script>
</head>

<body>
<center>
<div class="input">
<h2>Create Your Invitation</h2>
<p>Bride : <input type="text" id="bride" value="" /> </p>
<p>Bridegroom : <input type="text" id="bridegroom" value="" /> </p>
<p>Quotes : <input type="text" id="quotes" value="" /> </p>
<p>Venue : <input type="text" id="venue" value="" /> </p>
<P>Date : <input type="text" id="date" value="" /> </P>
<button id="create">Create</button>
</div>
<div id="invitation">
<h3></h3>
<p id="content"></p>
<p id="destination"></p>
</div>
</center>
</body>
</html>
8. Write a HTML and JQuery program to design a webpage to accept
event organizer name from the user and display it on the webpage.
Program:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function
(){
$("#display").click(function(
){
var name = $("#eventOrganizer").val();
$("#result").html("Organizer Name :" + name);
});
});
</script>
</head>
<body style="background-color:pink">
<center>
<h2>Event Organization</h2>
<p>Event Organizer : <input id="eventOrganizer" type="text" value=""/></p>
<button id="display">Display</button>
<div id="result"></div>
</center>
</body>
</html>
Course Code: CSA2009
Course Title: Web 2.0
Lab sheet 9 - Module 3
Problem Statement:
You are tasked with developing a Student Marks Management System using AngularJS. The system should
allow teachers to enter, view, edit, and delete student marks details stored in a table format.

StudentsMarks.html
<!DOCTYPE html>
<html lang="en" ng-app="studentMarksApp">
<head>
<meta charset="UTF-8">
<title>Student Marks Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="StudentMarks.js"></script>
</head>
<body ng-app="studentMarksApp" ng-controller="StudentMarksController as vm">
<h1>Student Marks Management System</h1>

<!-- Form for adding new student marks -->


<form ng-submit="vm.addStudentMark()">
<label for="studentId">Student ID:</label>
<input type="text" id="studentId" ng-model="vm.newMark.studentId" required><br>

<label for="name">Name:</label>
<input type="text" id="name" ng-model="vm.newMark.name" required><br>

<label for="subject">Subject:</label>
<input type="text" id="subject" ng-model="vm.newMark.subject" required><br>
<label for="marks">Marks Obtained:</label>
<input type="number" id="marks" ng-model="vm.newMark.marks" required><br>

<button type="submit">Add Student Mark</button>


</form>

<!-- Table to display student marks -->


<table border="1">
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Subject</th>
<th>Marks Obtained</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mark in vm.studentMarks">
<td>{{ mark.studentId }}</td>
<td>{{ mark.name }}</td>
<td>{{ mark.subject }}</td>
<td>{{ mark.marks }}</td>
<td>
<button ng-click="vm.editStudentMark(mark)">Edit</button>
<button ng-click="vm.deleteStudentMark(mark)">Delete</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
StudentsMarks.js

angular.module('studentMarksApp', [])
.controller('StudentMarksController', function() {
var vm = this;
vm.studentMarks = [
{ studentId: '1', name: 'John', subject: 'Math', marks: 90 },
{ studentId: '2', name: 'Alice', subject: 'Science', marks: 85 },
{ studentId: '3', name: 'Bob', subject: 'English', marks: 75 }
];

vm.newMark = {};
vm.addStudentMark = function() {
vm.studentMarks.push(vm.newMark);
vm.newMark = {};
};

vm.editStudentMark = function(mark) {
vm.newMark = angular.copy(mark);
};

vm.deleteStudentMark = function(mark) {
var index = vm.studentMarks.indexOf(mark);
vm.studentMarks.splice(index, 1);
};
});
Course Code: CSA2009
Course Title: Web 2.0
Lab sheet 10 - Module 3
Problem Statement:
You are tasked with building an Employee Management System using AngularJS. The system
should allow administrators to view, add, edit, and delete employee records stored in a table
format.

Employeedetails.html

<!DOCTYPE html>
<html lang="en" ng-app="employeeManagementApp">
<head>
<meta charset="UTF-8">
<title>Employee Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="Employeedetails.js"></script>
</head>
<body ng-controller="EmployeeController as vm">
<h1>Employee Management System</h1>

<!-- Form for adding new employee -->


<form ng-submit="vm.addEmployee()">
<label for="employeeId">Employee ID:</label>
<input type="text" id="employeeId" ng-model="vm.newEmployee.employeeId" required><br>

<label for="name">Name:</label>
<input type="text" id="name" ng-model="vm.newEmployee.name" required><br>
<label for="department">Department:</label>
<input type="text" id="department" ng-model="vm.newEmployee.department" required><br>

<label for="position">Position:</label>
<input type="text" id="position" ng-model="vm.newEmployee.position" required><br>

<button type="submit">Add Employee</button>


</form>

<!-- Table to display employee records -->


<table border="1">
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Department</th>
<th>Position</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in vm.employees">
<td>{{ employee.employeeId }}</td>
<td>{{ employee.name }}</td>
<td>{{ employee.department }}</td>
<td>{{ employee.position }}</td>
<td>
<button ng-click="vm.editEmployee(employee)">Edit</button>
<button ng-click="vm.deleteEmployee(employee)">Delete</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Employeedetails.js
angular.module('employeeManagementApp', [])
.controller('EmployeeController', function() {
var vm = this;

vm.employees = [
{ employeeId: '1', name: 'John Doe', department: 'HR', position: 'Manager' },
{ employeeId: '2', name: 'Alice Smith', department: 'Finance', position: 'Accountant' },
{ employeeId: '3', name: 'Bob Johnson', department: 'IT', position: 'Developer' }
];

vm.newEmployee = {};

vm.addEmployee = function() {
vm.employees.push(vm.newEmployee);
vm.newEmployee = {};
};

vm.editEmployee = function(employee) {
vm.newEmployee = angular.copy(employee);
};

vm.deleteEmployee = function(employee) {
var index = vm.employees.indexOf(employee);
vm.employees.splice(index, 1);
};
});

You might also like