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!”
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>
34. Hasilnya seperti ini:
35. Bersambung…
|
"Boleh Konsultasi Masuk Jurusan Sistem Informasi via IG atau Tiktok."
|
|
Tips Skripsi Program Studi Sistem Informasi |
|
|
No comments:
Post a Comment