A simple E-Shop application with PHP and MySQL

SPECIFICATION:

Write a simple E-shop application with PHP and MySQL *. This can be a bookstore, music store, clothing store or whatever you like. There should be a “user interface” that allows customers to select and purchase items (don’t worry about the payment side of things). Ideally, there should also be a password-protected “owner” interface so that the E-shop operator can view / edit inventory and pending orders.

The exercise is intentionally “difficult” given the short deadline, and I don’t expect everyone to necessarily complete it to the last detail. This is taken into account in the marking.

MARKING SCHEDULE:

[A 5%] Ability to write working HTML code (i.e. code that creates successful formatting in a browser window). **

[B 5%] Ability to place an HTML web page on a server so that it is visible on the World Wide Web. ***

[C 10%] Ability to let an HTML form communicate with a PHP script. **

[D 10%] Ability to let a PHP script communicate with a MySQL database. **

[E 40%] Functionality (the extent to which the operation of the software meets – or exceeds – the original specification).

[F 10%] User friendliness (the extent to which the browser is displayed is clear and self-explanatory).

[G 10%] Presentation. (This may include proper use of images, color, text fonts, stylesheets, and dynamic HTML functions.)

[H 10%] Clarity and readability of coding and related documentation (eg use of comments, appropriate indentation, etc.)

COMMENTS:

* If you want to use different web based technologies (e.g., ASP, JSP, Pearl), do so. However, do NOT use high-level software packages that do not require programming skills (eg, “Wysiwyg” HTML editors), as they are more likely to defeat the purpose of taking this module.

** In categories A through D, grades are assigned in a “binary” manner (i.e. the student is given either the full weight mark or else zero). So 30% can be easily obtained by demonstrating a basic knowledge of HTML, PHP and MySQL. The remaining categories are marked “continuously” (ie any number of points between zero and the weighting value can be awarded).

*** In the event of a server failure (or other unsolvable technical issues), Category B is removed and the other categories’ weights are scaled accordingly.

SOLUTION:

My electronic retail application has been sold by the Wandle Industrial Museum for the sale of books and other assorted items.

This development is a logical extension of an existing static website. The data and basic layout of my application are derived from this pre-existing work.

THE MAIN INTERFACE:

the home screen, excluding the original frames used on the museum website. Most of the content in the top and bottom frames is non-functional and included for completeness, this also helps demonstrate the dynamic HTML that yielded secondary navigation structures.

This screen shows the main part of the store information and the “shopping cart” functions at the button. This page gives access to:

1) A complete list of the online “catalog”;

2) A subset of the catalog arranged by product category;

3) A subset of the catalog based on user-defined search terms;

4) more detailed information about an item;

5) Ability to add items to a session-based “shopping cart”;

6) the ability for you registered users to write book reviews;

If a user is new to the application, he / she will receive the message “Welcome. Are you already a customer? Click here to log in”, otherwise they will see their username and a button on the right called “My account” with which they can enter their information to edit. This information is stored in a client-side cookie that is stored for 30 minutes.

ABOUT THE SUMMARY DISPLAY:

The overview of articles shows the article code, title, price, description and stock level of all articles. The display also contains two other options, 1 items that are not in stock are shown in red text. 2 items that are not sold through the online store will be “grayed out”, in either case the “buy” button will be removed from all displays for a particular item.

THE BASKET:

The Shopping Cart Initially, there is no shopping cart until the user adds an item, until a “View Cart” button is currently displaying a standard screen.

When an item is added, the quantity is set to one by default, this can be increased by adding the same item back to the shopping cart or by clicking the Up button on the screen shown here. Once a basket is created and the user enters the system, the following options are available under the product description:

1) clear shopping cart;

2) Continue shopping;

3) Checkout;

If the item is lowered to zero, it will be removed from the shopping cart.

The shopping cart is based on PHP sessions and, unlike the user’s identity, which is retained for 30 minutes, will not persist after the instance is closed in the browser.

