Tutorial Code Igniter Part 3: Membuat halaman kontak

Pada tutorial kali ini, Anda akan masih akan belajar membuat halaman statis dengan menggunakan framework Code Igniter, yaitu halaman kontak.

Sebelum memulai tutorial ini, pastikan Anda telah:

1. Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
2. Mengikuti Tutorial Code Igniter Part 2: Tutorial Code Igniter Part 2: Membuat halaman home
3. Mengunduh hasil akhir tutorial Part 2. Bisa didownload di sini: https://drive.google.com/file/d/0B5BhV6c89_2YVHdiYm9Wa1BwQjA/edit?usp=sharing
4. Hasil akhir tutorial Part 3 bisa diunduh di sini: https://drive.google.com/file/d/0B5BhV6c89_2YNk9SMXlmNDVnSjQ/edit?usp=sharing

Membuat file .htaccess untuk URL yang lebih baik

Pada tutorial kali ini, halaman kontak akan kita buat dan dapat diakses dengan alamat http://localhost/tutorial_ci/kontak.

Nah, untuk membuat link atau URL yang mudah dibaca tersebut, Anda membutuhkan sebuah file .htaccess yang akan memodifikasi behavior dari server Apache Anda.

1. Buka program Notepad yang Anda miliki, lalu ketik kode di bawah ini:
   

   RewriteEngine on
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule .* index.php/$0 [PT,L]

2. Simpan di folder tutorial_ci dengan nama file .htacess
3. Pada opsi Save as type pilih All Files
4. Simpan file .htaccess tersebut

Membuat tampilan halaman kontak di folder tutorial_ci/application/view/home

Langkah selanjutnya adalah membuat halaman untuk menampilkan halaman kontak.

Berikut langkah-langkahnya:

1. Buat file PHP baru dengan nama kontak_view.php di folder tutorial_ci/application/view/home
2. Copy kode di bawah ini ke dalam file kontak_view.php
   

   <div class=”konten”>

   <!–Map Jalan Romo–>
   <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.8004180770995!2d106.8215332!3d-6.419684899999985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69ebd4f781d493%3A0x262fb56b419a56c4!2sJalan+Romo%2C+Sukma+Jaya%2C+Depok%2C+Jawa+Barat+16412%2C+Indonesia!5e0!3m2!1sen!2sus!4v1410830726754″ width=”1000″ height=”300″ frameborder=”0″ style=”border:0″></iframe>
   <hr>
   <!–Alamat kantor–>
   <h1>Kantor kami</h1>
   <p>Anda dapat menghubungi kami melalui alamat di bawah ini:</p>
   <p>Home Office:<br>
   Perumahan FerarI Tirtajaya Indah No. 36<br>
   Jl. Romo Tirtajaya, Kota Kembang – Depok, Jawa Barat<br>
   Phone: 021-37830602, Mobile: 085715100485<br>
   Email: <a href=”mailto:contact@javawebmedia.com”>contact@javawebmedia.com</a>, andoyoandoyo@gmail.com<br>
   Website: <a href=”http://www.javawebmedia.com/”>www.javawebmedia.com</a></p>
   <p><strong>Course place:</strong><br>
   Jl. Beringin, Pondok Cina – Depok, Jawa Barat<br>
   (Belakang Mall Depok Town Square dan dekat dengan Stasiun Pondok Cina Depok)<br>
   Phone: 021-34135720, Mobile: 085715100485<br>
   Email:<a href=”mailto:contact@javawebmedia.com”>contact@javawebmedia.com</a>, andoyoandoyo@gmail.com<br>
   Website: <a href=”http://www.javawebmedia.com/”>www.javawebmedia.com</a></p>
   </div>

3. Simpan file kontak_view.php

Membuat Controller halaman kontak (kontak.php di tutorial_ci/application/controller)

Untuk menampilkan halaman kontak, maka kita perlu membuat Controller baru untuk memanggil file kontak_view.php. 

File Controller untuk menampilkan halaman kontak ini hampir sama dengan controller yang ada untuk halaman home. Perbedaan utamanya adalah pada nama CLASS yang digunakan, yaitu menjadi Kontak dan isi yang dipanggil, yaitu ‘home/kontak_view’. 

Berikut langkah-langkahnya:

1. Buat file kontak.php di folder tutorial_ci/application/controller
2. Ketik/copy kode di bawah ini:
   

   <?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
   class Kontak extends CI_Controller {
   public function index() {
   $data=array(‘title’=>‘Contact Us – Java Web Media’,
   ‘isi’ =>‘home/kontak_view’
   );
   $this->load->view(‘layout/wrapper’,$data);
   }
   }

3. Simpan kembali file kontak.php

Menguji coba halaman kontak

Untuk mengetes halaman kontak yang Anda buat berhasil atau tidak, Anda bisa mengakses http://localhost/tutorial_ci/kontak atau dengan mengklik link Home.

Berikut adalah hasil akhir dari tutorial ini:

Download file hasil akhir di sini: https://drive.google.com/file/d/0B5BhV6c89_2YNk9SMXlmNDVnSjQ/edit?usp=sharing