Aplikasi Database MySQL dengan Heroku dan CloudBees

Pada artikel sebelumnya tentang hosting PHP gratisan menggunakan layanan heroku.com saya telah mencoba membahas tentang apa itu heroku dan bagaimana melakukan administrasi sederhana seperti cara mendeploy app dan menggunakan git untuk melakukan manajemen file. Karena memang hanya untuk perkenalan maka disitu tidak dibahas bagaimana cara membuat aplikasi yang menggunakan database. Sebenarnya di heroku terdapat addon untuk bermacam hal, termasuk untuk mendapatkan database MySQL secara gratis, hanya saja sebelum bisa benar-benar menggunakannya kita harus terlebih dahulu memvalidasi pembayaran (biasanya dengan kartu kredit). Karena itu, masih dengan semangat "cari yang gratis", kita cari cloud database lain yang bisa kita gunakan untuk menyimpan data dari aplikasi PHP yang kita buat di heroku.

Kandidat

Pencarian awal di google saya menemukan beberapa kandidat yang akan kita bahas satu persatu. Kita tidak akan terlalu teknis membahas fasilitas, kemampuan dan fitur dari masing-masing cloud database yang saya sebutkan karena satu hal yang paling mendasar sebenarnya adalah: GRATIS.

1. Xeround.com. Saya dulu sempat menggunakan layanan disini, pendaftaran mudah, gratis dan disediakan halaman phpMyAdmin, sempurna. Tapi ternyata entah kenapa layanan nya ditutup pada bulan Mei 2013. Karena tidak dapat digunakan lagi maka kita coret kandidat ini.
2. AWS Amazon. Cukup menjanjikan sebenarnya sebelum saya menyadari bahwa saat pendaftaran terdapat step untuk melakukan validasi pembayaran menggunakan kartu kredit. Kandidat ini juga kita coret.
3. ClearDB. Lebih menjanjikan dibandingkan dengan AWS Amazon namun dia hanya bisa digunakan untuk aplikasi yang berjalan di appfog dan heroku. Pas sebenarnya, tapi di heroku dia menjadi addon yang kalau ingin menggunakan harus validasi pembayaran juga. Kita coret juga kandidat ini.
4. Google Cloud. Dilengkapi dengan database MySQL dan berasal dari Google harusnya kandidat ini meyakinkan, tapi sayang, harus validasi pembayaran juga meskipun kita ingin mencoba yang gratis. Jadi terpaksa kandidat ini kita coret.
5. CloudBees. Tidak begitu terkenal dibanding kandidat sebelumnya tapi ternyata lumayan menjanjikan. Pendaftaran mudah tanpa menggunakan kartu kredit, dan dapat menggunakan akun Google kita untuk mendaftar. Dengan kapasitas 5 MB cloud database ini layak digunakan untuk coba-coba. Hanya saja saya belum menemukan halaman phpMyAdmin disitu :), karena untuk administrasi databasenya oleh cloudbees kita dianjurkan menggunakan SQLyog.

Membuat dan Mengatur Database di CloudBees

Setelah terdaftar, Anda akan diberi pilihan untuk melanggan layanan yang ada tergantung kebutuhan Anda. Klik layanan database di bagian atas dan subscribe. Setelah itu buat Database baru, beri nama database nya, username, password dan klik Finish. Setelah dibuat klik database tersebut dan akan muncul halaman untuk manajemen database seperti gambar berikut:

Beberapa parameter akan kita gunakan untuk melakukan koneksi ke database di cloudbees seperti Server, Port, Username dan Password.
Dengan parameter ini kita sudah bisa bernafas lega karena mendapatkan database gratis yang bisa kita gunakan untuk menyimpan data aplikasi yang kita buat. Namun mungkin muncul masalah baru, bagaimana mengatur database yang sudah ada, bagaimana membuat tabel, melihat data pada tabel, drop tabel dan sebagainya. Jika Anda mengikuti anjuran dari cloudbees, Anda dapat menggunakan SQLyog, tapi saya lebih nyaman dengan tampilan berbasis web jadi saya gunakan DBNinja seperti ini.

Mengkoneksikan App di Heroku ke Database di CloudBees

Anggap kita sudah mempunyai app di heroku. Untuk menguji apakah applikasi di heroku dapat terkoneksi ke cloudbees kita buat script sederhana seperti ini:

<?php

/**
 * DATABASE CONNECTION
 */

