GOVERNMENT POLYTECHNIC

PORBANDAR

Affiliated to

Gujarat Technological University, Ahmedabad

Laboratory Manual
Dynamic Web Page Development (3350702)
D. E. Third Year (Semester– V)

Government Polytechnic - Porbandar

Opp. Airport, National Highway
Porbandar – 360578
GOVERNMENT POLYTECHNIC
PORBANDAR

Enrollment No:

Name:

Address:

Subject:

Branch:

Term:
 GOVERNMENT POLYTECHNIC
PORBANDAR

Computer Engineering Department

Certificate

This is to certify that Mr./Ms Enrolment

No: Of 5th Semester Diploma course in Computer
Engineering has satisfactorily completed his/her term work in Dynamic Web
Page Development (3350705) from to in
Government Polytechnic, Porbandar.

Date of Submission:

Staff in charge Head of Department

 GOVERNMENT POLYTECHNIC
PORBANDAR

VISION OF THE INSTITUTE

To emerge as a leading polytechnic having value based effective technical education
system in the region to meet the future demand of industry and society.

MISSION OF THE INSTITUTE

M1: To impart adequate technical skill and capability to accept challenges and to adopt
rapidly changing scenario in technological development as well as to take up higher
studies.

M2: Foster close networking with the industry, alumni and the guardians.

M3: Promote professional ethics and human values, integrity, accountability and
transparency.

M4: Promote entrepreneurship practices to generate employment opportunities.

M5: Create conductive academic environment.

 GOVERNMENT POLYTECHNIC PORBANDAR

COMPUTER ENGINEERING DEPARTMENT

VISION OF THE DEPARTMENT

To achieve excellence in Computer Engineering by imparting technical and problem-
solving skills along with ethical value to meet industrial requirements having social and
environmental concerns.

MISSION OF THE DEPARTMENT

M1: To provides a learning ambiance to enhance discipline knowledge, technical skill
and problem solving skill.

M2: To motivates students for lifelong learning to adapt challenges in rapidly changing
technology.

M3: To induces ethical values and spirit of social commitment.

M4: To provide opportunities to promote leadership skill required in Computer

Engineering industry’s diverse culture.
Subject: Dynamic Web Page Development
Subject Code: C302, 3350702

Course Outcomes:
CO1: Develop a static Web page using HTML tags and Style your page using CSS.

CO2: Develop web page using basic features of PHP.

CO3: Develop a web page by applying concepts of array and function.

CO4: Develop web pages through forms and session management.

CO5: Develop interactive Web based application using HTML, PHP and MYSQL
database.
Subject: Dynamic Web Page Development
Subject Code: C302, 3350702

Software Requirements:

1. Wamp Server: htttps://sourceforge.net/tprojects/wamtpsereer/

2. Xampp Server: htttps://www.atpachefrienss.org/sownooas.htmo

3. FileZilla: htttps://fioeziooa:tproject.org/sownooas.tphtpptpoatformwwin64

4. VS Code IDE: https://code.visualstudio.com/download

 List of Practicals
MAPPING
SR MAPPING WITH
EXPERIMENT TITLE WITH
NO PO-PSO
CO
Write HTML codes for displaying image and PO1,PO2,
1 CO1
demonstrate hyper linking. PO3,PO4,PO5,PO7,PSO1
Write HTML codes to attach video on webpage using PO1,PO2,
2 CO1
embed tag in html PO3,PO4,PO5,PO7,PSO1
PO1,PO2,
3 Create A Feedback Form Using Form handling. CO1
PO3,PO4,PO5,PO7,PSO1
PO1,PO2,
4 Create a contact form using form handling. CO1
PO3,PO4,PO5,PO7,PSO1
Write a code for creating static page design using PO1,PO2,
5 CO1
division tag PO3,PO4,PO5,PO7,PSO1
PO1,PO2,
6 Write a code for design menu system using list tag CO1
PO3,PO4,PO5,PO7,PSO1
PO1,PO2,
7 Design Google Page using HTML5 CO1
PO3,PO4,PO5,PO7,PSO1
Apply CSS formatting to created pages and explore it PO1,PO2,
8 CO1
fully, also use readymade css templates. PO3,PO4,PO5,PO7,PSO1
Write a PHP script to display Welcome message.
9 Write a PHP script to demonstrate use of arithmetic CO2 PO1,PO3,PO4,PO7,PSO1
operators, comparison operators, and logical operators.
Write a PHP script to get type of variable using
CO2 PO1,PO3,PO4,PO7,PSO1
gettype()
10
Write a PHP script to set type of variable using settype() CO2 PO1,PO3,PO4,PO7,PSO1

Write a PHP script to set type of variable using type

11 CO2 PO1,PO3,PO4,PO7,PSO1
casting

Write PHP Script to print Fibonacci series. CO2 PO1,PO3,PO4,PO7,PSO1

