View adalah dokumentasi yang berkaitan dengan tampilan halaman, seperti CSS, HTML, PHP.
User Guide CodeIgniter Menjelaskan
View adalah segemen yang mengatur tampilan halaman website atau halaman fragmen, seperti header, footer, sidebar, dll. Dimulai dari tampilan paling sederhana, hingga tampilan paling fleksibel yang sudah tertanam di dalam framework CodeIgniter khsusnya. Jika Anda menghendaki jenis hirarki juga bisa, dengan cara membuat direktori baru di dalam direktori View.
Pokok Bahasan:
- Penanganan HTML
- Penanganan Tabel
- Penanganan Form
- Penanganan URL
- Latihan
Apa Kegunaan View?
Sepesialis segmen untuk mengatur tampilan aplikasi. Secara umum ada dua kategori desain yang memfasilitasi segmen view, yaitu:
Cara mengaktifkannya adalah dengan melakukan load terhadap helper dan library, contoh:
$this->load->helper("html");
$this->load->library("table");
Atau dimasukan ke dalam konfigurasi autoload.php, sehingga kita tidak perlu memasukannya lagi ke dalam class yang membutuhkannya, contoh:
$autoload['libraries'] = array("table");
$autoload['helper'] = array("html","form","url");
1. Penanganan HTML
br()
Fungsi ini berguna untuk membentuk tag baris html, atau untuk pindah baris. Contoh:
echo br(3);
Maka akan terbentuk kode HTML:
</br></br></br>
heading()
Fungsi ini berguna untuk membentuk tag header html (< h1 >, < h2 >, < h3 >). Contoh:
echo heading("Selamat Datang", 3);
Maka akan terbentuk kode HTML:
<h3>Selamat Datang</h3>
img()
Fungsi ini berguna untuk membentuk tag image html (< img >). Contoh:
<?php
$image_properties = array(
"src" => "images/logo.jpg",
"alt" => "Ini adalah logo perusahaan",
"width" => "100", "height" => "100"
);
echo img($image_properties);
?>
Maka akan terbentuk kode HTML:
<img src="images/logo.jpg" alt="Ini adalah logo perusahaan" width="100" height="100">
link_tag()
Fungsi ini berguna untuk membentuk tag link html (< link />). Contoh:
<?php
$link = array(
"href" => "css/printer.css",
"rel" => "stylesheet",
"type" => "text/css"
);
echo link_tag($link);
?>
Maka akan terbentuk kode HTML:
<link href="css/printer.css" rel="stylesheet" type="text/css">
nbs()
Fungsi ini berguna untuk membentuk tag “non-breaking spaces” html ( ). Contoh:
echo nbs(3);
Maka akan terbentuk kode HTML:
2. Penanganan Tabel
Class tabel menyediakan fungsi yang memungkinkan Anda membuat tabel HTML secara otomatis dari array atau satu set hasil database. Contoh:
a. Secara Langsung Menggunakan Array
<?php
$data = array (
array("NIM","Nama"),
array("07018111", "Bayu"),
array("07018123", "Dewi"),
);
echo $this->table->generate($data);
?>
Maka akan memberikan tampilan seperti berikut, masih polos karena tanpa sentuhan CSS. Anda hanya perlu memperhatikan bagian yang ditunjukan oleh anak panah.
Untuk membuatnya lebih menarik dan tampak seperti tabel, maka yang perlu kita lakukan adalah mengemasnya dengan template yang telah disediakan oleh CodeIgniter. Sebagai contoh, perhatikan perubahan code berikut:
<?php
/* NOTE!
Penambahan code template harus diletakan atau dipanggil di atas blok code tabel
*/
//code template
$template = array(
'table_open' => '<table border="1" cellpadding="4" cellspacing="0">',
'table_close' => '</table>'
);
$this->table->set_template($template);
//code tabel
$data = array (
array("NIM","Nama"),
array("07018111", "Bayu"),
array("07018123", "Dewi"),
);
echo $this->table->generate($data);
?>
Berikut perubahannya:
b. Menggunakan set_heading dan add_row
<?php
/* NOTE!
Penambahan code template harus diletakan atau dipanggil di atas blok code tabel
*/
//code template
$template = array(
'table_open' => '<table border="1" cellpadding="4" cellspacing="0">',
'table_close' => '</table>'
);
$this->table->set_template($template);
//code tabel 2. Menggunakan set_heading dan add_row
$this->table->set_heading("NIM", "Nama");
$this->table->add_row("07018111", "Bayu");
$this->table->add_row("07018222", "Dewi");
$this->table->add_row("07018333", "Andi");
echo $this->table->generate();
?>
Maka akan menampilkan:
c. Menggunakan Satu Set Hasil Database
Pada tahap ini, saya asumsikan bahwa Anda telah mengimport database nortwind. dan meng-setupnya di konfigurasi database CodeIgniter. ( \CodeIgniter\application\config\database.php ). Contoh:
<?php
/* NOTE!
Configurasi Database di CodeIgniter
*/
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'northwind',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
?>
Berikutnya Anda tinggal modifikasi file sebelumnya di folder View menjadi:
<?php
/* NOTE!
Penambahan code template harus diletakan atau dipanggil di atas blok code tabel
*/
//code template
$template = array(
'table_open' => '<table border="1" cellpadding="4" cellspacing="0">',
'table_close' => '</table>'
);
$this->table->set_template($template);
//code tabel 3. Menggunakan Satu Set Hasil Database
$query = $this->db->query('SELECT * FROM shippers'); //saya coba tampilkan tabel shippers
echo $this->table->generate($query);
?>
Berikut penampilannya:
3. Penanganan Form
CodeIgniter juga menyediakan beberapa fungsi form, yang bisa membantu Anda dalam membuat formulir, diantaranya:
form_open()
Berguna untuk membuat tag pembuka form ( < form > ). Contoh:
echo form_open("mahasiswa/simpan?);
Maka akan terbentuk kode HTML:
<form method="post" action="http://localhost/index.php/mahasiswa/simpan">
form_hidden()
Berguna untuk membuat tag input field hidden ( < input type=“hidden” > ). Contoh:
echo form_hidden("username","wawan");
Maka akan terbentuk kode HTML:
<input type="hidden" name="username" value="wawan">
form_input()
Berguna untuk membuat tag input field non hidden ( < input > ). Contoh:
echo form_input("nim","12131294");
Maka akan terbentuk kode HTML:
<input type="text" name="nim" value="12131294">
form_password()
Berguna untuk membuat tag input password ( < input type=“password”> ). Contoh:
echo form_password("user_pass");
Maka akan terbentuk kode HTML:
<input type="password" name="user_pass" value="">
form_upload()
Berguna untuk membuat tag input untuk upload file ( < input type=“file” > ). Contoh:
$data = array (
"name" => "foto",
"size" => "30",
"style" => "width:50%"
);
echo form_upload($data);
Maka akan terbentuk kode HTML:
<input type="file" name="foto" size="30" style ="width:50%">
form_textarea()
Berguna untuk membuat tag textarea ( < textarea > ). Contoh:
$data = array (
"name"=> "alamat",
"rows" => "3"
"cols" => "10"
);
echo form_textarea($data);
Maka akan terbentuk kode HTML:
<textarea name="alamat" rows="3" cols ="10"></textarea>
form_dropdown()
Berguna untuk membuat tag selection ( < select > ) menu dropdown (combo box). Contoh:
$option= array (
"satu" => "Kelompok 1",
"dua" => "Kelompok 2"
);
echo form_dropdown("kelompok", $option, "dua");
Maka akan terbentuk kode HTML:
<select name="kelompok">
<option value="satu">Kelompok 1</option>
<option value="dua" selected="selected">Kelompok 2</option>
</select>
form_submit()
Berguna untuk membuat tombol submit. Contoh:
echo form_submit("mysubmit", "Kirim");
Maka akan terbentuk kode HTML:
<input type="submit" name="mysubmit" value="Kirim">
form_close()
Berguna untuk membuat tag penutup form ( < / form > ). Contoh:
echo form_close();
Maka akan terbentuk kode HTML:
</form>
4. Penanganan URL
CodeIgniter juga menyediakan fungsi achor() untuk membangkitkan (generate) tag achor ( < a > ). Contoh:
echo anchor("dosen/hapus/3","Klik Disini");
Maka akan terbentuk kode HTML:
<a href="http://localhost/index.php/dosen/hapus/3">Klik Disini</a>
5. Latihan
Pada sesi ini, kami diminta untuk menampilkan data Employee dari database northwind. Maka yang perlu kita lakukan adalah melanjutkan MATERI SEBELUMNYA.
a. Membuat File Controller
Simpan file php dengan nama Employees,
<?php
class Employees extends CI_Controller{
public function __construct()
{
parent::__construct();
$this->load->model('Employee_model','EM'); //cara 1.
/*
Ada 2 cara untuk memanggil model:
cara 1, diload disetiap class yang membutuhkannya. sebagaimana diatas.
cara 2, diload secara otomatis di application\config\autoload.php :
Pada line 135, Anda bisa menambahkan semacam ini:
$autoload['model'] = array('Employee_model');
jika sudah disebutkan disini, maka tidak perlu disebutkan lagi disetiap construct.
Tambahan:
$autoload['model'] = array('Employee_model'=>'em');
'Employee_model'=>'em' -> 'em' digunakan untuk menyingkat pemangilan model di class lain
*/
}
public function index(){
/*echo "<h1>Data Employees</h1>";
$query = $this->Employee_model->get_employee();
foreach($query->result() as $row):
echo $row->EmployeeID.'. '.$row->FirstName ." ".$row->LastName;
echo "<br />";
endforeach;
*/
$data["title"] = "<h1>Data Employees</h1>";
$data["array_emp"] = $this->EM->get_employee();
$this->load->view('View_employees',$data);
}
}
?>
b. Membuat File Model
Simpan file php dengan nama Employee_model,
<?php
class Employee_model extends CI_Model{
public function get_employee(){
return $this->db->get("employees"); //cara 1
/*
Ada 2 cara untuk manajemen database class:
cara 1, sebagaimana diatas.
cara 2, menjalankan query secara lengkap --> $this->db->query('SELECT * FROM employees');
Apabila ada klausa tambahan :
cara 1, masih tetap --> $this->db->get('categories');
cara 2, $this->db->like(' CategoryName',' Beverages');
*/
}
}
?>
c. Membuat File View
Simpan file php dengan nama View_employees,
<?php
echo heading($title,3);
$template = array(
'table_open' => '<table border="1" cellpadding="4" cellspacing="0">',
'table_close' => '</table>'
);
$this->table->set_template($template);
$this->table->set_heading(
'No.',
'Full Name',
'Birth Date');
foreach($array_emp->result() as $row):
$this->table->add_row(
$row->EmployeeID,
$row->FirstName ." ".$row->LastName,
$row->BirthDate
);
endforeach;
echo $this->table->generate();
?>
d. Tampilkan
Menampilkan data employee dengan tabel
Tidak cukup sampai di situ, kami juga diberikan tantangan sebelum pulang untuk menampilkan data category beserta jumlah stoknya.
a. Membuat File Controller
Simpan file php dengan nama Categories,
<?php
class Categories extends CI_Controller{
public function __construct()
{
parent::__construct();
$this->load->model('Categories_model','EM'); //cara 1.
/*
Ada 2 cara untuk memanggil model:
cara 1, diload disetiap class yang membutuhkannya. sebagaimana diatas.
cara 2, diload secara otomatis di application\config\autoload.php :
Pada line 135, Anda bisa menambahkan semacam ini:
$autoload['model'] = array('Employee_model');
jika sudah disebutkan disini, maka tidak perlu disebutkan lagi disetiap construct.
Tambahan:
$autoload['model'] = array('Employee_model'=>'em');
'Employee_model'=>'em' -> 'em' digunakan untuk menyingkat pemangilan model di class lain
*/
}
public function index(){
/*echo "<h1>Data Employees</h1>";
$query = $this->Employee_model->get_employee();
foreach($query->result() as $row):
echo $row->EmployeeID.'. '.$row->FirstName ." ".$row->LastName;
echo "<br />";
endforeach;
*/
$data["title"] = "<h1>Data Categories</h1>";
$data["array_emp"] = $this->EM->data_categories();
$this->load->view('View_categories',$data);
}
}
?>
b. Membuat File Model
Simpan file php dengan nama Categories_model,
<?php
class Categories_model extends CI_Model{
public function data_categories(){
$sql = "SELECT
c.CategoryID,
c.CategoryName,
COUNT(*) AS jumlah
FROM
categories AS c JOIN products AS p
ON c.CategoryID=p.categoryID
GROUP BY c.categoryID";
return $this->db->query($sql);
}
}
?>
c. Membuat File View
Simpan file php dengan nama View_categories,
<?php
echo heading($title,3);
$template = array(
'table_open' => '<table border="1" cellpadding="4" cellspacing="0">',
'table_close' => '</table>'
);
$this->table->set_template($template);
$this->table->set_heading(
'No.',
'Category Name',
'Jumlah Product');
foreach($array_emp->result() as $row):
$this->table->add_row(
$row->CategoryID,
$row->CategoryName,
$row->jumlah
);
endforeach;
echo $this->table->generate();
?>
d. Tampilkan
Menampilkan data categories dengan tabel
Referensi
- User Guide CodeIgniter
- Modul Aplikasi Web Dinamis Lanjut - Konsep_View - Oleh Wahyu Widodo (Github:Wahyousoft).
