Kursus Web Design ~ Java Web Media

Tutorial Code Igniter Part 3: Membuat halaman kontak

Kursus Web Design ~ Java Web Media
Kursus Web Design ~ Java Web Media

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.

Membuat file htacess ~ Java Web Media
Membuat file htacess ~ Java Web Media

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. 

Tutorial Code Igniter Java Web Media
Tutorial Code Igniter Java Web Media

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:

Kursus Web Design ~ Java Web Media
Kursus Web Design ~ Java Web Media

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

Java Web Media: Web Design di Kota Depok

Java Web Media adalah perusahaan yang bergerak di bidang web design, web programming, web application, web education, graphic design dan graphic education yang berbasis di kota depok.

18 thoughts to “Tutorial Code Igniter Part 3: Membuat halaman kontak”

    1. gan, ane udah otak atik yang dibuat yang sesuai dengen tutorial lalu sama dengan kasus agan ==> object not found, pas ane otak atik lagi dgn file yang admin buat, Bisa gan ternyata, analisis ane yaitu isi folder “System” beda

  1. Pastikan file .htaccess nya benar ya.

    Silahkan ikuti format penulisan .htaccess dari file download yg dikasih oleh admin.
    Terimakasih

  2. gan mau tanya, kalo iframe ngga jalan tulisannya 404 page not found itu kenapa ya?
    saya kira yang salah address nya. tapi tak coba ganti ke google.com masih aja not found

  3. mau tanya, sejauh ini ikutin tutor masih lancar, cuma pas bikin file .htaccess sesuai tutorial, pas mau akses “http://localhost/tutorial_ci/” malah internal server eror, begitu juga pas akses “http://localhost/tutorial_ci/kontak”.

    saya coba kembalikan sprti semula (file .htaccess di folder tutorial_ci saya hilangkan).
    hasilnya, “http://localhost/tutorial_ci/” bisa diakses seperti semula, tapi utk yg kontak ‘page not found’ krna memang hrs ada file .htaccess ya. jadi serba salah
    mohon pencerahan..

  4. Parse error: syntax error, unexpected ‘direct’ (T_STRING) in C:\xampp\htdocs\ci\application\controllers\kontak.php on line 1

      1. Pesan Error-nya seperti ini gan:
        404 Page Not Found
        The page you requested was not found.

        Gimana ya cara ngatasinnya? apa karena versi CI kita yang berbeda?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.