Write PHP Script to calculate total marks of sudent and

12 CO2 PO1,PO3,PO4,PO7,PSO1
display grade.
Write PHP Script to find maximum number out of three
CO2 PO1,PO3,PO4,PO7,PSO1
given numbers.
Write PHP Script using two dimensional arrays such as
CO3 PO1,PO3,PO4,PO7,PSO1
addition of two 2x2 matrices.
13
Write PHP Script to demonstrate use of associative
CO3 PO1,PO3,PO4,PO7,PSO1
arrays and for FOR EACH loop execution.

14 Write PHP script Using user defined function CO3 PO1,PO3,PO4,PO7,PSO1

 Write PHP script to demonstrate use of string function. CO3 PO1,PO3,PO4,PO7,PSO1

Write PHP script to demonstrate use of date/time

15 CO3 PO1,PO3,PO4,PO7,PSO1
functions and Math functions.

Create form using text box, check box, radio button, PO1,PO2,
CO4
select, submit button. And display user inserted value in PO3,PO4,PO5,PO7,PSO1
16
new PHP page (e.g. student PO1,PO2,
registration/inventory/library form). CO4
PO3,PO4,PO5,PO7,PSO1
Write two different PHP script to demonstrate passing PO1,PO2,
CO4
variables through a URL PO3,PO4,PO5,PO7,PSO1
17
Write two different PHP script to demonstrate passing PO1,PO2,
CO4
variables through Hidden Variables. PO3,PO4,PO5,PO7,PSO1
Write two different PHP script to demonstrate passing PO1,PO2,
CO4
variables with sessions PO3,PO4,PO5,PO7,PSO1
Write PHP script to demonstrate passing variables with PO1,PO2,
18 CO4
cookies PO3,PO4,PO5,PO7,PSO1
Write a program to keep track of how many times a PO1,PO2,
CO4
visitor has loaded the page. PO3,PO4,PO5,PO7,PSO1
Write a Program to upload image with extension gif or PO1,PO2,
CO4
jpeg. PO3,PO4,PO5,PO7,PSO1
Write a PHP script to create watermarks using PO1,PO2,
19 CO4
Imagecopymerge. PO3,PO4,PO5,PO7,PSO1
PO1,PO2,
Write a PHP script to convert images to grayscale. CO4
PO3,PO4,PO5,PO7,PSO1
Write a PHP script to connect MYSQL server from your PO1,PO2,
CO5
web application. PO3,PO4,PO5,PO7,PSO1
20
PO1,PO2,
Write a PHP script to create and drop database. CO5
PO3,PO4,PO5,PO7,PSO1
PO1,PO2,
Create database using phpMyAdmin. Write a program CO5
PO3,PO4,PO5,PO7,PSO1
21 to read input data, from table and display all these
information in tabular form on output screen. PO1,PO2,
CO5
PO3,PO4,PO5,PO7,PSO1
Write a program to manipulate data from table and PO1,PO2,
22 CO5
display all this information using table format. PO3,PO4,PO5,PO7,PSO1
Develop small PHP application(s) using forms and PO1,PO2,
23 CO5
database PO3,PO4,PO5,PO7,PSO1
Lab Evaluation Rubrics:
Lab Performance (LP) Rubrics
Criteria Excellent (4) Good (3) Substandard (2) Poor (1)
Lab * Student * Student needs * Student performs * Student cannot
Performance Performs some help from of the experiments complete
(LP) experiment as per faculty to with the help from experiment.
the instructions perform the faculty. * Student has not
given without experiments as * Student has no understanding of lab
any help from per the clear understanding objectives and
faculty. instruction of lab objectives concepts.
* Student * Student has and concepts. * Student cannot
demonstrates an sufficient * Student cannot explain concepts to
accurate understanding of explain concepts to fellow classmates.
understanding of lab objectives and fellow classmates.
the lab objectives concepts.
and concepts. * Student can
* Student can understand
explain concepts concepts by
to fellow himself but
classmates. cannot explain it
to fellow
classmates.

Lab Assignment(Report) Rubrics (LA)

Criteria Excellent (4) Good (3) Substandard (2) Poor (1)
Lab * Student * Student has a * Student has * Student turns in
Assignment demonstrates an basic knowledge problems with both lab report late or
accurate of content, but the graphs and the the report is so
understanding of may lack some answers. incomplete and/or
the lab objectives understanding of * Student appears to so inaccurate.
and concepts. some concepts. have not fully * Programs are not
* Student answers * Student grasped the lab complete.
questions answers content and the
completely and questions fairly Programs possess
correctly. well. some errors.
* Programs are * Programs
written neatly, could have be
has no error. written more
neatly.
* Programs has
no errors or
errors are
minimal
 Index
