Product management Tool for ESSVE

Welcome to my Product management Tool for ESSVE, To provide easy navigation and access to products that isn't for sale, I've created this Tool. It's like an e-commerce without the buying functionality.

UX

I've created this website so that the staff of ESSVE can locate products and the product information, in an easy matter. This regards only products for internal usage, like interior, give-aways, brochures, etc.

*It has an easy navigational layout with a reacurring structure for easy use. *It presents the products devided into categories, in a easy to understand and overview manner. *It will have filtering functions and search-functions. allthough these isn't finished yet. *It will also be possible to create "shopping-lists" from here and generate a excel or pdf to use when placing an order.

I have been working at ESSVE for almost 7 years as a customer service representative and it has always been a struggle to locate this type of products for us and our sales staff. It was clear to me that this is what I had to create once I got some knowledge of JavaScript.

I started of making a list of all the futures that I needed, Which now is included although not all done.

It was clear to me how the layout would look so I skipped over the wireframe-part, also concidering I needed to convince none this was a good idea.

I have focused on the overall functionallity before the layout so have indulgence, this is a (for me) huge and ongoing project.

Features

Existing Features:

• A login page so only those who should have access is the only ones that gets access. Managed by PHP and MySQL.
• Category filtering based on properties of the product. Managed by JavaScript.

Future Features to be included:

• A working searchbar to search for products.
• Product filters.
• A nice profile page from where one can manage change of personal information.
• The ability to create a shopping list by adding products from the site or product pages.
• I'm hoping to be able to add the possability to generate product shelf labels as well.
• I also need to add more functionality to the filtering of categories so that everything works properly. At this moment not all choices render content.

Technologies Used

• HTML5 - for content.
• CSS - for styling.
• JavaScript - for the logics.
• PHP - for the login authentification.
• JSONBin.io - for the database and the API.
• MySQL - the database for managing user credentials.
• Bootstrap - for easy creating the overall layout and functions.
• Font Awesome - for inclusion of icons.
• Jquery - to simplify DOM manipulation.

Testing

I've been running Quokka and prettier extensions on VS Code for troubleshooting and arranging code. Because it's not more code than I can manage myself I've been satisfied by running the validators JSHint, freeformater and css-validator. I've also used the debugger in Chrome to step through all lines of the JavaScript Code.

All testing has been done manually by me, except the validating. And I'm picky, so rest a sure I'll always do anything in my power to deliver a properlly working site. All testing is done sequential, and structured.

Deployment

I installed Apache2 tougheter with MySQL and PHP on a Raspberry Pi and setup DynDNS on my router. the page can be viewed on theelement.asuscomm.com/essve and the user credentials is test for username and password.

Credits

Content:

• I've used Code Institute projects 'API-testing' and the 'UCD Resume' as referense for the JavaScript code.
• I've used Codeshack as a guide to setup the authentification. Most of the PHP is also from here.
• I've also used This bootsnipp and This bootsnipp as referense when creating some of the content and layout.

Media:

• ESSVE for the pictures.

Acknowledgements:

• Code institue for giving me the knowledge I've recieved so far.
• My mentor Mr. Sandeep Aggarwal for his insights.
• All friends and acquaints for all the support.
• My employeer ESSVE Sverige AB for supporting me and my project.