Mengenal MVC pada Codeigniter

Mengenal MVC pada Codeigniter

15 Juni 2020 nefrit Codeigniter

Model, View, Controller atau singkatanya adalah MVC merupakan sebuah pola desain perangkata lunak yang digunakan untuk mengembangkan antarmuka pengguna yang membagi logika program terkait menjadi tiga elemen yang saling berhubungan.

        1. Model mewakili struktur data anda. Biasanya kelas model akan berisi fungsi-fungsi yang membantu kita mengambil, menyisipkan, dan memperbaharui informasi dalam database.
        2. View adalah informasi yang disajikan kepada pengguna. View biasanya akan menjadi halaman web.
        3. Controller berfungsi sebagai perantara antara Model, Tampilan dan sumber daya lainnya untuk memproses permintaan HTTP dan menghasilkan halaman web.

        Disini saya akan mebuat sebuah contoh menggunakan View dan Controller, untuk Model akan saya buatkan tutorial sendiri karena model nanti akan terhubung dengan database.


        Untuk tutorial instalasi Codeigniter dapat dilihat pada link ini 


        VIEW
        Buat sebuah file pada => \codeigniter\application\views\ dengan nama home.php dan isikan script berikut:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Home | Manado Coder</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        </head>
        <body>
        
        <div class="container mt-2">
            <section>
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <a class="navbar-brand" href="#">Manado Coder</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
        
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form>
                    </div>
                </nav>
            </section>
        </div>
        
        <div class="container mt-4">
            <form class="form-inline">
                <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
                <div class="input-group mb-2 mr-sm-2">
                    <div class="input-group-prepend">
                    <div class="input-group-text">@</div>
                    </div>
                    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
                </div>
        
                <label class="sr-only" for="inlineFormInputName2">Password</label>
                <input type="password" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2">
        
                <div class="form-check mb-2 mr-sm-2">
                    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
                    <label class="form-check-label" for="inlineFormCheck">
                    Remember me
                    </label>
                </div>
        
                <button type="submit" class="btn btn-primary mb-2">Submit</button>
            </form>
        </div>
        
        
        <!-- JS, Popper.js, and jQuery -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        </body>
        </html>
        
        
        

        CONTROLLER

        Buat sebuah file  pada folder controller => \codeigniter\application\views\ dengan nama Home.php. Kemudian isikan script berikut:

        defined('BASEPATH') OR exit('No direct script access allowed');
        class Home extends CI_Controller {
            public function index()
            {
                $this->load->view('home');
            }
        }


        Untuk melihat hasilnya silahkan akses url http://localhost/codeigniter/index.php/home pada browser anda, jika tidak ada kesalahan maka tampilan web akan terlihat seperti pada gambar berikut



        Back to blog list

        Tags

        Bagikan


        Join Discussion

        Copyright 2020 © manadocoder.com. All rights reserved.
          Page rendered in 0.0390 seconds.