Kursus Web Design Depok | Java Web Media

Tutorial Code Igniter 3 – Part 1: Review dan Installasi

Yee… Akhirnya Code Igniter siap-siap me-release versi terbarunya, yaitu versi 3.0. Mudah-mudahan bisa segera direlease.

Oleh banyak web developer Code Igniter awalnya dikhawatirkan akan mati karena Ellislab tidak sanggup melanjutkan pengembangan framework ini. Alhamdulillah akhirnya  British Columbia Institute of Technology bersedia mengambil alih project ini dan menyiapkan release berikutnya. Read More

Kursus Web Design Java Web Media

Tutorial Code Igniter Part 9: CRUD Modul Berita (Bagian 2: Tambah berita dan Installasi TinyMCE)

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

Pada Tutorial Code Igniter Part 9: CRUD Modul Berita (Bagian 2: Tambah berita dan Installasi TinyMCE) ini Anda akan belajar:

  1. Membuat form untuk menambah data berita dan sekaligus memasang
  2. Installasi text editor TinyMCE

Note: tutorial Part 9 ini belum menggunakan fasilitas SESSION untuk memasukkan data id_user dan akan di-set secara manual. Tutorial tentang Session akan dijelaskan dalam satu Part tersendiri.

Sebelum mengikuti tutorial ini, pastikan Anda telah mengikuti:

  1. Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
  2. Mengikuti Tutorial Code Igniter Part 2: Membuat halaman home
  3. Mengikuti Tutorial Code Igniter Part 3: Membuat halaman kontak
  4. Mengikuti Tutorial Code Igniter Part 4: Membuat halaman login administrator
  5. Mengikuti Tutorial Code Igniter Part 5: Membuat halaman dasbor administrator
  6. Mengikuti Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter
  7. Mengikuti Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya
  8. Mengikuti Tutorial Code Igniter Part 8: CRUD Modul Berita (Bagian 1)
  9. Mengunduh hasil akhir tutorial Part 8 ini bisa diunduh di: https://drive.google.com/file/d/0B5BhV6c89_2YNzJRS3k2ZFhLOGM/view?usp=sharing
  10. Hasil akhir tutorial Part 9 ini bisa diunduh di: https://drive.google.com/file/d/0B5BhV6c89_2YZFI4X1ZTQmdzTTQ/view?usp=sharing

Menggunakan TinyMCE

TinyMCE adalah sebuah teks editor yang akan membantu web programmer maupun content administrator untuk mempermudah proses memasukkan data berita.

Mengunduh TinyMCE

Anda dapat mengunduh file dasar TinyMCE di website http://www.tinymce.com/download/download.php. Pilih yang Development Package.

Kursus Web Development Depok
Kursus Web Development Depok

Menginstall TinyMCE

Proses selanjutnya adalah installasi TinyMCE.

Berikut langkah-langkahnya:

  1. Silakan Copy file unduhan TinyMCE tersebut lalu Paste ke folder tutorial_ci/assets/ 
    Kursus Desain Web Depok
    Kursus Desain Web Depok

     

     

  2. Klik kanan pada file TinyMCE tersebut lalu pilih Extract here
  3. Hal ini akan menghasilkan folder tinymce dalam folder tutorial_ci/assets/

Integrasi TinyMCE dengan Code Igniter

Proses selanjutnya adalah integrasi TinyMCE dengan framework Code Igniter.

