Skip to content
Menu
Blog Java Web Media
  • Home
  • Kursus Offline dan Online
  • Blog
  • Kontak
Blog Java Web Media
Kursus Web Design ~ Java Web Media

Tutorial Code Igniter Part 3: Membuat halaman kontak

Posted on September 16, 2014
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

19 thoughts on “Tutorial Code Igniter Part 3: Membuat halaman kontak”

  1. Pingback: Tutorial Code Igniter Part 10: CRUD Modul Berita (Bagian 3: Update dan Delete Berita) | Blog Java Web Media
  2. Derry Alif says:
    November 18, 2014 at 3:58 am

    Mantap banget mas..
    tutor nya

    ijin belajar ya

    Reply
  3. abdul says:
    January 30, 2015 at 4:00 am

    Gan ane kok gagal ya nyobanya. Tulisannya object not found. Padahal udah ngikutin sama persis seperti yang diatas

    Reply
  4. ady says:
    March 26, 2015 at 11:59 am

    mas kok aku udah jalanin semuanya sesuai tutorial kok malah not found ya…
    salahnya dmna ya?

    Reply
    1. dycas says:
      June 3, 2015 at 5:07 am

      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

      Reply
      1. ridwan says:
        September 14, 2016 at 4:44 pm

        kasih tutornya dong, puunya saya juga not found nih page kontaknya

        Reply
  5. ryb says:
    May 19, 2015 at 3:32 am

    Pastikan file .htaccess nya benar ya.

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

    Reply
  6. Anis says:
    June 16, 2015 at 6:30 pm

    Coba nama file nya .htaccess

    Reply
  7. Faisal says:
    July 6, 2015 at 7:28 pm

    sip mas.asli keren banget neh tutorialnya. bahasanya mudah banget dimengerti :-)

    Reply
  8. MWNF says:
    August 20, 2015 at 4:42 am

    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

    Reply
  9. BC says:
    February 22, 2016 at 1:53 pm

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

    Reply
  10. Irman says:
    May 12, 2016 at 6:59 am

    Bahasa tutory renyah buat dicerna, ijin belajar ya..lanjutkan mas

    Reply
  11. deny says:
    June 7, 2016 at 8:50 am

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

    Reply
    1. risky says:
      September 6, 2016 at 5:09 am

      coba diganti tanda ” ’ ” dengan ” ‘ ”

      caranya diketik manual tanda ” ‘ “

      Reply
  12. ridwan says:
    September 14, 2016 at 4:45 pm

    HTACCESS saya sudah benar,tidak terjadi internal server eror. tapi kenapa page kontak tetap not found ya?

    Reply
    1. Java Web Media: Web Design di Kota Depok says:
      September 27, 2016 at 2:26 am

      Errornya seperti apa mas?

      Reply
      1. icot says:
        May 26, 2017 at 7:35 am

        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?

        Reply
  13. Budi Dharma says:
    May 7, 2018 at 9:14 pm

    error di bagian petanya, bertuliskan Access forbidden
    mohon pencerahannya

    Reply
  14. Cihuy says:
    September 26, 2018 at 2:45 am

    udh bisa,tapi ko gak sesuai sama yang ada di tutorial yaa?

    Reply

Leave a Reply Cancel 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.

Recent Posts

  • Balkan Pharma Trenbolone Acetate
  • Unsur-Unsur Penting Dalam membangun website
  • Pengertian, Manfaat dan Cara menggunakan STATA
  • 5 Teknologi Teratas Revolusi Industri 4.0
  • 3 Langkah Dasar Membuat Web Responsive

Categories

  • Adobe Illustrator
  • blog
  • Code Igniter Depok
  • Composer
  • CSS
  • Decor
  • Design
  • Dreamweaver
  • Dynamic Website
  • Javascript
  • Kursus Codeigniter 3
  • Kursus Graphic Design Depok
  • Kursus Laravel
  • Kursus Statistik
  • Kursus Web Design di Depok
  • Laravel
  • Login
  • Login Codeigniter
  • MySQL
  • PHP
  • PHP MySQL
  • PHP MySQL
  • Programmer
  • Spry Menu Bar
  • SPSS
  • STATA
  • Statistik
  • Tips Progammer
  • Tutorial
  • Tutorial Codeigniter
  • Tutorial Laravel
  • Uncategorized
  • Upload File
  • Web Course Depok
  • Web Design
  • Web Design
  • Web Design Depok
  • Web Design Depok
  • Web Design di Kota Depok
  • Web Programming
  • Web Programming Depok
  • Web Server
  • Website
  • Wirausaha

Java Web Media

Pusat Kursus Private dan Reguler bidang Desain Grafis, Web Programming, Mobile Application dan Statistik

Java Web Media
MALL DEPOK TOWN SQUARE
Lantai 2 Unit SS1 No. 5-7
Jl. Margonda Raya No 1 Kota Depok
Jawa Barat 16424
Telepon: 085715100485
Whatsapp: +6281210697841
Email: contact@javawebmedia.co.id
Email: javawebmedia@gmail.com

Pendaftaran Kursus

Tanya Kursus Programming (+6285715100485)

Tanya Kursus Statistik (+6285716275299)

Formulir Pendaftaran

©2023 Blog Java Web Media | Powered by SuperbThemes & WordPress