Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter

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"> </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"> </span> <input type="submit" id="submit" value="Submit"/> </div> <?php echo form_close(); ?> </div> <div id="login_footer"> Copyright © 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

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>  <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 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">  <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>  </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

Referensi: o Agus Saputra. 2011. Trik Kolaborasi Codeigiter & Jquery. Yogyakarta: Lokomedia. o http://koder.web.id. o http://wammu.eu/docs/ o http://codeigniter.com/ user_guide. o http://jagoan-php.blogspot.com/2011/11/cara-install-apache-mysql-php-dan.html. o http://auliaafifhuda.wordpress.com/2011/01/08/auto-reply-sms-gateway. o http://w3school.com o http://codeigniter.com/user_guide/libraries/form_validation.html o http://terusbelajar.wordpress.com/2010/07/12/teknik-hitung-mundur-maksimal- karakter-yang-diinputkan/ 2012| Parade Pelatihan CNC 66

Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter

More Related Content

What's hot

Viewers also liked

Similar to Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter

More from Beni Krisbiantoro

Membangun Aplikasi SMS dengan Gammu dan PHP Framework CodeIgniter