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

Tutorial Code Igniter - Java Web Media Depok

Tutorial Code Igniter Part 2: Membuat halaman home

Tutorial Code Igniter - Java Web Media Depok
Tutorial Code Igniter – Java Web Media Depok

Tutorial Code Igniter Part 2 ini akan membahas tentang bagaimana membuat sebuah halaman website berdasarkan template yang telah Anda buat. Template website dasar telah disediakan dalam tutorial ini.

Read More

Kursus Graphic Design Depok - Java Web Media Depok

Adobe Illustrator: Tutorial Part 1

Anda tahu Adobe Illustrator? AI (Adobe Illustrator) adalah salah satu program keluaran Adobe yang dapat digunakan untuk membuat illustrasi gambar berbasis vector.

Nah, kali ini Java Web Media akan memberikan tutorial sederhana untuk latihan awal dalam menggunakan Adobe Illustrator. Adobe Illustrator yang digunakan dalam tutorial ini adalah versi CS6, namun Anda dapat menggunakan versi CS3, CS4, CS5, CS5.5 atau bahkan CC. Selamat mencoba. Read More

Java Web Media ~ Dreamweaver CC

Mengaktifkan Fitur Server Databases, Bindings dan Behaviors di Dreamweaver CC

Dreamweaver CC adalah versi terbaru dari Adobe. Hal yang paling disayangkan adalah hilangnya fitur Databases, Bindings dan Server Behaviors. Maka Anda akan mengalami kesulitan dalam mengikuti tutorial2 yang pernah kami tulis di sini. Read More

Kursus Web Design Depok | Java Web Media

Tutorial Code Igniter Part 1: Installasi Code Igniter

Sekilas tentang Code Igniter

Code Iginiter (CI) adalah framework untuk aplikasi web berbasis PHP yang memiliki sifat kode terbuka (open sourceI). Versi pertama CI dipublikasikan pada 28 Februari 2006 dan versi terakhir saat tutorial ini ditulis adalah versi 2.1.4 yang dipublikasikan pada 8 Juli 2014.

Framework ini dikembangkan oleh Ellislab dan bisa diunduh secara langsung melalui websitenya, yaitu http://ellislab.com/codeigniter.

Model-View-Controller (MVC)

CI dibangun dengan dasar pola MVC (Model View Controller), dimana view dan controller adalah bagian yang harus ada dalam proses pengembangan aplikasi berbasis web, sedangkan models adalah pilihan (tidak wajib). CI dikenal karena kecepatannya, ringan dan mudah digunakan.

Konsep MVC adalah memisahkan fungsi logika aplikasi dengan tampilan (view), sehingga kode PHP akan lebih singkat karena tampilan dipisahkan dengan kode (logika) PHP-nya.

  • Model, merupakan representasi struktur data. Biasanya class-class yang ada dalam model berisi fungsi untuk menampilkan (retrieve), memasukkan data (insert), memperbarui dan menghapus database.
  • View, adalah informasi yang ditampilkan kepada user/pengunjung website. View biasanya adalah berupa halaman web, tapi di CI view juga merepresentasikan potongan-potongan dari halaman web, misalnya header atau footer. Bisa juga berupa halaman RSS atau halaman web biasa.
  • Controller, menjadi pelayanan/perantara antara model dan view serta bagian-bagian lain dari fungsi web yang ada di CI dan akhirnya menghasilkan tampilan halaman web.

Konsep MVC ini dirasa cukup mempermudahkan programmer karena masing-masing fungsi dipisahkan, sehingga bisa fokus pada logika pemrograman atau fokus pada tampilan lebih dahulu.

Mengunduh Framework CI

Anda dapat mengunduh langsung kode framework CI melalui websitenya di http://ellislab.com/codeigniter.

Java Web Media | Web Design Course Depok
Java Web Media | Web Design Course Depok

Installasi web server, PHP dan MySQL

CI membutuhkan web server, PHP dan database MySQL dalam proses installasinya. Ketiga program tersebut (Apache, PHP dan MySQL) bisa Anda dapatkan sekaligus dalam satu paket aplikasi, misalnya XAMPP atau WAMP. Pastikan Anda telah melakukan installasi salah satu program tersebut.

Tutorial ini dibuat dengan menggunakan aplikasi XAMPP. Pastikan juga program-program tersebut dapat berjalan dengan normal dengan cara membuka http://localhost melalui browser web. Gambar di bawah ini adalah contoh program XAMPP yang telah terinstall dengan benar.

Java Web Media | Web Programming Course Depok
Java Web Media | Web Programming Course Depok

Installasi Code Igniter

Mengesktrak file yang telah diunduh

Anda harus mengesktrak file yang telah diunduh terlebih dahulu. Berikut langkah-langkahnya:

  1. Klik kanan pada file CodeIgniter_2.1.4.zip yang telah Anda unduh
  2. Pilih Ekstract to CodeIgniter_2.1.4
  3. Anda telah selesai mengekstraknya

Membuat folder webroot

Saat membangun aplikasi berbasis web dengan CI, maka Anda harus membuat folder di dalam webroot. Jika Anda menggunakan XAMPP, maka lokasi folder adalah di htdocs, jika Anda menggunakan WAMP, maka foldernya adalah www.

Buka folder web root tersebut, lalu buat folder baru dengan nama ci.

Kursus Code Igniter di Depok | Java Web Media
Kursus Code Igniter di Depok | Java Web Media