If the user is not familiar with the application when he / she tries to complete the transaction, he / she will be asked to log in. If the user has an account, he / she can log in and proceed with the transaction.

If the user does not have an account, he / she must register before purchasing.

ADD ITEMS TO THE SHOPPING BASKET:

Articles can be added to the shopping cart from an overview list or an article description page.

A summary page displays basic item information in a table format without images, such as the one shown on the right by clicking the “buy” button on the left of the item line.

This can also be done from the item detail page, which is displayed by clicking on the item code displayed to the left of the overview screen.

Each item detail page also includes a “buy” button, as well as the other shopping cart tools. These are on the overview page, but you have to scroll at the bottom

The database supports two types of items, “books”, as shown above, which contain information specific to reading material, and “goods” which contain only basic information about the item, item code, title and price.

If images are not available, a replacement is automatically set until the administrator specifies a real image.

ABOUT THE USER:

If the user is not familiar with the application when he / she tries to complete the transaction, he / she will be asked to login, if the user has an account, he / she can login and proceed with the transaction

If the user does not have an account, he / she must register before purchasing. Here we see the effect of an invalid attempt to register a new account. The user is provided with a text description of the error and the suspicious entities are marked sequentially until all anomalies are resolved.

After the user has registered, he / she will be asked to print the form for his / her reference. Then you are logged in and can bypass authentication when purchasing.

The application is hard coded with one administrative account, the username is “system” and the password is “god”. There is currently no way to change this.

The administration display allows users to:

1) define new item types;

2) Edit and delete users;

3) Add, edit and delete categories;

In this screen, the user can edit an existing data item in a specific category, identified by the product key, or create a new product date item. The application contains a specific set of validation criteria as shown in the following figure. Items are displayed numerically, from left to right.

Here we see the result of a failed data entry operation, indicated by crosses to indicate invalid or missing entries for certain fields, and a check mark indicates that the field is valid.

It is possible to have a blank correct entry – if there are no images, for example, these boxes should be left blank.

The question mark is to double check the intention to leave empty in some cases

This screen shows that the administrator has chosen to delete a user account from the database – the edit and delete functions use the same screen, except that the edit function does not show the deletion warning

The interface The image shows the first (welcome) screen, excluding the frames used on the museum website.

This screen shows the main part of the store information and the “shopping cart” functions at the top and the button. This page gives access to:

1) A complete list of the online “catalog”;

2) A subset of the catalog arranged by product category;

3) Ability to order the catalog by product code, price or title, in order of access;

4) A subset of the catalog based on user-defined search terms;

5) more detailed information about an item;

6) Ability to add items to a session-based “shopping cart”;

If a user is new to the application, he / she will receive the message “Welcome. Are you already a customer? Click here to log in”, otherwise they will see their username and a button on the right called “My account” with which they can enter their information to edit. This information is stored in a client-side cookie that is stored for 30 minutes.

The administration display allows users to:

1) Define new item types;

2) Edit and delete users;

3) Add, edit and delete categories;

4) add, edit, move and delete products;

5) Edit and add help information;

6) Create and restore table dumps;

DATABASE DICTIONARY:

A data dictionary defines the commonly used terms, codes, and conventions used. Below are the database lookup tables required for the store’s database application.

Table: bookinfo:

Comments: Book specific metadata. Field Type Null Default
code varchar(5) No No
author varchar(50) No Unknown
publisher varchar(100) No Unknown
isbn varchar(15) No None
illustrations varchar(15) Yes Yes - gray
date date Yes NULL
dimensions varchar(100) No Unknown
summary text No
type varchar(16) No

Table: categories:
Comments: Product metadata Field Type Null Default
id int(3) No
name varchar(50) No
etype int(1) No 2
Keywords varchar(100) No

Table: customers:
Comments: Customer billing information. Field Type Null Default
uname varchar(15) No
first_name varchar(25) No
last_name varchar(25) No
phone varchar(20) No
email varchar(50) No
zip varchar(10) No
city varchar(50) No
country_code int(2) No 0
bill_address varchar(90) No
changed timestamp(14) Yes NULL

