Getting started with the Bingo MVC framework

3 min readApr 11, 2017

The Bingo Framework is one blip in a sea of PHP MVC mother-ships. I built Bingo because I wanted to prove to everybody that I’m the one billionth coming of Taylor Otwell and have tried to maintain it to a point where it can function in a manner similar to the more recognizable, Google-search friendly PHP frameworks.

I was told by a colleague that the documentation for my ambitious project needs fixing. I was vexed until he prescribed that I do the one thing every sane person does; write an article and post it on Medium. That is exactly what this post is: a brief but comprehensive guide to creating your first Bingo-powered application.

First, install the package. This installation can be done via Composer by typing the following in a Command Line Interface of your choosing.

mkdir path
composer create-project chemem/bingo-framework path

You can also clone the source code from GitHub.

mkdir path
cd path
git clone https://github.com/ace411/Bingo-Framework.git

Second, create a virtual host for the framework if you are using an Apache web server.

<VirtualHost *:80>
<Directory "path/to/bingo">
Options +FollowSymLinks 
Options All -Indexes
IndexIgnore *
</Directory>
ServerName localhost
ServerAlias localhost 127.0.0.1
ScriptAlias /cgi-bin/ C:/xampp/cgi-bin/
DocumentRoot "path/to/bingo/public"
</VirtualHost>

Third, update the composer.json file: include the Codebird library which will be used to interact with the Twitter RESTful web service.

"jublonet/codebird-php": "*"

Fourth, add the Codebird library and corresponding Twitter model to the dependency injection table in Bingo to enjoy the inversion of control it offers.

$router->inject('Twitter', function ($c) {
  $cb = new \Codebird\CodeBird;
  $cb::setConsumerKey('<YOUR API KEY>', '<YOUR API SECRET>');
  $cb->setReturnFormat(CODEBIRD_RETURNFORMAT_ARRAY);
  $cb::getInstance();
  $cb->setToken('<YOUR OAUTH TOKEN>', '<YOUR OAUTH SECRET>');
  return \App\Models\Twitter($cb);
});

Since the tokens and secrets are of extreme importance, saving their values in the Config file in the App directory is worth doing.

const TWITTER_API_KEY = '<YOUR API KEY>';const TWITTER_API_SECRET = '<YOUR API SECRET>';const TWITTER_OAUTH_TOKEN = '<YOUR OAUTH TOKEN>';const TWITTER_OAUTH_SECRET = '<YOUR OAUTH SECRET>';

Fifth, create a new model in the models directory named Twitter.php. This model will provide the Codebird abstraction that is required.

<?phpnamespace App\Models;class Twitter
{
  protected $codebird;  public function __construct($codebird)
  {
     $this->codebird = $codebird;
  }  public function getTweets($searchParam)
  {
     return $this->codebird->search_tweets("q={$searchParam}");
  }
}
header("Cache-control: public");

Sixth, create a controller also called Twitter.php in the controllers directory which is somewhere in the App folder to glue all the pieces together. The controller logic will, in addition to fetching the data from the Twitter model, allow for the creation of a user interface which will be conveyed to the user. The following code should suffice.

<?phpnamespace App\Controllers;final class Twitter
{
  use \Core\Controller;  public function indexAction()
  {
     $data = $this->container['Twitter']->getTweets('php7');
     echo $this->container['Views']->mustacheRender('base', [
       'title' => 'First Bingo App',
       'script' => '/js/main.js',
       'stylesheet' => '/css/main.css',
       'twitterData' => $data['statuses']
     ]);
  }

Next, edit the HTML file base.html in the Mustache directory to reflect the structure of the twitter data.

<!doctype HTML>
  <html>
    <head>
      <meta charset="utf-8">
      <title>{{ title }}</title>
      <link rel="stylesheet" href="{{ stylesheet }}">
    </head>
    <body>
      <h1>{{ title }}</h1>
      <ul class="list-data">
        {{# twitterData }}
          <li class="list-data-el"
              data-bg="{{ user.profile_background_color }}" 
              data-color="{{ user.profile_text_color }}"
              id="{{ user.id }}"> {{ text }} </li>
        {{/ twitterData }}
      </ul>

Finally, write some styles and a simple color script to make the application look a lot more like a Picasso painting and a lot less like a kindergarten art project.

body {
  display: flex;
  font-family: Verdana;
  flex-flow: column;
  flex-wrap: nowrap;
}
.list-data {
  margin: 0;
  padding: 0;
  display: inline-flex;
  list-style-type: none;
  flex-flow: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.list-data-el {
  position: relative;
  margin: .8em .2em .8em .2em;
  padding: .8em .2em .8em .2em;
  font-size: 18px;
}

The accompanying script looks a lot like this:

'use strict';
(function () { 
  function changeBackgroundColor() {
    var element = document.querySelectorAll('[data-bg]');
    var bgs = [];
    var colors = [];
    for (var x = 0; x < element.length; x++) {
      bgs[x] = element[x].dataset.bg;
      if (typeof element[x].dataset.color !== undefined) {
        colors[x] = element[x].dataset.color;
        if (bgs[x] >= Number('000000') 
           && bgs[x] <= Number('333333')) colors[x] = 'FFFFFF';
      }
      element[x].setAttribute('style', 'background:#' + bgs[x]
        + ';color:#' + colors[x] + ';');
      }
  }  changeBackgroundColor();
}());

That’s it. If you encounter any problems, please contact me. Also, please star my repository.

Getting started with the Bingo MVC framework

Written by Lochemem Bruno Michael