Wednesday, October 5, 2011

Yuk, Berkenalan Dengan MVC (Part. 2)

Sumber: Internet
(lupa dari mana)
Setelah sekian lama vakum dari dunia per-blog-an, akhirnya saya berusaha memaksa diri saya untuk tetap bisa menulis di Blog ini terutama menulis tentang dunia software engineering yang sedang saya tekuni sekarang. Nah, seperti janji saya sebelumnya, pada kesempatan kali ini akan membahas tentang "Bagaimana cara kerja MVC" melanjutkan tulisan saya yang telah lalu yang berjudul "Yuk, Berkenalan Dengan MVC (Part.1)". Okay, tanpa berpanjang kalam lagi saya akan memaparkan tentang bagaimana cara kerja dari aplikasi yang memiliki arsitektur MVC. enjoy :)

1. Separated of Concern (Pembagian Fokus)
Salah satu yang menjadi alasan terciptanya sebuah konsep MVC dalam arsitektur perangkat lunak adalah karena para pengembang aplikasi menginginkan adanya fokus kerja yang bersifat independent. kata independent yang saya gunakan ini memiliki maksud bahwa seorang web designer tidak harus mengacak-acak program logic dan database query yang dibuat oleh para programmer web dan database. Dengan menggunakan konsep Model, View, dan Controller, seorang web designer dapat berfokus pada pembuatan User Interface (View) tanpa harus menyentuh bagian Model ataupun Controller. Dengan cara seperti ini, proses maintenance aplikasi menjadi lebih mudah karena kita hanya perlu merombak salah satu layer saja tanpa harus merombak keseluruhan aplikasi.

2. Model, View, dan Controller
Nah, sekarang bagaimana cara kerja dari arsitektur MVC ini? sebelum membahas cara kerjanya saya akan mencoba mereview sedikit tentang peran dari Model, View, dan Controller.

  • Model: Kelas ini merupakan representasi dari setiap tabel database yang kita buat. tugas utama dari model adalah melakukan query ke dalam database dan memberikan hasil query tersebut kepada Controller ataupun View. Biasanya di dalam kelas model berisi fungsi-fungsi yang ditujukan untuk mengambil, mengubah, ataupun menghapus data yang ada di dalam database
  • Controller: Kelas ini merupakan pusat dari program logic aplikasi kita. Kelas inilah yang nantinya akan memanggil kelas Model, View, ataupun Controller lain sesuai dengan flow aplikasi yang telah kita tentukan. sebagai contoh: ketika kita membuka sebuah alamat "http://fesbuk.com" maka controller akan mengecek apakah user tersebut sudah melakukan login atau belum. Jika user belum melakukan login maka Controller akan mengarahkan user ke halaman "http://fesbuk.com/login.php". 
  • View: kelas ini merupakan representasi dari tampilan antar muka user (user interface) yang digunakan oleh user untuk dapat berinteraksi dengan sistem yang kita buat. Nah, jika Controller sebelumnya mengarahkan kita ke halaman "http://fesbuk.com/login.php" maka selanjutnya Controller akan menampilkan halaman View berupa login form kepada user agar user dapat memasukkan username dan password yang ia miliki.
Gambar 1. Interaksi User - MVC - Database
Sumber: Pribadi
Jika melihat ilustrasi pada Gambar.1 di atas, maka dapat terlihat pola keterkaitan antara pengguna (user) dengan setiap komponen pada MVC dan Database. Untuk lebih mudahnya saya akan menjelaskan konsep MVC ini dengan sebuah studi kasus sebuah website yang bernama "fesbuk.com" :D

3. Proses login pada website fesbuk.com
Fesbuk.com adalah sebuah situs jejaring sosial yang sangat terkenal saat ini, setiap orang tak pernah melewatkan waktu luangnya tanpa mengakses situs ini. Tono adalah seorang maniak jejaring sosial yang tak pernah melewatkan satu detik pun dari waktu luangnya untuk mengakses situs jejaring sosial terpopuler ini. Untuk dapat mengakses situs jejaring tersebut, tono harus melakukan proses login terlebih dahulu. Dan inilah yang terjadi dibalik proses logn yang Tono lakukan.

Tono mengakses alamat "http://fesbuk.com" dengan menggunakan web browsernya. proses request pun dilakukan hingga akhirnya diterima oleh web server yang dimiliki fesbuk.com. Fasebuk.com memiliki sebuah controller yang bernama HomeController untuk menampilkan halaman muka dari website Fesbuk.com. ketika Tono mencoba mengakses halaman utama fesbuk.com, HomeController melakukan pengecekan apakah user sudah melakukan proses login atau belum terhadap Tono. Apabila Tono belum melakukan proses login, maka HomeContoller akan menampilkan halaman login ke Tono sedangkan apabila sudah melakukan login maka HomeConroller akan menampilkan halaman utama dari website fesbuk.com.

Dikarenakan Tono belum melakukan proses login, mala HomeController memanggil LoginView yang merupakan sebuah halaman berisikan login form. halaman tersebut terdiri dari 2 text field yaitu untuk username dan password. setelah tono mendapatkan halaman LoginView, selanjutnya tono memasukkan username dan passwordnya di field yang tersedia dan menekan tombol "login". Setelah menekan tombol login, sebuah data akan dikirimkan ke kelas UserController.

kelas UserController merupakan kelas yang menangani setiap aktifitas yang berhubungan secara langsung dengan user. Di dalam kelas UserController inilah username dan password Tono diterima. Setelah data username dan password diterima, berikutnya UserController menjalankan sebuah fungsi yang bernama "Login" dengan username dan password sebagai parameternya. Fungsi Login pada UserController ternyata memanggil UserModel yang merupakan representasi dari tabel User di dalam database. Fungsi Login pada UserController memanggil sebuah fungsi yang bernama "findUser" dengan menggunakan username dan password sebagai parameternya.kelas UserModel menjalankan fungsi findUser untuk mencocokan username dan password yang diberikan dengan melakukan query seperti: "SELECT userid FROM user WHERE username='$username' AND password='$password'" ke dalam database.

Setelah userid berhasil ditemukan, maka selanjutnya UserModel akan memberikan hasil pencarian tersebut ke UserController untuk memberitahu bahwa proses login telah berhasil. Setelah UserController menerima userid dari UserModel, maka selanjutnya UserController memanggil halaman MainPageView yang merupakan halaman utama dari website fesbuk.com. Kini Tono bisa melakukan rutinitas hariannya bersama aplikasi jejaring sosial fesbuk.com.

Yup, kira-kira seperti itulah proses yang terjadi pada aplikasi yang memiliki arsitektur MVC :D
Semoga informasinya bermanfaat :)


No comments:

Post a Comment