Kompetensi Dasar :

3.24 Menerapkan teknologi framework dalam aplikasi web

4.24 Membuat aplikasi web menggunakan teknologi framework

Materi Pokok :

1. Konsep Framework dalam aplikasi web

2. Prosedur penggunaan framework dalam aplikasi web

3. Membuat Program Sederhana pada Framework



Konsep Teknologi Framework

Pengertian Framework

Framework adalah kerangka kerja untuk mengembangkan aplikasi berbasis website maupun desktop. Dengan menggunakan framework Anda akan lebih mudah untuk membuat aplikasi atau website. Itu karena Anda hanya perlu menyusun komponen-komponen pemrograman yang sudah jadi. Dengan kata lain, Anda tidak perlu membuat berbagai fitur dari awal lagi. Fungsinya untuk membantu kinerja dari developer, serta membuat kode program menjadi lebih terstruktur.




Fungsi Framework

Framework memiliki fungsi utama untuk mempermudah para developer mengembangkan aplikasi dan website terkait struktur MVC (Model View Controller) yang digunakan.

Selain itu, ada tiga fungsi dan Kelebihan framework yang dapat ketahui di bawah ini:

1. Program Menjadi Lebih Terstruktur dan Tersusun

2. Praktis untuk Developer

3. Memiliki Keamanan yang Lebih Unggul

4. Mendukung kolaborasi


Kelemahan Framework

1. Kurangnya pemahaman bahasa pemrograman

2. Memiliki batasan

3. Kode Publik



Jenis-Jenis Framework untuk Web Development

1. Framework JavaScript
  • Vue.js
  • React.js
  • Angular.js
  • Ember.js
  • Backbone.js
  • Node.js

    • 2. Framework CSS
  • Bootstrap
  • Foundation
  • Bulma
  • Semantic UI
  • UIKit
  • Materialize CSS
  • Miligram
  • PureCSS
  • Skeleton
  • Tailwind

    • 3. Framework PHP
  • Laravel
  • CodeIgniter
  • Symfony
  • Yii
  • Zend
  • CakePHP
  • Phalcon
  • FuelPHP
  • Fat Free
  • Aura




    • Prosedur Penggunaan Framework dalam Aplikasi Web

    • 1. Membuat Custom Tampilan Awal
    • 2. Menghapus index.php
    • 3. Membuat Database
    • 4. Menghubungkan CodeIgniter dengan Database
    • 5. Menambahkan Data User
    • 6. Menampilkan Data User
    • 7. Mengubah Data User
    • 8. Menghapus Data User
    • 9. Membuat Session



    Membuat Program Sederhana pada Framework CodeIgniter


    1. Instal Framework CodeIgniter

    2. Seperti yang sudah pernah Saya jelaskan pada tulisan tentang Framework dan Konsep MVC pada PHP, jadi Anda harus membuat 3 buah file script PHP yang terdiri dari Model, View dan Controller. Berikut ini lokasi peletakan file script tersebut:

    • Model : application/models
    • View : application/views
    • Controller : application/controllers

    3. Buatlah Controller dengan nama Matematika.php yang berisi script seperti dibawah ini:


    <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Matematika extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('Rumus'); } public function index(){ echo "Hitung Luas Bangun Datar"; } public function segitiga(){ $a = 5; // alas $t = 3; // tinggi $data['luas'] = $this->Rumus->LuasSegitiga($a,$t); $this->load->view('Hasil',$data); } public function persegi(){ $s = 5; // sisi $data['luas'] = $this->Rumus->LuasPersegi($s); $this->load->view('Hasil',$data); } public function persegipanjang(){ $p = 5; // panjang $l = 6; // lebar $data['luas'] = $this->Rumus->LuasPersegiPanjang($p,$l); $this->load->view('Hasil',$data); } }

    4. Selanjutnya buatlah View dengan nama Hasil.php yang berisi script seperti dibawah ini:


    <?php echo $luas; ?>

    5. Kemudian buatlah Model dengan nama Rumus.php yang berisi script seperti dibawah ini:


    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); Class Rumus extends CI_Model { public function __construct() { parent::__construct(); } public function LuasSegitiga($alas,$tinggi) { return 0.5*$alas*$tinggi; } public function LuasPersegi($sisi) { return $sisi*$sisi; } public function LuasPersegiPanjang($p,$l) { return $p*$l; } }

    6. Jalankan aplikasi dengan mengakses url http://localhost/project-codeigniter/matematika di browser dan akan menghasilkan output seperti gambar dibawah ini:



    Pada Controller program diatas terdapat 5 function yang memiliki fungsi berbeda-beda, yang diantaranya:

    • construct() merupakan function konstruktor yang pada tutorial ini difungsikan untuk memanggil atau load Model yang berisi rumus-rumus bangun datar.
    • index() merupakan function yang berisikan interface awal dari Controller Matematika. Jadi, ketika Controller ini di akses akan muncul tulisan “Hitung Luas Bangun Datar”.
    • segitiga() merupakan function yang berfungsi untuk menghitung luas bangun data segitiga.
    • persegi() merupakan function yang berfungsi untuk menghitung luas bangun data persegi.
    • persegipanjang() merupakan function yang berfungsi untuk menghitung luas bangun datar persegi panjang.

    Untuk melihat hasilnya Anda bisa menjalankan aplikasi dengan mengakses url http://localhost/project-codeigniter/matematika/segitiga dan akan menghasilkan output seperti berikut ini: