A

SEMINAR REPORT
ON
“Pizzahut-food delivery website”
SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT
FOR THE AWARD OF THE DEGREE OF
BACHELOR OF TECHNOLOGY
IN

Computer Science & Engineering

By

Sneha Popat Manepatil

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Padmabhooshan Vasantraodada Patil Institute of Technology,

Budhgaon, Sangli.
2022-23

Page 1 of 23
 CANDIDATE’S DECLARATION

This is to certify that work, which is being presented in the seminar

entitled “Pizzahut-food delivery website” submitted by student of SY B. Tech. in
Computer Science & Engineering under guidance of Mrs. M.S.Patil.

Date: Name & Signature of student

Place:

Page 2 of 23
 Dr. Vasantraodada Patil Shetkari Shikshan Mandal’s
Padmabhooshan Vasantraodada Patil Institute of Technology,
Budhgaon, Sangli.
(Approved by AICTE, New Delhi, Recognized by Govt. of Maharashtra and affiliated to DBATU)

CERTIFICATE

This is to certify that the work, which is being presented in the SEMINAR,
entitled “Pizzahut-food delivery website” under the guidance of Mrs M.S.Patil
submitted by Sneha Manepatil second year B.Tech (IV Sem) in Computer Science
&
Engineering in partial fulfillment of curriculum prescribed by. Dr. Babasaheb
Ambedkar Technological University, Lonere for award of degree of Bachelor of
Technology in Computer Science and Engineering.

Prof. B. S. Patil
Mrs. M.S Patil HOD
Seminar Subject Incharge Dept. of Computer Science and
Engineering

Dr. D. V. Ghewade
Principal,
PVPIT Budhgaon
External Examiner
Page 3 of 23
 ACKNOWLEDGEMENT

I hereby, thankfully anticipate all those who have been a great support to me
for accomplishing my walk and also expect to receive the same help and an
extended hand from them in the future also.
I gratefully thank all our teachers especially MRS. M.S.Patil who has helped us
immensely in gathering the material and efficient details of our report. Without
their support it would have been difficult for me to achieve success.

We Express our deep gratitude to. PROF. B. S. PATIL, Head of Computer

Science and Engineering Department, for his valuable guidance and constant
encouragement. We are very much thankful to Dr. D. V. GHEWADE, Principal,
Padmabhooshan Vasantraodada Patil Institute of Technology, Budhgaon, Sangli.
For providing all the necessary facilities to carry out project work.

Page 4 of 23
 ABSTRACT
The main purpose of the study is to understand the very basics of web designing and
knowing the components of a web page. It deals with the basic study of HTML (Hyper Text
markup Language), CSS (Cascade Style Sheets), and Javascripts.
In the latest trends Web Designing is the very rapidly developing field in present market
and has attracted many new developers.
The report covers DOM (Document Object Model) to use HTML and embedding CSS style
sheets to it. It also covers the usage of Javascripts for event handling and making the website
pages look more attractive. In the future, Web Designing will be playing a more vital role as
Internet is being used for marketing, banking, examining, almost everyt

Page 5 of 23
 CONTENTS

1.Introduction

1.1 What is Web Designing

1.2 Basic Principles
1.3Document Object Model

2.Technology Used

2.1 HTML
2.1.1 Structure and syntax
2.1.2 HTML Tags
2.2 CSS
2.2.1 Structure and syntax
2.2.2 CSS Usage and Properties
2.3 PHP
2.3.1 Structure and Syntax
2.3.2 Difference Between JavaScript and php
2.4 Javascript
2.4.1 structure and syntax
2.4.2 adding javascript to html page
3.Applications

4.Advantages and Disadvantages

5.Conclusion

6.Screen Shots

7.REFERENCE

Page 6 of 23
 1. Introduction
1.1What is Web Designing

Web design is a broad term covering many different skills and disciplines that are used
in the production and maintenance of websites. The different areas of web design include; web
graphic design, interface design, authoring; including standardised code and proprietary
software, user experience design and search engine optimization. Often many individuals will
work in teams covering different aspects of the design process, although some designers will
cover them all. The term web design is normally used to describe the design process relating to
the front-end (client side) design of a website including writing mark up, but this is a grey area as
this is also covered by web development. Web designers are expected to have an awareness of
usability and if their role involves creating mark up then they are also expected to be up to date
with web accessibility guidelines.

1.2Basic Principles
o Visitor-centric, clear purpose

o Progressive disclosure

o Displays quickly

o Browser compatible

o Intuitive navigation

