SlideShare une entreprise Scribd logo
1  sur  66
Télécharger pour lire hors ligne
Framework CI (codeigniter)

o     Pengertian Framework
Framework adalah sekumpulan perintah atau fungsi dasar yang dapat membantu dalam
menyelesaikan proses-proses yang lebih kompleks. Secara sederhana dapat diibaratkan
sebagai kumpulan fungsi (libraries),maka seorang programmer tidak perlu lagi membuat
fungsi-fungsi (kumpulan libraries) dari awal, programmer tinggal memanggil kumpulan
library atau fungsi yang sudah ada didalam framework tersebut. Ibarat membangun rumah
maka anda tidak perlu membuat semen, memotong kayu menjadi papan, mengubah batu
menjadi porselen dan lain-lain. Anda cukup memilih komponen-komponen yang diperlukan
sehingga dapat dikombinasikan dan dapat menjadi rumah yang indah. Dan perlu diingat,
framework bukanlah peralatan/tools untuk memecahkan sebuah masalah, tetapi sebagai
alat bantu. Framework hanya menjadi sebuah konstruksi dasar yang menopang sebuah
konsep atau sistem yang bersifat “essential support” atau penting tapi bukan komponen
utama.
Beberapa keuntungan jika kita menggunakan framework:
    1. Menghemat waktu pengembangan, dengan struktur dan library yang telah
        disediakan oleh framework maka tidak perlu untuk memikirkan hal tersebut, jadi
        langsung fokus ke proses inti yang sedang dikerjakan.
    2. Reuse of code, dengan menggunakan framework maka pekerjaan kita akan memiliki
        struktur yang baku, sehingga kita dapat menggunakanya kembali di proyek-proyek
        lainya.
    3. Bantuan Komunitas, intinya ada komunitas framework yang siap untuk membantu.
        Banyak sekali referensi forum untuk beberapa framework.
        contoh: forum.framework.web.id.
    4. Kumpulan best Practice, sebuah framework merupakan kumpulan best practice yang
        sudah teruji. Jadi dapat meningkatkan kualitas kode kita.

Saat ini telah banyak framework yang berbasis PHP, diantaranya Codeigniter, Zend
Framework, Cake PHP dan lain-lain. Namun menurut berbagai sumber Codeigniter adalah
salah satu framework yang memiliki banyak keunggulan dibanding yang lainya. Sampai
pembuat php Rasmus Ledorf mengatakan dia menyukai codeigniter karena lebih ringan dan
cepat dibandingkan framework lainya (“Because it is faster, lighter and least like a
framework”). Codeigniter termasuk framework yang mudah untuk dipelajari karena
kesederhanaan strukturnya dan kelengkapan dokumentasinya yang baik. Selain itu,
kerapian kode dan ukuranya yang ramping membuatnya lebih cepat diakses dibandingkan
dengan yang lainya.

Secara umum framework menggunakan struktur MVC (Model View Controller),tujuan
dengan menggunakan MVC ini, struktur kode yang dihasilkan menjadi lebih terstruktur dan
memiliki standar yang jelas. Intinya MVC itu memisahkan bisnis logic(alur piker), data logic
(penyimpanan data) dan presentation logic (antarmuka aplikasi) atau dengan kata yang
sederhana adalah memisahkan antara desain, data, dan proses. Komponen-komponen MVC
antara lain:
    1. Model
       Model mencangkup semua proses yang terkait dengan pemanggilan struktur data
baik berupa pemanggilan fungsi, input processing atau mencetak output kedalam browser.


                                                         2012| Parade Pelatihan CNC   2
Jadi model berhubungan dengan perintah-perintah query sql untuk managemen ke
database sehingga dapat ditampilkan kehalaman browser.
   2. Controller
       Controller mencakup semua proses yang terkait dengan pemanggilan database
(sebenarnya kerja dari model) dan kapsulasi proses-proses utama. Jadi bisa diibaratkan
bahwa controller mempunyai peranan penting untuk dapat mengontroll view dan model.
atau dapat dikatakan bahwa controller adalah penghubung antara data dan view.
   3. View
       View mencakup semua proses yang terkait dengan layout atau tampilan output ke
end user. Bisa dibilang view merupakan tempat menaruh template interface website.
Didalam view hanya berisi variabel-variabel yang berisi data yang siap ditampilkan. View
dapat dikatakan sebagai halaman website yang dibuat dengan menggunakan HTML dan
bantuan CSS atau javaScript. Didalam view jangan pernah ada kode untuk melakukan
koneksi ke basisdata. View hanya dikhususkan untuk menampilkan data-data hasil dari
model dan controller.

Jika digambarkan kedalam bentuk bagan. Bagan dari MVC standar sendiri seperti dibawah
ini:

                                         Client



                                       Controller




                              Model                    View


                             Gambar : konsep MCV

Jadi hubungan antara ketiganya yaitu. Ketika browser berinteraksi melalui controller, jika
browser menginginkan untuk data maka controller akan meminta ke bagian model. Tetapi
jika ingin meminta template /user interface maka controller meminta ke view. Jadi kerja
controller bisa dikatakan sebagai otak dari aplikasi.

o    Codeigniter
     Codeigniter merupakan framework PHP yang diklaim menjadi salah satu framework
     tercepat disbanding lainya. Codeigniter bersifat opensource (gratis) dan menggunakan
     model metode MVC (Model View Controller),yang merupakan model konsep modern
     framework dengan OOP (object oriented programming) yang banyak digunakan saat
     ini.
     Codeigniter dibuat pertamakali oleh Rick Ellis yang merupakan CEO dari Ellislab. Dapat
     dikunjungi pada situsnya di http://www.ellislab.com. Ellislabmerupakan sebuah
     perusahaan yang memproduksi CMS-CMS handal. Saat ini, framework codeigniter
     dikembangkan oleh ExpressionEngine Development Team. Dan sekarang codeigniter
     telah mencapai versi 2.1.0.



                                                        2012| Parade Pelatihan CNC   3
Melihat Arsip Codeigniter:

   CodeIgniter   V   2.0.3                           CodeIgniter   V   1.5.4
   CodeIgniter   V   2.0.2                           CodeIgniter   V   1.5.3
   CodeIgniter   V   2.0.1                           CodeIgniter   V   1.5.2
   CodeIgniter   V   2.0.0                           CodeIgniter   V   1.5.1
   CodeIgniter   V   1.7.3                           CodeIgniter   V   1.4.1
   CodeIgniter   V   1.7.2                           CodeIgniter   V   1.3.3
   CodeIgniter   V   1.7.1                           CodeIgniter   V   1.3.2
   CodeIgniter   V   1.7.0                           CodeIgniter   V   1.3.1
   CodeIgniter   V   1.6.3                           CodeIgniter   V   1.3
   CodeIgniter   V   1.6.2                           CodeIgniter   V   1.2
   CodeIgniter   V   1.6.1                           CodeIgniter   V   1.1
   CodeIgniter   V   1.6.0                           CodeIgniter   V   1.0

Perbedaan yang banyak dirasakan pengguna terhadap versi dan pengembangan
codeigniter terasa sekali ketika berada di antara codeigniter versi 1 dengan versi 2.
Yaitu pada script awal penulisan class.
Contoh penulisan controller class untuk codeigniter 1.
Controller.php

<?php
Class Controller extends Controller{
function index(){
   echo “hello codeigniter versi1”;
   }
}
?>
//pada codeigniter versi 1
Contoh penulisan controller class untuk codeigniter 2 keatas.
Controller.php

<?php
Class Controller extends CI_Controller{
function index(){
   echo “hello codeigniter versi2”;
   }
}
?>
//pada codeigniter versi 2
Keterangan: Penulisan class diatas tidak hanya pada controller tapi penulisan di model
juga menyesuaikan. Selain beda penulisan, masih banyak kelebihan-kelebihan lain
yang diadopsi oleh codeigniter versi terbarunya. Bisa anda cek di codeigniter.com.




                                                    2012| Parade Pelatihan CNC   4
o       Sistem kerja Codeigniter
        Alur kerja dari framework codeigniter meliputi:
                                                                                 Models
                              Routing        Security                            Libraries
          Index.php                                         Application          Helpers
                              Caching        View            controller
                                                                                 Plugins
                                                                                 Scripts
         Keterangan:
        Index.php merupakan controller awal untuk menginisialisasikan kebutuhan untuk
         menjalankan Codeigniter sendiri.
        Router/Routing merupakan bagian yang menentukan kegiatan yang harus dilakukan
         ketika ada permintaan dari client.
        Caching merupakan bagian yang mengecek apakah data sudah pernah diminta atau
         belum. Jika chace aktif, maka akan langsung dikirimkan ke client dengan
         mengabaikan alur kerja normal.
        Security merupkan proses pemfilteran, agar terjamin keamananya.
        Controller merupakan pengendali dari jalanya aplikasi.
        View merupakan bagian yang menyajikan suatu informasi ke client sesuai dengan
         permintaan yang diminta (dengan melewati tahap index-controller).

o        Struktur Folder Codeigniter
        Sebelum kita melangkah ke tahap instalasi dan konfigurasi codeigniter, ada baiknya
        kita mengenal struktur-struktur folder /direktori pada codeigniter, susunan foldernya
        sebagai berikut:
        a. Folder Application : untuk menyimpan aplikasi yang akan dibangun
                Folder Cache : untuk menyimpan data chace jika cache anda aktifkan.
                Folder Config : untuk menyimpan semua file konfigurasi web.
                Folder Controllers : untuk menyimpan semua file controller.
                Folder Errors : template halaman untuk menampilkan error.
                Folder helpers : untuk menyimpan semua file helper.
                Folder hooks : untuk menyimpan semua file hooks.
                Folder language : untuk menyimpan file bahasa.
                Folder libraries : berisi file-file library.
                Folder logs : untuk menyimpan /mencatat file log error.
                Folder models : berisi file-file model yang berperan sebagai presentasi
                   database.
                Folder view : untuk menyimpan file-file view guna menyajikan informasi
                   kepada client. File view merupakan file yang terlihat pada browser.


        b. Folder     user_guide: berisi dokumentasi Framework Codeigniter
o        Library
                     Benchmark : digunakan untuk menghitung penggunaan memori.
                     Calender : digunakan untuk membuat kalender
                     Cart : digunakan untuk membuat cart pada took online.
                     Config : digunakan untuk menerima informasi konfigurasi
                     Email : digunakan untuk proses pengiriman email.
                     Encrypt : digunakan untuk proses enkripsi
                     Form_validation : digunakan untuk memvalidasi input masuk.

                                                             2012| Parade Pelatihan CNC    5
   Ftp : digunakan untuk proses transfer via FTP.
              Image_lib : digunakan untuk manipulasi image.
              Input : digunakan untuk memproses input data.
              Language : digunakan untuk menggunakan (load) beberapa bahasa.
              Pagination : digunakan untuk membantu proses paging.
              Session : digunakan untuk mempertahankan user aktif.
              Table : digunakan untuk mengegenerate table dari array.
              Trackback : digunakan untuk mengirim dan menerima data trackback.
              Unit_test : digunakan untuk testing
              Upload : digunakan untuk membantu proses upload.
              URI : digunakan membagI URL
              Zip : digunakan untuk membuat arsip zip.

1.6 Tools untuk meginstalasi Codeigniter.
     Dalam menginstalasi codeigniter, dibutuhkan beberapa tool’s dasar yang harus
     dipenuhi agar codeigniter dapat kita jalankan di localhost.
          Webserver
         Untuk menguji apakah web yang kita buat telah sesuai dengan apa yang kita mau.
         Maka kita membutuhkan webserver. Tapi untuk webserver biasanya menggunakan
         localhost. Biasanya kita cukup menginstalasi xampp. Xampp telah mencangkup
         apache & mysql (paket komplit).
          PHP Editor
         Editor ini berfungsi untuk kita menuliskan skrip program yang akan kita buat.
         Disini kita menggunakan editor komodo edit. Keunggulan dari komodo edit ini
         yaitu: open source. Selain itu sangat cocok untuk pembuatan web dengan
         framework khususnya Codeigniter.
          Framework Codeigniter
         Codeigniter merupakan file utama dalam membangun aplikasi berbasis codeigniter,
         bisa didownload di http://codeigniter.com/download

1.7 instalasi Codeigniter
   1. Download file codeigniter kemudian extrak dan simpan ke xampp/htdocs. Misalkan
      kita    download    untuk    CodeIgniter_2.0.3. Buka   browser  dan    ketikan
      localhost/CodeIgniter_2.0.3.




                                                      2012| Parade Pelatihan CNC   6
2. Default jika mengetikkan localhost/CodeIgniter_2.0.3 yaitu controller welcome.
   Untuk mengganti file controllernya Buka file application/config/routes.php. kemudian
   ubah untuk controller utamanya. Maksudnya halaman yang akan menjadi default,
   dengan artian meskipun tidak mendiskripsikan controllernya,maka kita dapat secara
   otomatis menuju ke controller default. Misal kita isikan crud.
   Ubah pada script dibawah ini.

     $route['default_controller'] = "crud";

3.    Kemudian ubah file di application/config/config.php.
     a. Ubah pada base urlnya. Masukkan nama file dari file codeigniter yang telah kita
        rename namanya tadi.

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

     b. Ubah untuk enkripsinya.
        Misal kita masukkan 12345.

     $config['encryption_key'] = '12345';

4. Selanjutnya, jika kita akan menggunakan database yang akan menjadi mesin
   penyimpanan data. Maka kita harus mengubah file untuk pendiskripsian
   databasenya. Buka file di application/config/database.php. kemudian ubah seperti
   dibawah ini.

            $db['default']['hostname']         =   'localhost';
            $db['default']['username']         =   'root';
            $db['default']['password']         =   '';
            $db['default']['database']         =   'ci';
            $db['default']['dbdriver']         =   'mysql';
            $db['default']['dbprefix']         =   '';
            $db['default']['pconnect']         =   TRUE;
            $db['default']['db_debug']         =   TRUE;
            $db['default']['cache_on']         =   FALSE;
            $db['default']['cachedir']         =   '';
            $db['default']['char_set']         =   'utf8';
            $db['default']['dbcollat']         =   'utf8_general_ci';
            $db['default']['swap_pre']         =   '';
            $db['default']['autoinit']         =   TRUE;
            $db['default']['stricton']         =   FALSE;


     Penjelasan:
         Hostname         : Server yang kita gunakan.
         Username         :Username untuk masuk ke mysql kita masing-masing. Untuk
                            default biasanya root.
        o   Password       : Password dari akses ke mysql kita. Untuk default biasanya
                             kosongkan saja.

                                                       2012| Parade Pelatihan CNC   7
 Database      : Merupakan nama database yang akan kita gunakan.
          Dbdriver      : jenis database yang kita akan gunakan.
      Untuk username dan password bila memiliki autentikasi sendiri masukkan sesuai
      dengan mysql anda.
   5. Kemudian tambahkan library dan helper untuk di application/config/autoload.php.

      $autoload['libraries'] = array('database','table');

      Keterangan:
           Database :    menambahkan library database jika kita akan menggunakan
             fungsi eksekusi script sql untuk database. Jika tidak melewati autoload untuk
             meload database, selain itu dapat menuliskan seperti ini .
             $this->load->database();

      $autoload['helper'] = array('url','html','form');




Penanganan Database
Sebagai pembahasan awal sebelum kita melangkah kepada operasi CRUD, alangkah
baiknya kita mengetahui hal paling mendasar pada penanganan query/ database dalam
codeigniter. Sehingga kita tidak hanya mengenal query PHP classis dan MySQL, misalnya

      SELECT * FROM inbox

   a. Pengganti SELECT
      Sebenarnya dalam Codeignter juga bisa menggunakan full perintah SELECT, berikut
      contoh penggunaanya:

      $this->db->query(‘SELECT * FROM inbox’);

      Namun dengan codeigniter, kita dapat meringkasnya menjadi demikian:

      $this->db->get(‘inbox’);


   b. Pengganti INSERT
      Fungsi insert berguna pada saat kita ingin menambahkan sebuah data ke dalam
      database. Berikut contoh penggunaan pada query SQL biasa:

      INSERT INTO inbox (…) values (…);

      Dalam codeigniter, kita dapat menggunakan kode berikut:

      $this->db->insert(‘inbox’,$data)




                                                       2012| Parade Pelatihan CNC   8
c. Pengganti UPDATE
   Update berfungsi apabila kita ingin mengubah suatu data, Pada query standar, salah
   satu bentuk contoh penggunaanya adalah sebagai berikut:

     UPDATE pbk set Name=’bambang’ where ID=’1’;

     Dalam codeigniter, kita dapat menggunakan kode berikut:

     $this->db->where(‘ID’,’1’);
     $this->db->update(‘pbk’,$data);


d. Pengganti Delete
   Delete berfungsi utnuk menghapus suatu data
   Berikut contoh penggunaanya pada query biasa:

     DELETE from pbk where ID=’1’;

     Dan berikut contoh penggunaanya pada penanganan database Codeigniter:

     $this->db->where(‘ID’,’1’);
     $this->db->delete(‘pbk’);


e. Pengganti Like
   Perintah Like biasanya digunakan untuk melakukan pencarian data. Dalam query
   biasa dapat dituliskan berikut:

     SELECT * from pbk where nama like ‘%bambang%’;

     Jika kita menggunakan Codeigniter, dapat dituliskan skrip sebagai berikut:

     $this->db->like(‘nama’,’bambang’);
     $this->db->get(‘pbk’);


f.   Pengganti Group By
     Dalam query biasa dapat dituliskan berikut:

     SELECT * from pbk GROUP BY GroupID;

     Jika kita menggunakan Codeigniter, dapat dituliskan skrip sebagai berikut:

     $this->db->groupby(‘GroupID’);
     $this->db->get(‘pbk’);




                                                       2012| Parade Pelatihan CNC   9
g. Pengganti Order By
   Dalam query biasa dapat dituliskan berikut:

   SELECT * from pbk ORDER BY Nama;

   Jika kita menggunakan Codeigniter, dapat dituliskan skrip sebagai berikut:

   $this->db->order_by(‘nama’);
   $this->db->get(‘pbk’);




                                                     2012| Parade Pelatihan CNC   10
MATERI CRUD
                                 (create,read,update,delete)
     1. JQUERY
- definisi dan sejarah singkat

  Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan
  Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga
  mempermudah dan mempercepat kita dalam membuat kode Javascript.
  Hal yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan HTML.
  JQuery pertama kali dirilis pada tahun 2006 oleh John Resig.
  JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan
  code, tapi dengan hasil yang lebih banyak.
- Beberapa kelebihan JQUERY

 Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut:
    1. Kemudahan mengakses elemen-elemen HTML
    2. Memanipulasi elemen HTML
    3. Memanipulasi CSS
    4. Penanganan event HTML
    5. Efek-efek javascript dan animasi
    6. Modifikasi HTML DOM
    7. AJAX
    8. Menyederhanakan kode javascript lainnya
 Beberapa Jquery yang akan digunakan pada pelatihan kali            ini   adalah   accordion,
 autocomplete,dialog box dan validation.

 Jquery Accordion

 Jquery ini membuat sebuah tampilan seperti accordion. Dengan jquery ini kita dapat
 membuat sebuah menu ataupun tampilan utama sekalipun. Di dalam pelatihan kali ini
 jquery ini digunakan sebagai menu. Berikut tampilan yang ingin kita buat.




 Langsung saja kita ke cara pembuatan. Langkah-langkahnya adalah sebagai berikut.
 download Jquerynya.jquery accordion dapat di download di http://jqueryui.com/download.
 untuk selebihnya dapat dilihat di gambar berikut.



                                                         2012| Parade Pelatihan CNC   11
Centang bagian accordion lalu klik download.
1. Setelah mendownload. Downloadan akan berupa file RAR. Coba buka maka isi dari
   file downloadan akan sebagai berikut.




2. coba kita buka index.html. maka kita akan melihat tampilan.




3. coba kita buka file index.html tadi dengan menggunakan text editor. Dibagian head
   html kita akan melihat script-script jquery yang disertakan di halaman tersebut. Jadi
   dalam setiap pembuatan accordion skrip-skrip tsb harus disertakan

  <link type="text/css" href="css/ui-lightness/jquery-ui-
  1.8.19.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-
  1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-
  1.8.19.custom.min.js"></script>
  <script type="text/javascript">
       $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });

                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                function() { $(this).addClass('ui-state-hover'); },
                function() { $(this).removeClass('ui-state-hover'); }
                );

         }); </script>


                                                     2012| Parade Pelatihan CNC   12
Dapat kita lihat juga disitu ada pendeklarasian fungsi akordion. Fungsi akordion berjalan
apabila kita menggunakan id accordion dan pembentukan header bisa dilakukan dengan tag
<h3>. Hal ini akan diperjelas pada gambar berikut.
      <div id="accordion">
                      <div>
                            <h3><a href="#">First</a></h3>
                            <div>Lorem ipsum dolor sit amet. Lorem ipsum
      dolor sit amet. Lorem ipsum dolor sit amet.</div>
                      </div>
                      <div>
                            <h3><a href="#">Second</a></h3>
                            <div>Phasellus mattis tincidunt nibh.</div>
                      </div>
                      <div>
                            <h3><a href="#">Third</a></h3>
                            <div>Nam dui erat, auctor a, dignissim
      quis.</div>
                      </div>
      </div>



      Pada line 43 tag <div> menggunakan id accordion maka fungsi accordion dimulai.
      Lalu untuk membuat sebuah baris accordion dimulai dengan tag <div>.kemudian
      untuk membuat head dari accordion digunakan tag <h3>.dan isi konten dapat
      dibuat dengan menulis tag <div> lagi setelah tag <h3>.
   4. Sekarang untuk membuat tampilan accordion seperti yang kita inginkan yang perlu
      kita lakukan adalah membuka halaman cssnya.mengapa? karena pengaturan
      tampilan jquery semua ada disitu. Kita buka jquery-ui.custom.css. langsung saja
      untuk membuat sudut accordion tidak melingkar lihat ke bagian misc.visual.

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -
moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -
moz-border-radius-topright: 4px; -webkit-border-top-right-radius:
4px; -khtml-border-top-right-radius: 4px; border-top-right-radius:
4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -
moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius:
4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-
radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
-moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-
radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-
right-radius: 4px; }


                                                       2012| Parade Pelatihan CNC   13
5. Di gambar tersebut ada bagian corner radius. Di bagian inilah yang mengatur sudut
       accordion melengkung atau tidak. Nah sekarang rubah skrip tersebut menjadi seperti
       dibawah ini.

       /* Misc visuals
       ----------------------------------*/

       /* Corner radius */
       .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
       }
       .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
       }
       .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl
       { }
       .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-
       br { }

Dengan skrip diatas maka sudut accordion tidak melengkung lagi. Nah sekarang untuk
mengatur ukuran lebar dari accordion dapat dilihat pada gambar berikut.
       */
       /* IE/Win - Fix animation bug - #4615 */
       .ui-accordion { width: 20%; }

       Pada line 297 disitu ada width. Nah silahkan ganti angkanya sesuai dengan yang
       diinginkan. Setelah itu tampilan akan berubah menjadi seperti yang diinginkan.