Lab Page PA
Topics Date Staff Sign
No. No LA LP
Write HTML codes for displaying image
1
and demonstrate hyper linking.
Write HTML codes to attach video on
2
webpage using embed tag in html
Create A Feedback Form Using Form
handling.
3
Create a contact form using form handling.
Write a code for creating static page design
4
using division tag
Write a code for design menu system using
5
list tag
6 Design Google Page using HTML5

7 Apply CSS formatting to created pages and

explore it fully, also use readymade css
8 templates.
Write a PHP script to display Welcome
9
message.
Write a PHP script to demonstrate use of
arithmetic operators, comparison operators,
10
and logical operators.
Write a PHP script to get type of variable
using gettype()
Write a PHP script to set type of variable
11
using settype()
Write a PHP script to set type of variable
using type casting
Write PHP Script to print Fibonacci series.
Write PHP Script to calculate total marks of
12 sudent and display grade.
Write PHP Script to find maximum number
out of three given numbers.

Write PHP Script using two dimensional

13
arrays such as addition of two 2x2 matrices.

Write PHP Script to demonstrate use of

14 associative arrays and for FOR EACH loop
execution.
Write PHP script Using user defined
function.
15
Write PHP script to demonstrate use of
string function.
Write PHP script to demonstrate use of
16
date/time functions and Math functions.
 Create form using text box, check box,
17
radio button, select, submit button. And
display user inserted value in new PHP
page (e.g. student registration/ inventory/
18
library form).
Write two different PHP script to
demonstrate passing variables through a
URL.
19
Write two different PHP script to
demonstrate passing variables through
Hidden Variables.
Write two different PHP script to
demonstrate passing variables with
sessions.
20 Write PHP script to demonstrate passing
variables with cookies.
Write a program to keep track of how many
times a visitor has loaded the page.
Write a Program to upload image with
extension gif or jpeg.
Write a PHP script to create watermarks
21
using Imagecopymerge.
Write a PHP script to convert images to
grayscale.
Write a PHP script to connect MYSQL
22
server from your web application.
Write a PHP script to create and drop
23
database.

24 Create database using phpMyAdmin. Write

a program to read input data, from table and
display all these information in tabular form
25 on output screen.
Write a program to manipulate data from
26 table and display all this information using
table format.
27 Develop small PHP application(s) using
28 forms and database.
 Page|

PRACTICAL: 1

AIM: Write HTML codes for displaying image and demonstrate hyperlinking.

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 2
AIM: Write HTML codes to attach video on webpage using embed tagin html.

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 3
AIM: Create A Feedback Form Using Form handling.

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 4
AIM: Create a contact form using form handling.

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 5
AIM: Write a code for creating static page design using division tag

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 6
AIM: Write a code for design menu system using list tag.

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 7
AIM: Design Google Page using HTML5.

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 8
AIM: Apply CSS formatting to created pages and explore it fully, also use
readymade css templates.

HTML Code:

<h3>Name: Akshay Shiyani</h3>

<h3>Enroll: 206270307010</h3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Government Polytechnic, Porbandar

 Page|
<meta name="description" content="Omnifood is a premium food delivery service with
the mission to bring affordable and healthy meals to as many people as possible.">

<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.css">

<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">

<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/quaries.css">

<title>Omnifood</title>

<link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-

touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-
32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-
16x16.png">
<link rel="manifest" href="/resources/favicons/site.webmanifest">
<link rel="mask-icon" href="/resources/favicons/safari-pinned-tab.svg"
color="#000000">
<link rel="shortcut icon" href="/resources/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

</head>

<body>
<header class="hero">
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood Logo"
class="logo">
<ul class="main-nav">
<li><a href="#features">Food delivery</a></li>
<li><a href="#works">How it works</a></li>
<li><a href="#cities">Our cities</a></li>
<li><a href="#plans">Sign up</a></li>
</ul>

</div>
</nav>
Government Polytechnic, Porbandar
 Page|
<div class="hero-text-box">
<h1>Goodbye to Junk Food.<br>Hello Super Healthy Meals.</h1>
<a class="btn btn-full" href="#">I'm Hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>

<section class="section-features" id="features">

<div class="row">
<h2>GET FOOD FAST &mdash; NOT FAST FOOD</h2>
<p class="long-copy">
Hello, we're Omnifood, your new premium food delivery service. A We
know you're always busy. No time for cooking. So let us take care of that, we're really
good at it, we promise!
</p>
</div>

