Web Design for E-Commerce Project 2 – Due: see eLearning 

We're now going to start with a small website! Four things need to be done: 

1.       Set up the basic site structure

2.      Define the basic DB structure

3.      Start filling the DB

4.      Outline the basic design for our welcome page

For more information look at the text book, Chapter 3, p. 48ff as well as Chapter 7, pp. 162ff. We'll use a slightly simpler model than the second site and you will have some more freedom to make your design choices. 

Lots of examples and inspiration can be found on the book's companion site:

https://www.larryullman.com/books/effortless-e-commerce-with-php-and-mysql/ 

1.  Our products 

We're going to sell computers (we all know something about that, I hope) in the following three categories: 

1.       Desktops

2.      Laptops

3.      Tablets 

2.  Server layout (1st version) 

The book in Chapters 3 and 7 describes the basics of the directory structure – we'll use a slightly less complicated middle way here: 

/htdocs

/includes

/css

/images

/admin

/products

/customers

3.  Deliverable 1: DB Schemata and some data  

The design will evolve over the next couple of projects, so make sure you can quickly modify the database schemata and replace the DB contents by simply running the new script. 

3a. The DB design for the product side should have (at the moment) the following tables: 

1.      Categories (one record for each of the three categories above)

with a name, a short description and the URL of a representative icon1 (jpg) 

2.      Products (one record for each product we're going to sell)

with a name, the category (foreign key!), a short description, a price, a current stock supply  and the URL of a representative icon (jpg) 

For each table, make sure you have a surrogate primary key! (8 pt/ea = 16) 

Produce INSERTs for the three categories and at least two products in each category (you can make the data up. (3+6 = 9 pt) 

The jpgs should all be 128x128 and stored in the /images subdirectory of htdocs. (1/ea = 9 pt) You can use any kind of fake images you want; https://www.codefear.com/icons-2/25-free- computer-icons-sets/ seems to have some free ones2. You might have to resize them – GIMP (https://www.gimp.org/) is much more than good enough for that! 

3b. Create two SQL Queries for your products; place them into your .sql file. (3 pt/ea = 6) 

1.  All tablets (products in the “Tablet” category) that cost less than 400$ (make sure you have at least one) 

2.  All available laptops (those with a stock supply > 0)  

3c. For the customer side for the moment we're happy with just one table: 

1.  Customers

with first/last name, one address field, city, state and ZIP 

Create INSERTs for at least two customers! 

The resulting script should be stored directly in the /xampp directory, so you can easily find it and use phpmyadmin to run it against your database. Placing it inside the /htdocs directory would be a bit of a security risk, because someone could use the server to download it.

1       If you store an icon under /htdocs/images/a.jpg, the URL would be https://localhost/images/a.jpg.

2       Neither me nor UWF, nor any of its divisions can be held responsible for information contained in pages reachable over any external link provided. This includes views expressed on these websites or content that might be harmful or illegal. Ultimately, it's in the user's responsibility to assess risks and legal consequences of using these links. (We'll talk about disclaimers a little further down!)