Integrasi Jquery Accordion ke dalam Codeigniter

 Untuk mengintegrasikan accordion ke dalam codeigniter kita harus mengerti dulu konsep
 MVC dari codeigniter (dijelaskan sebelum ini). Nah jadi langsung kita coba mengaplikasikan
 langsung.
 Berikut langkah-langkahnya :
1. Pertama-tama kita masukan file tampilan accordion (misalkan seperti index.html diatas)
   ke dalam folder view dalam folder codeigniter.




Nah kalo yang kita liat diatas file yang merupakan file tempilan accordion adalah akor.php.



                                                         2012| Parade Pelatihan CNC   14
2. Selanjutnya, jquery accordion memiliki file-file js dan css yang harus disertakan nah
   sekarang copykan file-file tersebut ke folder sesuai base_url yang ada di config.
   perhatikan gambar di bawah ini.

       */
       $config['base_url']         = 'http://localhost/CI';
       /*
Gambar diatas adalah base_url yang telah ditetapkan. Silahkan sesuaikan dengan nama
folder masing-masing.nah sekarang copykan file-file yang diperlukan.




 Lihat gambar diatas, saya sudah menyimpan file saya sesuai dengan base_url yang saya
 gunakan.
3. Nah sekarang, kita tinggal memanggil accordion kita melalui controller yang kita
   gunakan. Lihat gambar dibawah ini.

       public function index()
            {
                  $this->load->view('akor');
            }

Pada tampilan dapat kita lihat. Kita akan me-load file tampilan yaitu file akor.php. terakhir
berhubung controller yang saya gunakan sudah menjadi controller default langsung saja
kita ketikan url Localhost/ci
   Setelah itu maka akan tampilan akan muncul seperti di bawah ini.




                                                         2012| Parade Pelatihan CNC   15
2. CRUD
Pada tahap ini, kita akan membuat tampilan inbox yang dapat kita lihat seperti gambar
dibawah ini. Fungsionalitasnya sendiri, inbox dapat melihat pesan masuk, melakukan delete
dan melakukan replay.




   1. Untuk dapat kita klik pada menunya kita menambahkan alamat link pada panel
      menunya

      <div>
      <h3><a href="#">Folder</a></h3>
       <div>
              <li><a href="<?php echo site_url('crud/index'); ?>"
      style="text-decoration: none;" >Inbox</a></li><br/>
              <li><a href="<?php echo site_url('crud/sentitems'); ?>"
      style="text-decoration: none;" >Sent Item</a></li>
       </div>
      </div>

       Keterangan: Menambahkan alamat href untuk inbox yaitu dengan menambahkan
      href="<?php echo site_url('crud/index'); ?>" artinya jika diklik akan
      beralih ke controller crud dengan function index().

   2. Membuat controller crud.php dengan menambahkan function index().

      function index() //untuk menampilkan form awal yaitu form tambah
      data cd
           {     $this->load->database();
                 $this->load->library('pagination');
                 $config= array(
               'base_url'=> site_url().'/crud/index/',
               'total_rows'=>$this->db->count_all('inbox'),
               'per_page'=>5,
               'uri_segment' => 3
           );
           $this->pagination->initialize($config);
           $data['pagination']=$this->pagination->create_links();
           $data['inbox_row']=$this->crud_model-

                                                            2012| Parade Pelatihan CNC   16
>get_read_datainbox($config['per_page'],$this->uri->segment(3));
              $data['cd'] = '';
              $this->load->view('crud_view', $data);
        }
    Keterangan:
       $this->load->library('pagination'); Script ini digunakan untuk
          memanggil library pagination yang nantinya kita fungsikan sebagai cara
          untuk membuat paging di halaman inboxnya. Karena tidak mungkin kita
          menampilkan semua inbox kedalam halaman web, jadi kita perlu
          menggunakan paging.
       'total_rows'=>$this->db->count_all('inbox')               Untuk mengitung
          berapa banyak jumlah inbox pada tabel database.
       'per_page'=>5 Menampilkan 5 pesan inbox pada setiap kali halaman
          paging.
       $data['inbox_row']=$this>crud_model>get_read_datainbox($con
          fig['per_page'],$this->uri->segment(3)); Untuk mengambil data
          ke model yaitu crud_model pada function get_read_datainbox.
       $this->load->view('crud_view', $data); Kemudian mengirimkanya
          ke view yaitu crud_view.

3. Karena kita ada function yang menuju ke model yaitu di crud_model.php. Maka kita
   membuat function tersebut.

   function get_read_datainbox($limit, $uri){
              $query= $this->db->get('inbox',$limit, $uri);
              return $query;
        }


4. Setelah itu kita lakukan eksekusi tampilan pada folder views pada crud_view.php
   <div class="right_content">

              <table    border="0"    width="100%"   cellpadding="0"
   cellspacing="0" id="inbox-table">
              <tr id="head">
                   <td id="no">No</td>
                   <td id="judul" align="center">Text Message</td>
                   <td id="kategori">Pengirim</td>
                   <td id="harga">Date</td>
                   <td id="action">&nbsp;</td>
               </tr>



                 <?php
                     if ( !empty($inbox_row) ) {
                          $no = 1;
                          foreach ($inbox_row->result() as $row) { ?>
                          <tr id="row">
          <td id="no"><?php echo $no;?></td>
          <td id="judul"><?php echo $row->TextDecoded;?></td>

                                                    2012| Parade Pelatihan CNC   17
<td id="kategori"><?php echo $row->SenderNumber;?></td>
     <td id="harga"><?php echo $row->ReceivingDateTime;?></td>
     <td id="action">
           <a href="#" onclick="return confirm('Are you
sure?');"><img src="<?php echo base_url();
?>/images/delete_icon.gif"></a>|
           <a href="#"><img src="<?php echo base_url();
?>/images/replay.gif"></a>
     </td>
                       </tr>
                       <?php
                       $no++;
                       }

                  } else { ?>
                  <tr id="row">
                  <td colspan="6" align="center">EMPTY</td>
                  </tr>
             <?php
                  }
                  ?>
         </table>
            <?php echo $pagination; ?>

             </div>
Keterangan:
   if ( !empty($inbox_row) ) {
      }else {
           <tr id="row">
           <td colspan="6" align="center">EMPTY</td>
           </tr>}
     Jika $inbox_row kosong maka akan menampilkan kata empty. Maka if else
     disini akan sangat penting ketika data inbox tidak ada dalam database.
    foreach         ($inbox_row->result()             as       $row)       Seperti
     perulangan,sehingga nilai $inbox_row akan dijadikan sebuah array $row.
    <td id="no"><?php echo $no;?></td> Menampilkan variabel nilainya.
    <?php echo $row->TextDecoded;?> Menampilkan nilai dari $row sesuai
     dengan field databasenya yaitu ketika fieldnya TextDecoded. Begitu juga
     dengan nilai yang lain, intinya menyesuaikan database




    <?php echo $pagination; ?> Menampilkan page pagingnya
Jika sudah maka kita dapat menampilkan inbox seperti berikut, akan tetapi icon
delete dan editnya belum bisa untuk eksekusinya.




                                                2012| Parade Pelatihan CNC   18
5. Selanjutnya kita mengeksekusi untuk icon deletenya. Tahap awal berikan href untuk
   linknya seperti berikut:

   <a href="<?php echo site_url('crud/delete/'.$row->ID);?>"
   onclick="return confirm('Are you sure?');"><img src="<?php echo
   base_url(); ?>/images/delete_icon.gif"></a>

    Keterangan: 'crud/delete/'.$row->ID nantinya tujuan eksekusi ke controller
   crud dengan functionya delete() dengan membawa variabel ID.
6. Menambahkan function ke controller crud.php

   function delete() //untuk menghapus inbox
        {
              $kode = $this->security->xss_clean($this->uri-
   >segment(3));
              $result = $this->crud_model->get_data_inbox($kode);
              if ($result == null) {
                   redirect('crud');
              } else {
              $delete = $this->crud_model->delete_data_inbox($kode);
              if ($delete) $this->session->set_flashdata('message',
   'Data deleted!');
              else $this->session->set_flashdata('message', 'Failed
   to delete data!');
              redirect('crud');
              }
        }
   Keterangan:
    $result = $this->crud_model->get_data_inbox($kode); perintah untuk
     mengeksekusi ke database dengan melewati crud_mode.php. nama functionya
     get_data_inbox($kode). $kode merupakan parameter variabel yang akan
     digunakan dalam function tersebut. Jika data yang akan dihapus ada, maka
     menambahakan      juga    function   delete_data_inbox($kode) ke    dalam
     crud_model.php yang tujuanya untuk eksekusi delete.




                                                   2012| Parade Pelatihan CNC   19
7. Menambahkan function delete_data_inbox() ke crud_model.php
   function get_data_inbox($kode)
        {
              $this->db->where('ID', $kode);
              $query = $this->db->get('inbox');
              if($query->num_rows() > 0){
                    return $query->row();
              }
              else{
                    return null;
              }
        }


   function delete_data_inbox($kode) //untuk mengambil record berdasarkan kodenya
          {
                  $this->db->where('ID', $kode);
                  $this->db->delete('sentitems');
                  if($this->db->affected_rows() > 0){
                          return true;
                  }
                  else{
                          return false;
                  }
          }

   Kemudian lakukan klik ikon delete   sehingga akan tampil seperti berikut:




   Setelah klik ok maka pesan inbox akan terhapus, yang sebelumnya berjumlah 4
   menjadi 3




                                                   2012| Parade Pelatihan CNC   20
3. Form Dialog box
       Dialog box adalah plugin dari J-query, yaitu sebuah kotak dialok yang didalamnya
dapat kita sesuaikan dengan content apa saja yang kita mau. Kotak dialog ini bersifat pop-
up sehingga user yang melihat web kita akan lebih terasa nyaman,
        Dalam pelatihan kali ini, kita akan mempelajari tentang Form Dialog Box dalam
Code Igniter. Dialog box yang kita pasang ini akan kita konfigurasikan dengan fungsi
validate dan fungsi auto-complete.




      Pada dialog box ini, kita hanya berkutat di dalam file crud_view, pertama kita akan
membuat form dialog box yang berguna untuk me Replay message, yang harus kita
lakukan adalah persiapkan file berikut:
    - jquery.min.js untuk J-query nya dan disimpan di dalam folder js
    - jquery-ui.min.js untuk J-query lanjutannya dan disimpan di dalam folder js
    - untuk CSS kita menggunakan css yang sama dengan Acordion tabs
      kemudian kita tambahkan id untuk dapat mengeksekusi perintah tersebut.
Tambahan file tersebut kita pasang pada file crud_view.php
<a href="#" onclick="replay(<?php echo $row->SenderNumber;
?>);"><img src="<?php echo base_url();
?>/images/replay.gif"></a></td>
       Setelah itu, kita akan membuat isi dari Form Dialog box.
<div id="replay-form" title="replay message">
<fieldset>
     <?php $attributes=array('name' => "fmessage");
     echo form_open("user/...",$attributes); ?>
     <label for="hp">No Handphone</label>
     <?php
           echo form_input('value','','id="id_tujuan"');
     ?><span id="hp_verify" class="verify"></span><br>
     <label for="message">Message</label>
     <textarea name="textmessage" onKeyUp="Hitung()"maxlength="160"
     id="alamat" rows="5" cols="55" > </textarea>
           </br><div id="maxkarakter"> 160 karakter </div></br>
     <input type=submit name=ok id="tombol3" align=left
     value="send message" />
     <?php echo form_close(); ?>
</fieldset>
</div>


                                                        2012| Parade Pelatihan CNC   21
Setelah kita membuat isi untuk form dialog boxnya, sekarang kita membuat sciprt
untuk bisa menjalankan fungsi dari Form Dialog boxnya, script ini di tulis dalam tag
<head></head>
<script>
     $(function() {
          $( "#dialog:ui-dialog" ).dialog( "destroy" );

             $( "#replay-form" ).dialog({
                  autoOpen: false,
                  height: 360,
                  width: 400,
                  modal: true,
                  close: function() {
                  allFields.val( "" ).removeClass( "ui-state-error" );
                  }
             });

             $( "#message-form" ).dialog({
                  autoOpen: false,
                  height: 300,
                  width: 400,
                  modal: true,
                  close: function() {
                  allFields.val( "" ).removeClass( "ui-state-error" );
                  }
             });

             $( "#new-message" )
                  .click(function() {
                        $( "#message-form" ).dialog( "open" );
                  });

             $( "#tombol2" )
                  .button()
                  ;
             $( "#tombol1" )
                  .button()
                  ;
      });
     </script>
      Kita buat function lagi
function replay(i){
var id = i;
$("#id_tujuan").val(id);
     $( "#replay-form" ).dialog( "open" );
}




                                                       2012| Parade Pelatihan CNC   22
Setelah kita membuat script untuk memanggil dialog box tadi, kita membuat script
dalam tag <style></style>
<style>
     label, input { display:block; }
     input.text { margin-bottom:12px; width:95%; padding: .4em; }
     fieldset { padding:0; border:0; margin-top:25px; }
     h1 { font-size: 1.2em; margin: .6em 0; }
     div#users-contain { width: 350px; margin: 20px 0; }
     div#users-contain table { margin: 1em 0;
     border-collapse: collapse; width: 100%; }
     div#users-contain table td, div#users-contain table th
     { border: 1px solid #eee; padding: .6em 10px; text-align:
left; }
     .verify    {
     margin-top: -35px;
     margin-left: 340px;
     position: absolute;
     width: 16px;
     height: 16px;
     }
</style>

        Setelah kita membuat replay message, kita akan membuat create-new-message.
Yang harus kita lakukan adalah buat script dulu untuk memanggil fungsi new-message.
Script ini kita tuliskan di dalam acordion tabs,
<div>
     <h3 ><a href="#">New Message</a></h3>
     <div><li><a href="#" style="text-decoration: none;"
     id="new-message">Compose</a></li>
     </div>
</div>
        Setelah itu, kita membuat isi dari dialog box yang akan kita tampilkan
<div id="message-form" title="Create new message">
     <fieldset>
           <?php echo form_open("user/..."); ?>
           <label for="hp">No Handphone</label>
           <label for="message">Message</label>
           <textarea name="textmessage" id="alamat"
           rows="5" cols="55" > </textarea>
           <input type=submit name=ok id="tombol2"
           align=left value="send message />
           <?php echo form_close(); ?>
     </fieldset>
</div>
      Setelah itu, kita tidak perlu membuat file function lagi untuk create new message ini,
karena function dialog box sudah kita definisikan dia atas.




                                                          2012| Parade Pelatihan CNC   23
FORM VALIDATION

       Validasi form adalah sebuah proses untuk memeriksa apakah suatu nilai yang
diinputkan itu valid atau tidak. Jika valid, maka proses akan dilanjutkan, jika tidak valid
maka proses tidak akan dilanjutkan. Tujuan dari validasi ini adalah untuk memperkecil
kesalahan user pada saat input data. Ada 2 jenis validasi form, yaitu client side validation
dan server side validation. Apa bedanya? Client side validation adalah validasi yang
dikerjakan disisi pengguna, jadi user tidak perlu submit terlebih dahulu untuk mengetahui
data yang diinputkan sudah valid atau belum. Sedangkan server side validation adalah
validasi disisi server, jadi user akan mengetahui bahwa data yang diinputkan salah ketika
user sudah mengklik tombol submit.

        Dalam pelatihan ini, kita akan menggunakan dua jenis validasi tersebut. Client side
validation akan digunakan dalam form add contact dan compose message. Sedangkan
server side validation akan digunakan dalam form login. Untuk client side validation kita
akan menggunakan Jquery validation, yaitu sebuah plugin jquery yang berfungsi untuk
mempermudah dalam validasi form client side.

PANEL LOGIN

Login merupakan suatu gerbang dimana kita sebagai user atau admin dapat mengakses
suatu private area yang mempunyai hak-hak tertentu. Dalam aksi login saat ini, kita akan
menggunakan server side validation. Jadi pengecekan valid atau tidaknya akun tersebut
berada disisi server. Berikut lebih jelasnya :




      Buat tampilan login di direktori views dengan nama login.php

       <html>
       <head>
       <title>CRUD CodeIgniter</title>
       <link rel="stylesheet" href="<?php echo base_url();?>css/style.css"
       type="text/css" />
       </head>
       <body>
       <div id="login_container">
       <h1>Panel Login</h1>
       <div id="form_login">
       <div id="login_error_message"><?php echo
                                                         2012| Parade Pelatihan CNC   24
validation_errors();?></div>
           <?php echo form_open('verifikasi_login'); ?>
           <div id="field_login">
           <span class="label">Username</span>
           <input type="text" name="username" value="username" onblur="if
           (this.value=='') { this.value='username'; }" onfocus="if
           (this.value=='username') { this.value=''; }" />
           </div>
           <div id="field_login">
           <span class="label">Password</span>
           <input type="password" name="password" value="**********"
           onblur="if (this.value=='') { this.value='**********'; }"
           onfocus="if (this.value=='**********') { this.value=''; }"/>
           </div>
           <div id="field">
           <span class="label">&nbsp;</span>
           <input type="submit" id="submit" value="Submit"/>
           </div>
           <?php echo form_close(); ?>
           </div>
           <div id="login_footer">
           Copyright &copy; cnc laboratory
           </div>
    </div>
    </body>
    </html>

   Buat controller dengan nama verifikasi_login.php

    <?php
    class Verifikasi_login extends CI_Controller {

    function __construct()
    {
    parent::__construct();
    $this->load->model('crud_model','',TRUE);
    }

    function index()
     {
       $this->load->library('form_validation');
       $this->form_validation->set_rules('username', 'Username',
    'trim|required|xss_clean');
       $this->form_validation->set_rules('password', 'Password',
    'trim|required|xss_clean|callback_check_database');
       if($this->form_validation->run() == FALSE)
       {
         $this->load->view('login');
       }
       else
       {
         redirect('crud', 'refresh');
       }
     }

    function check_database($password)

                                                       2012| Parade Pelatihan CNC   25
{
          $username = $this->input->post('username');
          $result = $this->crud_model->login($username, $password);
      if($result)
          {
            $sess_array = array();
            foreach($result as $row)
            {
               $sess_array = array(
               'id_user' => $row->id_user,
               'username' => $row->username
               );
               $this->session->set_userdata('logged_in', $sess_array);
            }
            return TRUE;
          }
          else
          {
            $this->form_validation->set_message('check_database', 'Invalid
      username or password');
            return false;
          }
        }
      }
      ?>

     Tambahkan/buat models dengan nama crud_model.php

      <?php

      class Crud_model extends CI_Model {
            private $table_name;

              public function __construct()
              {
                    parent::__construct();
                    $this->table_name = 'cd';
              }

      function login($username,$password)
      {
      $this->db->select('id_user, username, password');
      $this->db->from('user');
      $this->db->where('username =' ."'".$username."'");
      $this->db->where('password =' ."'".MD5($password)."'");
      $this->db->limit(1);
      $query= $this->db->get();
           if($query->num_rows() ==1)
           {
                return $query->result();
           }else{
                return false;
           }
      }
      ?>
PANEL ADD CONTACT

                                                 2012| Parade Pelatihan CNC   26
Add contact merupakan suatu menu form yang digunakan untuk menambahkan data ke
dalam phonebook. Dalam form ini kita akan menggunakan clientside validation, jadi
sebelum user ‘submit’, user dapat memastikan apakah data yang akan dimasukkan itu valid
atau tidak. Berikut penjelasannya :




Dalam validasi ini kita mengecek apakah phonebook yang akan ditambahkan sudah ada
dalam database atau belum. Ketika kita masukkan nama, dan nama tersebut valid maka
akan muncul checklist yang menunjukkan bahwa nama tersebut belum terdaftar di
database. Namun, ketika kita memasukkan nomor handphone dan muncul tanda ‘cross’
(gambar kiri) itu berarti data nomor tersebut sudah terdaftar di database. Data yang benar-
benar valid adalah jika field nama dan no. Handphone terdapat tanda checklist (gambar
kanan). Berikut source code nya :

      Tambahkan sintak javascript pada <head> crud_view.php

       <script type="text/javascript">
       $(document).ready(function(){
             $("#user_name").keyup(function(){
             if($("#user_name").val().length >= 4)
               {
                   $.ajax({
                   type: "POST",
                   url: "<?php echo
       base_url();?>index.php/user/check_user",
                   data: "name="+$("#user_name").val(),
                   success: function(msg){
                       if(msg=="true")
                       {
                            $("#usr_verify").css({ "background-image":
       "url('<?php echo base_url();?>images/yes.png')" });
                       }
                       else
                              {
                            $("#usr_verify").css({ "background-image":
       "url('<?php echo base_url();?>images/no.png')" });
                       }
                   }
               });

                     }
                else

                                                        2012| Parade Pelatihan CNC   27
{
                $("#usr_verify").css({ "background-image": "url('<?php
    echo base_url();?>images/no.png')" });
            }
        });

          $("#hp").keyup(function(){
            if($("#hp").val().length >=10)
              {

                $.ajax({
                type: "POST",
                url: "<?php echo
    base_url();?>index.php/user/check_nomer",
                data: "hp="+$("#hp").val(),
                   success: function(msg){
                    if(msg=="true")
                    {
                         $("#hp_verify").css({ "background-image":
    "url('<?php echo base_url();?>images/yes.png')" });
                    }
                    else
                           {
                         $("#hp_verify").css({ "background-image":
    "url('<?php echo base_url();?>images/no.png')" });
                    }
                }
            });

                 }
            else
                {
                $("#hp_verify").css({ "background-image": "url('<?php
    echo base_url();?>images/no.png')" });
            }
        });

    });
          function isNumberKey(evt)
          {
             var charCode = (evt.which) ? evt.which : event.keyCode
             if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;

              return true;
          }
    </script>

   Buat controller dengan nama user.php

    <?php
       public function check_user()
          {
                $usr=$this->input->post('name');
            $result=$this->user_model->check_user_exist($usr);
            if($result)

                                               2012| Parade Pelatihan CNC   28
{
                        echo "false";
                }
                else{
                        echo "true";
                }
            }

            public function check_nomer()
            {
                  $hp=$this->input->post('hp');
              $result=$this->user_model->check_contact_exist($hp);
              if($result)
              {
                        echo "false";
              }
              else{
                        echo "true";
              }
            }
    ?>

   Buat model dengan nama user_model.php

    <?php
       public function check_user_exist($usr)
        {
            $this->db->where("Name",$usr);
            $query=$this->db->get("pbk");
            if($query->num_rows()>0)
               {
                 return true;
            }
            else
            {
                 return false;
            }
        }

         public function check_contact_exist($hp)
          {
              $this->db->where("Number",$hp);
              $query=$this->db->get("pbk");
              if($query->num_rows()>0)
              {
                   return true;
              }
              else
              {
                   return false;
              }
          }
    ?>

   Untuk menampilkan icon validasi, pada form add contact tambahkan/ubah menjadi
    sebagai berikut. (Dalam file crud_view.php)
                                                 2012| Parade Pelatihan CNC   29
<div id="dialog-form" title="Add Contact">
             <p class="validateTips"><?php echo validation_errors('<p
       class="error">'); ?></p>

              <fieldset>
                    <?php echo form_open("user/registration"); ?>
                    <label for="name">Nama</label>
                    <input type="text" id="user_name" name="user_name"
       value="<?php echo set_value('user_name'); ?>" class="text ui-widget-
       content ui-corner-all" />
                    <div id="usr_verify" class="verify"></div>
                    <label for="hp">No Handphone</label>
                    <input type="text" id="hp" onkeypress="return
       isNumberKey(event)" name="hp" value="<?php echo set_value('hp'); ?>"
       class="text ui-widget-content ui-corner-all" />
                    <span id="hp_verify" class="verify"></span>
                    <input type=submit name=ok id="tombol1" align=left
       value="create account" />
                    <?php echo form_close(); ?>
              </fieldset>
       </div>


      Note : jangan lupa copy paste ‘no.PNG’ dan ‘yes.PNG’ ke direktori image !!!
      Field no.handphone hanya bisa diisi dengan format angka, field ini menjalankan
       function isNumberKey() javascript yang telah ditambahkan pada <head>
       sebelumnya.

PANEL NEW MESSAGE

Pada panel ini akan terdapat 2 field yaitu nomor handphone dan message. Banyak karakter
pada field message dibatasi sebanyak 160 karakter tiap SMS. Dan untuk field nomor
handphone akan menggunakan fitur autocomplete (autocomplete akan dibahas di bab
selanjutnya). Berikut source code nya :




      Tambahkan sintak javascript pada <head> crud_view.php

       <script language='javascript'>
                                                      2012| Parade Pelatihan CNC   30
function Hitung(){
                var curText =
    document.fmessage.textmessage.value.length;
                var maxText = 160;
                var sisa = maxText - curText;
                var isi = document.getElementById('maxkarakter');
                isi.innerHTML = sisa + ' karakter';
            }
    </script>

   Untuk menghitung mundur jumlah karakter yang dituliskan, pada form ‘create new
    message’ tambahkan sintak sebagai berikut :

    <div id="message-form" title="Create new message">
          <p class="validateTips"><?php echo validation_errors('<p
    class="error">'); ?></p>

           <fieldset>
                 <?php $attributes=array('name' => "fmessage"); echo
    form_open("user/sendmessage",$attributes); ?>
           <label for="hp">No Handphone</label>
           <?php echo form_input('value','','id="id_kontak"');?>
           <span id="hp_verify" class="verify"></span><br>
           <label for="message">Message</label>
           <textarea name="textmessage" onKeyUp="Hitung()"
    maxlength="160" id="alamat" rows="5" cols="55" > </textarea>
           </br><div id="maxkarakter"> 160 karakter </div></br>
           <input type=submit name=ok id="tombol2" align=left value="send
    message />
                 <?php echo form_close(); ?>
           </fieldset>
    </div>

   Note : ketika karakter message menunjukkan ‘0 karakter’, maka user tidak akan
    bisa menambahkan karakter lagi.
   Tambahkan sintak berikut pada controller user.php

    public function sendmessage()
    {
          $this->user_model->send_message();
          redirect('crud');
    }

   Tambahkan sintak berikut pada model user_model.php

    public function send_message()
    {
          $data=array(
                'DestinationNumber'=>$this->input->post('nomer'),
                'Coding'=>'Default_No_Compression',
                'TextDecoded'=>$this->input->post('textmessage'),
                'CreatorID'=>'1'
                );
          $this->db->insert('outbox',$data);
    }
                                                  2012| Parade Pelatihan CNC   31
PANEL REPLY MESSAGE

Panel ini digunakan untuk membalas SMS dari inbox yang masuk. Isi fieldnya sama dengan
new message, namun untuk nomer handphone akan secara otomasi terisi dengan nomer
tujuan dari yang SMS yang masuk. Berikut lebih jelasnya :




      Tambahkan sintak berikut ke dalam crud_view.php

       <div id="replay-form" title="replay message">
              <fieldset>
                    <?php $attributes=array('name' => "freply"); echo
       form_open("user/sendmessage",$attributes); ?>
                    <label for="hp">No Handphone</label>
                    <input type="text" id="id_tujuan" name="nomer">
                    <span id="hp_verify" class="verify"></span><br>
                    <label for="message">Message</label>
                    <textarea name="textmessage" onKeyUp="Hitung2()"
       maxlength="160"
                    id="alamat" rows="5" cols="55" > </textarea>
                    </br><div id="maxreply"> 160 karakter </div></br>
                    <input type=submit name=ok id="tombol3" align=left
       value="send message" />
                    <?php echo form_close(); ?>
              </fieldset>
       </div>

      Untuk menghitung mundur jumlah karakter reply, tambahkan sintak berikut ke
       <head> crud_view.php

       function Hitung2(){
                         var curText =
       document.freply.textmessage.value.length;
                         var maxText = 160;
                         var sisa = maxText - curText;
                         var isi = document.getElementById('maxreply');
                         isi.innerHTML = sisa + ' karakter';

                                                     2012| Parade Pelatihan CNC   32
}

      Agar dapat membawa nomer handphone dari pengirim, maka tambahkan sintak
       berikut pada anchor reply di crud_view.php

       <a href="#" onclick="replay(<?php echo $row->SenderNumber;
       ?>);"><img src="<?php echo base_url(); ?>/images/replay.gif"></a>

      Dan tambahkan function berikut pada <head> crud_view.php

       function replay(i){
       var id = i;
       $("#id_tujuan").val(id);
             $( "#replay-form" ).dialog( "open" )
       }

       //tambahkan pada function dialog box sebelumnya
       $( "#replay-form" ).dialog({
             autoOpen: false,
             height: 360,
             width: 400,
             modal: true,
             close: function() {
             allFields.val( "" ).removeClass( "ui-state-error" );
                   }
       });

       $( "#tombol3" )
                         .button()
                         ;
       //akhir penambahan pada dialog box

      Untuk proses pengiriman, aksi dari controller dan model sama dengan create new
       message diatas. Maka tidak perlu kita buat lagi 




   4. AutoComplete

AutoComplete dapat memudahkan kita dalam mencari data yang kita inginkan,misalnya
dalam kasus pencarian. Ketika kita mengetikkan 1 karakter maka seluruh data yang
                                                     2012| Parade Pelatihan CNC   33
mengandung awalan karakter yang ditampilkan. Mungkin jika Anda sering searching
menggunakan Google, fasilitas ini pasti tidak asing lagi.

Hal-hal yang diperlukan pertama adalah persiapkan sebuah tabel yang berisi data nomor
handphone dan nama orang yang akan kita tuju. Adapun spesifikasinya sebagai berikut :




Dengan syarat ID sebagai primary key, dan di autoincrement-kan.

Selanjutnya isi data pada tabel diatas secara manual melalui tab INSERT di phpmyadmin.

Contoh data bisa dilihat sebagai berikut:




Tambahkan Script Model berikut pada model crud_model.php yang telah kita buat
sebelumnya :

<?php

        function lookup($keyword){
             $this->db->select('*')->from('pbk');
              $this->db->like('Number',$keyword,'after');
                   $query = $this->db->get();

                     return $query->result();
              }

        ?>

Langkah selanjutnya membuat controller untuk autocomplete yang akan kita buat.
Tambahkan script berikut pada controller yang telah kita buat sebelumnya. Bernama
crud.php di dalam folder application/controllers. Scriptnya seperti berikut :

<?php


     function lookup(){
           // process posted form data (the requested items like
nomor)
        $keyword = $this->input->post('term');
        $data['response'] = 'false'; //Set default response
        $query = $this->crud_model->lookup($keyword); //Search DB
        if( ! empty($query) )

                                                       2012| Parade Pelatihan CNC   34
{
               $data['response'] = 'true'; //Set response
               $data['message'] = array(); //Create array
               foreach( $query as $row )
               {
                   $data['message'][] = array(
                                            'id'=>$row-> ID,
                                            'value' => $row->Number,
                                            ''
                                         ); //Menambahkan row ke suatu
array
              }
          }
          if('IS_AJAX')
          {
              echo json_encode($data); //echo json string if ajax
request

        }
        else
        {
           $this->load->view('autocomplete/index',$data); //Load
html view of search results
        }
     }

     ?>
Setelah selesai, langkah terakhir adalah membuat view nya, sisipkan script berikut di dalam
view yang telah kita buat sebelumnya, bernama crud_view.php .

<script type="text/javascript">
         $(this).ready( function() {
           $("#id_kontak").autocomplete({
                      minLength: 1,
                      source:
                function(req, add){
                      $.ajax({
                           url: "<?php echo base_url();
?>index.php/crud/lookup",
                           dataType: 'json',
                           type: 'POST',
                           data: req,
                           success:
                           function(data){
                                 if(data.response =="true"){
                                      add(data.message);
                                 }
                           },
                      });
                },
           select:

                                                        2012| Parade Pelatihan CNC   35
function(event, ui) {
                     $("#result").append(
                           "<li>"+ ui.item.nama + "</li>"
                     );
                },
           });
         });
         </script>
     <style>
           /* Autocomplete
                ----------------------------------*/
                .ui-autocomplete { position: absolute; cursor:
default; }
                .ui-autocomplete-loading { background: white
url('<?php echo base_url();?>/jquery/images/ui-
anim_basic_16x16.gif') right center no-repeat; }*/

                /* workarounds */
                * html .ui-autocomplete { width:1px; } /* without
this, the menu expands to 100% in IE6 */

                /* Menu
                ----------------------------------*/
                .ui-menu {
                     list-style:none;
                     padding: 2px;
                     margin: 0;
                     display:block;
                }
                .ui-menu .ui-menu {
                     margin-top: -3px;
                }
                .ui-menu .ui-menu-item {
                     margin:0;
                     padding: 0;
                     zoom: 1;
                     float: left;
                     clear: left;
                     width: 100%;
                     font-size:80%;
                }
                .ui-menu .ui-menu-item a {
                     text-decoration:none;
                     display:block;
                     padding:.2em .4em;
                     line-height:1.5;
                     zoom:1;
                }
                .ui-menu .ui-menu-item a.ui-state-hover,
                .ui-menu .ui-menu-item a.ui-state-active {
                     font-weight: normal;

                                           2012| Parade Pelatihan CNC   36
margin: -1px;
                   }
            </style>
  </head>
    <body>
<!-- mulai dialog-form nya -->
<div id="dialog-form" title="New Message">
     <p class="validateTips">All form fields are required.</p>
     <fieldset>
           <form action="input.php" method="POST">
           <label for="name">Nomor Handphone</label>
           <?php
                 echo form_input('nomor','','id="id_kontak"');
           ?>

          <label for="email">Pesan</label>
          <?php
          $text = array (
                'name' => 'pesan',
                'cols' => '60',
                'rows' => '5');
                echo form_textarea($text);
          ?>
          <input type=submit name=submit id="tombol" align=left>
          </form>
     </fieldset>
</div>

<!-- button nya -->
<button id="create-user">New Message</button>

</body>
</html>




Apabila proyek yang telah kita kerjakan benar maka hasilnya adalah sebagai berikut :




                                                        2012| Parade Pelatihan CNC   37
Penjelasan : Halaman awal setelah login sebelum new message di klik




Dan tampilan terakhir dari kotak Dialog box yang telah kita buat tadi, disini kolom yang kita
isikan akan menampilkan auto-suggest / inputan yang pada awalnya adalah 8.
Jika sudah sampai di tahap ini, maka script yang tadi kita buat sudah berjalan dengan
benar.




   1. Menerapkan Grafik untuk membaca jumlah inbox dan sent item



                                                         2012| Parade Pelatihan CNC   38
Grafik bar untuk inbox dan sent item

Kali ini kita akan membuat grafik batang yang memerapkan untuk membaca table
inbox dan sent item dari database, konsep ini grafik merepresentasikan jumlah inbox
dan sent item pada now -7 hari. Jadi semisal sekarang tanggal 5 Mei 2012, maka
grafik akan membaca untuk tanggal 28 April 2012 sampai 05 April 2012. Selain itu
bagian grafik akan menampilkan jumlah total dari inbox dan sent itemnya, Sehingga
kita dapat mengetahui jumlah total inbox dan sent item yang ada dalam database.
a. Persiapkan file-file berikut:
    -FCF_MSColumn3D.swf kemudian kita simpan pada folder ci/charts.
    -jquery-1.4.js simpan filenya di ci/js.
    -jquery.fusioncharts.js simpan filenya di ci/js.
b. Kemudian kita diskripsikan tujuan controller ketika klik menu status. Tambahkan
pada crud_view.php

<div onclick="location.href='crud/status';">
     <h3><a id="create-user">Status</a></h3>
</div>

Keterangan: kita memberikan tujuan ke controller crud/status ketika ada perintah
klik pada bagian menu status.
c. Berikan fungtion baru dengan nama status pada controller crud.php.

 function status(){
      $oa=strtotime(date('Y-m-d'));
      $sa=date('Y-m-d',strtotime('-1 week',$oa));
      $tgl=explode("-",$sa);
      $da=date('Y-m-d',strtotime('this week',$oa));
      //inbox
      $datas="<tr><td>inbox</td>";
      for($i=0;$i<=7;$i++){
          $x=mktime(0,0,0,$tgl[1],$tgl[2]+$i,$tgl[0]);
          $y=date('Y-m-d',$x);
          $datas.='<td>'.$this->crud_model->
 cari_datainbox($y).'</td>';
      }
      $data['inbox']=$datas.'</tr>';
      //sent item
      $datas="<tr><td>Sent Item</td>";

                                                 2012| Parade Pelatihan CNC   39
for($i=0;$i<=7;$i++){
          $x=mktime(0,0,0,$tgl[1],$tgl[2]+$i,$tgl[0]);
          $y=date('Y-m-d',$x);
          $datas.='<td>'.$this->crud_model->
 cari_datasitem($y).'</td>';
      }
      $data['sentitem']=$datas.'</tr>';
      //tanggal
      $datas="<tr><th>Tgl</th>";
      $sa=date('Y-m-d',strtotime('-1 week',$oa));
         $tgl=explode("-",$sa);
      for($i=0;$i<=7;$i++){
          $x=mktime(0,0,0,$tgl[1],$tgl[2]+$i,$tgl[0]);
            $y=date('d',$x);
          $datas.='<th>'.$y.'</th>';
      }
      $data['tgl']=$datas.'</tr>';
      //mencari tanggal -7 dan tanggal sekarang!
         $oa=strtotime(date('Y-m-d'));
      $sa=date('d-m-Y',strtotime('-1 week',$oa));
      $da=date('d-m-Y',strtotime('now'));
      $data['last']=$sa;
      $data['now']=$da;
      $data['jumlahinbox']=$this->crud_model->cari_totalinbox();
      $data['jumlahsitem']=$this->crud_model->cari_totalsitem();
          $this->load->view('vstatus',$data);
      }


d. Kemudian kita beralih pada model yaitu untuk mengeksekusi databasenya.
   Berikan fungsi baru pada crud_model.php


  function cari_datainbox($i){
             $this->db->select('ReceivingDateTime');
             $this->db->from('inbox');
             $this->db->like('ReceivingDateTime',$i,'after');
             $inbox=$this->db->get();
             $jumlah=$inbox->num_rows();
             $jumlah=!empty($jumlah)?$jumlah:'0';
             return $jumlah;
       }
       function cari_totalinbox(){
             $inbox=$this->db->get('inbox');
             $jumlah=$inbox->num_rows();
             $jumlah=!empty($jumlah)?$jumlah:'0';
             return $jumlah;
       }
       function cari_datasitem($i){
             $this->db->select('SendingDateTime');
             $this->db->from('sentitems');

                                           2012| Parade Pelatihan CNC   40
$this->db->like('SendingDateTime',$i,'after');
               $inbox=$this->db->get();
               $jumlah=$inbox->num_rows();
               $jumlah=!empty($jumlah)?$jumlah:'0';
               return $jumlah;
        }
        function cari_totalsitem(){
             $inbox=$this->db->get('sentitems');
             $jumlah=$inbox->num_rows();
             $jumlah=!empty($jumlah)?$jumlah:'0';
             return $jumlah;
        }


e. Setelah itu kita beralih ke view. Karena controller mengirimkanya ke view vstatus
   $this->load->view(‘vstatus’,$data) maka kita buat vstatus.php pada folder
   viewnya.

  vstatus.php
  Tambahkan di dalam tag <head>

  <script type="text/javascript" src="<?php echo base_url();
  ?>js/jquery-1.4.js"></script>
  <script type="text/javascript" src="<?php echo base_url();
  ?>js/jquery.fusioncharts.js"></script>

  Tambahkan script dibawah ini untuk menampilkan grafiknya di bagian <div
  class=”right_content”>

  <div class="right_content">
             <!-- grafik-->
             <div style="overflow:auto; width:575px;
  height:370px; padding:5px; border:1px solid #eee">
       <center><h4>Grafik Inbox dan Sent Item</h4></center>
       <?php
          echo "<center>$last sampai $now</center>";
              ?>
          <table style="display: none;" id="myHTMLTable"
  border="1" align="center">

         <?php echo $tgl; ?>
         <?php echo $inbox; ?>
         <?php echo $sentitem; ?>
         </table>
         <script type="text/javascript">
         $('#myHTMLTable').convertToFusionCharts({
              swfPath: "<?php echo base_url(); ?>charts/",
              type: "MSColumn3D",
              data: "#myHTMLTable",
              dataFormat: "HTMLTable",
              width : "550"

                                                 2012| Parade Pelatihan CNC   41
});
       </script>
          <table border="0">
              <tr><td>Total Inbox</td><td>:</td><td><?php echo
  $jumlahinbox; ?></td></tr>
              <tr><td>Total Sent Item</td><td>:</td><td><?php
  echo $jumlahsitem ?></td></tr>
          </table>
  </div>
  <!-- end grafik-->

               </div>

f. Terakhir kita lihat hasilnya, dengan menklik menu status maka akan tampil
   seperti dibawah ini.




                                            2012| Parade Pelatihan CNC   42
Membuat aplikasi sms gateway di Windows

1. Download file gammu di wammu.eu/download. Kemudian pilih untuk versi gammu
   yang stabil, untuk versi saat membuat tutorial ini penulis mencoba untuk memilih
   gammu 1.31.0.




                                                               Download gammu
                                                               windows versi .ZIP




2. Setelah mendownload file gammu-1.31.0-windows.zip, kemudian lakukan ekstrak
   file zip tersebut. Buka folder hasil ekstrak, maka akan terdapat 4 folder yaitu: bin,
   include, lib, dan share.




3. Pindahkan file hasil ekstrak atau folder Gammu-1.31.0-Windows ke direktori C:
   kemudian rename dengan nama gammu-1.31 agar lebih mudah.

4. Langkah berikutnya yaitu melakukan konfigurasi untuk file gammurc dan smsdrc.
   Caranya    cari  file   gammurc   dan    smsdrc   yang    ada   di  C:gammu-
   1.31sharedocgammuexamplesconfig dan copykan kedua file tersebut ke folder
   bin yang berada di C:gammu-1.31bin . kemudian konfigurasi gammurc-nya.

                                                     2012| Parade Pelatihan CNC     43
gammurc
  [gammu]

  device = com12:
  connection = at115200
  ;Do not use model configuration unless you really need it
  ;model = 6110
  ;synchronizetime = yes
  ;logfile = gammulog
  ;logformat = textall
  ;use_locking = yes
  ;gammuloc = locfile
  ;startinfo = yes
  ;gammucoding = utf8
  ;usephonedb = yes

catatan : Untuk membuka file ini, dapat menggunakan notepad atau editor lainya.

Pada gammurc hanya konfigurasi pada device dan connection. Untuk device kita
sesuaikan pada pengecekkan port pada komputer. Untuk connection pada modem
yang saya pakai adalah at115200, untuk modem atau handphone yang lainya dapat
dilihat di http://wammu.eu/phones.

Melihat port device :
 Cari pada Device Manager kemudian pilih modems.




   Catatan : Jika device manager tidak menampilkan modem, kemungkinan besar
   yaitu belum menginstall driver bawaan dari modem tersebut. Sehingga,perlu
   untuk menginstall terlebih dahulu sebelum melihat device portnya. Kemudian,
   untuk menghindari bentrok close software bawaanya.


                                               2012| Parade Pelatihan CNC   44
 Klik kanan pada modem yang digunakan, dan pilih properties, kemudian cek
      pada modem.




                                                             Device Port yaitu com12




5. Langkah berikutnya kita lakukan pengecekkan apakah konfigurasi terhadap modem
   yang dipakai sudah sesuai.
    Buka comment-prompt
    Kemudian ketikan dibawah ini untuk masuk ke directori C:gammu-1.31bin

           cd C:gammu-1.31bin

      Kemudian ketikkan

           gammu –identify

      Jika konfigurasi telah sesuai maka kan tampil seperti berikut:




      Catatan : Kalau IMEI nya muncul maka sudah OK!
6. Setelah terdeteksi untuk modem dan device portnya, selanjutnya tahap
   menyambungkan dengan database.
   Catatan : Komputer telah terinstall Apache, Mysql. Jika belum anda dapat
   menginstall Xampp terlebih dahulu.


                                                      2012| Parade Pelatihan CNC       45
   Buat database baru di localhost/phpmyadmin, misalkan pada kasus sekarang
    buat database dengan nama sms.




   Import database mysql.sql di folder C:gammu-
    1.31sharedocgammuexamplessql




                                                                 Pilih import
                                      Pilih file mysql.sql




                                                                  Klik go!




                                                   2012| Parade Pelatihan CNC   46
   Jika sukses dalam import file sql tersebut maka akan tampil seperti dibawah ini.




                    Telah berhasil import database (ada 9 tabel)!




   Setelah membuat database beserta import isi database yang berjumlah 9 tabel,
    maka selanjutnya konfigurasi dengan file smsdrc yang berada di direktori bin.
    Sehingga sms yang diterima oleh device dapat di simpan kedalam database sms.


    smsdrc

    [gammu]

    device = com12:              Sesuai dengan device port
    #model = 6110
    connection = at115200        Sesuai daftar device di wammu.eu/phones
    #synchronizetime = yes
    #logfile = gammulog # this is not used at all in SMSD mode
    #logformat = textall
    #use_locking = yes
    #gammuloc = gammu.us
    #startinfo = yes


    catatan : Jangan lupa untuk menghilangkan tanda # pada parameter yang akan
    digunakan.




                                                         2012| Parade Pelatihan CNC   47
# General SMSD settings, see gammu-smsdrc(5) for detailed
      description.
      [smsd]
      # SMSD service to use, one of FILES, MYSQL, PGSQL, DBI
      service = sql               Versi gammu terbaru service kita ubah menjadi sql
      # PIN for SIM card
      #PIN = 1234                 Beri tanda # jika simcard tidak memakai PIN



      Kemudian konfigurasi untuk databasenya.

      # Database backends congfiguration
      user = root
      password =
      pc = localhost
      # pc can also contain port or socket path after colon (eg.
      localhost:/path/to/socket)
      database = sms

      # DBI configuration
      driver = sqlite                Driver diubah menjadi native_mysql
      # driverspath = /usr/lib/dbd/
      # Database directory for sqlite
      # dbdir = /var/lib/smsd

      Keterangan konfigurasi database:
        User          : Nama user untuk mengakses ke database mysql.
        Password      : Password utnuk mengakses ke database, jika tidak ada kita
                         kosongkan saja.
        Pc            : Isikan localhost, karena kita mengakses di localhost.
        Database      : Nama database yang akan kita jadinkan tempat penyimpanan
                         sms.

7. Setelah mengkonfigurasi gammurc dan smsdrc, selanjutnya mulai menjalankan
   sebagai servicenya.
    Untuk menginstall service

             gammu-smsd –i –c smsdrc –n gammuSMSD


      Jika comment benar, maka akan menampilkan seperti ini .




                                                      2012| Parade Pelatihan CNC      48
   Untuk menuninstall service

          gammu-smsd –u –c smsdrc –n gammuSMSD


    Jika comment benar, maka akan menampilkan seperti ini.




   Untuk menjalankan service

          gammu-smsd –s –c smsdrc –n gammuSMSD


      Jika comment benar, maka akan menampilkan seperti ini.




   Untuk mengecek apakah service gammusmsd telah running, dapat mengecek
    pada task manager seperti dibawah ini.




                                                       Status Running




                                               2012| Parade Pelatihan CNC   49
8. Setelah semuanya dilakukan, kemudian lakukan pengiriman sms ke nomor
   handphone yang ada pada modem. Bila, konfigurasi benar maka pesan atau sms
   masuk akan masuk pada database sms dan berada di tabel inbox.

   Kurang lebih akan tampil seperti dibawah ini.




                                                   2012| Parade Pelatihan CNC   50
Membuat aplikasi sms gateway di ubuntu 11.10
                                        (Oneiric Ocelot)

1. Persiapkan terlebih dahulu ubuntu 11.10 dengan koneksi internet yang memadahi. Pada
   studi kasus tutorial kali ini, penulis menggunakan akses internet kampus Institute
   Teknologi Telkom dengan menggunakan proxy address 172.16.1.1 proxy port 8080.
   Untuk repository kita menggunakan server pinguin (Repository Laboratorium CNC).
2. Akses ke pinguin.ittelkom.ac.id/mirror. Kemudian pilih untuk bagian repo ubuntu,
   setelah itu pilih untuk versi ubuntunya. Karena disini kita memakai ubuntu 11.10 oneiric
   maka kita pilih repo yang sesuai.




                                                         Pilih seri oneiric




   Klik untuk how-to.txt. maka akan ada beberapa konfigurasi untuk alamat list
   repositorinya.




3. Copykan ke source.list dari ubuntu anda. Dengan cara ketikan pada terminal.
    Untuk masuk dalam mode root terlebih dahulu ketikan.

      sudo su

      Kemudian ganti sources.list

      gedit /etc/apt/sources.list

      Copykan konfigurasi yang ada pada list web tadi kedalam panel editnya. Dapat dilihat
      pada gambar berikut ini. Kemudian save konfigurasinya.




                                                        2012| Parade Pelatihan CNC   51
Setelah konfigurasi disimpan. Lakukan update dengan cara mengetikkan diterminal.

apt-get update

Jika tidak terjadi proses maka kita harus seting proxy pada terminalnya dengan
mengetikan format berikut kedalam terminal.

export http_proxy=http://yourproxyaddress:proxyport

Keterangan:
    yourproxyaddress        : Diisi alamat proxy yang digunakan.
    proxyport               : Diisi untuk port proxy yang digunakan.

Karena kasus kali ini menggunakan proxy address 172.16.1.1 proxy port 8080. Maka
ketikan diterminal seperti ini:

export http_proxy=http://172.16.1.1:8080

Kemudian lakukan update kembali. Jika sukses akan tampil seperti berikut:




                                                  2012| Parade Pelatihan CNC   52
4. Install apache2, untuk install apache masuk keterminal dan ketikan:

   apt-get install apache2

   Maka akan muncul do you want to continue [Y/n]? kemudian ketikan y dan tekan enter.




   Jika sudah proses selesai, coba untuk membuka browser dan ketikan alamat
   http://localhost jika apache telah terinstal akan memunculkan it works!.




      5. Install PHP, untuk menginstall php, ketikan diterminal seperti berikut.

          sudo apt-get install php5 libapache2-mod-php5


          Proses selanjutnya akan sama dengan proses menginstall apache2.
          Setelah terinstall lakukan restart untuk apache2nya dengan mengetikkan
          perintah berikut.

          /etc/init.d/apache2 restart

          Untuk menguji berhasil atau tidaknya PHP yang baru saja kita install, buatlah
          sebuah file format php dan disimpan di /var/www/file_anda.php atau anda



                                                        2012| Parade Pelatihan CNC   53
langsung bisa mengetikkan ke terminal seperti berikut:

gedit /var/www/phpinfo.php

Kemudian isikan pada phpinfo.php seperti berikut.

<?php
phpinfo()
?>




Kemudian anda langsung bisa mengakses menggunakan browser dan
memasukkan alamat ini. http://localhost/phpinfo.php. jika file bernama lain
maka akses kehalaman,dengan memberikan nama file untuk setelah localhost.




Keterangan: jika muncul maka menandakan php telah terinstall.



                                             2012| Parade Pelatihan CNC   54
6. Install mysql-server, mysql disini berhubungan dengan database kita, dan untuk
   menginstalnya hanya perlu mengetikkan perintah berikut keterminal.

   apt-get install mysql-server

   Tunggu prosesnya, jika ada muncul seperti berikut maka masukkan password
   untuk username root mysql anda. Password ini digunakan apabila anda
   menggunakan MySQL, jadi ingat baik-baik password anda.




   Ulangi passwordnya sesuai dengan password yang anda masukkan tadi.




7. Setelah install MySQL telah selesai, selanjutnya komponen terakhir yang perlu
   diinstall untuk membangun webserver yaitu PhpMyAdmin. Sebenarnya tanpa
   phpmyadmin sendiri kita sudah bisa menggunakan mysql, hanya untuk pemula
   dalam masalah database, maka kita akan sangat mengalami kesulitan sehingga
   membutuhkan gui atau interface agar penggunaan database MySQLnya lebih
   mudah.
   Ketikan perintah berikut.

   apt-get install phpmyadmin




                                               2012| Parade Pelatihan CNC   55
Setelah itu akan muncul seperti berikut pilih untuk apache2 kemudian tekan
   enter dan pilih no untuk setingan konfigurasi kemudian tekan enter lagi.




8. Selanjutnya, ketikan perintah berikut diterminal.

   cp   /etc/phpmyadmin/apache.conf           /etc/apache2/conf.d

   Kemudan lakukan restart apache2nya.

   /etc/init.d/apache2 restart


   Untuk melihat hasilnya, masukkan alamat http://localhost/phpmyadin.          Untuk
   masuk loginlah sebagai root dengan password yang telah anda buat.




                                                  2012| Parade Pelatihan CNC   56
Jika username dan password benar maka akan muncul halaman muka dari panel
   phpmyadminya seperti gambar diatas.
9. Instalasi gammu dan gammu-smsd

   apt-get install gammu gammu-smsd

   Tunggu sampai proses selesai, pada setingan awal gammu-smsd belum sesuai
   dengan konfigurasi sehingga nantinya perlu kita konfigurasi manual.




10. Tahap selanjutnya pasangkan modem atau bisa juga menggunakan device
    handphone. Kali ini penulis menggunakan modem ZTE model: MF636.
    Cek versi dari gammu yang telah terinstall, ketikkan perintah dalam terminal

   dpkg –l gammu




                                               2012| Parade Pelatihan CNC   57
Sebelum mengkonfigurasi, kita perlu mencari tahu dimanakah letak port device
   tersebut. Cara melihatnya dapat mengetikkan

   dmesg | grep tty




   Kemudian kita seting konfigurasi seperti berikut ini. Dengan port yang
   sebelumnya kita cek yaitu ttyUSB1.




   Keterangan :
    Port       : letak port yang sebelumnya kita cek.
    Connection : tipe koneksinya, untuk melihat database list tipe koneksinya bisa
                 cek di wammu.eu/phones/.

11. Setelah konfigurasi, lakukan identify    apakah   modem     telah   teridentifikasi
    sempurna oleh computer ubuntu kita.
    Caranya ketikan perintah berikut



   gammu –-identify




                                                 2012| Parade Pelatihan CNC    58
Jika berhasil seperti gambar diatas, lakukan pengecekkan dengan mangirmkan
   sms melalui terminal dengan mengetikkan perintah.

   echo isi_pesan | gammu –sendsms TEXT no_tujuan




12. Menggunakan funsionalitas database mysql untuk menyimpan sms yang masuk.
   Sehingga nanti semua sms akan masuk kedalam database mysql. Pertama buat
   terlabih dahulu nama databasenya, contoh disini memberikan nama parade_cnc.




   Kemudian importkan untuk database bawaan dari gammu. Sebelumnya kita
   extrak   terlebih dahulu  file  mysql.sql.gz     yang   berada di folder
   /usr/share/doc/gammu/examples/sql/mysql.sql.qz. dengan cara:

   cd /usr/share/doc/gammu/examples/sql



                                              2012| Parade Pelatihan CNC   59
Kemudian ketikan perintah berikut untuk mengekstrak mysql.sql.gz menjadi
   mysql.sql.

   gunzip mysql.sql.gz




    Kemudian import mysql.sql seperti berikut pada database yang telah dibuat tadi.
   Jika sudah berhasil import maka hasilnya akan seperti berikut:




13. Setelah database kita persiapkan, saatnya konfigurasi agar dapat terhubung.
    Langkah awal buat file /etc/gammurc. Anda dapat mengetikkan perintah

   gedit /etc/gammurc

   Kemudian isikan konfigurasi berikut ini.

   [gammu]
   Port = /dev/ttyUSB1
   Connection = at19200
   Logfile = /etc/gammulog
   Logformat = textall
   Use_locking = yes

   Keterangan : semua konfigurasi diatas menyesuaikan             port   dan      jenis
   connectionya. Untuk jenis connectionya tergantung devicenya.




                                                2012| Parade Pelatihan CNC   60
Karena tujuan kita akan menghubungkan gammu dengan Mysql, Maka kita
mengedit file /etc/gammu-smsdrc. Lakukan perintah berikut.

gedit /etc/gammu-smsdrc

Kemudian isikan seperti berikut:

[gammu]
Port = /dev/ttyUSB1
Connection = at19200

[smsd]
Service = sql
Logfile = /etc/smsdlog
Debuglevel =255

User = root
Password = paradecnc
PC = localhost
Database = parade_cnc
Driver = native_mysql

Kemudian save, dan untuk menjalankan service gammu-sms hanya perlu
mengetikkan perintah berikut pada terminal.

gammu-smsd




Kemudian lakukan test dengan mengirimkan sms ke no modem atau device lain
yang dipakai untuk sms gateway. Jika semua konfigurasi dan pensetingan telah
sesuai maka akan berhasil dan sms yang masuk akan langsung masuk kedalam
database parade_cnc pada table inbox.




                                           2012| Parade Pelatihan CNC   61
Trigger MySQL

Arti trigger sendiri merupakan suatu pemicu. Misalkan jika ada data masukkan di tabel
inbox maka akan lakukan perintah x. Banyak sekali manfaat dari trigger sendiri, biasanya
trigger digunakan untuk pembackup’an data. Dilain kasus,dengan memanfaatkan trigger
sendiri kita bisa membuat sebuah aplikasi sms auto replay yang cukup baik. Mari kita coba,

Contoh 1: Membuat sms auto replay untuk level 1.
Format -> Ketik CNC<SPASI>DAFTAR
Analoginya sendiri, ketika ada inputan atau sms masuk kedalam tabel inbox maka sistem
akan membaca. Jika tidak ada format pesan yang sesuai dengan apa yang dimiliki program
yaitu CNC<spasi>DAFTAR maka akan dibalas “Maaf Format sms anda salah! Cnc_crew”.


CREATE TRIGGER cnc1
AFTER INSERT ON inbox
FOR EACH ROW BEGIN
if SUBSTRING(new.TextDecoded,5,10)=’DAFTAR’ then
INSERT INTO
outbox ( DestinationNumber, Coding, TextDecoded, CreatorID )
VALUES ( new.SenderNumber, ‘Default_No_Compression’,’Hore Format anda
benar’, ’1′);
else
INSERT INTO
outbox ( DestinationNumber, Coding, TextDecoded, CreatorID )
VALUES ( new.SenderNumber, ‘Default_No_Compression’, ‘Maaf format sms
Anda salah! Cnc_Crew Ketik CNC<spasi>DAFTAR’, ’1′);
end if;
END$$

Keterangan:
      CREATE TRIGGER cnc1 Membuat trigger di MySQL untuk nama triggernya cnc1.
       Untuk mengecek trigger apa saja yang telah dibuat di MySQL tinggal ketikan.
       show triggers

    SUBSTRING(new.TextDecoded,5,10)=’DAFTAR’ mengecek table inbox untuk
     field TextDecoded untuk isi dar karakter ke 5 sampai 10 apakah berisi DAFTAR. Jika
     benar maka akan memasukkan ke table outbox .

    END$$ Merupakan sebuah pembatas.




                                                       2012| Parade Pelatihan CNC    62
Langkahnya    sebagai berikut:
Copy script   diatas kedalam field sql yang ada di MySQL. Tampilan seperti dibawah ini.
Langkahnya    sebagai berikut:
   1. Copy    script diatas kedalam field sql yang ada di MySQL. Tampilan seperti dibawah
      ini.




                                                             Ketikan script diatas pada field ini.




                                Berikan Delimiters $$


   2. Kemudian klik go.
   3. Coba untuk megirimkan sms ke nomor modem atau device yang anda pakai sebagai
      sms gateway.

Contoh 2: Membuat sms untuk cek nilai sesuai NIM mahasiswa.
Format-> ketik CNC<spasi>NIM
Analoginya, mahasiswa ingin melihat nilainya dengan menggunakan sms gateway. Dan
ketika tidak sesuai format akan dibalas “Maaf Format sms anda salah! Cnc_crew”.

CREATE TRIGGER cnc2
AFTER INSERT ON inbox
FOR EACH ROW BEGIN
if SUBSTRING(new.TextDecoded,1,3)=’CNC’ then
INSERT INTO
outbox ( DestinationNumber, Coding, TextDecoded, CreatorID )
VALUES ( new.SenderNumber, ‘Default_No_Compression’, (
SELECT nilai from tbl_nilai WHERE nim =
SUBSTRING(new.TextDecoded,5,13)), ’1′);
else
INSERT INTO
outbox ( DestinationNumber, Coding, TextDecoded, CreatorID )
VALUES ( new.SenderNumber, ‘Default_No_Compression’, ‘Maaf format sms
Anda salah!. Cnc_crew’, ’1′);
end if;
END$$


Jangan lupa untuk membuat         terlebih   dahulu   tbl_nilai,   kemudian   mencoba    untuk
memasukan nim dan nilai.




                                                           2012| Parade Pelatihan CNC   63
Contoh 3: Membuat sms autoreplay dengan perintah insert ke tabel.
Untuk kasus kali ini, kita kan menginputkan nilai di tbl_nilai dengan cara mengirimkan sms.
Format -> ketik INPUT#NIM#NILAI
Dengan , jika perintah format tidak sesuai maka akan mengirimkan pesan “Maaf Format
sms anda salah! Cnc_crew”.

Sebelumnya kita akan memasukkan fungsi pemecah untuk memecah sms dengan “#”
sebagai parameternya.


CREATE FUNCTION SPLIT_STR(
  x VARCHAR(255),
  delim VARCHAR(12),
  pos INT
)
RETURNS VARCHAR(255)
RETURN REPLACE(SUBSTRING(SUBSTRING_INDEX(x, delim, pos),
       LENGTH(SUBSTRING_INDEX(x, delim, pos -1)) + 1),
       delim, '');


Untuk trigger input nilainya dapat dilihat dibawah ini:

CREATE TRIGGER cnc3
AFTER INSERT ON inbox
FOR EACH ROW BEGIN

if SUBSTRING(new.TextDecoded,1,5)='INPUT' then
INSERT INTO tbl_nilai (nim,nilai)

                                                          2012| Parade Pelatihan CNC   64
VALUES
(SPLIT_STR(new.TextDecoded,'#','2'),
SPLIT_STR(new.TextDecoded,'#','3'));
INSERT INTO
outbox( DestinationNumber, Coding, TextDecoded, CreatorID )
VALUES (new.SenderNumber,
'Default_No_Compression',concat(‘Nilai’,SPLIT_STR(new.TextDecoded,'#',
'2'),' telah berhasil diinputkan '),'1');

else
INSERT INTO
outbox ( DestinationNumber, Coding, TextDecoded, CreatorID )
VALUES ( new.SenderNumber, 'Default_No_Compression', Maaf Format sms
anda salah! Cnc_crew ', '1');

end if;

END$$
Keterangan:
       SPLIT_STR(new.TextDecoded,'#','3')       Memecah Field TextDecode dengan
        parameter “#” sebagai pembatasnya, dan akan mengambil nilai pada kata ke 3.
        Misal untuk INPUT#611090013#80. Maka kata ke 3 yaitu 80.
       concat(‘Nilai’,SPLIT_STR(new.TextDecoded,'#','2'),'               telah
        berhasil diinputkan ') Concat adalah perintah untuk menggabungkan antara
        dua variabel menjadi satu bagian. Pada script ini menggabungkan TextDecoded
        yang telah dipecah sehingga hanya diambil kata ke 2 kemudian digabungkan dengan
        kalimat “telah berhasil diinputkan”.
        Contoh: INPUT<spasi>611090013<spasi>80
        Maka sistem akan replay sms dengan isi pesan:

              Nilai 611090013 telah berhasil diinputkan.




                                                           2012| Parade Pelatihan CNC   65
Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter

Contenu connexe

Tendances

Apresentação experian hitwise e-commerce brasil
Apresentação experian hitwise   e-commerce brasilApresentação experian hitwise   e-commerce brasil
Apresentação experian hitwise e-commerce brasilE-Commerce Brasil
 
EverSuite Content Management - Votre GED d'entreprise
EverSuite Content Management - Votre GED d'entrepriseEverSuite Content Management - Votre GED d'entreprise
EverSuite Content Management - Votre GED d'entrepriseEverteam
 
RethinkConn 2022!
RethinkConn 2022!RethinkConn 2022!
RethinkConn 2022!NATS
 
Goodrive10 english-manual
Goodrive10 english-manualGoodrive10 english-manual
Goodrive10 english-manualToàn Huỳnh
 
Angular Notes.pdf
Angular Notes.pdfAngular Notes.pdf
Angular Notes.pdfsagarpal60
 
Joget Workflow v5 Training Slides - Module 3 - Designing your first Process
Joget Workflow v5 Training Slides - Module 3 - Designing your first ProcessJoget Workflow v5 Training Slides - Module 3 - Designing your first Process
Joget Workflow v5 Training Slides - Module 3 - Designing your first ProcessJoget Workflow
 

Tendances (14)

Apresentação experian hitwise e-commerce brasil
Apresentação experian hitwise   e-commerce brasilApresentação experian hitwise   e-commerce brasil
Apresentação experian hitwise e-commerce brasil
 
EverSuite Content Management - Votre GED d'entreprise
EverSuite Content Management - Votre GED d'entrepriseEverSuite Content Management - Votre GED d'entreprise
EverSuite Content Management - Votre GED d'entreprise
 
An Introduction to Redux
An Introduction to ReduxAn Introduction to Redux
An Introduction to Redux
 
An Oracle ADF Introduction
An Oracle ADF IntroductionAn Oracle ADF Introduction
An Oracle ADF Introduction
 
RethinkConn 2022!
RethinkConn 2022!RethinkConn 2022!
RethinkConn 2022!
 
Goodrive10 english-manual
Goodrive10 english-manualGoodrive10 english-manual
Goodrive10 english-manual
 
Wszystko o Laravel Livewire
Wszystko o Laravel Livewire Wszystko o Laravel Livewire
Wszystko o Laravel Livewire
 
Nextjs13.pptx
Nextjs13.pptxNextjs13.pptx
Nextjs13.pptx
 
Angular Notes.pdf
Angular Notes.pdfAngular Notes.pdf
Angular Notes.pdf
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
 
NEXT.JS
NEXT.JSNEXT.JS
NEXT.JS
 
Angular
AngularAngular
Angular
 
Laravel intake 37 all days
Laravel intake 37 all daysLaravel intake 37 all days
Laravel intake 37 all days
 
Joget Workflow v5 Training Slides - Module 3 - Designing your first Process
Joget Workflow v5 Training Slides - Module 3 - Designing your first ProcessJoget Workflow v5 Training Slides - Module 3 - Designing your first Process
Joget Workflow v5 Training Slides - Module 3 - Designing your first Process
 

En vedette

Laporan Tugas Akhir - Absensi SMS Gateway
Laporan Tugas Akhir - Absensi SMS GatewayLaporan Tugas Akhir - Absensi SMS Gateway
Laporan Tugas Akhir - Absensi SMS GatewayYusuf Andrias Putra
 
Pemanfaatan json dengan mysql
Pemanfaatan json dengan mysqlPemanfaatan json dengan mysql
Pemanfaatan json dengan mysqlDermawanAdi
 
Facebook Open Stream API - Facebook Developer Garage Dhaka
Facebook Open Stream API - Facebook Developer Garage DhakaFacebook Open Stream API - Facebook Developer Garage Dhaka
Facebook Open Stream API - Facebook Developer Garage DhakaMohammad Emran Hasan
 
Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build
Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap BuildPengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build
Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap BuildWahyu Purnomo
 
Tutorial Contoh Penggunaan API Twitter
Tutorial Contoh Penggunaan API TwitterTutorial Contoh Penggunaan API Twitter
Tutorial Contoh Penggunaan API TwitterAryo Luntanglantung
 
Hitung Ongkos Kirim Menggunakan API rajaongkir.com dengan PHP+JQUERY
Hitung Ongkos Kirim Menggunakan API rajaongkir.com dengan PHP+JQUERYHitung Ongkos Kirim Menggunakan API rajaongkir.com dengan PHP+JQUERY
Hitung Ongkos Kirim Menggunakan API rajaongkir.com dengan PHP+JQUERYYusuf A.H.
 
Ebook I - membuat bot telegram dengan php
Ebook I  - membuat bot telegram dengan phpEbook I  - membuat bot telegram dengan php
Ebook I - membuat bot telegram dengan phpHasanudin H Syafaat
 
Karya tulis ilmiah SMS GATEWAY UNTUK SEKOLAH
Karya tulis ilmiah SMS GATEWAY UNTUK SEKOLAHKarya tulis ilmiah SMS GATEWAY UNTUK SEKOLAH
Karya tulis ilmiah SMS GATEWAY UNTUK SEKOLAHAchmad Sayfudin
 
Facebook Login & Open Graph Introduction
Facebook Login & Open Graph IntroductionFacebook Login & Open Graph Introduction
Facebook Login & Open Graph IntroductionEric Ping
 
Facebook graph api
Facebook graph apiFacebook graph api
Facebook graph apiFagner Moura
 
Tutorial php membuat Aplikasi Inventaris
Tutorial php membuat Aplikasi InventarisTutorial php membuat Aplikasi Inventaris
Tutorial php membuat Aplikasi InventarisDeka M Wildan
 
6 Reasons Why APIs Are Reshaping Your Business
6 Reasons Why APIs Are Reshaping Your Business6 Reasons Why APIs Are Reshaping Your Business
6 Reasons Why APIs Are Reshaping Your BusinessFabernovel
 
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaTutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaRCH_98
 

En vedette (16)

Laporan Tugas Akhir - Absensi SMS Gateway
Laporan Tugas Akhir - Absensi SMS GatewayLaporan Tugas Akhir - Absensi SMS Gateway
Laporan Tugas Akhir - Absensi SMS Gateway
 
Pemanfaatan json dengan mysql
Pemanfaatan json dengan mysqlPemanfaatan json dengan mysql
Pemanfaatan json dengan mysql
 
Pengenalan json
Pengenalan jsonPengenalan json
Pengenalan json
 
Web api
Web api Web api
Web api
 
Facebook Open Stream API - Facebook Developer Garage Dhaka
Facebook Open Stream API - Facebook Developer Garage DhakaFacebook Open Stream API - Facebook Developer Garage Dhaka
Facebook Open Stream API - Facebook Developer Garage Dhaka
 
Web API Practice Handbook
Web API Practice HandbookWeb API Practice Handbook
Web API Practice Handbook
 
Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build
Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap BuildPengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build
Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build
 
Tutorial Contoh Penggunaan API Twitter
Tutorial Contoh Penggunaan API TwitterTutorial Contoh Penggunaan API Twitter
Tutorial Contoh Penggunaan API Twitter
 
Hitung Ongkos Kirim Menggunakan API rajaongkir.com dengan PHP+JQUERY
Hitung Ongkos Kirim Menggunakan API rajaongkir.com dengan PHP+JQUERYHitung Ongkos Kirim Menggunakan API rajaongkir.com dengan PHP+JQUERY
Hitung Ongkos Kirim Menggunakan API rajaongkir.com dengan PHP+JQUERY
 
Ebook I - membuat bot telegram dengan php
Ebook I  - membuat bot telegram dengan phpEbook I  - membuat bot telegram dengan php
Ebook I - membuat bot telegram dengan php
 
Karya tulis ilmiah SMS GATEWAY UNTUK SEKOLAH
Karya tulis ilmiah SMS GATEWAY UNTUK SEKOLAHKarya tulis ilmiah SMS GATEWAY UNTUK SEKOLAH
Karya tulis ilmiah SMS GATEWAY UNTUK SEKOLAH
 
Facebook Login & Open Graph Introduction
Facebook Login & Open Graph IntroductionFacebook Login & Open Graph Introduction
Facebook Login & Open Graph Introduction
 
Facebook graph api
Facebook graph apiFacebook graph api
Facebook graph api
 
Tutorial php membuat Aplikasi Inventaris
Tutorial php membuat Aplikasi InventarisTutorial php membuat Aplikasi Inventaris
Tutorial php membuat Aplikasi Inventaris
 
6 Reasons Why APIs Are Reshaping Your Business
6 Reasons Why APIs Are Reshaping Your Business6 Reasons Why APIs Are Reshaping Your Business
6 Reasons Why APIs Are Reshaping Your Business
 
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaTutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
 

Similaire à Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter

Chapter 1 perkenalan code igniter 2.0
Chapter 1 perkenalan code igniter 2.0Chapter 1 perkenalan code igniter 2.0
Chapter 1 perkenalan code igniter 2.0Andarias Jacob Calvyn
 
Modul1 Penjelasan Mengenai Codeigniter
Modul1 Penjelasan Mengenai CodeigniterModul1 Penjelasan Mengenai Codeigniter
Modul1 Penjelasan Mengenai CodeigniterRiki Afriansyah
 
Modul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter DasarModul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter DasarRidwan Fadjar
 
Apa Itu Framework CodeIgniter?
Apa Itu Framework CodeIgniter?Apa Itu Framework CodeIgniter?
Apa Itu Framework CodeIgniter?jundi26
 
Codeigneter | Annisa Nur Fitriyani
Codeigneter | Annisa Nur FitriyaniCodeigneter | Annisa Nur Fitriyani
Codeigneter | Annisa Nur FitriyaniAnnisa Nur Fitriyani
 
Codeigniter framewrok
Codeigniter framewrokCodeigniter framewrok
Codeigniter framewrokmuamarsidik
 
Modul 05 Framework CodeIgniter.pdf
Modul 05 Framework CodeIgniter.pdfModul 05 Framework CodeIgniter.pdf
Modul 05 Framework CodeIgniter.pdfSetiya Nugroho
 
Tutorial ci
Tutorial ciTutorial ci
Tutorial ciWira Hul
 
Materi-bab1.pptx
Materi-bab1.pptxMateri-bab1.pptx
Materi-bab1.pptxAhmadFaid4
 
Workshop SuBali - CodeIgniter
Workshop SuBali - CodeIgniterWorkshop SuBali - CodeIgniter
Workshop SuBali - CodeIgniterAdi Setiawan
 
Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)Linda Lestari
 
Edwinprassetyo-1100631028-tugas1
Edwinprassetyo-1100631028-tugas1Edwinprassetyo-1100631028-tugas1
Edwinprassetyo-1100631028-tugas1Edwin Prassetyo
 
PENGENALAN CODEIGNITER
PENGENALAN CODEIGNITERPENGENALAN CODEIGNITER
PENGENALAN CODEIGNITERdenisabrian
 

Similaire à Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter (20)

Chapter 1 perkenalan code igniter 2.0
Chapter 1 perkenalan code igniter 2.0Chapter 1 perkenalan code igniter 2.0
Chapter 1 perkenalan code igniter 2.0
 
Modul1 Penjelasan Mengenai Codeigniter
Modul1 Penjelasan Mengenai CodeigniterModul1 Penjelasan Mengenai Codeigniter
Modul1 Penjelasan Mengenai Codeigniter
 
Modul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter DasarModul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter Dasar
 
Apa Itu Framework CodeIgniter?
Apa Itu Framework CodeIgniter?Apa Itu Framework CodeIgniter?
Apa Itu Framework CodeIgniter?
 
Codeigneter | Annisa Nur Fitriyani
Codeigneter | Annisa Nur FitriyaniCodeigneter | Annisa Nur Fitriyani
Codeigneter | Annisa Nur Fitriyani
 
Pengenalan Codeigniter
Pengenalan Codeigniter Pengenalan Codeigniter
Pengenalan Codeigniter
 
Codeigniter framewrok
Codeigniter framewrokCodeigniter framewrok
Codeigniter framewrok
 
Modul 05 Framework CodeIgniter.pdf
Modul 05 Framework CodeIgniter.pdfModul 05 Framework CodeIgniter.pdf
Modul 05 Framework CodeIgniter.pdf
 
Pengenalan code igniter
Pengenalan code igniterPengenalan code igniter
Pengenalan code igniter
 
Codeigniter 2
Codeigniter 2Codeigniter 2
Codeigniter 2
 
Tutorial ci
Tutorial ciTutorial ci
Tutorial ci
 
Tugas rekweb 4
Tugas rekweb 4Tugas rekweb 4
Tugas rekweb 4
 
Materi-bab1.pptx
Materi-bab1.pptxMateri-bab1.pptx
Materi-bab1.pptx
 
Ci
CiCi
Ci
 
Frame work php
Frame work phpFrame work php
Frame work php
 
Workshop SuBali - CodeIgniter
Workshop SuBali - CodeIgniterWorkshop SuBali - CodeIgniter
Workshop SuBali - CodeIgniter
 
Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)
 
Tutorial ci
Tutorial ciTutorial ci
Tutorial ci
 
Edwinprassetyo-1100631028-tugas1
Edwinprassetyo-1100631028-tugas1Edwinprassetyo-1100631028-tugas1
Edwinprassetyo-1100631028-tugas1
 
PENGENALAN CODEIGNITER
PENGENALAN CODEIGNITERPENGENALAN CODEIGNITER
PENGENALAN CODEIGNITER
 

Plus de Beni Krisbiantoro

Pembahasan Soal UKK TKJ 2017 - Paket 3
Pembahasan Soal UKK TKJ 2017 - Paket 3Pembahasan Soal UKK TKJ 2017 - Paket 3
Pembahasan Soal UKK TKJ 2017 - Paket 3Beni Krisbiantoro
 
Pembahasan Soal UKK TKJj 2017 - Paket 2
Pembahasan Soal UKK TKJj 2017 - Paket 2Pembahasan Soal UKK TKJj 2017 - Paket 2
Pembahasan Soal UKK TKJj 2017 - Paket 2Beni Krisbiantoro
 
Business Intelligence - Overview
Business Intelligence - Overview Business Intelligence - Overview
Business Intelligence - Overview Beni Krisbiantoro
 
Javascript Guide - Belajar Pemrograman JavaScript
Javascript Guide - Belajar Pemrograman JavaScriptJavascript Guide - Belajar Pemrograman JavaScript
Javascript Guide - Belajar Pemrograman JavaScriptBeni Krisbiantoro
 
Tutorial Installasi Ubuntu 11.04 untuk Webhost dengan Webmin dan Virtualmin
Tutorial Installasi Ubuntu 11.04 untuk Webhost dengan Webmin dan VirtualminTutorial Installasi Ubuntu 11.04 untuk Webhost dengan Webmin dan Virtualmin
Tutorial Installasi Ubuntu 11.04 untuk Webhost dengan Webmin dan VirtualminBeni Krisbiantoro
 
Tutorial CentOS 5 untuk Webhosting
Tutorial CentOS 5 untuk WebhostingTutorial CentOS 5 untuk Webhosting
Tutorial CentOS 5 untuk WebhostingBeni Krisbiantoro
 
Database design, implementation, and management -chapter04
Database design, implementation, and management -chapter04Database design, implementation, and management -chapter04
Database design, implementation, and management -chapter04Beni Krisbiantoro
 
Database design, implementation, and management -chapter02
Database design, implementation, and management -chapter02Database design, implementation, and management -chapter02
Database design, implementation, and management -chapter02Beni Krisbiantoro
 
Belajar PHP Framework CodeIgniter 2.x
Belajar PHP Framework CodeIgniter 2.xBelajar PHP Framework CodeIgniter 2.x
Belajar PHP Framework CodeIgniter 2.xBeni Krisbiantoro
 

Plus de Beni Krisbiantoro (13)

Pembahasan Soal UKK TKJ 2017 - Paket 3
Pembahasan Soal UKK TKJ 2017 - Paket 3Pembahasan Soal UKK TKJ 2017 - Paket 3
Pembahasan Soal UKK TKJ 2017 - Paket 3
 
Pembahasan Soal UKK TKJj 2017 - Paket 2
Pembahasan Soal UKK TKJj 2017 - Paket 2Pembahasan Soal UKK TKJj 2017 - Paket 2
Pembahasan Soal UKK TKJj 2017 - Paket 2
 
Tutorial Mikrotik Bagian 1
Tutorial Mikrotik Bagian 1Tutorial Mikrotik Bagian 1
Tutorial Mikrotik Bagian 1
 
Tutorial Mikrotik Bagian 2
Tutorial Mikrotik Bagian 2Tutorial Mikrotik Bagian 2
Tutorial Mikrotik Bagian 2
 
Business Intelligence - Overview
Business Intelligence - Overview Business Intelligence - Overview
Business Intelligence - Overview
 
Javascript Guide - Belajar Pemrograman JavaScript
Javascript Guide - Belajar Pemrograman JavaScriptJavascript Guide - Belajar Pemrograman JavaScript
Javascript Guide - Belajar Pemrograman JavaScript
 
Tutorial Installasi Ubuntu 11.04 untuk Webhost dengan Webmin dan Virtualmin
Tutorial Installasi Ubuntu 11.04 untuk Webhost dengan Webmin dan VirtualminTutorial Installasi Ubuntu 11.04 untuk Webhost dengan Webmin dan Virtualmin
Tutorial Installasi Ubuntu 11.04 untuk Webhost dengan Webmin dan Virtualmin
 
Tutorial CentOS 5 untuk Webhosting
Tutorial CentOS 5 untuk WebhostingTutorial CentOS 5 untuk Webhosting
Tutorial CentOS 5 untuk Webhosting
 
Database design, implementation, and management -chapter04
Database design, implementation, and management -chapter04Database design, implementation, and management -chapter04
Database design, implementation, and management -chapter04
 
ARP Spoofing
ARP SpoofingARP Spoofing
ARP Spoofing
 
Database design, implementation, and management -chapter02
Database design, implementation, and management -chapter02Database design, implementation, and management -chapter02
Database design, implementation, and management -chapter02
 
Belajar PHP Framework CodeIgniter 2.x
Belajar PHP Framework CodeIgniter 2.xBelajar PHP Framework CodeIgniter 2.x
Belajar PHP Framework CodeIgniter 2.x
 
VNC User Guide
VNC User GuideVNC User Guide
VNC User Guide
 

Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter

  • 1.
  • 2. Framework CI (codeigniter) o Pengertian Framework Framework adalah sekumpulan perintah atau fungsi dasar yang dapat membantu dalam menyelesaikan proses-proses yang lebih kompleks. Secara sederhana dapat diibaratkan sebagai kumpulan fungsi (libraries),maka seorang programmer tidak perlu lagi membuat fungsi-fungsi (kumpulan libraries) dari awal, programmer tinggal memanggil kumpulan library atau fungsi yang sudah ada didalam framework tersebut. Ibarat membangun rumah maka anda tidak perlu membuat semen, memotong kayu menjadi papan, mengubah batu menjadi porselen dan lain-lain. Anda cukup memilih komponen-komponen yang diperlukan sehingga dapat dikombinasikan dan dapat menjadi rumah yang indah. Dan perlu diingat, framework bukanlah peralatan/tools untuk memecahkan sebuah masalah, tetapi sebagai alat bantu. Framework hanya menjadi sebuah konstruksi dasar yang menopang sebuah konsep atau sistem yang bersifat “essential support” atau penting tapi bukan komponen utama. Beberapa keuntungan jika kita menggunakan framework: 1. Menghemat waktu pengembangan, dengan struktur dan library yang telah disediakan oleh framework maka tidak perlu untuk memikirkan hal tersebut, jadi langsung fokus ke proses inti yang sedang dikerjakan. 2. Reuse of code, dengan menggunakan framework maka pekerjaan kita akan memiliki struktur yang baku, sehingga kita dapat menggunakanya kembali di proyek-proyek lainya. 3. Bantuan Komunitas, intinya ada komunitas framework yang siap untuk membantu. Banyak sekali referensi forum untuk beberapa framework. contoh: forum.framework.web.id. 4. Kumpulan best Practice, sebuah framework merupakan kumpulan best practice yang sudah teruji. Jadi dapat meningkatkan kualitas kode kita. Saat ini telah banyak framework yang berbasis PHP, diantaranya Codeigniter, Zend Framework, Cake PHP dan lain-lain. Namun menurut berbagai sumber Codeigniter adalah salah satu framework yang memiliki banyak keunggulan dibanding yang lainya. Sampai pembuat php Rasmus Ledorf mengatakan dia menyukai codeigniter karena lebih ringan dan cepat dibandingkan framework lainya (“Because it is faster, lighter and least like a framework”). Codeigniter termasuk framework yang mudah untuk dipelajari karena kesederhanaan strukturnya dan kelengkapan dokumentasinya yang baik. Selain itu, kerapian kode dan ukuranya yang ramping membuatnya lebih cepat diakses dibandingkan dengan yang lainya. Secara umum framework menggunakan struktur MVC (Model View Controller),tujuan dengan menggunakan MVC ini, struktur kode yang dihasilkan menjadi lebih terstruktur dan memiliki standar yang jelas. Intinya MVC itu memisahkan bisnis logic(alur piker), data logic (penyimpanan data) dan presentation logic (antarmuka aplikasi) atau dengan kata yang sederhana adalah memisahkan antara desain, data, dan proses. Komponen-komponen MVC antara lain: 1. Model Model mencangkup semua proses yang terkait dengan pemanggilan struktur data baik berupa pemanggilan fungsi, input processing atau mencetak output kedalam browser. 2012| Parade Pelatihan CNC 2
  • 3. Jadi model berhubungan dengan perintah-perintah query sql untuk managemen ke database sehingga dapat ditampilkan kehalaman browser. 2. Controller Controller mencakup semua proses yang terkait dengan pemanggilan database (sebenarnya kerja dari model) dan kapsulasi proses-proses utama. Jadi bisa diibaratkan bahwa controller mempunyai peranan penting untuk dapat mengontroll view dan model. atau dapat dikatakan bahwa controller adalah penghubung antara data dan view. 3. View View mencakup semua proses yang terkait dengan layout atau tampilan output ke end user. Bisa dibilang view merupakan tempat menaruh template interface website. Didalam view hanya berisi variabel-variabel yang berisi data yang siap ditampilkan. View dapat dikatakan sebagai halaman website yang dibuat dengan menggunakan HTML dan bantuan CSS atau javaScript. Didalam view jangan pernah ada kode untuk melakukan koneksi ke basisdata. View hanya dikhususkan untuk menampilkan data-data hasil dari model dan controller. Jika digambarkan kedalam bentuk bagan. Bagan dari MVC standar sendiri seperti dibawah ini: Client Controller Model View Gambar : konsep MCV Jadi hubungan antara ketiganya yaitu. Ketika browser berinteraksi melalui controller, jika browser menginginkan untuk data maka controller akan meminta ke bagian model. Tetapi jika ingin meminta template /user interface maka controller meminta ke view. Jadi kerja controller bisa dikatakan sebagai otak dari aplikasi. o Codeigniter Codeigniter merupakan framework PHP yang diklaim menjadi salah satu framework tercepat disbanding lainya. Codeigniter bersifat opensource (gratis) dan menggunakan model metode MVC (Model View Controller),yang merupakan model konsep modern framework dengan OOP (object oriented programming) yang banyak digunakan saat ini. Codeigniter dibuat pertamakali oleh Rick Ellis yang merupakan CEO dari Ellislab. Dapat dikunjungi pada situsnya di http://www.ellislab.com. Ellislabmerupakan sebuah perusahaan yang memproduksi CMS-CMS handal. Saat ini, framework codeigniter dikembangkan oleh ExpressionEngine Development Team. Dan sekarang codeigniter telah mencapai versi 2.1.0. 2012| Parade Pelatihan CNC 3
  • 4. Melihat Arsip Codeigniter:  CodeIgniter V 2.0.3  CodeIgniter V 1.5.4  CodeIgniter V 2.0.2  CodeIgniter V 1.5.3  CodeIgniter V 2.0.1  CodeIgniter V 1.5.2  CodeIgniter V 2.0.0  CodeIgniter V 1.5.1  CodeIgniter V 1.7.3  CodeIgniter V 1.4.1  CodeIgniter V 1.7.2  CodeIgniter V 1.3.3  CodeIgniter V 1.7.1  CodeIgniter V 1.3.2  CodeIgniter V 1.7.0  CodeIgniter V 1.3.1  CodeIgniter V 1.6.3  CodeIgniter V 1.3  CodeIgniter V 1.6.2  CodeIgniter V 1.2  CodeIgniter V 1.6.1  CodeIgniter V 1.1  CodeIgniter V 1.6.0  CodeIgniter V 1.0 Perbedaan yang banyak dirasakan pengguna terhadap versi dan pengembangan codeigniter terasa sekali ketika berada di antara codeigniter versi 1 dengan versi 2. Yaitu pada script awal penulisan class. Contoh penulisan controller class untuk codeigniter 1. Controller.php <?php Class Controller extends Controller{ function index(){ echo “hello codeigniter versi1”; } } ?> //pada codeigniter versi 1 Contoh penulisan controller class untuk codeigniter 2 keatas. Controller.php <?php Class Controller extends CI_Controller{ function index(){ echo “hello codeigniter versi2”; } } ?> //pada codeigniter versi 2 Keterangan: Penulisan class diatas tidak hanya pada controller tapi penulisan di model juga menyesuaikan. Selain beda penulisan, masih banyak kelebihan-kelebihan lain yang diadopsi oleh codeigniter versi terbarunya. Bisa anda cek di codeigniter.com. 2012| Parade Pelatihan CNC 4
  • 5. o Sistem kerja Codeigniter Alur kerja dari framework codeigniter meliputi: Models Routing Security Libraries Index.php Application Helpers Caching View controller Plugins Scripts Keterangan:  Index.php merupakan controller awal untuk menginisialisasikan kebutuhan untuk menjalankan Codeigniter sendiri.  Router/Routing merupakan bagian yang menentukan kegiatan yang harus dilakukan ketika ada permintaan dari client.  Caching merupakan bagian yang mengecek apakah data sudah pernah diminta atau belum. Jika chace aktif, maka akan langsung dikirimkan ke client dengan mengabaikan alur kerja normal.  Security merupkan proses pemfilteran, agar terjamin keamananya.  Controller merupakan pengendali dari jalanya aplikasi.  View merupakan bagian yang menyajikan suatu informasi ke client sesuai dengan permintaan yang diminta (dengan melewati tahap index-controller). o Struktur Folder Codeigniter Sebelum kita melangkah ke tahap instalasi dan konfigurasi codeigniter, ada baiknya kita mengenal struktur-struktur folder /direktori pada codeigniter, susunan foldernya sebagai berikut: a. Folder Application : untuk menyimpan aplikasi yang akan dibangun  Folder Cache : untuk menyimpan data chace jika cache anda aktifkan.  Folder Config : untuk menyimpan semua file konfigurasi web.  Folder Controllers : untuk menyimpan semua file controller.  Folder Errors : template halaman untuk menampilkan error.  Folder helpers : untuk menyimpan semua file helper.  Folder hooks : untuk menyimpan semua file hooks.  Folder language : untuk menyimpan file bahasa.  Folder libraries : berisi file-file library.  Folder logs : untuk menyimpan /mencatat file log error.  Folder models : berisi file-file model yang berperan sebagai presentasi database.  Folder view : untuk menyimpan file-file view guna menyajikan informasi kepada client. File view merupakan file yang terlihat pada browser. b. Folder user_guide: berisi dokumentasi Framework Codeigniter o Library  Benchmark : digunakan untuk menghitung penggunaan memori.  Calender : digunakan untuk membuat kalender  Cart : digunakan untuk membuat cart pada took online.  Config : digunakan untuk menerima informasi konfigurasi  Email : digunakan untuk proses pengiriman email.  Encrypt : digunakan untuk proses enkripsi  Form_validation : digunakan untuk memvalidasi input masuk. 2012| Parade Pelatihan CNC 5
  • 6. Ftp : digunakan untuk proses transfer via FTP.  Image_lib : digunakan untuk manipulasi image.  Input : digunakan untuk memproses input data.  Language : digunakan untuk menggunakan (load) beberapa bahasa.  Pagination : digunakan untuk membantu proses paging.  Session : digunakan untuk mempertahankan user aktif.  Table : digunakan untuk mengegenerate table dari array.  Trackback : digunakan untuk mengirim dan menerima data trackback.  Unit_test : digunakan untuk testing  Upload : digunakan untuk membantu proses upload.  URI : digunakan membagI URL  Zip : digunakan untuk membuat arsip zip. 1.6 Tools untuk meginstalasi Codeigniter. Dalam menginstalasi codeigniter, dibutuhkan beberapa tool’s dasar yang harus dipenuhi agar codeigniter dapat kita jalankan di localhost.  Webserver Untuk menguji apakah web yang kita buat telah sesuai dengan apa yang kita mau. Maka kita membutuhkan webserver. Tapi untuk webserver biasanya menggunakan localhost. Biasanya kita cukup menginstalasi xampp. Xampp telah mencangkup apache & mysql (paket komplit).  PHP Editor Editor ini berfungsi untuk kita menuliskan skrip program yang akan kita buat. Disini kita menggunakan editor komodo edit. Keunggulan dari komodo edit ini yaitu: open source. Selain itu sangat cocok untuk pembuatan web dengan framework khususnya Codeigniter.  Framework Codeigniter Codeigniter merupakan file utama dalam membangun aplikasi berbasis codeigniter, bisa didownload di http://codeigniter.com/download 1.7 instalasi Codeigniter 1. Download file codeigniter kemudian extrak dan simpan ke xampp/htdocs. Misalkan kita download untuk CodeIgniter_2.0.3. Buka browser dan ketikan localhost/CodeIgniter_2.0.3. 2012| Parade Pelatihan CNC 6
  • 7. 2. Default jika mengetikkan localhost/CodeIgniter_2.0.3 yaitu controller welcome. Untuk mengganti file controllernya Buka file application/config/routes.php. kemudian ubah untuk controller utamanya. Maksudnya halaman yang akan menjadi default, dengan artian meskipun tidak mendiskripsikan controllernya,maka kita dapat secara otomatis menuju ke controller default. Misal kita isikan crud. Ubah pada script dibawah ini. $route['default_controller'] = "crud"; 3. Kemudian ubah file di application/config/config.php. a. Ubah pada base urlnya. Masukkan nama file dari file codeigniter yang telah kita rename namanya tadi. $config['base_url'] = 'http://localhost/ci'; b. Ubah untuk enkripsinya. Misal kita masukkan 12345. $config['encryption_key'] = '12345'; 4. Selanjutnya, jika kita akan menggunakan database yang akan menjadi mesin penyimpanan data. Maka kita harus mengubah file untuk pendiskripsian databasenya. Buka file di application/config/database.php. kemudian ubah seperti dibawah ini. $db['default']['hostname'] = 'localhost'; $db['default']['username'] = 'root'; $db['default']['password'] = ''; $db['default']['database'] = 'ci'; $db['default']['dbdriver'] = 'mysql'; $db['default']['dbprefix'] = ''; $db['default']['pconnect'] = TRUE; $db['default']['db_debug'] = TRUE; $db['default']['cache_on'] = FALSE; $db['default']['cachedir'] = ''; $db['default']['char_set'] = 'utf8'; $db['default']['dbcollat'] = 'utf8_general_ci'; $db['default']['swap_pre'] = ''; $db['default']['autoinit'] = TRUE; $db['default']['stricton'] = FALSE; Penjelasan:  Hostname : Server yang kita gunakan.  Username :Username untuk masuk ke mysql kita masing-masing. Untuk default biasanya root. o Password : Password dari akses ke mysql kita. Untuk default biasanya kosongkan saja. 2012| Parade Pelatihan CNC 7
  • 8.  Database : Merupakan nama database yang akan kita gunakan.  Dbdriver : jenis database yang kita akan gunakan. Untuk username dan password bila memiliki autentikasi sendiri masukkan sesuai dengan mysql anda. 5. Kemudian tambahkan library dan helper untuk di application/config/autoload.php. $autoload['libraries'] = array('database','table'); Keterangan:  Database : menambahkan library database jika kita akan menggunakan fungsi eksekusi script sql untuk database. Jika tidak melewati autoload untuk meload database, selain itu dapat menuliskan seperti ini . $this->load->database(); $autoload['helper'] = array('url','html','form'); Penanganan Database Sebagai pembahasan awal sebelum kita melangkah kepada operasi CRUD, alangkah baiknya kita mengetahui hal paling mendasar pada penanganan query/ database dalam codeigniter. Sehingga kita tidak hanya mengenal query PHP classis dan MySQL, misalnya SELECT * FROM inbox a. Pengganti SELECT Sebenarnya dalam Codeignter juga bisa menggunakan full perintah SELECT, berikut contoh penggunaanya: $this->db->query(‘SELECT * FROM inbox’); Namun dengan codeigniter, kita dapat meringkasnya menjadi demikian: $this->db->get(‘inbox’); b. Pengganti INSERT Fungsi insert berguna pada saat kita ingin menambahkan sebuah data ke dalam database. Berikut contoh penggunaan pada query SQL biasa: INSERT INTO inbox (…) values (…); Dalam codeigniter, kita dapat menggunakan kode berikut: $this->db->insert(‘inbox’,$data) 2012| Parade Pelatihan CNC 8
  • 9. c. Pengganti UPDATE Update berfungsi apabila kita ingin mengubah suatu data, Pada query standar, salah satu bentuk contoh penggunaanya adalah sebagai berikut: UPDATE pbk set Name=’bambang’ where ID=’1’; Dalam codeigniter, kita dapat menggunakan kode berikut: $this->db->where(‘ID’,’1’); $this->db->update(‘pbk’,$data); d. Pengganti Delete Delete berfungsi utnuk menghapus suatu data Berikut contoh penggunaanya pada query biasa: DELETE from pbk where ID=’1’; Dan berikut contoh penggunaanya pada penanganan database Codeigniter: $this->db->where(‘ID’,’1’); $this->db->delete(‘pbk’); e. Pengganti Like Perintah Like biasanya digunakan untuk melakukan pencarian data. Dalam query biasa dapat dituliskan berikut: SELECT * from pbk where nama like ‘%bambang%’; Jika kita menggunakan Codeigniter, dapat dituliskan skrip sebagai berikut: $this->db->like(‘nama’,’bambang’); $this->db->get(‘pbk’); f. Pengganti Group By Dalam query biasa dapat dituliskan berikut: SELECT * from pbk GROUP BY GroupID; Jika kita menggunakan Codeigniter, dapat dituliskan skrip sebagai berikut: $this->db->groupby(‘GroupID’); $this->db->get(‘pbk’); 2012| Parade Pelatihan CNC 9
  • 10. g. Pengganti Order By Dalam query biasa dapat dituliskan berikut: SELECT * from pbk ORDER BY Nama; Jika kita menggunakan Codeigniter, dapat dituliskan skrip sebagai berikut: $this->db->order_by(‘nama’); $this->db->get(‘pbk’); 2012| Parade Pelatihan CNC 10
  • 11. MATERI CRUD (create,read,update,delete) 1. JQUERY - definisi dan sejarah singkat Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Hal yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. - Beberapa kelebihan JQUERY Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut: 1. Kemudahan mengakses elemen-elemen HTML 2. Memanipulasi elemen HTML 3. Memanipulasi CSS 4. Penanganan event HTML 5. Efek-efek javascript dan animasi 6. Modifikasi HTML DOM 7. AJAX 8. Menyederhanakan kode javascript lainnya Beberapa Jquery yang akan digunakan pada pelatihan kali ini adalah accordion, autocomplete,dialog box dan validation. Jquery Accordion Jquery ini membuat sebuah tampilan seperti accordion. Dengan jquery ini kita dapat membuat sebuah menu ataupun tampilan utama sekalipun. Di dalam pelatihan kali ini jquery ini digunakan sebagai menu. Berikut tampilan yang ingin kita buat. Langsung saja kita ke cara pembuatan. Langkah-langkahnya adalah sebagai berikut. download Jquerynya.jquery accordion dapat di download di http://jqueryui.com/download. untuk selebihnya dapat dilihat di gambar berikut. 2012| Parade Pelatihan CNC 11
  • 12. Centang bagian accordion lalu klik download. 1. Setelah mendownload. Downloadan akan berupa file RAR. Coba buka maka isi dari file downloadan akan sebagai berikut. 2. coba kita buka index.html. maka kita akan melihat tampilan. 3. coba kita buka file index.html tadi dengan menggunakan text editor. Dibagian head html kita akan melihat script-script jquery yang disertakan di halaman tersebut. Jadi dalam setiap pembuatan accordion skrip-skrip tsb harus disertakan <link type="text/css" href="css/ui-lightness/jquery-ui- 1.8.19.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery- 1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui- 1.8.19.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Accordion $("#accordion").accordion({ header: "h3" }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); </script> 2012| Parade Pelatihan CNC 12
  • 13. Dapat kita lihat juga disitu ada pendeklarasian fungsi akordion. Fungsi akordion berjalan apabila kita menggunakan id accordion dan pembentukan header bisa dilakukan dengan tag <h3>. Hal ini akan diperjelas pada gambar berikut. <div id="accordion"> <div> <h3><a href="#">First</a></h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </div> <div> <h3><a href="#">Second</a></h3> <div>Phasellus mattis tincidunt nibh.</div> </div> <div> <h3><a href="#">Third</a></h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> </div> Pada line 43 tag <div> menggunakan id accordion maka fungsi accordion dimulai. Lalu untuk membuat sebuah baris accordion dimulai dengan tag <div>.kemudian untuk membuat head dari accordion digunakan tag <h3>.dan isi konten dapat dibuat dengan menulis tag <div> lagi setelah tag <h3>. 4. Sekarang untuk membuat tampilan accordion seperti yang kita inginkan yang perlu kita lakukan adalah membuka halaman cssnya.mengapa? karena pengaturan tampilan jquery semua ada disitu. Kita buka jquery-ui.custom.css. langsung saja untuk membuat sudut accordion tidak melingkar lihat ke bagian misc.visual. /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { - moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { - moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { - moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left- radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right- radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom- right-radius: 4px; } 2012| Parade Pelatihan CNC 13
  • 14. 5. Di gambar tersebut ada bagian corner radius. Di bagian inilah yang mengatur sudut accordion melengkung atau tidak. Nah sekarang rubah skrip tersebut menjadi seperti dibawah ini. /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner- br { } Dengan skrip diatas maka sudut accordion tidak melengkung lagi. Nah sekarang untuk mengatur ukuran lebar dari accordion dapat dilihat pada gambar berikut. */ /* IE/Win - Fix animation bug - #4615 */ .ui-accordion { width: 20%; } Pada line 297 disitu ada width. Nah silahkan ganti angkanya sesuai dengan yang diinginkan. Setelah itu tampilan akan berubah menjadi seperti yang diinginkan. Integrasi Jquery Accordion ke dalam Codeigniter Untuk mengintegrasikan accordion ke dalam codeigniter kita harus mengerti dulu konsep MVC dari codeigniter (dijelaskan sebelum ini). Nah jadi langsung kita coba mengaplikasikan langsung. Berikut langkah-langkahnya : 1. Pertama-tama kita masukan file tampilan accordion (misalkan seperti index.html diatas) ke dalam folder view dalam folder codeigniter. Nah kalo yang kita liat diatas file yang merupakan file tempilan accordion adalah akor.php. 2012| Parade Pelatihan CNC 14
  • 15. 2. Selanjutnya, jquery accordion memiliki file-file js dan css yang harus disertakan nah sekarang copykan file-file tersebut ke folder sesuai base_url yang ada di config. perhatikan gambar di bawah ini. */ $config['base_url'] = 'http://localhost/CI'; /* Gambar diatas adalah base_url yang telah ditetapkan. Silahkan sesuaikan dengan nama folder masing-masing.nah sekarang copykan file-file yang diperlukan. Lihat gambar diatas, saya sudah menyimpan file saya sesuai dengan base_url yang saya gunakan. 3. Nah sekarang, kita tinggal memanggil accordion kita melalui controller yang kita gunakan. Lihat gambar dibawah ini. public function index() { $this->load->view('akor'); } Pada tampilan dapat kita lihat. Kita akan me-load file tampilan yaitu file akor.php. terakhir berhubung controller yang saya gunakan sudah menjadi controller default langsung saja kita ketikan url Localhost/ci Setelah itu maka akan tampilan akan muncul seperti di bawah ini. 2012| Parade Pelatihan CNC 15
  • 16. 2. CRUD Pada tahap ini, kita akan membuat tampilan inbox yang dapat kita lihat seperti gambar dibawah ini. Fungsionalitasnya sendiri, inbox dapat melihat pesan masuk, melakukan delete dan melakukan replay. 1. Untuk dapat kita klik pada menunya kita menambahkan alamat link pada panel menunya <div> <h3><a href="#">Folder</a></h3> <div> <li><a href="<?php echo site_url('crud/index'); ?>" style="text-decoration: none;" >Inbox</a></li><br/> <li><a href="<?php echo site_url('crud/sentitems'); ?>" style="text-decoration: none;" >Sent Item</a></li> </div> </div> Keterangan: Menambahkan alamat href untuk inbox yaitu dengan menambahkan href="<?php echo site_url('crud/index'); ?>" artinya jika diklik akan beralih ke controller crud dengan function index(). 2. Membuat controller crud.php dengan menambahkan function index(). function index() //untuk menampilkan form awal yaitu form tambah data cd { $this->load->database(); $this->load->library('pagination'); $config= array( 'base_url'=> site_url().'/crud/index/', 'total_rows'=>$this->db->count_all('inbox'), 'per_page'=>5, 'uri_segment' => 3 ); $this->pagination->initialize($config); $data['pagination']=$this->pagination->create_links(); $data['inbox_row']=$this->crud_model- 2012| Parade Pelatihan CNC 16
  • 17. >get_read_datainbox($config['per_page'],$this->uri->segment(3)); $data['cd'] = ''; $this->load->view('crud_view', $data); } Keterangan:  $this->load->library('pagination'); Script ini digunakan untuk memanggil library pagination yang nantinya kita fungsikan sebagai cara untuk membuat paging di halaman inboxnya. Karena tidak mungkin kita menampilkan semua inbox kedalam halaman web, jadi kita perlu menggunakan paging.  'total_rows'=>$this->db->count_all('inbox') Untuk mengitung berapa banyak jumlah inbox pada tabel database.  'per_page'=>5 Menampilkan 5 pesan inbox pada setiap kali halaman paging.  $data['inbox_row']=$this>crud_model>get_read_datainbox($con fig['per_page'],$this->uri->segment(3)); Untuk mengambil data ke model yaitu crud_model pada function get_read_datainbox.  $this->load->view('crud_view', $data); Kemudian mengirimkanya ke view yaitu crud_view. 3. Karena kita ada function yang menuju ke model yaitu di crud_model.php. Maka kita membuat function tersebut. function get_read_datainbox($limit, $uri){ $query= $this->db->get('inbox',$limit, $uri); return $query; } 4. Setelah itu kita lakukan eksekusi tampilan pada folder views pada crud_view.php <div class="right_content"> <table border="0" width="100%" cellpadding="0" cellspacing="0" id="inbox-table"> <tr id="head"> <td id="no">No</td> <td id="judul" align="center">Text Message</td> <td id="kategori">Pengirim</td> <td id="harga">Date</td> <td id="action">&nbsp;</td> </tr> <?php if ( !empty($inbox_row) ) { $no = 1; foreach ($inbox_row->result() as $row) { ?> <tr id="row"> <td id="no"><?php echo $no;?></td> <td id="judul"><?php echo $row->TextDecoded;?></td> 2012| Parade Pelatihan CNC 17
  • 18. <td id="kategori"><?php echo $row->SenderNumber;?></td> <td id="harga"><?php echo $row->ReceivingDateTime;?></td> <td id="action"> <a href="#" onclick="return confirm('Are you sure?');"><img src="<?php echo base_url(); ?>/images/delete_icon.gif"></a>| <a href="#"><img src="<?php echo base_url(); ?>/images/replay.gif"></a> </td> </tr> <?php $no++; } } else { ?> <tr id="row"> <td colspan="6" align="center">EMPTY</td> </tr> <?php } ?> </table> <?php echo $pagination; ?> </div> Keterangan:  if ( !empty($inbox_row) ) { }else { <tr id="row"> <td colspan="6" align="center">EMPTY</td> </tr>} Jika $inbox_row kosong maka akan menampilkan kata empty. Maka if else disini akan sangat penting ketika data inbox tidak ada dalam database.  foreach ($inbox_row->result() as $row) Seperti perulangan,sehingga nilai $inbox_row akan dijadikan sebuah array $row.  <td id="no"><?php echo $no;?></td> Menampilkan variabel nilainya.  <?php echo $row->TextDecoded;?> Menampilkan nilai dari $row sesuai dengan field databasenya yaitu ketika fieldnya TextDecoded. Begitu juga dengan nilai yang lain, intinya menyesuaikan database  <?php echo $pagination; ?> Menampilkan page pagingnya Jika sudah maka kita dapat menampilkan inbox seperti berikut, akan tetapi icon delete dan editnya belum bisa untuk eksekusinya. 2012| Parade Pelatihan CNC 18
  • 19. 5. Selanjutnya kita mengeksekusi untuk icon deletenya. Tahap awal berikan href untuk linknya seperti berikut: <a href="<?php echo site_url('crud/delete/'.$row->ID);?>" onclick="return confirm('Are you sure?');"><img src="<?php echo base_url(); ?>/images/delete_icon.gif"></a> Keterangan: 'crud/delete/'.$row->ID nantinya tujuan eksekusi ke controller crud dengan functionya delete() dengan membawa variabel ID. 6. Menambahkan function ke controller crud.php function delete() //untuk menghapus inbox { $kode = $this->security->xss_clean($this->uri- >segment(3)); $result = $this->crud_model->get_data_inbox($kode); if ($result == null) { redirect('crud'); } else { $delete = $this->crud_model->delete_data_inbox($kode); if ($delete) $this->session->set_flashdata('message', 'Data deleted!'); else $this->session->set_flashdata('message', 'Failed to delete data!'); redirect('crud'); } } Keterangan:  $result = $this->crud_model->get_data_inbox($kode); perintah untuk mengeksekusi ke database dengan melewati crud_mode.php. nama functionya get_data_inbox($kode). $kode merupakan parameter variabel yang akan digunakan dalam function tersebut. Jika data yang akan dihapus ada, maka menambahakan juga function delete_data_inbox($kode) ke dalam crud_model.php yang tujuanya untuk eksekusi delete. 2012| Parade Pelatihan CNC 19
  • 20. 7. Menambahkan function delete_data_inbox() ke crud_model.php function get_data_inbox($kode) { $this->db->where('ID', $kode); $query = $this->db->get('inbox'); if($query->num_rows() > 0){ return $query->row(); } else{ return null; } } function delete_data_inbox($kode) //untuk mengambil record berdasarkan kodenya { $this->db->where('ID', $kode); $this->db->delete('sentitems'); if($this->db->affected_rows() > 0){ return true; } else{ return false; } } Kemudian lakukan klik ikon delete sehingga akan tampil seperti berikut: Setelah klik ok maka pesan inbox akan terhapus, yang sebelumnya berjumlah 4 menjadi 3 2012| Parade Pelatihan CNC 20
  • 21. 3. Form Dialog box Dialog box adalah plugin dari J-query, yaitu sebuah kotak dialok yang didalamnya dapat kita sesuaikan dengan content apa saja yang kita mau. Kotak dialog ini bersifat pop- up sehingga user yang melihat web kita akan lebih terasa nyaman, Dalam pelatihan kali ini, kita akan mempelajari tentang Form Dialog Box dalam Code Igniter. Dialog box yang kita pasang ini akan kita konfigurasikan dengan fungsi validate dan fungsi auto-complete. Pada dialog box ini, kita hanya berkutat di dalam file crud_view, pertama kita akan membuat form dialog box yang berguna untuk me Replay message, yang harus kita lakukan adalah persiapkan file berikut: - jquery.min.js untuk J-query nya dan disimpan di dalam folder js - jquery-ui.min.js untuk J-query lanjutannya dan disimpan di dalam folder js - untuk CSS kita menggunakan css yang sama dengan Acordion tabs kemudian kita tambahkan id untuk dapat mengeksekusi perintah tersebut. Tambahan file tersebut kita pasang pada file crud_view.php <a href="#" onclick="replay(<?php echo $row->SenderNumber; ?>);"><img src="<?php echo base_url(); ?>/images/replay.gif"></a></td> Setelah itu, kita akan membuat isi dari Form Dialog box. <div id="replay-form" title="replay message"> <fieldset> <?php $attributes=array('name' => "fmessage"); echo form_open("user/...",$attributes); ?> <label for="hp">No Handphone</label> <?php echo form_input('value','','id="id_tujuan"'); ?><span id="hp_verify" class="verify"></span><br> <label for="message">Message</label> <textarea name="textmessage" onKeyUp="Hitung()"maxlength="160" id="alamat" rows="5" cols="55" > </textarea> </br><div id="maxkarakter"> 160 karakter </div></br> <input type=submit name=ok id="tombol3" align=left value="send message" /> <?php echo form_close(); ?> </fieldset> </div> 2012| Parade Pelatihan CNC 21
  • 22. Setelah kita membuat isi untuk form dialog boxnya, sekarang kita membuat sciprt untuk bisa menjalankan fungsi dari Form Dialog boxnya, script ini di tulis dalam tag <head></head> <script> $(function() { $( "#dialog:ui-dialog" ).dialog( "destroy" ); $( "#replay-form" ).dialog({ autoOpen: false, height: 360, width: 400, modal: true, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#message-form" ).dialog({ autoOpen: false, height: 300, width: 400, modal: true, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#new-message" ) .click(function() { $( "#message-form" ).dialog( "open" ); }); $( "#tombol2" ) .button() ; $( "#tombol1" ) .button() ; }); </script> Kita buat function lagi function replay(i){ var id = i; $("#id_tujuan").val(id); $( "#replay-form" ).dialog( "open" ); } 2012| Parade Pelatihan CNC 22
  • 23. Setelah kita membuat script untuk memanggil dialog box tadi, kita membuat script dalam tag <style></style> <style> label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .verify { margin-top: -35px; margin-left: 340px; position: absolute; width: 16px; height: 16px; } </style> Setelah kita membuat replay message, kita akan membuat create-new-message. Yang harus kita lakukan adalah buat script dulu untuk memanggil fungsi new-message. Script ini kita tuliskan di dalam acordion tabs, <div> <h3 ><a href="#">New Message</a></h3> <div><li><a href="#" style="text-decoration: none;" id="new-message">Compose</a></li> </div> </div> Setelah itu, kita membuat isi dari dialog box yang akan kita tampilkan <div id="message-form" title="Create new message"> <fieldset> <?php echo form_open("user/..."); ?> <label for="hp">No Handphone</label> <label for="message">Message</label> <textarea name="textmessage" id="alamat" rows="5" cols="55" > </textarea> <input type=submit name=ok id="tombol2" align=left value="send message /> <?php echo form_close(); ?> </fieldset> </div> Setelah itu, kita tidak perlu membuat file function lagi untuk create new message ini, karena function dialog box sudah kita definisikan dia atas. 2012| Parade Pelatihan CNC 23
  • 24. FORM VALIDATION Validasi form adalah sebuah proses untuk memeriksa apakah suatu nilai yang diinputkan itu valid atau tidak. Jika valid, maka proses akan dilanjutkan, jika tidak valid maka proses tidak akan dilanjutkan. Tujuan dari validasi ini adalah untuk memperkecil kesalahan user pada saat input data. Ada 2 jenis validasi form, yaitu client side validation dan server side validation. Apa bedanya? Client side validation adalah validasi yang dikerjakan disisi pengguna, jadi user tidak perlu submit terlebih dahulu untuk mengetahui data yang diinputkan sudah valid atau belum. Sedangkan server side validation adalah validasi disisi server, jadi user akan mengetahui bahwa data yang diinputkan salah ketika user sudah mengklik tombol submit. Dalam pelatihan ini, kita akan menggunakan dua jenis validasi tersebut. Client side validation akan digunakan dalam form add contact dan compose message. Sedangkan server side validation akan digunakan dalam form login. Untuk client side validation kita akan menggunakan Jquery validation, yaitu sebuah plugin jquery yang berfungsi untuk mempermudah dalam validasi form client side. PANEL LOGIN Login merupakan suatu gerbang dimana kita sebagai user atau admin dapat mengakses suatu private area yang mempunyai hak-hak tertentu. Dalam aksi login saat ini, kita akan menggunakan server side validation. Jadi pengecekan valid atau tidaknya akun tersebut berada disisi server. Berikut lebih jelasnya :  Buat tampilan login di direktori views dengan nama login.php <html> <head> <title>CRUD CodeIgniter</title> <link rel="stylesheet" href="<?php echo base_url();?>css/style.css" type="text/css" /> </head> <body> <div id="login_container"> <h1>Panel Login</h1> <div id="form_login"> <div id="login_error_message"><?php echo 2012| Parade Pelatihan CNC 24
  • 25. validation_errors();?></div> <?php echo form_open('verifikasi_login'); ?> <div id="field_login"> <span class="label">Username</span> <input type="text" name="username" value="username" onblur="if (this.value=='') { this.value='username'; }" onfocus="if (this.value=='username') { this.value=''; }" /> </div> <div id="field_login"> <span class="label">Password</span> <input type="password" name="password" value="**********" onblur="if (this.value=='') { this.value='**********'; }" onfocus="if (this.value=='**********') { this.value=''; }"/> </div> <div id="field"> <span class="label">&nbsp;</span> <input type="submit" id="submit" value="Submit"/> </div> <?php echo form_close(); ?> </div> <div id="login_footer"> Copyright &copy; cnc laboratory </div> </div> </body> </html>  Buat controller dengan nama verifikasi_login.php <?php class Verifikasi_login extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('crud_model','',TRUE); } function index() { $this->load->library('form_validation'); $this->form_validation->set_rules('username', 'Username', 'trim|required|xss_clean'); $this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|callback_check_database'); if($this->form_validation->run() == FALSE) { $this->load->view('login'); } else { redirect('crud', 'refresh'); } } function check_database($password) 2012| Parade Pelatihan CNC 25
  • 26. { $username = $this->input->post('username'); $result = $this->crud_model->login($username, $password); if($result) { $sess_array = array(); foreach($result as $row) { $sess_array = array( 'id_user' => $row->id_user, 'username' => $row->username ); $this->session->set_userdata('logged_in', $sess_array); } return TRUE; } else { $this->form_validation->set_message('check_database', 'Invalid username or password'); return false; } } } ?>  Tambahkan/buat models dengan nama crud_model.php <?php class Crud_model extends CI_Model { private $table_name; public function __construct() { parent::__construct(); $this->table_name = 'cd'; } function login($username,$password) { $this->db->select('id_user, username, password'); $this->db->from('user'); $this->db->where('username =' ."'".$username."'"); $this->db->where('password =' ."'".MD5($password)."'"); $this->db->limit(1); $query= $this->db->get(); if($query->num_rows() ==1) { return $query->result(); }else{ return false; } } ?> PANEL ADD CONTACT 2012| Parade Pelatihan CNC 26
  • 27. Add contact merupakan suatu menu form yang digunakan untuk menambahkan data ke dalam phonebook. Dalam form ini kita akan menggunakan clientside validation, jadi sebelum user ‘submit’, user dapat memastikan apakah data yang akan dimasukkan itu valid atau tidak. Berikut penjelasannya : Dalam validasi ini kita mengecek apakah phonebook yang akan ditambahkan sudah ada dalam database atau belum. Ketika kita masukkan nama, dan nama tersebut valid maka akan muncul checklist yang menunjukkan bahwa nama tersebut belum terdaftar di database. Namun, ketika kita memasukkan nomor handphone dan muncul tanda ‘cross’ (gambar kiri) itu berarti data nomor tersebut sudah terdaftar di database. Data yang benar- benar valid adalah jika field nama dan no. Handphone terdapat tanda checklist (gambar kanan). Berikut source code nya :  Tambahkan sintak javascript pada <head> crud_view.php <script type="text/javascript"> $(document).ready(function(){ $("#user_name").keyup(function(){ if($("#user_name").val().length >= 4) { $.ajax({ type: "POST", url: "<?php echo base_url();?>index.php/user/check_user", data: "name="+$("#user_name").val(), success: function(msg){ if(msg=="true") { $("#usr_verify").css({ "background-image": "url('<?php echo base_url();?>images/yes.png')" }); } else { $("#usr_verify").css({ "background-image": "url('<?php echo base_url();?>images/no.png')" }); } } }); } else 2012| Parade Pelatihan CNC 27
  • 28. { $("#usr_verify").css({ "background-image": "url('<?php echo base_url();?>images/no.png')" }); } }); $("#hp").keyup(function(){ if($("#hp").val().length >=10) { $.ajax({ type: "POST", url: "<?php echo base_url();?>index.php/user/check_nomer", data: "hp="+$("#hp").val(), success: function(msg){ if(msg=="true") { $("#hp_verify").css({ "background-image": "url('<?php echo base_url();?>images/yes.png')" }); } else { $("#hp_verify").css({ "background-image": "url('<?php echo base_url();?>images/no.png')" }); } } }); } else { $("#hp_verify").css({ "background-image": "url('<?php echo base_url();?>images/no.png')" }); } }); }); function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } </script>  Buat controller dengan nama user.php <?php public function check_user() { $usr=$this->input->post('name'); $result=$this->user_model->check_user_exist($usr); if($result) 2012| Parade Pelatihan CNC 28
  • 29. { echo "false"; } else{ echo "true"; } } public function check_nomer() { $hp=$this->input->post('hp'); $result=$this->user_model->check_contact_exist($hp); if($result) { echo "false"; } else{ echo "true"; } } ?>  Buat model dengan nama user_model.php <?php public function check_user_exist($usr) { $this->db->where("Name",$usr); $query=$this->db->get("pbk"); if($query->num_rows()>0) { return true; } else { return false; } } public function check_contact_exist($hp) { $this->db->where("Number",$hp); $query=$this->db->get("pbk"); if($query->num_rows()>0) { return true; } else { return false; } } ?>  Untuk menampilkan icon validasi, pada form add contact tambahkan/ubah menjadi sebagai berikut. (Dalam file crud_view.php) 2012| Parade Pelatihan CNC 29
  • 30. <div id="dialog-form" title="Add Contact"> <p class="validateTips"><?php echo validation_errors('<p class="error">'); ?></p> <fieldset> <?php echo form_open("user/registration"); ?> <label for="name">Nama</label> <input type="text" id="user_name" name="user_name" value="<?php echo set_value('user_name'); ?>" class="text ui-widget- content ui-corner-all" /> <div id="usr_verify" class="verify"></div> <label for="hp">No Handphone</label> <input type="text" id="hp" onkeypress="return isNumberKey(event)" name="hp" value="<?php echo set_value('hp'); ?>" class="text ui-widget-content ui-corner-all" /> <span id="hp_verify" class="verify"></span> <input type=submit name=ok id="tombol1" align=left value="create account" /> <?php echo form_close(); ?> </fieldset> </div>  Note : jangan lupa copy paste ‘no.PNG’ dan ‘yes.PNG’ ke direktori image !!!  Field no.handphone hanya bisa diisi dengan format angka, field ini menjalankan function isNumberKey() javascript yang telah ditambahkan pada <head> sebelumnya. PANEL NEW MESSAGE Pada panel ini akan terdapat 2 field yaitu nomor handphone dan message. Banyak karakter pada field message dibatasi sebanyak 160 karakter tiap SMS. Dan untuk field nomor handphone akan menggunakan fitur autocomplete (autocomplete akan dibahas di bab selanjutnya). Berikut source code nya :  Tambahkan sintak javascript pada <head> crud_view.php <script language='javascript'> 2012| Parade Pelatihan CNC 30
  • 31. function Hitung(){ var curText = document.fmessage.textmessage.value.length; var maxText = 160; var sisa = maxText - curText; var isi = document.getElementById('maxkarakter'); isi.innerHTML = sisa + ' karakter'; } </script>  Untuk menghitung mundur jumlah karakter yang dituliskan, pada form ‘create new message’ tambahkan sintak sebagai berikut : <div id="message-form" title="Create new message"> <p class="validateTips"><?php echo validation_errors('<p class="error">'); ?></p> <fieldset> <?php $attributes=array('name' => "fmessage"); echo form_open("user/sendmessage",$attributes); ?> <label for="hp">No Handphone</label> <?php echo form_input('value','','id="id_kontak"');?> <span id="hp_verify" class="verify"></span><br> <label for="message">Message</label> <textarea name="textmessage" onKeyUp="Hitung()" maxlength="160" id="alamat" rows="5" cols="55" > </textarea> </br><div id="maxkarakter"> 160 karakter </div></br> <input type=submit name=ok id="tombol2" align=left value="send message /> <?php echo form_close(); ?> </fieldset> </div>  Note : ketika karakter message menunjukkan ‘0 karakter’, maka user tidak akan bisa menambahkan karakter lagi.  Tambahkan sintak berikut pada controller user.php public function sendmessage() { $this->user_model->send_message(); redirect('crud'); }  Tambahkan sintak berikut pada model user_model.php public function send_message() { $data=array( 'DestinationNumber'=>$this->input->post('nomer'), 'Coding'=>'Default_No_Compression', 'TextDecoded'=>$this->input->post('textmessage'), 'CreatorID'=>'1' ); $this->db->insert('outbox',$data); } 2012| Parade Pelatihan CNC 31
  • 32. PANEL REPLY MESSAGE Panel ini digunakan untuk membalas SMS dari inbox yang masuk. Isi fieldnya sama dengan new message, namun untuk nomer handphone akan secara otomasi terisi dengan nomer tujuan dari yang SMS yang masuk. Berikut lebih jelasnya :  Tambahkan sintak berikut ke dalam crud_view.php <div id="replay-form" title="replay message"> <fieldset> <?php $attributes=array('name' => "freply"); echo form_open("user/sendmessage",$attributes); ?> <label for="hp">No Handphone</label> <input type="text" id="id_tujuan" name="nomer"> <span id="hp_verify" class="verify"></span><br> <label for="message">Message</label> <textarea name="textmessage" onKeyUp="Hitung2()" maxlength="160" id="alamat" rows="5" cols="55" > </textarea> </br><div id="maxreply"> 160 karakter </div></br> <input type=submit name=ok id="tombol3" align=left value="send message" /> <?php echo form_close(); ?> </fieldset> </div>  Untuk menghitung mundur jumlah karakter reply, tambahkan sintak berikut ke <head> crud_view.php function Hitung2(){ var curText = document.freply.textmessage.value.length; var maxText = 160; var sisa = maxText - curText; var isi = document.getElementById('maxreply'); isi.innerHTML = sisa + ' karakter'; 2012| Parade Pelatihan CNC 32
  • 33. }  Agar dapat membawa nomer handphone dari pengirim, maka tambahkan sintak berikut pada anchor reply di crud_view.php <a href="#" onclick="replay(<?php echo $row->SenderNumber; ?>);"><img src="<?php echo base_url(); ?>/images/replay.gif"></a>  Dan tambahkan function berikut pada <head> crud_view.php function replay(i){ var id = i; $("#id_tujuan").val(id); $( "#replay-form" ).dialog( "open" ) } //tambahkan pada function dialog box sebelumnya $( "#replay-form" ).dialog({ autoOpen: false, height: 360, width: 400, modal: true, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#tombol3" ) .button() ; //akhir penambahan pada dialog box  Untuk proses pengiriman, aksi dari controller dan model sama dengan create new message diatas. Maka tidak perlu kita buat lagi  4. AutoComplete AutoComplete dapat memudahkan kita dalam mencari data yang kita inginkan,misalnya dalam kasus pencarian. Ketika kita mengetikkan 1 karakter maka seluruh data yang 2012| Parade Pelatihan CNC 33
  • 34. mengandung awalan karakter yang ditampilkan. Mungkin jika Anda sering searching menggunakan Google, fasilitas ini pasti tidak asing lagi. Hal-hal yang diperlukan pertama adalah persiapkan sebuah tabel yang berisi data nomor handphone dan nama orang yang akan kita tuju. Adapun spesifikasinya sebagai berikut : Dengan syarat ID sebagai primary key, dan di autoincrement-kan. Selanjutnya isi data pada tabel diatas secara manual melalui tab INSERT di phpmyadmin. Contoh data bisa dilihat sebagai berikut: Tambahkan Script Model berikut pada model crud_model.php yang telah kita buat sebelumnya : <?php function lookup($keyword){ $this->db->select('*')->from('pbk'); $this->db->like('Number',$keyword,'after'); $query = $this->db->get(); return $query->result(); } ?> Langkah selanjutnya membuat controller untuk autocomplete yang akan kita buat. Tambahkan script berikut pada controller yang telah kita buat sebelumnya. Bernama crud.php di dalam folder application/controllers. Scriptnya seperti berikut : <?php function lookup(){ // process posted form data (the requested items like nomor) $keyword = $this->input->post('term'); $data['response'] = 'false'; //Set default response $query = $this->crud_model->lookup($keyword); //Search DB if( ! empty($query) ) 2012| Parade Pelatihan CNC 34
  • 35. { $data['response'] = 'true'; //Set response $data['message'] = array(); //Create array foreach( $query as $row ) { $data['message'][] = array( 'id'=>$row-> ID, 'value' => $row->Number, '' ); //Menambahkan row ke suatu array } } if('IS_AJAX') { echo json_encode($data); //echo json string if ajax request } else { $this->load->view('autocomplete/index',$data); //Load html view of search results } } ?> Setelah selesai, langkah terakhir adalah membuat view nya, sisipkan script berikut di dalam view yang telah kita buat sebelumnya, bernama crud_view.php . <script type="text/javascript"> $(this).ready( function() { $("#id_kontak").autocomplete({ minLength: 1, source: function(req, add){ $.ajax({ url: "<?php echo base_url(); ?>index.php/crud/lookup", dataType: 'json', type: 'POST', data: req, success: function(data){ if(data.response =="true"){ add(data.message); } }, }); }, select: 2012| Parade Pelatihan CNC 35
  • 36. function(event, ui) { $("#result").append( "<li>"+ ui.item.nama + "</li>" ); }, }); }); </script> <style> /* Autocomplete ----------------------------------*/ .ui-autocomplete { position: absolute; cursor: default; } .ui-autocomplete-loading { background: white url('<?php echo base_url();?>/jquery/images/ui- anim_basic_16x16.gif') right center no-repeat; }*/ /* workarounds */ * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ /* Menu ----------------------------------*/ .ui-menu { list-style:none; padding: 2px; margin: 0; display:block; } .ui-menu .ui-menu { margin-top: -3px; } .ui-menu .ui-menu-item { margin:0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; font-size:80%; } .ui-menu .ui-menu-item a { text-decoration:none; display:block; padding:.2em .4em; line-height:1.5; zoom:1; } .ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; 2012| Parade Pelatihan CNC 36
  • 37. margin: -1px; } </style> </head> <body> <!-- mulai dialog-form nya --> <div id="dialog-form" title="New Message"> <p class="validateTips">All form fields are required.</p> <fieldset> <form action="input.php" method="POST"> <label for="name">Nomor Handphone</label> <?php echo form_input('nomor','','id="id_kontak"'); ?> <label for="email">Pesan</label> <?php $text = array ( 'name' => 'pesan', 'cols' => '60', 'rows' => '5'); echo form_textarea($text); ?> <input type=submit name=submit id="tombol" align=left> </form> </fieldset> </div> <!-- button nya --> <button id="create-user">New Message</button> </body> </html> Apabila proyek yang telah kita kerjakan benar maka hasilnya adalah sebagai berikut : 2012| Parade Pelatihan CNC 37
  • 38. Penjelasan : Halaman awal setelah login sebelum new message di klik Dan tampilan terakhir dari kotak Dialog box yang telah kita buat tadi, disini kolom yang kita isikan akan menampilkan auto-suggest / inputan yang pada awalnya adalah 8. Jika sudah sampai di tahap ini, maka script yang tadi kita buat sudah berjalan dengan benar. 1. Menerapkan Grafik untuk membaca jumlah inbox dan sent item 2012| Parade Pelatihan CNC 38
  • 39. Grafik bar untuk inbox dan sent item Kali ini kita akan membuat grafik batang yang memerapkan untuk membaca table inbox dan sent item dari database, konsep ini grafik merepresentasikan jumlah inbox dan sent item pada now -7 hari. Jadi semisal sekarang tanggal 5 Mei 2012, maka grafik akan membaca untuk tanggal 28 April 2012 sampai 05 April 2012. Selain itu bagian grafik akan menampilkan jumlah total dari inbox dan sent itemnya, Sehingga kita dapat mengetahui jumlah total inbox dan sent item yang ada dalam database. a. Persiapkan file-file berikut: -FCF_MSColumn3D.swf kemudian kita simpan pada folder ci/charts. -jquery-1.4.js simpan filenya di ci/js. -jquery.fusioncharts.js simpan filenya di ci/js. b. Kemudian kita diskripsikan tujuan controller ketika klik menu status. Tambahkan pada crud_view.php <div onclick="location.href='crud/status';"> <h3><a id="create-user">Status</a></h3> </div> Keterangan: kita memberikan tujuan ke controller crud/status ketika ada perintah klik pada bagian menu status. c. Berikan fungtion baru dengan nama status pada controller crud.php. function status(){ $oa=strtotime(date('Y-m-d')); $sa=date('Y-m-d',strtotime('-1 week',$oa)); $tgl=explode("-",$sa); $da=date('Y-m-d',strtotime('this week',$oa)); //inbox $datas="<tr><td>inbox</td>"; for($i=0;$i<=7;$i++){ $x=mktime(0,0,0,$tgl[1],$tgl[2]+$i,$tgl[0]); $y=date('Y-m-d',$x); $datas.='<td>'.$this->crud_model-> cari_datainbox($y).'</td>'; } $data['inbox']=$datas.'</tr>'; //sent item $datas="<tr><td>Sent Item</td>"; 2012| Parade Pelatihan CNC 39
  • 40. for($i=0;$i<=7;$i++){ $x=mktime(0,0,0,$tgl[1],$tgl[2]+$i,$tgl[0]); $y=date('Y-m-d',$x); $datas.='<td>'.$this->crud_model-> cari_datasitem($y).'</td>'; } $data['sentitem']=$datas.'</tr>'; //tanggal $datas="<tr><th>Tgl</th>"; $sa=date('Y-m-d',strtotime('-1 week',$oa)); $tgl=explode("-",$sa); for($i=0;$i<=7;$i++){ $x=mktime(0,0,0,$tgl[1],$tgl[2]+$i,$tgl[0]); $y=date('d',$x); $datas.='<th>'.$y.'</th>'; } $data['tgl']=$datas.'</tr>'; //mencari tanggal -7 dan tanggal sekarang! $oa=strtotime(date('Y-m-d')); $sa=date('d-m-Y',strtotime('-1 week',$oa)); $da=date('d-m-Y',strtotime('now')); $data['last']=$sa; $data['now']=$da; $data['jumlahinbox']=$this->crud_model->cari_totalinbox(); $data['jumlahsitem']=$this->crud_model->cari_totalsitem(); $this->load->view('vstatus',$data); } d. Kemudian kita beralih pada model yaitu untuk mengeksekusi databasenya. Berikan fungsi baru pada crud_model.php function cari_datainbox($i){ $this->db->select('ReceivingDateTime'); $this->db->from('inbox'); $this->db->like('ReceivingDateTime',$i,'after'); $inbox=$this->db->get(); $jumlah=$inbox->num_rows(); $jumlah=!empty($jumlah)?$jumlah:'0'; return $jumlah; } function cari_totalinbox(){ $inbox=$this->db->get('inbox'); $jumlah=$inbox->num_rows(); $jumlah=!empty($jumlah)?$jumlah:'0'; return $jumlah; } function cari_datasitem($i){ $this->db->select('SendingDateTime'); $this->db->from('sentitems'); 2012| Parade Pelatihan CNC 40
  • 41. $this->db->like('SendingDateTime',$i,'after'); $inbox=$this->db->get(); $jumlah=$inbox->num_rows(); $jumlah=!empty($jumlah)?$jumlah:'0'; return $jumlah; } function cari_totalsitem(){ $inbox=$this->db->get('sentitems'); $jumlah=$inbox->num_rows(); $jumlah=!empty($jumlah)?$jumlah:'0'; return $jumlah; } e. Setelah itu kita beralih ke view. Karena controller mengirimkanya ke view vstatus $this->load->view(‘vstatus’,$data) maka kita buat vstatus.php pada folder viewnya. vstatus.php Tambahkan di dalam tag <head> <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.4.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.fusioncharts.js"></script> Tambahkan script dibawah ini untuk menampilkan grafiknya di bagian <div class=”right_content”> <div class="right_content"> <!-- grafik--> <div style="overflow:auto; width:575px; height:370px; padding:5px; border:1px solid #eee"> <center><h4>Grafik Inbox dan Sent Item</h4></center> <?php echo "<center>$last sampai $now</center>"; ?> <table style="display: none;" id="myHTMLTable" border="1" align="center"> <?php echo $tgl; ?> <?php echo $inbox; ?> <?php echo $sentitem; ?> </table> <script type="text/javascript"> $('#myHTMLTable').convertToFusionCharts({ swfPath: "<?php echo base_url(); ?>charts/", type: "MSColumn3D", data: "#myHTMLTable", dataFormat: "HTMLTable", width : "550" 2012| Parade Pelatihan CNC 41
  • 42. }); </script> <table border="0"> <tr><td>Total Inbox</td><td>:</td><td><?php echo $jumlahinbox; ?></td></tr> <tr><td>Total Sent Item</td><td>:</td><td><?php echo $jumlahsitem ?></td></tr> </table> </div> <!-- end grafik--> </div> f. Terakhir kita lihat hasilnya, dengan menklik menu status maka akan tampil seperti dibawah ini. 2012| Parade Pelatihan CNC 42
  • 43. Membuat aplikasi sms gateway di Windows 1. Download file gammu di wammu.eu/download. Kemudian pilih untuk versi gammu yang stabil, untuk versi saat membuat tutorial ini penulis mencoba untuk memilih gammu 1.31.0. Download gammu windows versi .ZIP 2. Setelah mendownload file gammu-1.31.0-windows.zip, kemudian lakukan ekstrak file zip tersebut. Buka folder hasil ekstrak, maka akan terdapat 4 folder yaitu: bin, include, lib, dan share. 3. Pindahkan file hasil ekstrak atau folder Gammu-1.31.0-Windows ke direktori C: kemudian rename dengan nama gammu-1.31 agar lebih mudah. 4. Langkah berikutnya yaitu melakukan konfigurasi untuk file gammurc dan smsdrc. Caranya cari file gammurc dan smsdrc yang ada di C:gammu- 1.31sharedocgammuexamplesconfig dan copykan kedua file tersebut ke folder bin yang berada di C:gammu-1.31bin . kemudian konfigurasi gammurc-nya. 2012| Parade Pelatihan CNC 43
  • 44. gammurc [gammu] device = com12: connection = at115200 ;Do not use model configuration unless you really need it ;model = 6110 ;synchronizetime = yes ;logfile = gammulog ;logformat = textall ;use_locking = yes ;gammuloc = locfile ;startinfo = yes ;gammucoding = utf8 ;usephonedb = yes catatan : Untuk membuka file ini, dapat menggunakan notepad atau editor lainya. Pada gammurc hanya konfigurasi pada device dan connection. Untuk device kita sesuaikan pada pengecekkan port pada komputer. Untuk connection pada modem yang saya pakai adalah at115200, untuk modem atau handphone yang lainya dapat dilihat di http://wammu.eu/phones. Melihat port device :  Cari pada Device Manager kemudian pilih modems. Catatan : Jika device manager tidak menampilkan modem, kemungkinan besar yaitu belum menginstall driver bawaan dari modem tersebut. Sehingga,perlu untuk menginstall terlebih dahulu sebelum melihat device portnya. Kemudian, untuk menghindari bentrok close software bawaanya. 2012| Parade Pelatihan CNC 44
  • 45.  Klik kanan pada modem yang digunakan, dan pilih properties, kemudian cek pada modem. Device Port yaitu com12 5. Langkah berikutnya kita lakukan pengecekkan apakah konfigurasi terhadap modem yang dipakai sudah sesuai.  Buka comment-prompt  Kemudian ketikan dibawah ini untuk masuk ke directori C:gammu-1.31bin cd C:gammu-1.31bin  Kemudian ketikkan gammu –identify  Jika konfigurasi telah sesuai maka kan tampil seperti berikut: Catatan : Kalau IMEI nya muncul maka sudah OK! 6. Setelah terdeteksi untuk modem dan device portnya, selanjutnya tahap menyambungkan dengan database. Catatan : Komputer telah terinstall Apache, Mysql. Jika belum anda dapat menginstall Xampp terlebih dahulu. 2012| Parade Pelatihan CNC 45
  • 46. Buat database baru di localhost/phpmyadmin, misalkan pada kasus sekarang buat database dengan nama sms.  Import database mysql.sql di folder C:gammu- 1.31sharedocgammuexamplessql Pilih import Pilih file mysql.sql Klik go! 2012| Parade Pelatihan CNC 46
  • 47. Jika sukses dalam import file sql tersebut maka akan tampil seperti dibawah ini. Telah berhasil import database (ada 9 tabel)!  Setelah membuat database beserta import isi database yang berjumlah 9 tabel, maka selanjutnya konfigurasi dengan file smsdrc yang berada di direktori bin. Sehingga sms yang diterima oleh device dapat di simpan kedalam database sms. smsdrc [gammu] device = com12: Sesuai dengan device port #model = 6110 connection = at115200 Sesuai daftar device di wammu.eu/phones #synchronizetime = yes #logfile = gammulog # this is not used at all in SMSD mode #logformat = textall #use_locking = yes #gammuloc = gammu.us #startinfo = yes catatan : Jangan lupa untuk menghilangkan tanda # pada parameter yang akan digunakan. 2012| Parade Pelatihan CNC 47
  • 48. # General SMSD settings, see gammu-smsdrc(5) for detailed description. [smsd] # SMSD service to use, one of FILES, MYSQL, PGSQL, DBI service = sql Versi gammu terbaru service kita ubah menjadi sql # PIN for SIM card #PIN = 1234 Beri tanda # jika simcard tidak memakai PIN Kemudian konfigurasi untuk databasenya. # Database backends congfiguration user = root password = pc = localhost # pc can also contain port or socket path after colon (eg. localhost:/path/to/socket) database = sms # DBI configuration driver = sqlite Driver diubah menjadi native_mysql # driverspath = /usr/lib/dbd/ # Database directory for sqlite # dbdir = /var/lib/smsd Keterangan konfigurasi database:  User : Nama user untuk mengakses ke database mysql.  Password : Password utnuk mengakses ke database, jika tidak ada kita kosongkan saja.  Pc : Isikan localhost, karena kita mengakses di localhost.  Database : Nama database yang akan kita jadinkan tempat penyimpanan sms. 7. Setelah mengkonfigurasi gammurc dan smsdrc, selanjutnya mulai menjalankan sebagai servicenya.  Untuk menginstall service gammu-smsd –i –c smsdrc –n gammuSMSD Jika comment benar, maka akan menampilkan seperti ini . 2012| Parade Pelatihan CNC 48
  • 49. Untuk menuninstall service gammu-smsd –u –c smsdrc –n gammuSMSD Jika comment benar, maka akan menampilkan seperti ini.  Untuk menjalankan service gammu-smsd –s –c smsdrc –n gammuSMSD Jika comment benar, maka akan menampilkan seperti ini.  Untuk mengecek apakah service gammusmsd telah running, dapat mengecek pada task manager seperti dibawah ini. Status Running 2012| Parade Pelatihan CNC 49
  • 50. 8. Setelah semuanya dilakukan, kemudian lakukan pengiriman sms ke nomor handphone yang ada pada modem. Bila, konfigurasi benar maka pesan atau sms masuk akan masuk pada database sms dan berada di tabel inbox. Kurang lebih akan tampil seperti dibawah ini. 2012| Parade Pelatihan CNC 50
  • 51. Membuat aplikasi sms gateway di ubuntu 11.10 (Oneiric Ocelot) 1. Persiapkan terlebih dahulu ubuntu 11.10 dengan koneksi internet yang memadahi. Pada studi kasus tutorial kali ini, penulis menggunakan akses internet kampus Institute Teknologi Telkom dengan menggunakan proxy address 172.16.1.1 proxy port 8080. Untuk repository kita menggunakan server pinguin (Repository Laboratorium CNC). 2. Akses ke pinguin.ittelkom.ac.id/mirror. Kemudian pilih untuk bagian repo ubuntu, setelah itu pilih untuk versi ubuntunya. Karena disini kita memakai ubuntu 11.10 oneiric maka kita pilih repo yang sesuai. Pilih seri oneiric Klik untuk how-to.txt. maka akan ada beberapa konfigurasi untuk alamat list repositorinya. 3. Copykan ke source.list dari ubuntu anda. Dengan cara ketikan pada terminal. Untuk masuk dalam mode root terlebih dahulu ketikan. sudo su Kemudian ganti sources.list gedit /etc/apt/sources.list Copykan konfigurasi yang ada pada list web tadi kedalam panel editnya. Dapat dilihat pada gambar berikut ini. Kemudian save konfigurasinya. 2012| Parade Pelatihan CNC 51
  • 52. Setelah konfigurasi disimpan. Lakukan update dengan cara mengetikkan diterminal. apt-get update Jika tidak terjadi proses maka kita harus seting proxy pada terminalnya dengan mengetikan format berikut kedalam terminal. export http_proxy=http://yourproxyaddress:proxyport Keterangan:  yourproxyaddress : Diisi alamat proxy yang digunakan.  proxyport : Diisi untuk port proxy yang digunakan. Karena kasus kali ini menggunakan proxy address 172.16.1.1 proxy port 8080. Maka ketikan diterminal seperti ini: export http_proxy=http://172.16.1.1:8080 Kemudian lakukan update kembali. Jika sukses akan tampil seperti berikut: 2012| Parade Pelatihan CNC 52
  • 53. 4. Install apache2, untuk install apache masuk keterminal dan ketikan: apt-get install apache2 Maka akan muncul do you want to continue [Y/n]? kemudian ketikan y dan tekan enter. Jika sudah proses selesai, coba untuk membuka browser dan ketikan alamat http://localhost jika apache telah terinstal akan memunculkan it works!. 5. Install PHP, untuk menginstall php, ketikan diterminal seperti berikut. sudo apt-get install php5 libapache2-mod-php5 Proses selanjutnya akan sama dengan proses menginstall apache2. Setelah terinstall lakukan restart untuk apache2nya dengan mengetikkan perintah berikut. /etc/init.d/apache2 restart Untuk menguji berhasil atau tidaknya PHP yang baru saja kita install, buatlah sebuah file format php dan disimpan di /var/www/file_anda.php atau anda 2012| Parade Pelatihan CNC 53
  • 54. langsung bisa mengetikkan ke terminal seperti berikut: gedit /var/www/phpinfo.php Kemudian isikan pada phpinfo.php seperti berikut. <?php phpinfo() ?> Kemudian anda langsung bisa mengakses menggunakan browser dan memasukkan alamat ini. http://localhost/phpinfo.php. jika file bernama lain maka akses kehalaman,dengan memberikan nama file untuk setelah localhost. Keterangan: jika muncul maka menandakan php telah terinstall. 2012| Parade Pelatihan CNC 54
  • 55. 6. Install mysql-server, mysql disini berhubungan dengan database kita, dan untuk menginstalnya hanya perlu mengetikkan perintah berikut keterminal. apt-get install mysql-server Tunggu prosesnya, jika ada muncul seperti berikut maka masukkan password untuk username root mysql anda. Password ini digunakan apabila anda menggunakan MySQL, jadi ingat baik-baik password anda. Ulangi passwordnya sesuai dengan password yang anda masukkan tadi. 7. Setelah install MySQL telah selesai, selanjutnya komponen terakhir yang perlu diinstall untuk membangun webserver yaitu PhpMyAdmin. Sebenarnya tanpa phpmyadmin sendiri kita sudah bisa menggunakan mysql, hanya untuk pemula dalam masalah database, maka kita akan sangat mengalami kesulitan sehingga membutuhkan gui atau interface agar penggunaan database MySQLnya lebih mudah. Ketikan perintah berikut. apt-get install phpmyadmin 2012| Parade Pelatihan CNC 55
  • 56. Setelah itu akan muncul seperti berikut pilih untuk apache2 kemudian tekan enter dan pilih no untuk setingan konfigurasi kemudian tekan enter lagi. 8. Selanjutnya, ketikan perintah berikut diterminal. cp /etc/phpmyadmin/apache.conf /etc/apache2/conf.d Kemudan lakukan restart apache2nya. /etc/init.d/apache2 restart Untuk melihat hasilnya, masukkan alamat http://localhost/phpmyadin. Untuk masuk loginlah sebagai root dengan password yang telah anda buat. 2012| Parade Pelatihan CNC 56
  • 57. Jika username dan password benar maka akan muncul halaman muka dari panel phpmyadminya seperti gambar diatas. 9. Instalasi gammu dan gammu-smsd apt-get install gammu gammu-smsd Tunggu sampai proses selesai, pada setingan awal gammu-smsd belum sesuai dengan konfigurasi sehingga nantinya perlu kita konfigurasi manual. 10. Tahap selanjutnya pasangkan modem atau bisa juga menggunakan device handphone. Kali ini penulis menggunakan modem ZTE model: MF636. Cek versi dari gammu yang telah terinstall, ketikkan perintah dalam terminal dpkg –l gammu 2012| Parade Pelatihan CNC 57
  • 58. Sebelum mengkonfigurasi, kita perlu mencari tahu dimanakah letak port device tersebut. Cara melihatnya dapat mengetikkan dmesg | grep tty Kemudian kita seting konfigurasi seperti berikut ini. Dengan port yang sebelumnya kita cek yaitu ttyUSB1. Keterangan :  Port : letak port yang sebelumnya kita cek.  Connection : tipe koneksinya, untuk melihat database list tipe koneksinya bisa cek di wammu.eu/phones/. 11. Setelah konfigurasi, lakukan identify apakah modem telah teridentifikasi sempurna oleh computer ubuntu kita. Caranya ketikan perintah berikut gammu –-identify 2012| Parade Pelatihan CNC 58
  • 59. Jika berhasil seperti gambar diatas, lakukan pengecekkan dengan mangirmkan sms melalui terminal dengan mengetikkan perintah. echo isi_pesan | gammu –sendsms TEXT no_tujuan 12. Menggunakan funsionalitas database mysql untuk menyimpan sms yang masuk. Sehingga nanti semua sms akan masuk kedalam database mysql. Pertama buat terlabih dahulu nama databasenya, contoh disini memberikan nama parade_cnc. Kemudian importkan untuk database bawaan dari gammu. Sebelumnya kita extrak terlebih dahulu file mysql.sql.gz yang berada di folder /usr/share/doc/gammu/examples/sql/mysql.sql.qz. dengan cara: cd /usr/share/doc/gammu/examples/sql 2012| Parade Pelatihan CNC 59
  • 60. Kemudian ketikan perintah berikut untuk mengekstrak mysql.sql.gz menjadi mysql.sql. gunzip mysql.sql.gz Kemudian import mysql.sql seperti berikut pada database yang telah dibuat tadi. Jika sudah berhasil import maka hasilnya akan seperti berikut: 13. Setelah database kita persiapkan, saatnya konfigurasi agar dapat terhubung. Langkah awal buat file /etc/gammurc. Anda dapat mengetikkan perintah gedit /etc/gammurc Kemudian isikan konfigurasi berikut ini. [gammu] Port = /dev/ttyUSB1 Connection = at19200 Logfile = /etc/gammulog Logformat = textall Use_locking = yes Keterangan : semua konfigurasi diatas menyesuaikan port dan jenis connectionya. Untuk jenis connectionya tergantung devicenya. 2012| Parade Pelatihan CNC 60
  • 61. Karena tujuan kita akan menghubungkan gammu dengan Mysql, Maka kita mengedit file /etc/gammu-smsdrc. Lakukan perintah berikut. gedit /etc/gammu-smsdrc Kemudian isikan seperti berikut: [gammu] Port = /dev/ttyUSB1 Connection = at19200 [smsd] Service = sql Logfile = /etc/smsdlog Debuglevel =255 User = root Password = paradecnc PC = localhost Database = parade_cnc Driver = native_mysql Kemudian save, dan untuk menjalankan service gammu-sms hanya perlu mengetikkan perintah berikut pada terminal. gammu-smsd Kemudian lakukan test dengan mengirimkan sms ke no modem atau device lain yang dipakai untuk sms gateway. Jika semua konfigurasi dan pensetingan telah sesuai maka akan berhasil dan sms yang masuk akan langsung masuk kedalam database parade_cnc pada table inbox. 2012| Parade Pelatihan CNC 61
  • 62. Trigger MySQL Arti trigger sendiri merupakan suatu pemicu. Misalkan jika ada data masukkan di tabel inbox maka akan lakukan perintah x. Banyak sekali manfaat dari trigger sendiri, biasanya trigger digunakan untuk pembackup’an data. Dilain kasus,dengan memanfaatkan trigger sendiri kita bisa membuat sebuah aplikasi sms auto replay yang cukup baik. Mari kita coba, Contoh 1: Membuat sms auto replay untuk level 1. Format -> Ketik CNC<SPASI>DAFTAR Analoginya sendiri, ketika ada inputan atau sms masuk kedalam tabel inbox maka sistem akan membaca. Jika tidak ada format pesan yang sesuai dengan apa yang dimiliki program yaitu CNC<spasi>DAFTAR maka akan dibalas “Maaf Format sms anda salah! Cnc_crew”. CREATE TRIGGER cnc1 AFTER INSERT ON inbox FOR EACH ROW BEGIN if SUBSTRING(new.TextDecoded,5,10)=’DAFTAR’ then INSERT INTO outbox ( DestinationNumber, Coding, TextDecoded, CreatorID ) VALUES ( new.SenderNumber, ‘Default_No_Compression’,’Hore Format anda benar’, ’1′); else INSERT INTO outbox ( DestinationNumber, Coding, TextDecoded, CreatorID ) VALUES ( new.SenderNumber, ‘Default_No_Compression’, ‘Maaf format sms Anda salah! Cnc_Crew Ketik CNC<spasi>DAFTAR’, ’1′); end if; END$$ Keterangan:  CREATE TRIGGER cnc1 Membuat trigger di MySQL untuk nama triggernya cnc1. Untuk mengecek trigger apa saja yang telah dibuat di MySQL tinggal ketikan. show triggers  SUBSTRING(new.TextDecoded,5,10)=’DAFTAR’ mengecek table inbox untuk field TextDecoded untuk isi dar karakter ke 5 sampai 10 apakah berisi DAFTAR. Jika benar maka akan memasukkan ke table outbox .  END$$ Merupakan sebuah pembatas. 2012| Parade Pelatihan CNC 62
  • 63. Langkahnya sebagai berikut: Copy script diatas kedalam field sql yang ada di MySQL. Tampilan seperti dibawah ini. Langkahnya sebagai berikut: 1. Copy script diatas kedalam field sql yang ada di MySQL. Tampilan seperti dibawah ini. Ketikan script diatas pada field ini. Berikan Delimiters $$ 2. Kemudian klik go. 3. Coba untuk megirimkan sms ke nomor modem atau device yang anda pakai sebagai sms gateway. Contoh 2: Membuat sms untuk cek nilai sesuai NIM mahasiswa. Format-> ketik CNC<spasi>NIM Analoginya, mahasiswa ingin melihat nilainya dengan menggunakan sms gateway. Dan ketika tidak sesuai format akan dibalas “Maaf Format sms anda salah! Cnc_crew”. CREATE TRIGGER cnc2 AFTER INSERT ON inbox FOR EACH ROW BEGIN if SUBSTRING(new.TextDecoded,1,3)=’CNC’ then INSERT INTO outbox ( DestinationNumber, Coding, TextDecoded, CreatorID ) VALUES ( new.SenderNumber, ‘Default_No_Compression’, ( SELECT nilai from tbl_nilai WHERE nim = SUBSTRING(new.TextDecoded,5,13)), ’1′); else INSERT INTO outbox ( DestinationNumber, Coding, TextDecoded, CreatorID ) VALUES ( new.SenderNumber, ‘Default_No_Compression’, ‘Maaf format sms Anda salah!. Cnc_crew’, ’1′); end if; END$$ Jangan lupa untuk membuat terlebih dahulu tbl_nilai, kemudian mencoba untuk memasukan nim dan nilai. 2012| Parade Pelatihan CNC 63
  • 64. Contoh 3: Membuat sms autoreplay dengan perintah insert ke tabel. Untuk kasus kali ini, kita kan menginputkan nilai di tbl_nilai dengan cara mengirimkan sms. Format -> ketik INPUT#NIM#NILAI Dengan , jika perintah format tidak sesuai maka akan mengirimkan pesan “Maaf Format sms anda salah! Cnc_crew”. Sebelumnya kita akan memasukkan fungsi pemecah untuk memecah sms dengan “#” sebagai parameternya. CREATE FUNCTION SPLIT_STR( x VARCHAR(255), delim VARCHAR(12), pos INT ) RETURNS VARCHAR(255) RETURN REPLACE(SUBSTRING(SUBSTRING_INDEX(x, delim, pos), LENGTH(SUBSTRING_INDEX(x, delim, pos -1)) + 1), delim, ''); Untuk trigger input nilainya dapat dilihat dibawah ini: CREATE TRIGGER cnc3 AFTER INSERT ON inbox FOR EACH ROW BEGIN if SUBSTRING(new.TextDecoded,1,5)='INPUT' then INSERT INTO tbl_nilai (nim,nilai) 2012| Parade Pelatihan CNC 64
  • 65. VALUES (SPLIT_STR(new.TextDecoded,'#','2'), SPLIT_STR(new.TextDecoded,'#','3')); INSERT INTO outbox( DestinationNumber, Coding, TextDecoded, CreatorID ) VALUES (new.SenderNumber, 'Default_No_Compression',concat(‘Nilai’,SPLIT_STR(new.TextDecoded,'#', '2'),' telah berhasil diinputkan '),'1'); else INSERT INTO outbox ( DestinationNumber, Coding, TextDecoded, CreatorID ) VALUES ( new.SenderNumber, 'Default_No_Compression', Maaf Format sms anda salah! Cnc_crew ', '1'); end if; END$$ Keterangan:  SPLIT_STR(new.TextDecoded,'#','3') Memecah Field TextDecode dengan parameter “#” sebagai pembatasnya, dan akan mengambil nilai pada kata ke 3. Misal untuk INPUT#611090013#80. Maka kata ke 3 yaitu 80.  concat(‘Nilai’,SPLIT_STR(new.TextDecoded,'#','2'),' telah berhasil diinputkan ') Concat adalah perintah untuk menggabungkan antara dua variabel menjadi satu bagian. Pada script ini menggabungkan TextDecoded yang telah dipecah sehingga hanya diambil kata ke 2 kemudian digabungkan dengan kalimat “telah berhasil diinputkan”. Contoh: INPUT<spasi>611090013<spasi>80 Maka sistem akan replay sms dengan isi pesan: Nilai 611090013 telah berhasil diinputkan. 2012| Parade Pelatihan CNC 65