Changes made after user testing

All changes were made after user testing. Symmetry plays big role in designing websites and I must say that it looks better after changes were made. I also created ‘split screen’ in home page by dividing left and right side of the site which creates a perfect symmetry –
symmetry

This is how the site looks at the moment

Home page

home

Gallery page
gallery

 

User testing

When the site was designed and everything worked perfectly fine, I did user testing. I got positive feedback however, there were a few things that I didn’t notice.

Changes I’m going to make

changes

1. Moving text to the left so it’s all in one line – symmetry
2. Making ‘selection’ function as big as rest of the windows

Beginning of designing process/colour scheme/explanation of the design

PHP and MySQL is working perfectly fine and my job now is to create design of the site. I already did my research, wire frames and mock up so I know exactly how it is going to look like. I need to customize it with CSS.

The result – index.php

28

gallery.php

28 gallery

Explanation of the design/colour scheme

At the beginning, I wanted to use ‘carbon fibre background’ as it has very professional and elegant look but while I was going through photos that I was going to use, I noticed vintage style picture hanging on the wall and this gave me an idea to create a vintage looking website.
15.result gallery lightbox2

I typed into Google ‘black vintage background’ because I already knew that colour scheme is going to be black/white or grey as it fits perfectly with colours of photos; did a little research about it and found perfect background that downloaded from www.pixeden.com. It is called dark-planingwood.

Fonts

I typed into Google ‘google fonts’ and chosen the right style of font for header. It is called ‘Oleo Script cursive’ which if you have a look closer, is exactly the same as one of the writing on the picture that I took.
fonts

font

Another font that I used for text is called ‘Open Sans Condensed’. The reason for that is that I needed to make it readable and font used for header wasn’t very readable with large text. This font still has a vintage look and it is readable.

Untitled

Backing up tables

Every time you work with tables, you need to make sure you back them up just in case they get deleted for some reason.

Step 1 – connect to database with phpMyAdmin

Step 2 – select the table you want to back up

1. selecting table

Step 3 – click ‘Export’ 

2. export

Step 4 – choose different formats you want table export to 

3

4

 

Step 5 – save it to folder called ‘SQL’

5

 

Photos randomly pulled from table

On ‘index.php’ I decided to have random generated photos from table. The reason for it is that while doing my research I found out that most of the websites used it as some kind of form of introduction to the site, showing users what they can find on the site.

Creating table

First of all, I needed to create another table in phpMyAdmin. I named it ‘RandomPics‘. It consists of two columns ‘RandPicID’ and ‘pics’. I didn’t need anything else for that.
1

Edited table

2

 

Explanation of code

3

It was the same code that I used for gallery page with a little change. Instead of 4

I’ve chosen new created table for random photos and the code you see above tells it to choose random photos from table. ‘LIMIT 1’ tells it to choose only one photo at the time, you can change it to any number you want and it’ll add more photos. I’ve chosen only one photo at the time.
Then simply echo it out.

I came across to little problem while doing it as I echo out only like this 5 which didn’t work. It only pulled out path of the photos. I know now that it was mistake and I sorted it out by pulling it out by ‘img src’.

Result

Photos randomly changes after refreshing page.

6 7

Time

I decided to add time/date and day on the site because it is always nice to know what time it is and stay inform about date when you’re browsing internet. It was very simple one line of php code – Untitled

Simple echo, in brackets text we want to appear on the site, ‘.’ is there to link it together as one sentence, ‘date’ and in parentheses ‘l’ standing for day, ‘d.m.Y’ – day,month,year (you can choose any order or any format) and in another ‘date’ there is comma and ‘g:ia’ (g – 24 hours format, i – minutes, a – am/pm small letters).

You can customize this the way you want.

The final result

Untitled2

Search

First of all, I had to create a form which looks like this –
22.form

Code for that looks like this –

23.code - form

I put it in div because I wanted to customize it in CSS later on.

Explanation of the code

I created a form and chosen post as I wanted it to post information to different file that I’ve created called ‘search.php’. This is set up by ‘action=”search.php” ‘.
Then I created select option and added two options for users to choose from which was ‘Name’ and Description’.
24

To create a variable so we can work with it later, I needed to change the name of it so I know which one it is. It is always the one with saying ‘name’.

25

Then I created field to type in.
27
Again, I created a variable called ‘search’ by changing ‘name’ and also I set maximal limit of characters to 30. It is because I set up VARCHAR data type in tables to 30. I could decide if I wanted it to be a password type where users would see only ‘*’ instead of full characters or two other types. I went for standard type as it is search box.

26

Last thing I had to create was submit button. 29.submit button

28. submit button

I created variables with a function ‘post’ as I wanted it to sent everything that is written and selected in form sending to database.

30

By the code bellow, I set it up to condition ‘if search bar is empty, echo out You did not enter a search term, please try again.’

31

32

Then I created switch which means ‘from whichever selected option, if it is selected ‘Name’ it’ll go to table ‘PhotosTable’ and select information from row ‘Name’ and store it in a variable called $QuerySelect. Creating another variable called ‘$result’ so we can store it there. ‘mysql_query’ is used for selecting data from the table. Last code %search% (wild card) means that even if there’s something similar typed in that row, it’ll still select it. I did the same thing with Description.

33

34

Then I created loop and fetched it to another variable ‘$row’ so I could echo it out.

35

Depending on what users selected and written into search box, it’ll echo out the right pictures and text from tables.

36

The last code frees data and disconnect everything from database.

37

Pulling text out from table

This is done by using MySQL query which selects row that we tell it to select (for example for home page I selected row with ID 1).
I created a variable and tell it what number of row I need.
16.variable for pulling text
Then I created another variable called $query and tell it to select information from table called ‘ContentTable’ where ID is my variable $ID that I already created. Or if it’s not right, write error.
17.variable mysql query
Once the right row is selected from table, it needs to be stored in the array in another variable so we can echo it out. I’ve done this by using this code – 18

I needed to create another variable to store data and select what I want to use from selected row.
19
The last thing I had to do was to echo it out and made sure it was in appropriate div tag.
20

The result:
21

Dynamic Lightbox

I already connected to database so now I had to create a variable where I’d store ALL information from PhotosTable.
11. variable
Then I created another variable and with ‘LOOP’ I echoed it out.
12.loop + echo it out

This is what full code put into div tag looks like:
10.gallery - lightbox

Then to create lightbox effect, I added java codes and CSS into it:
13.java - gallery

Result:

14.resulf of gallery lightbox 15.result gallery lightbox2