<div class="row">
<div class="col span-1-of-4 box">
<p class="ion-ios-infinite-outline icon-big"></p>
<h3>UP TO 365 DAYS/YEAR</h3>
<p>Never cook again! We really mean that. Our subscription plans
include up to 365 days/year coverage. You can also choose to order more flexibly if that's
your style.</p>
</div>
<div class="col span-1-of-4 box">
<p class="ion-ios-stopwatch-outline icon-big"></p>
<h3>READY IN 20 MINUTES</h3>
<p>You're only twenty minutes away from your delicious and super
healthy meals delivered right to your home. We work with the best chefs in each town to
ensure that you're 100% happy.</p>
</div>
<div class="col span-1-of-4 box">
<p class="ion-ios-nutrition-outline icon-big"></p>
<h3>100% ORGANIC</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised
without added hormones or antibiotics. Good for your health, the environment, and it also
tastes better!</p>
</div>
<div class="col span-1-of-4 box">
<p class="ion-ios-cart-outline icon-big"></p>
<h3>ORDER ANYTHING</h3>
<p>We don't limit your creativity, which means you can order whatever
you feel like. You can also choose from our menu containing over 100 delicious meals. It's
up to you!</p>
</div>
</div>
</section>

<section class="section-meals">
Government Polytechnic, Porbandar
 Page|
<h2 style="display: none">Meals</h2>
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bibimbap with egg and
vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Simple italian pizza with
cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Chicken breast steak with
vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="resources/img/5.jpg" alt="Paleo beef steak with
vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/6.jpg" alt="Healthy baguette with egg and
vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/7.jpg" alt="Burger with cheddar and
bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/8.jpg" alt="Granola with cherries and
strawberries">
</figure>
Government Polytechnic, Porbandar
 Page|
</li>
</ul>
</section>

<section class="section-steps" id="works">

<div class="row">
<h2>How it works &mdash; Simple as 1, 2, 3</h2>
</div>

<div class="row">
<div class="col span-1-of-2 step-box">
<img src="resources/img/app-iPhone.png" alt="Omnifood app on iPhone"
class="app-screen">
</div>

<div class="col span-1-of-2 step-box">

<div class="works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign
up today.</p>
</div>
<div class="works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or
you can even call us!</p>
</div>
<div class="works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next
time!</p>
</div>

<a href="#" class="btn-app"><img src="resources/img/download-app.svg"

alt="downaload app icon"></a>
<a href="#" class="btn-app"><img src="resources/img/download-app-
android.png" alt="download app Antdoid icon"></a>
</div>
</div>
</section>

<section class="section-cities" id="cities">

<div class="row">
<h2>We're currently in these cities</h2>
</div>

<div class="row">
<div class="col span-1-of-4 box">
<img src="resources/img/lisbon-3.jpg" alt="Lisbon photo">
<h3>Lisbon</h3>
<div class="city-features">
Government Polytechnic, Porbandar
 Page|
<i class="ion-android-person icon-small"></i>
<p>1600+ happy eaters</p>
</div>
<div class="city-features">
<i class="ion-android-star icon-small"></i>
<p>60+ top chefs</p>
</div>
<div class="city-features">
<i class="ion-social-twitter icon-small"></i>
<a href="#">@omnifood_lx</a>
</div>
</div>

<div class="col span-1-of-4 box">

<img src="resources/img/san-francisco.jpg" alt="San Francisco photo">
<h3>San Francisco</h3>
<div class="city-features">
<i class="ion-android-person icon-small"></i>
<p>3700+ happy eaters</p>
</div>
<div class="city-features">
<i class="ion-android-star icon-small"></i>
<p>160+ top chefs</p>
</div>
<div class="city-features">
<i class="ion-social-twitter icon-small"></i>
<a href="#">@omnifood_sf</a>
</div>
</div>

<div class="col span-1-of-4 box">

<img src="resources/img/berlin.jpg" alt="Berlin photo">
<h3>Berlin</h3>
<div class="city-features">
<i class="ion-android-person icon-small"></i>
<p>2300+ happy eaters</p>
</div>
<div class="city-features">
<i class="ion-android-star icon-small"></i>
<p>110+ top chefs</p>
</div>
<div class="city-features">
<i class="ion-social-twitter icon-small"></i>
<a href="#">@omnifood_berlin</a>
</div>
</div>

<div class="col span-1-of-4 box">

<img src="resources/img/london.jpg" alt="London photo">
<h3>London</h3>
Government Polytechnic, Porbandar
 Page|
<div class="city-features">
<i class="ion-android-person icon-small"></i>
<p>1200+ happy eaters</p>
</div>
<div class="city-features">
<i class="ion-android-star icon-small"></i>
<p>50+ top chefs</p>
</div>
<div class="city-features">
<i class="ion-social-twitter icon-small"></i>
<a href="#">@omnifood_london</a>
</div>
</div>
</div>
</section>

<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>

<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves
me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I
couldn't live without my daily meals!
<cite><img src="resources/img/customer-1.jpg" alt="customer-1
photo">Alberto Duncan</cite>
</blockquote>

</div>

<div class="col span-1-of-3">

<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to
my home. We have lots of food delivery here in Lisbon, but no one comes even close to
Omifood. Me and my family are so in love!
<cite><img src="resources/img/customer-2.jpg" alt="customer-2
photo">Joana Silva</cite>
</blockquote>

