0

0

0

share

#BelajarCodeigniter#ViewdanCSS#ControllerCodelgniter
0 Reaksi

0 Komentar

Belajar CodeIgniter #05: Cara Menggunakan View dan CSS pada CodeIgniter

Profile
Prasatya•

11 Februari 2025

Belajar CodeIgniter #05: Cara Menggunakan View dan CSS pada CodeIgniter

Belajar CodeIgniter #05 - CodeIgniter adalah salah satu framework PHP yang populer karena ringan, cepat, dan mudah digunakan, terutama bagi pemula. Framework ini menerapkan konsep MVC (Model-View-Controller), yang memisahkan logika bisnis (Model), tampilan (View), dan alur kontrol (Controller). Dalam seri tutorial ini, kita akan membahas lebih dalam tentang penggunaan View dalam CodeIgniter, termasuk bagaimana mengintegrasikan CSS agar tampilan aplikasi lebih menarik dan responsif.

Sebelum masuk ke materi utama, penting bagi kita untuk memahami mengapa penggunaan View dalam CodeIgniter sangat penting. Dengan menerapkan konsep pemisahan tampilan dari logika bisnis, pengembangan aplikasi menjadi lebih terstruktur, mudah untuk dipelihara, dan memungkinkan kerja sama tim yang lebih efisien. Seorang developer frontend dapat fokus pada tampilan aplikasi tanpa mengganggu logika backend yang dikembangkan oleh developer backend. Selain itu, dengan pemanfaatan CSS dalam View, kita dapat menciptakan tampilan antarmuka yang lebih modern dan menarik bagi pengguna.

Pada artikel ini, kita akan Belajar CodeIgniter pengertian View dalam CodeIgniter, cara menggunakannya, serta bagaimana mengintegrasikan CSS ke dalamnya. Dengan pemahaman yang baik tentang konsep ini, Anda akan lebih siap dalam membangun aplikasi web berbasis CodeIgniter yang profesional.

Baca Juga: Belajar CodeIgniter #01: Panduan Lengkap untuk Pemula

Apa Itu View di CodeIgniter?

View dalam CodeIgniter adalah bagian dari konsep MVC yang bertanggung jawab untuk menampilkan informasi kepada pengguna. View biasanya berupa halaman HTML yang dapat mencakup kode PHP untuk menampilkan data dari Controller. Dengan memisahkan View dari Controller dan Model, kita dapat lebih mudah mengelola tampilan aplikasi dan memastikan kode lebih terstruktur serta mudah diubah tanpa mempengaruhi logika utama aplikasi.

Belajar CodeIgniter, View digunakan untuk menampilkan data yang telah diproses oleh Controller. Misalnya, jika kita ingin menampilkan daftar pengguna dari database, Controller akan mengambil data dari Model, kemudian mengirimkannya ke View untuk ditampilkan. Dengan cara ini, kode tampilan tidak bercampur dengan logika bisnis, sehingga lebih mudah dikelola dan diperbarui.

Keuntungan utama menggunakan View di CodeIgniter adalah sebagai berikut:

  • Memisahkan tampilan dan logika aplikasi – Membantu menjaga struktur kode agar lebih bersih dan mudah dipahami.
  • Mempermudah kerja tim – Developer frontend dan backend dapat bekerja secara terpisah tanpa mengganggu satu sama lain.
  • Meningkatkan efisiensi pengembangan – Perubahan tampilan dapat dilakukan dengan cepat tanpa harus mengubah bagian logika bisnis aplikasi.
  • Mendukung penggunaan template – Dengan menggunakan View, kita dapat membuat template yang dapat digunakan kembali di berbagai bagian aplikasi.

Baca Juga: Belajar CodeIgniter #02: Persiapan Sebelum Mulai Belajar CodeIgniter

Struktur View dalam CodeIgniter

Di dalam CodeIgniter, file View biasanya disimpan dalam folder application/views/. Setiap file View dapat dipanggil dari Controller untuk ditampilkan di browser.

