Expert's Corner

MVC Adalah: Pengertian, Fungsi, Konsep, Cara Kerja, Kelebihan, dan Contohnya

Published on
Min read
5 min read
time-icon
Mauditalani

Content Writer with 1+ year experience | Interested in Copywriting, Social Media, and Design

MVC_Adalah.jpg

MVC adalah salah satu konsep yang biasanya dipakai dalam framework populer seperti Laravel dan CodeIgniter. Jika kamu belajar coding, tentu istilah framework tidak terasa asing lagi. Framework merupakan kerangka kerja yang berguna untuk membantu Developer menuliskan kode lebih terstruktur dan rapi.

Framework membutuhkan sebuah konsep pembangunan aplikasi web dan mobile, agar prosesnya lebih maksimal. Salah satu konsep yang populer dan biasa dipakai adalah MVC. MVC adalah singkatan dari model, view, dan controller yang masing-masing memiliki tugasnya sendiri. Untuk lebih jelasnya mengenai pengertian, fungsi, konsep, cara kerja, kelebihan hingga contoh dari MVC, simak pembahasannya di bawah ini.

Baca juga: 12 Bahasa pemrograman yang paling relevan untuk dipelajari 2022

Pengertian MVC


MVC adalah konsep desain arsitektur dengan tiga komponen utama. (sumber: pexels)

MVC adalah konsep desain arsitektur dengan cara kerja memisahkan aplikasi menjadi tiga komponen utama, yakni model, view, dan controller. Ketiga komponen ini dibangun untuk menangani suatu aspek pengembangan aplikasi tertentu. MVC menjadi konsep yang populer, karena dinilai dapat mempercepat tugas Developer untuk pembangunan aplikasi web ataupun mobile.

Bahkan, karena kecepatannya hingga dianggap efektif dalam membantu pembangunan aplikasi, MVC sudah banyak diterapkan pada beberapa framework PHP, seperti Laravel, CodeIgniter, Zend, dan Symfony. Di samping itu, adapun fungsi MVC yang perlu diketahui.

Fungsi MVC


Fungsi MVC adalah mendukung pemeliharaan dan pengembangan aplikasi. (sumber: shutterstock)

Pada dasarnya fungsi utama MVC adalah mendukung proses pengembangan aplikasi web atau mobile menjadi lebih cepat. Kenapa bisa lebih cepat? Karena MVC memisahkan aplikasi menjadi tiga bagian, sehingga orang yang mengerjakannya pun lebih banyak. Pada bagian model dan controller biasanya akan ditangani oleh Back End Developer. Sementara itu, untuk bagian view akan dikerjakan oleh Front End Developer bersama tim dari UI/UX.

Tak hanya itu saja, masih ada fungsi lain dari MVC yang tak kalah hebatnya, seperti:

  • Penyelesaian bug atau error jadi lebih mudah ditangani. Adanya pemisahan aplikasi pada konsep MVC membuat Developer lebih fokus menangani error yang terjadi pada bagiannya masing-masing.
  • Pemeliharaan aplikasi bisa dilaksanakan lebih cepat. Adanya MVC membantu tim Developer untuk memelihara atau mengembangkan suatu bagian dari aplikasi. Contoh jika ingin menambahkan fitur, “tambahkan diskon” pada aplikasi toko online. Tim Developer hanya perlu mengubah dan menambahkan kode pada script.
  • Efektif waktu saat melakukan testing. Hal yang perlu dilakukan untuk memastikan apakah aplikasi yang dibuat sudah bisa dipakai adalah dengan melakukan testing. Umumnya, testing dilakukan setelah seluruh pembuatan aplikasi telah selesai. Namun, pada konsep MVC kamu bisa menjalani testing pada bagian mana pun yang telah siap, tanpa menunggu semuanya selesai.

Baca juga: Perbedaan back-end, front-end, dan full-stack developer

Konsep dasar MVC


Konsep dasar MVC adalah bagian yang terdiri dari tiga, yakni model, view, dan controller. (sumber: shutterstock)

Seperti penjelasan sebelumnya, MVC adalah konsep yang terpisah menjadi tiga bagian, yakni model, view, dan controller. Tiga komponen ini sebenarnya mempunyai pengertian dan tugasnya masing-masing dalam mendukung pembangunan aplikasi web atau mobile. Berikut pembahasan lebih lanjut mengenai konsep dasar dari tiga komponen MVC.

1. Model

Komponen model berhubungan dengan database dan interaksi. Model umumnya merepresentasikan struktur data dari suatu aplikasi dengan bentuk basis data seperti file teks, file XML, atau web service. Model menentukan data apa yang harus ada di dalam aplikasi. Jika suatu keadaan aplikasi berubah, model akan memberitahu tampilan dan controller.

Apabila masih kurang paham, mudahnya begini, contoh suatu aplikasi web toko online mempunyai fitur barang favorit atau keranjang belanja. Model yang akan menentukan apa saja data yang terdapat pada barang favorit atau keranjang belanja tersebut, misalnya harga, nama barang, nama toko, jumlah dan lainnya.

