Browser Testing

Finally removed black line under images!!

This morning I have finally figured out how to remove the black line underneath my images.

Every time I uploaded a new product, it showed this black line underneath the image and above the text. I did not want it to be there so I checked all my CSS and I could not see why it would be doing this. I then viewed the page in firefox and right clicked on the image and clicked 'view image'. This opened the image on a web page on its own and it showed the black line was part of the image. I then thought the height I have set for the thumbnails on upload might be too big. So I opened my PHP file in dreamweaver and changed the height of the thumbnail from 180px to 175px:





I then tried uploading a product using my upload form and when I looked after I had uploaded it, the black line had disappeared!

Bowes Vintage Images

Bowes vintage is another local business interested in my peekapressie website. I have left it a bit late to go and take photographs of their products like I did with Tessies so I emailed them and they said it would be ok to use images from their website and Facebook page for now. These can be either edited or deleted at a later date and if I have time I will go down to their shop and take some photos of their products and put them onto the site.

Purchased some stock images for my site!

Today I purchased three stock images from www.istockphoto.com. These were for the view by category, view by price and view by colour pages. I tried to choose images that were relevent to the theme of my site and to the page it was going to be placed on and I feel the images I have chosen to use are suitable.

Changes to the navigation bar!

I have made some changes to the font used on the main navigation bar. Below is a screenshot of the original look of the navigation bar. The font used is 'Verdana' but is capitalized and the font weight is bold. I was not happy with the look of the font used so I went on to have a play around with the font and had a look at other websites for inspiration.



After messing around with it for a bit and looking at other inspiration I finally decided to use the font used on the final look of the navigation bar. I have stuck with the 'Verdana' font but taken the font weight off so it is normal and used the text-transform on the css so it makes all the letters uppercase.
When the user hovers over a link it turns bold so they can easily tell where their mouse cursor is.

Admin page inspiration!

Problem with search feature

I have come across a problem with the drop down search feature on my home page. I have noticed it is not always displaying the products it should. I tested it with the blue necklace. I know this product is Jewellery in the price range £6 -£10 and the colour blue.
I have now put this selection into the search feature.Below is a screenshot of the results page. Nothing is being displayed even though there should be at least the blue pendant necklace being displayed.

Dropdown search feature!

On the homepage and on the view all gifts page, I have a drop down search feature. This allows users to choose a category, price range and colour and it then displays appropriate gifts based on the user's input. Below is a screenshot of the search feature:
Below is an example of a search. The category selected is Jewellery, the price range selected is £1 - £5 and the colour selected is Pink. When the user clicks the submit button it should display relevent gifts.
Below is the search results page and you can see it has displayed a pink and grey necklace at £2.00 there it has displayed a gift that is relevent to the search.

Displaying the products

Editing Product Images

Final form for uploading new products!

I have finished adding the different text fields and drop down boxes to the form that the user can use to upload a new product. The final fields are: Title, Description, Image, Colour, Category, Price, Name of the boutique, Address Line 1, Town or City, County, Postcode. Below is a screenshot of the form.

Visit to Tessies, Newland Avenue

Today I have been to one of the boutique shops on Newland Avenue called Tessies. I have been emailing a girl called Nicola about the project and she has always been very interested in this from the start. I had arranged a date and time to visit the shop so they knew I would be coming but unfortunatly Nicola wasn't there on the day because she was busy sorting out a new factory for the business. Instead, I met a girl who worked there full time and she was called Anna and she was very helpful and was very interested in what I was doing. The first thing I did when I got there was to speak to Anna about my project and I showed her the booklet I had prepared of screenshots of my website so far, some with notes and some without notes. After we had finished chatting and looking at the screenshots I asked her to fill in a questionnaire for me which was about the look and feel of the website and what her thougths were about it. The feedback she gave me was very helpful and below is what she thought:

1. Do you like the colour scheme that has been used on the site?

A: Yes - Fun and clear colour - not too over the top either.

2. Do you like the layout for the homepage?

A: Yes - Easy to read - layout is clear - large fonts are good on the search buttons.

3. Do you think customers would find it easy to use?

A: Yes - Clear and concise layout - easy to follow.

4. As a shop member who would be able to log into the site, do you think you would find it easy to use?

A: Yes - Again very clear and easy to read drop down menus etc. I am used to using Elsy which has a similar layout.

5. Do you think the design of the site needs changing to reflect the theme of shops on Princes and Newland Avenue?

A: Yes - If you want to promote local businesses then perhaps you could have imagery of the area..?

6. Any other comments/ thoughts/ changes that could be made:

A: *Images of the local area could end up making the layout too confusing/ cheapen the overall look.

* Perhaps in the about section you could have a map of the area?

* Underneath the title of the website you could have a brief line about the local area e.g. Peekapressie 'unique gifts from local businesses!'

