Membuat Helper Short Number Format Pada Codeigniter

Short Number Format atau format angka singkat merupakan format angka yang sangat populer saat ini.

Jika Anda penggemar sosial media twitter atau instagram, saya yakin Anda sudah tidak asing lagi tentunya dengan format angka singkat ini.

Twitter dan Instagram merupakan satu satu sosial media populer yang menggunakan short number format untuk menampilkan jumlah followers dan following.

Alasan penggunaan short number format adalah agar tampilan (user interface) lebih user friendly pada mobile ataupun smartphone.

Karena short number format menampilkan jumlah digit yang lebih singkat dari yang seharusnya tanpa mengurangi nilai dari angka tersebut.

Keren bukan?

Mengingat pengguna smartphone mengalami peningkatan tajam, itulah kenapa short format number begitu populer.

Selain pada sosial media, short number format juga sering digunakan untuk aplikasi berbasis mobile lainnya.

Seperti gambar berikut:

Pada gambar diatas merupakan aplikasi online resto yang dimana harga dari menu menggunakan short number format.

Saya yakin Anda pasti sudah tidak sabar bagaimana membuatnya.

Lalu bagaimana membuat short number format?

Pada artikel kali ini, saya akan sharing bagaimana membuat short number format dalam bentuk helper pada codeigniter.

Mengapa perlu membuat helper?

Mungkin Anda pernah membuat short date format sebelumnya dan berhasil.

Akan tetapi, jika terdapat pengembangan lebih lanjut dari aplikasi yang anda bangun. Anda akan memulis coding program tambahan untuk short number format pada page (halaman) baru tersebut.

Akhirnya, terlalu banyak baris coding yang anda tulis.

Adakah cara lain yang lebih efisien?

Tentu saja, yaitu dengan membuatnya dalam bentuk helper atau library. Dengan begitu anda cukup menulis coding sekali dan bisa digunakan semumur hidup jika anda memerlukan short number format.

Keren bukan?

Ok, mari kita mulai!

1 PERSIAPAN

Sebelum proses pembuatan, ada tahap yang tidak boleh anda lewatkan begitu saja. Yaitu tahap persiapan.

Apa saja yang perlu Anda persiapkan?

Berikut listnya:

Codeiginter, jika anda belum memilikinya silahkan download di situs resminya www.codeigniter.com

Bootstrap, bootstrap ini berfungsi untuk mempercantik tampilan. Jika anda belum memilikinya, silahkan download di situs resminya www.getbootstrap.com

2. PEMBUATAN STRUKTUR DATABASE DAN TABLE

Karena saya ingin menjelaskan lebih detail bagaimana helper ini bekerja, ada baiknya perlu sebuah database dan sebuat table sebagai pendukung.

Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_sosmed;

Pada query diatas, anda akan mendapatkan sebuah database dengan nama db_sosmed.

Table, buat Tabel users dengan mengeksekusi query berikut:

CREATE TABLE users(
user_id INT PRIMARY KEY AUTO_INCREMENT,
user_nama VARCHAR(50),
user_followers DOUBLE,
user_following DOUBLE
);

Query diatas akan menghasil sebuah tabel users dengan field user_id dengan type data INT dan sekaligus menjadi primary key yang valuenya diinput otomatis (AUTO_INCREMENT), user_nama dengan type data varchar(50), user_followers dengan INT, dan user_following dengan type data INT.

Input beberapa data pada table users dengan mengeksekusi query berikut:

INSERT INTO users(user_nama,user_followers,user_following) VALUES
('M Fikri',1800000,120),
('Mario Gomez',1200000,10000),
('Sukanti',900,3000),
('Susi',1700000,1900),
('Jokowi',20000000,180),
('Danielle Campbell',70000000,990);

Query diatas akan menghasilkan data seperti gambar berikut:

3. INSTALLASI CODEIGNITER

Untuk menginstall codeigniter, silahkan extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Kemudian rename (ganti nama) project codeigniter anda sesuai dengan project Anda. Disini saya memberi nama short_number.

Setelah di extract, buat folder assets sejajar dengan folder application dan system, kemudian sertakan file bootstrap didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat folder css, fonts, images, dan js.

Didalam folder css, terdapat file bootstrap.css

Didalam folder js, terdapat file bootstrap.js.

Sedangkan folder fonts dan images merupakan folder bawaan bootstrap.

4. KONFIGURASI CODEIGNITER

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/short_number/';

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_sosmed', //sesuaikan dengan database anda!
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

5. BUAT HELPER SHORT NUMBER FORMAT

Buat sebuah file php dan beri nama short_number_helper.php kemudian ketikan atau copy code berikut:

<?php
function number_format_short( $n, $precision = 1 ) {
        if ($n < 900) {
                // 0 - 900
                $n_format = number_format($n, $precision);
                $suffix = '';
        } else if ($n < 900000) {
                // 0.9k-850k
                $n_format = number_format($n / 1000, $precision);
                $suffix = 'K';
        } else if ($n < 900000000) {
                // 0.9m-850m
                $n_format = number_format($n / 1000000, $precision);
                $suffix = 'M';
        } else if ($n < 900000000000) {
                // 0.9b-850b
                $n_format = number_format($n / 1000000000, $precision);
                $suffix = 'B';
        } else {
                // 0.9t+
                $n_format = number_format($n / 1000000000000, $precision);
                $suffix = 'T';
        }

        if ( $precision > 0 ) {
                $dotzero = '.' . str_repeat( '0', $precision );
                $n_format = str_replace( $dotzero, '', $n_format );
        }

        return $n_format . $suffix;
}

Kemudian simpan dalam folder application/helper/.

Seperti gambar berikut:

6. MODEL

Buat sebuah model dengan nama User_model.php dengan kode sebagai berikut:

<?php
class User_model extends CI_Model{

        function get_users(){
                $hsl=$this->db->get('users');
                return $hsl;
        }
}

Pada model user_model terdapat satu function yaitu function get_users() yang berfungsi untuk mengambil data users dari table users yang ada di database.

7. CONTROLLER

Buat sebuah controller dengan nama Users.php dengan kode sebagai berikut:

<?php
class Users extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->helper('short_number'); //calling helper short number format
                $this->load->model('user_model'); //calling model user_model
        }
        function index(){
                $data['data']=$this->user_model->get_users();
                $this->load->view('user_view',$data);
        }
}

Pada controller users terdapat dua function yaitu function __construct() dan function index().

Function __construct() berfungsi sebagai constructor, dimana pada function ini ada dua file yang dipanggil. Yaitu, helper short_number dan model user_model.

Sedangkan pada function index() berfungsi untuk memanggil sebuah view dengan nama user_view sekaligus membawa data users yang diambil dari model, kemudian disimpan dalam bentuk array data.

8. VIEW

Buat sebuah VIEW dengan nama user_view.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html>
<head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
        <div class="container">
                <div class="row">
                        <h2>Data <small>Users</small></h2>
                        <table class="table table-striped">
                                <thead>
                                        <tr>
                                                <th>Nama</th>
                                                <th>Followers</th>
                                                <th>Following</th>
                                        </tr>
                                </thead>
                                <tbody>
                                        <?php foreach($data->result() as $row):?>
                                        <tr>
                                                <td><?php echo $row->user_nama;?></td>
                                                <td><?php echo number_format_short($row->user_followers);?></td>
                                                <td><?php echo number_format_short($row->user_following);?></td>
                                        </tr>
                                        <?php endforeach;?>
                                </tbody>
                        </table>
                </div>
        </div>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
</body>
</html>