Table: orderdata:
Comments: Customer order information Field Type Null Default
ordernumber int(5) No 0
itemcode varchar(5) title varchar(100) No
quantity int(3) No 0
total float No 0
status int(11) No 0
stamp timestamp(14) Yes NULL

Table: orders:
Comments: customer order refferance data. Field Type Null Default
uname varchar(15) No 0
ordernumber int(5) No
status int(1) No 0
date date Yes NULL

Table: reviews:
Comments: user book reviews and rations. Field Type Null Default
uname varchar(15) No 0
type int(1) No
rating int(1) No 0
stamp timestamp(14) Yes NULL
review text No

Table: products:
Table comments: Primary product data. Field Type Null Default
code varchar(5) No
category_id int(3) No 1
title varchar(100) No
keywords varchar(255) No
small_image varchar(15) No nopic.jpg
large_image varchar(15) No nopic.jpg
description text No
price decimal(5,2) No 00.00
date_modified date No 0000-00-00
status int(1) No 1
Table: purchase:
Comments: Primary product data. Field Type Null Default
code varchar(5) No
date timestamp(14) Yes NULL
stock int(3) No> 15
cost decimal(5,2) No 00.00

Table: pwl:
Comments: User password/access information. Field Type Null Default
uname varchar(15) No
upass varchar(100) No 5d2e19393cc5ef67
created timestamp(14) Yes NULL

Table: syshelpindex:
Comments: System help subject index.Field Type Null Default
cat int(2) No 0
subject varchar(30) No

Table: syshelpinfo:
Comments: system help information.Field Type Null Default
cat int(3) No 0
title varchar(30) No
info text No
image varchar(20) No
type int(1) No 0

FILE STRUCTURE:

The electronic retail application has been sold by the Wandle Industrial Museum for the sale of books and other assortment. This development is a logical extension of an existing static website.

The files of the application are stored in 9 subfolders. These are the following:

../htdocs/order.htg/ This is the root directory of the web application, it contains all the resources related to the website. All generic files and auxiliary elements are stored at this level. (3.74mb 263 files)

  • continufo.php – contact and order information (PHP 4.01kb).
  • create_db.sql – Database structure (SQL dump 5.82kb).
  • credit-cards.gif – Usable credit card types (image 2.02kb).
  • cvc.jpg – Clarify where to find a CVC value (image 6.0kb).
  • dictionary.txt – MYSQL Data Dictionary (text 2.85 kb).
  • discount.gif – Animalized 10% discount for message from members (image 111.kb).
  • discount1.gif – Advertise with a 10% discount for members (image 53.6kb).
  • avicon.ico – Picture of a simple water wheel (icon 318b).
  • index.htm – Custom website 404 error page (HTML 1.76kb).
  • new_ani.gif – An animation of the word ‘new’ (image 1.66kb).
  • offers.gif – Image of the text ‘view these special offers’ (image 1.77).
  • pleasenote.gif – A burning animation of the text ‘pay attention’ (image 14.7kb).
  • reset.gif – Graphic input form reset button (image 1.28 kb).
  • shop.gif – Small photo of the real museum shop (image 7.31kb).
  • submit.gif – Graphical input form submit button (image 1.18kb).

