Separating User Interface and Database development in a PHP application

Question

fetchdata.php - sends the required data

function FetchItems()
{
    while($Items = mysql_fetch_object("SELECT * FROM items")) //function is deprecated, would be changing it
    {
        $TotalItems[] = $Items;
    }   
    return $TotalItems;
}

listitems.php - for user interface and displaying list of items to the user

require_once('fetchdata.php');
$Items = FetchItems();
echo '<table>';
foreach($Items as $ItemDetails)
{
    echo '<tr>';
    echo '<td>';
    echo $ItemDetails->ItemName;  // right now the UI developer requires the actual column names to display data but I don't want this
    echo '</td>';
    echo '<td>';
    echo $ItemDetails->ItemQty;
    echo '</td>';
    echo '<td>';
    echo $ItemDetails->ItemCost;
    echo '</td>';
    echo '</tr>';
}

echo '</table>';

I need to separate the mysql development and the user interface development so as to distribute the workload between separate persons. The UI developer should not require the actual column names/table names/database names for showing data to the user. But these would only be required by the back-end developer.

From a developer point of view , if in case I wanted to change the column name of my table like , ItemQty to ItemAvailableQty then I would have to ask the UI developer to edit the UIe file ie listitems.php, but I want, that only the back-end file which is fetchdata.php should be edited and the UI file should not be touched for such database changes. Whatever be the changes in the database, those changes should be independent of the UI file, the UI file should not be aware of/require those back-end changes, ie changes would be invisible for the UI file. The UI file would only be edited if and only if there are some UI alterations.

What steps shall I take to achieve this and how? Do I need to create views/stored procedures etc.? Or do I have to go for MVC framework, if yes, then how?

Answer 1

You are not required to use MVC framework, but it will be better than reinventing the wheel. In the global concept of MVC you have a View object which contains the needed variables for your UI to run. It depends on the way you are implementing it. In most of the cases in your View object you would need a magic set method, which assigns values to non existent variables.

class View {

    public function __set($name, $value) {
        $this->$name = $value
    }

    public function __get($name) {
        return $this->$name;
    }
}

In the very simpliest way, if you try to set value to a non-existent property of the object of View, it will create the property on the fly.

Then in your backend interaction you have a global class that holds the View object, let's not call it application, but Controller.

class Controller {

    protected $view;

    public function __construct() {
        $this->view = new View();
    }
}

No magic, just a shared property through all of your backend interaction that holds the View object.

You now have your FetchItems() method in a class, let's call it, Items .

So, you create a controller which uses the database operation (in the MVC, it would be a Model) and assigns return values to the magic properties of View.

class ItemsController extends Controller {

    public function ItemsList() {
        $items = new Items();
        foreach ($items->FetchItems() as $item) {
            $this->view->ItemName[] = $item->ItemName;
            $this->view->ItemQty[] = $item->ItemQty;
            $this->view->ItemCost[] = $item->ItemCost[];
       }
 }

So here, we created 3 array variables in the View object from the return data of your Items model. It won't be the best approach, since the UI developer should use some backend functions to interact with them, so you might want to create one big array which holds them like $this->view->Items['name'] = $item->ItemName , $this->view->Items['Qty'] = $item->ItemQty , so you will only send the variable Items to the view.

Now, if you change a column name, you'd need to do changes only in your business logic, where you would make $this->view->Items['qty'] = $item->ItemAvailableQty; but in the UI part, the $this->Items['qty'] will remain.

This of course does not show how to implement whole MVC, it just shows the logic you could follow. You, of course, could use existent MVC framework, or just alter your application to have shared variables, so your UI part will recieve information from an object, which can use created on the fly properties. So once assigned value to an internal property, you will only need to change the assignation, but not the real property which is used in the template.

For example, out of the strict OOP or Frameworks, you can assign values to internal properties of the class that holds FetchItems() method, so your UI developer will use them, instead of the raw returned database data.

But, at the end, wouldn't this take you more time and does it worth it, you will make millions of assignations to view variables, just to not make your UI developer care about the columns. A database table is not meant to have its columns changed while in exploitation. Even more, if you already have backend around this table.

Answer 2

You could use a template engine like Smarty or Twig . They ensure a clean separation between your application's design and logic. For an example of how this is achieved, I'd suggest you take a look at Smarty's crash course: http://www.smarty.net/crash_course

It's even possible to combine such a template engine with an MVC framework.