2. View

Komponen kedua dari konsep MVC adalah view. View menjadi bagian yang berkaitan langsung dengan tampilan pada pengguna atau menangani presentation logic. Pada suatu aplikasi web, view berbentuk file template HTML yang diatur oleh controller.

View akan menentukan bagaimana daftar disajikan pada pengguna dan juga menerima data yang perlu ditampilkan dari model. Meski begitu, view tidak memiliki akses langsung untuk mencampuri bagian model.

3. Controller

Konsep terakhir dari bagian MVC adalah controller. Controller berisikan logika yang dapat memperbarui model atau tampilan sebagai respon dari tindakan pengguna aplikasi. Tugas controller sebenarnya cukup banyak, yakni menyediakan variabel yang akan tampil pada bagian view, menyediakan penanganan error, mengerjakan proses logika aplikasi, melakukan validasi, dan memanggil model untuk akses ke basis data.

Lebih mudahnya, controller menjadi bagian yang bertugas untuk menghapus atau menambahkan suatu barang pada toko online. Bila kamu memutuskan untuk menghapus barang dari keranjang belanjaan toko online, maka controller perlu pembaruan model lalu menerima input, kemudian memanipulasi model sesuai keinginan pengguna, baru ditampilkan pada bagian view.

Namun, controller juga bisa langsung memperbarui tampilan tanpa membutuhkan model. Contohnya, saat pengguna ingin mengubah daftar barang sesuai abjad. Bisa dikatakan bahwa controller merupakan ‘otak’ dari semua bagian MVC.

Baca juga: Mau lebih handal? Intip 10 situs belajar PHP di sini!

Cara kerja MVC


MVC memiliki cara kerja dengan proses yang cukup unik. (sumber: pexels)

Setelah mengetahui fungsi dan konsep dasar, selanjutnya ada cara kerja dari MVC yang punya proses cukup unik. MVC adalah konsep desain arsitektur yang berfungsi sebagai pendukung pembangunan suatu aplikasi web atau mobile. Selama masa percobaan atau testing aplikasi, terdapat cara kerja MVC yang perlu diketahui, di antaranya:

1. View akan menampilkan user interface aplikasi

Pada aplikasi uji coba konsep MVC, view pertama kali akan menampilkan user interface dan informasi tambahan lain yang terdapat di aplikasi pada pengguna. Tahap ini harus dilakukan semenarik mungkin, karena tampilan awal sebuah aplikasi menjadi penentu pengguna menyukainya atau tidak.

Ketika pengguna melakukan request di aplikasi, view akan menampung hal tersebut dan melanjutkannya ke bagian controller. Apabila sudah dilanjutkan, controller menerima request aplikasi dari bagian view.

2. Controller memberikan instruksi pada model

Sesudah menerima request aplikasi dari view, controller perlu memberikan instruksi pada model untuk menyiapkan informasi yang berkaitan dengan permintaan bagian view.

Setelah menemukan informasi yang berkaitan dengan permintaan bagian view, model tidak bisa langsung mengirimkannya begitu saja ke controller. Model perlu mengelola informasi yang telah terkumpul di database. Hal ini dilakukan untuk menyaring kembali mana informasi yang benar-benar penting dan tidak.

3. Model menyerahkan hasil pengolahan informasi database

Saat mengelola informasi di database, model tak melakukannya sendirian saja, ada bantuan logika pemrograman yang membuat proses pengelolaan lebih cepat. Setelah selesai, model harus menyerahkan hasil pengolahan informasi database ke controller, bukan bagian view. Kemudian, view menggunakan data yang telah siap diterima controller dari model untuk ditampilkan pada pengguna.

Baca juga: User Interface (UI): Pengertian, fungsi, dan 8 karakteristik yang disukai user

Kelebihan MVC


Kelebihan MVC adalah membantu developer percepat pengembangan aplikasi. (sumber: shutterstock)

Penggunaan konsep MVC sangat membantu para Developer baik itu Developer Web atau Mobile. Developer dibantu dari segi hal seperti manajemen source code, keamanan, validasi data, query database, dan lain-lain. MVC adalah konsep yang membuat implementasi aplikasi jadi jauh lebih sederhana, sehingga jumlah baris program pun sedikit. Di bawah ini masih ada kelebihan lain dari penggunaan MVC. Yuk, simak pembahasannya!

1. Mampu mendukung pemrograman asinkron

MVC adalah konsep desain arsitektur dengan multi-purpose programming technique, karena adanya integrasi bersama framework JavaScript. Dari kondisi ini, aplikasi yang menggunakan konsep MVC berarti dapat bekerja dengan file PDF, widget desktop, dan browser untuk situs tertentu. Selain itu, komponen logika tersebut juga mendukung teknik pemrograman asinkron yang mampu membantu Developer mengembangkan aplikasi dengan cepat.

2. Dapat mengembangkan web menjadi SEO friendly

