Setting up 1202 as a website CMS

This tutorial will show you how to set up your 1202 system to use it as a content management system (CMS) for a website.

The example site in this tutorial is a basic corporate site, consisting of three different pages with text and images:

• Home: contains a little 'about' text and gives a brief view of what can be found on the other pages
• Projects: list of projects in which the company is involved
• News: short news updates about the company

The actual code (HTML/CSS, PHP) for these pages is not controlled by your 1202 system. It resides on a different server, most commonly hosting space linked to the site's domain.

Therefore, in terms of 'infrastructure', the prerequisites are:

1. Domain name and hosting for your site – for this example, you need to have hosting that allows running PHP scripts
2. 1202 system for managing and providing content

You will have to provide domain name and hosting yourself and create your own HTML/CSS pages or use a template to build on. Either way, you have to be comfortable working with (HTML) files.

Change system settings

+

Your 1202 system is 'loosely coupled' to a website: it is not specifically bound to any domain name or server, in fact it can provide content for multiple sites and switch from one domain to another without issues. You only have to allow access for the server on which the website resides.

In order to allow access for the server on which our example site is running, add the server's IP address to the list of 'Allowed remote addresses' in the 'System' section of your 1202 system.

If you don't know the IP address from the website's server, you can determine it by executing this piece of PHP code from this server:

echo file_get_contents('http://checkip.dyndns.com/');

This will return something like:

Current IP Address: 149.210.170.40

After adding the address, click 'Update settings'.

Create containers

Our example site offers visitors information on projects, it has news articles, and a bit of 'generic' text about the company. Your 1202 system has a 'Text' container by default. This will suit our 'about' text because that only needs a title and some text. Projects and news, however, could have more properties, for instance a 'status' for projects, and a 'category' for news.

To have absolute freedom in how the project items and news articles are shaped, we're going to create new containers for them. Let's start with a 'Project' container. Click 'Create new container' in the 'System' section and then switch to the 'Content' section to edit the new container.

In the container list, directly below the top bar, you should see the new container, aptly named 'New', at the end. Click on it, then click 'Settings' to switch from the overview to the container settings.

By default, containers have five read-only fields: +

1. id: every item has a unique identifying number ('id')
2. Created (UTC): date and time (in Universal Coordinated Time, or UTC) when an item was created
3. Updated (UTC): date and time (UTC) when an item was last updated
4. Created (user id): id of the user that created the item. Empty if the user has since been deleted.
5. Updated (user id): id of the user that last updated the item. Empty if the user has since been deleted.

We are going to add some editable fields to this, namely:

• Name: the name of the project
• Description: description of the project, with (optionally) images
• Status: project status, either 'In progress' or 'Finished'

You can add more fields, but for now we'll just add these three. Add fields by clicking the 'plus' icon in front of the appropriate field types from the 'New field' pane, right below the current fields. The 'Name' field is a 'Text field', the 'Description' a 'Text box', and for 'Status' we'll add a 'Radio buttons' field.

+

With the new fields added to the list of current fields, we'll edit the new fields settings to suit our needs. Click the 'cog' icon in front of a field to show the field settings. Make the following changes:

• Text field: change the 'Title' to 'Name'
• Text box: change the 'Title' to 'Description' and change the 'Type' from 'Plain' to 'Editor'
• Radio Buttons: change the 'Title' to 'Status', then change the first of the 'Options' from 'option' to 'In progress' and set its color to 'Blue', add a second option by clicking the 'plus' icon and name it 'Finished' with the color 'Green'

After setting our fields, scroll down to the 'Links' pane to add the possibility to link/embed images into project items. First, select 'Image' from the drop-down menu next to 'Container'. With 'Image' selected, click the 'plus' icon in front of it to add the 'Image' container to the list.

+

Below the 'Links' pane is the 'Options' pane. Expand the pane and change the 'Title' of the container to 'Project' (note the use of the singular form 'Project': just like 'User' and 'Image' it names the container after the item type rather than referring to a collection of 'projects').

There are a lot more options, but for our basic example, the defaults will do. Click 'Update settings' in the top right corner to save the container settings.

Next, we'll repeat the same process for our 'News' container. In short:

