The PHP Project Guide (2014)

7. Frontend design

You’ll more than likely want to include a design for your website, after all, it’s a website! This is probably something you’ve already thought about, perhaps even designed or had designed for you and you may even have the design sat in front of you waiting to embrace functionality.

The fact that you already have a design is good. It’s a great part of the process that will allow you to see your website come to life. It’s not advisable to spend a lot of time or money on an initial design as along the way you may need to change it anyway.

What you now need to do is build your application into your design, and start to see some functionality. But, how do you break up your design so you can easily integrate it? You need a template system. The reason you need this is so you can avoid duplication of frontend code. Part of good development means you can quickly alter and update your website and for this reason you need only one instance of your design that can be updated and reflected through your whole application. Thinking about this carefully means you can avoid the frustration in future of having to go through every page of your website and update something simple.

Your website should be designed in such a way anyway that you avoid inline styles and use valid HTML and CSS, with the stylesheet included in the head of your document so changes can be made to this external file, as well as it being downloaded and cached by the browser. We won’t go too much into frontend considerations, but it’s important that we touch on it as a general web development concept.

7.1 What about while learning?

Don’t let a design overshadow your learning process. If you’re learning, a completely blank canvas is fine. If you’re focused on the code and output, you’ll probably be better off. Worrying about implementing what you’re learning on the backend into the frontend could cause hours of pain and I don’t recommend it. It’s extremely easy to incorporate code into a design once you’ve finished, anyway.

7.2 Learning for the frontend

Frontend design is a whole different thing to working in the backend on PHP, and many people try to do both. This, of course, is absolutely fine! You’ll find that some companies either employ frontend or backend developers, which does make sense, but that doesn’t mean you can’t learn both. Working in frontend design is sometimes difficult and can be very challenging to keep up with. CSS is evolving rapidly all the time and something that was acceptable only months ago may become warned against today.

I’ve known many people that find CSS properties easy to learn and understand that something like the following will change the body background colour to black and the body text colour to white.

1 body {

2 background:#000;

3 color:#fff;

4 }

Some people know how to style elements to look just the way they want and work with pseudo elements (e.g. hover) and more advanced CSS, but just can’t put together a whole template and make it look right. This isn’t the learners fault, as CSS has a very poor layout system. In fact, CSS until recently didn’t have a specifically designed layout system, and relied on the developer to float elements left and right against each other and using the clear property. We’re now starting to see more specific tailored structure for laying out websites in CSS, and if you’re interested in working on the frontend as well as the backend, check these out. This obviously isn’t a CSS book, but these are worth mentioning as it ties in closely with web development.

7.3 Cutting up your template

We’re now going to look at a basic way of cutting up a template ready for you to write code in it. This isn’t always recommended but can benefit when you’re diving into your first project and need to quickly cut up a design and output some dynamic content.

The best way to start cutting up your template ready for use is to identify the areas that will change and the areas that will remain static in terms of site content. You may have several assets along the sidebar that can be included as part of the main design. You’ll more than likely have a main content area where the majority of your website information is displayed. To start cutting up your design, it’s best to start with smaller assets. Here are some steps that should point you in the right direction. We’ll also talk about directory structure here, as we’ll be including all design files within a main template directory.

1. Start by identifying the main assets on your website. These could be login areas, lists of data, common buttons grouped together or small feeds. Don’t include larger items like the header and footer of your website.

2. Create your directory structure so you can start chopping out the design and including these assets in different files. Perhaps create a directory called template and within this another called assets. You’ll need to create a file for every asset.

3. Paste the code from each asset into these files.

4. Where you’ve removed the code from your HTML, use a PHP include to place this back in. For example:

1 <?php include 'assets/login.php'; ?>

Note that the above code assumes you’ve already broken up the header, footer and sidebar - which we’ll look at in the next step.

After you’ve broken up assets, you’re ready to start panning out and breaking up the template into the header and footer so you can quickly and easily create pages to house content in between. You’ll have an overall header, and overall footer.

1. Identify where your content will be placed. This will most likely be somewhere like the following:

1 <body>

2 <section id="content">

3 Main site content here

4 </section>

5 <aside id="main">

6 Sidebar stuff here

7 </aside>

8 </body>

1. From the top of the document to where the section element starts is your header. Remove this code and place within a file called header.php in your template directory.

2. Place code from the end div downwards in a file called footer.php.

3. There’s a problem. Your sidebar is now within the footer file. You can remove this and place it within a file of its own so it makes sense, and then include it.

All of the advice and steps here may not apply to your website at all. Designs, markup and needs vary dramatically and therefore you need to look at your code and make sense of how it should be broken up.

When you’ve broken up your code and have previewed your design to ensure everything is working, you can now easily create a new file in your root directory and include both your header and footer files. The point is that now, you have everything broken up and can quickly create files and make amends to your design as you go. The only problem you may face is that you need varied page layouts. The best way to address this is to broaden your main content area and simply include different layouts within this, such as different grid structures depending on how you layout is designed.

You can now start to focus on your content and include your global files within each template. You could of course include all of your classes, functions, initialisation, etc. within your header, but some may not be needed. You may be looking to include specific functionality on a page by page basis as and where it’s required. This can be done at a later stage to address speed problems, but it’s always a good idea to start to think in advanced.

7.4 Embrace MVC

MVC is a pattern that separates business logic from the user interface and keeps code clean and easy to manage. These are often found within frameworks, however you can implement your own structure if you know how. Frameworks will almost always make use of some kind of template engine to help with the MVC pattern, meaning that you’ll spend less time fiddling around with views (strictly for output) and more time actually outputting stuff you’ve written in your controller.

7.5 Template engines

A far easier way to include dynamic output within a template is to use a template engine. These will assist in keeping your output as clean as possible while providing a simple, fast way to output data. Originally, we may have something that looks like the following:

1 <div class="asset online">

2 <ul>

3 <?php

4 foreach($users->online() as $user) {

5 echo '<a href="/user/', $user['username'], '">', $user['username'], '</a>';

6 }

7 ?>

8 </ul>

9 </div>

Not entirely messy, but a large page filled without output will soon become unmanageable. With a template engine, the above snippet of code may start to look a bit smarter:

1 <div class="asset online">

2 <ul>

3 {foreach($users->online() as $user}

4 <a href="/user/{$user.username}">{$user.username}</a>

5 {/endforeach}

6 </ul>

7 </div>

Much better! We now have something a little smaller and a lot more readable. The above code is actually possible thanks to Smarty, a popular PHP template engine.

The PHP framework Laravel uses its own template engine called Blade and is extremely easy to output data within the framework. Passing variables from a controller mean you only have to do something like:

1 Hello, {{ $user }}!

Or more appropriately:

1 @if (Auth::check())

2 Hello, {{ $user }}!

3 @endif

And of course, another benefit of using the MVC pattern is that your views benefit from using data passed to them, which mean you can keep logic strictly away from your views.