Jawaharlal Nehru Engineering College: Laboratory Manual
Jawaharlal Nehru Engineering College: Laboratory Manual
Jawaharlal Nehru Engineering College: Laboratory Manual
Laboratory Manual
For
FY MCA Part-1
Department of MCA
Department of MCA JNEC, MGM University
FORWARD
It is my great pleasure to present this laboratory manual for First year MCA students for
the subject of Web Technology keeping in view the vast coverage required for
developing static web site using CSS, HTML5, JavaScript & PHP-MySQL with
examples & mini project
As a student, many of you may be wondering with some of the questions in your mind
regarding the subject and exactly what has been tried is to answer through this manual.
As you may be aware that MGM has already been awarded with ISO 9001:2015
certification and it is our endure to technically equip our students taking the advantage of
the procedural aspects of ISO 9001:2015 Certification.
Faculty members are also advised that covering these aspects in initial stage itself, will
greatly relieved them in future as much of the load will be taken care by the enthusiasm
energies of the students once they are conceptually clear.
This manual is intended for the First year students of MCA branch in the subject of Web
Technology LAB. This manual typically contains practical/Lab Sessions related to
HTML, CSS, Java-script and PHP Programming Language covering various aspects
related the subject to enhanced understanding.
Although, as per the syllabus, PHP programs are prescribed, we have made the efforts to
cover various aspects of Software Developing Languages
Students are advised to thoroughly go through this manual rather than only topics
mentioned in the syllabus as practical aspects are the key to understanding and
conceptual visualization of theoretical aspects covered in the books.
S.S.Deshmukh S.S.Magare
HOD Assistant Professor
MCA Department MCA Department
Institute Vision
To create self-reliant, continuous learner & competent technocrats imbued with human
values.
Institute Mission
Imparting quality technical education to the students through participative teaching
learning process.
Developing competence amongst the students through academic learning and practical
experimentation.
Inculcating social mindset and human values amongst the students.
===============================================================================================
Department Vision
Build a strong technical teaching and learning environment that responds swiftly to the
challenges and needs of the current industry trends.
Department Mission
PROGRAM OUTCOMES
PO No. Program Outcome Description
Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals, and
PO 1
an engineering specialization to the solution of complex engineering problems.
Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
PO 2 problems reaching substantiated conclusions using first principles of mathematics, natural sciences, and
engineering sciences.
Design / Development of solution: Design solutions for complex engineering problems and design
PO 3 system components or processes that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmental considerations.
Conduct investigation of complex problems: Use research-based knowledge and research methods
PO 4 including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.
Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern engineering
PO 5 and IT tools including prediction and modeling to complex engineering activities with an understanding
of the limitations.
The engineer & society: Apply reasoning informed by the contextual knowledge to assess societal,
PO 6 health, safety, legal and cultural issues and the consequent responsibilities relevant to the professional
engineering practice.
Environment & sustainability: Understand the impact of the professional engineering solutions in
PO 7 societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.
Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of the
PO 8
engineering practice.
Individual & team work: Function effectively as an individual, and as a member or leader in diverse
PO 9
teams, and in multidisciplinary settings.
Project management & finance: Demonstrate knowledge and understanding of the engineering and
PO 11 management principles and apply these to one‟s own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments.
Life long learning: Recognize the need for, and have the preparation and ability to engage in
PO 12
independent and life-long learning in the broadest context of technological change.
PSO 5 Imbibe knowledge to perform research on contemporary technology issues and publish
research papers
PSO 6 Perform feasibility study using OOSDLC for the problem domain
Lab Outcomes
Construct responsive interactive websites using HTML5, CSS3, Bootsrap 4, JavaScript &
LO1
JQuery.
Use server side scripting with PHP & AJAX to generate the web pages dynamically using the
LO2
Mysql database connectivity.
LO4 Track source code history using GIT version control system and host website on internet .
SUBJECT INDEX
1 Assignment on HTML
2 Assignment on CSS
3 Assignment on Bootstrap
5 Assignment on Jquery
10 Assignment on CMS:wordpress
1. Make entry in the Log Book as soon as you enter the Laboratory.
2. All the students should sit according to their roll numbers starting from
their left to right.
3. All the students are supposed to enter the terminal number in the log
book.
5. All the students are expected to get at least the algorithm of the
program/concept to be implemented.
2. Students should be taught for taking the printouts under the observation of
lab teacher.
Source Code:
<html>
<head>
<title>RegistrationForm</title>
</head>
<body bgcolor="#00FF66">
<tr>
<th>FirstName:</th> <td><input
type="text"name="id1"id="id1"size="30"maxlength="20"/></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<th >Password:</th>
<td><inputtype="password"name="id4"id="id4"size="50"maxlength="10"/></td>
</tr>
<tr>
<th>PhoneNumber:</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<b>Percentage:</b><input type="text"name="id9"id="id9"size="5"/></br>
</tr>
<option>0-1Year</option> <option>2-3Year</option>
<option>3-5Year</option> <option>Morethan5Year</option>
</select></td> </tr>
<tr>
</tr>
</html>
Output :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div{
background-color:BlanchedAlmond;
width:150px;
height:200px;
margin:15px;
padding:10px;
float:left;
overflow:auto;
img{
display:block;
margin-left:auto;
margin-right:auto;
width:50%;
.bcolor{ background-color:DarkTurquoise;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div>
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQBAdq44zjJA5p4g6RhFczCAeIA
B1PPs2mgMw&usqp=CAU" height="50" width="50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit
amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget
elementum magna tristique. </p>
</div>
<div class="bcolor">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet
pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum
magna tristique. </p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet
pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum
magna tristique. </p>
</div>
<div class="bcolor">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet
pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum
magna tristique. </p>
</div>
</body>
</html>
Output :
2. To ensure proper rendering and touch zooming, add the following <meta> tag
inside the <head> element:
4. Add Containers
6. Add Carousel with caption to display sliding Images (add Images folder to your
main folder)
Output:
<p>In this case JavaScript changes the value of the src (source) attribute of an
image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on
the light</button>
</body>
</html>
Output:
Output :
First.html
<html>
<body>
</body>
</html>
Welcome.php
<html>
<body>
</body>
</html>
Output:
Source Code:
<html>
<head>
<style>
*{
margin:0; padding: 0;
font-family: 'Josefin Sans', sans-serif;
}
</style>
</head>
<body bgcolor="lightyellow">
<h2 align = "center">SEARCH RESULTS</h2>
<?php
$conn = mysqli_connect("localhost","root","","fymca") or die("Cannot connect");
?>
<?php
if(isset($_POST["search"]))
{
$name1 = $_POST["name"];
if($name1==NULL)
{
echo "Dont enter null values";
}
else
{
mysqli_select_db($conn,"fymca") or die("Cannot select the
database".mysqli_error($conn));
echo "
<section>
<div class='container-fluid'>
<h1 class='text-center pt-5'>Data</h1>
<hr class='w-25 mx-auto pt-5'>
<div class='row mb-5 text-center'>
";
while($array = mysqli_fetch_row($result1))
{
echo " <div class='col-lg-3 col-md-3 col-sm-6 col-12'>
<div class='card'>
<img class='card-img-top' src='images/sujata.jpg' alt='Card image' >
<div class='card-body bg-success'>
<h4 class='card-title'>CGL</h4>";
Output :
document.getElementById("txtHint").innerHTML = this.respon
seText;
}
}
xmlhttp.open("GET", "gethint.php?q="+str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
gethint.php
<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
Objective :
Procedure :
1. Download: PHPUnit is distributed in a PHAR(PHP Archive) file, download it
here.
2. Add it to system $PATH: after downloading the PHAR file, make sure it is
executable and add it to your system $PATH. So that you can run it anywhere.
3. Create a file with the name of "Calculator.php" and copy the code below to the
file. This Calculator class only has a Add function.
5. Line 2: include class file Calculator.php. This is the class that we are going to
test against, so make sure you include it.
6. Line 8: setUp() is called before each test runs. Keep in mind, it runs before each
test, which means, if you have another test function. It will run setUp() before it
too.
7. Line 13: similar to setUp(), tearDown() is called after each test finishes.
8. Line 18: testAdd() is the test function for add function. PHPUnit will recognize
all functions prefixed with test as a test function and run it automatically. This
function is actually very straightforward, we first call Calculator.add function to
calculate the value of 1 plus 2. Then we check if it returns correct value by
using PHPUnit function assertEquals.
9. Last part of job is to run PHPUnit and make sure it passes all tests. Navigate to
the folder where you have created the test file and run commands below from
your terminal:
phpunit CalculatorTest.php
Procedure :
1. Choose WordPress as your website platform
2. Pick a name for your website
3. Log in to WordPress
4. Making your site public: Go to Settings → Reading, and make sure that the box
labeled “Discourage search engines …” is unchecked.
5. Set your website title and tagline: Go to Settings → General and set the Site Title
and Tagline fields to what you want
6. Pick a theme / design for your website: Go to Appearance → Themes from your
WordPress dashboard and then click on “Add New.”
7. Customize the theme: To begin, go to Appearance → Customize. You‟ll see the
main WordPress Customizer interface.
8. When you‟re done adjusting the homepage, don‟t forget to click on the main
“Publish” button that‟s at the top.
Output :
Objective:
Procedure:
To use FileZilla FTP client, to manage and upload the website, please follow these
steps −
Step 1 − Download and install FileZilla FTP client from FileZilla website. The
installation process of this software is the same as other software‟s.
https://filezilla–project.org/download.php
Step 2 − After installing open your FileZilla FTP client. In the quick connect bar, you
will find text box to provide hostname. Enter your ftp hostname, which can be
IP address of your server or ftp.<your_domain.com>.
Step 3 − Enter the username and password for your ftp account.
Step 4 − Enter Port on which you want to connect to your FTP server. In most of the
cases, it is 21, but if you leave this field empty then FileZilla will
automatically find the appropriate port to connect.
Output :
Quiz should be conducted on tips in the laboratory, recent trends and subject knowledge
of the subject. The quiz questions should be formulated such that questions are normally
from the scope outside of the books. However twisted questions and self formulated
questions by the faculty can be asked but correctness of it is necessarily to be thoroughly
checked before the conduction of the quiz.
Teacher should oral exams of the students with full preparation. Normally, the objective
questions with guess are to be avoided. To make it meaningful, the questions should be
such that depth of the students in the subject is tested Oral examinations are to be
conducted in co-cordial environment amongst the teachers taking the examination.
Teachers taking such examinations should not have ill thoughts about each other and
courtesies should be offered to each other in case of difference of opinion, which should
be critically suppressed in front of the students.
Submission:
Document Standard:
Basic honesty in the evaluation and marking system is absolutely essential and in the
process impartial nature of the evaluator is required in the examination system to become
popular amongst the students. It is a wrong approach or concept to award the students by
way of easy marking to get cheap popularity among the students to which they do not
deserve. It is a primary responsibility of the teacher that right students who are really
putting up lot of hard work with right kind of intelligence are correctly awarded.
The marking patterns should be justifiable to the students without any ambiguity and
teacher should see that students are faced with unjust circumstances.