membangun aplikasi sms codeigniter ppc2012

66

Upload: bambang-joko-widodo

Post on 26-Jul-2015

1.197 views

Category:

Documents


3 download

DESCRIPTION

Berisi tentang bagaimana membuat aplikasi sms di platform web (codeigniter). Dilengkapi tatacara bagaimana meninstalasi gammu di windows dan ubuntu 11.10.

TRANSCRIPT

Page 1: Membangun Aplikasi SMS Codeigniter PPC2012
Page 2: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 3: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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:

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.

Controller

Model View

Client

Page 4: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 4

Melihat Arsip Codeigniter:

CodeIgniter V 2.0.3

CodeIgniter V 2.0.2 CodeIgniter V 2.0.1

CodeIgniter V 2.0.0

CodeIgniter V 1.7.3

CodeIgniter V 1.7.2 CodeIgniter V 1.7.1

CodeIgniter V 1.7.0

CodeIgniter V 1.6.3

CodeIgniter V 1.6.2 CodeIgniter V 1.6.1

CodeIgniter V 1.6.0

CodeIgniter V 1.5.4

CodeIgniter V 1.5.3 CodeIgniter V 1.5.2

CodeIgniter V 1.5.1

CodeIgniter V 1.4.1

CodeIgniter V 1.3.3 CodeIgniter V 1.3.2

CodeIgniter V 1.3.1

CodeIgniter V 1.3

CodeIgniter V 1.2 CodeIgniter V 1.1

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.

Page 5: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 5

o Sistem kerja Codeigniter

Alur kerja dari framework codeigniter meliputi:

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.

Index.php

Routing Security

Caching View

Application

controller

Models

Libraries

Helpers

Plugins

Scripts

Page 6: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 7: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 8: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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)

Page 9: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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’);

Page 10: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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’);

Page 11: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 12: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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>

Page 13: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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; }

Page 14: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 15: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 16: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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-

Page 17: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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>

Page 18: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 19: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 20: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 21: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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>

Page 22: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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" );

}

Page 23: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 24: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 25: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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)

Page 26: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 27: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 28: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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)

Page 29: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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)

Page 30: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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'>

Page 31: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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);

}

Page 32: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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';

Page 33: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 34: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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 :

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) )

<?php

function lookup($keyword){

$this->db->select('*')->from('pbk');

$this->db->like('Number',$keyword,'after');

$query = $this->db->get();

return $query->result();

}

?>

Page 35: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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:

Page 36: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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;

Page 37: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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 :

Page 38: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 39: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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>";

Page 40: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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');

Page 41: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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"

Page 42: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 43: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

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.31\share\doc\gammu\examples\config dan copykan kedua file tersebut ke folder

bin yang berada di C:\gammu-1.31\bin . kemudian konfigurasi gammurc-nya.

Download gammu

windows versi .ZIP

Page 44: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 45: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 45

Klik kanan pada modem yang digunakan, dan pilih properties, kemudian cek

pada modem.

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.31\bin

cd C:\gammu-1.31\bin

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.

Device Port yaitu com12

Page 46: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.31\share\doc\gammu\examples\sql

Pilih import Pilih file mysql.sql

Klik go!

Page 47: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 47

Jika sukses dalam import file sql tersebut maka akan tampil seperti dibawah ini.

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:

#model = 6110

connection = at115200

#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.

Sesuai dengan device port

Sesuai daftar device di wammu.eu/phones

Telah berhasil import database (ada 9 tabel)!

Page 48: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 48

# General SMSD settings, see gammu-smsdrc(5) for detailed

description.

[smsd]

# SMSD service to use, one of FILES, MYSQL, PGSQL, DBI

service = sql

# PIN for SIM card

#PIN = 1234

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

# 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.

Versi gammu terbaru service kita ubah menjadi sql

Beri tanda # jika simcard tidak memakai PIN

Driver diubah menjadi native_mysql

Page 49: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 50: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 51: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

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.

Pilih seri oneiric

Page 52: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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:

Page 53: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 54: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 55: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 56: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 57: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 58: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 59: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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

Page 60: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 61: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 62: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 63: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

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.

Ketikan script diatas pada field ini.

Berikan Delimiters $$

Page 64: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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)

Page 65: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 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.

Page 66: Membangun Aplikasi SMS Codeigniter PPC2012

2012| Parade Pelatihan CNC 66

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/