About the website
This is a sample website for a retail store. The Main Page displays
the different categories, by selecting one it brings you to the Catalog Page.
In the catalog page you can search and sort through items. Users with Administrative
rights can also add, update, and delete items. There is a Log In Page, where a user can
optionally register, or use a profile that's already available (this is a sample after all). If a user is
logged in he can also view the Profile Page which displays his information and allows him to update it
Features
- Security
- Log In
- Modal Dialogs
- Administrative Authorization
- Search
- Sort
- Create, Read, Update, Delete
- Images
- Pages
- Responsive Design
- Navbar
Main Page
The main page is the default page of the website. From there you can see a description of the
website, you can close the modal and reopen later. On top there is a navbar with links to all pages of the website.
Once you're signed in a fourth link will appear the profile page. On the right side your user name and authorization will appear
once your signed in (user, or administrator). In the main page your name if provided will appear. Below you will see a list
of all categories with picture information about the items, and a random example of each category. Credits for the images appear
in a panel below. By selecting one of the categories you will go to the catalog page.
Log In Page
On this page you can either sign in (using a sample profile or your own). You can also register, you have the option
of providing your name and an email address. Signing in will bring you to the main page, once you're signed in the link
will change to log out, by clicking it you will automatically sign out.
Catalog Page
The page displays a list of the items in our catalog. It displays a maximum of six. It can be filtered and
sorted based on category, price, and name. You can also search for a specific item or category. Users with
administrative rights will also be able to update, delete, and add Items.
Profile Page
Only available to users signed in. User will see all available info, and be able to change his name (not username)
and email. Admins will be able to view all users and grant them Administration rights. This is how you can create your
own profile, and then using a sample admin profile upgrade yourself
(On all pages there will be a link to my main portfolio site, feel free to explore my other work.)
About the Code
This website was written using the following languages and frameworks: PHP, MySql, Html, Css,
Bootstrap, JavaScript, JQuery, Ajax, and JSON, and Bootstrap plug-in(for the Modals).
The pages are loaded initially with php directly, however on the
catalog page and profile JavaScript and JQuery are used to handle the front end for the update, delete, add, with ajax
calls to php in the back-end. It is possible to use JavaScript for the initial loading as well, however I wanted to show
how it would be done using php. Php can be used in theory to update and the like, however this would be very slow as
it would require reloading the page every time. The data, categories, users, and items, are stored in Mysql database,
the php uses sql calls to call the information.
Files: this website was designed along the MVC model. There is a one top and bottom for all pages,
separate folders for images, js files, and utilities (classed and tools).
Images: The images are stored in a folder. They were downloaded from
Unsplash there are links to the photographers. They have been compressed for better loading time.
Security: The website uses https to protect data. Where authorization is
required there are checks in the back-end at several stages to ensure they won't be bypassed (see Sessions). All query calls use
prepared statements to protect from injection attacks.
Sessions: All data required between pages as well as log in information are stored in sessions
Links: In order to ensure the filter is preserved between the pages, a getLink
function was created calling the current url and adding the changes.
Classes: There are several classes used. Most are for storing data, but one exception is
the queryBuilder used for the Registration query. It is particularly complicated, because the input varies on the client's preference. The query
builder simplifies it by checking the post data for which fields were entered. Although the update for the catalog and profile,
have similar difficulties, a query builder would have not been useful there , as the item update requires input for
the front end, and the profile update is relatively simple with only two fields.
Filter: The Catalog Page has the ability to search and sort. Each page has a maximum
of six. It's done using php as that's how the data is first loaded.
Create, Update, Delete is possible for admins in the catalog page and for all
users on the profile page. It's done using JavaScript, JQuery, Ajax, as well as php in the backend.
Sql: Data is called and updated using php and mysql. All queries are done with a prepared
statement (see security). Joins are used as well as order and group. In the home page a sub-query is used to get a random item in
each category
Db connection: A db class is used with a db instance to ensure that only one connection is
used per a page
Modals: There are several modal dialog boxes (pop-up). They are called using the Bootstrap plug-in. They give the client valuable information,
as well as giving him a chance to cancel his decision ("are you sure you want to delete this item?")
Design: The design of the website is built using the Bootstrap (version 3.7) front-end framework,
styling is with basic Css
Code: The code itself is written in a clear format with comments
To see more about the code visit me at GitHub