</div>

<div class="col span-1-of-3">

<blockquote>
I was looking for a quick and easy food delivery service in San
Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in
the Bay Area. Keep up the great work!

Government Polytechnic, Porbandar

 Page|
<cite><img src="resources/img/customer-3.jpg" alt="customer-3
photo">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>

<section class="section-plans" id="plans">

<div class="row">
<h2>Start eating healthy today</h2>
</div>

<div class="row">
<div class="col span-1-of-3">
<div class="plan-box">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span></p>
<p class="plan-price-meal">That’s only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1
meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-
small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-
small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free
delivery</li>
</ul>
</div>
<div>
<a class="btn btn-full" href="#">Sign up now</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span></p>
<p class="plan-price-meal">That’s only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1
meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-
small"></i>Order 24/7</li>
Government Polytechnic, Porbandar
 Page|
<li><i class="ion-ios-checkmark-empty icon-
small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free
delivery</li>
</ul>
</div>
<div>
<a class="btn btn-ghost" href="#">Sign up now</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box">
<div>
<h3>Starter</h3>
<p class="plan-price">$19 <span>/ meal</span></p>
<p class="plan-price-meal">&nbsp;</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1
meal</li>
<li><i class="ion-ios-checkmark-empty icon-
small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-
small"></i>&nbsp;</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free
delivery</li>
</ul>
</div>
<div>
<a class="btn btn-ghost" href="#">Sign up now</a>
</div>
</div>
</div>
</div>
</section>

<section class="section-form">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>

<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
Government Polytechnic, Porbandar
 Page|
<input type="text" name="name" id="name" placeholder="Your
Name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your
eMail" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friend" selected>Friend</option>
<option value="search">Search Engine</option>
<option value="advetrisement">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="newsletter" id="newsletter"> Yes
please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="message">Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" id="message" placeholder="Your
Message"></textarea>
</div>
</div>

<div class="row">
<div class="col span-1-of-3">
&nbsp;
</div>
<div class="col span-2-of-3">
Government Polytechnic, Porbandar
 Page|
<input type="submit" value="send it">
</div>
</div>
</form>
</div>
</section>

<footer class="section-footer">
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">iOS App</a></li>
<li><a href="#">Android App</a></li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-links">
<li><a href="#"><i class="ion-social-facebook"></i></a></li>
<li><a href="#"><i class="ion-social-twitter"></i></a></li>
<li><a href="#"><i class="ion-social-googleplus"></i></a></li>
<li><a href="#"><i class="ion-social-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<p>
Copyright &copy; 2015 by Omnifood. All rights reserved.
</p>
</div>
</footer>
</body>
</html>

CSS Code:

/* Name : Akshay Shiyani */

/* Enrollment : 206270307010 </h3> */
* {
margin: 0;

Government Polytechnic, Porbandar

 Page|
padding: 0;
box-sizing: border-box;
}

html,
body {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}

.clearfix {zoom: 1}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}

.row {
max-width: 1140px;
margin: 0 auto;
}

section {
padding: 80px 0;
}

.box {
padding: 1%;
}

h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}

h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
Government Polytechnic, Porbandar
 Page|
font-size: 240%;
word-spacing: 4px;
letter-spacing: 1px;
}

h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}

h3 {
font-size: 110%;
margin-bottom: 15px;
}

h2:after {
display: block;
height: 2px;
background-color: #e67622;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}

.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}

.box p{
font-size: 90%;
line-height: 145%;
}

/* ------- ICONS ------ */

.icon-big {
font-size: 350%;
display: 145%;
color: #e67e22;
margin-bottom: 10px;
}

.icon-small {
Government Polytechnic, Porbandar
 Page|
display: inline-block;
width: 30px;
text-align: center;
color: #e67e22;
font-size: 120%;
margin-right: 10px;

/*secrets to align text and icons*/

line-height: 120%;
vertical-align: middle;
margin-top: -4px;
}

a:link,
a:visited {
color: #e67e22;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #e67e22;
transform: border-bottom 0.2s, color 0.2s;
}

a:hover,
a:active {
color: #555;
border-bottom: 1px solid transparent;
}

.btn:link,
.btn:visited,
input[type=submit] {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.btn-full:link,
.btn-full:visited,
input[type=submit] {
background-color: #e67e22;
border: 1px solid #e67e27;
color: #fff;
margin-right: 15px;
}

.btn-ghost:link,
Government Polytechnic, Porbandar
 Page|
.btn-ghost:visited {
border: 1px solid #e67e27;
color: #e67e27;
}

.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
background-color: #cf6d17;
}

.btn-full:hover,
.btn-full:active {
border: 1px solid #e67e27;
}

.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #e67e27;
color: #fff;
}

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url(img/hero-min.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}