* How do the gifts make it to the front page - is it if they've been clicked on many times? Perhaps have info about this function for sellers when they log in?

This feedback was very helpful because it made me think about things on my site that I hadn't previously given much thought to like how the products make it to the front page etc.

Whilst she was filling in the feedback form, I went around the shop and picked up a number of different products and made sure they were different colours too. After I had picked some, Anna took me into the back as they had a photography corner with white boards and three photography lights. I took my own digital SLR camera and after I set up how I wanted, I started to take some photographs of the products. I also wrote a short description of each item on a piece of paper with the price of each one next to it so I knew how much things were when it came to uploading them onto my site.

I also took some photographs of inside the shop from different angles to use on my scrolling image on the homepage of my website.

When I had taken all the photographs, I asked Anna to pass the booklet onto Nicola as Nicola had previously asked me to leave it so she could take a look and also give me feedback. Anna also said if I ever needed to go back and take more photographs or want to have a chat with updates, then just to pop back down and see them whenever. She also asked me to add them on Facebook as another way of being able to contact one another.

Overall, I feel the visit to Tessies went really well and I have now got some real products to add to my site.

View products by category/ price/ colour etc working!

Today I have been working on the 'view by' pages. I wanted to create these pages so the users can search for products that are in a certain category, price range or colour. Example: If the user wanted to look at all the Jewellery on the website they would go to 'view gifts by category' on the main navigation and it would take them to the page below:

They would then click on the 'Jewellery' link and it would take them to a page displaying all the products within the 'Jewellery' category on the website.

This would work the same for all the categories, price ranges and colours.

The code I used to make these pages function this way is:

The bit I change for the other categories e.g. for the page that displays all the bags and purses, I would change the
$result = mysql_query ("SELECT * from shopproducts WHERE productCategory = 'Jewellery'");

to

$result = mysql_query ("SELECT * from shopproducts WHERE productCategory = 'Bags and Purses'");

Contact Form

I have created a contact form for this website. The user can enter their name, their email address and then write a message with their enquiry.

If the user clicks the 'send message' button without entering anything into the form, it will not send anything and display error messages telling them to enter their information.

Once the user has entered the required information, it then displays a thankyou message so the user knows they have successfully sent their message.

Newsletter sign-up form

I have created a newsletter sign up form for the website. This is so users can join the newsletter mailing list so they can get the latest updates and offers. The newsletter sign up form looks like this:Once the user enters their name and email address, a thankyou message is then displayed in the email box. This lets the user know that they have signed up to the newsletter successfully.

If the user clicks the 'subscribe' button, a message is displayed underneath the subscribe button and tells the user that their name must be more than three characters and they have to enter a valid email address.
The information the user enters (their name and email address) is then stored in the newsletter database (below):

Final feminine website mock-up

New feminine website wireframe

Admin edit a product

Today I created a form which would allow the user to edit the information about a selected product. The user would log into the website using their username and password and then click on the 'edit product' button. This would take them to a page which displayed all the products on the site (below):
















They would then click on a product they wanted to edit and then it would take them to the edit form (below):















The fields they can edit are product name, description, colour, category, price, shop name, address line 1, town or city, county and postcode. I also need to figure out how they would be able to edit an image.

Admin login & logout

Today I have created the admin section for the website. The first thing I needed to do was to add users to the database which all had a different username and password. The login screen asks the user for their username and their password (below).



















When the user has logged into the admin area, the next screen is displayed and from here the user can add, edit or delete a product. They can also log out of the admin area by clicking the 'log out' link.



















When the user has clicked the log out link, the next screen confirms they have logged out and also gives them the chance to log back into the site.

View a product

I have now created a page using php so the user can click on a product and it takes them to a new page where it displays a larger image, the product name, the product description and the product price. The page I created looks like:

View all gifts

Today I have coded up the page so the user can view all the gifts on the same page. The end result looks like:

Name chosen and domain name purchased!

I have chosen to use the name 'Peekapressie'. The reason I am using this name is because this website allows users to look at gifts but does not allow them to buy products therefore they are 'peeking' at gifts. Also I wanted a girly/ cute sounding name and I think peekapressie is this. the domain name for my website is www.peekapressie.co.uk.

Wireframe for male design

I have drawn the wireframe for the men's homepage for the site. It is different to the layout for the women's homepage but I think this is more suitable for men. Instead of the search bar being on the navigation bar, it will be placed at the top right side of the header. The drop down search feature will not be put on the right side of the page but instead it will be placed underneath the navigation bar and one drop down box next to another rather than underneath eachother. I think this will stand out more. Down the left side of the home page there will be 'search by' boxes for example, search by recipient, and underneath there will be a list such as mum, sister, girlfriend etc. and the user would just have to click on the recipient to view gifts suitable for them. This makes it easier for users who do not know what they want to buy for the person they are shopping for.

