MKC framework
is a set of PHP Classes for creating web pages and applications. Each web page is defined as an extension of the Page class. Using PHP inheritance pages may share common structures
and behaviours of the parent pages and extend those as needed.
Main level
In the simplest form the main level of the application consists of the following phases
$MyWebApp = new WebApp('Tutorial_Page');
// Create WebApp object, which controls the creation and execution of the page objects.
$MyWebApp->initialize();
// Initialize WebApp. I.e. the object of the class 'Tutorial_Page' is created and the basic layout, navigation structure and functionality of the page is defined.
$MyWebApp->execute();
// If user have pressed some button the related code/functions are executed. For example this could load some content onto the page or define a new page to go next.
echo $MyWebApp->compose();
// Finally the page is composed as html-code and written to the output.
Pages
Each page is defined as an extension of the Page class.
This is a simple page, which defines the basic structure and layout to be used as a base for all the pages on the site.
class Main_Page extends Page
{
function __construct(){
// CSS is used to define the exact layout and theme for the site
$this->styles = array('css/normalize.css','css/base.css','css/layout.css','css/content.css','css/theme.css');
//Construct page object using template
parent::__construct('MKC Framework',$this->styles);
// Define page layout ------------------------------------------------------------------------
// Header - consists of header image and main navigation
$this->header = $this->addChild(new PageElement('header'));
$this->header->addChild(new Image('header-image','','images/header.png'));
$this->mainMenu = $this->header->addChild(new Menu('mainMenu','','','',true));
// Content area - the actual content is to be located here
$this->contentArea = $this->addChild(new PageElement('contentArea'));
// Footer
$this->footer = $this->addChild(new PageElement('footer'));
$this->footer->addChild(new PageElement('','left',' '));
$this->footer->addChild(new Image('','right','images/makeconsWebDesign.png'));
$this->footer->addChild(new PageElement('','right',' <br /><img src="images/makeconsWebDesign.png"/>'));
$this->footer->addChild(new PageElement('','floatEnd'));
// Add navigation buttons with target pages
$this->mainMenu->addChild(new Button('Tutorial','','','Tutorial_Page'));
$this->mainMenu->addChild(new Button('Reference','','','Reference_Page'));
}
}
The next step is to extend the MyPage so that the content area is split in two columns (left and main), which both have Pane elements inside. (Pane element is used to load content onto the page).
class Layout2Col extends Main_Page {
protected $mainColumn;
protected $mainPane;
protected $leftColumn;
protected $leftPane;
function __construct(){
parent::__construct();
$this->leftColumn = $this->contentArea->addChild(new PageElement('leftColumn','column sideBar'));
$this->leftPane = $this->leftColumn->addChild(new Pane('leftPane'));
$this->mainColumn = $this->contentArea->addChild(new PageElement('mainColumnNormal','column mainColumn'));
$this->mainPane = $this->mainColumn->addChild(new Pane('mainPane'));
}
}
And finally the Tutorial_Page extends the two column layout by loading the content onto the page.
class Tutorial_Page extends Layout2Col
{
function __construct(){
parent::__construct();
$this->mainPane->setSource('content/tutorial.html');
}
}