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.