Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Recycle your design elements across the website

Tuesday, June 23rd, 2015 by Servage

code-recyclingProviding a standardized design is a fundamental part of providing a continuously great visual experience. It means that you build your web application using the same visual elements, and reuse the same code, which makes your system appear generally structured and consistent. One good help is to compartmentalize your code snippets for various elements and simply include them again and again wherever the element is needed. Clever systems allow such elements to be customized via settings passed to the element for specific use. This still allows you to use the same elements, just with differentiating settings.

Sample website without elements

Consider the sample website below, which has a welcome message displayed in the page body before the content.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Web App</title>
</head>
<body>
	<p class="info">Welcome, dear user</p>
	<p>Some content</p>
</body>
</html>

In the code above the message is hardcoded into the content at a particular location. However, in order to make reusable code, it is smarter to divide the whole thing into multiple elements.

Sample website with element inclusion

The next example shows how the message part was placed into a reusable script file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Web App</title>
</head>
<body>
	<?php
	$message = 'Welcome dear user';
	include('Message.php');
	?>
	<p>Some content</p>
</body>
</html>

// Message.php file
<p class="info">$message</p>

Sample website with PHP class-based element

The above is somewhat better, but there are still limitations to this approach. Therefore a third example below will show a much more optimized solution, where the reusable code block is wrapped into a PHP class with more functionality. This enables you to smartly be able to include it again and again, wherever you need it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Web App</title>
</head>
<body>
	<?=Message::info('Welome dear user);?>
	<p>Some content</p>
</body>
</html>

You may notice that now the snippet is based on a class, which could look like below:

class Message {
	
	protected $type;
	protected $message;
	
	public statis function info($message)
	{
		$object = new self;
		$object->type = 'info';
		$object->message = $message;
		return $this->build();
	}
	
	public statis function error($message)
	{
		// ... like the "info" method above
	}
	
	
	public statis function success [ etc ... ]
	
	
	protected function build()
	{
		return '<p class="'.$this->type.'">'.$this->message.'"</p>";
	}
	
}

The last approach shows how you can easily compartmentalize visual building blocks into PHP classes and thereby make them clever and reusable.  There are different ways of achieving the modular approach, and the right way for you may be different. Either way, you should always consider how to reuse your code. It saves time during your development, and provides the great advantage of centralized control of the particular element, so future changes are easier and faster to implement.

Recycle your design elements across the website, 3.4 out of 5 based on 5 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.