Web Pages
Introduction
One essential part of any website or web application are the pages that the user will interact with. WebFiori framework provides the developers with simple way to create dynamic web pages. Any class that represents a web page must extend the class WebPage. This class has all needed utilities to add and modify the content of a web page without having to touch HTML.
Simple Use Case
Assume that we would like to have a page that has only one statement which says "Hello World!". The first step is to create new PHP class that extends the class WebPage.
Code
namespace webfiori\examples\views;
use webfiori\framework\ui\WebPage;
class ExamplePage extends WebPage {
public function __construct() {
parent::__construct();
}
}
Once we have the class, we can create a route for it inside the class ViewRoutes as follows:
Code
namespace webfiori\framework\router;
use webfiori\examples\views\ExamplePage;
class ViewRoutes {
/**
* Create all views routes. Include your own here.
* @since 1.0
*/
public static function create() {
Router::view([
'path' => '/example',
'route-to' => ExamplePage::class
]);
}
}
If we run the website using PHP's built-in server using the command php -S localhost:8086 -t public and navigate to http://localhost:8086/example, an empty page will appear. But when we inspect the HTML of the empty page, HTML code which looks like the following will be seen:
Code
<!DOCTYPE html>
<html lang="EN">
<head>
<base href="http://localhost:8086">
<title>
WebFiori | WebFiori
</title>
<link rel="canonical" href="http://localhost:8086/example">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div id="page-header">
</div>
<div id="page-body">
<div id="side-content-area">
</div>
<div id="main-content-area">
</div>
</div>
<div id="page-footer">
</div>
</body>
</html>
This structure is the default page structure which is used by WebFiori framework. The developer can modify this structure as needed but we will not look into that now. The last thing that we have to do is to add the text "Hello World!" to the body of our page. We will be creating new div element and add the text to that div.
Code
namespace webfiori\examples\views;
use webfiori\framework\ui\WebPage;
class ExamplePage extends WebPage {
public function __construct() {
parent::__construct();
$div = $this->insert('div');
$div->text("Hello World!");
}
}
Now when we refersh the page on the web browser, the statement "Hello World!" should appear.
Adding Meta Tags
The developer can use the method WebPage::addMeta(). This method accespts two parameters and one optional. The first argument is the value of the attribute name of the tag. The second one is the value of the attribute content of the tag. The last argument is used to tell if the value of the attribute content will be overreden if a tag with such name already exist.
Code
namespace webfiori\examples\views;
use webfiori\framework\ui\WebPage;
class ExamplePage extends WebPage {
public function __construct() {
parent::__construct();
$this->addMeta('robots', 'index, follow');
$div = $this->insert('div');
$div->text("Hello World!");
}
}
Adding CSS or JS Resource Files
Adding extra CSS or JS resource files to your page can be performed using two methods. The first one is WebPage::addJS(). This method accepts two parameters. The first one is the value of the attribute src and the second one is an array that can have additional attributes for the JavaScript resource file such as async.
The second method is WebPage::addCSS(). Similar to WebPage::addJS(), this method accepts two parameters. The first one is the value of the attribute href and the second one is an array that can have additional attributes for the CSS resource file.
Code
namespace webfiori\examples\views;
use webfiori\framework\ui\WebPage;
class ExamplePage extends WebPage {
public function __construct() {
parent::__construct();
$this->addJS('https://example.com/ext-javascript.js');
$this->addCSS('https://example.com/ext-style.css');
$div = $this->insert('div');
$div->text("Hello World!");
}
}
Applying a Theme
One of the great fetaures of the framework is the ability to create and apply themes. The main aim of themes is to give a unified look and feel for all the pages of the website or web application. Simply, to change the whole look of the page without modifying the content, change one line of code to apply new style. For more information on how to create themes, check here.
There are two ways to apply a theme to a web page. One way is to use the name of the theme if you know its name and the other way is to use the class that represents the theme. One of the themes that comes with the framework has a class name WebfioriV108. To apply this theme, simply use the following syntax:
Code
namespace webfiori\examples\views;
use webfiori\framework\ui\WebPage;
//First, import the theme.
use webfiori\theme\WebFioriV108;
class ExamplePage extends WebPage {
public function __construct() {
parent::__construct();
//Apply the theme
$this->setTheme(WebFioriV108::class);
$div = $this->insert('div');
$div->text("Hello World!");
}
}
Before Render Action
Suppose that we would like to perform an event before the page is rendered. For example, we would like to make an element be the last one to be added to the page. This can be achived using the method WebPage::addBeforeRender().
Code
namespace webfiori\examples\views;
use webfiori\framework\ui\WebPage;
class ExamplePage extends WebPage {
public function __construct() {
parent::__construct();
$this->addBeforeRender(function (WebPage $page, $name) {
$div = $page->insert('div');
$div->text($name);
}, ["Ibrahim"]);
$div = $this->insert('div');
$div->text("Hello");
}
}
Next: UI Package
Previous: The Class 'Response'