Jordan Buermann.com

When it comes to side projects I often look for projects that will teach me something, why should my profile be any different? I have been a Procedural php person for many years, and it's worked out obviously, but I decided to learn Object Orientated Programming. I found some tutorials online, and picked up a book. I've also worked in Drupal a lot recently, and there were many features I enjoyed that I figured I would try to replicate on a much simpler scale. Since this is my own site, I don't need all the bells and whistles.

The primary two things I wanted to make as easy as possible were adding new content, and the upkeep of the layout.

To achieve these goals I created a page class with a series of static methods that gets called on the index.php and generates all the pages. At this point the class just handles including the various files that construct a page.

The process is simple:

1. Index.php grabs the path to the content page out of the URL and passes it to a method called addPage. AddPage runs some logic on the path, and defines a default if the path does not exist.
2. AddPage then calls a theme file called page.php, and again forwards along the path information.
3. Page.php sets up the default html template, and calls the other functions
4. addMenu: At this time this function only includes another theme file menu.php.
   • Menu.php is the menu that goes across the top. If this were a more complex site this page would pull the menu structure from a database. Since it's just my portfolio, I elected to just construct it manually. Though, I could likely have it be dynamic by scanning the various content directories and displaying links based on the folder structure. However, this would mean less control over when and what links display, so again I elected to just do it manually. At least at this time.
   • AddContent: This is the method that takes the path and grabs the actual content desired. Again in most cases this would do a data pull, instead it goes to the content directory and grabs the necessary file. What this does is make it so that when I want to add content I just make a file of just the content, and then add a link and it's done. No duplicated code, which is obviously good for updating. At this time, to update the structure of my website I just need to edit one file; page.php
   • AddFooter: This is the same as the others, it just grabs the footer.php and displays it. Really, I could have combined most of these methods into just one. However, it's possible someday I would want to do more complicated processing of these sections of the site so I elected to keep them separate for now.

So now theming is done quickly and easily no matter how much content ends up on the website I just have to edit a couple of files. Also adding that content is just two steps, generate the page and add in the links.

The only problem was that now my urls were ugly. In order to pass the path I had to add ?p=path to the end, and if it happened to be a long path that would get rather awkward. Luckily, .htaccess exists and utilizing the rewrite engine I was able to clean those up.

I also needed to connect to the Database, to generate the random quotes. So again I built a class that handles all of the Database methods. It makes the connections, and handles all of the queries. It also has the added benefit of making it easier, should I ever decide to change the type of Database that I use, to make that change. I made methods like 'fetch_array' that take in the result the same as mysql_fetch_array does and then just runs mysql_fetch_array and returns the result. The benefit is now if I want to change database types I just change this method, and not all of my mysql_fetch_array calls throughout the code. Once again keeping the management of my site simple and straight forward.

The Randomized quotes are simple enough, I just used my database class to query the database and grab one at random. I placed the code in the page.php directly though if I wanted to have variable content in the black area, and someday I will, I could just then make a method of the page class that would handle that and be called there instead. For now, the random quotes fill the space.

This site serves two purposes, one is to show off what I can do and the other is to provide me a place to learn new things to be shown off. So I made a few quick scripts in Jquery because, well, it's one of the most showy things a web person can do that doesn't require a lot of explanation. The menu is done in Jquery, and so is the list on the homepage.

It's not extremely complicated code, I've seen some very long and complex code examples for making menu's. This one however, serves a very direct purpose.

$('.menu li').hover(
   function () {
     //show its submenu
       $('ul', this).slideToggle(500);
   },
   function () {
     //hide its submenu
       $('ul', this).hide();       
   }
);
 

That is it really I use css to define the look of it, hide the secondary menu's by default. This way if JS is turned off you don't see them. Then with Jquery I look for the menu class, and it's li children. Listen for the user to hover over them, and then tiggle the visibility using a Jquery slide with a speed of 500. A nice gradual slide. Once the hovering has stopped – hide the element again. At first I tried to get it to slide back up, but that resulted in some odd behavior if your mouse got in just the wrong spot. So I just had it hide, and I like that better actually. I then link the parent item to a page with the links to the children, that way if you have Javascript turned off for any reason you can still use the menu and explore my site.

Again, super simple thanks to Jquery. The list on the homepage is actually a bit more complex than the menu but not by much. It looks for the .list class with an li child that has a ul child and adds a class of parent to that li. The css then does up the visuals of the parent class, removing the list style, adding a border, that sort of thing. The Jquery also adds a class to the ul child of the .list li element, this class called 'more' hides that ul element. So without Javascript enabled, neither of these classes would be turned on and the list would function like a normal old list.

$(".list li").has('ul').addClass("parent");
$(".list li ul").addClass("more");

Then again with Jquery I add a click listener to the .list li element that simply slideToggles the ul childs visibility. So click once and it slides into view, click again and it slides out of view. I had it doing it on hover, but that was rather annoying. The other benefit of this is, if I want to implement this on other lists all I have to do is give that list the .list class. It does of course assume unordered lists as children, but that would be easy enough to clone for ordered lists.

$('.list li').click(
   function () {
     //show its submenu
       $("ul", this).slideToggle();
   }
);

That is all I have as of right now, but as this site grows I will provide further breakdowns of what I've been doing.