.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}

.logo-black {
display: none;
Government Polytechnic, Porbandar
 Page|
height: 50px;
width: auto;
float: left;
margin: 5px 0;
}

.main-nav {
float: right;
list-style: none;
margin-top: 55px;
}

.main-nav li {
display: inline-block;
margin-left: 40px;
}

.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67622;
}

.mobile-nav-icon i{
font-size: 200%;
color: #fff;
}

/* Mobile navi */
.mobile-nav-icon{
float: right;
margin-top: 30px;
cursor: pointer;
display: none;
}

.sticky {
position: fixed;
Government Polytechnic, Porbandar
 Page|
top: 0;
left: 0;
width: 100%;
background-color: rgb(255, 255, 255, 0.98);
box-shadow: 0 2px 2px #efefef;
z-index: 9999;
}

.sticky .main-nav { margin-top: 18px; }

.sticky .main-nav li a:link,

.sticky .main-nav li a:visited {
padding: 16px 0;
color: #555;
}

.sticky .logo { display: none; }

.sticky .logo-black { display: block; }

/* ------------------------------------ */
/* FEATURES */
/* ------------------------------------ */

.section-features .long-copy {
margin-bottom: 30px;
}

.section-meals {
padding: 0;
}

.meals-showcase {
list-style: none;
width: 100%;
}

.meals-showcase li {
display: block;
float: left;
width: 25%;
}

.meal-photo {
width: 100%;
margin: 0;
overflow: hidden;
background-color: #000;
Government Polytechnic, Porbandar
 Page|
}

.meal-photo img {
opacity: 0.7;
width: 100%;
height: auto;
transform: scale(1.15);
transition: transform 0.5s opacity 0.5s;
}

.meal-photo img:hover {
opacity: 1;
transform: scale(1.03);
}

.section-steps {
background-color: #f4f4f4;
}

.steps-box:first-child {
text-align: right;
padding-right: 3%;
margin-top: 30px;
}

.steps-box:last-child {
padding-left: 3%;
margin-top: 70px;
}

.app-screen {
width: 20%;
}

.works-step {
margin-bottom: 50px;
}

.works-step:last-of-type {
margin-bottom: 80px;
}

.works-step div {
color: #e67e22;
border: 2px solid #e67e22;
display: inline-block;
border-radius: 50%;
height: 55px;
width: 55px;
text-align: center;
Government Polytechnic, Porbandar
 Page|
padding: 5px;
float: left;
font-size: 150%;
margin-right: 25px;
}

.btn-app:link,
.btn-app:visited {
border: 0;
}

.btn-app img {
height: 50px;
width: auto;
margin-right: 10px;
}

.box img {
width: 100%;
height: auto;
margin-bottom: 15px;
}

.city-feature {
margin-bottom: 5px;
}

.section-testimonials {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url(img/back-customers-min.jpg);
background-size: cover;
color: #fff;
background-attachment: fixed;
}

blockquote {
padding: 2%;
font-style: italic;
line-height: 145%;
position: relative;
}

cite {
font-size: 90%;
margin-top: 25px;
display: block;
margin-top: 40px;
}

Government Polytechnic, Porbandar

 Page|
blockquote:before {
content: "\201C";
font-size: 500%;
display: block;
position: absolute;
top: -5px;
left: -5px;
}

cite img {
height: 45px;
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
}

.section-plans {
background-color: #f4f4f4;
}

.plan-box {
background-color: #fff;
border-radius: 5px;
width: 90%;
margin-left: 5%;
box-shadow: 0 2px 2px #efefef;
}

.plan-box div {
padding: 15px;
border-bottom: 1px solid #e8e8e8;
}

.plan-box div:first-child {
background-color: #fcfcfc;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.plan-box div:last-child {
text-align: center;
border: 0;
}

.plan-price {
font-size: 300%;
margin-bottom: 10px;
font-weight: 100;
color: #e67e22;
}
Government Polytechnic, Porbandar
 Page|

.plan-price span {
font-size: 30%;
font-weight: 300;
}

.plan-price-me {
font-size: 80%;
}

.plan-box ul {
list-style: none;
}

.plan-box ul li {
padding: 5px 0;
}

.contact-form {
width: 90%;
margin: 0 auto;
}

input[type=text],
input[type=email],
select,
textarea {
width: 100%;
padding: 7px;
border-radius: 3px;
border: 1px solid #ccc;
}

textarea: {
height: 100px;
}

input[type=checkbox] {
margin: 10px 5px 10px 0;
}

*:focus {outline: none;}

.map-box {
width: 100%;
height: 560px;
position: relative;
}

Government Polytechnic, Porbandar

 Page|
.map {
width: 100%;
height: 560px;
position: relative;
z-index: 0;
}

.form-box {
position: absolute;
width: 50%;
top: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index: 10;
height: 500px;
padding-top: 40px;
}

