Note: This README.md file is to demonstrate a collaborative website project created for a web programming course which taught the fundamentals and the application of HTML, CSS, JavaScript, and PHP. The website is no longer being hosted due to funding.
Ryan Guzelian
Suha Abubakr
Inas Fawzi
Megan Coscia
Denis Oh
For a web programming course, create a website that would simulate the experience on a grocer's online store. The website comprised of 2 parts:
- A Front Store:
- This side of the website can be accessed by any user. The client could browse the aisles of the grocery store, broswse through the products offered by the website, add said-products to their cart, and create an account to place their order.
- A Back Store:
- This side of the website could only be accessed by the admin's login. The entire list of products, orders and users could be modified by either edtiing, adding or deleting to them.
Our team used a series of languages to perform different actions:
- HTML to structure our pages
- CSS / Bootstrap to design the style of the pages
- Javascript to perform functions and make pages dynamic
- PHP to store and access data as well as create pages dynamically
Snce we have not learned about databases at the time, we stored data onto XML files - one for the list of products, one for list of orders, and one for the list of users. We used PHP and Javascript to access the contents of these files as well as modify them.
- SOEN 287 (Web Programming) Project - Online Grocery Store
frontstore.mp4
backstore.mp4
The index page is the home page of the website. It displays all the aisles of the grocery store that can be selected.
When you login into the page, the index page displays a welcome message to the user.
When clicking the logo, the user is redirected to the index page.
To ensure responsive, a nested dropdown menu is used to embed all the products and aisles into the navigation bar.
Links to the signup, signin and the shopping cart pages can be accessed from the navigation bar.
The aisle pages display all the products within that category. You are able to add products to the cart without having to access the product's page.
These pages were created dynamically using a template HTML file and Javascript. It loops through the correct XML file and retrieves the products from that specific and displays them.
To access a product page from this page, you could click on either the product's image or name.
The product pages displays all the information regarding the product which included its name, weight, price, as well as a description which could be viewed by pressing "...More Description".
You can choose a quantity to send to the shopping cart by either entering a number manually or clicking the arrows withing the number input.
All the product pages are created dynamically using a template HTML file and Javascript. The URL stores some of the product info and the rest is retrieved from the product list XML file.
To get redirected to back to the aisle, an embedded link of the aisle is place at the top of the card on the right.
To access the signin or signup pages, clicking the links on the navigation bar will suffice.
To sign up as a new user, you must fill in a complete name, an email as well as enter the same password twice - you will not be able to proceed with mismatching passwords. Once having signup, it redirects you to the signin page to login. Once logging in, it redirects to the index page with a welcome message to the user.
To create these pages, PHP and Javascript were used to perform functions as well as modify the XML files.
Signup Page:
Signin Page:
When pressing the "add to cart" button on either the product or aisle pages, it sends the user to the shopping cart page to view the items in their cart. The number of items is displayed as well as cost-related information: subtotal, the separate taxes (GST and QST), and the final total of the purchase.
The user can change the quantities of the items of items in their cart or completely remove an item from their shopping cart.
When clicking the "Checkout" button, the order is saved to the orders XML file, an alert thanks the user for their purchase and the cart page is reset.
cart.mp4
They can decide to checkout or continue browsing the website. If the user clicks the "Continue Shopping" button, an alert tells the user the contents of their basket has been saved and they are sent to the index page.
continue.mp4
To create this page, PHP and Javascript were used to access the contents of XML/webpages, allow the user to manpulate the elements on the page, and writing to XML file.
The back store has three main pages: users, orders, and products - each of these pages have another page to edit or add products. These main pages have files called p7.php, p9.php, and P11.php.
These can only be accessed when the admin user signs into the wesbite.
admin_login.mp4
If a user tries to access the pages without being the admin, then the user is sent to the index page instead.
backstore_authentication.mp4
However, once logged in, if the admin user wants to view the front store, they can press the "Client Site" link in the navigation bar.
back_to_front.mp4
As long as they are still logged in, to return back to the backstore, the admin will see a link on the navigtion bar of the front store called "Backstore". By clicking this link, they will return back to the backstore.
front_to_back.mp4
The orders page displays all the orders that have been placed on the site by clients using the front store. When a user clicks checkout, the items in their cart will be written to an XML file. This XML file is read using PHP and all the orders are displayed on the back store's order page.
Next to each order, there are two buttons - "Edit" and "Delete". These buttons can be found on the products and users pages as well next to each element.
When clicking the "Edit" button, the admin is redirected to a page where they can modify the contents fo the order. The quantity of the current items can be increased, decreased or removed as well as new products can be added by knowing the item IDs - lowercase and spaces removed of the item's name. Clicking "Save" will rewrite the order to the orders' XML file.
When clicking the "Add" button, it brings the admin to a similar page as the "Edit" button except is blank for the admin to add products at will.
When clicking the "Delete" button, the element is removed from the XML file and will no longer appear on the orders page.
The users page displays all the users - the main page only displays the user's full name and their email. The user's password can only be viewed when the admin clicks on the "Edit" button.
When clicking the "Edit" button, the admin is redirect to a page where they can modify the user's personal information which includes their first and last name, their email, and their password. The contents of the page are shown in the text inputs which the admin can change. Clicking the button at the bottom of the page will rewrite the user's contents to the users XML file with the edited informaton.
When clicking the "Add" button, it brings the admin to a similar page as the "Edit" button except all inputs are blank for the admin to add the user information at will.
When clicking the "Delete" button, the element is removed from the XML file and will no longer appear on the users page.
The products page displays all the products sold on the website to the clients. All the information required to make a product page in the front store is stored in an product list XML file. This would include, the product's name, aisle, image, weight, description, and price. The product's ID is only in the XML file and only accessed when creating the product pages in the front store through Javascript.
When clicking the "Edit" button, the admin is redirect to a page where they can modify the product's information which includes the name, aisle, image, weight, price, and description. If the admin does not choose a new image, the previous image will be used. Otherwise, the new image will replace the old image on the XML file. Different input types are used to satisfy certain limitation on different information. The button at the bottom of the page will rewrite the product's contents to the product list XML file with the edited informaton.
When clicking the "Add" button, it brings the admin to a similar page as the "Edit" button except all inputs are blank for the admin to add the product information at will.
When clicking the "Delete" button, the element is removed from the XML file and will no longer appear on the products page.
One of the requirements of the project was to have the website pages' be responsive. The following are demonstrations of the responsiveness on different pages:
-
Index Page:
index-res.mp4
-
Aisle Page:
aisle_res.mp4
-
Product Page:
product_res.mp4
-
Shopping Cart Page:
cart_res.mp4
-
Signup Page:
signup_res.mp4
-
Signin Page:
signin_res.mp4