Adding information to table with form

This is small CMS (content management system). I created a form so users can add information to table without having to log in to phpMyAdmin.

Step 1

Creating html and php file called form.html/form.php.

1

Step 2

Create a form in form.html where we set up ‘form action’ to form.php file as we want all information to be sent to that file.

2

Step 3

In the form.php file, we connect to database with ‘include’ function or by typing full code for connection in the file –
4

I used ‘include’ function.

Step 4

We create as many variables as there are rows in the table we want to insert information to and name them anything we want (I personally prefer to call them the same names as rows in the table so I don’t get confused and mix them). We set it to $_POST function which send information typed to rows in table.

3

 

Step 5

We create another variable called $query and by ‘mysql_query’ we tell it to insert values into table called ‘DOG’ and write all variables created. Make sure they’re all written correctly and in order.

5

 

Step 6

We can add CSS style sheet if we want but it is not necessary.

Step 7

Sign in to phpMyAdmin and check if all information were inserted into the table.

The form

6

Evaluation

Overall, I am very happy how my brochure turned up to be at the end. It looks better than I expected it to look. I also got a nice feedback from people when I did my user testing.

As I mentioned in my previous post, I had a little problem with making screen shots rounded but I am going to sort it out in very near future.

Adobe InDesign CS6 – design process

I set up the file to 210x210mm and started to put brochure together. I also worked with Adobe Illustrator CS6. I created ‘Clipping mask’ and copied full page into InDesign and then added text that I needed. I came across to a few problems but I solved them after a while.

However, the biggest problem I cannot solve is making screenshots of the website as a circles instead of having it square so it fits into the design. I tried to do it in Photoshop, Illustrator, InDesign but nothing was seem to be working.

Working screen while designing CV pages

Untitled

Dynamic lightbox

My task was to create dynamic lightbox.
First of all, I had to create a table in phpMyAdmin and made sure that path to pictures and thumbnails is correct.
Untitled

Then, I connected to my database using ‘include.php’ file.
Untitled

I created a variable where I’d store ALL information from chosen table.

Untitled

Then I created another variable and with ‘LOOP’ I echoed it out.

Untitled

My task was complete at this point but I wanted to make it look better so I added lightbox gallery effect into it.
Untitled

 

Making it work

In my previous post, I was talking about unsuccessful attempt to combine two different designs (codes)  that I downloaded from codrops. However, I did not give up and tried to figure it out, why it wasn’t working and I did it!!!!!!!!!!

Basically, I had to read line by line again and copy and paste right lines of codes at right places and I think that the mistake I was making before and why it was not working was that I copied the wrong part of code and paste it to wrong place. After I did it again, it started to work.

This is the result:

Home page –

Untitled2

 

Age category page – as you can see, the payout and navigation stayed the same, I embed element from different design into it (and it was working this time!)

Untitled

After clicking on ‘view project’ (which I need to change to ‘read more’)

Untitled

My next task is to customize style sheet the way I want it, which means I have to make it looks the exactly the way that home page looks (background, fonts, colours etc.) Also I have to change background on pop out window, make space for text bigger, change font etc.

Rethinking about the design/coming up with a new idea/designing process

After consultation with graphic design lecturer, I came to conclusion that my previous design was not bad, but I could do better to make users more interested in design and interact them more by user experience.

I had a look at video of Leo Burnett website [click here to view it]. Full website was created as application and little bit as a game. Every click moved you somewhere else and showed you different design and it was very interesting and it grabbed my attention, I wanted to see what else is there so I clicked through full site. If the site can do this to user, then it is designed very well.

I was thinking how I could do something similar with my website. While doing my research I came across the site MegaProject

Untitled

It was designed with HTML5 and CSS3 and what I loved about it, was big slide banner on top. I knew straight away that I want to have something like that on my website.

I went to codrops, typed ‘slideshow ‘ into search box and it came up with amazing things. After looking through all of them, I knew how my site will look like. I downloaded 3 different slideshows and started to play with codes.

Links to source codes on codrops:

FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3

EXPANDING FULLSCREEN GRID PORTFOLIO

This is my home page –>

Untitled

 

It is not fully finished as you can see on the picture above as I did not want to waste my time trying to customize it the way I want it (colour scheeme and text) because I wanted to see if it’s going to work the way I imagined it first.

When I got this done and it was working perfectly fine, I started to play with next code for sub navigation.