footer {
background-color: #333;
padding: 50px;
font-size: 80%;
}

.footer-nav {
list-style: none;
float: left;
}

.social-links {
list-style: none;
float: right;
}

.footer-nav li,
.social-links li {
display: inline-block;
margin-right: 20px;
}

.footer-nav li:last-child,
.social-links li:last-child {
margin-right: 0;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
Government Polytechnic, Porbandar
 Page|
text-decoration: none;
border: 0;
color: #888;
transition: color 0.2s;
}

.footer-nav li a:hover,
.footer-nav li a:active {
color: #ddd;
}

.social-links li a:link,
.social-links li a:visited {
font-size: 160%;
}

.ion-social-facebook,
.ion-social-twitter,
.ion-social-gogleplus,
.ion-social-instagram {
transition: color 0.2s;
}

.ion-social-facebook:hover {
color: #3b5998;
}

.ion-social-twitter:hover {
color: #55acee;
}

.ion-social-googleplus:hover {
color: #dd4b39;
}

.ion-social-instagram:hover {
color: #bc2a8d;
}

footer p {
color: #888;
text-align: center;
margin-top: 20px;
}

.js--wp-1,
.js--wp-2,
.js--wp-3
{
opacity: 0;
Government Polytechnic, Porbandar
 Page|
-webkit-animation-duration: 1s;
animation-duration: 1s;
}

.js--wp-4 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}

.js--wp-1.animated,
.js--wp-2.animated,
.js--wp-3.animated
{
opacity: 1;
}

Government Polytechnic, Porbandar

 Page|
PRACTICAL: 9
AIM: 9.1 Write a PHP script to display Welcome message.

<?php
echo "Akshay Shiyani <br> 206270307010<br>";
echo " Hello World <br> Welcome to PHP";
?>

Government Polytechnic, Porbandar

 Page|
9.2 Write a PHP script to demonstrate use of arithmetic
operators, comparison operators and logical operators.
<h3>Name: Akshay Shiyani</h3>
<h3>Enroll: 206270307010</h3>
<?php
echo "WELCOME <br>";

$a = 42;
$b = 20;

echo "Arithmetic operators<br><br>";

$c = $a + $b;
echo "Addtion Operation Result: $c <br/>";

$c = $a - $b;
echo "Substraction Operation Result: $c <br/>";

$c = $a * $b;
echo "Multiplication Operation Result: $c <br/>";

$c = $a / $b;
echo "Division Operation Result: $c <br/>";

$c = $a % $b;
echo "Modulus Operation Result: $c <br/>";

$c = $a++;
echo "Increment Operation Result: $c <br/>";

$c = $a--;
echo "Decrement Operation Result: $c <br/><br>";

echo "Comparison operators<br><br>";

if( $a == $b ) {
echo "TEST1 : a is equal to b<br/>";
}else {
echo "TEST1 : a is not equal to b<br/>";
}

if( $a > $b ) {
echo "TEST2 : a is greater than b<br/>";
}else {
echo "TEST2 : a is not greater than b<br/>";
}

if( $a < $b ) {
echo "TEST3 : a is less than b<br/>";
}else {
echo "TEST3 : a is not less than b<br/>";
}

if( $a != $b ) {
echo "TEST4 : a is not equal to b<br/>";
}else {
Government Polytechnic, Porbandar
 Page|
echo "TEST4 : a is equal to b<br/>";
}

if( $a >= $b ) {
echo "TEST5 : a is either greater than or equal to b<br/>";
}else {
echo "TEST5 : a is neither greater than nor equal to b<br/>";
}

if( $a <= $b ) {
echo "TEST6 : a is either less than or equal to b<br/>";
}else {
echo "TEST6 : a is neither less than nor equal to b<br/><br>";
}

echo "Logical operators<br><br>";

if( $a && $b ) {
echo "TEST1 : Both a and b are true<br/>";
}else{
echo "TEST1 : Either a or b is false<br/>";
}

if( $a || $b ) {
echo "TEST3 : Either a or b is true<br/>";
}else{
echo "TEST3 : Both a and b are false<br/>";
}

if( !$a ) {
echo "TEST7 : a is true <br/>";
}else {
echo "TEST7 : a is false<br/>";
}

if( !$b ) {
echo "TEST8 : b is true <br/>";
}else {
echo "TEST8 : b is false<br/>";
}
?>

Government Polytechnic, Porbandar

 Page|

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 10
AIM: 10.1 Write a PHP script to get type of variable using gettype().
10.2 Write a PHP script to set type of variable using settype().

<h3>Name: Akshay Shiyani</h3>

<h3>Enroll: 206270307010</h3>

<?php
$a = "hello world";
echo gettype($a) . "<br>";

$b = 1;
echo gettype($b) . "<br>";

