How to set up navigation using single entry point in php

What was covered in the software academy sessions over the past two sessions was using PHP and HTML to create a website and add navigation on top to allow us to switch between tabs such as contact or gallery, etc. Then also a basic CSS file to add some decoration to this website. This post will provide a simple tutorial for how to accomplish this.

How the single entry point system works is it uses an index file containing your website header with a navigation bar to switch between pages, a footer and in between is your main content, depending on which page you’re on. The main content it done in separate PHP files which are then added to the page through using the ‘require_once’ statement. This allows for the web page to maintain its header, footer and navigation bar and just switch the main content. Let’s have a look at the index.php file example:

Screenshot from 2014-06-26 12:47:43 Screenshot from 2014-06-26 12:48:01 Screenshot from 2014-06-26 12:48:08

I’m going to take this file in sections and explain what each section does from the top:

The first part (head, title) is just naming the website to ‘Our website – 10/06/2014’. After that we are requiring the contents of our CSS file to add decoration to the website

After that, we have the start of the HTML body. From there, we have a form with a hidden input, this form won’t be displayed, but will however provide a base for n and based on the value of n, it will print the contents of the page (contact, gallery, etc.).

After this form we have a PHP function to get values for n which is the page name (contact, home, gallery). this function is called upon later in the actual navigation area.

After the function we come to the actual navigation area that we will use to change between pages of our website. In our case, we have 3 anchor tags in our nav, one for home, one for contact and one for gallery. based on which one is clicked, the PHP function is called as ‘navToPage(‘contact’)’ for example. This sets the value of n to contact. So clicking on the anchors in this nav changes n‘s value.

After this, we come to a div which will contain our main page content.  The first statement in the PHP tags is basically giving n the default value of ‘home’. The switch statement changes this main content to what it should be in cases of n being whatever it is. This means that if n is contact, it will require_once the contact.php file which contains the main content for the contact page and will show the contents of that file. We will take a look at the contents of each file later in this tutorial. However, if the file does not exist, an error message is displayed.

Lastly, we have the footer of the page which is simply put in a cite tag with “Ourwebsite.com 2014”.

So this was the run-down on the index file and how it works, now lets move on to the two other files: gallery and content. (The home page is simply defined as an h4 tag containing a navigation prompt to the user and wont need it’s own separate file.)

Screenshot from 2014-06-26 13:11:40 Screenshot from 2014-06-26 13:12:00

The above file is the contact.php file and, in essence, contains a form with two areas for user input: one for something about the user and the other for an email address.

Before the html of this file, there’s PHP syntax that will validate the user’s imputed data to make sure the fields aren’t left empty or the email address isn’t incorrectly entered. Then a message is displayed after all the processing to indicate if the user has left a field empty.

The actual HTML of this file only consists of a form with user inputs and labels with a submit button, the html, doctype and body tags aren’t required in this file as this file’s contents are used in the index file which already has the html and the other tags.

So if we click on the contact anchor tag in our index.php file, the function will get n a value of contact and will switch this HTML in this file into the main content div we saw earlier. This can now be done with any amount of other files you wish to add to your website directory.

Screenshot from 2014-06-26 13:31:27

This file shown is the gallery.php file. It simply contains a php syntax that’ll find an image in our galley folder and output it. Then when the file is called by the function in the index file the image will be put into the main content div.

The last thing we need to look at now is the CSS file that adds the decoration to the website. This file is linked in the index file and will change the appearance of a lot of components.

Screenshot from 2014-06-26 13:38:18 Screenshot from 2014-06-26 13:38:24

This CSS file will cover a few basics of CSS that we added to our website. The only explanation that we really need is to understand that ‘header nav’ targets only a nav inside the header tag and that ‘header nav a’ will only target an a tag inside a nav inside a header tag and not just any a. That is a simple CSS concept, the rest of the changes inside the curly brackets are self-explanatory except for a few cases. CSS was covered in previous sessions, have a look at this earlier posts on the Code Infinity website

And what we end up with in our website is:

Screenshot from 2014-06-26 13:47:31

Home page

Screenshot from 2014-06-26 13:47:43

Gallery page

Screenshot from 2014-06-26 13:47:49

Contact page

Hopefully this tutorial proved helpful to you, if not, feel free to ask questions on the software academy group at:

software-academy@googlegroups.com