1. Create a new container by clicking 'Create new container' in the 'System' section
2. Switch to the 'Content' section, select the container named 'New' and go to the 'Settings'
3. Add four fields: 'Date picker', 'Text field', 'Select menu expandable' and 'Text box'
4. Change the settings of the new fields:
   a. 'Date picker': set the 'Title' to 'Date'
   b. 'Text field': set the 'Title' to 'Title'
   c. 'Select menu expandable': set the 'Title' to 'Category'
   d. 'Text box': set the 'Title' to 'Text' and change the 'Type' to 'Editor'
5. Add the 'Image' container to the 'Links pane' (below the 'New fields' pane) by selecting 'Image' from the container selector and clicking the 'plus' icon in front of it
6. Expand the 'Options' pane and change the 'Title' to 'News'
7. Click 'Update settings' to save the changes

Create views

Although not a necessity, it's good practice to create views for containers from which you want to use data in your models and – ultimately – on your website. Because a view is only a representation of what's stored in the container on which it's based, you can shape it any way you like without affecting the data or the way items are added and edited.

Thus we can create and tune our views specifically for our website, and hide them from users that are not involved in the development of the site.

Views are bound to a container and cannot exist without their 'parent'. Creation is also done from their parent. To create a view, go to the 'Settings' section from the desired container and click 'Create new view' in the top right corner.

For our example site, we'll create views for the 'Text', 'Project' and 'News' containers. Go to each container and create a new view from the 'Settings' section.

Once created, a new view will show up right below the bar listing the containers and will be named after the container with the word 'view' and a sequence number added, so 'News view 1' for our 'News' view. You can only see a view when you are viewing its parent container.

+

New views show the fields from their parent container by default. You can expand this with fields from linked containers, for instance: if you can link an 'Image' item to a 'Text' item, you can add the field 'Image: id' to the view fields to use it for filtering and in your models.

The source container or view determines the data available to the models. Because we want to use images on our site, at least their id's have to be provided by the view. This means we have to include them in the view fields.

To add the 'Image: id' field to the view, go to the 'Settings' section of the view and click the 'plus' icon next to the 'Image: id' field in the 'New field' pane. Do this for the views 'Text view 1', 'Project view 1' and 'News view 1'.

You can include more fields and set more options (like setting a fitting 'Title'), but for our example, this is sufficient.

Create content

We do not need 'real' content right away, but some 'dummy' content will be quite handy to test our filters and models, and to eventually make sure everything works like it should.

Create a single new item in the 'Text' container for our 'about' text, and create a few new items in the 'Project' and 'News' containers. Make sure all fields are populated. Also, include a few images here and there by dragging and dropping them into the text boxes. Experiment with a bit of formatting and positioning if you like.

Create filters

In order for our content to reach the models, we need to create filters. At this point, you have to have an idea about the content you want to use on the site and where it should go.

For our example, we want an 'about' text on the page 'Home'. This text is stored in the 'Text' container. It should be just one text, which might only be edited in the future. This means we can filter it out by using its 'id'.

+

Create a new filter by switching to the 'Filter' section of the 'Text view 1' view. Give it a 'Title' first, then move to the filter groups below. By default, the first filter element is set to 'id contains'. Change this to 'id =' (equals) and add to it the 'id' of the dummy 'about' text you've created earlier. Click 'Add this filter' (top right) to save the filter.

We also need filters for 'Project' and 'News'. We'll create two filters for both: one providing the items for the individual page, and one for the 'home' page, where we'll show only the last three items.

First we'll create a filter for all the projects. Go to the 'Filter' section of 'Project view 1' and create a filter, only setting a 'Title' and checking 'Ignore filter groups' in the 'Options' pane below. This will ensure that all projects are included. Click 'Add this filter' to save it.

+

Immediately after saving you can start setting a new filter. Set the 'Title' to 'Last three projects' and again check the 'Ignore filter groups' box, but now also set 'Limit number of results to' to '3'. Save the filter.

Continue to the 'News view 1' view to add two similar filters, one with all news items titled 'All news items' and one with the last three news items titled 'Last three news items'. An important difference between projects and news items is that we sort the news items by date. You can set the sort in the 'Options' pane (right half of the pane). Click the green 'arrow up' icon next to 'Date' to include this field in the sort. Now check the box next to 'Descending' to make sure the latest news will come first.

Create models

With the 'Content' section set to our site's needs, we can now focus on the models to actually deliver the content. Models are intermediaries between your 1202 system and the outside world. Nothing can get out of it without a model.

The big advantage of models is that you're not bound to the structure or even the contents of a content item. You can decide which fields you want to use, where you want to use them, and how. You can manipulate their contents with (HTML) code and scripting (1202 script).

