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!)
4. Deliverable 2: Sketch of the Welcome and Contact page
Here's where your creativity comes in: Look at the welcome page of any online hardware/computer store and find the most important aspects they share.
The name of the welcome page should be index.php.
1. Provide a company name and header – make up a company name and style it nicely
2. Provide links to the following functions (3 pt/ea = 15)
1. Home – will always bring the visitor back to this page
2. Contact– company and contact information (make it up)
3. Browse categories
4. Browse products
5. Shopping cart
Except for the first two (Home & Contact) do not implement any of these pages, this will come over the next exercises and projects!
3. Somewhere close to the top of each page provide a login form (user name & password). Don't implement the login process yet, the form should just sit there. To learn more about that, look for example @ https://www.html-form-guide.com/php-form/php-login-form.html.
4. Somewhere prominent on each page place a dummy search box which we'll use later to allow searching for products – this also doesn't have to be implemented right now.
5. Use (an) external style sheet(s) (https://www.w3schools.com/css/css_howto.asp) and place them (it) in the /css subdirectory.
6. Build a “Contact” page, containing the (made up) company information and a (dummy!) email address. Also provide a legal “disclaimer” that absolves you from any liability claims that might originate in the use of your site3. Use the same layout for the contact page as you did for the home page.
5. Submission
As in the last exercise, pack your whole htdocs directory into a zip archive and drop it into the eLearning dropbox. Also submit your .sql file separately (it's not supposed to be in your htdocs, remember?)
3 Here's a pretty comprehensive one: https://www.freenetlaw.com/free-website-disclaimer/