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

Tutorial Codeigniter 3 – Membuat Halaman Login: Bagian 2 – Membuat Controller dan View Halaman Statis

Posted on July 31, 2015July 31, 2015
Halaman Dasbor Java Web Media
Halaman Dasbor Java Web Media

Pada tutorial Bagian 2 ini, Anda akan membuat dua halaman utama:

  1. Controller dan View halaman Login, di halaman ini akan ada form login
  2. Controller dan View halaman Dasbor, ini adalah halaman yang akan diproteksi dengan username dan password dan nantinya hanya akan dapat diakses jika sudah melakukan login dengan benar.

Langkah Persiapan

Sebelum tutorial ini dimulai, Anda harus mendownload:

  1. File hasil akhir Tutorial Bagian 1, silakan download di: https://drive.google.com/file/d/0B5BhV6c89_2YYU5wS3ZHaDUweEU/view?usp=sharing
  2. Membaca tutorial Tutorial Codeigniter 3 – Membuat Halaman Login: Bagian 1 – Installasi dan Konfigurasi Awal Codeigniter 3

Anda dapat mendownload hasil akhir dari tutorial Bagian 2 ini di: https://drive.google.com/file/d/0B5BhV6c89_2YNFEwSzBnaGEwM2c/view?usp=sharing.

Membuat Controller Login.php

  1. Buat file PHP baru dalam folder login/application/controllers
  2. Simpan dengan nama Login.php (ingat, huruf pertama harus besar. Ini aturan Codeigniter)

    Membuat Controller Login - Kursus Web Design Depok
    Membuat Controller Login – Kursus Web Design Depok
  3. Lalu buka file Login.php tersebut, hapus kode yang ada jika ada
  4. Lalu ketik kode ini:

    Controller Login - Kursus Web Programming Java Web Media
    Controller Login – Kursus Web Programming Java Web Media
  5. Simpan file tersebut

Membuat view login_view.php

Secara default, tutorial ini telah memberikan desain halaman login yang dapat diakses di http://localhost/login/assets/login.html. Anda dapat meng-copy kode dasarnya dari file login.html yang ada dalam folder assets tersebut.

  1. Buat file PHP baru di folder login/application/views
  2. Simpan dengan nama login_view.php

    Membuat tampilan login - Kursus Web Programming Depok
    Membuat tampilan login – Kursus Web Programming Depok
  3. Hapus seluruh kode di dalamnya jika ada
  4. Kemudian buka file login.html yang ada di folder login/assets
  5. Copy seluruh kode dalam file login.html tersebut
  6. Lalu Paste ke dalam file login_view.php
  7. Kemudian lakukan perubahan sebagai berikut:
    1. Pada bagian link icon, ubah menjadi href=”<?php echo base_url() ?>assets/images/icon-javawebmedia.png”
    2. Pada bagian <title>, ubah menjadi <title><?php echo $title ?></title>
    3. Pada baian link CSS, ubah menjadi href=”<?php echo base_url() ?>assets/css/style.css”
    4. Pada bagian action form, ubah menjadi action=”<?php echo base_url(‘login’) ?>”

      Login View Codeigniter - Kursus Graphic Desain Depok
      Login View Codeigniter – Kursus Graphic Desain Depok
  8. Simpan file tersebut

Melakukan uji coba halaman login

Buka browser Anda lalu akses http://localhost/login/login. Lihat hasilnya akan seperti gambar di bawah ini:

Halaman Login Administrator - Codeigniter Tutorial Depok
Halaman Login Administrator – Codeigniter Tutorial Depok

Membuat template untuk halaman yang diproteksi

Sebenarnya kita bisa saja membuat halaman admin dengan cara yang mirip dalam membuat halaman login. Namun dalam tutorial ini, halaman yang diproteksi akan dibuat dengan konsep template dimana masing-masing bagian halaman akan dipotong-potong misalnya menjadi head, header, nav, konten, footer dan sebagainya.

Membuat folder layout

Buat folder baru dengan nama layout di dalam folder login/application/views. Folder ini akan digunakan untuk menyimpan file-file template.

Folder Layout Template - Belajar Web Programming Java Web Media
Folder Layout Template – Belajar Web Programming Java Web Media

Menyiapkan file-file template

