SlideShare a Scribd company logo
SRI RAMAKRISHNA MISSION VIDYALAYA
COLLEGE OF ARTS AND SCIENCE
[AUTONOMOUS]
Re-Accredited by NAAC with A Grade
Coimbatore – 641 020
NOVEMBER – 2021
DEPARTMENT OF COMPUTER APPLICATIONS
NAME : __________________________________
REG. NO : __________________________________
SEMESTER : Vth
SEMESTER
SUBJECT : Web Technology (HTML5, Bootstrap, PHP &
MySql)
SUBJECT CODE: 18UCA5CP07
SRI RAMAKRISHNA MISSION VIDYALAYA
COLLEGE OF ARTS AND SCIENCE (S.F)
[AUTONOMOUS]
Re-Accredited by NAAC with A Grade
Coimbatore – 641 020
DEPARTMENT OF COMPUTER APPLICATIONS
BONAFIDE CERTIFICATE
This is to certify that it is a bonafide record work done by
________________________________ in “Web Technology (HTML5, Bootstrap,
PHP &MySql)” for the Fifth Semester during the year November, 2021 Submitted
for the Semester Practical Examinations held on ______________.
Head of the Department Staff in Charge
Internal Examiner External Examiner
1. HTML5 STUDENT FORM DESIGN
S.NO LIST OF PROGRAMS DATE
PAGE
NUMBER
1 HTML5 STUDENT FORM DESIGN
2 USING FRAMESET AND MULTIMEDIA ELEMENTS
3 USING BOOTSTRAP TABLE
4 PHP DATABASE CONNECTION
5 PHP FILE HANDLING FUNCTIONS
6 PHP FORM SUBMIT AND DISPLAY
7 PHP MODE DISPLAY
8
STUDENT DETAILS – USING PHP DATABASE SAVE
MODE
9
PRODUCT DETAILS – USING PHP DATABASE SAVE
MODE
10 AJAX WITH PHP DATABASE
11
STUDENT DETAILS – DISPLAYING FROM
DATABASE
12
PRODUCT DETAILS – DISPLAYING FROM
DATABASE
AIM:
To write a html5 program to create student information form design.
ALGORITHM:
Step 1: Start the process
Step 2:Type the html 5 program to create student information details form.
Step 3: While creating the form we are using text, number, date,
select(dropdownlist or combobox).
Step 4: Save the program in the name of student.html.
Step 5: Run this html file using any browser such as chrome, firefox, MS
edge,etc.,
Step 6: Stop the process
1.HTML5 Student Form Design
Student.html
<!DOCTYPE html>
<html>
<head><title>Student Information</title></head>
<body>
<center><h1>STUDENT INFORMATION</h1></center>
<form name="frm" action="#" method="post">
Register No.:<input type="text" value="" name="txtregno"/><br><br>
Student Name:<input type="text" value="" name="txtsname"/><br><br>
Date of Birth:<input type="date" value="" name="txtdob"/><br><br>
Age:<input type="number" value="" name="txtage"/><br><br>
Course:<select name="ddlcourse">
<option value="1">Select the course</option>
<option value="B.C.A">B.C.A</option>
<option value="B.Sc Computer Science">B.Sc Computer Science
</option>
<option value="B.Sc Information Technology">B.Sc Information
Technology</option>
<option value="B.Com Commerce">B.Com Commerce</option>
<option value="B.Com CA">B.Com CA</option>
<option value="B.Com PA">B.Com PA</option>
</select><br><br>
<input type="submit" value="Submit" name="btnsubmit">&nbsp;&nbsp;
<input type="reset" value="Reset" name="btnreset">
</form>
</body>
</html>
Output
Result
Thus, our program has been successfully saved and executed.
2. USING FRAMESET AND MULTIMEDIA ELEMENTS
AIM:
To write a html program to perform the usage of frameset and multimedia
elements.
ALGORITHM:
Step 1: Start the process
Step 2: Write a html5 program to create a frameset for title.html and home.html
Step 3: Write a html5 program to create title.html with hyperlinks history.html,
Imagecode/index.html, AudioVideo/index.html
Step 4: Write a html5 program to create home.html and give some content.
Step 5: Write a html5 program to create history.html and give the content.
Step 6: Using <meta> tag set the width and scale for the image and using
<picture> tag insert the images.
Step 7: Using <video controls> set the width and height and insert the video.
Step 8: Using <audio controls> insert the audio
Step 9: Save all the file inside a single folder and execute without any error.
Step 10: Stop the process
2. USING FRAMESET AND MULTIMEDIA ELEMENTS
Index.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>SRI RAMAKRISHNA MISSION VIDYALAYA</TITLE>
</HEAD>
<FRAMESET COLS="25%,*">
<FRAME SRC="Title.html" NAME="Title">
<FRAME SRC="home.html" NAME="Content">
</FRAMESET>
</HTML>
Title.html
<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY>
<UL>
<LI><A HREF="History.html" TARGET="Content">History Of
Vidyalaya</A></LI>
<LI><A HREF="ImageCode/index.html" TARGET="Content">Image /
Picture</A></LI>
<LI><A HREF="AudioVideo/index.html" TARGET="Content">Audio /
Video</A></LI>
</UL>
</BODY>
</HTML>
Home.html
<!DOCTYPE html>
<html>
<head>
<title>srkv</title>
</head>
<body>
Ramakrishna Mission Vidyalaya, Coimbatore, is a major educational centre of
the well-known Ramakrishna Mission. It is 19 km from the Coimbatore City on the highway
to Ootacamund,and situated in a serene environment spread over about 300 acres. The
Institution was founded by Sri T.S. Avinashilingam in 1930 with an investment of just Rs.
5.75 and with one harijan boy on its roll. Ramakrishna Mission Vidyalaya, Coimbatore, a
branch centre of the Ramakrishna Mission, P.O. Belur Math, Dist. Howrah, West Bengal -
711 202, India. RAMAKRISHNA MISSION is a registered society in which monks of
Ramakrishna Math and lay devotees cooperate in conducting various types of social service
mainly in India. It was founded by Sri Ramakrishna's chief apostle, Swami Vivekananda
(1863-1902), one of the foremost thinkers and religious leaders of the present age.
</body>
</html>
History.html
<HTML>
<HEAD>
<TITLE>
History
</TITLE>
</HEAD>
<BODY>
<P>The college was started in the year 1964 with blessings of Srimat Swami
Madhavanandaji Maharaj and has completed 43 years of useful and meaningful service to
the student community and society.
</P>
</BODY>
</HTML>
ImageCode/index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The Picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<imgsrc="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
AudioVideo/index.html
<!DOCTYPE html>
<html>
<head>
<title>Multimedia Controls</title>
</head>
<body>
<h1>Multimedia - Video Control</h1>
<video width="500" height="350" controls>
<source src="GIT.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<h1>Multimedia - Audio Control</h1>
<audio controls>
<source src="MusicSpace.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output
Result
Thus, our program has been successfully saved and executed.
3. USING BOOTSTRAP TABLE
AIM:
To write a html program and create a table using Bootstrap CSS.
ALGORITHM:
Step 1: Start the process
Step 2: Inside the head section use <meta> tag to set width and height, <link> to
call css and <script> to call javascript files.
Step 3: Inside the body section create a container, set the background colour and
give the content.
Step 4: Create 3 columns col-sm-5, col-sm-3, col-sm-4 and give the color.
Step 5: Create a table with table-bordered and table-hover having 3 columns and
4 rows.
Step 6: In <thead> give the heading for the table first_name, last_name, email
Step 7: Give the values for the table.
Step 8: Save the program as bootstrap.html and execute without any error.
Step 9: Stop the process.
3. USING BOOTSTRAP TABLE
Sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Bootstrap Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background-color:#CCCCCC;">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-5 text-warning">.col-sm-5</div>
<div class="col-sm-3 text-danger">.col-sm-3</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<br>
<br>
<table class="table-bordered table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
Result
Thus, our program has been successfully saved and executed.
4. PHP DATABASE CONNECTION
AIM:
To write a php program to connect to the database.
ALGORITHM:
Step 1: Start the process
Step 2: Create a new database “bca” and connect that database using
mysqli_connect
Step 3: Inside the bca database create a new table “bca2021” and select the table
using mysqli_select_db.
Step 4: Save the program as connect.php and execute without any error.
Step 5: Stop the process
4. PHP DATABASE CONNECTION
Connect.php
<html>
<head><title>Sample Database Connection</title></head>
<body>
<?php
ob_start();
session_start();
$link=mysqli_connect("localhost","root","","tbl_students") or die("cannot connect
mysql");
mysqli_select_db($link, "bca") or die("Cannot select bca2021 Database");
echo"Connected Successfully";
?>
</body>
</html>
Output
Result
Thus, our program has been successfully saved and executed.
5. PHP FILE HANDLING FUNCTIONS
AIM:
To write a php program and perform the usage of file handling functions.
ALGORITHM:
Step 1: Start the process
Step 2: Write the html5 program and create a form using text area and button
control it performs the form action.
Step 3: When we click our button control it performs the form action.
Step 4: Write a php code and create a hai.txt file by using fopen function with
write only mode.
Step 5: By using fputs function, display the content of the txt area in new page.
Step 6: By using fread function, we can read the content inside hai.txt file and
print in our browser.
Step 7: Save this program in the name of files.php and run using any web
browser.
Step 8: Stop the process
5. PHP FILE HANDLING FUNCTIONS
Files.php
<!DOCTYPE html>
<html>
<head>
<title>File Demo</title>
</head>
<body>
<?php
if(!isset($_GET['mode'])){
?>
<form name=frmfile method="post" action="files.php?mode=write">
<label>Type Here : </label>
<textarea name="txa"></textarea><br>
<input type="submit" name="write" value="Write">
</form>
<?php
}
if(isset($_GET['mode'])){
$mode=$_GET['mode'];
if($mode=='write'){
$file=fopen("hai.txt", "w");
$value=$_POST['txa'];
echo "Written Successfully";
fputs($file,$value);
?>
<form name="frmread" method="post" action="files.php?mode=read">
<input type="submit" name="read" value="Read"/>
</form>
<?php
}elseif($mode=='read') {
$file=fopen("hai.txt", "r");
$fileValue=fread($file, 10000);
echo "$fileValue";
echo "";
}
}
?>
</body>
</html>
Output
Result
Thus, our program has been successfully saved and executed.
6. PHP FORM SUBMIT AND DISPLAY
AIM:
To write a php program and perform form submit and display the data
into another page.
ALGORITHM:
Step 1: Start the process
Step 2: Create a new text file student.php
Step 3: Create a new form in student.php andset the action= “sample.php”
Step 4:Inside the form give the attributes as txt_regno, txt_sname, cmb_dept,
cmb_year and cmb_sem.
Step 5: Create a submit button to save the student details.
Step 6: Create an another text file sample.php
Step 7: print the student details using php
Step 8: Save the program and execute without any error.
Step 9: Stop the process
6. PHP FORM SUBMIT AND DISPLAY
Student.php
<html>
<head><title>Student Details</title></head>
<body>
<form name="frm" method="post" action="sample.php">
<table border="0" cellpadding="0" cellspacing="0" width="400">
<tr height="40">
<td>Register No</td>
<td>:&nbsp;<input type="text" value="" name="txt_regno"
/></td>
</tr><tr height="40">
<td>Student Name</td>
<td>:&nbsp;<input type="text" value="" name="txt_sname"
/></td>
</tr><tr height="40">
<td>Department</td>
<td>:&nbsp;<select name="cmb_dept">
<option value="1">----Select----</option>
<option value="Computer Application">Computer Application</option>
<option value="Computer Science">Computer Science</option>
<option value="Information Technology">Information Technology</option>
</select>
</td>
</tr><tr height="40">
<td>Year</td>
<td>:&nbsp;<select name="cmb_year">
<option value="1">----Select----</option>
<option value="I">I year</option>
<option value="II">II Year</option>
<option value="III">III Year</option>
</select>
</td>
</tr><tr height="40">
<td>Semester</td>
<td>:&nbsp;<select name="cmb_sem">
<option value="1">----Select----</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
</td>
</tr><tr height="60">
<td colspan="2" align="center"><input type="submit"
value="Save">&nbsp;&nbsp;<input type="reset" value="Reset"></td>
</tr></table>
</form>
</body>
</html>
Sample.php
<?php
echo $_POST["txt_regno"];
print "<br>";
echo $_POST["txt_sname"];
echo "<br>";
echo $_REQUEST["cmb_dept"];
echo "<br>";
echo $_POST["cmb_year"];
echo "<br>";
echo $_POST["cmb_sem"];
?>
Output
Result
Thus, our program has been successfully saved and executed.
7. PHP MODE DISPLAY
AIM:
To write a php program and perform form submit and display the data
into same page using mode concept.
ALGORITHM:
Step 1: Start the process
Step 2: Using php, set the mode in null mode.
Step 3: Create a new student form in a table format
Step 4: Set the form action as “student.php?mode=display”
Step 5: Inside the form give the attributes as txt_regno, txt_sname, cmb_dept,
cmb_year and cmb_sem.
Step 6: Create a submit button to save the student details.
Step 6: Using if condition, if the mode=display, print the student details in the
same page using php.
Step 7: Save the program and execute without any error.
Step 8: Stop the process
7. PHP MODE DISPLAY
Student.php
<?php
if(isset($_REQUEST["mode"])==""){
?>
<html>
<head><title>Student Details</title></head>
<body>
<form name="frm" method="post" action="student.php?mode=display">
<table border="0" cellpadding="0" cellspacing="0" width="400">
<tr height="40">
<td>Register No</td>
<td>:&nbsp;<input type="text" value="" name="txt_regno"
/></td>
</tr><tr height="40">
<td>Student Name</td>
<td>:&nbsp;<input type="text" value="" name="txt_sname"
/></td>
</tr><tr height="40">
<td>Department</td>
<td>:&nbsp;<select name="cmb_dept">
<option value="1">----Select----</option>
<option value="Computer Application">Computer
Application</option>
<option value="Computer Science">Computer Science</option>
<option value="Information Technology">Information
Technology</option>
</select>
</td>
</tr><tr height="40">
<td>Year</td>
<td>:&nbsp;<select name="cmb_year">
<option value="1">----Select----</option>
<option value="I">I year</option>
<option value="II">II Year</option>
<option value="III">III Year</option>
</select>
</td>
</tr><tr height="40">
<td>Semester</td>
<td>:&nbsp;<select name="cmb_sem">
<option value="1">----Select----</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
</td>
</tr><tr height="60">
<td colspan="2" align="center"><input type="submit"
value="Save">&nbsp;&nbsp;<input type="reset" value="Reset"></td>
</tr></table></form></body>
</html>
<?php
}if(isset($_REQUEST["mode"])=="display"){
echo $_POST["txt_regno"];
print "<br>";
echo $_POST["txt_sname"];
echo "<br>";
echo $_REQUEST["cmb_dept"];
echo "<br>";
echo $_POST["cmb_year"];
echo "<br>";
echo $_POST["cmb_sem"];
}?>
Output
Result
Thus, our program has been successfully saved and executed.
8. STUDENT DETAILS – USING PHP DATABASE SAVE MODE
AIM:
To write a php program and save student details into the MySQL
Database.
ALGORITHM:
Step 1: Start the process
Step 2: Create a new database “tblStudents” and connect using mysqli_connect.
Step 3: Create a new table “tbl_student” and insert some values.
Step 4:In the save mode, insert the values by using insert query in mysqli_query
Step 5: After inserting the data, get the session message as “saved successfully”
Step 6: Create a new student form in null mode with the attribute (regno, sname,
dept, year and sem)
Step 7: Create a button to submit the details
Step 8: Save the program as student.php and execute without any error.
Step 9: Stop the process
8. STUDENT DETAILS - USING PHP DATABASE SAVE MODE
Student.php
<?php
ob_start();
session_start();
// Create connection
$conn = mysqli_connect("localhost", "root", "") or die("Cannot Connect MySql");
mysqli_select_db($conn, "bca") or die("Cannot select bca database");
//----------------------------------Save Mode Starts Here------------------------------------------
if(isset($_REQUEST["mode"])=="save"){
//echo "insert into tblStudent values('". $_POST["txt_regno"] ."','".
$_POST["txt_sname"] ."','". $_REQUEST["cmb_dept"] ."','". $_POST["cmb_year"] ."','".
$_POST["cmb_sem"] ."')";
//die();
mysqli_query($conn, "insert into tblStudent values('". $_POST["txt_regno"] ."','".
$_POST["txt_sname"] ."','". $_REQUEST["cmb_dept"] ."','". $_POST["cmb_year"] ."','".
$_POST["cmb_sem"] ."')");
if(mysqli_affected_rows($conn)){
$_SESSION['msg']="Saved Successfully";
}
header("location:student.php");
die();
}
//----------------------------------Save Mode Ends Here------------------------------------------
//----------------------------------Null Mode Starts Here------------------------------------------
if(isset($_REQUEST["mode"])==""){
?>
<html>
<head><title>Student Details</title></head>
<body>
<form name="frm" method="post" action="student.php?mode=save">
<table border="0" cellpadding="0" cellspacing="0" width="400">
<tr height="40">
<td>Register No</td>
<td>:&nbsp;<input type="text" value="" name="txt_regno"
/></td>
</tr>
<tr height="40">
<td>Student Name</td>
<td>:&nbsp;<input type="text" value="" name="txt_sname"
/></td>
</tr>
<tr height="40">
<td>Department</td>
<td>:&nbsp;<select name="cmb_dept">
<option value="1">----Select----</option>
<option value="Computer Application">Computer Application</option>
<option value="Computer Science">Computer Science</option>
<option value="Information Technology">Information Technology</option>
</select>
</td>
</tr>
<tr height="40">
<td>Year</td>
<td>:&nbsp;<select name="cmb_year">
<option value="1">----Select----</option>
<option value="I">I year</option>
<option value="II">II Year</option>
<option value="III">III Year</option>
</select>
</td>
</tr>
<tr height="40">
<td>Semester</td>
<td>:&nbsp;<select name="cmb_sem">
<option value="1">----Select----</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
</td>
</tr>
<tr height="60">
<td colspan="2" align="center"><input type="submit"
value="Save">&nbsp;&nbsp;<input type="reset" value="Reset"></td>
</tr>
</table>
<?php
if(isset($_SESSION['msg'])){
if($_SESSION['msg']!="")
echo $_SESSION['msg'];
$_SESSION['msg']="";
}
?>
</form>
</body>
</html>
<?php
}
//----------------------------------Null Mode Ends Here------------------------------------------
?>
Output
Result
Thus, our program has been successfully saved and executed.
9. PRODUCT DETAILS – USING PHP DATABASE SAVE MODE
AIM:
To write a php program and save product details into the MySQL
Database.
ALGORITHM:
Step 1: Start the process
Step 2: Create a new database “bca” and connect using mysqli_connect.
Step 3: In the save mode, insert the values by using insert query in mysqli_query
Step 4: After inserting the data, get the session message as “saved successfully”
Step 5: Open Javascript and create a new function Valid() and declare a variable
a=/^[0-9]$/
Step 6: Design the form to get the product details in table view with the attribute
(product id, product name, quantity type, and product price)
Step 7: Save the program as product.php and execute without any error.
Step 8: Stop the process
9. PRODUCT DETAILS - USING PHP DATABASE SAVE MODE
Product.php
<?php
ob_start();
session_start();
$link=mysqli_connect("localhost", "root", "") or die("Cannot connect mysql software");
mysqli_select_db($link, "bca") or die("cannot select 15bca database");
if(isset($_REQUEST["mode"])=="save"){
mysqli_query($link, "insert into tbl_product values(
". $_REQUEST['txt_pid'] .",
'". $_REQUEST['txt_pname'] ."',
'". $_REQUEST["cmb_qtype"] ."',
'". $_REQUEST["txt_price"] ."')");
if(mysqli_affected_rows($link)){
$_SESSION["msg"]="Saved Successfully";
}
header("location:product.php");
}
if(isset($_REQUEST["mode"])==""){
?>
<html><head><title>Product Master</title>
<script language="javascript">
function valid(){
var a=/^[0-9]$/;
if(!a.test(document.frm.txt_pid.value)){
alert("Enter the Product Id Properly...");
document.frm.txt_pid.value="";
document.frm.txt_pid.focus();
return false;
}
}</script></head><body>
<h3>PRODUCT DETAILS</h3>
<form name="frm" method="post" action="product.php?mode=save" onSubmit="return
valid();">
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr height="40">
<td>Product Id *</td>
<td>:&nbsp;<input type="text" name="txt_pid" value=""></td>
</tr><tr height="40">
<td>Product Name</td>
<td>:&nbsp;<input type="text" name="txt_pname" value=""></td>
</tr><tr height="40">
<td>Qty Type</td>
<td>:&nbsp;<select name="cmb_qtype">
<option value="1">--Select--</option>
<option value="Kgs">Kgs</option>
<option value="Lts">Lts</option>
<option value="Nos">Nos</option>
</select></td>
</tr><tr height="40">
<td>Price</td>
<td>:&nbsp;<input type="text" name="txt_price" value=""></td>
</tr><tr height="60">
<td colspan="2" align="center"><input type="submit"
value="Save">&nbsp;&nbsp;<input type="reset" value="Reset"></td>
</tr></table>
<?php
if(isset($_SESSION["msg"])!=""){
echo $_SESSION["msg"];
$_SESSION["msg"]="";
}
?></body></html><?php
}
?>
Output
Result
Thus, our program has been successfully saved and executed.
10. AJAX WITH PHP DATABASE
AIM:
To write a php with Ajax program and display student data by clicking
the student’s name in the select box.
ALGORITHM:
Step 1: Start the process
Step 2: Create a new php file index.php
Step 3: Using mysqli_connect connect to the database “tbl_students”
Step 4: Using Ajax script retrive the data from getstud.php
Step 5: Display the selected student details in table format.
Step 6: Save the program as index.php and execute without any error.
Step 7: Stop the process
10. AJAX WITH PHP DATABASE
Index.php
<?php
ob_start();
session_start();
$link=mysqli_connect("localhost","root","","tbl_students") or die("Error occured in
Connecting Database")
?>
<html>
<head>
<title> my php Ajax script </title>
<script language ="javascript">
function showSubj(str){
if (str == ""){
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","getstud.php?q="+str,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 &&this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
}
}
</script>
</head>
<body>
<form>
<?php
$rs=mysqli_query($link, "select distinct txt_name from tbl_student");
if(mysqli_num_rows($rs))
{
?>
select the student Name:<select name="txt_name"
onchange="showSubj(this.value)">
<option value="1">---select---</option>
<?php
while($obj=mysqli_fetch_array($rs))
{
echo "<option value='". $obj["txt_name"] ."'>". $obj["txt_name"]
."</option>";
}
?>
</select>
<?php
}
else{
echo "No Records found";
}
?>
<br><br><br><br><br>
<div id="txtHint"><b> person info will be listed here...</b></div>
</form>
</body>
</html>
getstud.php
<?php
ob_start();
session_start();
$link=mysqli_connect("localhost","root","","tbl_students") or die("Error occured in
Connecting Database")
?>
<html>
<head></head>
<body>
<?php
$rs=mysqli_query($link,"select * from tbl_student where txt_name in ('".$_GET['q']."')");
if(mysqli_num_rows($rs))
{
?>
<table border ="1" cellpadding = "2" cellspacing="0">
<tr>
<th> Reg NO </th>
<th> Student Name </th>
<th> Department </th>
<th> year </th>
<th> semester </th>
</tr>
<?php
while($obj=mysqli_fetch_array($rs))
{
?>
<tr>
<td><?php echo $obj["txt_regno"];?></td>
<td><?php echo $obj["txt_name"];?></td>
<td><?php echo $obj["cmb_dept"];?></td>
<td><?php echo $obj["cmb_year"];?></td>
<td><?php echo $obj["cmb_sem"];?></td>
</tr>
<?php
}
echo"</table>"
?>
<?php
}
mysqli_close($link);
?>
</body>
</html>
Output
Result
Thus, our program has been successfully saved and executed.
11. STUDENT DETAILS – DISPLAYING FROM DATABASE
AIM:
To write a php program to view the student detailsfrom the database.
ALGORITHM:
Step 1: Start the process
Step 2: Create a new database “tbl_students” and connect using mysqli_connect.
Step 3: Create a new table “tbl_student” and insert some values.
Step 4: By using select query fetch all the details from tbl_student using
mysqli_query.
Step 5: Display the fetched details in table format.
Step 6: Using php with echo to print the details in tbl_student.
Step 7: Save the program as connect.php and execute without any error.
Step 8: Stop the process
11. STUDENT DETAILS – DISPLAYING FROM DATABASE
connect.php
<html>
<head><title>Student Details - Database Connection</title></head>
<body>
<?php
ob_start();
session_start();
$conn= mysqli_connect ("localhost","root","","tbl_students") or die ("cannot connect
mysql");
$rs=mysqli_query($conn,"select * from tbl_student");
if(mysqli_num_rows($rs))
{
?>
<table border="1" cellspacing="1" cellpadding="3" width="400">
<?php
while ($arr=mysqli_fetch_array($rs))
{
?>
<tr>
<td><?php echo $arr["txt_regno"]; ?></td>
<td><?php echo $arr["txt_name"]; ?></td>
<td><?php echo $arr["cmb_dept"]; ?></td>
<td><?php echo $arr["cmb_year"]; ?></td>
<td><?php echo $arr["cmb_sem"]; ?></td>
</tr>
<?php
}
?>
</table>
<?php
}
?>
</body></html>
Output
Result
Thus, our program has been successfully saved and executed.
12.PRODUCT DETAILS – DISPLAYING FROM DATABASE
AIM:
To write a php program to view the product details from the database.
ALGORITHM:
Step 1: Start the process
Step 2: Create a new database “tbl_students” and connect using mysqli_connect.
Step 3: Create a new table “bca” and insert some values.
Step 4: By using select query fetch all the details from table “bca” using
mysqli_query.
Step 5: Display the fetched details in table format.
Step 6: Using php with echo to print the details form bca.
Step 7: Save the program as connect.php and execute without any error.
Step 8: Stop the process
12. STUDENT DETAILS – DISPLAYING FROM DATABASE
connect.php
<html>
<head><title>Product details - Database Connection</title></head>
<body>
<?php
ob_start();
session_start();
$conn= mysqli_connect ("localhost","root","","tbl_students") or die ("cannot
connect mysql");
$rs=mysqli_query($conn,"select * from bca");
if(mysqli_num_rows($rs))
{
?>
<table border="1" cellspacing="1" cellpadding="3" width="400">
<?php
while ($arr=mysqli_fetch_array($rs))
{
?>
<tr>
<td><?php echo $arr["txt_pid"]; ?></td>
<td><?php echo $arr["txt_pname"]; ?></td>
<td><?php echo $arr["cmb_qtype"]; ?></td>
<td><?php echo $arr["txt_price"]; ?></td>
</tr>
<?php
}
?>
</table>
<?php
}
?>
</body></html>
Output
Result
Thus, our program has been successfully saved and executed.

More Related Content

Similar to web technology practicals.pdf

WIT lab programs.docx
WIT lab programs.docxWIT lab programs.docx
WIT lab programs.docx
jashmithakakavakam
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
Katy Slemon
 
ASP.NET-stored procedure-manual
ASP.NET-stored procedure-manualASP.NET-stored procedure-manual
SwatiNaikResumeAug2016
SwatiNaikResumeAug2016SwatiNaikResumeAug2016
SwatiNaikResumeAug2016swati Naik
 
inventory mangement project.pdf
inventory mangement project.pdfinventory mangement project.pdf
inventory mangement project.pdf
MeenakshiThakur86
 
Rakesh Bijawat , BCA Third Year
Rakesh Bijawat , BCA Third YearRakesh Bijawat , BCA Third Year
Rakesh Bijawat , BCA Third Year
Dezyneecole
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Collaboration Technologies
 
Unit 2 - Data Binding.pptx
Unit 2 - Data Binding.pptxUnit 2 - Data Binding.pptx
Unit 2 - Data Binding.pptx
Malla Reddy University
 
Our application got popular and now it breaks
Our application got popular and now it breaksOur application got popular and now it breaks
Our application got popular and now it breaks
ColdFusionConference
 
Our application got popular and now it breaks
Our application got popular and now it breaksOur application got popular and now it breaks
Our application got popular and now it breaks
devObjective
 
Bootstrap
BootstrapBootstrap
Bootstrap
Sarvesh Kushwaha
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
cherukumilli2
 
Final year project working documentation 2020
Final year project working documentation 2020Final year project working documentation 2020
Final year project working documentation 2020
Vikram Singh
 
class 12 board project on database connectivity (java to SQL)
class 12 board project on database connectivity (java to SQL)class 12 board project on database connectivity (java to SQL)
class 12 board project on database connectivity (java to SQL)
gaurav kumar
 
Ip bus Akshay
Ip bus AkshayIp bus Akshay
Ip bus Akshay
AkshayKalapgar
 

Similar to web technology practicals.pdf (20)

WIT lab programs.docx
WIT lab programs.docxWIT lab programs.docx
WIT lab programs.docx
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
 
ASP.NET-stored procedure-manual
ASP.NET-stored procedure-manualASP.NET-stored procedure-manual
ASP.NET-stored procedure-manual
 
Ankush Resume
Ankush ResumeAnkush Resume
Ankush Resume
 
SwatiNaikResumeAug2016
SwatiNaikResumeAug2016SwatiNaikResumeAug2016
SwatiNaikResumeAug2016
 
inventory mangement project.pdf
inventory mangement project.pdfinventory mangement project.pdf
inventory mangement project.pdf
 
Ajaykumar_last
Ajaykumar_lastAjaykumar_last
Ajaykumar_last
 
Rakesh Bijawat , BCA Third Year
Rakesh Bijawat , BCA Third YearRakesh Bijawat , BCA Third Year
Rakesh Bijawat , BCA Third Year
 
Suryapraksharao
SuryapraksharaoSuryapraksharao
Suryapraksharao
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Unit 2 - Data Binding.pptx
Unit 2 - Data Binding.pptxUnit 2 - Data Binding.pptx
Unit 2 - Data Binding.pptx
 
Our application got popular and now it breaks
Our application got popular and now it breaksOur application got popular and now it breaks
Our application got popular and now it breaks
 
Our application got popular and now it breaks
Our application got popular and now it breaksOur application got popular and now it breaks
Our application got popular and now it breaks
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
RahulCV
RahulCVRahulCV
RahulCV
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
 
Final year project working documentation 2020
Final year project working documentation 2020Final year project working documentation 2020
Final year project working documentation 2020
 
Resume
ResumeResume
Resume
 
class 12 board project on database connectivity (java to SQL)
class 12 board project on database connectivity (java to SQL)class 12 board project on database connectivity (java to SQL)
class 12 board project on database connectivity (java to SQL)
 
Ip bus Akshay
Ip bus AkshayIp bus Akshay
Ip bus Akshay
 

Recently uploaded

一比一原版(qut毕业证)昆士兰科技大学毕业证如何办理
一比一原版(qut毕业证)昆士兰科技大学毕业证如何办理一比一原版(qut毕业证)昆士兰科技大学毕业证如何办理
一比一原版(qut毕业证)昆士兰科技大学毕业证如何办理
taqyed
 
Investors Data Sample containing data.csv.pdf
Investors Data Sample containing data.csv.pdfInvestors Data Sample containing data.csv.pdf
Investors Data Sample containing data.csv.pdf
danielses2
 
HOW TO USE PINTEREST_by: Clarissa Credito
HOW TO USE PINTEREST_by: Clarissa CreditoHOW TO USE PINTEREST_by: Clarissa Credito
HOW TO USE PINTEREST_by: Clarissa Credito
ClarissaAlanoCredito
 
Codes n Conventionss copy (2).pptx new new
Codes n Conventionss copy (2).pptx new newCodes n Conventionss copy (2).pptx new new
Codes n Conventionss copy (2).pptx new new
ZackSpencer3
 
Caffeinated Pitch Bible- developed by Claire Wilson
Caffeinated Pitch Bible- developed by Claire WilsonCaffeinated Pitch Bible- developed by Claire Wilson
Caffeinated Pitch Bible- developed by Claire Wilson
ClaireWilson398082
 
The Last Polymath: Muntadher Saleh‎‎‎‎‎‎‎‎‎‎‎‎
The Last Polymath: Muntadher Saleh‎‎‎‎‎‎‎‎‎‎‎‎The Last Polymath: Muntadher Saleh‎‎‎‎‎‎‎‎‎‎‎‎
The Last Polymath: Muntadher Saleh‎‎‎‎‎‎‎‎‎‎‎‎
iraqartsandculture
 
Memory Rental Store - The Ending(Storyboard)
Memory Rental Store - The Ending(Storyboard)Memory Rental Store - The Ending(Storyboard)
Memory Rental Store - The Ending(Storyboard)
SuryaKalyan3
 
Fed by curiosity and beauty - Remembering Myrsine Zorba
Fed by curiosity and beauty - Remembering Myrsine ZorbaFed by curiosity and beauty - Remembering Myrsine Zorba
Fed by curiosity and beauty - Remembering Myrsine Zorba
mariavlachoupt
 
Cream and Brown Illustrative Food Journal Presentation.pptx
Cream and Brown Illustrative Food Journal Presentation.pptxCream and Brown Illustrative Food Journal Presentation.pptx
Cream and Brown Illustrative Food Journal Presentation.pptx
cndywjya001
 
Complete Lab 123456789123456789123456789
Complete Lab 123456789123456789123456789Complete Lab 123456789123456789123456789
Complete Lab 123456789123456789123456789
vickyvikas51556
 
WEEK 11 PART 1- SOULMAKING (ARTMAKING) (1).pdf
WEEK 11 PART 1- SOULMAKING (ARTMAKING) (1).pdfWEEK 11 PART 1- SOULMAKING (ARTMAKING) (1).pdf
WEEK 11 PART 1- SOULMAKING (ARTMAKING) (1).pdf
AntonetteLaurio1
 
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单如何办理
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单如何办理一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单如何办理
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单如何办理
zeyhe
 
Fashionista Chic Couture Mazes and Coloring AdventureA
Fashionista Chic Couture Mazes and Coloring AdventureAFashionista Chic Couture Mazes and Coloring AdventureA
Fashionista Chic Couture Mazes and Coloring AdventureA
julierjefferies8888
 
一比一原版(UniSA毕业证)南澳大学毕业证成绩单如何办理
一比一原版(UniSA毕业证)南澳大学毕业证成绩单如何办理一比一原版(UniSA毕业证)南澳大学毕业证成绩单如何办理
一比一原版(UniSA毕业证)南澳大学毕业证成绩单如何办理
zeyhe
 
This is a certificate template for Daily Vacation Bible School Awards Can edi...
This is a certificate template for Daily Vacation Bible School Awards Can edi...This is a certificate template for Daily Vacation Bible School Awards Can edi...
This is a certificate template for Daily Vacation Bible School Awards Can edi...
RodilynColampit
 
Rishikesh @ℂall @Girls ꧁❤Book❤꧂@ℂall @Girls Service Vip Top Model Safe
Rishikesh  @ℂall @Girls ꧁❤Book❤꧂@ℂall @Girls Service Vip Top Model SafeRishikesh  @ℂall @Girls ꧁❤Book❤꧂@ℂall @Girls Service Vip Top Model Safe
Rishikesh @ℂall @Girls ꧁❤Book❤꧂@ℂall @Girls Service Vip Top Model Safe
hilij84961
 
Memory Rental Store - The Chase (Storyboard)
Memory Rental Store - The Chase (Storyboard)Memory Rental Store - The Chase (Storyboard)
Memory Rental Store - The Chase (Storyboard)
SuryaKalyan3
 
A Brief Introduction About Hadj Ounis
A Brief  Introduction  About  Hadj OunisA Brief  Introduction  About  Hadj Ounis
A Brief Introduction About Hadj Ounis
Hadj Ounis
 

Recently uploaded (18)

一比一原版(qut毕业证)昆士兰科技大学毕业证如何办理
一比一原版(qut毕业证)昆士兰科技大学毕业证如何办理一比一原版(qut毕业证)昆士兰科技大学毕业证如何办理
一比一原版(qut毕业证)昆士兰科技大学毕业证如何办理
 
Investors Data Sample containing data.csv.pdf
Investors Data Sample containing data.csv.pdfInvestors Data Sample containing data.csv.pdf
Investors Data Sample containing data.csv.pdf
 
HOW TO USE PINTEREST_by: Clarissa Credito
HOW TO USE PINTEREST_by: Clarissa CreditoHOW TO USE PINTEREST_by: Clarissa Credito
HOW TO USE PINTEREST_by: Clarissa Credito
 
Codes n Conventionss copy (2).pptx new new
Codes n Conventionss copy (2).pptx new newCodes n Conventionss copy (2).pptx new new
Codes n Conventionss copy (2).pptx new new
 
Caffeinated Pitch Bible- developed by Claire Wilson
Caffeinated Pitch Bible- developed by Claire WilsonCaffeinated Pitch Bible- developed by Claire Wilson
Caffeinated Pitch Bible- developed by Claire Wilson
 
The Last Polymath: Muntadher Saleh‎‎‎‎‎‎‎‎‎‎‎‎
The Last Polymath: Muntadher Saleh‎‎‎‎‎‎‎‎‎‎‎‎The Last Polymath: Muntadher Saleh‎‎‎‎‎‎‎‎‎‎‎‎
The Last Polymath: Muntadher Saleh‎‎‎‎‎‎‎‎‎‎‎‎
 
Memory Rental Store - The Ending(Storyboard)
Memory Rental Store - The Ending(Storyboard)Memory Rental Store - The Ending(Storyboard)
Memory Rental Store - The Ending(Storyboard)
 
Fed by curiosity and beauty - Remembering Myrsine Zorba
Fed by curiosity and beauty - Remembering Myrsine ZorbaFed by curiosity and beauty - Remembering Myrsine Zorba
Fed by curiosity and beauty - Remembering Myrsine Zorba
 
Cream and Brown Illustrative Food Journal Presentation.pptx
Cream and Brown Illustrative Food Journal Presentation.pptxCream and Brown Illustrative Food Journal Presentation.pptx
Cream and Brown Illustrative Food Journal Presentation.pptx
 
Complete Lab 123456789123456789123456789
Complete Lab 123456789123456789123456789Complete Lab 123456789123456789123456789
Complete Lab 123456789123456789123456789
 
WEEK 11 PART 1- SOULMAKING (ARTMAKING) (1).pdf
WEEK 11 PART 1- SOULMAKING (ARTMAKING) (1).pdfWEEK 11 PART 1- SOULMAKING (ARTMAKING) (1).pdf
WEEK 11 PART 1- SOULMAKING (ARTMAKING) (1).pdf
 
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单如何办理
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单如何办理一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单如何办理
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单如何办理
 
Fashionista Chic Couture Mazes and Coloring AdventureA
Fashionista Chic Couture Mazes and Coloring AdventureAFashionista Chic Couture Mazes and Coloring AdventureA
Fashionista Chic Couture Mazes and Coloring AdventureA
 
一比一原版(UniSA毕业证)南澳大学毕业证成绩单如何办理
一比一原版(UniSA毕业证)南澳大学毕业证成绩单如何办理一比一原版(UniSA毕业证)南澳大学毕业证成绩单如何办理
一比一原版(UniSA毕业证)南澳大学毕业证成绩单如何办理
 
This is a certificate template for Daily Vacation Bible School Awards Can edi...
This is a certificate template for Daily Vacation Bible School Awards Can edi...This is a certificate template for Daily Vacation Bible School Awards Can edi...
This is a certificate template for Daily Vacation Bible School Awards Can edi...
 
Rishikesh @ℂall @Girls ꧁❤Book❤꧂@ℂall @Girls Service Vip Top Model Safe
Rishikesh  @ℂall @Girls ꧁❤Book❤꧂@ℂall @Girls Service Vip Top Model SafeRishikesh  @ℂall @Girls ꧁❤Book❤꧂@ℂall @Girls Service Vip Top Model Safe
Rishikesh @ℂall @Girls ꧁❤Book❤꧂@ℂall @Girls Service Vip Top Model Safe
 
Memory Rental Store - The Chase (Storyboard)
Memory Rental Store - The Chase (Storyboard)Memory Rental Store - The Chase (Storyboard)
Memory Rental Store - The Chase (Storyboard)
 
A Brief Introduction About Hadj Ounis
A Brief  Introduction  About  Hadj OunisA Brief  Introduction  About  Hadj Ounis
A Brief Introduction About Hadj Ounis
 

web technology practicals.pdf

  • 1. SRI RAMAKRISHNA MISSION VIDYALAYA COLLEGE OF ARTS AND SCIENCE [AUTONOMOUS] Re-Accredited by NAAC with A Grade Coimbatore – 641 020 NOVEMBER – 2021 DEPARTMENT OF COMPUTER APPLICATIONS NAME : __________________________________ REG. NO : __________________________________ SEMESTER : Vth SEMESTER SUBJECT : Web Technology (HTML5, Bootstrap, PHP & MySql) SUBJECT CODE: 18UCA5CP07
  • 2. SRI RAMAKRISHNA MISSION VIDYALAYA COLLEGE OF ARTS AND SCIENCE (S.F) [AUTONOMOUS] Re-Accredited by NAAC with A Grade Coimbatore – 641 020 DEPARTMENT OF COMPUTER APPLICATIONS BONAFIDE CERTIFICATE This is to certify that it is a bonafide record work done by ________________________________ in “Web Technology (HTML5, Bootstrap, PHP &MySql)” for the Fifth Semester during the year November, 2021 Submitted for the Semester Practical Examinations held on ______________. Head of the Department Staff in Charge Internal Examiner External Examiner
  • 3. 1. HTML5 STUDENT FORM DESIGN S.NO LIST OF PROGRAMS DATE PAGE NUMBER 1 HTML5 STUDENT FORM DESIGN 2 USING FRAMESET AND MULTIMEDIA ELEMENTS 3 USING BOOTSTRAP TABLE 4 PHP DATABASE CONNECTION 5 PHP FILE HANDLING FUNCTIONS 6 PHP FORM SUBMIT AND DISPLAY 7 PHP MODE DISPLAY 8 STUDENT DETAILS – USING PHP DATABASE SAVE MODE 9 PRODUCT DETAILS – USING PHP DATABASE SAVE MODE 10 AJAX WITH PHP DATABASE 11 STUDENT DETAILS – DISPLAYING FROM DATABASE 12 PRODUCT DETAILS – DISPLAYING FROM DATABASE
  • 4. AIM: To write a html5 program to create student information form design. ALGORITHM: Step 1: Start the process Step 2:Type the html 5 program to create student information details form. Step 3: While creating the form we are using text, number, date, select(dropdownlist or combobox). Step 4: Save the program in the name of student.html. Step 5: Run this html file using any browser such as chrome, firefox, MS edge,etc., Step 6: Stop the process 1.HTML5 Student Form Design
  • 5. Student.html <!DOCTYPE html> <html> <head><title>Student Information</title></head> <body> <center><h1>STUDENT INFORMATION</h1></center> <form name="frm" action="#" method="post"> Register No.:<input type="text" value="" name="txtregno"/><br><br> Student Name:<input type="text" value="" name="txtsname"/><br><br> Date of Birth:<input type="date" value="" name="txtdob"/><br><br> Age:<input type="number" value="" name="txtage"/><br><br> Course:<select name="ddlcourse"> <option value="1">Select the course</option> <option value="B.C.A">B.C.A</option> <option value="B.Sc Computer Science">B.Sc Computer Science </option> <option value="B.Sc Information Technology">B.Sc Information Technology</option> <option value="B.Com Commerce">B.Com Commerce</option> <option value="B.Com CA">B.Com CA</option> <option value="B.Com PA">B.Com PA</option> </select><br><br> <input type="submit" value="Submit" name="btnsubmit">&nbsp;&nbsp; <input type="reset" value="Reset" name="btnreset"> </form> </body> </html> Output
  • 6. Result Thus, our program has been successfully saved and executed. 2. USING FRAMESET AND MULTIMEDIA ELEMENTS
  • 7. AIM: To write a html program to perform the usage of frameset and multimedia elements. ALGORITHM: Step 1: Start the process Step 2: Write a html5 program to create a frameset for title.html and home.html Step 3: Write a html5 program to create title.html with hyperlinks history.html, Imagecode/index.html, AudioVideo/index.html Step 4: Write a html5 program to create home.html and give some content. Step 5: Write a html5 program to create history.html and give the content. Step 6: Using <meta> tag set the width and scale for the image and using <picture> tag insert the images. Step 7: Using <video controls> set the width and height and insert the video. Step 8: Using <audio controls> insert the audio Step 9: Save all the file inside a single folder and execute without any error. Step 10: Stop the process 2. USING FRAMESET AND MULTIMEDIA ELEMENTS
  • 8. Index.html <!DOCTYPE html> <HTML> <HEAD> <TITLE>SRI RAMAKRISHNA MISSION VIDYALAYA</TITLE> </HEAD> <FRAMESET COLS="25%,*"> <FRAME SRC="Title.html" NAME="Title"> <FRAME SRC="home.html" NAME="Content"> </FRAMESET> </HTML> Title.html <HTML> <HEAD> <TITLE>Title</TITLE> </HEAD> <BODY> <UL> <LI><A HREF="History.html" TARGET="Content">History Of Vidyalaya</A></LI> <LI><A HREF="ImageCode/index.html" TARGET="Content">Image / Picture</A></LI> <LI><A HREF="AudioVideo/index.html" TARGET="Content">Audio / Video</A></LI> </UL> </BODY> </HTML> Home.html <!DOCTYPE html>
  • 9. <html> <head> <title>srkv</title> </head> <body> Ramakrishna Mission Vidyalaya, Coimbatore, is a major educational centre of the well-known Ramakrishna Mission. It is 19 km from the Coimbatore City on the highway to Ootacamund,and situated in a serene environment spread over about 300 acres. The Institution was founded by Sri T.S. Avinashilingam in 1930 with an investment of just Rs. 5.75 and with one harijan boy on its roll. Ramakrishna Mission Vidyalaya, Coimbatore, a branch centre of the Ramakrishna Mission, P.O. Belur Math, Dist. Howrah, West Bengal - 711 202, India. RAMAKRISHNA MISSION is a registered society in which monks of Ramakrishna Math and lay devotees cooperate in conducting various types of social service mainly in India. It was founded by Sri Ramakrishna's chief apostle, Swami Vivekananda (1863-1902), one of the foremost thinkers and religious leaders of the present age. </body> </html> History.html <HTML> <HEAD> <TITLE> History </TITLE> </HEAD> <BODY> <P>The college was started in the year 1964 with blessings of Srimat Swami Madhavanandaji Maharaj and has completed 43 years of useful and meaningful service to the student community and society. </P> </BODY> </HTML> ImageCode/index.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 10. </head> <body> <h2>The Picture Element</h2> <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <imgsrc="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> </body> </html> AudioVideo/index.html <!DOCTYPE html> <html> <head> <title>Multimedia Controls</title> </head> <body> <h1>Multimedia - Video Control</h1> <video width="500" height="350" controls> <source src="GIT.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <br><br> <h1>Multimedia - Audio Control</h1> <audio controls> <source src="MusicSpace.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html> Output
  • 11.
  • 12. Result Thus, our program has been successfully saved and executed.
  • 13. 3. USING BOOTSTRAP TABLE AIM: To write a html program and create a table using Bootstrap CSS. ALGORITHM: Step 1: Start the process Step 2: Inside the head section use <meta> tag to set width and height, <link> to call css and <script> to call javascript files. Step 3: Inside the body section create a container, set the background colour and give the content. Step 4: Create 3 columns col-sm-5, col-sm-3, col-sm-4 and give the color. Step 5: Create a table with table-bordered and table-hover having 3 columns and 4 rows. Step 6: In <thead> give the heading for the table first_name, last_name, email Step 7: Give the values for the table. Step 8: Save the program as bootstrap.html and execute without any error. Step 9: Stop the process.
  • 14. 3. USING BOOTSTRAP TABLE Sample.html <!DOCTYPE html> <html lang="en"> <head> <title>My First Bootstrap Application</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container" style="background-color:#CCCCCC;"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> <br> <br> <div class="row"> <div class="col-sm-5 text-warning">.col-sm-5</div> <div class="col-sm-3 text-danger">.col-sm-3</div> <div class="col-sm-4">.col-sm-4</div> </div> <br> <br> <table class="table-bordered table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th>
  • 16. Output Result Thus, our program has been successfully saved and executed.
  • 17. 4. PHP DATABASE CONNECTION AIM: To write a php program to connect to the database. ALGORITHM: Step 1: Start the process Step 2: Create a new database “bca” and connect that database using mysqli_connect Step 3: Inside the bca database create a new table “bca2021” and select the table using mysqli_select_db. Step 4: Save the program as connect.php and execute without any error. Step 5: Stop the process
  • 18. 4. PHP DATABASE CONNECTION Connect.php <html> <head><title>Sample Database Connection</title></head> <body> <?php ob_start(); session_start(); $link=mysqli_connect("localhost","root","","tbl_students") or die("cannot connect mysql"); mysqli_select_db($link, "bca") or die("Cannot select bca2021 Database"); echo"Connected Successfully"; ?> </body> </html>
  • 19. Output Result Thus, our program has been successfully saved and executed.
  • 20. 5. PHP FILE HANDLING FUNCTIONS AIM: To write a php program and perform the usage of file handling functions. ALGORITHM: Step 1: Start the process Step 2: Write the html5 program and create a form using text area and button control it performs the form action. Step 3: When we click our button control it performs the form action. Step 4: Write a php code and create a hai.txt file by using fopen function with write only mode. Step 5: By using fputs function, display the content of the txt area in new page. Step 6: By using fread function, we can read the content inside hai.txt file and print in our browser. Step 7: Save this program in the name of files.php and run using any web browser. Step 8: Stop the process
  • 21. 5. PHP FILE HANDLING FUNCTIONS Files.php <!DOCTYPE html> <html> <head> <title>File Demo</title> </head> <body> <?php if(!isset($_GET['mode'])){ ?> <form name=frmfile method="post" action="files.php?mode=write"> <label>Type Here : </label> <textarea name="txa"></textarea><br> <input type="submit" name="write" value="Write"> </form> <?php } if(isset($_GET['mode'])){ $mode=$_GET['mode']; if($mode=='write'){ $file=fopen("hai.txt", "w"); $value=$_POST['txa']; echo "Written Successfully"; fputs($file,$value); ?> <form name="frmread" method="post" action="files.php?mode=read"> <input type="submit" name="read" value="Read"/> </form> <?php }elseif($mode=='read') {
  • 22. $file=fopen("hai.txt", "r"); $fileValue=fread($file, 10000); echo "$fileValue"; echo ""; } } ?> </body> </html>
  • 23. Output Result Thus, our program has been successfully saved and executed.
  • 24. 6. PHP FORM SUBMIT AND DISPLAY AIM: To write a php program and perform form submit and display the data into another page. ALGORITHM: Step 1: Start the process Step 2: Create a new text file student.php Step 3: Create a new form in student.php andset the action= “sample.php” Step 4:Inside the form give the attributes as txt_regno, txt_sname, cmb_dept, cmb_year and cmb_sem. Step 5: Create a submit button to save the student details. Step 6: Create an another text file sample.php Step 7: print the student details using php Step 8: Save the program and execute without any error. Step 9: Stop the process
  • 25. 6. PHP FORM SUBMIT AND DISPLAY Student.php <html> <head><title>Student Details</title></head> <body> <form name="frm" method="post" action="sample.php"> <table border="0" cellpadding="0" cellspacing="0" width="400"> <tr height="40"> <td>Register No</td> <td>:&nbsp;<input type="text" value="" name="txt_regno" /></td> </tr><tr height="40"> <td>Student Name</td> <td>:&nbsp;<input type="text" value="" name="txt_sname" /></td> </tr><tr height="40"> <td>Department</td> <td>:&nbsp;<select name="cmb_dept"> <option value="1">----Select----</option> <option value="Computer Application">Computer Application</option> <option value="Computer Science">Computer Science</option> <option value="Information Technology">Information Technology</option> </select> </td> </tr><tr height="40"> <td>Year</td> <td>:&nbsp;<select name="cmb_year"> <option value="1">----Select----</option> <option value="I">I year</option> <option value="II">II Year</option> <option value="III">III Year</option> </select> </td>
  • 26. </tr><tr height="40"> <td>Semester</td> <td>:&nbsp;<select name="cmb_sem"> <option value="1">----Select----</option> <option value="I">I</option> <option value="II">II</option> <option value="III">III</option> <option value="IV">IV</option> <option value="V">V</option> <option value="VI">VI</option> </td> </tr><tr height="60"> <td colspan="2" align="center"><input type="submit" value="Save">&nbsp;&nbsp;<input type="reset" value="Reset"></td> </tr></table> </form> </body> </html> Sample.php <?php echo $_POST["txt_regno"]; print "<br>"; echo $_POST["txt_sname"]; echo "<br>"; echo $_REQUEST["cmb_dept"]; echo "<br>"; echo $_POST["cmb_year"]; echo "<br>"; echo $_POST["cmb_sem"]; ?>
  • 27. Output Result Thus, our program has been successfully saved and executed.
  • 28. 7. PHP MODE DISPLAY AIM: To write a php program and perform form submit and display the data into same page using mode concept. ALGORITHM: Step 1: Start the process Step 2: Using php, set the mode in null mode. Step 3: Create a new student form in a table format Step 4: Set the form action as “student.php?mode=display” Step 5: Inside the form give the attributes as txt_regno, txt_sname, cmb_dept, cmb_year and cmb_sem. Step 6: Create a submit button to save the student details. Step 6: Using if condition, if the mode=display, print the student details in the same page using php. Step 7: Save the program and execute without any error. Step 8: Stop the process
  • 29. 7. PHP MODE DISPLAY Student.php <?php if(isset($_REQUEST["mode"])==""){ ?> <html> <head><title>Student Details</title></head> <body> <form name="frm" method="post" action="student.php?mode=display"> <table border="0" cellpadding="0" cellspacing="0" width="400"> <tr height="40"> <td>Register No</td> <td>:&nbsp;<input type="text" value="" name="txt_regno" /></td> </tr><tr height="40"> <td>Student Name</td> <td>:&nbsp;<input type="text" value="" name="txt_sname" /></td> </tr><tr height="40"> <td>Department</td> <td>:&nbsp;<select name="cmb_dept"> <option value="1">----Select----</option> <option value="Computer Application">Computer Application</option> <option value="Computer Science">Computer Science</option> <option value="Information Technology">Information Technology</option> </select> </td> </tr><tr height="40"> <td>Year</td> <td>:&nbsp;<select name="cmb_year"> <option value="1">----Select----</option> <option value="I">I year</option>
  • 30. <option value="II">II Year</option> <option value="III">III Year</option> </select> </td> </tr><tr height="40"> <td>Semester</td> <td>:&nbsp;<select name="cmb_sem"> <option value="1">----Select----</option> <option value="I">I</option> <option value="II">II</option> <option value="III">III</option> <option value="IV">IV</option> <option value="V">V</option> <option value="VI">VI</option> </td> </tr><tr height="60"> <td colspan="2" align="center"><input type="submit" value="Save">&nbsp;&nbsp;<input type="reset" value="Reset"></td> </tr></table></form></body> </html> <?php }if(isset($_REQUEST["mode"])=="display"){ echo $_POST["txt_regno"]; print "<br>"; echo $_POST["txt_sname"]; echo "<br>"; echo $_REQUEST["cmb_dept"]; echo "<br>"; echo $_POST["cmb_year"]; echo "<br>"; echo $_POST["cmb_sem"]; }?>
  • 31. Output Result Thus, our program has been successfully saved and executed.
  • 32. 8. STUDENT DETAILS – USING PHP DATABASE SAVE MODE AIM: To write a php program and save student details into the MySQL Database. ALGORITHM: Step 1: Start the process Step 2: Create a new database “tblStudents” and connect using mysqli_connect. Step 3: Create a new table “tbl_student” and insert some values. Step 4:In the save mode, insert the values by using insert query in mysqli_query Step 5: After inserting the data, get the session message as “saved successfully” Step 6: Create a new student form in null mode with the attribute (regno, sname, dept, year and sem) Step 7: Create a button to submit the details Step 8: Save the program as student.php and execute without any error. Step 9: Stop the process
  • 33. 8. STUDENT DETAILS - USING PHP DATABASE SAVE MODE Student.php <?php ob_start(); session_start(); // Create connection $conn = mysqli_connect("localhost", "root", "") or die("Cannot Connect MySql"); mysqli_select_db($conn, "bca") or die("Cannot select bca database"); //----------------------------------Save Mode Starts Here------------------------------------------ if(isset($_REQUEST["mode"])=="save"){ //echo "insert into tblStudent values('". $_POST["txt_regno"] ."','". $_POST["txt_sname"] ."','". $_REQUEST["cmb_dept"] ."','". $_POST["cmb_year"] ."','". $_POST["cmb_sem"] ."')"; //die(); mysqli_query($conn, "insert into tblStudent values('". $_POST["txt_regno"] ."','". $_POST["txt_sname"] ."','". $_REQUEST["cmb_dept"] ."','". $_POST["cmb_year"] ."','". $_POST["cmb_sem"] ."')"); if(mysqli_affected_rows($conn)){ $_SESSION['msg']="Saved Successfully"; } header("location:student.php"); die(); } //----------------------------------Save Mode Ends Here------------------------------------------ //----------------------------------Null Mode Starts Here------------------------------------------ if(isset($_REQUEST["mode"])==""){ ?> <html> <head><title>Student Details</title></head> <body> <form name="frm" method="post" action="student.php?mode=save"> <table border="0" cellpadding="0" cellspacing="0" width="400"> <tr height="40">
  • 34. <td>Register No</td> <td>:&nbsp;<input type="text" value="" name="txt_regno" /></td> </tr> <tr height="40"> <td>Student Name</td> <td>:&nbsp;<input type="text" value="" name="txt_sname" /></td> </tr> <tr height="40"> <td>Department</td> <td>:&nbsp;<select name="cmb_dept"> <option value="1">----Select----</option> <option value="Computer Application">Computer Application</option> <option value="Computer Science">Computer Science</option> <option value="Information Technology">Information Technology</option> </select> </td> </tr> <tr height="40"> <td>Year</td> <td>:&nbsp;<select name="cmb_year"> <option value="1">----Select----</option> <option value="I">I year</option> <option value="II">II Year</option> <option value="III">III Year</option> </select> </td> </tr> <tr height="40"> <td>Semester</td> <td>:&nbsp;<select name="cmb_sem"> <option value="1">----Select----</option>
  • 35. <option value="I">I</option> <option value="II">II</option> <option value="III">III</option> <option value="IV">IV</option> <option value="V">V</option> <option value="VI">VI</option> </td> </tr> <tr height="60"> <td colspan="2" align="center"><input type="submit" value="Save">&nbsp;&nbsp;<input type="reset" value="Reset"></td> </tr> </table> <?php if(isset($_SESSION['msg'])){ if($_SESSION['msg']!="") echo $_SESSION['msg']; $_SESSION['msg']=""; } ?> </form> </body> </html> <?php } //----------------------------------Null Mode Ends Here------------------------------------------ ?>
  • 36. Output Result Thus, our program has been successfully saved and executed.
  • 37. 9. PRODUCT DETAILS – USING PHP DATABASE SAVE MODE AIM: To write a php program and save product details into the MySQL Database. ALGORITHM: Step 1: Start the process Step 2: Create a new database “bca” and connect using mysqli_connect. Step 3: In the save mode, insert the values by using insert query in mysqli_query Step 4: After inserting the data, get the session message as “saved successfully” Step 5: Open Javascript and create a new function Valid() and declare a variable a=/^[0-9]$/ Step 6: Design the form to get the product details in table view with the attribute (product id, product name, quantity type, and product price) Step 7: Save the program as product.php and execute without any error. Step 8: Stop the process
  • 38. 9. PRODUCT DETAILS - USING PHP DATABASE SAVE MODE Product.php <?php ob_start(); session_start(); $link=mysqli_connect("localhost", "root", "") or die("Cannot connect mysql software"); mysqli_select_db($link, "bca") or die("cannot select 15bca database"); if(isset($_REQUEST["mode"])=="save"){ mysqli_query($link, "insert into tbl_product values( ". $_REQUEST['txt_pid'] .", '". $_REQUEST['txt_pname'] ."', '". $_REQUEST["cmb_qtype"] ."', '". $_REQUEST["txt_price"] ."')"); if(mysqli_affected_rows($link)){ $_SESSION["msg"]="Saved Successfully"; } header("location:product.php"); } if(isset($_REQUEST["mode"])==""){ ?> <html><head><title>Product Master</title> <script language="javascript"> function valid(){ var a=/^[0-9]$/; if(!a.test(document.frm.txt_pid.value)){ alert("Enter the Product Id Properly..."); document.frm.txt_pid.value=""; document.frm.txt_pid.focus(); return false; } }</script></head><body>
  • 39. <h3>PRODUCT DETAILS</h3> <form name="frm" method="post" action="product.php?mode=save" onSubmit="return valid();"> <table border="0" cellpadding="0" cellspacing="0" width="300"> <tr height="40"> <td>Product Id *</td> <td>:&nbsp;<input type="text" name="txt_pid" value=""></td> </tr><tr height="40"> <td>Product Name</td> <td>:&nbsp;<input type="text" name="txt_pname" value=""></td> </tr><tr height="40"> <td>Qty Type</td> <td>:&nbsp;<select name="cmb_qtype"> <option value="1">--Select--</option> <option value="Kgs">Kgs</option> <option value="Lts">Lts</option> <option value="Nos">Nos</option> </select></td> </tr><tr height="40"> <td>Price</td> <td>:&nbsp;<input type="text" name="txt_price" value=""></td> </tr><tr height="60"> <td colspan="2" align="center"><input type="submit" value="Save">&nbsp;&nbsp;<input type="reset" value="Reset"></td> </tr></table> <?php if(isset($_SESSION["msg"])!=""){ echo $_SESSION["msg"]; $_SESSION["msg"]=""; } ?></body></html><?php } ?>
  • 40. Output Result Thus, our program has been successfully saved and executed.
  • 41. 10. AJAX WITH PHP DATABASE AIM: To write a php with Ajax program and display student data by clicking the student’s name in the select box. ALGORITHM: Step 1: Start the process Step 2: Create a new php file index.php Step 3: Using mysqli_connect connect to the database “tbl_students” Step 4: Using Ajax script retrive the data from getstud.php Step 5: Display the selected student details in table format. Step 6: Save the program as index.php and execute without any error. Step 7: Stop the process
  • 42. 10. AJAX WITH PHP DATABASE Index.php <?php ob_start(); session_start(); $link=mysqli_connect("localhost","root","","tbl_students") or die("Error occured in Connecting Database") ?> <html> <head> <title> my php Ajax script </title> <script language ="javascript"> function showSubj(str){ if (str == ""){ document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","getstud.php?q="+str,true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 &&this.status == 200) {
  • 43. document.getElementById("txtHint").innerHTML = this.responseText; } }; } } </script> </head> <body> <form> <?php $rs=mysqli_query($link, "select distinct txt_name from tbl_student"); if(mysqli_num_rows($rs)) { ?> select the student Name:<select name="txt_name" onchange="showSubj(this.value)"> <option value="1">---select---</option> <?php while($obj=mysqli_fetch_array($rs)) { echo "<option value='". $obj["txt_name"] ."'>". $obj["txt_name"] ."</option>"; } ?> </select> <?php } else{ echo "No Records found";
  • 44. } ?> <br><br><br><br><br> <div id="txtHint"><b> person info will be listed here...</b></div> </form> </body> </html> getstud.php <?php ob_start(); session_start(); $link=mysqli_connect("localhost","root","","tbl_students") or die("Error occured in Connecting Database") ?> <html> <head></head> <body> <?php $rs=mysqli_query($link,"select * from tbl_student where txt_name in ('".$_GET['q']."')"); if(mysqli_num_rows($rs)) { ?> <table border ="1" cellpadding = "2" cellspacing="0"> <tr> <th> Reg NO </th> <th> Student Name </th> <th> Department </th> <th> year </th> <th> semester </th>
  • 45. </tr> <?php while($obj=mysqli_fetch_array($rs)) { ?> <tr> <td><?php echo $obj["txt_regno"];?></td> <td><?php echo $obj["txt_name"];?></td> <td><?php echo $obj["cmb_dept"];?></td> <td><?php echo $obj["cmb_year"];?></td> <td><?php echo $obj["cmb_sem"];?></td> </tr> <?php } echo"</table>" ?> <?php } mysqli_close($link); ?> </body> </html>
  • 46. Output Result Thus, our program has been successfully saved and executed.
  • 47. 11. STUDENT DETAILS – DISPLAYING FROM DATABASE AIM: To write a php program to view the student detailsfrom the database. ALGORITHM: Step 1: Start the process Step 2: Create a new database “tbl_students” and connect using mysqli_connect. Step 3: Create a new table “tbl_student” and insert some values. Step 4: By using select query fetch all the details from tbl_student using mysqli_query. Step 5: Display the fetched details in table format. Step 6: Using php with echo to print the details in tbl_student. Step 7: Save the program as connect.php and execute without any error. Step 8: Stop the process
  • 48. 11. STUDENT DETAILS – DISPLAYING FROM DATABASE connect.php <html> <head><title>Student Details - Database Connection</title></head> <body> <?php ob_start(); session_start(); $conn= mysqli_connect ("localhost","root","","tbl_students") or die ("cannot connect mysql"); $rs=mysqli_query($conn,"select * from tbl_student"); if(mysqli_num_rows($rs)) { ?> <table border="1" cellspacing="1" cellpadding="3" width="400"> <?php while ($arr=mysqli_fetch_array($rs)) { ?> <tr> <td><?php echo $arr["txt_regno"]; ?></td> <td><?php echo $arr["txt_name"]; ?></td> <td><?php echo $arr["cmb_dept"]; ?></td> <td><?php echo $arr["cmb_year"]; ?></td> <td><?php echo $arr["cmb_sem"]; ?></td> </tr> <?php } ?> </table> <?php
  • 49. } ?> </body></html> Output Result Thus, our program has been successfully saved and executed.
  • 50. 12.PRODUCT DETAILS – DISPLAYING FROM DATABASE AIM: To write a php program to view the product details from the database. ALGORITHM: Step 1: Start the process Step 2: Create a new database “tbl_students” and connect using mysqli_connect. Step 3: Create a new table “bca” and insert some values. Step 4: By using select query fetch all the details from table “bca” using mysqli_query. Step 5: Display the fetched details in table format. Step 6: Using php with echo to print the details form bca. Step 7: Save the program as connect.php and execute without any error. Step 8: Stop the process
  • 51. 12. STUDENT DETAILS – DISPLAYING FROM DATABASE connect.php <html> <head><title>Product details - Database Connection</title></head> <body> <?php ob_start(); session_start(); $conn= mysqli_connect ("localhost","root","","tbl_students") or die ("cannot connect mysql"); $rs=mysqli_query($conn,"select * from bca"); if(mysqli_num_rows($rs)) { ?> <table border="1" cellspacing="1" cellpadding="3" width="400"> <?php while ($arr=mysqli_fetch_array($rs)) { ?> <tr> <td><?php echo $arr["txt_pid"]; ?></td> <td><?php echo $arr["txt_pname"]; ?></td> <td><?php echo $arr["cmb_qtype"]; ?></td> <td><?php echo $arr["txt_price"]; ?></td> </tr> <?php } ?> </table> <?php
  • 52. } ?> </body></html> Output Result Thus, our program has been successfully saved and executed.