Sie sind auf Seite 1von 43

RE-ASSURE

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

Name of Mentor: Name of Coordinator(s):


Mr. Anup Bhola Sir Dr. Deepika Sainani Mam
COVER PAGE & TITLE PAGE

Topic- WebSite for online buying and selling products for college campus students

Module Name- RE-ASSURE

Submitted To-

Submitted By- Era Dhingra…………………(1712414)


Rakshanda Savarnya………..(1712524)
Rashmi Singh Rajput……….(1712527)
Ria Pathak…………………..(1712528)
ABSTRACT

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

1. Objective (Problem Statement)


2. Requirement Analysis (SRS)
2.1 Requirement specification……………………………………………………………..
2.2 H/w and S/w Requirements……………………………………………………………
2.3 Feasibility Study……………………………………………………………………….
2.4 Product Functions…………………………………………………………………….
2.5 Use-case Diagrams…………………………………………………………………….
3. System Design (SDS)
3.1 High-level Design……………………………………………………………………..
3.2 ER Diagram/Class Diagrams…………………………………………………………
3.3 Database Design……………………………………………………………………..
3.4 Data flow diagrams/Activity Diagrams………………………………………………..
3.5 Flowcharts/Sequence Diagrams…………………………………………………………
4. Coding
4.1 Only main Modules (if available)…………………………………………………………
(Detail Coding is not required)
5. Testing
5.1 Test cases………………………………………………………………………………….
6. User Interfaces
7. Appendices
8. References
1. Objective:
2. Requirement Analysis (SRS):
2.1 Required Specification:
HTML: Hypertext Markup Language
JAVA: Object Oriented Programming Language
JS: Java Script
CSS: Cascading Style Sheet
PHP: Personal Home Pages
SQL: Structured Query Language
This website is mainly aimed towards creating a platform for the Banasthali Vidyapith
students to sell and buy products online. This project will help the students to search and purchase for
things among the campus. For example when the seniors leave the campus after completion of their
degrees they search for juniors in need to sell their used items like trunk, cycle, table, fans etc.
Re-Assure will provide a number of functions as listed below:
1) Customer registration/login-Login to the site through the first page as seller or buyer.
2) Creation of account-
3) Product Listing-Customer can see all the products being sold on our site.
4) Product Details-Customer can see all the details regarding the product like it’s picture, price and
location.
5) Negotiable-The price of product may be negotiated sometimes accordingly to the seller.
6) Customer Order -The Customer confirms her order and adds it to her cart.
7) Payment-In this we are dealing with only cash which would be paid at the time of delivery by the seller
only.

2.2 Hardware and Software Specification:


o Hardware Interface:
SERVER SIDE:
RAM: 2 GB
HDD: 20 GB or more(Free space excluding data size)
Processor: 2-4 GHz (P4) or onwards
CLIENT SIDE:
RAM: 1 GB
HDD: 10 GB or more
Processor: 1-2 GHz (P2) or onwards
o Software Interface:
Operating System: Windows
Data Base : MySQL
Frontend: HTML, CSS, JavaScript, Bootstrap
Design tool: Visual Studio
Backend: PHP.
Web Server:Xamp
o Communication Interface:
Clients on Internet will be using HTTP/HTTPS protocol
Clients on Intranet will be using TCP/IP protocol.

2.3 Feasibility Study:

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

2.4 Product Functions:


Re-Assure will provide a number of functions as listed below:

 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

Use Case: Seller


Use Case: Admin

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:

Activity Diagram for User:


Activity Diagram for Admin:
3.4 Flowcharts/Sequence Diagram:

Sequence Diagram:
4. Coding:

4.1 Landing 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">
<title>Re-Assure</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 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'>
<link href='https://fonts.googleapis.com/css?family=Caladea' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Denk One' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Saira Stencil One' rel='stylesheet>
</head>

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

<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>
<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 class="card ">


<a href="Cycle.html"> <img class="images11" src="img\cycle.jfif" alt="Avatar" > </a>

</div>

</div>

<div class="col-md-4">
<div class="card">

<a href="Fan.html"><img class="images11" src="img\windprotablefan.png.409dcce0c0.999x600x550.jpg" alt="Avatar"


></a>
</div>
</div>

</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>Website: </u><a href="FrontPage.html" style="color: blanchedalmond;">reassure.com</a><br>

<u> Address:</u><br>

G-29, SECTOR-41 NOIDA Gautam Buddha Nagar UP 201301 IN


</div>

<div class="col-md-4"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;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 -->

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>


<script type="text/javascript" src="//translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit"></script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->


<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

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

transition: transform .2s;


width: 300px;
height: 350px;
margin: 0 auto;
}

.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

<?php include 'MyDatabase.php'; ?>

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

<link href='https://fonts.googleapis.com/css?family=Denk One' 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">

<ul class="nav navbar-nav navbar-right">