Siapa yang tidak ingin website-nya mendapatkan banyak kunjungan dari pengguna? Tentu saja semua orang menginginkannya. MVC adalah salah satu platform desain arsitektur yang dapat mendukung aplikasi web masuk dalam kategori SEO friendly. Hal ini memudahkan kamu untuk mengembangkan aplikasi web melalui banyaknya traffic kunjungan.

3. Adanya perubahan kode program tidak berpengaruh

Pada aplikasi web mana pun, user interface adalah komponen yang paling sering berubah dibandingkan lainnya. Perubahan tersebut bisa terjadi di font, warna, layout fitur tertentu, dan penambahan atau pengurangan fitur untuk web maupun mobile. Perubahan pada user interface biasanya akan memengaruhi komponen lainnya. Pilihannya hanya ada dua, yaitu merubah semua komponen aplikasi web atau tetap membiarkan user interface tampil seperti itu.

Dengan bantuan konsep MVC, kamu tidak perlu mengkhawatirkan hal tersebut. Sebab, MVC melalui bagian view dan model membuat kita bebas menambahkan atau mengubah sesuatu pada tampilan user interface.

Baca juga: Mengenal apa itu JavaScript mulai dari pengertian hingga sejarahnya

Contoh MVC


Contoh MVC di bawah ini menggunakan bantuan dari CodeIgniter. (sumber: pixabay)

Setelah membahas mengenai pengertian, fungsi sampai kelebihan dari MVC, rasanya belum lengkap jika kita tidak membahas contoh dari konsep satu ini. Ada berbagai macam contoh MVC dengan menggunakan framework yang berbeda, misalnya CodeIgniter atau pemrograman dasar PHP lain. Kali ini, kamu bisa memperhatikan contoh MVC untuk membuat form absensi data pengguna di website menggunakan bantuan CodeIgniter.

  • Unduh CodeIgniter terlebih dahulu dan ekstrak file-nya ke web server
  • Buatlah folder model, kemudian tambahkan kode berikut ini:
<?php
class M_user extends CI_Model
{
               public function insert_data($table, $data)
               {
               return $this->db->insert($table, $data) ;
               }
}
  • Nantinya, controller juga perlu membuat folder baru lain dengan nama yang beda dari folder model. Tambahkan kode berikut ini:
<?php
class User extends CI_Controller
{
          public function add()
          {
                 $this->load->view( ‘user_Add’ ) ;
           }
}
  • Jika sudah, kamu perlu membuat folder baru untuk bagian view. Silakan masukan kode berikut ini:
<!DOCTYPE html>
<html>
        <head>
                 <title>Membuat Form Absensi Tambah User</title>
        </head>
        <body>
                <center>
                        <h2>Form Absensi Tambah User</h2>
                        <form method=”post” action=”<?= base_url( ‘user/save’ ) ; ?
                               <table border=”1”>
                                      <tr>
                                             <td>Email</td>
                                             <td><input type=”text” name=”email”></td>
                                      </tr>
                                      <tr>
                                            <td>Password</td>
                                            <td><input type=”password” name=”password”></td>
                                       </tr>
                                       <tr>
                                             <td>Nama</td>
                                             <td><input type=”text” name=”nama”></td>
                                       </tr>
                                       <tr>
                                              <td colspan=”2”><input type=”submit” name=”kirim” value=”Masukkan Data”></td>
                                        </tr>
                                 </table>
                          </form>
                  </center>
          </body>
</html>
  • Setelah semuanya selesai, kamu bisa mengakses localhost untuk proses uji coba

Itulah pembahasan mengenai MVC dari pengertian, fungsi, konsep, cara kerja, kelebihan, dan contoh. Kesimpulannya, MVC adalah solusi tepat bagi kamu yang ingin mengembangkan aplikasi web maupun mobile dengan cepat serta efektif. Karena bantuan dari tiga komponen utamanya, yaitu model, view, dan controller, pengembangan aplikasi semakin mudah dilakukan.

Selain melalui artikel EKRUT Media ini, kamu juga bisa memperoleh berbagai informasi dan tips menarik seputar karier melalui akun YouTube EKRUT Official. Bukan hanya itu, kamu bisa mendapatkan peluang besar dalam bekerja dan perbaikan karier dengan cara sign up di EKRUT sekarang juga. Hanya di EKRUT, berbagai peluang kerja dapat diperoleh sesuai minat yang kamu miliki.

Sumber:

  • tutorialspoint.com
  • developer.mozilla.org
0

Tags

Share

Apakah Kamu Sedang Mencari Pekerjaan?

    Already have an account? Login

    Artikel Terkait

    customer-service-adalah-EKRUT.jpg

    Careers

    Customer Service Adalah

    Tsalis Annisa

    14 December 2022
    5 min read
    API-adalah-EKRUT.jpg

    Technology

    API: Pengertian, Jenis, Cara Kerja, Arsitektur, dan Contohnya

    Nur Rosita Dewi

    14 November 2022
    6 min read
    pexels-sora-shimazaki-5926389.jpg

    Careers

    15 Pertanyaan Interview Kerja Mobile Engineer 2022

    Chrissila Jessica

    10 November 2022
    5 min read

    Video