Berikut langkah-langkahnya:

  1. Dengan menggunakan Code Editor (saya memakai Dreamweaver), buka file development.html yang ada dalam folder tutorial_ci/assets/tinymce/tests/manual. 
    Kursus Graphic Design
    Kursus Graphic Design

     

     

  2. Lalu Copy kode baris ke-12 sampai dengan ke-15, atau lihat kode di bawah ini:

    <script src=”../../js/tinymce/tinymce.dev.js”></script>
    <script src=”../../js/tinymce/plugins/table/plugin.dev.js”></script>
    <script src=”../../js/tinymce/plugins/paste/plugin.dev.js”></script>
    <script src=”../../js/tinymce/plugins/spellchecker/plugin.dev.js”></script>

  3. Buka file head.php yang ada dalam folder tutorial_ci/application/views/admin/layout.
  4. Pada baris ke-10 pada file head.php tekan Enter sebanyak 2 kali.
  5. Lalu Paste kode yang telah Anda Copy pada area kosong tersebut (Lihat Gambar).

    Installasi TinyMCE
    Installasi TinyMCE
  6. Lakukan perubahan kode tersebut sehingga menjadi sebagai berikut:

    <script src=”<?php echo base_url(); ?>assets/tinymce/js/tinymce/tinymce.dev.js”></script>
    <script src=”<?php echo base_url(); ?>assets/tinymce/js/tinymce/plugins/table/plugin.dev.js”></script>
    <script src=”<?php echo base_url(); ?>assets/tinymce/js/tinymce/plugins/paste/plugin.dev.js”></script>
    <script src=”<?php echo base_url(); ?>assets/tinymce/js/tinymce/plugins/spellchecker/plugin.dev.js”></script>

    Tutorial Code Igniter
    Tutorial Code Igniter
  7. Simpan file head.php

Integrasi TinyMCE dengan form tambah berita

Langkah berikutnya adalah meng-Copy javascript yang berfungsi untuk memanggil fungsi TinyMCE.

