January 30 2016

New Website, built using LobsterMVC

My website has seen many changes over the last 15 years, each change due to learning new technologies.

First came the table layout, this was before CSS was a standard on any browser, you basically had HTML and that's it. It was clunky, took time to update with new information, and was generally ugly.

Next came the need to be cross compatible between many browsers, this was and still is a major headache in coding, in both time and effort.

Luckily the modern era of browsers all work pretty similarly, with little variation in design code needed. So HTML and CSS has been the major structure to my websites.

Then came the new devices era, now developers had to design with phone, "phablets", tablets and even wearable watches in mind. Fluid width designs, dynamically adjusting to the demands of the screen.

While looking for a more permanent role in IT, I had a great many agencies inquire if I knew MVC, at which point I did not. So I decided (well it seems its required these days) to learn how MVC works.

MVC is short for Model View Controller, which basically means separating the design from the code, so you can change the website layout without interfering with the code. Another reason is to reduce the need duplicate code for different pages.

After trying a few these examples

CodeCourse MVC (9 Videos)

JReam MVC (11 Videos)

I decided to use principles from both, to create my own MVC Framework, but with some huge changes to make it my own.

Templates

One of the main problems I had with the above MVC tutorials were the inclusion of actual PHP code inside the view, which to me isn't splitting the code from the view, so after a while I came to a decision to create a template engine, that can replace tags inside a template with actual values from the code.

The main problem with this was the need to have a way to show many items (such as blog articles), but without the need to fix the length in the view. So my idea was use a Open and Close tag system to specify that the view inside these tags relates to an array of data, like thus:

<section class="blog" id="content">

{{articles}}

<article class="blog-post">

<header>

<h2>{{articleDate}}</h2>

<h1><a href="{{path}}/article/{{articleID}}">{{articleTitle}}</a></h1>

</header>

<section>{{articleBody}}</section>

</article>

{{/articles}}

</section>

The way the engine works, is the controller combines all the variables into a $data array, and would then search the template using the index of the $data array.

like this:

$this->data['articles'] = getArticles();

So when the engine encountered the index of 'articles' and realised it was an array, it would extract the section of view which contains the open and close tags of {{articles}} and {{/articles}}, it would then use this extract to export the articles into the template.

LobsterMVC is still in its early stages, there were still a few features required, one of which was restricting sections of the views for members and admins only. I got around this by creating reserved tags like these {{memberOnly}} {{adminOnly}}, if anything within these tags are deemed restricted (done during template load) the section is removed. If a section is removed due to being restricted, then a message is left behind for the user.

Once I was satisfied that LobsterMVC was sufficiently stable I began work on remolding the website to offer a new simplified version, and looked at a standard single page landing area, which can branch off into different sections when required, so here it is my new design, which I have to say is my best yet.

I will continue to improve LobsterMVC the more I use it, mainly the code is a little rushed in places, and I know that its mostly cleaning code and optimizing.

Thanks for reading.

COMMENTS

WHAT OTHERS HAVE TO SAY

Be the first to comment

LOGIN

Please Login here to comment, or Signup today!

POPULAR POSTS

SOMETHING YOU MAY FIND INTERESTING