Friday, April 15, 2016

Code Igniter dan membuat Phone Book sederhana

Code Igniter

Dalam pembuatan web kita dapat menggunakan framework, salah satunya adalah code igniter. Code Igniter adalah salah satu framework yang cukup populer di Indonesia. Code Igniter dapat didownload di www.codeigniter.com/download. Setelah berhasil download kita dapat mengekstraknya dan didapat sebuah folder.

Folder tersebut dapat di letakkan pada localhost atau server yang berdiri sendiri seperti XAMPP atau WAMPP. Disini saya menggunakan XAMPP. Folder dari Code Igniter tadi dapat diletakkan di dalam folder htdocs. Kita juga dapat merubah nama foldernya sesuai yang kita inginkan. Setelah itu coba buka browser dan masuk ke localhost/[nama folde CI]. Disini saya kebetulan menggunakan port 50001 karena port defaultnya telah digunakan untuk yang lain. Nama folder CI saya ubah menjadi takequest. Maka saya akan membuka localhost:50001/takequest

Jika berhasil maka di browser akan terlihat tampilan:


Berikutnya kita ubah konfigurasi di folder CI agar dapat kita gunakan sesuai yang kita mau. Untuk yang pertama kita open folder menggunakan text editor. Disini saya menggunakan sublime text editor. kita akan melihat beberapa folder ada application, yang berisi controller, view, database dan lainnnnya. Untuk pertama kita akan konfigurasi dulu file-file yang berada di CI.

Pertama kita buat dulu controller baru di folder controller. Disini saya menamainya home.php didalamnya diisikan seperti ini:
1:  <?php  
2:  defined('BASEPATH') OR exit('No direct script access allowed');  
3:  class home extends CI_Controller {  
4:       public function index()  
5:       {  
6:            $this->load->view('');  
7:       }  
8:  }  

Kemudian kita ubah file route yang berada di folder config. Ubah bagian bawahnya menjadi
$route['default_controller'] = 'home';
home disini merupakan nama dari controller yang telah kita buat sebelumnya.

Setelah itu kita akan membuat tampilan. Awalnya kita dapat membuat sebuah file php baru di folder view, disini saya menamainya page1.php dan isikan seperti dibawah ini
1:  <!DOCTYPE html>  
2:  <html>  
3:  <head>  
4:       <title>Page1</title>  
5:  </head>  
6:  <body>  
7:  <?php echo "hello world" ?>  
8:  </body>  
9:  </html>  


Lalu file baru di controller tadi dapat kita arahkan dengan cara mengubah isinya tadi menjadi seperti ini
1:  <?php  
2:  defined('BASEPATH') OR exit('No direct script access allowed');  
3:  class home extends CI_Controller {  
4:       public function index()  
5:       {  
6:            $this->load->view('page1');  
7:       }  
8:  }  


Setelah itu cek browser dengan menggunakan local host seperti tadi. Jika Berhasil kita akan mendapatkan tulisan Hello World.

Phone Book Sederhana Menggunakan Database


Kemudian kita akan mencoba menghubungkan database ke CI. Untuk awalnya kita harus konfigurasikan terlebih dahulu. Pertama mengubah file database.php di folder config masukkan yang sekiranya perlu seperti hostname, username, password, database dan dbdriver. setelah itu jika cached diperlukan ubah juga memcached.php di folder yang sama dengan memasukkan hostname juga.


Nah karena ini berkaitan dengan database maka disini tentunya kita juga harus memiliki database. Contoh program yang saya gunakan disini adalah sqlyog. Database dibuat, dan buat tabel contoh. Disini saya membuat tabel phone book berisi atribut-atribut, diantaranya: id, nama, alamat, email dan kelas.

Lalu coba diisikan tabelnya, contohnya seperti dibawah ini:


Ubah file home.php yang kita buat sebelumnya di folder controller menjadi seperti ini:

1:  <?php  
2:  defined('BASEPATH') OR exit('No direct script access allowed');  
3:  class Site extends CI_Controller {  
4:       public function index()  
5:       {  
6:            $this->test();  
7:        
8:       }  
9:       public function test()  
10:       {  
11:            $this->load->model("model_get");  
12:            $data["result"] = $this->model_get->getPhoneBook();  
13:            $this->load->view('tampil', $data);  
14:       }  
15:  }  

Setelah itu ubah file php yang kita buat sebelumnya di folder view menjadi seperti ini.
1:  <html>  
2:  <head>  
3:       <title>page1</title>  
4:  </head>  
5:  <body>  
6:       <h1>Phone Book</h1>  
7:       <table border="1">  
8:            <thead>  
9:                 <tr>  
10:                      <th>Nama</th>  
11:                      <th>Alamat</th>  
12:                      <th>Email</th>  
13:                      <th>Kelas</th>  
14:                 </tr>  
15:            </thead>  
16:            <tbody>  
17:            <?php  
18:                 foreach ($result as $pb) { ?>  
19:                 <tr>  
20:                      <td><?php echo $pb->usr_name; ?></td>  
21:                      <td><?php echo $pb->usr_alamat; ?></td>  
22:                      <td><?php echo $pb->usr_email; ?></td>  
23:                      <td><?php echo $pb->usr_kelas; ?></td>  
24:                 </tr>  
25:                 <?php } ?>  
26:            </tbody>  
27:       </table>  
28:  </br>  
29:  <center><button type="submit">Tambah Data</button></center>  
30:  </body>  
31:  </html>  

Dan setelah itu kita juga buat file php baru di folder model dengan mengisinya menjadi ini:
1:  <?php  
2:       class Model_get extends CI_Model  
3:       {  
4:            function getPhoneBook()  
5:            {  
6:                 $query = $this->db->query("SELECT * FROM phone_book");  
7:                 return $query->result();  
8:            }  
9:       }  
10:  ?>  

Nah jika kita buka localhost/[nama folder CI] maka akan terlihat seperti ini:


Sekian penjelasannya, semoga bermanfaat....







1 comment:

  1. Artikelnya bagus mudah dipahami, kunjungi website kami juga ya! untuk mendapatkan pengalaman lebih :)

    ReplyDelete