WebTutorial #1 : How to create live follower and following count fo...

Repository

https://github.com/bcit-ci/CodeIgniter

What Will I learn ?

You will learn how to configure and use Codeigniter Framework
You will learn how to get follower and following count from steemit API
You will learn how to animate the number using odometer
You will learn how to load live count every second

Requirements

Basic knowledge about PHP, Javascript, HTML
Editor and browser
XAMPP or LAMPP

Difficulty

basic

Tutorial Content

This Live Follower / Following count is the same as the page for calculating yutube subcriber in real time. Here I am trying to use Codeigniter as a framework. For web page display I use bootstrap and to animate the numbers I use odometer. As for the data I take directly from the Steemit API.

- Configure Codeigniter

Download Codeigniter on its official website https://codeigniter.com/download
Extract it in htdoc folder and rename it as follower
Open it on your editor. Here I use Visual studio code
Open Application > Config > config.php and search $config['base_url'] then add the value with your base url
Open Application > Config > autoload.php and search $autoload['helper'] then add url as array value
Open Application > Config > routes.php and search $route['default_controller'] then change the value from welcome to follower. This is to set the default controller.
Open Application > Controller then create new php file and rename it as Follower.php
Then add this code to the Follower.php file

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Follower extends CI_Controller {

    public function index()
    {
        $this->load->view('follower');
        // to load the display page in application > view
    }
}

Now go to Application > View and create new php file as follower.php. Why ? because in Controller file you load the page with name is follower, so you should create with the same name.
Add html:5 component to follower.php and add some text in body then run on your browser to see the result

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Live Count</title>
</head>
<body>
    Hello Word
</body>
</html>

If you see like this that mean the configuration is success

- Design The Display Page using Bootstrap

Add the CDN of Bootstrap in head component. For more detail you can read here : https://getbootstrap.com/docs/4.3/getting-started/introduction/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script   src="http://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Create a navbar to write the title

<nav class="navbar navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Live Count </a>
        </div>
    </nav>

result :
Screen Shot 2019-03-23 at 01.04.04.png

Create 2 columns using card class. One for follower and one other for following.

<div class="container">
        <div class="row mt-5">
            <div class="col-sm-6">
                <div class="card text-center">
                    <div class="card-header">
                        Following count
                    </div>
                    <div class="card-body">
                        test
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="card text-center">
                    <div class="card-header">
                        Follower count
                    </div>
                    <div class="card-body">
                        test
                    </div>
                </div>
            </div>
        </div>
    </div>

result :
Screen Shot 2019-03-23 at 01.08.41.png

- Add Odometer

To animate the number of result we use odometer. you can check it on GitHub : https://github.com/HubSpot/odometer
Odometer provide some theme you can see the detail on its document. Here I use odometer-car-theme
back to visual studio code. Create new folder as asset in root. Then create 2 new folder again in asset. Its jsand css
create new js file as odometer.js in asset > js.
Copy all code from https://github.com/HubSpot/odometer/blob/master/odometer.js and paste it on your odometer.js in js folder
Create new css file as odometer-theme-car.css in your css folder.
Copy all code from https://github.com/HubSpot/odometer/blob/master/themes/odometer-theme-car.css and paste it on your odometer-theme-car.css file.
To Call odometer js dan css just go to application > view > follower.php add the following code in head element

<script src="asset/js/odometer.js"></script>
<link rel="stylesheet" href="asset/css/odometer-theme-car.css">

To try the odometer just add this code in card-body class

<div id="following" class="odometer">1999</div>

If you see like this that mean the odometer is run as possible
Now add <div id="follower" class="odometer"></div> in card-body for follower and <div id="following" class="odometer"></div> for following like this

- Get live data from STEEM API

add steem js CDN in head element of follower.php file

<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>

Open <script> element under </body> then add ready function like this
Add the query from steem js to get the follower and following count. Then get the following and follower count and add it to html element with follower and following id. like this.

              steem.api.getFollowCount('team2dev', function(err, result) {  
                    $('#following').html(result.following_count);
                    $('#follower').html(result.follower_count);
                });

result :
Screen Shot 2019-03-23 at 01.47.35.png

To get live count in certain time, we need to use setInterval function like this :

$(document).ready(function(){
            
            setInterval(function() { 
                steem.api.getFollowCount('team2dev', function(err, result) {    
                    $('#following').html(result.following_count);
                    $('#follower').html(result.follower_count);
                }); 
            }, 1000); 
            // 1000 is 1 second
        })

Now try to run your live count page in one browser and in other browser you try to follow and unfollow some account, you will see the live count here.
Done, Now we have the some webpage for live follower and following count of steemit account. You can modify it as you want.