Menyalin file framework CI ke dalam folder ci

Langkah selanjutnya adalah adalah menyalin file-file framework CI yang telah Anda ekstrak pada langkah sebelumnya ke dalam folder webroot, yaitu folder ci.

Kursus Code Igniter Depok | Java Web media
Kursus Code Igniter Depok | Java Web media

Berikut ini adalah file-file yang telah disalin

Kursus Code Igniter Depok | Java Web media
Kursus Code Igniter Depok | Java Web media

Uji coba hasil installasi CI

Untuk menguji hasil installasi CI, berikut langkah-langkahnya:

  1. Buka browser web Anda
  2. Buka alamat http://localhost/ci
  3. Jika tampilannya seperti gambar di bawah, maka Anda berhasil melakukan installasi framework CI.
Kursus Web Design Depok | Java Web Media
Kursus Web Design Depok | Java Web Media

Anda telah berhasil menginstall Code Igniter

Java Web Media | Web Design Company Based in Depok

Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 13) – Installasi Text Editor TinyMCE

Anda memasuki Part 13 dari rangkaian tutorial Pembuatan Aplikasi CMS/Berita sederhana. Pastikan Anda mengikuti tutorial-tutorial Part 1-Part 12 di bawah ini:

Java Web Media | Web Design Company Based in Depok
Java Web Media | Web Design Company Based in Depok
  1. Membuat Site Definition di Dreamweaver CS5, dan
  2. Membuat koneksi database PHP MySQL dengan Dreamweaver CS5
  3. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 1)
  4. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 2)
  5. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 3)
  6. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 4)
  7. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 5)
  8. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 6)
  9. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 7)
  10. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 8.) 
  11. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 9)
  12. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 10)
  13. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 11)
  14. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 12)
  15. Source code Tutorial CMS Dreamweaver Part 12 Read More
Kursus Web Design Depok

Kursus Web Design di Depok, Jakarta dan Bekasi

Kursus Web Design Depok
Kursus Web Design Depok

Anda ingin belajar mendesain dan membuat website sampai dengan website Anda online? Java Web Media hadir dalam membantu Anda mempelajari bagaiman membuat website dari nol sampai dengan bisa. Berikut paket-paket kursus Web Design kami:

1. Web Programming Kelas 2-3 siswa Rp. 1.350.000,00
2. Web Programming Private Rp. 1.900.000,00
3. Web Design Kelas 2-3 siswa Rp. 1.350.000,00
4. Web Design Private Rp. 1.900.000,00
5. Web Development Kelas 2-3 siswa Rp. 1.600.000,00
6. Web Development Private Rp. 2.400.000,00

Pendaftaran kursus web bisa dilakukan di http://javawebmedia.com/register.php atau langsung ke kantor kami di bawah ini:

Java Web Media
Home office:
 Perumahan Ferari Tirtajaya Indah
Jl. Romo No. 36
Kota Kembang, Grand Depok City Depok – Jawa Barat 16431
Phone : 021-34135720,
Mobile : 085715100485
Website : www.javawebmedia.com
Email : contact@javawebmedia.com
Course place/tempat kursus: 
Gang Senggol Pondok Cina Depok – Jawa Barat 
(Belakang Mall DETOS Depok. Dekat dengan kampus FKM UI dan Gunadarma

Tutorial membuat form autocomplete jQuery dengan Dreamweaver (database MySQL)

Pernahkah Anda membuat fitur autocomplete dalam form yang Anda buat? Jika belum, maka tutorial ini akan membantu Anda dalam membuat fitur tersebut. Gambar di bawah ini akan memberikan illustrasi penggunaan fitur Autocomplete.

Java Web Media | Web Design Course Depok
Java Web Media | Web Design Course Depok

Fitur Autocomplete biasa kita temukan di Facebook, dimana saat Anda mengetikkan salah satu huruf dari nama teman Anda, maka nama teman yang memiliki huruf yang cocok akan muncul.

Java Web Media | Web Design Course Depok
Java Web Media | Web Design Course Depok

Struktur file latihan

Tutorial ini akan menyediakan source code dasar yang bisa Anda download di link inihttp://www.mediafire.com/?xewi022kll4od09. Anda dapat mendownload source dasar ini secara langsung melalui situs/tautan tersebut. Anda juga bisa mendownload file jQuery asli melalui situs resmisnya di: http://jqueryui.com/resources/download/jquery-ui-1.10.3.zip.

Hasil akhir file tutorial ini bisa didownload di: Download file tutorial akhir Java Web Media Web Design Course Depok. Read More

Tutorial upload file web secara online

Domain dan hosting

Download Panduan: Tutorial upload file web secara online

Sebelum memesan domain dan hosting, kita harus terlebih dahulu memahami perbedaan keduanya.

  1. Domain adalah nama unik yang digunakan untuk mengidentifikasi server komputer seperti web server atau email server di jaringan komputer atau internet. Nama domain ini berfungsi untuk mempermudah pengguna internet dalam mengakses web server. Berikut adalah contoh nama domain: Read More

Tutorial Mendesain Halaman Login menggunakan Dreamweaver

Java Web Media: Desain Halaman Login
Java Web Media: Desain Halaman Login

Anda akan mempelajari bagaimana membuat halaman login. Tutorial ini diutamakan untuk pengguna Adobe Dreamweaver CS5 ke atas (meskipun versi sebelumnya bisa juga, tapi beberapa fitur tidak akan jalan). Read More