Halaman Login Kursus Web Design
Halaman Login Kursus Web Design

Pada tutorial kali ini, Anda akan masih akan belajar membuat halaman statis dengan menggunakan framework Code Igniter, yaitu halaman login administrator.

Sebelum memulai 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. Mengunduh hasil akhir tutorial Part 3 bisa diunduh di sini: https://drive.google.com/file/d/0B5BhV6c89_2YNk9SMXlmNDVnSjQ/edit?usp=sharing
  5. Untuk referensi, Anda dapat mengunduh source code hasil akhir Tutorial Part 4: https://drive.google.com/file/d/0B5BhV6c89_2YZWRiQnM1c1R1elE/edit?usp=sharing

Langkah persiapan untuk VIEW: membuat folder khusus untuk admin

Langkah pertama adalah membuat folder yang berfungsi untuk mengumpulkan seluruh halaman backend/administrator.

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

Ikuti langkah-langkah berikut ini:

  1. Buka folder tutorial_ci/application/views/
  2. Buat folder baru dengan nama admin di dalam folder tersebut
  3. Lalu setelah folder admin dibuat, buka folder tutorial_ci/application/views/admin tersebut
  4. Buat folder lagi di dalamnya dengan nama layout

Membuat view untuk login (login.php di folder tutorial_ci/application/views/admin/)

Tutorial ini telah menyediakan desain halaman login yang bisa dilihat di file login.html yang ada di folder tutorial_ci/assets/admin. Langkah selanjutnya adalah mengubah halaman statis tersebut untuk bisa diintegrasikan dengan framework Code Igniter.

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

Berikut langkah-langkahnya:

  1. Buat file baru dengan nama login_view.php di dalam folder tutorial_ci/application/views/admin/
  2. Buka file login.html yang ada di folder tutorial_ci/assets/admin/
  3. Copy seluruh kode yang ada dalam file login.html tersebut
  4. Paste kode tersebut ke dalam file login_view.php
  5. Masih di file login_view.php. Lalu lakukan perubahan kode di bawah ini:
    <link href="../images/javawebmedia.png" rel="shortcut icon">
    <link href="../css/style-admin.css" rel="stylesheet" type="text/css">

    Dengan menambahkan base_url Code Igniter sehingga kodenya berubah menjadi:

    <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">
  6. Simpan file login_view.ph tersebut

Langkah persiapan untuk CONTROLLER

Langkah berikutnya adalah membuat folder khusus untuk menyimpan seluruh file controller yang terkait dengan aktivitas halaman administrator atau backend dari website Anda. Seluruh controller halaman administrator nantinya akan disimpan dalam folder admin.

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

Langkah-langkahnya adalah sebagai berikut:

  1. Buka folder tutorial_ci/application/controllers/
  2. Buat folder baru dalam folder tersebut dengan nama folder admin

Membuat controller untuk menampilkan halaman login

Langkah berikutnya adalah membuat controller untuk menampilkan halaman login yang telah dibuat view-nya/tampilannya. Nama class yang digunakan adalah Login.

Kursus Desain Web Code Igniter Depok
Kursus Desain Web Code Igniter Depok

Ikuti langkah-langkah berikut ini:

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

    <?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
    class Login extends CI_Controller {
    public function index() {
    $data=array(‘title’=>’Login Administrator’,
    ‘isi’ =>’admin/login_view’

  3. Simpan file login.php tersebut

Uji coba menampilkan halaman login

Langkah selanjutnya adalah melakukan uji coba untuk menampilkan halaman login tersebut. Ada dua cara untuk menampilkannya, yaitu:

  1. Cara 1: Langsung mengetikkan alamat http://localhost/tutorial_ci/admin/login di browser
  2. Cara 2: Mengklik link navigasi Login yang ada di halaman utama website

Hasil dari tutorial Part 4 ini adalah seperti gambar di bawah ini:

Halaman Login Kursus Web Design
Halaman Login Kursus Web Design

Download hasil akhir Tutorial Code Igniter Part 4: Membuat halaman login administrator (https://drive.google.com/file/d/0B5BhV6c89_2YZWRiQnM1c1R1elE/edit?usp=sharing)


  1. Hi my family member! I want to say that this post is amazing, nice written and come with approximately all important infos. I would like to peer extra posts like this .

  2. Just wish to say your article is as astounding. The clearness on your put up is just great and i can suppose you’re knowledgeable in this subject. Well with your permission allow me to snatch your RSS feed to stay updated with coming near near post. Thank you one million and please continue the gratifying work.

  3. I do not know whether it’s just me or if perhaps everybody else experiencing issues with your blog. It appears as though some of the text on your posts are running off the screen. Can somebody else please comment and let me know if this is happening to them too? This could be a issue with my web browser because I’ve had this happen before. Cheers

  4. Hi there it’s me, I am also visiting this site on a regular basis, this web site is in fact pleasant and the visitors are truly sharing pleasant thoughts.

  5. This is very attention-grabbing, You are a very professional blogger. I’ve joined your feed and sit up for looking for more of your magnificent post. Also, I have shared your web site in my social networks

  6. I’ve been browsing on-line more than 3 hours as of late, but I never found any interesting article like yours. It is pretty worth sufficient for me. In my opinion, if all site owners and bloggers made good content as you probably did, the internet will be much more useful than ever before.

  7. Kayanya yang terakhir di controller salah ya mas ? Seharusnya admin/layout/login_view soalnya sebelumnya kan ada folder layout ?

    1. Kayaknya ga salah deh mas, klu di liat tutorialnya login view ada di dalam folder tutorial_ci/application/views/admin/ bukan di tutorial_ci/application/views/admin/layout

      Keep share admin

  8. With free MP3 music downloads, you can sample the work of new artist, listen to a few tracks in an album, or listen to bits of a new single, before going out to the record store to buy the CD. Many owners wonder, “How can I get free i – Tunes for my i – Pod. One great source of free and legal songs is creative commons licensed songs.

  9. Magnificent beat ! I wish to apprentice at the same time as you amend your website, how could i subscribe for a blog website? The account helped me a applicable deal. I were a little bit acquainted of this your broadcast offered vivid clear concept

  10. Los ejemplos abundan. , Cuba, Ecuador, El S., Guatemala, Ecuatorial, Honduras, México, Nicaragua, Panamá, Paraguay, Perú, Puerto Rico, R. , Uruguay, Venezuela, Canadá, E.U., Filipinas, Gibraltar, Marruecos, Francia, Y al cabo de un minuto, exactamente la misma persona me invita al chat.

  11. Dos personas que apenas se conocen y dan el paso de conectar en una página como Mas40. , Cuba, Ecuador, El S., Guatemala, G. , Honduras, México, Nicaragua, Panamá, Paraguay, Perú, Puerto Rico, Dominicana, Uruguay, Venezuela, Canadá, USA, Filipinas, Gibraltar, Marruecos, Francia, Ahora, y desde hace ya tiempo, la revolución de internet ha dado paso a los encuentros on-line. Solo se tiene que disponer de untableta un simple smartphone.

  12. The evil witch from the Disney film “Sleeping Beauty” now has a backstory of her own. Gone were the days television was use to be a big idiot box with only few channels. If you can’t find a video online that you can actually watch and see clearly enough to enjoy it.

  13. Thank you, I have just been searching for info about this subject for ages and yours is the best I have discovered till now. However, what concerning the bottom line? Are you sure concerning the supply?

  14. ” They hold bare knuckle brawls in various areas of town, and their group expands quickly. And e – Each year two representatives are chosen at random each year from each district and they go for a televised fight. For example, English movie ‘The Reader’ had bagged the Golden Globe Awards for the best actress category.

  15. I think that what you posted made a ton of sense. But, consider this, suppose you added a little information? I am not saying your information is not good., however what if you added something that makes people want more? I mean Tutorial Code Igniter Part 4: Membuat halaman login administrator is a little boring. You might peek at Yahoo’s front page and note how they create article titles to grab people interested. You might add a video or a picture or two to get people excited about what you’ve got to say. Just my opinion, it could make your website a little livelier.

  16. Thanks for ones marvelous posting! I genuinely enjoyed reading it, you could be a great author.I will ensure that I bookmark your blog and will eventually come back sometime soon. I want to encourage you to ultimately continue your great job, have a nice day!

  17. Although they come in several risks for your investment, your brand-new home base venture will bring about endless challenges and learning opportunities. There a variety of those that are qualified for jobs although the efforts are apparently absent. Many overseas veterinary locums have been in this case, and also a vehicle is crucial to get a rural practice.

  18. An outstanding share! I have just forwarded this onto a colleague who has been doing a little research on this. And he actually ordered me breakfast because I found it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanx for spending the time to discuss this matter here on your internet site.

    1. supaya ke load di bagian file controller yang login.php itu ditambahkan seperti ini


  19. ane ketik alamat : http://localhost/tutorial_ci/admin/login

    koq ane jadi error gini gan : T_T

    syntax error, unexpected ‘direct’ (T_STRING) in C:\wamp\www\codeigniter\application\controllers\admin\login.php on line 1

    Call Stack
    # Time Memory Function Location
    1 0.0000 142840 {main}( ) ..\index.php:0
    2 0.0010 179064 require_once( ‘C:\wamp\www\codeigniter\system\core\CodeIgniter.php’ ) ..\index.php:202

    padahal dari penamaan , penempatan , source udah sama persis

    cuman bedahnya ane make wampp bukan xampp

  20. Kenapa pas saya login jd error,

    Object not found!

    The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

    If you think this is a server error, please contact the webmaster.
    Error 404

    trus link di browser jadi gini, http://localhost/dyah/admin/login.php
    ada yg tau solusinya??

  21. Ditutorial 4 juga muncul :
    Parse error: syntax error, unexpected ‘direct’ (T_STRING) in C:\xampp\htdocs\ci\application\controllers\admin\login.php on line 1
    Kenapa ini yah?

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.