Underneath the main image on the homepage, there will be a section 'most popular' section. This will be where the most popular gifts will be shown and will give the user the option to view more information about a certain product.

Plans for visiting the shops again

The first time I went to Hull to visit the shops, I visited Bogoh Boutique and Polly Anna. Since then I have also emailed a couple of other shops on Newland Avenue and I have had replies saying they are interested in having their products on my website and that they think my website is a good idea and could help their business. However, both Boutique Bogoh and Polly Anna have not emailed me back so I am planning on going to visit them again this Friday afternoon along with my designs and some information about the website and how it will work so I can show them this so they have a better idea of the project I am doing. Then if they are still interested after I have shown them this, I will arrange a date and time of when I can go back to the shops and take some photographs of the products they would like to be on website.

This is the only way I can think of to get an answer from these shops and then I will know which shops are interested and which shops aren't so I know which ones I need to mention on my website and which ones I need to visit again for photographs.

New upload form for thumbnail images

I have followed another tutorial for an upload form so the user can input a product name, product description and a product image (which I have done already) but this one also saves a thumbnail image of the uploaded image as well as the full image. The only problem I had with this tutorial is when I had uploaded an image, I looked at the thumbnail I had created and it was square so the top and the bottom of the image was missing. I knew there was somewhere within the php code that I could change to make the size of the thumbnail that was being created. The bit of code that I needed to change was:

$thumb_width = 150;
$thumb_height = 150;













This was the original size so I just changed the width to 120 and kept the height the same so the thumbnail wasn't too big to be a thumbnail so in the php code I now have:

$thumb_width = 120;
$thumb_height = 150;

This was something really simple and easy to do but I did not know this before so I have now learnt how to do this.

HTML, CSS & Search Box

Today I started the html and css for the women's design for the site. I haven't done much so far as I wanted some feedback on my design before I coded it all up but I have got the current layout of the home page done and put the search box in the navigation bar and it works so if the user inputs their keyword, it will take them to the results page where it will display any matching results. The tutorial I did for the search box made it so when the user typed in their keyword, the results were displayed on the same page. I did not want the search results to appear on the home page or whatever other page the user may be on when they type something in the search box so I needed to figure out how to take them to a different web page and display the results.

(to complete)

Men's Design Struggle!

For my website I am going to have two different designs. One for women that are buying gifts for women so this will be cute and girly and then I am going to have a second design for the men that use the website that are buying gifts for women. I completed the design for the women's side of the site quite a while ago now and I found this quite easy to do but I am finding it difficult to come up with a design for the men's side of the website so I have decided to look at other websites that are aimed at a male audience to see what the designs are like and what colours are popular etc. The websites I have looked at are:

http://www.red5.co.uk/
www.topgear.com/uk
http://www.burton.co.uk/
http://www.mensfitness.co.uk/
http://www.firebox.com/
http://www.skysports.com/

Most of these websites have designs aimed at men and content aimed at men but I chose to look at red5 and firebox because they sell products for women as well as men but the overall look of these sites looks to be more aimed at men. This is helpful because I want my design to be aimed at men but the products on the site will be for women.

From looking at all these sites I can clearly see that the most popular colours on websites aimed at males are black, grey, red and white. Also they all have a large main image on their homepage so again this helps me as I can try to include this into my design.

Updated Search

I have already created a search box where the user can enter keywords and then the results page will return any results that are appropriate. I had originally had the product name, product description and the shop name returned to the user but I thought an image of the product is quite useful so now I have changed the code so an image is also returned on the search results page and this is how it would look if the user searched for 'chocolate':

Product Details & Image Upload Form

I have previously created a product details form that just uploaded information about products and I created an upload image form which uploaded the image to my images folder but I couldn't figure out how to get the image url to automatically store into my database. I have now put everything into one form and taken and the shop name and shop address out of the form because the user will need to log into the site anyway to access this form so we will know who has logged in and I have also managed to get the image upload so it stored correctly in my database. Below are some screenshots of how it looks and works:


Above is the form the user enters the data into.

Above shows the user choosing an image to upload.

Above is the form with the user input showing.

Above is showing the image/ product has been added.

Above shows the uploaded image in the 'images' folder on my site.

Above shows the image that has been uploaded.

Above is a screenshot to show the product the user typed in has been inserted into the database.

Product Details Form

I have created a product upload form which asks the user for the new product name, product description, shop name and shop address. Below there is a screenshot of what the form looks like:
Once the user has clicked the 'submit' button it takes them to the following page:

Below is a screenshot of the products table in PHPMyAdmin to show that the last product entered into the table through the form was the bath fizzers and that product is there so we know the form has form has successfully added the correct data into the table.