<li><a class="link" href="FrontPage.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-home "></i>
Home</b></a></li>
<li ><a class="link" href="Category_Buy.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-hand-down
"></i> Buy</b></a></li>
<li><a class="link" href="Category_Sell.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-hand-up "></i>
Sell</b></a></li>
<li><a class="link" href="FrontPage.html#Team" style="color:#00e2e2 "><b><i class="glyphicon glyphicon-list-alt
"></i> About us</b></a></li>
<li><a class="link" href="ContactUs.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-earphone "></i>
Contact us</b></a></li>

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

.form-control, .form-control:focus, .input-group-addon {


border-color: #e1e1e1;
border-radius: 0;
}
.signup-form {
width: 390px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form h2 {
color: #636363;
margin: 0 0 15px;
text-align: center;
}
.signup-form .lead {
font-size: 14px;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
border-radius: 1px;
margin-bottom: 15px;
background: #fff;
border: 1px solid #f3f3f3;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form label {
font-weight: normal;
font-size: 13px;
}
.signup-form .form-control {
min-height: 38px;
box-shadow: none !important;
border-width: 0 0 1px 0;
}
.signup-form .input-group-addon {
max-width: 42px;
text-align: center;
background: none;
border-width: 0 0 1px 0;
padding-left: 5px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #19aa8d;
border-radius: 3px;
border: none;
min-width: 140px;
outline: none !important;
}
.signup-form .btn:hover, .signup-form .btn:focus {
background: #179b81;
}
.signup-form a {
color: #19aa8d;
text-decoration: none;
}
.signup-form a:hover {
text-decoration: underline;
}
.signup-form .fa {
font-size: 21px;
}
.signup-form .fa-paper-plane {
font-size: 17px;
}
.signup-form .fa-check {
color: #fff;
left: 9px;
top: 18px;
font-size: 7px;
position: absolute;
}
PHP CODE for INSERTING DETAILS

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

//check if form is submitted

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']);

$query="INSERT INTO account(id,name, email, password , mobileno)


VALUES('$id','$name','$email','$password','$mobile')";
if(!mysqli_query($conn, $query))
{
die('error:'.mysqli_error($conn));
echo "not done";
}
else
{

header("Location:FrontPage.html");
exit();
}
}
?>

4.4 Login Page

<? php include 'MyDatabase.php';?>


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

<link href='https://fonts.googleapis.com/css?family=Denk One' 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">

<ul class="nav navbar-nav navbar-right">


<li><a class="link" href="FrontPage.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-home "></i>
Home</b></a></li>
<li ><a class="link" href="Category_Buy.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-hand-down
"></i> Buy</b></a></li>
<li><a class="link" href="Category_Sell.php" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-hand-up "></i>
Sell</b></a></li>
<li><a class="link" href="AboutUs.html" style="color:#00e2e2 "><b><i class="glyphicon glyphicon-list-alt "></i> About
us</b></a></li>
<li><a class="link" href="ContactUs.html" style="color: #00e2e2 "><b><i class="glyphicon glyphicon-earphone "></i>
Contact us</b></a></li>

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

.form-control, .form-control:focus, .input-group-addon {


border-color: #e1e1e1;
border-radius: 0;
}
.signup-form {
width: 390px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form h2 {
color: #636363;
margin: 0 0 15px;
text-align: center;
}
.signup-form .lead {
font-size: 14px;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
border-radius: 1px;
margin-bottom: 15px;
background: #fff;
border: 1px solid #f3f3f3;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form label {
font-weight: normal;
font-size: 13px;
}
.signup-form .form-control {
min-height: 38px;
box-shadow: none !important;
border-width: 0 0 1px 0;
}
.signup-form .input-group-addon {
max-width: 42px;
text-align: center;
background: none;
border-width: 0 0 1px 0;
padding-left: 5px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #19aa8d;
border-radius: 3px;
border: none;
min-width: 140px;
outline: none !important;
}
.signup-form .btn:hover, .signup-form .btn:focus {
background: #179b81;
}
.signup-form a {
color: #19aa8d;
text-decoration: none;
}
.signup-form a:hover {
text-decoration: underline;
}
.signup-form .fa {
font-size: 21px;
}
.signup-form .fa-paper-plane {
font-size: 17px;
}
.signup-form .fa-check {
color: #fff;
left: 9px;
top: 18px;
font-size: 7px;
position: absolute;
}
PHP FILE for DATABASE CONNECTIVITY
<?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);
}
?>

DISPLAY DATA FROM DATABASE

<?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'];

echo " <div class='panel panel-default'>


<div class='panel-body'>
<div class='col-md-2'>
<img class='image11' src='img\$pro_img1'>
</div>
<div class='col-md-10'>
<h4>$pro_name</h4>
<p>$pro_desc</p>
<p><b>PRICE:-</b>$pro_price</p>
<p><a class='btn btn-default' href='' role='button' style='background-color: #DF234A' ><font color='white'>check this out
</font></a></p>
</div>
</div>
</div>";

}
}
?>

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

Das könnte Ihnen auch gefallen