Jawaharlal Nehru Engineering College: Laboratory Manual

Download as pdf or txt
Download as pdf or txt
You are on page 1of 35

Jawaharlal Nehru Engineering College

Accredited with „A‟ grade by NAAC, ISO 9001:2015


certified, AICTE Approved

Laboratory Manual

Web Technology Lab

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.

Dr. H.H. Shinde


Principal

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

LABORATORY MANNUAL CONTENTS

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.

Good Luck for your Enjoyable Laboratory Sessions

S.S.Deshmukh S.S.Magare
HOD Assistant Professor
MCA Department MCA Department

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

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

 Provide excellent post graduate education in a state-of-the-art environment, preparing


students for careers as computer technologist in self employment, industry,
government and of IT enabled sectors.

 Support society by participating in and encouraging technology transfer.

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

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.

Communication: Communicate effectively on complex engineering activities with the engineering


PO 10 community and with society at large, such as, being able to comprehend and write effective reports and
design documentation, make effective presentations, and give and receive clear instructions.

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.

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Program Specific Outcomes


Apply knowledge and probability and statistics, including applications appropriate to computer
PSO 1
engineering
PSO 2 Inculcate and understand professional Ethics, Cyber, Social responsibility
Assimilate knowledge of Mathematics and their applications in Cryptography, Graph Theory
PSO 3
and Computing
PSO 4 Understand Database, Data Mining, Normalization and Design Data Sensitive applications

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.

LO3 Create blog using CMS(wordpress)

LO4 Track source code history using GIT version control system and host website on internet .

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

SUBJECT INDEX

1 Assignment on HTML

2 Assignment on CSS

3 Assignment on Bootstrap

4 Assignment on Java script

5 Assignment on Jquery

6 Assignment on PHP basic

7 Assignment on database operation in PHP

8 Assignment on AJAX with PHP

9 Assignment on PHP Unit Testing

10 Assignment on CMS:wordpress

11 Assignment on FTP client & Cpanel web hosting

12 Responsive Web Site development (Mini Project)

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

DOs and DON’Ts in Laboratory:

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.

4. Do not change the terminal on which you are working.

5. All the students are expected to get at least the algorithm of the
program/concept to be implemented.

6. Strictly observe the instructions given by the teacher/Lab Instructor.

Instruction for Laboratory Teachers::

1. Submission related to whatever lab work has been completed should be


done during the next lab session. The immediate arrangements for printouts
related to submission on the day of practical assignments.

2. Students should be taught for taking the printouts under the observation of
lab teacher.

3. The promptness of submission should be encouraged by way of marking


and evaluation patterns that will benefit the sincere students.

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Lab Exercise 1 (2 Hours)

Title: Assignment on HTML

Objectives: Design Student Registration Form In Html


Procedure : 1) Create HTML Page named as “ sign_up.html” and add the following tags
details
 Form Tag, Paragraph Tag
 Different Heading Tag, Line Break ,Horizontal line
 Input tag for text box and submit button
 Save given page with sign_up.html by choosing „All files‟ from Save as
Type in any respective folder
 Execute the page by double clicking on name of page from respective
folder, It will show result on particular browser (eg Mozilla, Chrome,
Internet Explorer)

Source Code:

<html>

<head>

<title>RegistrationForm</title>

</head>

<body bgcolor="#00FF66">

<h3 align="center"> Study of form tag</h3>

<h2 align="center"><u>STUDENT REGISTRATION FORM</u></h2>

<form action="abc.html" name="f" method="post" autocomplete="on">

<table width="200" border="1" >

<tr>

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

<th>FirstName:</th> <td><input
type="text"name="id1"id="id1"size="30"maxlength="20"/></td>

</tr>

<tr>

<th >LastName:</th> <td><input


type="text"name="id2"id="id2"size="30"maxlength="20"/></td>

</tr>

<tr>

<th >Valid Email:</th> <td><input


type="text"name="id3"id="id3"size="70"maxlength="50"/></td>

</tr>

<tr>

<th >Password:</th>
<td><inputtype="password"name="id4"id="id4"size="50"maxlength="10"/></td>

</tr>

<tr>

<th>PhoneNumber:</th>

<td><input type="text"name="id5" id="id5" size="30" maxlength="11"/></td>

</tr>

<tr>

