The document contains instructions for a semester practical exam for a Web Technology subject at Sri Ramakrishna Mission Vidyalaya College of Arts and Science. It includes a bonafide certificate, list of programs to be completed for the exam, and details of one program - a HTML5 program to create a student information form.
Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.
Bootstrap all topics of Bootstrap such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.
1. Angular Components:
Component Configuration, Building a Template, Using Constructors, Using External Templates, Angular Routing to Single Page Application (SPA)
2. Data Binding:
Introduction, Interpolation, Property Binding, Attribute Binding, Class Binding, Style Binding, Event Binding, Two-way Binding.
An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.
Bus Booking System project is developed using PHP, CSS, Bootstrap, and JavaScript. Talking about the project, it has all the essential features required for the bus bookings. This project contains only the admin and customer’s side where he/she can CRUD and manage customers, buses, routes, seats, bookings and much more. The Admin plays the main role in the management of the system. In this project, all the main functions are performed from the Admin side.
Admin has full control of the system; all the main functions are to be performed from Admin panel. Here, the user can view customers and add them. Customer’s information such as ID, Full name, phone number and Id number is included in this section. For bus bookings, he/she has to provide Id number, full name, phone number, select bus, seat number, date, and select whether the customer carries luggage or not. Buses and Seats are also added using the system. The user has to provide the bus number only in order to add bus. While adding seats the users just have to provide seat name. After all these, the customer has to check for bus availability which is also maintained by the admin. To maintain bus availability, he/she has to select bus, route, date, departure time and maintain status.
Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.
Bootstrap all topics of Bootstrap such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.
1. Angular Components:
Component Configuration, Building a Template, Using Constructors, Using External Templates, Angular Routing to Single Page Application (SPA)
2. Data Binding:
Introduction, Interpolation, Property Binding, Attribute Binding, Class Binding, Style Binding, Event Binding, Two-way Binding.
An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.
Bus Booking System project is developed using PHP, CSS, Bootstrap, and JavaScript. Talking about the project, it has all the essential features required for the bus bookings. This project contains only the admin and customer’s side where he/she can CRUD and manage customers, buses, routes, seats, bookings and much more. The Admin plays the main role in the management of the system. In this project, all the main functions are performed from the Admin side.
Admin has full control of the system; all the main functions are to be performed from Admin panel. Here, the user can view customers and add them. Customer’s information such as ID, Full name, phone number and Id number is included in this section. For bus bookings, he/she has to provide Id number, full name, phone number, select bus, seat number, date, and select whether the customer carries luggage or not. Buses and Seats are also added using the system. The user has to provide the bus number only in order to add bus. While adding seats the users just have to provide seat name. After all these, the customer has to check for bus availability which is also maintained by the admin. To maintain bus availability, he/she has to select bus, route, date, departure time and maintain status.
This tutorial offers a step-by-step guide on how to effectively use Pinterest. It covers the basics such as account creation and navigation, as well as advanced techniques including creating eye-catching pins and optimizing your profile. The tutorial also explores collaboration and networking on the platform. With visual illustrations and clear instructions, this tutorial will equip you with the skills to navigate Pinterest confidently and achieve your goals.
Explore the multifaceted world of Muntadher Saleh, an Iraqi polymath renowned for his expertise in visual art, writing, design, and pharmacy. This SlideShare delves into his innovative contributions across various disciplines, showcasing his unique ability to blend traditional themes with modern aesthetics. Learn about his impactful artworks, thought-provoking literary pieces, and his vision as a Neo-Pop artist dedicated to raising awareness about Iraq's cultural heritage. Discover why Muntadher Saleh is celebrated as "The Last Polymath" and how his multidisciplinary talents continue to inspire and influence.
Fashionista Chic Couture Maze & Coloring Adventures is a coloring and activity book filled with many maze games and coloring activities designed to delight and engage young fashion enthusiasts. Each page offers a unique blend of fashion-themed mazes and stylish illustrations to color, inspiring creativity and problem-solving skills in children.
Hadj Ounis's most notable work is his sculpture titled "Metamorphosis." This piece showcases Ounis's mastery of form and texture, as he seamlessly combines metal and wood to create a dynamic and visually striking composition. The juxtaposition of the two materials creates a sense of tension and harmony, inviting viewers to contemplate the relationship between nature and industry.
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
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
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
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.
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
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
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
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
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
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>
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) {
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
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