PHP E-commerce Website Design
PHP E-commerce Website Design
Ms Nishta Ahuja
SANYOG SHARMA
Page |2
Certificate
This is to certify that project report entitled “Desiging an E-commerce website using Php”,
submitted by Sanyog Sharma in partial fulfillment for the award of degree of Bachelor of
Technology in Computer Science & Engineering to Jaypee University of Information
Technology, Waknaghat, Solan has been carried out under my supervision.
This work has not been submitted partially or fully to any other University or Institute for the
award of this or any other degree or diploma.
Acknowledgement
Page |3
The project entitled as Designing an E-commerce website using Php. The main purpose of this
project is to create a e-commerce website that is user friendly,cheap and easy to use. This project is the
result of my endurance in best of ways for these couple of months.
My project guide,Ms Nishta Ahuja an Asstt. Professor for Department of Computer Science & IT
at Jaypee University of Information Technology, has indeed guided me to proceed with this project in
best of her capability and enlightened me with her knowledge and wisdom. She has given me the push
that I needed to go forward and do more. So I take this opportunity to thank her for his lending help and
cooperation. May she shower such wisdom and guidance to future individual.
\.
CONTENT
1. Abstract……………………………………………………………6
2. Chapter 1………………………………………………………….7
1.1 Introduction…………………………………………………...7
Page |4
2. Advantages of PHP.....................................................11
3. Challenges..................................................................11
4. Motivation..................................................................12
5.Problem Statement........................................................13
3. Chapter 2..........................................................................................14
2.5 Function............................................................................19
2.6 Jquery...............................................................................19
2.8 Snapshots...........................................................................26
3. CONCLUSION............................................................................................28
List of Figures
Page |5
9. Snapshot of Homepage 26
ABSTRACT
.
Page |6
In this project, we are going to build an e-commerce system integrating latest technologies to
real-world development scenarios as much as possible, by setting up a full-fledged Online Shoe
Storefront for a company named Soccus in the footwear business.The main objective of doing
this project on not only how to build a solid ecommerce infrastructure but also the actual
business aspects of the system. The website should be cost efficient , easy to use and user can
compare items based on his choice.
CHAPTER 1
1. INTRODUCTION
PHP can handle payment processing on its own, and it can connect with services
like PayPal and Google Checkout. PHP can store and load images from a database
or a file system and give you the ability to log users in and out as well as control
what they see throughout your application.
Add in MySQL, and you can store your users’ names, addresses, billing data, and even
their preferences regarding the color of their own personal landing page. MySQL
can store just a few bits of data, a few thousand lines of data, or every page access
by every user who ever logs into your application.
And, of course, PHP can easily connect to MySQL. PHP can do everything from
grabbing a user name based on a user ID to storing the details about financial
transactions to actually creating tables and updating their structures, and MySQL
can back-end all that work and store that data. Ultimately, this is the stuff of web
applications; it’s what a web application is.
Obviously, web applications like this aren’t simple. They have a lot of complexity, and
that complexity has to be managed and ultimately tamed into a usable, sensible web
application that you can maintain and your users can enjoy. That’s what this book is
about: building web applications, and doing it with an understanding of what you’re
doing, and why you’re doing it.
PHP is an acronym. Originally, it stood for Personal Home Page Construction Kit, because
lots of programmers used it to build their websites, going much further than what was possible
with HTML, CSS, and JavaScript. But in the last few years, “personal
home page” tends to sound more like something that happens on one of those really cheap
hosting sites, rather than a highpowered programming language. So now, PHP stands for PHP:
Hypertext Preprocessor. If that sounds geeky, it is. In fact, it’s a bit of a programmer joke: PHP
stands for something that actually contains PHP within itself. That makes it a recursive acronym,
meaning that it references itself. You don’t have to know what a recursive acronym is;
that won’t be on the quiz. Just be warned that PHP’s recursiveacronym won’t be the last weird
and slightly funny thing you’ll run across in the PHP language.
and Remote
One of the most difficult things to get a handle on when it comes to PHP programming
doesn’t have much to do with programming at all. It’s figuring out just how PHP runs,
how it interacts with your web browser and web server, and why it’s not possible
to just double-click a PHP file on your hard drive and see the script in that file run.
If you keep thinking back, you probably added some styling to your HTML pages.
Using the style attribute and <style></style> tags in your HTML document, you
could change fonts, add striping to your table rows, and generally spice up otherwise
boring text.
Then, at some point, some well-meaning web designer slapped your hand and
insisted that you start writing all your CSS in external style sheets, and referencing
those files in the head of your HTML, like this:
<link rel="stylesheet" href="styles/mysite.css" type="text/css" />
You might even have a few style sheets for the benefit of people viewing your website
on mobile devices or printing out a page:
<link rel="stylesheet" href="styles/mysite.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles/print.css" type="text/css" media="print"
/>
But you can still double-click that HTML file, and your browser knows what to do (see
Page |9
Figure 1-2). That’s because, once again, the web browser is completely capable of
not just rendering HTML, but applying all those CSS styles to the page, too. Again,
no extra software needed.
At this point, even though you’re using only two technologies—HTML and CSS—you
need only a single program to handle those technologies: the web browser.
version of your browser to get that version of JavaScript. Just as you can’t upgrade
your HTML installation outside of your browser, you can’t upgrade your JavaScript
installation outside of your browser.
2. Advantages of Php
PHP also known as Hypertext Preprocessor was initially developed as a simple CGI
application for interpreting form defined in HTML
and processing them on the server side.
P a g e | 11
PHP (PHP current version 5.3) is a powerful package that provides an easy to learn programming
language for generating HTML files. It’s
familiar, C-based syntax and the fact that’s it’s free to use make it a very attractive alternative to
other server side languages like ASP.NET
or Ruby.
I’ve decided to use PHP for this application because of the low web hosting prices for PHP
websites and its ease of use and general
reliability.
Another great feature of PHP is its vast support for numerous database systems. The following
database systems are supported by PHP:
PHP offers support for multiple mail services and protocols including IMAP, SNMP, NNTP,
POP3 and HTTP. This makes sending emails directly from the server side a very easy and
straightforward task. PHP instructions can be interwoven with HTML code. The only
requirement is that PHP instructions need to be placed between two special delimiters:
3. Challenges:
P a g e | 12
1. In developing a E-commerce website we should take of several things like it should be cost
efficient,user friendly,items should be displayed clearly. So in creating the work design we
should take care of this factors.
2. PHP Is Not Part of Your Browser: Instead, you need PHP on a web server. It’s the web server
—not the web browser—that can interact with a PHP interpreter. Your browser can handle
HTML on its own,but it has to make a request to a web server to deal with PHP scripts. That
server can take your PHP scripts and run them, and then take the response and send it
back to your browser. Your browser can then understand and handle the response.
3.There are lot of languages like Php,Css,Javascript,MySql,Javaquery are used in the designing
of E-commerce website so I have to dedicate myself to learn all these technologies.
4. Motivation:
1. To design an E-commecce website which is based on latest technologies yet it is very easy to
use and host.
2. In designing an E-commerce I tried to create the basic design as simple as possible yet the
basic structure can be used to host commercial E-commerce website by adding additional
functionalities in the basic structure.
5. Problem Statement:
CHAPTER-2
2. Assuming that the request goes to a web server, the web server returns HTML
(and CSS and JavaScript) or, in the case of PHP, passes the PHP request on
to the PHP interpreter.
3. The PHP interpreter does what it’s supposed to: it interprets, or runs, the
PHP. The result of that should be something that a browser can understand, like
HTML. It passes this result, or response, back to the web server.
4. The web server gives the browser back something that the browser can understand:
the HTML result of interpreting a PHP script, or CSS, or JavaScript,
or a combination of all of the above.
Understanding this difference in how PHP works, as opposed to HTML, CSS, and
JavaScript, is important because it determines the approach you’ll take to writing
PHP scripts and getting those scripts to run.
The bottom line is this: You can write PHP on your own local computer, but you’ve
got two choices for actually running that PHP:
1. You can go through the lengthy process detailed in the next section and
P a g e | 16
install PHP on your local computer. This process will take some time, and
you’ll have to monkey around a bit with your computer at a system and network
level. You’ll also need a local web server to handle the PHP interpreting part of
the gig. This way, you’ll not only have a browser that can handle HTML, CSS,
and JavaScript, but a complete setup that can take on PHP without a problem,
too—right on your own computer.
2. You can write your scripts locally and always upload them to an Internet
Service Provider (ISP) or web hosting company. Every ISP and web hosting
company supports PHP, and you usually don’t have to do anything more than
name your scripts with a .php extension. This option involves less initial setup,
but it means that every time you edit your script, you need to upload it again to
your ISP. It also means that double-clicking your PHP script won’t do anything
more than, at best, open your editor. You can’t test your scripts on your own
Both choices are equally good, and which one you choose depends largely on your
circumstances. Even though it might seem perfectly natural to jump right into uploading
your scripts, you aren’t always going to have a network connection. (The
sound you just heard was the cheering of all the programmers who have an hour-long
commute into work on their local metro or subway!) For those unwired situations,
it’s nice to be able to keep developing on your own computer without the need to
access your hosting provider. Note only that, installing PHP on your own computer
is great for understanding what the PHP interpreter actually does.
For running PHP on my system I have used WAMP which stands for Windows, Apache,
MySQL, PHP.
P a g e | 17
Having a web server running on your local computer isn’t necessary for
developing HTML, CSS, or most JavaScript applications. But because a browser
can’t interpret PHP, a local web server is essential if you want to write PHP scripts
on that computer and run them without uploading them to a server somewhere
P a g e | 18
And the big win: PHP is running! Actually,your browser made a request to
your local web server, your local web server executed some PHP, and then
it responded to your browser with the response from that PHP command.
2.3 Determination by Extension
PHP scripts are identified by the extension .php. Accordingly, web servers that
supports
PHP see a file with a .php extension and hand that file off to the PHP interpreter
for processing. The interpreter does its thing and hands the result of the interpreted
script back to the web server, which in turn passes that response along to a user’s
web browser.
P a g e | 19
2.5 Functions
A function is a block of code that executes only when you tell it to execute. It can be when an
event occurs, like when a user clicks a
button, or from a call within your script, or from a call within another function.
Functions can be placed both in the <head> and in the <body> section of a document.
2.6 jQuery
jQuery is a JavaScript library designed to simplify the client-side scripting of HTML. It’s free to
use, open source and has seen a huge
increase in popularity over the years. The reason why it has become so popular is that it allows
programmers to create complex
animations and effects with relative ease and without requiring vast knowledge in programming
or JavaScript.
P a g e | 20
The heart of jQuery is its powerful selector engine. This allows us to easily access and modify
any HTML tag on the page. For example the
following instruction will target every <div> on the page that has a class of .red
Code
//================== Global Variables====================
$site_title = 'Magazin Online';
$site_url = 'http://localhost/alarmebuzau/';
$document_path = $site_url;
//================== Database Connection====================
$dbUser = "AA";
$dbPass = "aa";
$dbServer = "localhost";
Following these is the function that renders the document head for a page. Some key elements to
note are the inclusion of jQuery library
<script type="text/javascript" language="javascript" src="jquery.js"></script> and the site title
<title>Alarme Buzau</title> . Both
of these are generated with PHP based on the configuration variables described above. The PHP
code that renders the head is as follows:
Code
function display_head(){
global $site_title, $site_url, $document_path;
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional..'<html
xmlns="http://www.w3.org/1999/xhtml" lang="ro">'. "\n"
.'<head>'. "\n"
.'<title>'.$site_title.'</title>'. "\n"
.'<link href="'.$document_path .'css/style.css" media="screen" rel="stylesheet"
type="text/css" />'. "\n"
.'<link rel="shortcut icon" href="'.$document_path .'images/favicon.ico"/>'. "\n"
.'<script type="text/javascript" language="javascript" src="'.$document_path .'script/js/jquery-
1.7.2.min.js"></script>'
P a g e | 21
Code
function isLoggedIn(){
if(isset($_SESSION['user_email']) && $_SESSION['user_email'] != ""){
return true;
}
else{
return false;
}
}
Having taken care of the configuration details, the next thing I coded was the landing page.
The landing page or home page is the first page that a customer sees when he enters the site’s
address in a browser. The general layout
used on this page can be seen in all other pages of the site, thus maintaining a consistent theme.
The only difference between two
pages will be the content area. The basic template for these pages is presented below.
Code
<?php
include 'script/functions.php';
display_head();
?>
<body>
<?php include 'header.php'; ?>
<div id="carousel-container">
<!--carousel goes here-->
</div>
<div class="wrapper">
<!--content goes here-->
<?php include 'footer.php'; ?>
</div>
<script type="text/javascript">
<!--javascript goes here-->
P a g e | 22
</script>
</body>
</html>
The first two lines are written in PHP. They’re responsible for accessing functions.php so that the
variables and functions declared there
are available in the current page. Then the display_head() function is called that will display the
page head.
The next part is responsible for including the page header include 'header.php' . This header is the
top menu that appears on all pages.
The file that’s included contains both HTML and PHP code that is directly inserted in the current
page.
The last important part to note here is the inclusion of the footer which is done in similar way as
the header.
The carousel is created using the Roundabout JavaScript library. In order to make it run two
things are required: HTML markup and
JavaScript code.
For the former all that was needed was a simple unordered list <ul> in which each list item is an
image.
Code
<div id="carousel-container">
<ul id="carousel">
<li><img src="<?php echo $document_path ?>images/sigla.gif" alt=""/></li>
...
</ul>
</div>
And on the JavaScript side, we include the library in the document head and write the necessary
code so that it’s properly initialized.
Code
<script type="text/javascript" language="javascript"
src="'.$document_path .'script/js/jquery.roundabout.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var carousel = $('#carousel').hide();
//initialize the carousel
carousel.roundabout({autoplay:true, autoplayDuration:6000});
//display the carousel
carousel.show();
});
</script>
P a g e | 23
Using jQuery like this $(document).ready allows us to run the code after the page has finished
loading. This way I was able to avoid
problems with the DOM that can arise when you run JavaScript code before the DOM is
completely loaded.
To display the products on the main page I wrote PHP code that goes through the categories and
products tables. The steps needed to
do this are as follows:
1. Connect to the database
Code
$conn = oci_connect($dbUser, $dbPass, $dbServer);
Code
$sql = oci_parse($conn, 'select * from categories where parent is null');
oci_execute($sql);
3. Each of these parent categories corresponds to one of the four columns on the page so the code
will render a column for each row
that’s returned by the database query.
Code
for($i=0; $i<4; $i++){
$row = oci_fetch_assoc($sql);
1<
/li>
<li>For each of the main categories go throught the database and search for subcategories.
1$
sql2 = oci_parse($conn, "select * from categories where parent = '" . $row["NAME"] . "'");
oci_execute($sql2);
Code
$sql3 = oci_parse($conn, "select * from categories where parent = '" . $row2["NAME"] . "'");
oci_execute($sql3);
5. The menu is now rendered. When a user hovers the mouse over one of the 4 main column
titles he will be shown a menu with
subcategories. To enable this functionality, I used JavaScript
Code
$(".menu li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
P a g e | 24
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
Code
$sql4 = oci_parse($conn, "select * from products where category_pk = '" . $cat . "'");
oci_execute($sql4);
<div class="prodDescription" style="margin:15px 0 0 0;">
<a href="<?php echo $document_path ?>product.php?prod_id=<?php echo $row4["ID"] ?
>"><?php echo $row4["TITLE"];
<a href="<?php echo $document_path ?>product.php?prod_id=<?php echo $row4["ID"] ?>">
<img class="thumb" src="img/<?php echo $row4["PHOTO"]; ?>" width="170" height="170"
alt="<?php echo $row4
</a>
<span class="details">
<?php echo $row4["DESC1"]; ?><br/>
<?php echo $row4["DESC2"]; ?><br/>
<?php echo $row4["DESC3"]; ?><br/>
<?php echo $row4["DESC4"]; ?><br/>
<?php echo $row4["DESC5"]; ?><br/>
<?php echo $row4["DESC6"]; ?><br/>
</span>
<?php if(isset($row4["SALE"])){?>
<span>Pret: <?php echo $row4["PRICE"]; ?> Lei (cu TVA)</span>
<span>Reducere: <?php echo $row4["SALE"]; ?> <br/></span>
<span>Pret: <?php echo $row4["PRICESALE"]; ?>(cu TVA)<br/></span>
<?php
} else{
?>
<br/>
<span>Pret: <?php echo $row4["PRICE"]; ?>(cu TVA)<br/></span>
<?php } ?>
</div>
P a g e | 25
3. CONCLUSION:
E-commerce solution is a development model for all businesses from
SMEs to Large enterprises selling products and services online. The model is
envisaged to extend Internet advantage and enabling E-commerce capabilities in
progressive stages to a full-fledged site for business.This website provide users with a
facility to log in so items which they viewed can save in the cart and they can choose
between variety of products.
P a g e | 28
REFERENCES