<th >Address :</th> <td> <textarea cols="50" rows="6" name="addr"> </textarea>


</td>

</tr>

<tr>

<th >Gender:</th> <td><b>Male:</b>

<input type="radio" name="gender" id="r1" value="male"/>

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

<b>Female:</b><input type="radio" name="gender" id="r1"value="female"/></td>

</tr>

<tr>

<th >Date of Birth:</th> <td><input type="text" name="dob"/></td>

</tr>

<tr>

<th >Qualifications:</th> <td><b>SSC</b><input


type="checkbox"name="a1"id="a1"/>

<b>Percentage:</b><input type="text"name="id9"id="id9"size="5"/></br>

<b>HSC</b><input type="checkbox" name="a1" id="a1"/>

<b>Percentage:</b><input type="text" name="id10" id="id10" size="5"/></br>

<b>BCA</b><input type="checkbox" name="a1" id="a1"/>

<b>Percentage:</b><input type="text" name="id11" id="id11" size="5"/></br>

<b>MCA</b><input type="checkbox" name="a1" id="a1"/>

<b>Percentage:</b><input type="text" name="id12" id="id12" size="5"/></br>

<b>MBA</b><input type="checkbox" name="a1" id="a1"/>

<b>Percentage:</b><input type="text" name="id13" Id="id13" size="5"/></td>

</tr>

<tr> <th >Experience</th> <td><select name="sc1" id="sc1" size="1">

<option>0-1Year</option> <option>2-3Year</option>

<option>3-5Year</option> <option>Morethan5Year</option>

</select></td> </tr>

<tr>

<th >Upload Photo :</th> <td><input type="file" ></td>

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

</tr>

<tr> <td colspan="2"><center>

<input type="submit" value="Submit" onClick="alert('Your Application have been


Submitted');"/> &nbsp;&nbsp;<input type="reset" value="Reset" onClick="alert('Your
Applicationis not Submitted');"/> </center></td>

</tr> </table> </body>

</html>

Output :

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Lab Exercise 2 (2 Hours)


Title: Study Of CSS
Objectives: Create web page using CSS
Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

div{

border:2px outset brown;

background-color:BlanchedAlmond;

width:150px;

height:200px;

margin:15px;

padding:10px;

float:left;

box-shadow:8px 15px 10px DarkGreen;

overflow:auto;

div:hover{ border:10px outset DarkGoldenRod;

box-shadow:8px 15px 10px DarkSalmon;

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

img{

display:block;

margin-left:auto;

margin-right:auto;

width:50%;

border:2px outset brown;

img:hover{ border:5px outset brown;

.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>

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

<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 :

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Lab Exercise 3 (2 Hours)


Title: Study of Bootstrap
Objectives: Create a web page using Bootstrap
Procedure:

1. Add the HTML5 doctype

2. To ensure proper rendering and touch zooming, add the following <meta> tag
inside the <head> element:

<meta name="viewport" content="width=device-width, initial-


scale=1">

3. Include Bootstrap 4 from a CDN

<!-- Latest compiled and minified CSS -->


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/b
ootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.
1/jquery.min.js"></script>

<!-- Popper JS -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/
1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/j
s/bootstrap.min.js"></script>

4. Add Containers

Bootstrap 4 also requires a containing element to wrap site contents.

There are two container classes to choose from:

a. The .container class provides a responsive fixed width container

b. The .container-fluid class provides a full width container, spanning the


entire width of the viewport

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

5. Add Navbar code to insert Menus

6. Add Carousel with caption to display sliding Images (add Images folder to your
main folder)

7. Add About us Section with images and Paragraph

8. Add Cards to display blocks

Output:

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Lab Exercise 4 (2 Hours)


Title: Introduction to JavaScript
Objectives: Write JavaScript Program to show light ON/OFF Demo
Title:
Source Code:
<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<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>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off


the light</button>

</body>
</html>

Output:

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Lab Exercise 5 (2 Hours)

Title : Introduction To JQuery

Objective : Write a Program to hide paragraph using JQuery


Source Code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></scrip
t>
<script>
$(document).ready(function(){
$("button").click(function()
{
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button> </body> </html>
Output:

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Lab Exercise 6 (2 Hours)

Title : Assignment on PHP basic

Objective : Write a basic Program in PHP by installing & configuring XAMPP

Procedure :1) Download suitable version of XAMPP tool from


https://www.apachefriends.org/download.html
2) Download Sublime Text 3 Editor from https://www.sublimetext.com/3
3) Install XAMPP on „C‟ Drive
4) Create new file in that Site ( eg C://xampp/htdocs/bikepoint/hello.php)
named as hello.php
5) Write php code for displaying hello message
6) Execute php page as http://localhost/bikepoint/hello.php in web
browser

Output :
First.html
<html>
<body>

<form action="welcome.php" method="post">


Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>

</body>
</html>

Welcome.php
<html>
<body>

Welcome <?php echo $_POST["name"]; ?><br>


Your email address is: <?php echo $_POST["email"]; ?>

</body>
</html>

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Output:

Click on Submit Button

Lab Exercise 7 (2 Hours)

Title : Assignment on database operation in PHP


Objective : Write a program in PHP to fetch details from database

Procedure : 1) Create new file as search-on-same-form.php in htdocs/demo


2) Write PHP code within HTML code by including following functions
 Use mysql_connect() function for making connection to mysql
server
 Use mysql_connect_errno() to display any error during making of
connection
 Create query to create database & table and execute it using
mysql_query() function
 Display particular messages using alert() function and error using
mysql_error() function
 Use mysql_close() function for closing the database connection
3) Save & Execute PHP file in web browser
4) Include bootstrap for better viewing result

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Source Code:
<html>
<head>

