Beruflich Dokumente
Kultur Dokumente
A Project Report
Submitted for the partial fulfillment for the award of the degree of
BACHELOR’S OF TECHNOLOGY
COMPUTER SCIENCE
SUBMITTED BY:
(Era Dhingra (1712414))
(Rakshanda Savarnya (1712524))
(Rashmi Singh Rajput (1712527))
–-- (Ria Pathak (1712528))
Topic- WebSite for online buying and selling products for college campus students
Submitted To-
An online shopping system that permits a student to submit online orders for items and/or
services from a store that serves both walk-in student and online student. The online shopping system
presents an online display of an order cut off time and an associated delivery window for items
selected by the student. The system accepts the student's submission of a purchase order for the item in
response to a time of submission being before the order cut off time. The online shopping system does
not settle with a credit supplier of the student until the item selected by the student is picked from
inventory but before it is delivered. Therefore, the student can go online and make changes to the
order. In addition, available service windows are presented to the student as a function of student
selected order and service types and further, the order picking is assigned in accordance with a picker's
preference. When ordering goods, many shopping systems provide a virtual shopping cart for holding
items selected for purchase. Successive items selected for purchase are placed into the virtual shopping
cart until a student completes their shopping trip. Virtual shopping carts may be examined at any time,
and their contents can be edited or deleted at the option of the student. Once the student decides to
submit a purchase order, the student may print the contents of the virtual shopping basket in order to
obtain a hard copy record of the transaction.
ACKNOWLEDGEMENT
This report has been prepared for the Final Year Project on topic E-shopping named Rupjaygri
Shop to implement the theory in the real field with the purpose of fulfilling the requirements of the
course of BCIS (Bachelor of Computer Information System).
The aim of this project is to make familiar to the practical aspect and uses of theoretical
knowledge and clarifying the career goals, so we have successfully completed the project and
compiled this report as the summary and the conclusion that we have drawn from the project.
We would like to express our sincere gratitude to our Project Coordinator Mr. Sanjay Lama
who had given his valuable time and given us chance to learn something despite having his busy
schedule, Principal Mr. Surendra Shrestha and Coordinator Mr. Dipesh Shrestha for their great
guidelines.
Lastly, we would like to thank Mr. Nimesh Shrestha who had provided us with the guidance
and his easiest MVC framework and for his encouragement, patience and expert advice and also for
supplying so much invaluable information and finally special thanks go to my friends and family who
have supported us throughout our project.
TABLE OF
CONTENT…………………………………………………………………………………...
o User Characteristics:
The user of “Re-Assure” should have the basic knowledge about the internet and computer.
Users of this software can be categorized as following:
STUDENTS
These types of users are the one enrolled in different courses provided by Banasthali Vidyapith.
They can be day scholars or hostellers.
FACULTY
These types of users are the teachers of various departments of Banasthali University.
ADMINISTRATOR
These types of users are basically the administrator of the whole website. They can
change any data at any time without creating any conflict or any confusion for the rest of users.
o General Constraints:
Higher Order Language Functions: The JSP will be used for developing the web-pages with the help
of Brackets and for the database information SQL Server will be used.
Criticality of the Application: The server application will be available 24 X 7.
Safety and Security Considerations: The password and a valid username are the security issue. Any
substantial enhancement in the website will require approval of the administrator.
o Technologies Used:
Front End: CSS, Java, HTML, Bootstrap
Back End: PHP
Design Tool: Visual Studio
Web Server: Xampp
Customer registration/login-Login to the site through the first page as seller or buyer.
Creation of account-
Product Listing-Customer can see all the products being sold on our site.
Product Details-Customer can see all the details regarding the product like it’s picture, price and
location.
Negotiable-The price of product may be negotiated sometimes accordingly to the seller.
Customer Order -The Customer confirms her order and adds it to her cart.
Payment-In this we are dealing with only cash which would be paid at the time of delivery by the seller
only.
2.5 Use Case Diagrams:
Use Case: Buyer
3. System Design:
3.1 High Level Design:
3.2 DataBase Design:
Users Table:
Sellers Table:
Categories Table:
Product Table:
Cart Table:
3.3 Data Flow Diagrams/Activity Diagrams:
Sequence Diagram:
4. Coding:
<body>
<div class="jumbotron fading">
<nav class="navbar navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-
expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>s
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="FrontPage.html" style="font-size: 50px;margin-top: 10px;margin-left: 20px;color: #AD173B;font-
family:'Denk One';"><b> Re-Assure</b></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="link" href="FrontPage.html" style="color: #000;margin-top: 20px;margin-right: 30px;"><b>
Home</b></a></li>
<li ><a class="link" href="Category_Buy.html" style="color:#000;margin-top: 20px;margin-right: 30px; "><b>
Buy</b></a></li>
<li><a class="link" href="Category_Sell.php" style="color: #000;margin-top: 20px; margin-right: 30px;"><b>
Sell</b></a></li>
<li><a class="link" href="#Team" style="color:#000;margin-top: 20px;margin-right: 30px; "><b> About us</b></a></li>
<li><a class="link" href="ContactUs.html" style="color: #000;margin-top: 20px;margin-right: 30px; "><b> Contact
us</b></a></li>
<li><a class="link" href="MyAccount.html" style="color: #000;margin-top: 20px;margin-right: 30px; "><b> My
Account</b></a></li>
</ul>
</div><!-- /.nav-collapse -->
</nav><!-- /.navbar -->
<div class="container">
<div class="col-md-8">
<div class="pull-left">
<p style="margin-top: 60px; font-size: 70px; color: black;font-family:'Almendra;">ITS <br>RE-SELLING <br>TIME</p>
<a href="#"><button type="button" class="btn pull-left"style="font-size: 30px;background-color:#AD173B; font-
family:'Cute Font'">Login</button></a>
<a href="#"><button type="button" class="btn pull-left"style="font-size: 30px;background-color:#AD173B;font-
family:'Cute Font';margin-top: 20px;">Register</button></a>
</div>
</div>
</div>
<p style="font-family:'Boogaloo'; background-color: #AD173B ;color:white; font-size:40px;margin-top:120px;text-
align:center">
shop with us | buy easy | sell easy
</p>
</div>
<br>
<br>
<Br>
<br>
<section>
<h1 id="newheading">new this week</h1>
<hr style="width: 200px;height: 5px;background-color:yellow;">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card ">
<img class="images111" src="img\bucketss.jpg" alt="Avatar">
<a href="Bucket.html"><h1 class="headingss"><b>Buckets</b></h1></a>
<p class="price">starting at $19.99</p>
<p><button><a id="link" href="Bucket.html">Explore More</a></button></p>
</div>
</div>
<div class="col-md-3">
<div class="card ">
<img class="images111" src="img\bucketss.jpg" alt="Avatar" >
<a href="Bucket.html"><h1 class="headingss"><b>Buckets</b></h1></a>
<p class="price">starting at $19.99</p>
<p><button><a id="link" href="Bucket.html">Explore More</a></button></p>
</div>
</div>
<div class="col-md-3">
<div class="card ">
<img class="images111" src="img\bucketss.jpg" alt="Avatar" >
<a href="Bucket.html"><h1 class="headingss"><b>Buckets</b></h1></a>
<p class="price">starting at $19.99</p>
<p><button><a id="link" href="Bucket.html">Explore More</a></button></p>
</div>
</div>
<div class="col-md-3">
<div class="card ">
<img class="images111" src="img\bucketss.jpg" alt="Avatar">
<a href="Bucket.html"><h1 class="headingss"><b>Buckets</b></h1></a>
<p class="price">starting at $19.99</p>
<p><button><a id="link" href="Bucket.html">Explore More</a></button></p>
</div>
</div>
</div>
</div>
</div>
</section>
<br><br><br>
<section>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card ">
<img class="images111" src="img\bucketss.jpg" alt="Avatar">
<a href="Bucket.html"><h1 class="headingss"><b>Buckets</b></h1></a>
<p class="price">starting at $19.99</p>
<p><button><a id="link" href="Bucket.html">Explore More</a></button></p>
</div>
</div>
<div class="col-md-3">
<div class="card ">
<img class="images111" src="img\bucketss.jpg" alt="Avatar" >
<a href="Bucket.html"><h1 class="headingss"><b>Buckets</b></h1></a>
<p class="price">starting at $19.99</p>
<p><button><a id="link" href="Bucket.html">Explore More</a></button></p>
</div>
</div>
<div class="col-md-3">
<div class="card ">
<img class="images111" src="img\bucketss.jpg" alt="Avatar" >
</div>
<br>
<BR>
<br>
<section>
<h1 id="newheading">our featured products</h1>
<hr style="width: 200px;height: 5px;background-color:yellow;">
<div class="container fading">
<marquee id="marquee1" behavior="alternate" direction="left" scrollamount=16 onmouseover="this.stop()"
onmouseout="this.start()">
<div class="row">
<div class="col-md-4">
<div class="card">
<a href="Trunk.html"><img class="images11 " src="img\trunk.jpg" alt="Avatar" ></a>
</div>
</div>
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
<div class="card">
</div>
</marquee>
</div>
</section>
<br>
<BR>
<br>
</section>
<br>
<br>
<br>
<section>
<div class="container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p style = "font-size :60px; font-family:'Cute Font'">quote of the week</p>
</div>
<div class="flip-card-back">
<p style = "font-size :30px; font-family: 'Sofia';">“You mustn’t throw them away. Let me have them.”
― Diane Samuels, Kindertransport: A Drama</p>
</div>
</div>
</div>
</div>
</section>
<br>
<Br>
<br>
<section>
<div class="row">
<div class="col-md-6" >
<h1 id="newheading">have query? contact us</h1>
<hr style="width: 200px;height: 5px;background-color:yellow;">
</div>
<div class="col-md-6">
<h1 id="newheading">who we are? about us</h1>
<hr style="width: 200px;height: 5px;background-color:yellow;">
</div>
</section>
<br>
<br>
<br>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 style="text-align:center;font-family: 'Denk One'">Meet Us</h3>
<p class="footersfirstdiv" style="text-align:center;color: blanchedalmond;"><u>Email ID:</u>
sourcinghul15@yahoo.com<br>
<u> Address:</u><br>
<div class="col-md-4"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
&nbs
p; Copyright © 2007-2009 [reassure]</div>
<div class="col-md-4">
<p style="border: 5px; border-color:blanchedalmond; font-family: 'Denk One' " >Note:</p>
<p class="footersfirstdiv" style=" border-color:blanchedalmond;font-family: 'Almendra';
">Read the terms and conditions carefully
<br>Register to get more services
<br></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
CSS file
div#navbar
{
font-family: 'Cute Font';font-size: 22px;
background-color: antiquewhite;
}
.center2
{
font-family: 'Denk One';
}
.center
{
font-family: 'Sofia';
font-size: 20px;
background-color: #1caa98;
color:black;
}
.navbar-brand
{
color: #4AD4FC;
}
.em-text
{
color: #1caa98 !important;
}
.jumbotron
{
background:url(https://webcomicms.net/sites/default/files/clipart/140625/shopping-images-140625-6934578.jpg) no-repeat
top center;
background-size:1400px;
margin-top: 60px;
color: #fff;
height: 700px;
overflow: none;
}
.jumbotron h1 {
margin-top: 120px;
}
.jumbotron p
{
margin-bottom: 40px;
}
.jumbotron .app-btn
{
width: 20%;
margin-right: 20px;
}
.jumbotron .app-btn1
{
width: 50%;
margin-left: 50px;
margin-top: 10px;
height: 330px;
width: 200px;
}
.center1
{
font-family: 'Aclonica';
font-size: 100px;
}
.jumbotron
{
align-content:center;
}
img.add-btn2
{
width: 90%;
height: 380px;
}
.first-slide
{
width: 1200px;
height: 200px;
}
.second-slide
{
width: 900px;
height: 300px;
}
.third-slide
{
width: 900px;
height: 300px;
}
section#feature img
{
width: 50%;
height: 210px;
width: 250px;
}
div#newissue {
width: auto;
height: 600px;
max-height: 600px;
section#feature
{
background: #1caa98;
color: #fff;
padding: 20px;
overflow: auto;
}
.link:hover
{
color: black;
}
section#feature ul li
{
font-size: 22px;
list-style: none;
line-height: 2.0em;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a{
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
footer
{
background: #333;
color: #fff;
padding: 30px 0 20px;
}
footer li{
float: left;
padding: 0 10px 0 10px;
list-style: none;
}
section#feature .carousel-caption1
{
background-image: url(https://mcdn.wallpapersafari.com/medium/2/16/hI6wCS.jpg) no-repeat;
}
.carousel-caption2
{
background-image: url(img\cycles.jpg) no-repeat;
}
.carousel-caption3
{
background-image: url(img\fan.jpg) no-repeat;
}
div ul.dropdown-menu
{
float: none;
}
.link:hover
{
color: black;
}
div#Team
{
background-image: url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fbump
%2F&psig=AOvVaw36TZRqQJEmpN_SAbf26K0v&ust=1589649513654000&source=images&cd=vfe&ved=0CAIQjRx
qFwoTCNjbpomwtukCFQAAAAAdAAAAABAy);
height: 500px;
}
.logo
{
height: 200px;
width: 250px;
margin-top: 70px;
margin-left: 150px;
}
ul#new
{
margin-left: 550px;
}
.Members
{
background-image: url(https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80)no-repeat;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: black;
background-color: #AD173B;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 22px;
font-family: 'Almendra';
}
.card button:hover {
opacity: 0.4;
} a#link { color: white;}
.images11
{
width: 180px;
height: 220px;
}
.images111
{
width: 150px;
height: 220px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-height: 550px;
max-width: 450px;
margin: auto;
text-align: center;
}
h1#newheading
{
font-family: "Cute Font";
text-align: center;
font-size: 60px;
color:black;
.zoom {
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.flip-card {
background-color: transparent;
width: 1200px;
height: 100px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #AD173B;
color: white;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
4.3 Registration page
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Sign Up</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Cute Font' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Almendra' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Bootstrap core CSS -->
</head>
<body>
<div class="jumbotron">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-
expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<li><a class="link" href="MyAccount.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-user " ></i> My
Account</b></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="signup-form">
<form method="post" action="Process.php">
<h2 style="font-family: 'Denk One' ">Create Account</h2>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-paper-plane"></i></span>
<input type="id" class="form-control" name="id" placeholder="College ID" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" name="username" placeholder="Username" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-paper-plane"></i></span>
<input type="email" class="form-control" name="email" placeholder="Email Address" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="text" class="form-control" name="password" placeholder="Password" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
<i class="fa fa-check"></i>
</span>
<input type="text" class="form-control" name="confirm_password" placeholder="Confirm Password"
required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
<i class="fa fa-check"></i>
</span>
<input type="number" class="form-control" name="mobilenumber" placeholder="Mobile Number" required="required">
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-block btn-lg" style="font-family: 'Almendra' ">Sign
Up</button>
</div>
<p class="text-center" style="color: #1caa98; font-family: 'Cute Font';font-size: 30px">Already have an account?<br><a
href="Login.html">Login here</a></p>
</form>
</body>
</html>
CSS FILE
div#navbar
{
font-family: 'Cute Font';font-size: 22px;
}
div#middle
{
font-family: 'Aref Ruqaa';
}
.center2
{
font-family: 'Denk One';
}
.center
{
font-family: 'Sofia';
font-size: 20px;
background-color: #1caa98;
color:black;
}
.navbar-brand
{
color: #4AD4FC;
}
.em-text
{
color: #1caa98 !important;
}
.jumbotron
{
background:url(https://www.infiniticreation.co.uk/wp-content/uploads/2014/03/home_sec.jpg) no-repeat top center;
background-size: cover;
color: #fff;
height: 900px;
overflow: none;
}
.jumbotron h1 {
margin-top: 120px;
}
.jumbotron p
{
margin-bottom: 40px;
}
.jumbotron .app-btn
{
width: 20%;
margin-right: 20px;
}
.jumbotron .app-btn1
{
width: 50%;
margin-left: 50px;
margin-top: 10px;
height: 330px;
width: 200px;
}
.center1
{
font-family: 'Aclonica';
font-size: 100px;
}
.jumbotron
{
align-content:center;
}
.link:hover
{
color: black;
}
section#feature ul li
{
font-size: 22px;
list-style: none;
line-height: 2.0em;
}
footer
{
background: #333;
color: #fff;
padding: 30px 0 20px;
}
footer li{
float: left;
padding: 0 10px 0 10px;
list-style: none;
}
section#feature .carousel-caption1
{
background-image: url(https://mcdn.wallpapersafari.com/medium/2/16/hI6wCS.jpg) no-repeat;
}
.carousel-caption2
{
background-image: url(img\cycles.jpg) no-repeat;
}
.carousel-caption3
{
background-image: url(img\fan.jpg) no-repeat;
}
div ul.dropdown-menu
{
float: none;
}
.link:hover
{
color: black;
}
.logo
{
height: 200px;
width: 250px;
margin-top: 70px;
margin-left: 150px;
}
ul#new
{
margin-left: 550px;
}
<?php
//connect to my sql
$conn = mysqli_connect("127.0.0.1:3307", "root","","reassure");//test connection
if($conn){
echo "connection success";
}
else{
echo "connection not success: ".mysqli_error($conn);
}
if(isset($_POST['submit']))
{
$id=mysqli_real_escape_string($conn, $_POST['id']);
$username=mysqli_real_escape_string($conn, $_POST['username']);
$email=mysqli_real_escape_string($conn, $_POST['email']);
$password=mysqli_real_escape_string($conn, $_POST['password']);
$confirmpassword=mysqli_real_escape_string($conn, $_POST['confirm_password']);
$mobile=mysqli_real_escape_string($conn, $_POST['mobilenumber']);
header("Location:FrontPage.html");
exit();
}
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Bootstrap core CSS -->
</head>
<body>
<div class="jumbotron">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-
expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<li><a class="link" href="MyAccount.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-user " ></i> My
Account</b></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="signup-form">
<form action="login.php" method="post">
<h2 style="font-family: 'Denk One' ">Login</h2>
<br>
<br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-paper-plane"></i></span>
<input type="email" class="form-control" name="email" placeholder="Email Address" required="required">
</div>
</div><br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="text" class="form-control" name="password" placeholder="Password" required="required">
</div>
</div><br>
<br>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-block btn-lg" style="font-family: 'Almendra' ">Sign
In</button>
</div>
<p class="text-center" style="color: #1caa98; font-family: 'Cute Font';font-size: 30px">create account?<br><a
href="Registration.html">Register here</a></p>
</form>
</div>
</body>
</html>
CSS FILE
div#navbar
{
font-family: 'Cute Font';font-size: 22px;
}
div#middle
{
font-family: 'Aref Ruqaa';
}
.center2
{
font-family: 'Denk One';
}
.center
{
font-family: 'Sofia';
font-size: 20px;
background-color: #1caa98;
color:black;
}
.navbar-brand
{
color: #4AD4FC;
}
.em-text
{
color: #1caa98 !important;
}
.jumbotron
{
background:url(https://www.infiniticreation.co.uk/wp-content/uploads/2014/03/home_sec.jpg) no-repeat top center;
background-size: cover;
color: #fff;
height: 700px;
overflow: none;
}
.jumbotron h1 {
margin-top: 120px;
}
.jumbotron p
{
margin-bottom: 40px;
}
.jumbotron .app-btn
{
width: 20%;
margin-right: 20px;
}
.jumbotron .app-btn1
{
width: 50%;
margin-left: 50px;
margin-top: 10px;
height: 330px;
width: 200px;
}
.center1
{
font-family: 'Aclonica';
font-size: 100px;
}
.jumbotron
{
align-content:center;
}
.link:hover
{
color: black;
}
section#feature ul li
{
font-size: 22px;
list-style: none;
line-height: 2.0em;
}
footer
{
background: #333;
color: #fff;
padding: 30px 0 20px;
}
footer li{
float: left;
padding: 0 10px 0 10px;
list-style: none;
}
section#feature .carousel-caption1
{
background-image: url(https://mcdn.wallpapersafari.com/medium/2/16/hI6wCS.jpg) no-repeat;
}
.carousel-caption2
{
background-image: url(img\cycles.jpg) no-repeat;
}
.carousel-caption3
{
background-image: url(img\fan.jpg) no-repeat;
}
div ul.dropdown-menu
{
float: none;
}
.link:hover
{
color: black;
}
.logo
{
height: 200px;
width: 250px;
margin-top: 70px;
margin-left: 150px;
}
ul#new
{
margin-left: 550px;
}
<?php
//connect to my sql
$conn = mysqli_connect("127.0.0.1:3307", "root","","reassure");//test connection
if($conn){
echo "connection success";
}
else{
echo "connection not success: ".mysqli_error($conn);
}
function getPro()
{
global $conn;
$get_product="SELECT * FROM product order by 1 DESC LIMIT 0,6";
$run_products=mysqli_query($conn,$get_product) or die( mysqli_error($conn));
while($row_product=mysqli_fetch_array($run_products))
{
$pro_name=$row_product['product_name'];
$pro_category=$row_product['product_category'];
$pro_years=$row_product['product_years'];
$pro_price=$row_product['product_price'];
$pro_negotiable=$row_product['product_negotiable'];
$pro_desc=$row_product['product_description'];
$pro_img1=$row_product['product_img1'];
$pro_img2=$row_product['product_img2'];
}
}
?>
5. Refrences:
5.1 https://www.pluralsight.com/courses/php-fundamentals
5.2 https://www.w3schools.com/html/default.asp
5.3 https://getbootstrap.com/docs/3.3/getting-started/
5.4 https://www.w3schools.com/php/php_mysql_intro.asp