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

How set up a Virtual Machine using VirtualBox

First of all download yourself a copy of VirtualBox here. Now there are two ways on how you can install VirtualBox: using the Terminal and Ubuntu Software Center (searching “VirtualBox”).

  • I doing it via Terminal using the commands: “sudo apt-get install virtualbox” Screenshot from 2014-05-27 13_34_30
  • After the installation is complete, run VirtualBox and select “New” to Create a New Virtual Machine. Enter a name for your machine, select a type and version. For this demonstration I specified my name as “MYUBUNTUSERVER”, selected “Linux” for type and “UBUNTU (x64)” for version. Screenshot from 2014-05-27 13_40_39
  • Memory size depends on the purpose you going to use the machine for. In my case I left the default size (512MB). Screenshot from 2014-05-27 13_41_06
  • Select the option “Create a Virtual Drive”.Screenshot from 2014-05-27 13_41_23
  • Choosing a Hard Drive File Type depends on the purpose you going to use the Server for. For this demonstration I selected VHD (Virtual Hard Disk). Screenshot from 2014-05-27 15_16_08
  • I selected “Dynamically allocated” because then my Hard drive will expand as needed, but if you choose to set a fixed size limit, then do so. Screenshot from 2014-05-27 15_16_31
  • Now set the limit to the amount of space the Virtual Hard drive can use. I set mine to 80GB. Screenshot from 2014-05-27 15_17_41When click on create you have successfully created a Virtual Machine and can now install almost any Operating System and use it as of it was a physical machine.

We will be using this Virtual Machine to setup a Virtual Linux Ubuntu Server, click here to follow.

You Snooze You Lose

Do you know how to navigate and manipulate text on a Terminal ?? Well, That’s exactly what we learned in Linux Group on Monday.   First install VIM via your terminal with the command: “sudo apt-get install vim”. That’s it, now you are set up and ready to use “vim”.

Default keys (H, J, K, L) is for moving around. Study the cheat sheet below and become efficient on the terminal.

vi-vim-cheat-sheet

vi-vim-cheat-sheet

There are many ways to learn “vim”, it all depends on you and how you would like to learn it. Here are two examples:

  • Learn “vim” while playing the game “VIM ADVENTURES”, (http://vim-adventures.com/) .th
  • A browser based interactive tutorial “VIM TUTOR”: http://www.openvim.com/tutorial.html   – OR –  just type in your terminal: “vim tutor”.

    vim tutor

    vim tutor

Be sure not to miss out our next Linux Group Session on the 26 May 2014 at Eunice High School 7’clock (19:00).

 

Getting TINA4PHP and WAMP server to work together…

wamp
windows-7-madobe-nanami-microsoft-windows-os-tan-anime-girls_1452857824

It might be a bit complicated or confusing when trying to get the tina4php interface onto your browser, so I’ve created a step by step guide to get these things working on your machine:

1.) Download WAMP server here
2.) Open wamp server (an icon will appear in the taskbar, bottom left corner).
3.) Click on wamp icon in taskbar, go to PHP, go to PHP extensions, enable phpsqlite3
4.) Download tina4php files from the sourceforge project.
5.) Copy tina4php files into www folder under wamp under C drive.
6.) Open your browser.
7.) Go to localhost/?interface=Developer
8.) A page will pop up asking for an username and a password, username: admin , password: admin

(these steps take you to the tina4 interface where you can code and fiddle around.)

I hope this proves useful to any who struggled to get stuff working, if any other problems arise, feel free to ask on the software academy group: software-academy@googlegroups.com

Coding for the future

Jaco Dippenaars feeling for Code Infinity

Jaco Dippenaar’s feeling for Code Infinity

It becomes clear to me whilst working on our latest projects that when working in teams there is a clear need for better documentation of how we think and convey our solutions to other developers.  In working with frame works one is limited to how one can solve a solution but when it comes to a system like TINA4 each developer can program in his own way.  Now that does not mean that we all should be like zombies and be put in a box but clearly there are some good principals to follow.  Here are some of my thoughts on the basics.

  • Plan what you are going to do before starting, 30 minutes planning saves hours
  • Prototype complex code in a sandbox
  • Comment your code before you code
  • Never repeat code – make objects or functions to do repetitive things
  • Always code simple, simple is better
  • The best code you write is the code you never have to write (thanks Boian)

Have fun coding, if you have any extra good principles to share then post them in the comments section below.

 

 

 

 

Tina4PHP

Image of the Tina4PHP Logo

This is not another framework 4 PHP

Last night we held a soft release of the Tina4PHP open-source web based development environment. We at Code Infinity use and develop Tina4PHP extensively for our rapid web development, it is indespensable and many of us would be lost without it. It’s the development environment that built itself. The list of features is at the bottom of this post, you can tell that there are a lot of powerful tools packed into it.

Here is the link to the SourceForge.net project.

Tina4PHP – (This Is Not Another Framework 4 PHP) – A RAD Browser based Development tool with the Cross Database Engine for PHP as its foundation. Manage multiple developers and source on the same web driven application development tool.

Features

  • Develop Once for All Databases
  • Develop in a Browser – No more FTP
  • Automatic Source code versioning
  • Manage a team of developers working on the same project
  • RAD development for PHP
  • Menu driven development
  • Coffee Script
  • SCSS
  • Automated AJAX

Software Academy

This week we were 11 people at the Software Academy meeting and we were doing CSS again.

Everyone at the software academy

Software Academy

As promised here are the links and resourses for what was covered:

For more on CSS visit w3schools/css.

CSS is extremely powerful when building web pages and layouts, and although we barely scraped the surface, we will come back to a few advanced CSS features at a later point.

Keep fiddling!

IF -by Rudyard Kipling

I hope everyone will be inspired by this poem which came to mind this week

 you can keep your head when all about you
Are losing theirs and blaming it on you;
If you can trust yourself when all men doubt you,
But make allowance for their doubting too;
If you can wait and not be tired by waiting,
Or being lied about, don’t deal in lies,
Or being hated, don’t give way to hating,
And yet don’t look too good, nor talk too wise;

If you can dream—and not make dreams your master;
If you can think—and not make thoughts your aim;
If you can meet with triumph and disaster
And treat those two imposters just the same;
If you can bear to hear the truth you’ve spoken
Twisted by knaves to make a trap for fools,
Or watch the things you gave your life to, broken,
And stoop and build ’em up with worn-out tools;

If you can make one heap of all your winnings
And risk it on one turn of pitch-and-toss,
And lose, and start again at your beginnings
And never breath a word about your loss;
If you can force your heart and nerve and sinew
To serve your turn long after they are gone,
And so hold on when there is nothing in you
Except the Will which says to them: “Hold on”;

If you can talk with crowds and keep your virtue,
Or walk with Kings—nor lose the common touch;
If neither foes nor loving friends can hurt you;
If all men count with you, but none too much;
If you can fill the unforgiving minute
With sixty seconds’ worth of distance run,
Yours is the Earth and everything that’s in it,
And—which is more—you’ll be a Man my son!

 

Software Academy time!

A photo of the software academy group around a table with laptops ready to start a session

Fuzzy, Andre, Reuben, Marko and Andre(2) at a software academy session.

We have a small group tonight, CSS on the table.
We’re looking at the basics and fundamentals and hopefully by the end of tonight the group will understand layout using CSS3!

As promised here are the examples I have created demonstrating the old way of doing layout and the new way using CSS3.

  1. Old Way
  2. Newer Way