This is how it was suppose to work:

Pictures would be replaced with icons and after clicking on ‘view more’, it would pop out (see next picture)Untitled

Untitled

This would give users perfect interacting with the site. This is the reason why I wanted to use it.

However, when i tried to customize it for my website it was not working. I spent hours trying to fix it and find out why it was not working, I upload it on server but nothing happened. After clicking on ‘view more’ it just simply showed me another page but with no effect.

It is a big shame that I could not figure it out as it’d be just perfect for the site. I’m going to keep my home page but customize it the way I want it to look like and I’ll think about something different for age category pages. I’m sure it will look great at the end.

 

Explanation of the design

After consultation I really started to see what my design was missing. It was lack of graphic elements in it. In my previous assignment, I created creative part of my brand identity and it consisted of circles/lines and because I want to keep continuity in my work, I decided to do use these elements again and I think it was a very good choice at the end.

First of all, I didn’t want to repeat the same mistake that I was talking about in my previous post so I made a little plan of my brochure (with a help of my lecturer).

1782472_10201548499266506_2023221496_o

Then I opened Adobe Illustrator CS6, set file format to 210x210mm and started to design.

The result – Front cover

my-idea

Explanation of the design

As you can see on the picture above, I kept it simple, I used my logo that was designed in semester 1, and arrows to lead eyes of readers where I want them to (my logo). There is very good understanding of visual hierarchy in this design and also understanding of negative space as I designed it with that on my mind and left macro negative space in it. It is very easy to orientate on the page and find what you need to know.

2nd and 3rd page of brochure

This slideshow requires JavaScript.

Second page of my brochure is keeping simplicity but at the same time it is giving exact message to readers that I want.
Text ‘welcome to my world…’ with arrows leading eyes of readers to next page where there is only one word saying ‘WEB’ has a connotation of ‘this is my world, this is what I do, this is what I am good at and you’re about to enter it and get to know me a little bit better by reading this brochure’. I used exactly the same font and colour for ‘welcome to my world…’ that I used for my logo and also I used lowercase because I used it in my logo. Word ‘WEB’ is in the same font but different colour and it is because I tried to create connotation of icons on websites.
Also, text ‘welcome to my world…’ has lines around it and it is because I wanted to create an effect of navigation on websites.

4th and 5th page of brochure

This slideshow requires JavaScript.

I decided to use text with lines around it as my header for every section in my brochure. I kept text in bubbles what added continuity to my work as I did the same thing with back of my letter head and also CD case (assignment from semester 1). Arrows were used create a hierarchy and tell readers what to read first and where to move on to. I’m going to add a ‘motto’ that tells more about me and my personality as more and more people these days like to have ‘some kind of feeling’ that they get to know you and ‘have some kind of friendship with you’.
5th page consists of words that are relevant to what I do and they give idea to readers what my work is about. I used exactly the same words for my CD case (continuity again). Bubbles on top of the page are there to create a symmetry between two pages as they are used in page 4 just in different position. Arrows on the bottom of the page are there to lead eyes to text but I think I will get rid of them as I think it is too much of things going on on that page.

6th and 7th page of brochure

This slideshow requires JavaScript.

Here is where my portfolio starts. I try to keep it simple and straight to the point. 6th page will be all about image of the website and next page will explain what it is about and you’ll be able to see images of sub-pages of website.
I will do the same layout for 3 different modules and then I’ll move to CV page where I will keep the layout as on 4th page.

Back cover

Last-page

Back cover of the brochure has the same layout and design as front cover with a little difference – contact details and arrows are pushed a little bit down and it is because it has connotation of footer,it ends the file. Contact details are used from my business card (continuity).

When all my design in Illustrator was done and I knew exactly what and how I’m going to do it, it was time to open Adobe InDesign CS6 as this program is perfect for designing brochures, magazines etc. and start to work from beginning. Read more about it in my next post.

Beginning of design process – mistake!

All my research was done, I knew what I wanted to create so I dived straight in to designing brochure in Adobe InDesign CS6 without drawing plans on paper of layout and that was a BIG mistake! I spent a lot of time thinking and trying to design something but it didn’t work out well. I tried different layouts and designs but it was just one big mess in software. Always draw your ideas on paper so you can visualize it and know exactly what you are going to do, then open software!

Attempt of designing brochure – PDF