Blog | Beli Rumah | Belajar HTML dan PHP | Kontak | Gmail | Uang Adsense
Audit Sistem Informasi
Sistem Informasi (S1)
Manajemen Informatika
Komputer dan Pendidikan
Pengobatan Ruqyah
Daftar Isi | Skripsi SI | B. Arab | Sertifikat Komputer Internasional | PrivacyPolicy | Inggris Arab

Thursday, August 6, 2020

Mengenal Framework CI dan Bootstrap (Web 2-5 CI 1)

CI 1
Codeigniter merupakan sebuah framework PHP yang menggunakan pola desain (design pattern)

https://codeigniter.com/download
Instalasi CI
1.       Ekstrak file CodeIgniter-3.1.9.zip di htdocs
2.       Rename menjadi ciku
3.       Buka http://localhost/ciku
4.       Muncul tulisan “Welcome to CodeIgniter!”
5.       Instalasi selesai.

Membuat Teks
1.       Buka application/views/welcome_message.php. Lalu ubah teks pada baris 70.
2.       Muncul script berikut ini:
<div id="container">
       <h1>Welcome to CodeIgniter!</h1>

       <div id="body">

3.       Ganti “<h1>Welcome to CodeIgniter!</h1>” menjadi
<h1>Belajar CI Pertama kali!</h1>
4.       Reload di browser.



MVC
MVC (Model, View, Controller) adalah sebuah pola desain (design pattern) arsitektur pengembangan aplikasi.
1.       Buka application/config/routes.php
2.       Perhatikan:
http://localhost/ciku/
hasilnya akan sama dengan http://localhost/ciku/index.php/welcome/index

3.       Buka application/controllers/welcome.php
4.       Perhatikan script ini di baris 20:
public function index()
                {
                                $this->load->view('welcome_message');
                }

5.       Tambahkan script route berikut ini:
public function profil()
{
                // fungsi untuk me-load view profil.php
                $this->load->view('profil');
}

public function kontak()
{
                // fungsi untuk me-load view kontak.php
                $this->load->view('kontak');
}

6.       Tambahkan file about.php di application/views
7.       Tambahkan file contact.php di application/views
8.       Buka
http://localhost/ciku/index.php/welcome/profil/
atau
http://localhost/ciku/index.php/welcome/kontak/

9.       Jika muncul error 404 Page Not Found
10.   Buka application/config/routes.php
11.   Muncul teks berikut ini:
$route['default_controller'] = "welcome";
$route['404_override'] = '';

12.   Tambahkan script berikut ini:
$route['about'] = 'welcome/profil';
$route['contact'] = 'welcome/kontak';

13.   Reload lagi http://localhost/ciku/index.php/welcome/contact


BOOTSTRAP
1.       Download template SB-Admin https://startbootstrap.com/template-overviews/sb-admin/
(Bootstrap 4)
2.       Buka application/config/config.php
3.       Lihat script baris 25
$config['base_url'] = '';

4.       Ubah menjadi
$config['base_url'] = 'http://localhost/ciku/';

5.       Buka config/autoload.php
6.       Cari tulisan $autoload['helper']
7.       Ubah menjadi $autoload['helper'] = array(‘url’);
8.       Buka config/constants.php
9.       Tambahkan script ini di bagian akhir
define('SITE_NAME', 'Ciku');
10.   Ekstrak file SB-Admin di folder masing-masing (drive D)
11.   Copy folder berikut ini ke htdocs/ciku:
css
js
vendor

12.    Folder vendor ubah menjadi assets
13.   Buka application/views
14.   Buatlah folder admin
15.   Di folder admin, buatlah file tampil.php (kosongkan dulu)
16.   Buka index.html di folder SB-Admin
17.   Copy semua script dari index.html
18.   Paste di tampil.php
19.   Simpan
20.   Buka application/controllers
21.   Buat folder admin
22.   Buatlah controller dengan nama Tampil.php dalam folder admin tersebut
23.   Ketik script berikut ini:
<?php

class Tampil extends CI_Controller {
    public function __construct()
    {
                       parent::__construct();
       }

       public function index()
       {
        // load view admin/tampil.php
        $this->load->view("admin/tampil");
       }
}

24.   Buka config/routes.php
25.   Tambahkan script ini:
$route['admin'] = 'admin/tampil';

26.   Buka http://localhost/ciku/index.php/admin/
27.   Tampilannya masih acak-acakan
28.   Buka views/admin/tampil.php
29.   Lihat script ini:
<title>SB Admin - Dashboard</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <!-- Page level plugin CSS-->
  <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin.css" rel="stylesheet">

30.   Ubah menjadi:
<title>SB Admin - Dashboard</title>
  <!-- Bootstrap core CSS-->
<link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>" rel="stylesheet">

<!-- Custom fonts for this template-->
<link href="<?php echo base_url('assets/fontawesome-free/css/all.min.css') ?>" rel="stylesheet" type="text/css">

<!-- Page level plugin CSS-->
<link href="<?php echo base_url('assets/datatables/dataTables.bootstrap4.css') ?>" rel="stylesheet">

<!-- Custom styles for this template-->
<link href="<?php echo base_url('css/sb-admin.css') ?>" rel="stylesheet">

31.   Lihat script ini:
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Page level plugin JavaScript-->
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>

<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>

<!-- Demo scripts for this page-->
<script src="js/demo/datatables-demo.js"></script>
<script src="js/demo/chart-area-demo.js"></script>

32.   Ubah menjadi:
<!-- Bootstrap core JavaScript-->
<script src="<?php echo base_url('assets/jquery/jquery.min.js') ?>"></script>
<script src="<?php echo base_url('assets/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>

<!-- Core plugin JavaScript-->
<script src="<?php echo base_url('assets/jquery-easing/jquery.easing.min.js') ?>"></script>
<!-- Page level plugin JavaScript-->
<script src="<?php echo base_url('assets/chart.js/Chart.min.js') ?>"></script>
<script src="<?php echo base_url('assets/datatables/jquery.dataTables.js') ?>"></script>
<script src="<?php echo base_url('assets/datatables/dataTables.bootstrap4.js') ?>"></script>
<!-- Custom scripts for all pages-->
<script src="<?php echo base_url('js/sb-admin.min.js') ?>"></script>
<!-- Demo scripts for this page-->
<script src="<?php echo base_url('js/demo/datatables-demo.js') ?>"></script>
<script src="<?php echo base_url('js/demo/chart-area-demo.js') ?>"></script>

33. Buka http://localhost/ciku/index.php/admin/
34.   Hasilnya seperti ini:


35.   Bersambung…
"Investasi Emas dan Reksadana, Untung Mana?."
Youtube: Katabah Com: Menuju 1 jt Konten :)

No comments:

Post a Comment