When setting up 1202 to work with a website, it's best to mirror your models to your pages. This way, you can more easily identify and edit them. After all, the collection of models can be seen as a somewhat different representation of the actual site.

For our example, we'll create three models: one titled 'Home', another one titled 'Projects' (plural form, since this will be a list of projects), and finally a model with the title 'News''.

+

We'll start with the model for our projects page. Switch to the 'Model' section and click on 'New model'. Here, set the 'Title' to 'Projects'. You can also give it a 'Description' and enter the URL the model corresponds to.

With the 'general' attributes specified, we're going to move to the model blocks below. The big white canvas contains one model block titled 'Name' to start with. Drag it into the center of the canvas and resize it a bit. When adding more blocks, you can drag and resize them to match the structure of your site, thus creating a kind of 'wire frame' for easy reference.

Above the canvas all content filters are listed, split out by containers and views. Click on 'Project view 1' to reveal the two filters we've created earlier. The one we want to use for our projects page is the one titled 'All projects'. Drag the filter to the model block to attach it.

+

With no further settings, the model block will deliver data in JavaScript Serial Object Notation (JSON). This means your site retrieves all items in the 'Project' container as JavaScript objects, which you can use to process further. But it is also possible to make them more 'ready to use' by defining a custom output. To do this, click on the 'cog' icon of the model block (not the 'cog' icon of the attached filter) and select 'Custom' as 'Output' in the pane that folds out below.

After selecting 'Custom' a text box shows up where you can define your custom code. To the right of this box are shortcuts to relevant fields and 1202 script commands. The field names and script commands are parsed when the block is retrieved.

We are going to deliver the project descriptions as neat blocks, complete with HTML tags. Fill the 'Custom code' with this outline:

<div class="project">
    <h2></h2>
    <p class="project-status"></p>
</div>

Because this code is repeated for every item, it will amount to a list of div elements with the class 'project'. You can style the div with CSS on your site (likewise, its contents). What we need to add, are the 'Name', 'Description' and 'Status' field values. Put the 'Name' field between the header (h2) tags, the 'Status' field between the paragraph (p) tags below, and the 'Description' field below that, before the closing div tag, resulting in (check if the field codes in your 1202 system are the same, they may differ):

<div class="project">
    <h2>{252: Name}</h2>
    <p class="project-status">{254: Status}</p>
    {253: Description}
</div>

+

Wrap up by changing the 'Title' of the block from 'Name' to 'All projects' (describing what the block produces). Then click the 'check' icon (top right of the pane) to save the changes.

Click 'Add this model' to add the model and continue making another one. This one will be the 'News' model. Set it up in the same way as the 'Projects' model, of course with different values:

• Title: 'News'
• Description: 'News page'

Attach the filter 'All news items' to the model block, set the block 'Output' to 'Custom', change the 'Title' to 'All news items' and insert this custom code (again, check the field codes):

<div class="news">
    <h2>{262: Title}</h2>
    <p class="news-date">$date[{261: Date}][%A, %B %e]</p>
    {264: Text}
</div>

Note the inclusion of the 1202 script command 'date' to format the value from the 'Date' field in a specific manner. In this case, it will output something like 'Friday, January 30'. You can format it in another way, and there are many more 1202 script commands for other purposes as well.

Click the 'check' icon, then click 'Add this model' to save it. Next, the final model: 'Home'. Set the basic attributes:

• Title: 'Home'
• Description: 'Home page'

+

'Home' has not one, but three model blocks. One block outputs the 'About' text, the second one provides the last three projects, and the last one the last three news items. On our site, the 'About' text will sit below the last projects and last news, which are positioned next to each other (projects to the left, news to the right). We mimic this appearance in the model by dragging and resizing the blocks. Click on the 'plus' icon, left of the canvas, to create new blocks.

Attach the appropriate filters to the blocks, then edit the blocks, setting the 'Title', 'Output' and 'Custom code'.

Set the block with the projects to:

• Title: 'Latest projects'
• Output: 'Custom'

And 'Custom code' (same as in the model we created earlier):

<div class="project">
    <h2>{252: Name}</h2>
    <p class="project-status">{254: Status}</p>
    {253: Description}
</div>

For the block with the news:

• Title: 'Latest news'
• Output: 'Custom'

And 'Custom code' (same as in the model we created earlier):

<div class="news">
    <h2>{262: Title}</h2>
    <p class="news-date">$date[{261: Date}][%A %e %B]</p>
    {264: Text}