o Spelling, grammar, writing

o Secure (eCommerce)

o Attractive design, easy to read

o Cultural bias? (Regional? Domestic? International?)

o No technical problems (broken links, buggy scripts)

o Maintainable (separate content from style)

o Search Engine Accessible

Page 7 of 23
 1.3 Document Object Model
The Document Object Model (DOM) is a cross-platform and language-independent
convention for representing and interacting with objects in HTML, XHTML and XML
documents. Objects in the DOM tree may be addressed and manipulated by using methods on the
objects. The public interface of a DOM is specified in its application programming interface
(API). The history of the Document Object Model is intertwined with the history of the "browser
wars" of the late 1990s between Netscape Navigator and Microsoft Internet Explorer, as well as
with that of JavaScript, the first scripting languages to be widely implemented in the layout
engines of web browsers. The DOM model can be seen below for an HTML document.

Fig 1.3 DOM in HTML document.

Page 8 of 23
2.1 HTML As shown in the above figure the HTML,CSS,
Creating Web Pages and javascripts form the basis of a web Page . So,
here we try to understand briefly about these

For creating Web Pages one need to know about technologies.

some tools and technologies to be used and they
are :-

● Markup Languages

o HTML, DHTML, XML, etc....

● Cascading Style Sheets (CSS)

● Scripting languages

o javascript, php, etc....

● Web creation and editing software

o Notepad, FrontPage, WebPage

Maker, Flash, Dreamweaver, Adobe

Photoshop, etc..

Fig 3. Web Page Creation.

Page 9 of 23
 HTML is a markup language which means it consists of markup tags which the browser
understands. HTML is Hyper Text Markup Language and is derived from SGML which is
Standard Generalized Markup Language. It is case Insensitive and it does not need any compiler.
It is directly understood by the browser and it displays the requested information by the user.
HTML documents are composed entirely of HTML elements that, in their most general form
have three components: a pair of tags, a "start tag" and "end tag"; some attributes within the start
tag; and finally, any textual and graphical content between the start and end tags, perhaps
including other nested elements. The HTML element is everything between and including the
start and end tags. Each tag is enclosed in angle brackets.

2.1.1.Structure and syntax

The structure of HTML can be understood by the following code which is also the syntax for
making HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> The title of your html page </title>
</head>
<body>
<! - - your web page content and markup - ->
</body>
</html>

An HTML 4 document is composed of three parts:

1. a line containing HTML version information,

2. a declarative header section (delimited by the HEAD element),
3. a body, which contains the document's actual content.

HTML version information

A valid HTML document declares what version of HTML is used in the document. The
document type declaration names the document type definition (DTD) in use for the document.
The document head
The HEAD element contains information about the current document, such as its title,
keywords that may be useful to search engines, and other data that is not considered document
Page 10 of 23
content. User agents do not generally render elements that appear in the HEAD as content. They
may, however, make information in the HEAD available to users through other mechanisms. The
head element also contains information about the external style sheets and javascript used in the
document.

The document body

The body of a document contains the document's content. The content may be presented
by a user agent in a variety of ways. For example, for visual browsers, you can think of the body
as a canvas where the content appears: text, images, colors, graphics, etc. For audio user agents,
the same content may be spoken. Since style sheets are now the preferred way to specify a
document's presentation, the presentational attributes of BODY have been deprecated.

2.1.2 HTML Tags

HTML consists of Tags which define the type and property for the document text to be used.
Some common HTML Tags are :-
<A> </A> Anchor element to set Hyper links.
<B> </B> Content is shown as bold type
<TITLE> </TITLE> Title of document.
<BODY> </BODY> The body part of the HTML document.
<BR> Force line break within paragraph.
<CENTER> </CENTER> Content is centered on page (can include paragraphs etc).
<DIV> </DIV> A dummy element which contains block-level elements. It is used with style
sheets.
<EM> </EM> Emphasis: text usually displayed in italics
<FONT> </FONT> Used to define characteristics of font, according to attributes e.g. SIZE,
COLOR, FACE. SIZE sets size, 1-7 e.g. SIZE="5". COLOR sets colour of text e.g. <FONT
COLOR="#FF0000"> makes text red. FACE e.g. FACE="Times".
<HEAD> </HEAD> The head part of the HTML document.
<H1> </H1> <H2> </H2>...<H6> </H6> Headings (levels 1-6, i.e. H3 is a subheading within a
H2 subheading).
<I> </I> Italics.
<IMG> Image. Attributes: must have SRC and ALT. SRC gives source file for image, e.g.
SRC="picture.jpg". ALT gives brief description e.g. ALT="Picture of UB"
<LI> </LI> List item. Used within an ordered (<OL>) or unordered (<UL>) list <OL> </OL>
Ordered list. Includes <LI> List Items, which will be numbered automatically
<P> </P> Paragraph
<SPAN> </SPAN> A dummy element which contains in-line content. It is used with style
sheets.

