Membuat halaman login administrator

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.

 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.


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.

 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.

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’
   );
   $this->load->view(‘admin/login_view’,$data);
   }
   }

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: