Abstract:: Web Technologies Use

ITE1002 - Web Technologies – Digital Assignment – Fall 2019
Faculty In-charge: Dr. Divya Udayan J

Title: E-commerce for Cafe
Group Members Name and Reg No.:
Abhishek Kumar 18BIT0161
Spandan Pankaj Nahata 18BIT0111
Vedant Pople 18BIT0156
Gopu Upender 18BIT0154
Maheshwara Reddy 18BIT0132
Abstract :
E-commerce website allows your business to sell you’re offered products and services to your
online customers all over the world. These websites break the barrier of geographical location of
business and offers you a vast spectrum of audience and hence possibility of better overall sales.
An E-commerce site saves buyers’ time, makes prize comparisons simple, offers a variety of
things to purchase and also reduces the annoyance of fighting through crowded stores. This
facility which is combined with a quick payment, checkout, order tracking and quick shipping
process wins the heart of consumers. Hence because of a vast number of people at VIT and
restrictions on number of outings on the freshers we have decided to present this online
shopping website to help them save their monthly leaves and get orders at their doorsteps.
Web Technologies Use:

1] HTML
2] CSS
3] Java Script
Division of Modules in the form of HIPO CHART:

MODULE 1: Login
So the login feature gives us the option to login in the cafe website . Also the registration option
will help you to register for the cafe website if you are a first time visitor to the website. If you
forget your password or wish to change it or have forgotten it then it should be changed so it
gives an option to set a new password for your satisfaction.
MODULE 2:Products
The products page will brief you about the menu of our cafe and and different variations of our
products. Also we give the users an option to manipulate the ingredients that they can have on
their dish. We also give Combos and discounts on special occasions and bulk orders placed.
These combos are worth a watch and can be availed as per your wish.
MODULE 3: Services
The services that we offer are to dine at our place or you can take away parcels from our place
and just Netflix and chill it all upon you. The party orders have to be placed well in advance and
also the payment also should be done well before the event date. Any further queries related to
services can be done both online or through the call.
MODULE 4: Payment
The payments module includes payment through Credit cards, Debit cards, Cash on delivery
and E-wallets like Paytm and phonepe. The Payment will be added with taxes for home
deliveries.
CODES:
<html>
<head>
<title>Home</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-
EBFA-4E12-B309-BB3FDD723AC1/main.js" charset="UTF-8"></script><script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Permanent+Marker"
rel="stylesheet">
<script>
//search product function
$(document).ready(function(){
$("#search_text").keypress(function()
{
load_data();
function load_data(query)
{
$.ajax({ url:"fetch2.
php",
method:"post",
data:{query:query},
success:function(da
ta)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
$('#result').html(data);
}
});
});
});
//hotel search
$(document).ready(function(){
$("#search_hotel").keypress(function()
{
load_data();
function load_data(query)
{
$.ajax({ url:"fetch.php
", method:"post",
data:{query:query},
success:function(data)
{
$('#resulthotel').html(data);
}
});
}$('#search_hotel').keyup(function(){ var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
});
</script>
<style>
//body{
background-image:url("img/main_spice2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ul li {list-style:none;}
ul li a{color:black; font-weight:bold;}
ul li a:hover{text-decoration:none;}
</style>
</head>
<body>
<div id="result" style="position:fixed;top:300; right:500;z-index:

3000;width:350px;background:white;"></div>
<div id="resulthotel" style=" margin:0px auto; position:fixed; top:150px;right:750px;
background:white; z-index: 3000;"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="index.php"><span style="color:green;font-family:
'Permanent Marker', cursive;">Ginger Plates</span></a>
<a class="navbar-brand" style="color:black; text-decoratio:none;"><i class="far fa-
user"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link"><form method="post"><input type="text"
name="search_hotel" id="search_hotel" placeholder="Search Hotels " class="form-control "
/></form></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><form method="post"><input type="text"
name="search_text" id="search_text" placeholder="Search by Food Name " class="form-
control " /></form></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="index.php">Home
</a>
</li>
<a class="nav-link" href="aboutus.php">About</a>
</li>
<a class="nav-link" href="services.php">Services</a>
</li>
<a class="nav-link" href="contact.php">Contact</a>
</li>
<form method="post">
<a href="form/cart.php"><span style=" color:green; font-size:30px;"><i class="fa fa-
shopping-cart" aria-hidden="true"><span style="color:green;" id="cart" class="badge
badge-light">0</span></i></span></a>
<button class="btn btn-outline-success my-2 my-sm-0" name="logout" type="submit">Log
Out</button>
</form>
</li>
</ul>
</div>
</nav>

<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/coffee_foam_beverage_cup_saucer_creative_continents_84944_1920x1080
(1).jpg" alt="Los Angeles" class="d-block w-100">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="img/coffee_cup_saucer_grains_foam_73571_1920x1080.jpg" alt="Chicago"
class="d-block w-100">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="img/coffee_foam_beverage_cup_saucer_creative_continents_84944_1920x1080
(1).jpg" alt="New York" class="d-block w-100">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>


<br><br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<img src="img/istockphoto-516324258-612x612.jpg" height="300px" width="100%">
</div>
<div class="container">
<p style="font-family: 'Lobster', cursive; font-weight:light; font-size:25px;">Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.</p>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid rounded" style="border:solid 1px #F0F0F0;">
<div class="row" style="padding:10px; ">
<div class="col-sm-2"><img src="image/restaurant/vendor1@gmail.com/46388969.jpg"
class="rounded-circle" height="50px" width="50px" alt="Cinque Terre"></div>
<a href="search.php?vendor_id=22"><span style="font-family: 'Miriam Libre', sans-serif;
font-size:28px;color:#CB202D;">
Andhra Spice</span></a>
</div>
<div class="col-sm-3"><i style="font-size:20px;" class="fas fa-rupee-
sign"></i> <span style="color:green; font-size:25px;">100</span></div>
<div class="col-sm-2" style="text-align:left;padding:10px; font-size:25px;"><button
type="submit" name="addtocart" value="4")" ><span style="color:green;" <i class="fa fa-
shopping-cart" aria-hidden="true"></i></span></button></div>
<form>
</div>
</div>
<div class="row" style="padding:10px;padding-top:0px;padding-right:0px; padding-
left:0px;">
<div class="col-sm-12"><img
src="image/restaurant/vendor1@gmail.com/foodimages/maxresdefault.jpg" class="rounded"
height="250px" width="100%" alt="Cinque Terre"></div>
</div>
</div>
<span><li>lunch</li></span>
<span><li>Rs 100 for 1</li></span>
<span><li>Up To 60 Minutes</li></span>
</div>
<div class="col-sm-6" style="padding:20px;">
<h3>(chola kulcha)</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<div class="row">
<div class="col-sm-6">
<br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid rounded" style="border:solid 1px #F0F0F0;">
<div class="container-fluid">
 <div class="col-sm-2"><img
src="image/restaurant/vendor2@gmail.com/46388969.jpg" class="rounded-circle"
height="50px" width="50px" alt="Cinque Terre"></div>
 <span style="font-family: 'Miriam Libre', sans-serif; font-
size:28px;color:#CB202D;">Hotel Spice</span>
</div>
 <div class="col-sm-3"><i style="font-size:20px;" class="fas fa-rupee-
sign"></i> <span style="color:green; font-size:25px;">300</span></div>
 <div class="col-sm-2" style="text-align:left;padding:10px; font-
size:25px;"><button type="submit" name="addtocart" value="6"><span
style="color:green;"><i class="fa fa-shopping-cart" aria-
hidden="true"></i></span></button></div>
</form>
</div>
</div>
<div class="row" style="padding:10px;padding-top:0px;padding-right:0px; padding-
left:0px;">
 <div class="col-sm-12"><img
src="image/restaurant/vendor2@gmail.com/foodimages/phut_0.jpg" class="rounded"
height="250px" width="100%" alt="Cinque Terre"></div>
</div>
</div>
 <span><li>Fast food,full size</li></span>
 <span><li>Rs300 for 1</li></span>
 <span><li>Up To 60 Minutes</li></span>
</div>
 <div class="col-sm-6" style="padding:20px;"><h3>(Pizza
Full)</h3></div>
</div>
</div>
</div>
</div>
</div>


<img src="img/pastaveg_640x480.jpg" height="300px" width="100%">
</div>

<p style="font-family: 'Lobster', cursive; font-weight:light; font-size:25px;">Quick Delivery
and great service.</p>
</div>
</div>

</div>
</div>


<div class="container-fluid animatedParent" style="background:#F8F9FA; padding:40px;">
<div class="row animated fadeIn">
<div class="col-sm-6" style=" border-right:1px solid black;">
<ul>
<li><h5>ADMIN SECTION</h5></li>
<li><a href="admin.php">Admin Login</a></li>
</ul>
</div>
<ul>
<li><h5>HOTEL LINKS</h5></li>
<li><a href="vendor-new.php">Register On Food Hunt</a></li>
<li><a href="vendor_login.php">Hotel Account Login</a></li>
<li><a href="food.php">Add Foods</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Material Login Form</title>
integrity="sha384-
integrity="sha384-
integrity="sha384-
integrity="sha384-
<style>
ul li{list-style:none;}
ul li a {color:black;font-weight:bold;text-decoration:none; }
ul li a:hover {color:black;text-decoration:none;}
</style>
</head>
<body>
<a class="navbar-brand" href="../index.php"><span style="color:green;font-family:
</button>
<a class="nav-link" href="../index.php">Home
</a>
</li>
<a class="nav-link" href="../aboutus.php">About</a>
</li>
<a class="nav-link" href="../services.php">Services</a>
</li>
<a class="nav-link" href="../contact.php">Contact</a>
</li>
</ul>
</div>
</nav>
<br><br><br>
<div class="middle" style=" margin:0px auto;width:500px;">
<ul class="nav nav-tabs nabbar_inverse" id="myTab" style="background:#ED2553;border-
radius:10px 10px 10px 10px;" role="tablist">
<a class="nav-link active" style="color:#BDDEFD;" id="login-tab" data-toggle="tab"
href="#login" role="tab" aria-controls="login" aria-selected="true">Log In</a>
</li>
<a class="nav-link" id="signup-tab" style="color:#BDDEFD;" data-toggle="tab"
href="#signup" role="tab" aria-controls="signup" aria-selected="false">Create New
Account</a>
</li>
</ul>
<br><br>
<div class="tab-content" id="myTabContent">

<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="home-
tab">
<div class="footer" style="color:red;"></div>
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="email" id="email" required/>
</div>
<label for="pwd">Password:</label>
<input type="password" name="password" class="form-control" id="pwd" required/>
</div>
<button type="submit" name="login" style="background:#ED2553; border:1px solid
#ED2553;" class="btn btn-primary">Login In</button>
</form>
</div>


<div class="tab-pane fade" id="signup" role="tabpanel" aria-labelledby="profile-tab">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" name="name" required="required"/>
</div>
<label for="email">Email</label>
<input type="text" id="email" name="email" pattern="^[_\.0-9a-zA-Z-]+@([0-9a-zA-
Z]+\.)+[a-zA-Z]{2,6}$" class="form-control" required/>
</div>
</div>
<label for="mobile">Mobile</label>
<input type="tel" id="mobile" class="form-control" name="mobile" pattern="[0-9]{10}"
placeholder="" required>
</div>
<button type="submit" name="register" style="background:#ED2553; border:1px solid
#ED2553;" class="btn btn-primary">Create New Account</button>
</form>
</div>
</div>
</div>
<br><br> <br><br> <br><br>
<ul>
<li><a href="../admin.php">Admin Login</a></li>
</ul>
</div>
<ul>
<li><a href="../vendor-new.php">Register On Food Hunt</a></li>
<li><a href="../vendor_login.php">Hotel Account Login</a></li>
<li><a href="../food.php">Add Foods</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Material Login Form</title>
integrity="sha384-
integrity="sha384-
integrity="sha384-
integrity="sha384-
<style>
ul li{list-style:none;}
ul li a {color:black;font-weight:bold;text-decoration:none; }
ul li a:hover {color:black;text-decoration:none;}
</style>
</head>
<body>
<a class="navbar-brand" href="../index.php"><span style="color:green;font-family:
</button>
<a class="nav-link" href="../index.php">Home
</a>
</li>
<a class="nav-link" href="../aboutus.php">About</a>
</li>
<a class="nav-link" href="../services.php">Services</a>
</li>
<a class="nav-link" href="../contact.php">Contact</a>
</li>
</ul>
</div>
</nav>
<br><br><br>
<div class="middle" style=" margin:0px auto;width:500px;">
<ul class="nav nav-tabs nabbar_inverse" id="myTab" style="background:#ED2553;border-
radius:10px 10px 10px 10px;" role="tablist">
<a class="nav-link active" style="color:#BDDEFD;" id="login-tab" data-toggle="tab"
href="#login" role="tab" aria-controls="login" aria-selected="true">Log In</a>
</li>
<a class="nav-link" id="signup-tab" style="color:#BDDEFD;" data-toggle="tab"
href="#signup" role="tab" aria-controls="signup" aria-selected="false">Create New
Account</a>
</li>
</ul>
<br><br>
<div class="tab-content" id="myTabContent">

<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="home-
tab">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="email" id="email" required/>
</div>
</div>
<button type="submit" name="login" style="background:#ED2553; border:1px solid
#ED2553;" class="btn btn-primary">Login In</button>
</form>
</div>


<div class="tab-pane fade" id="signup" role="tabpanel" aria-labelledby="profile-tab">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" name="name" required="required"/>
</div>
<label for="email">Email</label>
<input type="text" id="email" name="email" pattern="^[_\.0-9a-zA-Z-]+@([0-9a-zA-
Z]+\.)+[a-zA-Z]{2,6}$" class="form-control" required/>
</div>
</div>
<label for="mobile">Mobile</label>
<input type="tel" id="mobile" class="form-control" name="mobile" pattern="[0-9]{10}"
placeholder="" required>
</div>
<button type="submit" name="register" style="background:#ED2553; border:1px solid
#ED2553;" class="btn btn-primary">Create New Account</button>
</form>
</div>
</div>
</div>
<br><br> <br><br> <br><br>
<ul>
<li><a href="../admin.php">Admin Login</a></li>
</ul>
</div>
<ul>
<li><a href="../vendor-new.php">Register On Food Hunt</a></li>
<li><a href="../vendor_login.php">Hotel Account Login</a></li>
<li><a href="../food.php">Add Foods</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>

Abstract:: Web Technologies Use

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Abstract:: Web Technologies Use

Uploaded by

Copyright:

Available Formats

ITE1002 - Web Technologies – Digital Assignment – Fall 2019

Faculty In-charge: Dr. Divya Udayan J

Web Technologies Use:

Division of Modules in the form of HIPO CHART:

<div id="result" style="position:fixed;top:300; right:500;z-index:

You might also like