File-file template akan berisi potongan-potongan kode dari keseluruhan halaman yang akan menjadi satu tampilan.

File-file Layout Codeigniter - Kursus Web Java Web Media
File-file Layout Codeigniter – Kursus Web Java Web Media
  1. Buat file-file PHP ini di dalam folder application/views/layout
    1. head.php, berisi data informasi title, css dan icon
    2. header.php, berisi informasi header dan navigasi menu
    3. konten.php, berisi informasi halaman yang akan diakses
    4. footer.php, beris data informasi footer website
    5. wrapper.php, berfungsi untuk menggabungkan file-file layout
  2. Buka file-file tersebut, lalu hapus kode-kode yang ada jika ada sehingga menjadi kosong
Menyiapkan file head.php
  1. Buka file index.html dalam folder login/assets (pastikan Anda tidak melakukan perubahan sama sekali pada file index.html ini karena akan menjadi acuan dasar baris kode)
  2. Buka file head.php dalam foler login/application/views/layout
  3. Lalu Copy kode baris ke-1 sampai ke-11 yang ada di file index.html
  4. Lalu Paste di file head.php
  5. Kemudian lakukan perubahan sehingga menjadi seperti gambar di bawah ini:

    File head.php Codeigniter - Kursus Web Development Depok
    File head.php Codeigniter – Kursus Web Development Depok
  6. Simpan file
Menyiapkan file header.php
  1. Buka file index.html di folder login/assets
  2. Buka file header.php di folder application/views/layout
  3. Copy kode baris ke-12 sampai ke-25 di file index.html
  4. Lalu Paste di file header.php
  5. Kemudian lakukan perubahan sehingga seperti gambar di bawah ini:

    File Header.php Codeigniter - Kursus PHP MySQL Java Web Media Depok
    File Header.php Codeigniter – Kursus PHP MySQL Java Web Media Depok
  6. Simpan file
Menyiapkan file footer.php
  1. Buka file index.html di folder login/assets
  2. Buka file footer.php di folder application/views/layout
  3. Copy kode baris ke-26 sampai ke-32 di file index.html
  4. Lalu Paste di file footer.php

    File Footer.php Codeigniter - Kursus HTML5 dan CSS3 Java Web Media Depok
    File Footer.php Codeigniter – Kursus HTML5 dan CSS3 Java Web Media Depok
  5. Simpan file
Menyiapkan file konten.php
  1. Buka file konten.php di folder login/application/views/layout
  2. Hapus semua kode yang ada (jika ada)
  3. Lalu ketik kode ini:

    File Konten.php Codeigniter - Kursus Programming Web Depok
    File Konten.php Codeigniter – Kursus Programming Web Depok
  4. Simpan file
Menyiapkan file wrapper.php
  1. Buka file wrapper.php di folder login/application/views/layout
  2. Hapus semua kode yang ada (jika ada)
  3. Lalu ketik kode ini:

    File wrapper.php Codeigniter - Kursus Framework PHP Depok
    File wrapper.php Codeigniter – Kursus Framework PHP Depok
  4. Simpan file

Membuat view dasbor_view.php

File dasbor_view.php akan berisi file utama tampilan dasbor.

  1. Buat file PHP baru di folder login/application/views
  2. Simpan dengan nama dasbor_view.php
  3. Hapus semua kode yang ada (jika ada)
  4. Lalu ketik kode di bawah ini
    File dasbor_view.php Codeigniter - Kursus Web Programming Java Web Media
    File dasbor_view.php Codeigniter – Kursus Web Programming Java Web Media

    File dasbor_view.php Codeigniter - Kursus Web Desain Depok
    File dasbor_view.php Codeigniter – Kursus Web Desain Depok
  5. Simpan file

Membuat controller Dasbor.php

Controller Dasbor.php akan berisi fungsi untuk menampilkan halaman dasbor. Halaman ini nantinya hanya dapat diakses jika sudah login.

  1. Buat file PHP baru di folder login/application/controllers
  2. Simpan dengan nama Dasbor.php (huruf pertama besar/capital)

    File Dasbor.php Codeigniter - Kursus Web Depok
    File Dasbor.php Codeigniter – Kursus Web Depok
  3. Buka file tersebut lalu hapus semua kode yang ada (jika ada)
  4. Lalu ketik kode ini:

    Controller Dasbor Codeigniter - Kursus Laravel Depok
    Controller Dasbor Codeigniter – Kursus Laravel Depok
  5. Simpan file

