Your blog - the blua.blue PHP SDK
Tags: blog, php
Published: 2019-11-30 15:59:24

## What is blua.blue?

Dubbed a "Content Enablement Platform", blua.blue is an open source CMS with the capabilities to be used as 

- hybrid
- headless
- decoupled or
- coupled CMS

In our scenario, we are using it as headless CMS and build a simple personal blog.

## Preparation

When we grow, we will want to run our own installation of blua.blue. For now, registering [here](https://blua.blue/register/) will be enough. In order to test our blog, let's write a sample post. The things we want to ensure for now are 
- unchecking the "Appear in search & make public" checkbox and
- using "WYSIWYG (HTML)" as content type ( dropdown choice when clicking "add new content")

Once this is done, let's jump to our IDE

## Install the PHP SDK

Using composer, we install the PHP SDK for blua.blue

`composer require blua-blue/blua-blue-php-sdk`

and then our templating:

`composer require neoan3-apps/ops`

## Our blog setup

Our project will consist of only two templates and one PHP file:

_templates/overview.html_

_templates/article.html_

_index.php_

The overview HTML template can look however you want to. For now, I will start as simple as this:

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My blog</title>
</head>
<body>
    <div n-for="articles as article">
        <a href="index.php?article={{article.slug}}">{{article.name}}</a>
    </div>
</body>
</html>
```
Note how we use two things you might notice:
*n-for* will iterate over articles for us while the curly braces substitute values for us just like in many other concepts you might be familiar with.

In order to better understand this, let's look at our initial index.php

```PHP
<?php

// required for Ops
define('path', __DIR__);

require path . '/vendor/autoload.php';

// use your own credentials
$userName = 'demo';
$password = 'sampleUser1';

// initiate SDK
$client = new \BluaBlue\Client($userName, $password);

// render overview.html with article list

echo \Neoan3\Apps\Ops::embraceFromFile('templates/overview.html',[
    'articles' => $client->getArticleList(0,300,$userName)
]);
```

We should already have output at this point. However, as indicated by the links in our template, we should probably account for the GET parameter "article" to be set or not. Let's first create a simple article template:

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{name}}</title>
</head>
<body>

<h1>{{name}}</h1>
<p n-for="content as part">
    {{part.content}}
</p>
</body>
</html>
```
and then add the rendering option to our index.php

```PHP
if(isset($_GET['article'])){
    // render article page
   $article = $client->getArticle($_GET['article']);
    echo \Neoan3\Apps\Ops::embraceFromFile('templates/article.html', $article );
}
```

Our complete index.php could look something like this:

```PHP
<?php

// required for Ops
define('path', __DIR__);

require path . '/vendor/autoload.php';

// use your own credentials
$userName = 'demo';
$password = 'sampleUser1';

// initiate SDK
$client = new \BluaBlue\Client($userName, $password);

if(isset($_GET['article'])){
    // render article page
    echo \Neoan3\Apps\Ops::embraceFromFile('templates/article.html', $client->getArticle($_GET['article']));
} else {
    // render overview.html with article list
    echo \Neoan3\Apps\Ops::embraceFromFile('templates/overview.html',[
        'articles' => $client->getArticleList(0,300,$userName)
    ]);
}
```

And that's it. You can now start designing, creating menus and improve on what we have.