Page 11 of 23
<STRONG> </STRONG> Text is emphasised strongly - usually appears in bold.
<SUB> </SUB> Subscript
<SUP> </SUP> Superscript
<TABLE> </TABLE> Table.
<TD> </TD> Table data cell.
<TH> </TH> Table header cell.

Page 12 of 23
2.2 CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
semantics (the look and formatting) of a document written in a markup language. Its most
common application is to style web pages written in HTML and XHTML, but the language can
also be applied to any kind of XML document, including plain XML.CSS is designed primarily
to enable the separation of document content (written in HTML or a similar markup language)
from document presentation, including elements such as the layout, colors, and fonts. This
separation can improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple pages to share formatting, and
reduce complexity and repetition in the structural content (such as by allowing for table less web
design).

CSS can also allow the same markup page to be presented in different styles for different
rendering methods, such as on-screen, in print, by voice (when read out by a speech- based
browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the
web page to display differently depending on the screen size or device on which it is being
viewed. While the author of a document typically links that document to a CSS style sheet,
readers can use a different style sheet, perhaps one on their own computer, to override the one
the author has specified.

2.2.1 Structure and syntax

CSS has a simple syntax and uses a number of English keywords to specify the names of various
style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or
more selectors, and a declaration block. A declaration-block consists of a list of declarations in
braces. Each declaration itself consists of a property, a colon (:), and a value. If there are
multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.
Style sheet syntax is made up of three parts and can be shown as below:
selector {property: value}
selector = element.class
Example:

#label:hover
{ border-
color:blue;
Page 13 of 23
}

Here Label is the selector which is a id named label having property of border color to be blue.

CSS Usage and Properties

In CSS, selectors are used to declare which part of the markup a style applies to, a kind of match
expression. Selectors may apply to all elements of a specific type, to elements specified by
attribute, or to elements depending on how they are placed relative to, or nested within, others in
the document tree. Selector can be specified by:

 Id (#) :- Id is the uniquely defined named of the elements in the HTML. Example

<div id=”wrapper”></div>

 Class (.):- Class is the group of element that shares the same name and their

properties can be set at once. Example <div class=”main”></div>

 Html tags itself:- By writing the Html tag itself and specifying the properties and

assigning their values against them. Exapmle H1 color:blue

CSS can be implemented with the HTML content in three ways:-

 Inline:- When the properties and its values are define in the HTML document

itself.

 Internal:- When the Style properties are defined in the header using the style tags

 External:- These are separate files with .css extension which have the

stylingcodes that can be linked in the HTML document. The linking path is
defined in the header of the HTML document and the syntax for linking the CSS
file is <link href="path/to/file.css" rel="stylesheet">

Page 14 of 23
 2.3 PHP

PHP (or PHP Hypertext Preprocessor) is a server-side scripting language that is used to create
dynamic web pages that can interact with databases. It is a widely-used open source language that
is specifically used for web application development and can be embedded within HTML.
The distinguishing feature of PHP is that the scripting code is executed on the server, which
generates HTML that is sent back to the client. The client receives the result of executing the script
without knowing the underlying code. Developers can configure the web server to process all the
HTML files (containing the PHP script).

2.3.1Structure and Syntax

A PHP script can be placed anywhere in the document.

A PHP script starts with <?php and ends with ?>:

<?php
//PHP code goes here
?>

The default file extension for PHP files is ".php".

A PHP file normally contains HTML tags, and some PHP scripting code.

In PHP, keywords (e.g. if, else, while, echo, etc.), classes, functions, and user-defined functions
are not case-sensitive.

Page 15 of 23
2.3.2 Difference Between JavaScript and php

PHP is a server-side language and Javascript as client-side language as it was only executed in web
browsers. But after V8, Node and other frameworks came, Javascript is capable of doing a lot of
things Php used to. Since we can handle both front-end and back-end through Javascript now, It’s
considered as more powerful than PHP.

JavaScript: It is the most popular lightweight, interpreted compiled programming language. It is

also known as a scripting language for web pages. It is well-known for the development of web
pages, many non-browser environments also use it. JavaScript can be used for Client-side
developments as well as Server-side developments.

PHP: PHP is an acronym for Hypertext Preprocessor, which is a server-side scripting language
designed specifically for web development. PHP can be easily embedded in HTML files and HTML
codes can also be written in a PHP file. Like Javascript, PHP can also be written in HTML code and
in the .php file extension itself too. But it requires a server to run, so you won’t be able to see an
output of the code. in a simple manner.

Page 16 of 23
2.4 Javascript

what is javascript:

JavaScript (js) is a light-weight object-oriented programming language which is used by

several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML document.
It was introduced in the year 1995 for adding programs to the webpages in the Netscape
Navigator browser. Since then, it has been adopted by all other graphical web browsers. With
JavaScript, users can build modern web applications to interact directly without reloading the
page every time. The traditional website uses js to provide several forms of interactivity and
simplicity.

javacsript code:these is simple syntax code for javascript

<html>
3 <head>
4 <script type="text/javascript">
5 function msg(){
6 alert("Hello Javatpoint");
7 }
8 </script>
9 </head>
10 <body>
11 <p>Welcome to JavaScript</p>
12 <form>
13 <input type="button" value="click" onclick="msg()"/>
14 </form>
15 </body>
16 </html>

Page 17 of 23
Features of javascript:

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on
the operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using
classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

Add a javascript to HTML:

User can add javascript to html by following three ways:
i. Embedding code
ii. Inline code
iii. External file

I. Embedding code:-
To add the JavaScript code into the HTML pages, we can use the <script>.....</script> tag of the
HTML that wrap around JavaScript code inside the HTML program. Users can also define
JavaScript code in the <body> tag (or we can say body section) or <head> tag because it completely
depends on the structure of the web page that the users use.

Page 18 of 23
ii Inline code:-
Generally, this method is used when we have to call a function in the HTML event attributes. There
are many cases (or events) in which we have to add JavaScript code directly eg., OnMover
event, OnClick, etc.

Let's see with the help of an example, how we can add JavaScript directly in the html without using
the <script>.... </script> tag.

Iii External code:-

We can also create a separate file to hold the code of JavaScript with the (.js) extension and later
incorporate/include it into our HTML document using the src attribute of the <script> tag. It
becomes very helpful if we want to use the same code in multiple HTML documents. It also saves
us from the task of writing the same code over and over again and makes it easier to maintain web
pages

Page 19 of 23
4. ADVANTAGES AND DISADVANTAGES

4.1 ADVANTAGES

● Small Business Web Development Builds Credibility

● A Website Helps Establish Brand Identity

● Boost Brand Recognition with A Business Website

● Use A Website to Build Connections with Customers

● Small Business Web Development Drives Sales

● You Need a Website for Digital Marketing

● Small Business Web Development Updates Clients

● Websites Make Customer Service Easier

● Compete With Large Brands In Your Local Area

4.2 DISADVANTAGES

● A web app is directly linked to a web browser. Due to this, the app size tends to get

increased. The impact of this can be seen in the performance of a web application. A large
web app

performs considerably slower than a native desktop app.

● Web apps lacks the feature of quality control system. As a result, both safety and security is

Page 20 of 23
reduced to a higher level. However, by the methods such as SSL enforcement, the users can
prevent data breach to some extent.

Page 21 of 23
5. Conclusion

The best endeavor has been applied to design and develop this site with the help of tools pertaining
to it. The latest version of HTML 5.5, CSS 3, online tools for making menu bars, and photo
slide builder have been used in developing this site. In addition, a small data base has been
created to retrieve the stored data on the web page from the MySQL. The outlook has been
designed by following website of some foreign universities such as Oxford university etc

Page 22 of 23
6. Screen Shots

Page 23 of 23
Page 24 of 23
Page 25 of 23
Page 26 of 23
Page 27 of 23
7.References

1. Journal of web development 2016 By Dr G Komarasamy Published By mat Journals pvt. ltd.
2. PHP and MySQL web development 2017 by Addison Wesley Published by Welling and
Thomson
3. W3schools: mysqli function (https://www.w3schools.com/php/php_ref_mysqli.asp)
4. Javatpoint: Database Creation on XAMPP(https://www.javatpoint.com/creating-mysql-database-
with-xampp)
5. Concept of web programming Overview of PHP By E. Ogala and A. O. Sylvester 2019
6. Medium: MySQL for dummies (https://medium.com/swlh/mysql-for-dummies-a98871fbe99d)

Page 28 of 23
Page 29 of 23
Page 30 of 23
Page 31 of 23