Seperation of code and presentation

PHP
1

Being relatively new to OOP I’m wondering if any of you guys could help me with a question I have.

When building a product list page, I’m under the understanding it’s important to have a seperation of both code/process and presentation, how would I go about doing this?

By something like the following example?



(productlist.php)

<?php

$prod = new prod;

echo $page->pageTitle;

echo "<ul id=\\"prod_list\\">\
";
while ($prow= mysql_fetch_assoc($prod->prod_res())) {

<li>
<h1><?php echo $prow['title']; ?></h1>
<p><?php echo $prow['desc']; ?></p>
</li>

}
</ul>

?>

Or would it be better just creating the product list (along with all of the above html) in a method, then outputting the method? Like:



(product_class.php)
...

public function prodList() {

$query= "SELECT title, desc FROM prod"
$pres = mysql_query($query);

echo "<ul id=\\"prod_list\\">\
";
while ($prow= mysql_fetch_assoc($query)) {
echo "
<li>
<h1>" . $prow['title'] . "</h1>
<p>" . $prow['desc'] . "</p>
</li>";
}
echo "</ul>\
";

}

...




(productlist.php)

<?php

$prod = new prod;

$prod->prodList();

?>
2

I am by no means a OOP guru and struggle with this own concept myself.

My first suggestion is to use return inside methods instead of echo. That way you can control the output and perhaps use it differently down the track.

Second, my feeling is mixed as to how the result should be generated:

  • in an ajax heavy environment, I think the result should be generated by a method or methods somewhere, including the necessary html. That way you can make a ajax call to update the result after an action has occurred - such as GET ajax.php?action=fetchSomeList, and update the div with the result.

  • in a more static environment, I am more inclined to use conventional mixes of html and php loops to produce results, which make it easier from a design POV. For example say you want to add a class to a list item - how hard should it be?

There is a trade off with each approach, and I figure that the middle ground is some portable language like xml or json, allowing you to output in multiple ways in multiple environments - but what I have seen of xml based templating seems way too complicated for me.

3

In both approaches, you didn’t really separate anything so you didn’t achieve much.
The goal of OOP is to group similar tasks and that you can reuse class methods or extend the classes to fit other roles with similar subjects.

So why not combine the two approaches? Use the class to retrieve the data from the database, store it in an array and fetch the array in another script where you can change the html output. That way, you did achieve some separation. You have the class method to obtain the data and a viewer to display it.

That way, you can have multiple pages using the same class and method to retrieve the products, but you can style them completely different.

4

model/products.php


function productsList() {

	$products = array();
 
	$sql = 'SELECT title, desc FROM prod';
	$result = mysql_query($sql);
 
	while ($product= mysql_fetch_assoc($result)) {
		$products[] = $product;
	}
	
	return $products;
 
}

template file usage


<ul>
	<?php foreach(productsList() as $product) { ?>
		<li>
		     <h1><?php echo $product['title']; ?></h1>
		     <p><?php echo $product['desc']; ?></p>
		</li>
	<?php } ?>
</ul>

Without getting into a full blown OO business layer the above achieves separation between business and presentation logic. if you would like to take it further you could organize all the product based data access methods into a class. You would than instantiate the class and call appropriate method to fetch the data or carry out the business task at hand.

5

I guess thats true, an array is probably the most re-usable storage option - I guess what I have found challenging about that method in the past is to factor in all the different usages without creating a huge method.

For example, I once made a method to retrieve a bunch of auctions. The variables included:

  • category id
  • seller id
  • keywords
  • low and high price
  • dynamic category variants
  • buy now only
  • items with video only
  • make an offer only
  • order by

Of course most of those variables are easily dealt with, but some are quite complex to deal with, and the requirements changed from page to page.

I guess my point is, I find handling the result is the easy part. The hard part is retrieving the data efficiently and in a re-usable way in a complex application.

What method would be used to output html for ajax? Would you include the template file? I guess thats the point where I start to confuse how to chain things together and find -

echo fetchSomeList();

easier than “include some file and pass an array to produce a result”.

6

going back to ajax again, given oddz example, which contained <ul> and <li>… sometimes you just want a single <li> - sometimes you want the whole list. If strictly keeping html out of methods, in what reusable way can this be achieved without having separate templates for whole list and list item?

Not trying to be a thorn here, I am just genuinely confused when I try and combine MVC and ajax driven environments.

7

How that would dealt with depends entirely on the existing architecture. My framework itself uses a REST layer that is a direct gateway to data access methods. By default the results are returned as XML but variable can be supplied to change the output to JSON or any other format so long as a translation exists.

model.php?pkg=Product&method=fetchById&args=23

Navigation to a URL similar to that would result in a XML output for the return value of the fetchById method within the model package Product 23.

On the other hand when I want to execute a complete module returning HTML another entry point is used.

controller.php?pkg=Product&method=list

In that case the output of the list method within the products controller is returned as string that can be placed on the page using innerHTML dynamically.

That is how I have set-up my framework to separate REST (data access) from merely returning the HTML output of a request without the wrapper/layout.

That is what this entire thread is about actually. Just in that case its a JQuery integration but the endpoints are the same.

8

I sometimes have html in methods for stuff like simple listitem lists, menu lists and dropdown lists since a strict separation gives to much complexity for me…

9

You pull data into the template rather than pushing from the method.

The template/view requests the data it needs rather than being passed data the container thinks it will need. Sorts out all these problems :slight_smile: