yii, Organize directories for applications with front-end and back-end

Large applications are often divided into front-end and back-end (or even more ends) depending on the target user groups. The front-end should be used by common users, while the back-end mainly the administrators or staff members. The two ends usually have dramatically different appearance, even though they may share a lot of code underneath. In this tutorial, we describe a way of organizing directories of the code for both ends.

Note: The directory organization described in this tutorial is meant to serve as a referential implementation. It is not a standard. Yii offers complete freedom for you to organize your directories, according to your needs.

To start with, we give out the directory organization as follows,

wwwroot/
    index.php
    backend.php
    assets/
    images/
    js/
    protected/
        config/
            main.php
        components/
        controllers/
        models/
        views/
        runtime/
        backend/
            config/
                main.php
            components/
            controllers/
            models/
            views/
            runtime/

We have two entry scripts here: index.php and backend.php. The former is used by front-end, while the latter by back-end. All the application code are placed under the base application directory protected which should be configured to prevent from being accessed directly by end users.

Under protected, we have the normal set of sub-directories needed by a typical Yii application: config,components, controllers, models, views and runtime.

The extra backend directory is used to store code that are specifically written for the back-end. Similar to the front-end, we organize these back-end code in terms of config, components, controllers, models, viewsand runtime.

The entry script code for the front-end and the back-end look like the following. Their main difference is that different application configurations are used.

// index.php:
require('path/to/yii.php');
Yii::app()->createWebApplication('protected/config/main.php')->run();
 
// backend.php:
require('path/to/yii.php');
Yii::app()->createWebApplication('protected/backend/config/main.php')->run();

The front-end application configuration is very normal, just like we usually have for single-end applications. The back-end application configuration is a bit special. Its content is given as follows,

$backend=dirname(dirname(__FILE__));
$frontend=dirname($backend);
Yii::setPathOfAlias('backend', $backend);
 
return array(
    'basePath' => $frontend,
 
    'controllerPath' => $backend.'/controllers',
    'viewPath' => $backend.'/views',
    'runtimePath' => $backend.'/runtime',
 
    'import' => array(
        'backend.models.*',
        'backend.components.*',
        'application.models.*',
        'application.components.*',
    ),
    // ... other configurations ...
);

In the above, we first define $backend and $frontend to be the directory protected/backend andprotected/, respectively. We then define a root alias named backend to be the directoryprotected/backend. In the configuration array, we specify that the base application directory of the back-end to be the same as that of the front-end, namely, protected/ (the reason of doing so is to explained shortly). The rest of the crucial paths (controllerPath, viewPath and runtimePath) are defined to be located underprotected/backend. And finally, we import several directories, starting with the back-end components andcomponents directories, followed by the normal application components and components directories.

So why are we using protected as the base application directory for both the front-end and the back-end? This is because the back-end often needs to reuse the code designed for the front-end, but not vice versa. Having the same base application directory means that the two ends have the same path for the applicationroot path alias. Therefore, code referring to the application alias can be reused without any problem in both ends.

The back-end, in addition to reusing the front-end code, usually has its own special code to deal with, for example, content administration. We store these code under the protected/backend/ directory and sub-directories. In its application configuration, we also import these additional sub-directories together with those meant for both of the ends.