Wednesday, March 13, 2019

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 about()
{
                // fungsi untuk me-load view about.php
                $this->load->view('about');
}

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

6.       Tambahkan file about.php di application/views
Isinya: <h1>Halaman about</h1>

7.       Tambahkan file contact.php di application/views
Isinya: <h1>Halaman Contact</h1>

8.       Buka
http://localhost/ciku/index.php/welcome/about/
atau
http://localhost/ciku/index.php/welcome/contact/

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/about';
$route['contact'] = 'welcome/contact';

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 overview.php (kosongkan dulu)
16.   Buka index.html di folder SB-Admin
17.   Copy semua script dari index.html
18.   Paste di overview.php
19.   Simpan
20.   Buka controllers/admin
21.   Buatlah controller dengan nama Overview.php
22.   Ketik script berikut ini:
<?php

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

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

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

25.   Buka http://localhost/ciku/index.php/admin/
26.   Tampilannya masih acak-acakan
27.   Buka views/overview.php
28.   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">

29.   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">

30.   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>

31.   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>

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

34.   Bersambung…

**
Referensi:
petanikode.com/codeigniter-pemula






Bitcoin Offers:
Free Bitcoin, Double Bitcoin, Bitcoin Investment, Bitcoin Trading



"Bitcoin and Forex are high risk business. We must join them smartly."

No comments:

Post a Comment