settype($b,"string");
echo gettype($b) . "<br>";
?>

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 11
AIM: Write a PHP script to set type of variable using type casting.

<h3>Name: Akshay Shiyani</h3>

<h3>Enroll: 206270307010</h3>

<?php
$a = 10;
echo "before changing the type<br>";
echo gettype($a) . "<br>";
$b = (string)$a;
echo "after changing the type<br>";
echo gettype($b) . "<br>";
?>

Government Polytechnic, Porbandar

 Page|

PRACTICAL: 12
AIM: 12.1Write PHP Script to print Fibonacci series.

<h3>Name: Akshay Shiyani</h3>

<h3>Enroll: 206270307010</h3>

<?php
$a=0;
$b=1;
$num=0;

echo $a. ' ';

echo $b;
while($num!=8)
{
$next = $a + $b;
echo ' '.$next;
$a=$b;
$b=$next;
$num++;
}
?>

Government Polytechnic, Porbandar

 Page|

12.2 Write PHP Script to calculate total marks of student and display grade.

<h3>Name: Akshay Shiyani</h3>

<h3>Enroll: 206270307010</h3>

<?php
$name = "Akshay";
$sub1 = 99;
$sub2 = 89;
$sub3 = 90;
$tot = $sub1 + $sub2 + $sub3;
$average = $tot / 3;

if($average >= 90){

echo "A Grade". "<br>";
}

else if($average >= 80 && $average < 90){

echo "B Grade". "<br>";
}

else if($average >= 70 && $average < 80){

echo "C Grade". "<br>";
}

else{
echo "Fail";
}
?>

Government Polytechnic, Porbandar

 Page|

12.3 Write PHP Script to find maximum number out of three given numbers.

<h3>Name: Akshay Shiyani</h3>

<h3>Enroll: 206270307010</h3>

<?php
$num1=20;
$num2=15;
$num3=22;
if($num1>$num2 && $num1>$num3){
echo "num 1 is greatest";
}
else{
if($num2>$num1 && $num2>$num3){
echo "num2 is greatest";
}
else
echo "num3 is greatest";
}
?>

Government Polytechnic, Porbandar

 PRACTICAL: 13
AIM: 13.1 Write PHP Script using two dimensional arrays such as addition of two
2x2 matrices.
 13.2 Write PHP Script to demonstrate use of associative arrays and for FOR
EACH loop execution.

<h3>Name: Akshay Shiyani</h3>

<h3>Enroll: 206270307010</h3>

<?php
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");

foreach($age as $x => $x_value) {

echo "Key=" . $x . ", Value=" . $x_value;
echo "<br>";
}
?>
 PRACTICAL: 14
AIM: 14.1 Write PHP script Using user defined function.
14.2 Write PHP script to demonstrate use of string function.
 PRACTICAL: 15
AIM: Write PHP script to demonstrate use of date/time functions and Math
functions.
<h3>Name: Akshay Shiyani</h3>
<h3>Enroll: 206270307010</h3>

<?php
echo "Using date(): ".date("d/M/y")."<br>";
echo "Using time(): ".date("d/m/y",time())."<br>";
echo "Using mktime(): ".date("d/m/y",mktime(0,0,0,20,7,2018));
?>
<h3>Name: Akshay Shiyani</h3>
<h3>Enroll: 206270307010</h3>
<?php
$n1=100;
$n2=5;
$n3=min($n1,$n2);
echo "Min is : $n3"."<br><br>";
$n1=max($n1,$n3);
echo "Max is : $n1"."<br><br>";
$n4=sqrt($n1);
echo "sqrt is : $n4"."<br><br>";
$n1=pow($n2,$n4);
echo "pow is : $n1"."<br><br>";
echo "ceil : ".ceil($n1)."<br><br>";
echo "floor : ".floor($n2)."<br><br>";
echo "round : ".round($n3.$n1)."<br><br>";
echo "abs : ".abs($n4);

?>
 PRACTICAL: 16
AIM: Create form using text box, check box, radio button, select, submit button.
And display user inserted value in new PHP page (e.g. student registration/
inventory/ library form).
<h3>Name: Akshay Shiyani</h3>
<h3>Enroll: 206270307010</h3>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pass variable URL</title>
<style>
.form-input {
margin: 10px 0;
}
</style>
</head>

<body>
<form action="result.php" method="get">
<div class="form-input">
<input type="text" name="name" placeholder="Enter full name">
</div>

<div class="form-input">
<input type="number" name="age" min="10" placeholder="Enter age">
</div>

<div class="form-input">
<button type="submit">Submit</button>
</div>
</form>
</body>

</html>

<h3>Name: Akshay Shiyani</h3>

<h3>Enroll: 206270307010</h3>
<?php
echo "Name: ".$_POST['name'].'<br/>';
echo "Age: ".$_POST['age'].'<br/>';
?>