Berikut langkah-langkahnya:

  1. Dengan menggunakan Code Editor (saya memakai Dreamweaver), buka file development.html yang ada dalam folder tutorial_ci/assets/tinymce/tests/manual.
  2. Lalu Copy kode baris ke-16 sampai dengan ke-94 dari kode yang ada dalam file development.html tersebut

    <script>
    tinymce.init({
    selector: “textarea#elm1”,
    theme: “modern”,
    plugins: [
    “advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker”,
    “searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking”,
    “save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern”
    ],
    external_plugins: {
    //”moxiemanager”: “/moxiemanager-php/plugin.js”
    },
    content_css: “css/development.css”,
    add_unload_trigger: false,
    toolbar: “insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table”,
    image_advtab: true,
    style_formats: [
    {title: ‘Bold text’, format: ‘h1’},
    {title: ‘Red text’, inline: ‘span’, styles: {color: ‘#ff0000’}},
    {title: ‘Red header’, block: ‘h1’, styles: {color: ‘#ff0000’}},
    {title: ‘Example 1’, inline: ‘span’, classes: ‘example1’},
    {title: ‘Example 2’, inline: ‘span’, classes: ‘example2’},
    {title: ‘Table styles’},
    {title: ‘Table row 1’, selector: ‘tr’, classes: ‘tablerow1’}
    ],
    template_replace_values : {
    username : “Jack Black”
    },
    template_preview_replace_values : {
    username : “Preview user name”
    },
    link_class_list: [
    {title: ‘Example 1’, value: ‘example1’},
    {title: ‘Example 2’, value: ‘example2’}
    ],
    image_class_list: [
    {title: ‘Example 1’, value: ‘example1’},
    {title: ‘Example 2’, value: ‘example2’}
    ],
    templates: [
    {title: ‘Some title 1’, description: ‘Some desc 1’, content: ‘<strong class=”red”>My content: {$username}</strong>’},
    {title: ‘Some title 2’, description: ‘Some desc 2’, url: ‘development.html’}
    ],
    setup: function(ed) {
    /*ed.on(
    ‘Init PreInit PostRender PreProcess PostProcess BeforeExecCommand ExecCommand Activate Deactivate ‘ +
    ‘NodeChange SetAttrib Load Save BeforeSetContent SetContent BeforeGetContent GetContent Remove Show Hide’ +
    ‘Change Undo Redo AddUndo BeforeAddUndo’, function(e) {
    console.log(e.type, e);
    });*/
    },
    spellchecker_callback: function(method, data, success) {
    if (method == “spellcheck”) {
    var words = data.match(this.getWordCharPattern());
    var suggestions = {};
    for (var i = 0; i < words.length; i++) {
    suggestions[words[i]] = [“First”, “second”];
    }
    success({words: suggestions, dictionary: true});
    }
    if (method == “addToDictionary”) {
    success();
    }
    }
    });
    </script>

  3. Buat file PHP baru dengan nama tinymce.php dalam folder tutorial_ci/application/views/admin/berita
  4. Lalu Paste kode tersebut ke dalam file tinymce.php.
  5. Cari kode ini: selector: “textarea#elm1”,
  6. Lalu ubah (buang kode #elm1) sehingga menjadi: selector: “textarea”,
  7. Simpan file tinymce.php

Membuat form untuk menambah berita

Form berita ini akan disimpan dalam folder tutorial_ci/application/views/admin/berita. Form tambah berita ini nantinya akan dilengkapi dengan text editor TinyMCE. Terkait dengan TinyMCE Anda bisa melihat website resminya di www.tinymce.com. Action dari form akan di-handle oleh controller htttp://localhost/tutorial_ci/berita/tambah/.

Kursus Web Programming Java Web Media
Kursus Web Programming Java Web Media

Dalam form tambah berita ini, input id_user masih diset secara default dengan value=1. Nanti dalam tutorial berikutnya akan kita set menjadi dynamic content yang berasal dari data session id_user. Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama tambah_berita.php dalam folder tutorial_ci/application/views/berita
  2. Ketik kode di bawah ini:

    <div class=”konten”>
    <h1>Menambah berita</h1>
    <?php require_once(‘tinymce.php’) ?>
    <?php echo validation_errors(); ?>
    <form name=”form1″ method=”post” action=”<?php echo base_url() ?>admin/berita/tambah” class=”myform”>
    <p>
    <label for=”judul”>Judul berita</label>
    <input name=”judul” type=”text” id=”judul” size=”70″>
    </p>
    <p>
    <label for=”ringkasan”>Ringkasan berita</label>
    <textarea name=”ringkasan” id=”ringkasan” cols=”45″ rows=”5″></textarea>
    </p>
    <p>
    <label for=”isi”>Isi berita</label>
    <textarea name=”isi” id=”isi” cols=”45″ rows=”5″></textarea>
    </p>
    <p>
    <label for=”status_berita”>Status berita</label>
    <select name=”status_berita” id=”status_berita”>
    <option value=”Publish”>Publikasikan</option>
    <option value=”Draft”>Simpan sebagai draft</option>
    </select>
    <input name=”id_user” type=”hidden” id=”id_user” value=”1″>
    </p>
    <p>
    <input type=”submit” name=”submit” id=”submit” value=”Submit”>
    <input type=”reset” name=”submit2″ id=”submit2″ value=”Reset”>
    </p>
    </form>
    <p>&nbsp;</p>
    </div>

  3. Simpan file tambah_berita.php

Di dalam file tambah_berita.php tersebut ada 2 baris kode PHP, yaitu:

  • <?php require_once(‘tinymce.php’); ?> : kode tersebut adalah kode untuk memanggil fungsi TinyMCE yang nanti akan diterapkan di form tambah berita.
  • <?php echo validation_errors(); ?> : kode tersebut dipakai untuk mencetak data error jika form tidak diisi.

Menambahkan model untuk menambah

Pada Tutorial Code Igniter Part 8: CRUD Modul Berita (Bagian 1) telah dibuat model dengan nama berita_model. Nah Anda akan menambahkan anak/sub model dari berita_model tersebut.

Kursus Desain Web
Kursus Desain Web

Berikut langkah-langkahnya:

  1. Buka file berita_model.php yang ada dalam folder tutorial_ci/application/models/admin/
  2. Pada baris ke-12 (atau sebelum kode kurung kurawal terakhir), tekan Enter sebanyak 4 kali (Lihat gambar).

    Kursus Graphic Design Depok
    Kursus Graphic Design Depok
  3. Lalu tambahkan kode ini pada area yang telah di Enter tersebut.

    // Model untuk menambah berita
    public function tambah($data) {
    return $this->db->insert(‘berita’, $data);
    }

  4. Simpan kembali file berita_model.php

 

Menambah fungsi tambah dalam controller berita

Form tambah berita akan berada di bawah controller utama, yaitu controller berita, sehingga nantinya dapat diakses dengan alamat http://localhost/tutorial_ci/admin/berita/tambah. File controller berita ini nanti juga akan me-load model berita_model > tambah.

Kursus Web Design Depok
Kursus Web Design Depok

Berikut langkah-langkahnya:

  1. Buka file berita.php yang ada dalam folder tutorial_ci/application/controllers/admin/
  2. Pada baris ke-17 (atau sebelum kurung kurawal yang terakhir), tekan Enter sebanyak 4 kali (Lihat gambar).
    Kursus Web Development Depok
    Kursus Web Development Depok
    1. Lalu tambahkan kode di bawah ini:

      // Controler tambah berita di sini
      public function tambah() {
      $this->form_validation->set_rules(‘judul’, ‘Judul’, ‘required’);
      $this->form_validation->set_rules(‘ringkasan’, ‘Ringkasan’, ‘required’);
      $this->form_validation->set_rules(‘isi’, ‘Isi berita’, ‘required’);
      if ($this->form_validation->run() === FALSE) {
      $data=array(‘title’=>’Menambah Berita – Java Web Media’,
      ‘isi’ =>’admin/berita/tambah_berita’
      );
      $this->load->view(‘admin/layout/wrapper’,$data);
      }else{
      $slug = url_title($this->input->post(‘judul’), ‘dash’, TRUE);
      $data = array(
      ‘judul’ => $this->input->post(‘judul’),
      ‘slug’ => $slug,
      ‘ringkasan’ => $this->input->post(‘ringkasan’),
      ‘isi’ => $this->input->post(‘isi’),
      ‘status_berita’ => $this->input->post(‘status_berita’),
      ‘id_user’ => $this->input->post(‘id_user’)
      );
      $this->berita_model->tambah($data);
      redirect(base_url().’admin/berita/’);
      }

      }

    2. Simpan kembali file berita.php

Melakukan uji coba

Langkah selanjutnya adalah uji coba. Silakan akses di browser Anda dengan alamat http://localhost/tutorial_ci/admin/berita/tambah.

File hasil akhir tutorial ini dapat diunduh di link berikut ini: https://drive.google.com/file/d/0B5BhV6c89_2YZFI4X1ZTQmdzTTQ/view?usp=sharing

Dan hasilnya adalah sebagai berikut.

Kursus Web Design Java Web Media
Kursus Web Design Java Web Media
Tutorial Code Igniter Depok

Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter

Tutorial Code Igniter Depok
Tutorial Code Igniter Depok

Setelah 5 tutorial membahas tentang bagaimana membuat halaman statis dengan framework Code Igniter, maka pada Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter ini Anda akan belajar membuat database. Database ini nantinya akan menjadi tempat penyimpanan dari konten website Anda.

Sebelum mengikuti tutorial ini, pastikan Anda telah:

  1. Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
  2. Mengikuti Tutorial Code Igniter Part 2: Membuat halaman home
  3. Mengikuti Tutorial Code Igniter Part 3: Membuat halaman kontak
  4. Mengikuti Tutorial Code Igniter Part 4: Membuat halaman login administrator
  5. Mengikuti Tutorial Code Igniter Part 5: Membuat halaman dasbor administrator
  6. Mengunduh file database tutorial_ci.sql di: https://drive.google.com/file/d/0B5BhV6c89_2YT2laV3JqaktJRm8/edit?usp=sharing
  7. Mengunduh hasil akhir tutorial Part 5 bisa diunduh di sini:  https://drive.google.com/file/d/0B5BhV6c89_2YVU5zdkZjVGFERE0/edit?usp=sharing
  8. Kode akhir dari tutorial ini dapat Anda download di: https://drive.google.com/file/d/0B5BhV6c89_2Yc25JLUJVMEVyZWM/edit?usp=sharing

Membuat database tutorial_ci dan mengimpor tutorial_ci.sql

Sebelum Anda memasuki bagian membuat database tutorial_ci, pastikan Anda telah mengunduh file tutorial_ci.sql. Silakan Anda doanwload dulu di link ini https://drive.google.com/file/d/0B5BhV6c89_2YT2laV3JqaktJRm8/edit?usp=sharing. Dalam database SQL tersebut terdapat dua tabel, yaitu:

  • Tabel berita, berfungsi untuk menyimpan data berita
  • Tabel users, berfungsi sebagai media penyimpanan data user

Sebelum memasuki tahap ini, pastikan Anda telah menguji web server Anda dan fitur phpMyAdmin dapat berjalan dengan baik. Lihat gambar di bawah ini:

Kursus Pembuatan Website Depok
Kursus Pembuatan Website Depok
Belajar database MySQL
Belajar database MySQL

Langkah selanjutnya adalah sebagai berikut:

  1. Aktifkan webserver Anda (XAMPP, WAMP, MAMP atau yang lain)
  2. Buka browser Anda dan akses alamat http://localhost/phpmyadmin
  3. Klik tab menu Databases
  4. Pada input Create database, buat database dengan nama tutorial_ci. Kemudian klik Create
  5. Anda telah berhasil membuat database.

Import database tutorial_ci.sql ke dalam database tutorial_ci

Anda telah membuat database tutorial_ci dan telah mendownload tutorial_ci.sql.

Kursus Pembuatan Website
Kursus Pembuatan Website

Langkah selanjutnya adalah mengimport database SQL tersebut:

  1. Masih di phpMyAdmin, buka database tutorial_ci,
  2. Klik tombol Import
  3. Cari file tutorial_ci.sql yang telah Anda download
  4. Klik tombol Go, tunggu beberapa saat sampai proses import selesai.
  5. Anda telah mengimport database

Berikut ini adalah detail masing-masing tabel:

Kursus Web Design Depok
Kursus Web Design Depok
Kursus Web Design Depok
Kursus Web Design Depok

Setting autoload.php (library database) di Code Igniter

Anda telah berhasil membuat database dan mengimport databasenya. Langkah selanjutnya adalah melakukan pengaturan database pada framework Code Igniter agar dapat secara otomatis me-load database yang ada.

Kursus Web Programming
Kursus Web Programming

Ikuti langkah-langkah berikut ini:

  1. Buka file autoload.php yang ada dalam folder tutorial_ci/application/config/
  2. Pada baris ke-55, ada kode di bawah ini:

    $autoload[‘libraries’] = array();

    Selanjutnya untuk dapat me-load/memuat library database yang dimiliki oleh CI, maka Anda harus menambahkan kode sehingga menjadi:

    $autoload[‘libraries’] = array(‘database’);

  3. Simpan kembali file autoload.php

Setting koneksi database di CI (database.php)

Langkah selanjutnya adalah melakukan seting koneksi database CI agar dapat terhubung dengan database MySQL Anda.

Tutorial Code Igniter Depok
Tutorial Code Igniter Depok

Berikut langkah-langkahnya:

  1. Buka file database.php dalam folder tutorial_ci/application/config/
  2. Lakukan perubahan koneksi database pada baris ke-52 s/d ke-54 yang semula seperti kode di bawah ini:

    $db[‘default’][‘username’] = ”;
    $db[‘default’][‘password’] = ”;
    $db[‘default’][‘database’] = ”;

    Ubahlah kode tersebut dengan menambahkan data database, menjadi:

    $db[‘default’][‘username’] = ‘root’;
    $db[‘default’][‘password’] = ”;
    $db[‘default’][‘database’] = ‘tutorial_ci’;

  3. Simpan kembali file database.php

Akhirnya Anda telah menyelesaikan tutorial Part 6 ini.

Download source code akhir Part 6

Kode akhir dari tutorial ini dapat Anda download di: https://drive.google.com/file/d/0B5BhV6c89_2Yc25JLUJVMEVyZWM/edit?usp=sharing

Belajar Code Igniter di Java Web Media

Tutorial Code Igniter Part 5: Membuat halaman dasbor administrator

Belajar Code Igniter di Java Web Media
Belajar Code Igniter di Java Web Media

Haloo…. Selamat pagi. Alhamdulillah selepas subuh ini, Java Web Media mau melanjutkan tutorial tentang Code Igniter. Pada seri ke-5 dari tutorial ini, Anda akan membuat halaman dasbor Administrator (back end) yang akan dapat diakses di http://localhost/tutorial_ci/admin/dasbor.

Sebelum mengikuti tutorial ini, pastikan Anda telah:

  1. Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
  2. Mengikuti Tutorial Code Igniter Part 2: Membuat halaman home
  3. Mengikuti Tutorial Code Igniter Part 3: Membuat halaman kontak
  4. Mengikuti Tutorial Code Igniter Part 4: Membuat halaman login administrator
  5. Mengunduh hasil akhir tutorial Part 4 bisa diunduh di sini: https://drive.google.com/file/d/0B5BhV6c89_2YZWRiQnM1c1R1elE/edit?usp=sharing
  6. Untuk referensi, Anda dapat mengunduh source code hasil akhir Tutorial Part 5: https://drive.google.com/file/d/0B5BhV6c89_2YVU5zdkZjVGFERE0/edit?usp=sharing

Langkah persiapan

Sebelum memulai membuat halaman dasbor, Anda harus terlebih dahulu menyediakan folder untuk mengelola template halaman administrator. Halaman dasbor ini nantinya akan menjadi template dasar dari seluruh halaman administrator. Pada Tutorial Code Igniter Part 4: Membuat halaman login administrator Anda telah membuat folder layout.

Kursus Web Programming  | Java Web Media
Kursus Web Programming | Java Web Media

Berikut langkah-langkahnya:

  1. Buka folder tutorial_ci/application/views/admin
  2. Buat folder baru dengan nama dasbor di dalam folder admin tersebut

Membuat template untuk seluruh halaman administrator/back end

Tutorial ini telah menyediakan bentuk template halaman administrator atau backend dari website Anda. Anda bisa melihatnya di folder tutorial_ci/assets/admin atau bisa Anda akses di http://localhost/tutorial_ci/assets/admin. Tugas Anda sekarang adalah membuat template tersebut agar dapat diakses melalui framework CI.

Membuat file head.php (folder tutorial_ci/application/views/admin/layout/)

File head.php adalah bagian paling atas dari template halaman dasbor.

Kursus Pembuatan Website | Java Web Media
Kursus Pembuatan Website | Java Web Media

Ikuti langkah-langkah berikut ini:

  1. Buka file index.html dari folder tutorial_ci/assets/admin/. Ini adalah template dasar halaman dasbor
  2. Buat file PHP baru dengan nama head.php di folder tutorial_ci/application/views/admin/layout/
  3. Copy code baris ke-1 sampai dengan baris ke-13 (mulai dari <!doctype html> sampai dengan <div id=”wrapper”>, seperti terlihat dalam kode di bawah ini:

    <!doctype html>
    <html>
    <head>
    <meta charset=”utf-8″>
    <title>Halaman Administrator – Java Web Media</title>
    <link href=”../images/javawebmedia.png” rel=”shortcut icon”>
    <link href=”../css/style-admin.css” rel=”stylesheet” type=”text/css”>
    <link href=”../SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css”>
    <script src=”../SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
    </head>
    <body>
    <div id=”wrapper”>

  4. Lakukan perubahan pada kode yang ada di dalam area <head> sampai dengan </head> ini yang semula:

    <title>Halaman Administrator – Java Web Media</title>
    <link href=”../images/javawebmedia.png” rel=”shortcut icon”>
    <link href=”../css/style-admin.css” rel=”stylesheet” type=”text/css”>
    <link href=”../SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css”>
    <script src=”../SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>

    Lalu ubah menjadi dynamic text:

    <title><?php echo $title; ?></title>
    <link href="<?php echo base_url(); ?>assets/images/javawebmedia.png" rel="shortcut icon">
    <link href="<?php echo base_url(); ?>assets/css/style-admin.css" rel="stylesheet" type="text/css">
    <link href="<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <script src="<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
  5. Simpan file head.php

Membuat file header.php (dalam folder tutorial_ci/application/views/admin/layout/)

File header.php akan menampilkan bagian header dari halaman dasbor.

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

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama header.php dalam folder tutorial_ci/application/views/admin/layout/
  2. Dari file index.html yang ada di folder assets/admin/, copy code mulai dari <header> sampai dengan <!–En header–> (sekitar baris ke-15 s/d 21) seperti terlihat pada kode di bawah ini:
    <header> 
    <div class="akun"><a href="#" title="Update konfigurasi"><img src="../images/javawebmedia.png" width="16" height="16"> Sistem Informasi Java Web Media</a></div> 
    <div class="akun"><a href="#" title="Update profil"><img src="../images/img/user_red.png" width="16" height="16"> Andoyo cakep</a></div> 
    <div class="akun"><a href="#" title="Logout disini"><img src="../images/img/delete.png" width="16" height="16"> Logout</a></div> 
    <div class="home"><a href="#" title="Beranda"><img src="../images/img/house_go.png" width="16" height="16"> Beranda</a></div> 
    </header>
    <!--En header-->
  3. Lalu pada paste code tersebut di file header.php kemudian lakukan perubahan sehingga menjadi seperti kode di bawah ini. Perubahan-perubahan yang dilakukan diberi warna merah.
    <header> 
    <div class="akun"><a href="<?php echo base_url(); ?>admin/dasbor/config" title="Update konfigurasi"><img src="<?php echo base_url(); ?>assets/images/javawebmedia.png" width="16" height="16"> Sistem Informasi Java Web Media</a></div>
     
    <div class="akun"><a href="<?php echo base_url(); ?>admin/update" title="Update profil"><img src="<?php echo base_url(); ?>assets/images/img/user_red.png" width="16" height="16"> Andoyo cakep</a></div>
     
    <div class="akun"><a href="<?php echo base_url(); ?>admin/logout" title="Logout disini"><img src="<?php echo base_url(); ?>assets/images/img/delete.png" width="16" height="16"> Logout</a></div>
    <div class="home"><a href="<?php echo base_url(); ?>" title="Beranda"><img src="<?php echo base_url(); ?>assets/images/img/house_go.png" width="16" height="16"> Beranda</a></div> 
    </header>
    <!--En header-->
  4. Simpan file header.php

Membuat file menu.php (dalam folder tutorial_ci/application/views/admin/layout/)

File menu.php ini nanti akan menjadi file yang khusus untuk menampilkan dan mengelola menu yang ada di halaman administrator.

Kursus Web Programming | Java Web Media
Kursus Web Programming | Java Web Media

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama menu.php dalam folder tutorial_ci/application/views/admin/layout/
  2. Copy kode yang ada di file index.html dalam folder assets/admin/ mulai baris ke-23 sampai baris ke-46 (atau mulai dari <nav> sampai dengan <!– End navigasi–>). Atau seperti kode di bawah ini:

    <nav>
    <ul id=”MenuBar1″ class=”MenuBarHorizontal”>
    <li><a href=”#”>Dashboard</a> </li>
    <li><a href=”#” class=”MenuBarItemSubmenu”>Berita ARA</a>
    <ul>
    <li><a href=”#”>Data berita</a></li>
    <li><a href=”#”>Tambah berita</a></li>
    </ul>
    </li>
    <li><a href=”#” class=”MenuBarItemSubmenu”>User</a>
    <ul>
    <li><a href=”#”>Data User</a></li>
    <li><a href=”#”>Tambah User</a></li>
    </ul>
    </li>
    <li><a href=”config.php”>Konfigurasi</a></li>
    </ul>
    </nav>
    <script type=”text/javascript”>
    var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”../SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”../SpryAssets/SpryMenuBarRightHover.gif”});
    </script>
    <!–End Navigasi–>

  3. Paste kode tersebut ke file menu.php. Lalu lakukan perubahan (lihat warna merah).

    <nav>
    <ul id=”MenuBar1″ class=”MenuBarHorizontal”>
    <li><a href=”<?php echo base_url(); ?>admin/dasbor”>Dashboard</a> </li>
    <li><a href=”<?php echo base_url(); ?>admin/berita” class=”MenuBarItemSubmenu”>Berita ARA</a>
    <ul>
    <li><a href=”<?php echo base_url(); ?>admin/berita”>Data berita</a></li>
    <li><a href=”<?php echo base_url(); ?>admin/berita/tambah”>Tambah berita</a></li>
    </ul>
    </li>
    <li><a href=”<?php echo base_url(); ?>/admin/user” class=”MenuBarItemSubmenu”>User</a>
    <ul>
    <li><a href=”<?php echo base_url(); ?>admin/user”>Data User</a></li>
    <li><a href=”<?php echo base_url(); ?>admin/user/tambah”>Tambah User</a></li>
    </ul>
    </li>
    <li><a href=”<?php echo base_url(); ?>/dasbor/config”>Konfigurasi</a></li>
    </ul>
    </nav>
    <script type=”text/javascript”>
    var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarRightHover.gif”});
    </script>
    <!–End Navigasi–>

  4. Simpan kembali file menu.php tersebut

Membuat file footer.php (dalam folder tutorial_ci/application/views/admin/layout/)

File footer.php adalah bagian bawah dari tampilan website halaman dasbor.

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama footer.php dalam folder tutorial_ci/application/views/admin/layout/
  2. Copy code yang ada di file index.html yang ada dalam folder assets/admin mulai baris ke-51 sampai ke-55 (atau mulai dari <div class=”clearfix”> sampai dengan </html>). Seperti pada kode di bawah ini:

    <div class=”clearfix”></div>
    <footer>Web Design by Java Web Media – &copy; by Java Web Media </footer>
    </div>
    </body>
    </html>

  3. Paste kode tersebut di file footer.php
  4. Simpan file footer.php

Membuat file wrapper.php (di dalam folder tutorial_ci/application/views/admin/layout/)

File wrapper.php berfungsi untuk menyatukan seluruh elemen template yang telah dipisah-pisah tadi yang selainjutnya akan di-load di controller yang nanti akan kita buat.

Kursus Desain Web Development
Kursus Desain Web Development

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama wrapper.php dalam folder tutorial_ci/application/views/admin/layout/
  2. Ketik kode di bawah ini:

    <?php
    require_once(‘head.php’);
    require_once(‘header.php’);
    require_once(‘menu.php’);
    require_once(‘konten.php’);
    require_once(‘footer.php’);

  3. Simpan file wrapper.php

Membuat file konten.php (dalam folder tutorial_ci/application/views/admin/layout/)

Halaman atau file konten.php akan digunakan untuk me-load/menampilkan halaman utama di masing-masing modul.

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

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama konten.php dalam folder tutorial_ci/application/views/admin/layout/
  2. Ketik kode di bawah ini:

    <?php
    if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
    if($isi){
    $this->load->view($isi);
    }

  3. Simpan file konten.php

Membuat file dasbor_view.php (dalam folder tutorial_ci/application/views/admin/dasbor/)

Halaman dasbor akan menjadi halaman utama bagian backend atau administrator website Anda.

Belajar Code Igniter | Java Web Media
Belajar Code Igniter | Java Web Media

Ikuti langkah-langkah ini:

  1. Buat file PHP baru dengan nama dasbor_view.php dalam folder tutorial_ci/application/views/admin/dasbor/
  2. Ketik kode di bawah ini:

    <div class=”konten”>
    <h1>Halaman dasbor Code Iginter – Java Web Media</h1>
    </div>
    <!– End konten –>

  3. Simpan file dasbor_view.php

Membuat Controller untuk menampilkan halaman dasbor
File dasbor.php (dalam folder tutorial_ci/application/controllers/admin)

Langkah selanjutnya adalah membuat controller untuk menampilkan halaman dasbor agar bisa diakses melalui website Anda dengan alamat http://localhost/tutorial_ci/admin/dasbor/. Nama class yang digunakan adalah Dasbor.

Kursus Desain Web Depok
Kursus Desain Web Depok

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama dasbor.php di dalam folder tutorial_ci/application/controllers/admin/
  2. Ketik kode di bawah ini:

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

  3. Simpan file dasbor.php

Uji coba halaman dasbor

Langkah selanjutnya adalah mengetes halaman dasbor Anda dengan mengetikkan alamat http://localhost/tutorial_ci/admin/dasbor di browser Anda. Hasilnya harus seperti gambar di bawah ini:

Belajar Code Igniter di Java Web Media
Belajar Code Igniter di Java Web Media

Mengunduh source code Tutorial Code Igniter Part 4: Membuat halaman dasbor administrator

Anda dapat mengunduhnya di halaman ini yah: https://drive.google.com/file/d/0B5BhV6c89_2YVU5zdkZjVGFERE0/edit?usp=sharing

Note: tutorial lebih advanced daripada yang tersedia di sini bisa Anda ikuti dengan mendaftar kursus di Java Web Media

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