Project Requirements

Coded in PHP
Hosted in Apache
Use mySQL or PhpMyAdmin for the Database Management
Well commented code so that I can later understand it, and add a little bit onto it
Well managed and organised database

Try to Re-create the following website: https://www.insidetracker.com

Login: kris.pietrzak@hotmail.com
Password: lolek123
Refer to the modified screenshots I have made and the notes beside them

The text bits in the homepage and such are not important you can just copy paste a random
paragraph which I will later change myself, the same applies to the images.
Please Note, I have deleted some major and minor bits from the website in the screenshots
(such as less buttons, less text and some less features etc.)
For the design, try to copy the website.

I only need the following pages made:

Homepage
Registration/Login Screen
Profile/Account Details Screen
Bloodwork Page (Add Test Results, View Table, Analysis & Recommendations)
Empty links to the following pages: (Only header and footer in them, rest of page leave blank)
About
Tour
Blog
Dashboard

For higher resolution images please use this link : https://imgur.com/a/VcGqv

 Homepage

1. Header (Changes once logged in)

Leave empty space for the logo.

Generate empty pages for; About, Tour and Blog (only include the header and footer in them).

Sign Up button instead of Buy now which goes to the registration form.

Log In button that goes to the login screen.

2. 1st Screen

Use any random video/gif for the background, and use any random text for the box in the middle
please keep the styling of the text similar to the website.

3. 2nd Screen

Again, try to keep similar text styling for this screen, use any random icon for the carousel/slider
that I will later change myself when I create the icons. The same applies to the larger images below.

For the text part, use any random paragraphs but keep the same styling.

4. 3rd Screen

This is very similar to the 2nd Screen Keep the same text styling, use random images and
paragraphs for the carousel/slider that I will later change myself.

5. Footer (Keep consistent throughout the pages)

Just try to make it very similar looking, it doesnt have to hyperlinked to anything or have any
functions, just try to make it look like in the screenshots.
 Login Screen

Pretty self-explanatory, a simple login screen that asks for the users Username and Password
followed by a Submit button.
 Profile Page

1. Notice how the header changed. It now has different buttons;

- Dashboard (empty page)
- Bloodwork which is a drop-down consisting of; Add Results, Table View, Analysis &
Recommendations.
- Profile

2. At the top, a Welcome <first_name> <last_name> from the database.

And a brief instruction on what to do on this page (you can just use any random paragraph)
A default profile picture (like a greyed out human icon), allowing to change it and delete it.

3. Personal Information just a few fields the user can change that will update in the database
once the Save changes button is hit.

4. Account Settings pretty much the same as 3.

 Add Test Results Page

1. The top right of header should have a drop-down box once clicked on your name with avatar,
which has a link to the Add Test Results page, Profile page, and the ability to Log out.

2. Add your test details I forgot to delete the Country where blood tested it shouldnt be
there. The only thing in this category should be the Date of blood test which is a simple
calendar.

3. Add your test results Pretty much try to copy it. Use all the Biomarker Names, Groups
and Units provided in the Biomarker Groups document.

The main functionality here is:

- The drop-down box selection as well as the search function (as you type, the results
get narrowed down).
- The Biomarker List on the right-hand side. Once a result has been entered by the
user, the exact Biomarker Name gets highlighted green under its corresponding Biomarker
Group.
 Table View Page

1. At the top, have a link from the database when the Latest Result was taken.
Ability to print out the form in a similar format (refer to the website for more detail).

2. Table is pretty self-explanatory, sorted by different groups (Please refer to the Biomarker
Groups document).
3. A limit of 3 results (columns) at once, can be scrolled back and forth using the 2 grey arrows.

4. The green/yellow/red dots. (Refer to the Biomarker Groups document)

Green = more than the lower value, less than the upper value. Yellow = 10% hitting the
lower and/or upper value. Red = too low, or too high

Worked example The ranges are 10-20

Red = Anything less than but not including 10 (0-9.99) same applies to 20 (20.01-X)
Yellow = Lower value (10% from 10 = 1) so anything from 10-10.99
Upper value (10% from 20 = 2) so anything from 18.01-20
Green = Anything between 11 - 18
 Analysis & Recommendations Page

1. This is by far the most difficult page to create. I tried to make it simpler and have it grouped
by Categories. So, under Inflammatory Markers there are; Lymphocytes, Basophils, etc. (Refer
to the Biomarker Table document)

So, the Group Name gets listed at the top, then the sub-categories of that Group are named
right below, and then after clicking a sub-category it shows up a graph with the users input,
and a little paragraph beside it (again can be random text I will fill it all out later). Have a look
on the website at the Inflamation Group example, except it doesnt have its own graph, it
lists the graph from the first item in that group.

2. You can see I have written 2 more groups on the screen to give you a rough idea. (

3. It would be nice if you could include the Trend Line it doesnt have to state when you
might be at risk like it does on the website, if you can do it just make it so the line is drawn in
the proper direction on the graph.
Each graph should be in the same value of units, so for example if in the
Biomarker Table document, Haemoglobin has these Units (*g/L [Primary Unit],
g/dL, g/mL, mmol/L) if the user enters 2 new results, 1 being in g/L and the
other one being in g/dL the g/dL one should be converted into the primary
unit this will keep the graphs consistent. The same applies to the Table View.
You can simply google convert g/l to g/dl and google has its own conversion
rate. Or you can google for a conversion formula.

Registration form should consist of the following:

Username
Password
Confirm Password

Title
First Name
Last Name
Gender
Date of Birth

Postcode
Address Line 1
Address Line 2
City
County