How to create a one page PHP site that acts like it has multiple pages


We just launched the newest beta version of TechGenius this weekend (forth beta in two months), and one of the newer updates we added is to make the site act as if it has multiple pages. While the entire site is still on one PHP page that loads the first time you visit, the URL changes as you click through the site; the URL can be copy and pasted as a link that will bring the visitor to back to the appropriate “page” or “article”.

Why do this at all?

The purpose was to create a website that acts like an “app”, only reloading parts of the page that need to be reloaded. It speeds up load time, simplifies log-ins, and the user interface is smoother. The reason for having the URL change around is so that users can copy and paste the URL, something many people still do (as opposed to using the provided “share” button).

Step 1: Create a one page PHP site.

The way I do this is stacking “container” divs on top of each other, one for each page type I have on the site. Header and footer go above and below these headers. By default, I only show you the home “container”, and hide the rest. As you navigate through the site, I run a javascript function that hides all containers, then loads the appropriate content into the next container you want to see, and then displays the container.

I have empty containers as default and load the content from php files I have kept in a folder (ie. “include/container1content.php”, “include/container2content.php”). Using the jQuery .ajax() method, I can pass parameters through which I use to create a new “page” for each row of a table I have stored in MySQL.

Step 2: Create a function that takes $_POST parameters and loads the appropriate container/content.

Since the navigation is already coordinated using Javascript functions, I run a code when index.php loads to check the $_POST parameters. Using the parameters that are set, I can run the javascript functions I created in Step 1. Code looks like:

var article = '';
if (article){
runNavfunction(article);
}

where “runNavfunction()” is the Javascript function from Step 1.

Step 3: Manipulate browser history using the history object.

Basically, you can change the url in the browser url box without reloading the website using this. Ignore the query parameters you set in Step 2 and set some rules for how you want the URLs to read. Read more:

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
http://dev.w3.org/html5/spec/history.html
http://html5doctor.com/history-api/
http://diveintohtml5.info/history.html
http://html5demos.com/history

Step 4: Edit .htaccess to convert urls into query parameters.

Now, if you’ve come up with smart rules in Step 3, this part should be simple. Otherwise, you may have to go back and come up with new ones. The idea is to parse out the URLs you set in Step 3, and convert them into the query parameters you set in Step 2. For example:

(A) http://techgenius.me/index.php?article=1000 could be the URL with a query string.
(B) When someone clicks to the article within the site, I’ll use the article ID to make the URL parameter http://techgenius.me/article/1000.
(C) When visits the site by going to http://techgenius.me/article/1000, use .htaccess to convert that into http://techgenius.me/index.php?article=1000.

Learn more about how to use .htaccess by checking out these links:

http://www.noupe.com/php/10-mod_rewrite-rules-you-should-know.html
http://www.widexl.com/tutorials/mod_rewrite.html
http://www.workingwith.me.uk/articles/scripting/mod_rewrite
http://wiki.apache.org/httpd/RewriteQueryString

Also, use this awesome tool to test if your mod rewrite rules are functioning properly:

http://htaccess.madewithlove.be/

Done! Confused? Me too, usually.


Leave a Reply

Your email address will not be published.