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.
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.
var article = '';
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:
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:
Also, use this awesome tool to test if your mod rewrite rules are functioning properly:
Done! Confused? Me too, usually.
Leave a Reply