The Motor Deal Project
December 2014 to January 2015
Digital Eyes Media
The website can be found at www.motordeal.co.uk.
It is only accessible by Motor Deal members so I have created this page to give you an overview of the project with screen shots. Sensitive data has been removed.
The Home Page
The three vehicle cards at the top of the page are on a custom JavaScript slider that moves and stops on each vehicle.
Below are the quick navigation drop down boxes. Once a Brand is selected the list of Models that belong to that brand populate the next drop down menu using AJAX. This allows the user to quickly jump to a specific vehicle.
The images of brands are simply links to individual pages for those brands.
As with all projects this site had to be responsive for mobile and tablet users.
Try scrolling in the mobile to get an idea of how the page has dynamically changed to fit the device.
The Interface
Vehicles are represented by cards which include basic details and some buttons (Fig3). When a button is pressed data specific to that vehicle is loaded and displayed using a light box. (Fig4, Fig5 and Fig6).
The Database
This project required a database to be constructed to contain the ≈10,000 or so vehicles. The data was normalised and sorted into tables. This reduced the number of database calls when the website was to be populated and therefore made the website faster and reduced server load.
This Logical Entity Relationship Diagram that I created for the documentation for Motor Deal shows the shows the relationships between the different tables.
The Data
The details on the vehicles were provided by the manufacturer company called CAP. To update the Motor Deal database I created a script to run daily that linked with CAP's API. This script imported and updated all of the necessary fields in the database whilst maintaining any user made changes to the vehicles.
CAP provided the data in a plain text format. The data was simply an SQL table output with fields limited by a specific number of characters (Fig8).
The Admin
Each of the vehicles had properties that were to be edited by Motor Deal before displaying to the customers. This was done using an admin control panel, an example is shown below (Fig9).
This table can be edited and updated. It can also be bulk updated. All of the fields are updated on the server and the client using AJAX, this means that the page does not need to be loaded again in order to see the changes. This allows a number of changes to be made quickly and for the calculated results to be immediately seen.
The "list price", "our price" and "savings" are calculated using a combination of the basic price, delivery, profit, manufacturer support percentage and tax.
Open Source Framework
I used a few open source tools to create this website. The core functionality was created using the Fat Free Framework. This was chosen as it is an efficient and lightweight framework that is highly and easily customisable.