Melakukan pengetesan

Anda dapat mengetes halaman Dasbor dengan mengakses http://localhost/login/dasbor. Lihat hasilnya di gambar berikut ini:

Halaman Dasbor Java Web Media
Halaman Dasbor Java Web Media

Mengubah Route Utama

Secara default Codeigniter mengalihkan halaman utama website ke controller Welcome. Nah kita dapat mengubahnya sehingga ketika diakses maka yang muncul adalah halaman Dasbor.

  1. Buka file routes.php di folder application/config
  2. Lalu ubah kode yang semula: $route[‘default_controller’] = ‘welcome’;
  3. Menjadi kode ini: $route[‘default_controller’] = ‘dasbor’;
Setting routes.php Codeigniter - Kursus Web Depok Java Web Media
Setting routes.php Codeigniter – Kursus Web Depok Java Web Media

Untuk mengetes apakan routes sudah benar apa belum, cobalah akses http://localhost/login dan http://localhost/login/dasbor. Pastikan tampilan keduanya sama.

Mendownload hasil akhir

Anda dapat mendownload hasil akhir dari tutorial Bagian 2 ini di: https://drive.google.com/file/d/0B5BhV6c89_2YNFEwSzBnaGEwM2c/view?usp=sharing.

Materi lebih mendalam dapat Anda ikuti dengan mengikuti kursus di Java Web Media (www.javawebmedia.com) atau menghubungi kami melalui 0857-1510-0485.

11 thoughts on “Tutorial Codeigniter 3 – Membuat Halaman Login: Bagian 2 – Membuat Controller dan View Halaman Statis”

  1. Oris says:
    August 9, 2015 at 7:56 pm

    Kang, sudah sampai pada tahap pengetesan dasrbor, Ini kenapa dasbor_view nya tidak kepanggil?

    http://i.imgur.com/wHBIs13.jpg

    Reply
  2. Sonny Setiawan says:
    September 30, 2015 at 1:44 am

    kang , ini login ndak connect ke database sama sekali yaa

    Reply
  3. Valent says:
    November 24, 2015 at 4:28 am

    Kang saya mau nanya, saya sudah sampai tahap uji coba tampilan lpgin, tapi ga sama hasilnya kya yang tampilan login diatas, kenapa yaa mas, Terima kasih

    Reply
  4. Krystyna Fortin says:
    June 1, 2016 at 2:53 am

    Hello there! This blog post couldn’t be written any better! Looking through this post reminds me of my previous roommate! He constantly kept preaching about this. I’ll forward this post to him. Pretty sure he’s going to have a great read. Thanks for sharing!

    Reply
  5. widi says:
    August 19, 2016 at 7:59 am

    mantap mass tutorial nya

    Reply
  6. Keren says:
    October 31, 2016 at 6:11 am

    Makasihh banyak tutorialnya mas. Keren!!

    Reply
  7. Indira Masel says:
    January 6, 2017 at 6:36 am

    Great post.

    Reply
  8. Callie Restrepo says:
    February 28, 2017 at 6:50 pm

    Very good article. I’m experiencing some of these issues as well..

    Reply
  9. Felipa Busch says:
    March 14, 2017 at 10:08 am

    Dropping on Oct.

    Reply
  10. Hendra says:
    December 20, 2018 at 8:10 am

    Terimkasih mas, sebelumnya artikelnya sangat membantu.

    saya ingin bertanya,
    yang di controller Dasbor.php nya, yang array “isi” itu jika kita ingin load halaman user misalnya, berarti kita buat function baru ya di situ dengan menambahkan isi = user_view (misalnya).

    mohon penjelasannya mas,

    Reply
  11. A says:
    August 2, 2019 at 8:26 pm

    file dasbor_view.php harusnya ada di folder views bukan di folder layout

    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

  • DISADVANTAGES OF THE PHP LANGUAGE
  • Bootstrap Version 5: What Should We Expect?
  • Perbedaan CSS, LESS dan SASS
  • Tren Teknologi 2020 Kecerdasan Buatan dan 5G Berkembang Pesat
  • Mengetahui Pekerjaan System Analyst

Categories

  • Adobe Illustrator
  • 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

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