Amazing E-Grocery is a simple web application that provides limited items (only one in the stock) that can be purchased by online service. Users are able to see the displayed products in the home page only after they can pass through the registration or login process. Each products displayed is also companied with their prices and description. There is also a cart feature so users can keep track of their products before doing a check-out. The main functionality of Amazing E-Grocery app is account management in the Profile menu and Account Maintenance menu. Regular users can change their personal information, while Admin users has the access to update regular user's info data store in the application and delete any account. This web application was made by HTML, CSS and JS with PHP logic and Laravel 8 Framework that uses MySQL to connect to the database.
Amazing E-Grocery was built with Model View Controller (MVC) architecture.
- Download and unzip the project.
- Install XAMPP, then start Apache and MySQL module (make sure these two modules are active, otherwise the application can't connect to the database and won't start).
- Go to http://localhost/phpmyadmin/.
- Open the project's directory in a terminal and run the command:
- php artisan storage:link (so the images can load)
- php artisan serve
- Open the link given after the last command to open the web application.
Please contact me if you run into any problem when trying to run the app
To login as admin, check the credentials on AccountSeeder file.php
Below is the database design / table structure of the application:
Below is the preview and/or flow of the application:
The index page of the web application is shown below
“Amazing E-Grocery” web application can only be accessed by the user that has already registered & do the login process; hence every user needs to register first. Below are the application’s “Register” and “Login” page.
When the user is already done the registration process and log in, the "Home" page will be shown.
The “Home” screen shows a maximum of 10 grocery items. If there are more than 10 available items, then the “Home” screen will show the remaining items on the next page (page 2 and so on). The example of “Home – Page 2” can be seen on the below picture:
In the “Amazing E-Grocery” web application, there is be a difference between the “User” and “Admin” navigation. The difference is the “Account Maintenance” menu, which only can be accessed by the “Admin”. Other than that, “Home”, “Cart”, and “Profile” menu can be accessed by the “User” and the “Admin”.
The “User” and “Admin” can buy one or more E-Grocery by clicking the E-Grocery title on “Home” page and “Buy” button. The chosen E-Grocery will be shown on “Cart” page as shown on the below figure:
On “Cart” page, the E-Grocery list can be deleted by clicking the “Delete” button. For example, here, the “Vegetable 1” is deleted & the “Cart” page will only show the “Vegetable 11”:
When the list is finalized, the order can be made by clicking the “Check Out” button. If it succeeds, then the “Success” page will be shown (below figure):
Other than the E-Grocery shopping feature, the “User” and “Admin” can change their personal data on “Profile” menu. If it succeeds, the “Saved” page will be shown:
Specifically, for the “Admin”, the “Account Maintenance” menu can be accessed to change the account’s role by clicking the “Update Role” link & delete the “Amazing E-Grocery” application’s account by clicking the “Delete” link:
If the role is successfully changed, then the new role will be shown immediately like the below figure:
And if one of the accounts is successfully deleted, then the account will not be shown any more like the below figure:
Finally, if the “User” or “Admin” is logged out from the application, the “Log Out Success” will be shown. After logging out, the user’s session will be deleted automatically & the application will be redirected to the Index page. The “User” and the “Admin” must log in again if they want to access the web application.