../htdocs/order.htg/common.htg/ This folder contains all the common utility scripts and other resources that the web application depends on. (185 kb 50 files)

  • about0.gif – Image of the text ‘homepage’ (image 0.98kb).
  • alart.gif – Animal rotating red warning lamp (image 2.04kb).
  • alert.gif – A human skull with the word ‘warning’ (3.39kb).
  • archive0.gif – Image of the text ‘archive’ (image 970b).
  • backg.jpg – Background drawing with a watermill as watermark (image 13.6kb).
  • background.jpg – Wallpaper with a marble stone effect (image 4.59kb).
  • basic.css – Website layout and layout descriptions (stylesheet 7.53kb).
  • brics.gif – Animalized exposed circuits in a wall behind the wallpaper (image 7.46kb).
  • caurtion.gif – Animalized rotating caution road sign (image 6.53kb).
  • cnote.htm – Website copyright and attribution information (HTML 1.95kb).
  • constants.inc – Global data values ​​apply (PHP includes 161b).
  • contact0.gif – Image of the text ‘contacts’ (image 976b).
  • db_lib.php – Common functions and utilities for database access (PHP 25.2kb.
  • disclaimer.gif – Animalized flashing image of the text ‘disclaimer’ (image 4.57kb).
  • email2.gif – Drawing of a mailbox over a globe (image 1.12kb).
  • fax.gif – Drawing of a basic fax machine (Figure 231b).
  • feed0.gif – Image of the text ‘feedback’ (image 990b).
  • focus.js – Script to place the focus on a hidden pop-up window (javascript 165b).
  • home0.gif – Image of the text ‘general’ (image 967b).
  • iiv.gif – Transparent image of the Investing in Volunteers logo (image 2.63kb).
  • iiv.fpg – Opaque image of the Investing in Volunteers logo (image 4.49kb).
  • index.htm – Custom website 404 error page (HTML 1.76kb).
  • info.gif – Transparent museum logo with contact details (image 2.31).
  • jfooter.js – Code for dynamically generating page footer information (javascript 2.41kb)
  • letter.gif – Drawing of two simple letters (image 698b).
  • linksb.jpg – A spider in a web on a small image from a browser (image 1.18.kb).
  • linkware.gif – Transparent image of the text ‘all materials on this website are link ware’ (image 1.56).
  • map0.gif – Image of the text ‘sitemap’ (image 989b).
  • members0.gif – Image of the text ‘members’ (image 984b).
  • misc.inc – Freeola SQL service access authentication credentials (PHP includes 144b).
  • news0.gif – Image of the text ‘newsletter’ (image 947b).
  • l_misc.inc – SQL authentication information for my server (including PHP 144b).
  • nopic.jpg – Notice that no photo is available (Figure 5.40).
  • order0.gif – Image of the text ‘Mail Order’ (image 0.96kb).
  • phone.gif – Transparent image of a red telephone (image 281kb).
  • print.css – Screen layout descriptions (stylesheet 3.65kb).
  • registration.gif – Opaque image of the registered museum logo (image 428b).
  • registered3.gif – Transparent image of the logo of the registered museum (image 2.80b).
  • resize.js – Code to dynamically change a window to the image size (javascript 1.05kb).
  • search.gif – Image of the text search ‘(image 108b).
  • sqldumper.inc – Code to dynamically create an SQL dump file (including PHP
  • stop.gif – Transparent image of a red hand (image 2.64 kb).
  • time.js – Code to dynamically display a countdown timer (javascript 591b).
  • toc.js – Code to dynamically display a navigation structure (javascript 3.34kb)
  • wandlemuseu.gif – Transparent animated image of the text ‘The Wandle Industrial Museum’ (image 42.3kb).
  • webbo.gif – Transparent image of the head of webbo (image 1.16kb).
  • webo1.gif – Transparent image of webbo (image 3.81kb).
  • wimlogo.gif – Opaque image of the museum’s waterwheel logo (image 417b)

../htdocs/order.htg/data_backup/ This folder is used to store SQL dump files. (242kb 3 files)

../htdocs/order.htg/help/ This folder is used to store images for the help desk database. (336 kb 26 files)

../htdocs/order.htg/images.htg/ This folder is used to store images for the store database. (2.41mb 91 files)

../htdocs/order.htg/mysqlsnips This folder contains a set of text files related to sample SQL commands.

../htdocs/order.htg/shop.htg/ This folder contains all the source files related to the public parts of the store database scripts and other template resources that the web application depends on. (85.1kb 20 files)

  • basket.php – Create and maintain a session based shopping (PHP 9.29bk).
  • book_detail.php – Code block for displaying detailed information for a selected book (PHP 2.41 kb).
  • buttons.inc – Code block for displaying promotional bottoms with regard to product information (including 2.43 kb).
  • catalog.php – Generates user view of the primary catalog interface (PHP 6.63kb).
  • checkout.php – Script for updating the product and order database (PHP 5.02kb).
  • help.php – Display of user view of the system helpdesk interface (PHP 6.71kb).
  • login.php – Script for user login operations and database management (PHP 7.91).
  • old login.php – Legacy login script (PHP8.99kb).
  • orderend.php – Code block for displaying shopping cart buttons (PHP 1.36kb).
  • ordertop.php – Code block for displaying shot information and primary operation (PHP5.73kb).
  • pagefoot.inc – Code block to create the final HTML page structure (Includes 801b).
  • pagehead.inc – Code block to create the starting HTML page structure (including 854b).
  • product_detail.php – Code block for displaying detailed product information (PHP 1.15kb).
  • product_list.php – Code block for displaying summary item information (PHP 3.07kb).
  • product_show.php – Code block that displays alternative summary information (PHP3.16).
  • prompt.inc – Code block for displaying a message to the user (including 897b).
  • signin.php – Easily display login screen for login. (PHP 3.08kb).
  • terms.php – View terms and conditions (PHP 5.83kb).
  • terms2.php – Show terms and conditions up to a child window (PHP 5.75kb).
  • thankyou.php – Display the final confirmation screen (PHP 3.28 kb).

../htdocs/order.htg/update.htg/ This directory contains all source files related to the store database management areas and other utility scripts. (240kb 34 files)

  • addcat.php – Add additional item categories to the database (PHP 2.18kb).
  • addproduct.php – Add additional items to the database (PHP 6.30kb).
  • admin.php – Website content management interface (PHP 65.9kb).
  • backup.php – Generates database dump files (PHP 5.21kb).
  • berror_form.inc – Current errors for new book database items (including PHP 3.0kb).
  • bookinfo.inc – Code block for entering book data (including 6.64kb).
  • bookup.inc – Display editable book information (including 10.2kb).
  • buttons.inc – Code block to create edit command buttons (including 4.41 kb).
  • change.php – Source code for update confirmation messages (PHP14.4kb).
  • edithelp.php – Allows editing and creating help desk information (PHP14.0kb).
  • entbuttons.inc – Code block for data entry forms command buttons (including 1.21 kb).
  • error.gif – Transparent image of a cartoon cross (Figure 118b).
  • fine.gif – Transparent image for a cartoon (image 126b).
  • help.php – Display administrator view of the system help desk interface (PHP 6.22kb).
  • index.php – Administrator access to database change functionality (PHP 12.5kb)
  • invoice.php – Generate display customer invoices for printing (PHP 5.33kb).
  • mysqlsend.php – Allow user to execute custom SQL statements (PHP 4.59)
  • newcat_form.inc – .Display new the category name error correction (including 773b).
  • newname_table.inc – Show new product entry form (including 438b).
  • newproduct.php – Update / delete data from the inventory database (PHP 781kb).
  • newtypeform.inc – Display a new category entry form (including 563kb).
  • note.inc – View system information messages (including 524b).
  • oldorders.php – Show closed order summary data (PHP 3.22kb).
  • orders.php – Show selected open order information (PHP 7.77kb).
  • perror_form.inc – Display product information errors (including 1.99).
  • productinfo.inc – Display product entry form (including 3.68).
  • productup.inc – Display editable product information (including 7.02kb).
  • quest.gif – Transparent image for a question mark (Figure 114b).
  • stock.php – Overview of administrative stock data (PHP 9.07).
  • upload.jpg – Graphic upload button (image 1.84kb).
  • upload.php – Copy images to the images.htg folder on the server (PHP 5.40kb).
  • userorders.php – View the history of user orders (PHP 2.36 kb).
  • users.php – Display editable user login information (PHP10.04kb).



Source by Michael Hart