Relation tables in MySQL

If we are using more than one table in database, we need to make sure that they have relationship with each other.
I decided to do it with ‘ID’ which means that all my tables that I want to use have to have ‘ID’ and Category_ID in as you can see on the pictures belove –

Untitled4

Untitled

Untitled2

Untitled3

The big mistake I made earlier when I tried to create CMS and it wasn’t working properly was that I didn’t know about relational tables and I put different ID names in each table. Please click here to read my post about it.

 

CMS – fixed!

In my previous post I was talking about CMS that was not working. Problem is solved!

What was the problem

The problem was in function Untitled

In my code, there was capital ‘ID’ which is old way of doing it and that is why it was not working. The reason why I had capital ID there was in my tables and I thought everywhere it had to be capital.

Function is always with lowercase ‘id’!

CMS – edit option not working

I created CMS where users can log in, see all posts, add/delete posts, create categories, and also edit posts.

All of them works perfectly fine apart from edit posts option. I, lecturer and a few friends spent so many hours trying to figure out why it is not working but the final result is to start building it from the beginning as no mistake was found but it is still not working. Possibility might be corrupted files as I made massive and dragged files around and that way full website can fall apart! NEVER NEVER NEVER DRAG FILES FROM LOCAL TO REMOTE!!!!

What it is doing

When you point with cursor on ‘edit’, you can see that id is called from table and also after clicking on ‘edit’, URL shows the right id from table but text is not pulled out so we end up with empty form.

Untitled

 

Next step

My next step is to start building CMS all over again.

CMS (content management system)

One of requirements for this project is to have CMS in the website so users (only users with username and password!) can manage content of the site.

Untitled

I decided to put this option to the footer as it is important only for the right users and it is not in the way of design.

THERE IS NO CSS ADDED TO CMS YET! AS I WANTED TO MAKE SURE IT WORKS FIRST!!!

After clicking on ‘ADMIN‘ users will get new window asking them to sign in –

Untitled

Untitled2

 

After logging in

Users will get this choice of how to manage content of the website –
Untitled

User will be able to view all current posts by clicking on ‘home’ –
Untitled

Add post –

Untitled

After clicking on ‘Add’, they will be able to see recently added post straight away like this in ‘manage posts’ –

Untitled

Choice of editing or deleting is under posts and gives users easy manageable option to use CMS.

Delete option is secured with pop out window asking users if they are sure they want to delete this post. This option is provided to avoid users deleting posts accidentally –

Untitled

Making it dynamic

This website is going to be dynamic so that is why I needed to make sure that dynamic content is going to work properly.
I created a new database in phpMyAdmin and 3 tables that I am going to be using –

FrontPage –
front page

AboutTable –
about table

PictureTable –
picture table

 

Connection – 

connection cody

As you can see in codes, I connected to database and echoed out row ‘welcome’ from table FrontPage to test if connection was successful. I needed to put this code on top of ‘index.php’ –
Untitled

This is what I got telling me connection was successfully made –
Untitled

This way I echoed out all text that I needed to from tables –
Untitled

 

Customising the design – contact form working

I had a little play around with codes of the template and customised it little bit so it fits the design I want it to be.
It is not the final piece yet, I will be still working on the design – I will have to change pictures and content.

Here are screen shots –

1. welcome page:
Untitled
Customising text and also navigation

2. about page:
Untitled

3. location page:
Untitled

4. contact page:
Untitled

Explanation of contact form codes – 

contact form test - code

Testing form – 
contact form test

All fields has to be filled in for it to send email. If that requirement is completed, then users will get this window to inform them that their email has been sent –
message sent

Testing if the email was successfully received –

After I sent email, I needed to check if it was sent to my email address. After a few minutes I received email that I sent as a test –

received email

email

 

 

 

Beginning of the design – The 4 elements

Before I started to work on design of the site, I already knew it is going to be one page website. That is why I went on internet and looked for some ideas how I could do it. I came to bootstrap.com website (for link click here) which helped me a lot as there was so many choices of already created templates that I could use. Also all templates are responsive/adaptive which is great as making websites mobile/tablet friendly is crucial these days.

Untitled

I went through them all and I decided that the best one suited for needs of website I am going to build is called ‘Agency’ –

Untitled

 

After downloading the template, I had to have a look at codes to find out what is doing what.