<!-- Required meta tags -->


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q
9Ifjh" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;400&di
splay=swap" rel="stylesheet">

<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");
?>

<form id="form" action="<?php $PHP_SELF ?>" method="post" class="text-


center">
<input type="text" name="name" />
<input type ="submit" name="search" value="search" class="btn btn-primary"/>
</form>

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

<?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));

// $result1 = mysqli_query($conn,"select id,name,emp_salary from emp5 ")


or die("Cant select".mysqli_error($conn));
$result1 = mysqli_query($conn,"select id,name,emp_salary from emp5 where
name= '".$name1."'") or die("Cant select".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>";

echo " <p class='card-text'>".$array[0]."


<br>".$array[1]."<br>".$array[2]."<br></p>";

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

echo " <a href='#' class='btn btn-primary'>See Profile</a>


</div>
</div>
</div>
";
}
echo " </div>
</div>
</section>
";
}
?>
<a href="index.php" align = center>HOME</a>
</body>
</html>

Output :

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Lab Exercise 8 (2 Hours)

Title : Assignment on AJAX with PHP

Objective : Write a program in PHP


Source Code:
<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.respon
seText;
}

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

}
xmlhttp.open("GET", "gethint.php?q="+str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>


<form action="">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" onkeyup="showH
int(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

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";

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL


$q = $_REQUEST["q"];
$hint = "";
// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// Output "no suggestion" if no hint was found or output
correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
Output :

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Lab Exercise 9 (2 Hours)

Title : Assignment on PHP Unit Testing

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.

4. Create the test file "CalculatorTest.php”

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

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

10. You should be able to see the successful message as below:


WEB TECHNOLOGY LAB FYMCA
Department of MCA JNEC, MGM University

Lab Exercise 10 (2 Hours)

Title : Assignment on CMS:wordpress

Objective : Create website using Wordpress

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.

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Output :

Lab Exercise : 11 (2 Hours)

Title: Assignment on FTP client & Cpanel web hosting

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.

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Step 5 − Click Quickconnect to connect to the FTP server.


Step 6 − After a successful connection, you can move or copy files from the left hand
side pane (which are your local computer directories) to the Right hand pane
(which are your remote server directories and files). You can drag and drop
files from the left to right pane or vice versa.
Step 7 − You can view the status of your moving or copying in the pane, which is on
the lower side of the interface.

Output :

Lab Exercise 12 (2 Hours)

Title: Mini Project


Objective : Create Responsive and database -Driven web application Individually
using PHP & MySQL

WEB TECHNOLOGY LAB FYMCA


Department of MCA JNEC, MGM University

Quiz on the subject:

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.

Conduction of Viva-Voce Examinations:

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:

A] Page Size A4Size


B] Running text Justified text
C] Spacing 1.5 line
D] Page Layout and Margins (Dimensions in Cms)

Evaluation and marking system:

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.

WEB TECHNOLOGY LAB FYMCA

You might also like