Panduan Menggunakan VIEW pada Codeigniter 3

 View adalah kode yang bertugas untuk membuat tampilan aplikasi. View berisi kode campuran dari PHP, HTML, JS, dan CSS. Apa yang kita lihat di aplikasi merupakan kode dari VIEW.


Aturan Penulisan View

View dibuat didalam folder application/views/  dan ada beberapa aturan penulisan view yang harus diperhatikan :

1. Cara penulisan nama file

Nama file harus ditulis dengan menggunakan huruf kecil dan jika terdiri dari dua suku kata, bisa dipisah dengan underscore.

Contoh :

detail_about.php  bukan DetailAbout 

overview.php  bukan over View

2. Cara Penulisan kode

File view bisa berisi lode PHP, HTML, CSS, dan JS. Tugas dari view sendiri adalah untuk menampilkan output. Sehingga kodenya banyak menggunakan echo. 

Contoh :

<?php echo $name ?>                 

Di view sangat tidak dianjurkan untuk melakukan query data, karena datanya akan didapatkan dari Controller.

A. Cara Load View dan Data 

View bisa di load dari controller dan juga view dengan fungsi $this->load->view()

Contoh :

$this->load->view('home_page.php');

Tanpa menggunakan ekstensi .php kita juga bisa meloadnya seperti berikut :

$this->load->view('home_page');  

B. Cara Menampilkan Data di View

Saat melakukan load view dengan data seperti ini :

$data['name'] = 'Yetty Vianney";

$this->load->view ('product.php',$data);

Untuk meanmpilkan isi data di dalam view dengan kode seperti ini :

<?php echo $name ?>

Variabel $name didapatkan $data, perhatikanlah disana ada key bernama name. Ini akan menjadi variabel di dalam view.

1. Shortcut untuk Echo 

Kita bisa memanfaatkan shortcut atau bentuk pendeknya dari echo, perhatikan kode berikut :

<?php echo $name ?>

Menjadi 

<?= $name ?>

Kedua kode ini sebenarnya sama, hanya saja menggunakan <?= akan lebih pendek ketimbang memakai <?php.

2. Percabangan di View

Pada controller kita load view dan mengirimkan data seperti ini

$data[user]='Yettyvianney';

$this->load->view('biodata', $data);

biodata ini diambil sesuai nama view-nya 

Lalu pada view, dapat membuat logika if/else seperti ini :

<?php

if(user === 'YettyVianney'){

echo "Welcome Admin";

} else {

echo "Hayy Everyone";

}

?>

Atau bisa juga menggunakan operator ternary seperti berikut :

<?= $user === 'Admin"? "Welcome Admin" : "Hayy Everyone"; ?>

Kadang kita juga akan menampilkan banyak kode HTML di dalam blok if/else, kita bisa melakukannya seperti ini :

<?php if ($user ==="admin"): ?>

<h1>Hello Admin<//h1>

<?php else: ?>

<h1> Hayy Everyone </h1>

<?php endif ?>

Bentuk sepertinini lebih mudah dibaca dikarenakan tidak menggunakan tanda kurung kurawal ({}) melainkan menggunakan endif untuk menutup percabnagan if/else.


3. Perulangan di View

Contoh :

$data['names'] = [

"Des",

"Yetty',

"Dhea"

];

$this->load->view('name', $data);


Maka di view kita bisa menggunakan perulangan for seperti ini :

<?php

for ($i = 0, $i < count($names); $i++)

{

echo $names[$i];

}

?>

Atau bisa juga menggunakan perulangan while seperti ini:

<?php

$i = 0;

while ($i < count($names))

{

echo $names[$i]

$i++;

}

?>

Tugas View 

1. Buatlah view dengan nama biodata


Masuk ke vhost > belajarcodeigneter.test > application lalu pilih views kemudian buat sebuah file views dengan nama biodata.php 

2. Buatlah kerangka HTML

<?php

class Dataku extends CI_Controller {

    public function index(){
        $data['nama'] = "Yetty Vianney";
        $data['nim'] = "202113035";
        $data['kelas'] = "TIF 2B";
        $data['usia'] = "20 Tahun";
        $data['ig'] = "yetty_vny";
        $this->load->view('biodata',$data);
    }
}

3. Lakukan parsing data dari controller


Buatlah sebuah data dari vhost > belajarcodeigneter.test > application kemudian pilih controllers lalu buat sebuah file dengan nama Dataku.php. Pastikan dalam membuat controllers harus dimulai dengan huruf besar.

Kemudian buatlah sourcode untuk controllers seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Cara Membuat View Pada Codeigniter 3</title>
</head>
<body>
 <h1> Selamat Datang </h1>
   <p>
    <?= 'Nama =' , $nama; ?></p>
    <p>
    <?= 'NIM =' , $nim; ?> </p>
    <p>
    <?= 'Kelas =' , $kelas; ?> </p>
    <p>
    <?= 'Usia =' , $usia; ?> </p>
    <p>
    <?= 'IG =' , $ig; ?> </p>
<h2> YOK SILAHKAN DI FOLLOW </h2>
</body>
</html>

Setelah itu masuk ke vhost > belajarcodeigneter.test > application kemudian pilih config lalu kemudian ubah nama controllernya sesuai nama controllers yang tadi telah dibuat yaitu Dataku.

$route['default_controller'] = 'dataku';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

Setelah itu panggil di chrome



Parsing data telah berhasil dilakukan....
Sekian dari saya semoga ilmunya bermanfaat yaaa, see u '(*v*)'


Comments

Popular posts from this blog

MENGENAL DAN MEMBUAT CONTROLLER MENGGUNAKAN METHOD VIEW, EDIT, DAN INDEX

MEMBUAT FORM LOGIN Dan FORM MESSAGE MENU UTAMA DI APLIKASI NETBEANS 8.2

MEMBUAT HALAMAN LOGIN DAN DASHBOARD PADA CODEIGNITER 3