$host = 'ec2-23-21-211-172.compute-1.amazonaws.com:3306';
$user = 'username';
$pass = 'password';
$dbnm = 'database';

$link = mysql_connect($host, $user, $pass);
if ( ! $link) {
    die('Could not connect: ' . mysql_error());
}

$db_selected = mysql_select_db($dbnm, $link);
if ( ! $db_selected) {
    die ('Can\'t use ' . $dbnm . ' : ' . mysql_error());
}

Simpan dengan nama file dbconfig.php misalnya. Lakukan upload file ini ke heroku dengan git push dan coba akses halaman: namaapp.heroku.com/dbconfig.php. Jika tidak muncul error apapun maka Anda telah berhasil mengkoneksikan aplikasi di heroku Anda dengan cloud database di cloudbees. Terima kasih dan Happy coding :D

Sumber:

1. http://www.comtechies.com/2013/03/how-to-create-and-connect-cloudbees.html 
2. http://www.sitepoint.com/database-as-a-service-mysql-in-the-cloud/

Pagination dengan CodeIgniter, jQuery dan Bootstrap

Karena ada beberapa teman yang kesulitan mengaplikasikan pagination di CodeIgniter dengan jQuery, maka aku coba membuat sesuatu yang menurutku simple dan mudah dipahami (*semoga :). Kali ini aku akan menggunakan Twitter Bootstrap untuk CSS-nya dan jQuery untuk meload data. Kerangka dasar dokumennya adalah seperti ini:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pagination</title>
  <link rel="stylesheet" href="/third_party/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/third_party/bootstrap/css/bootstrap-responsive.min.css" />
  <script src="/third_party/jquery/jquery-1.8.2.js"></script>
  <script>
    // masukkan kode javascript berikutnya disini
  </script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="span12">
        <h1>Pagination Dokumen</h1>
        <hr>
        <form class="form-inline">
          <input type="text" name="query" id="query" class="input-large"> &nbsp; 
          <button class="btn" onclick="return Document.search()"><i class="icon-search"></i> Cari</button>
        </form>
        <hr>
        <table class="table table-bordered table-condensed table-striped">
          <thead>
            <tr>
              <th>Judul</th>
              <th>Pengarang</th>
              <th>Tahun</th>
            </tr>
          </thead>
          <tbody id="document-data">
            <tr>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
        <hr>
        <div class="pagination pagination-centered pagination-medium" id="pagination">
          <ul>
            <li><a href="">&laquo;</a></li>
            <li><a href="">1</a></li>
            <li><a href="">&raquo;</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Pada dokumen diatas kita memiliki sebuah tabel yang akan menampilkan data dokumen dengan kolom Judul, Pengarang, dan Tahun. Diatas tabel terdapat form untuk memasukkan kata kunci pencarian. Dibawah tabel terdapat template pagination yang nanti akan diubah setelah data diload oleh Ajax. Perhatikan ada beberapa id dari elemen yang berperan yaitu:

• query. id untuk input kata kunci pencarian
• document-data. id di tbody tabel data
• pagination. id untuk bagian pagination dibawah tabel

Jika diperhatikan, di tombol Cari ada atribut onclick="return Document.search()". Nah sekarang kita tambahkan fungsi Javascriptnya untuk menangani tampilan data dan pagination di dokumen ini. Kode Javascript ini bisa kamu letakkan di dalam tag HEAD setelah jquery (di bagian yang aku tandai sebelumnya).

var Document = {
  param: {
    dataperpage: 3, // jumlah data per halaman
    query: '',
    curpage: 0,
    numpage: 0
  },
  url: '/test/document',
  search: function() {
    this.param.query = $('#query').val();
    this.param.curpage = 0;
    this.loadData();
    return false;
  },
  setPage: function(n) {
    this.param.curpage = n;
    this.loadData();
    return false;
  },
  prevPage: function() {
    if (this.param.curpage > 0) {
      this.param.curpage--;
      this.loadData();
    }
    return false;
  },
  nextPage: function() {
    if (this.param.curpage < this.param.numpage) {
      this.param.curpage++;
      this.loadData();
    }
    return false;
  },
  loadData: function() {
    $.ajax({
      url: Document.url,
      type: 'POST',
      dataType: 'json',
      data: jQuery.param(Document.param),
      success: function(d) {
        $('#pagination').html(d.pagination);
        Document.param.numpage = d.numpage;
        var t = '', dt = {};
        for (var i = 0; i < d.data.length; i++) {
          dt = d.data[i];
          t += '<tr><td>' + dt.judul +'</td>' + 
             '<td>' + dt.pengarang + '</td>' + 
             '<td>' + dt.tahun + '</td></tr>';
        }
        $('#document-data').html(t); // id dari tbody tabel data
      }
    });
  }
}

$(document).ready(function() {
  Document.search();
});

Ada bagian penting di property param dalam object Document diatas yaitu dataperpage yang berisi jumlah data perhalaman yang akan ditampilkan di tabel. Kamu bisa mengubah-ubah sesuai keinginanmu. Lalu bagian url juga harus disesuaikan dengan route yang akan kita buat di CodeIgniternya. Agar javascript meload data untuk pertamakalinya maka kita panggil Document.search() ketika dokumen siap melakui event $(document).ready(). Jangan simpan dulu file dokumen tadi karena setelah kita buat Controller baru kita bisa tahu mau disimpan dimana dokumen ini.
Sekarang kita buka file application/config/routes.php di CodeIgniter dan masukkan baris berikut:

$route['test'] = "test";
$route['test/document'] = "test/pagination";

Kita mesti punya Test controller sekarang. buat Controller baru dan beri nama Test yang isinya seperti ini:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Test extends CI_Controller {
  public function index() {
    $this->load->view('test/pagination.php');
  }
  
  public function pagination() {
    $this->load->database();
    $this->load->model('test_model');
    $this->test_model->search_document();
  }
}

Perhatikan di method index kita meload View test/pagination.php. Nah, file view ini adalah file dokumen yang berisi HTML dan Javascript yang telah kita buat sebelumnya. Berarti file dokumen tadi simpan di dalam folder application/views/test dan diberi nama pagination.php. Kalau kamu punya struktur view dan controller sendiri maka bagian controller bisa diubah sesuai dengan struktur yang kamu punya yang penting dokumennya ketemu.
Selanjutnya di controller tadi kita lihat bahwa controller meload model test_model, berarti sekarang kita buat modelnya:

<?php
class Test_model extends CI_Model {
  public function search_document() {
    $input = array('dataperpage', 'query', 'curpage');
    foreach ($input as $val)
      $$val = $this->input->post($val);
    
    $query = $this->db->escape_like_str($query);
    $where = "`JUDUL_DOKUMEN` LIKE '%{$query}%' OR `PENGARANG_DOKUMEN` LIKE '%{$query}%'";
    
    $query = $this->db->query("SELECT COUNT(`ID_DOKUMEN`) AS `HASIL` FROM `tb_dokumen` WHERE $where");
    $total = $query->row()->HASIL;
    $npage = ceil($total / $dataperpage);
    
    $start = $curpage * $dataperpage;
    $end = $start + $dataperpage;
    $query = $this->db->query("SELECT `JUDUL_DOKUMEN`, `PENGARANG_DOKUMEN`, `TAHUN_PENERBITAN_DOKUMEN` FROM `tb_dokumen` WHERE $where LIMIT $start, $dataperpage");
    $hasil = array(
      'data' => array(),
      'pagination' => '',
      'numpage' => $npage - 1,
    );
    if ($query->num_rows() > 0) {
      foreach ($query->result() as $row) {
        $hasil['data'][] = array(
          'judul' => $row->JUDUL_DOKUMEN,
          'pengarang' => $row->PENGARANG_DOKUMEN,
          'tahun' => $row->TAHUN_PENERBITAN_DOKUMEN
        );
      }
    }
    
    $hasil['pagination'] .= '<ul>
      <li class="'. ($curpage == 0 ? 'disabled' : '') .'" onclick="return Document.prevPage()"><a href>&laquo;</li>';
    for ($i = 1; $i <= $npage; $i++) {
      $hasil['pagination'] .= '<li class="' . ($curpage == ($i - 1) ? 'active' : '') . '" onclick="return Document.setPage(' . ($i - 1) .')"><a href>' . $i . '</a></li>';
    }
    $hasil['pagination'] .= '<li class="' . ($curpage == $npage - 1 ? 'disabled' : '') . '" onclick="return Document.nextPage()"><a href>&raquo;</a></li>
      </ul>';
    
    echo json_encode($hasil, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
  }
}

Kita akan mereturn hasil berupa JSON yang akan diterima oleh Javascript. Jika kamu memiliki database yang berbeda maka ubah saja bagian model diatas dan edit sesuai keinginanmu. Dan berikut ini hasil akhirnya:

Semoga bermanfaat dan mudah dipahami :D