MVC – Perkembangan teknologi saat ini semakin melesat tajam. Hampir setiap sektor baik itu industri ataupun non industri, pemerintah non pemerintah, hampir semua cara kerjanya dibantu dengan teknologi. Jika anda perhatikan saat ini proses dokumen dan juga data sudah melalui media teknologi seperti website. Kebutuhan dokumen senantiasa diupload secara online.
Namun perlu diketahui bahwa sistem teknologi seperti website itu tidak dengan begitu saja muncul di tengah-tengah kita. Ada proses development atau pembuatan website tersebut oleh ahli IT yang bergerak di bidang development sistem website.
Website merupakan suatu platform teknologi yang dapat menjadi media informasi secara online. Dengan adanya website ini tentu setiap informasi apapun akan lebih cepat dan mudah tersampaikan kepada siapa saja yang memerlukan informasi tersebut.
Website dibangun dengan berbagai metode, salah satunya adalah metode MVC. Jika anda tertarik untuk menjadi bagian dari pengembang website silahkan simak artikel ini hingga selesai.
Baca Juga : Bahasa Pemrograman : Fungsi, Jenis dan 2 Contohnya
Komponen, fungsi dan contoh MVC
MVC merupakan kepanjangan dari Model, View, Controller. Pola design atau arsitektur ini biasanya digunakan untuk membangun perangkat lunak seperti website. Metode MVC ini memungkinkan pengembang / developer dalam membangun website secara lebih teratur dan juga rapih.
Mulai dari permodelan databasa, view interface untuk user atau pengguna hingga controller sebagai jembatan antara permodelan database dengan view pengguna.
Dengan adanya design arsitektur MVC ini pengembang dapat memisahkan antara logic bisnis, tampilan pengguna dan juga kontrol aplikasi. Dengan hal tersebut tentu halaman website yang dibangun menjadi lebih mudah dalam proses perawatan dan pengembangan kedepannya. Berikut komponen, fungsi dan contohnya.
Komponen
- Model – Model merupakan bagian yang bertugas untuk mengambil data dari database yang diproses sesuai kebutuhan sistem yang dibuat. Model ini berfokus pada koneksi data di database yang akan dikirimkan ke view dengan perintah dari controller.
- View – View merupakan bagian yang berfungsi untuk menampilkan data kepada pengguna. Untuk alurnya view bekerja untuk menerima data yang diambil oleh model dari database yang kemudian diminta oleh controller untuk ditampilkan pada view tertentu. View ini biasanya berbentuk gambar, tombol button dan juga grid.
- Controller – Controller ini merupakan penghubung antara model dan juga view. Controller berfungsi untuk memberikan perintah kepada model terkait data yang diminta untuk ditampilkan pada view.
Fungsi
MVC dilengkapi dengan beberapa fungsi mendasar. Contohnya yaitu untuk mempermudah programmer dalam melakukan pengembangan ataupun maintenance sistem secara menyeluruh. Selain itu juga untuk struktur kode yang dibuat dengan menggunakan MVC lebih rapih.
MVC juga mendukung kolaborasi framework. Mulai dari codeigniter, laravel, django. MVC juga bersifat reusable. Artinya setiap komponen dapat digunakan berkali-kali dalam fungsi yang berbeda.
Contoh
Berikut merupakan contoh penggunaan metode MVC dalam script login suatu sistem.
- Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Clogin extends CI_Controller {
public $data = array ('pesan' => '');
public function __construct () {
parent::__construct();
$this->load->helper('form');
$this->load->library('form_validation');
$this->load->model('Login_m','login', TRUE);
}
public function index() {
if ($this->session->userdata('login') == TRUE && $this->session->userdata('level') == 'SYS'){
redirect('depan');
} else {
if($this->login->validasi()) {
if($this->login->cek_user()) {
if($this->session->userdata('level') == 'SYS'){
redirect('depan');
}
} else {
$this->data['pesan'] = '<div class="alert alert-danger" role="alert" align="center">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>Username atau Password salah.</div>';
}
}
$this->data['jenis'] = 'SYS';
$this->load->view('login/login', $this->data);
}
}
public function logout() {
$this->session->sess_destroy();
redirect(base_url('clogin'));
}
}- Model
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Login_m extends CI_Model {
public function load_form_rules() {
$form_rules = array(
array(
'field' => 'u_name',
'label' => 'username',
'rules' => 'required'
),
array(
'field' => 'pass_word',
'label' => 'password',
'rules' => 'required'
),
);
return $form_rules;
}
public function validasi() {
$form = $this->load_form_rules();
$this->form_validation->set_rules($form);
if ($this->form_validation->run()) {
return TRUE;
} else {
return FALSE;
}
}
public function cek_user() {
$u_name = $this->input->post('u_name');
$pass_word = md5($this->input->post('pass_word'));
$query = $this->db->where('u_name', $u_name)
->where('pass_word', $pass_word)
->where('aktif', 'Y')
->where('level', 'SuperAdmin')
->limit(1)
->get('tbl_user');
if ($query->num_rows() == 1) {
$row = $query->row();
$level = $row->level;
$pass = $row->password;
$data = array(
'login' => TRUE,
'u_name' => $u_name,
'user_id' => $level,
'pass' => $pass,
'level' => $level,
'nama' => $level,
'status' => 'login'
);
$this->session->set_userdata($data);
return TRUE;
} else {
return FALSE;
}
}
public function logout() {
$this->session->sess_destroy();
redirect(base_url('clogin'));
}
}
- View
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="image/x-icon" rel="shortcut icon" href="<?php echo site_url();?>assets/logo/logo.png">
<title>HRIS PT. UWU JUMP INDONESIA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo site_url();?>assets/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="<?php echo site_url();?>assets/plugins/ionicons/ionicons.min.css">
<link rel="stylesheet" href="<?php echo site_url();?>assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="<?php echo site_url();?>assets/dist/css/adminlte.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body style="background-image: url(<?php echo base_url().'assets/logo/bgloginbr.png'?>); background-repeat: no-repeat; background-size: 100% 100%;", url("paper.gif"); class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<img src="<?php echo site_url();?>assets/logo/logo.png" width="170">
</div>
<br />
<!-- /.login-logo -->
<div class="card">
<div class="form-signin card-body login-card-body" id="login-box" <div class="col-md-4 col-md-offset-4" style="background-image: url(<?php echo base_url().'assets/logo/bgform7.png'?>);">
<CENTER><H5 style="color:white"><B>HRIS SYSTEM</H5></B></CENTER>
<p class="login-box-msg" style="color:white"><I>Please sign in</p></I>
<?php
$errors = $this->session->flashdata('errors');
if(!empty($errors)){
?>
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger text-center">
<?php foreach($errors as $key=>$error){ ?>
<?php echo "$error<br>"; ?>
<?php } ?>
</div>
</div>
</div>
<?php
}
if($msg = $this->session->flashdata('error_login')){ ?>
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger text-center">
<?= $msg ?>
</div>
</div>
</div>
<?php } else if($msg = $this->session->flashdata('success_login')){ ?>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success text-center">
<?= $msg ?>
</div>
</div>
</div>
<?php } ?>
<form action="<?php echo site_url();?>auth/loginForm" method="post">
<div class="input-group mb-3">
<input value="" name="email" type="email" id="inputEmail" class="form-control" placeholder="Email" required autofocus>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input value="" name="password" type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<br />
<marquee><p class="login-box-msg" style="color:white"><I>Pastikan menggunakan username dan password akun pribadi, tidak satu akun digunakan secara bersama-sama.</p></marquee>
<p class="login-box-msg" style="color:white"><I>Silahkan registrasi akun di IT</p>
<div class="row">
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-info btn-block"><b>Sign In</b></button>
</div>
<!-- /.col -->
</div>
</form>
<br />
</div>
</div>
<p class="mb-0">
<small style="color:white">Copyright © <?php echo date('Y'); ?> <a href="#" style="color:white">IT Control</a></small>
</p>
</div>
<script src="<?php echo site_url();?>assets/plugins/jquery/jquery.min.js"></script>
<script src="<?php echo site_url();?>assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?php echo site_url();?>assets/dist/js/adminlte.min.js"></script>
</body>
</html>
Pingback: Javascript adalah : Pengertian, fungsi dan kelebihannya - belajarindonesia.id