At this point we assume you have a running Webigniter account, if you're not there yet, please read the getting started instructions.
In this tutorial we are going to walk you through the process of creating your first page, in order to keep things easy, we are going to start with a basic 'Hello, World!' HTML page.
This is the page we are going to create in Webigniter..
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>As you can see, nothing really fancy, but we do want the content manager (user) to be able to modify the 'Hello, World!' text and the paragraph below. This is how we do it...
A Webigniter page consists of 2 base elements, a layout file and a view file.
In short a layout file is the foundation of the page, each category in the CMS has it's own layout file.
So each layout file represents the foundation of a category.
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<?php $webigniter->getSectionsContent();?>
</body>
</html>Notice how we replaced the body content by <?php $webigniter->getSectionsContent();?>, this is the place where the view files and all its contents will be loaded.
The name of the file should match the name of the category in the CMS and must have the .php extension. Save the file in the \views folder of your project.
Let's name this file pages.php.
The second part of a Webigniter page is a view file, this is the part where the CMS'able content should come. This does not mean that you can't make the layout file customizable, but to keep things simple for now, we make this distinction.
So our view file for this page will be:
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>The filename should be the same as the name of the section in the CMS that this view file represents and must have the .php extension. Save it in the \views folder in your project.
Let's name this file hello_world.php.
Now that we have our HTML content in place, it's time to create the page in the CMS.
Login to the Webigniter CMS.
First we need to create a category, a category is a collection of pages, you can use it to group different page types. All pages within a category share the same layout file which we have created earlier. So go to 'Categories' and click 'Add category'.
Now specify a name, our layout file is called pages.php, so our category name should be 'pages'.
You can optionaly specify a URL, all pages within this category will have this URL prefix, this is optional and for this tutorial we keep it empty.
Now click 'Create' to save this category
Within this category you can create a page by clicking 'Add page'.
Here we can add a name, again, this is only for your own reference.
The URL can be whatever you want, but in this tutorial we will use home.
Now click 'Save'
By default all new pages are unpublished. But for now we want it to be published, so switch on the published toggler and save the page.
A page must have 1 or more sections in order to have content on a page.
Each view file (which we created earlier) represents a section.
Let's open the 'Sections' screen by clicking 'Sections' in the navigation.
Now click 'Add section'.
Here we can add a name we named our view file hello_world.php, so we need to name our section 'hello_world'.
Now click 'Create'.
This will bring you to the sections overview page, now click on the newly created section. This is where we can add elements to the section. Elements are the pieces that interact with the content manager in the CMS. In our case in this section/view file we have an h1 title and a paragraph. If we want them both to be manageable through the CMS we should now add 2 elements.
Click 'Add element'
These are all the types of interaction you can pick for your content managers, for now for the h1 title we choose 'Text'.
Specify a name only in order to keep things simple (example: title).
Then click 'Add element'.
You will now see that the element has been added to the section, now we want to add another element for the paragraph. This time choose the 'Wysiwyg' element and name it: paragraph.
Save the section...
Now we need to let the magic happen...
Go back to the page we created earlier and click 'Add section', and select the section we just created.
You'll see that your page now has some extra input fields, a text field and a wysiwyg editor (the elements from the section).
If you check the page now, you will see that the view file is inserted and we see our Hello world message, nothing dynamic yet, we still need to do one last thing. We need to tell our view file which information to show..
Open the view file (hello_world.php) in your editor and modify it like this:
<h1><?=$title;?></h1>
<p><?=$paragraph;?></p>This tells the view file that it should get dynamic information, in this case from $title and $paragraph, these are the names we gave the elements in the section (prepended with a $).
Now if you edit the page and then refresh it, you'll see that the information of the CMS is displayed in the browser as well.
Congratulations, you just created your very first Webigniter page and made it manageable!
A page can have an infinite number of sections, so you can use them as building blocks, you can now even add the same section again and specify a different title and paragraph.
Or just use one section per page, your choice...
