Project of Team JIS [Junyi, Isaac and Sven]
Features: -Log-in system -SQL database of various tech items
Report of JIS-TECH Written by Sven Gerhards. Reviewed and discussed with Isaac Clancy and Austin Chen.
About
The purpose of this report is to introduce our JIS Tech Project. Every feature and design decision will be listed and discussed in details. We continuously worked on our project using GitHub (https://github.com/Paraakie/JIS-TECH)
Features User-Accounts
A user account has five variables. First off all is the ID, which is generated by the program followed by a Nickname, Username, Password and Email Address. Bothe Username and ID must be unique and can only be alphanumeric. The Password has to be between 7 and 15 characters long including one capital letter. After registering, the user will be logged-in automatically.
Details of User-Account
*The User ‘TheToolman’ was implemented as requested.
Log-in & Sign-Up page
In order to use our website, one has to create a user-account by going to the Sign-up page. If one has an account they can log in through the log-in page.
Home-Page
Whenever a user logs in, they will be redirected to the main menu. At this stage, one is greeted by a welcome message and a user instruction. Furthermore, the user can navigate to the Search-Page and the Browse-Page, as well as log-out.
Search-Page
The Search page functionality was implemented using AJAX. Once the user starts typing in the search bar, products with a matching name will be displayed. On the other hand, if there is no inputs in the search bar, all products will appear.
Browse-Page
The browse page uses buttons to filter all available products. One can also click the product properties to sort them. The products are displayed in a table.
Top Menu
The Top-Menu was contained in a ‘div’, using a CSS #id made it easy to design the Top Menu.
Products & Categories We agreed to create a tech company, JIS Tech, hence all products are computer hardware related. The properties of products are ‘Name’, ‘SKU’, ‘Cost’, ‘Quantity’ and ‘Category’. E.g. Gaming Laptop, PC01, $4000, 20, PC Twenty Products and five Categories have been implemented.
Details of Product and Category Object
Design Choices
Footer
As shown by its absence in the above screenshots, the footer is always at the bottom of the page.We designed the website this way to avoid overlapping the long product table as well as personal preference.
Database schema and Relations
The database contains users, products and categories. Only Product and Category are related to each other. This is used in the browse-page to easily find all products from one category.