Contoh struktur folder:

application/
├── controllers/
│   ├── Welcome.php
├── views/
│   ├── header.php
│   ├── footer.php
│   ├── home.php

Membuat View Pertama di CodeIgniter

Mari kita buat View sederhana untuk menampilkan halaman utama aplikasi.

  1. Buka folder application/views/
  2. Buat file baru dengan nama home.php
  3. Tambahkan kode berikut di dalamnya:
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar CodeIgniter</title>
</head>
<body>
    <h1>Selamat Datang di Aplikasi CodeIgniter</h1>
    <p>Ini adalah halaman utama.</p>
</body>
</html>
  1. Tampilkan View dari Controller

Buka folder application/controllers/, lalu buka atau buat file Welcome.php. Kemudian tambahkan kode berikut:

<?php
class Welcome extends CI_Controller {
    public function index() {
        $this->load->view('home');
    }
}

Sekarang, jika Anda mengakses http://localhost/codeigniter/index.php/welcome, maka halaman home.php akan ditampilkan.

Baca Juga: Belajar CodeIgniter #03: Mengenal Konsep Arsitektur MVC dan Routing

Menggunakan CSS dalam View CodeIgniter

Agar tampilan lebih menarik, kita bisa menambahkan CSS ke dalam View. Ada dua cara untuk menambahkan CSS dalam CodeIgniter:

1. CSS Inline

Kita bisa langsung menuliskan CSS di dalam file View dengan tag <style>:

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
        }
    </style>
</head>

2. Menggunakan File CSS Eksternal

Lebih direkomendasikan untuk memisahkan CSS ke dalam file terpisah agar lebih rapi dan mudah dikelola.

  1. Buat folder assets/css/ di root proyek CodeIgniter
  2. Buat file baru style.css di dalam folder tersebut
  3. Tambahkan kode CSS berikut dalam style.css:
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    margin: 0;
    padding: 0;
}
h1 {
    color: #333;
}
  1. Panggil file CSS di View dengan base_url()
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/style.css'); ?>">
</head>
  1. Pastikan base_url() telah diatur dalam config.php

Buka application/config/config.php, lalu ubah bagian ini:

$config['base_url'] = 'http://localhost/codeigniter/';

Setelah melakukan langkah-langkah di atas, buka kembali halaman http://localhost/codeigniter/index.php/welcome, dan Anda akan melihat tampilan yang lebih menarik dengan CSS yang telah diterapkan.

Baca Juga: Belajar CodeIgniter #04: Memahami Controller Lebih Dalam Untuk Pemula

Kesimpulan

Dalam artikel ini, kita telah mempelajari Belajar CodeIgniter konsep dasar View dalam CodeIgniter dan bagaimana menggunakannya untuk menampilkan data kepada pengguna. Dengan menerapkan konsep pemisahan tampilan dari logika aplikasi, kita dapat mengembangkan aplikasi yang lebih terstruktur, mudah dikelola, dan efisien dalam pengembangannya.

Kita juga telah Belajar CodeIgniter bagaimana mengintegrasikan CSS ke dalam View, yang memungkinkan kita untuk meningkatkan tampilan aplikasi agar lebih menarik dan profesional. Dengan pemahaman ini, Anda dapat mulai membangun aplikasi CodeIgniter dengan tampilan yang lebih baik dan lebih mudah dikustomisasi.

Jika Anda ingin lebih Belajar CodeIgniter dan berdiskusi dengan komunitas, bergabunglah dengan komunitas CodePolitan! Di sana, Anda bisa belajar, bertanya, dan berbagi pengalaman dengan sesama pengembang. Jangan lewatkan kesempatan untuk menjadi bagian dari komunitas yang aktif dan suportif!

Selamat belajar dan terus eksplorasi kemampuan Anda dalam CodeIgniter!

0

0

0

share