</div>

Finally, the block with the 'About' text:

• Title: 'About'
• Output: 'Custom'

The custom code here is a bit simpler, since there's only one item involved that could neatly drop into your site code in – for example – a div with the id 'about':

<h2>{8: Title}</h2>
{9: Text}

Save the model. With content and models structured, defined and ready, all that remains is retrieving the content from our site.

Site setup

Our site has a basic layout, with a header and menu bar at the top, content in the middle, and a footer at the bottom. Because only the middle part (content) differs between the pages, it makes sense to put the HTML/PHP in one index.php file. This makes maintaining the code easier and gives an easy opportunity to use 'friendly' URL's.

The basic structure of the site is as follows:

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Numbers, Inc.</title>
    <meta name="description" content="Numbers, Inc. corporate website">
    <meta name="author" content="Site Builders, Inc.">

    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <header>
        <h1>Numbers, Inc.</h1>
    </header>

    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/projects">Projects</a></li>
            <li><a href="/news">News</a></li>
        </ul>
    </nav>
    <article></article>

    <footer>
        <p>&copy; <?php echo date('Y'); ?> Numbers, Inc.</p>
    </footer>
</body>

Note the use of HTML 5 tags, making it immediately apparent what each section represents. Furthermore, a bit of PHP in the footer to make sure the current year is shown in the copyright notice.

One thing is missing: content. This will go between the article tags. To retrieve it from our 1202 system, we're going to use a very simple PHP function: file_get_contents. If you're using a different scripting/programming language, there should be a similar function. The file_get_contents function accepts an URL as its first argument. In our case, the URL should be built up like this:

https://[your system name].1202hq.com/block/[id][modifiers]

The bits between the square brackets have to be replaced by the proper values. The first part of the URL matches the URL you use to log in to your 1202 system. After that, 'block' makes it clear a model block is requested, further specified by its id (after the slash), followed by modifiers (optional).

What we need then, are the appropriate model block id's. You can view these by opening a model. It is shown in the header of a block, next to the title. Blocks only get an id once they are saved. When you create a new block, it will not immediately have an id.

The block titled 'All projects' from our 'Projects' model, has the id '1'. In our site code, we insert the block output between the article tags to show the contents on our site:

<article>
    <?php echo file_get_contents('https://demo.1202hq.com/block/1'); ?>
</article>

However, the contents shown should be based on the requested page. The URL's for these pages relative to the domain will be:

• Home: /
• Projects: /projects
• News: /news

Since we have only one actual page (index.php), we need to direct al traffic to this page. With a bit of PHP we'll then extract from URL the page that was request. First, to make all traffic go to index.php, we'll create a htaccess file, placed in the same directory as index.php and named .htaccess (note the dot at the beginning):

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /index.php

This instructs the web server to redirect any requests that are not targeted to existing directories or files to index.php.

Now we need to arrange for the right content to show up, depending on the URL. We'll do this between the article tags:

<article>
    <?php

    $url = explode('/', substr($_SERVER['REQUEST_URI'], 1));

    switch ($url[0]) {
            case 'news':
                echo file_get_contents('https://demo.1202hq.com/block/2');
                break;
            case 'projects':
                echo file_get_contents('https://demo.1202hq.com/block/1');
                break;
            default:
                echo '
                <section id="home-projects">
                    ' . file_get_contents('https://demo.1202hq.com/block/3') . '
                </section>
                <section id="home-news">
                    ' . file_get_contents('https://demo.1202hq.com/block/4') . '
                </section>
                <section id="home-about">
                    ' . file_get_contents('https://demo.1202hq.com/block/5') . '
                </section>';
            break;
        }
    }

    ?>
</article>

The switch controls which content is presented: /news shows the 'News' page content, /projects the 'Projects' page content, and anything else shows the 'Home' page content. Note the different sections for the 'Home' page; style these appropriately with CSS to obtain the desired layout (last three projects top left, last three news items top right, and the 'About' text below).

With the site code in place, the site and your 1202 system are ready to go.

Future development

The site we've created is a basic yet complete example of setting up a website driven by 1202. It is not exactly 'plug and play' but it will pay dividends for future developments.

When the site grows or its scope shifts, it's easy to add fields, filters and models to adapt. Adding more containers and views to manage completely different kinds of content, like customers or inventory, is effortless as well. No awkward add-ons or plug-ins to install, eschewing what's already stored in the system; it will scale and grow logically and organically.