Pemrograman Web - CodeIgniter & Bootstrap

LAPORAN AKHIR
Mata Praktikum : Pemrograman Web

Kelas : 4IA08
Praktikum Ke - : 2 (Dua)
Tanggal : 11 November 2017
Materi : Pengenalan CodeIgniter & Bootstrap
NPM : 57414194
Nama : Muhammad Fahreza
Ketua Asisten : Albertus Vrima Setiawan
Nama Asisten :
Paraf Asisten :
Jumlah Lembar : 9 (Sembilan Lembar)
LABORATORIUM TEKNIK INFORMATIKA

UNIVERSITAS GUNADARMA
2017
Pertemuan kedua ini, praktikan mempelajari mengenai CodeIgniter dan
Bootstrap. CodeIgniter merupakan aplikasi open source yang berupa
framework PHP dengan model MVC (Model, View, Controller) untuk
membangun website dinamis. Sedangkan bootstrap adalah sebuah framework
CSS yang menyediakan kumpulan komponen-komponen antarmuka dasar
pada web yang telah dirancang sedemikian rupa untuk mempermudah
membangun tampilan web. Pada intinya CodeIgniter dan Bootstrap ini saling
melengkapi seperti HTML dengan CSS. CI sebagai HTML-nya dan Bootstrap
sebagai CSS-nya. Untuk lebih memahami CI dan Bootstrap tersebut,
praktikan mencoba membuat projek seperti pada pertemuan 1 sebelumnya
(tabel jadwal perkuliahan) namun sekarang menggunakan CI dan Bootstrap.
Oleh karena itu, untuk mengingat kembali apa yang telah dipelajari di
lab, laporan akhir kedua ini praktikan diminta untuk membuat kembali
projek CI dan Bootstrapnya beserta logika dari scriptnya. Berikut
laporannya:
1. Output
2. Logika dan Script Program
Berikut langkah-langkah beserta logika script untuk membuat projek pada

pertemuan 2 ini :
Persiapan Awal File Projek
1. Pastikan XAMPP sudah terinstal. Jika sudah jalankan modul Apache.

2. Siapkan template CodeIgniter dan Bootstrap-nya. Kemudian template
Bootstrap-nya rename menjadi ‘assets’ dan letakkan di dalam folder
CodeIgniter. Selanjutnya folder CodeIgniter-nya rename sesuai nama
projek yang diinginkan (contoh: praktikan memberi nama web08). Dan
setelah itu letakkan folder tersebut di direktori C:/xampp/htdocs
seperti gambar berikut :
3. Untuk mempermudah dalam pengeditan script, disarankan

menggunakan aplikasi Sublime Text. Buka Sublime Text, lalu drag &
drop folder web08 ke Sublime Text-nya. Jika berhasil langsung
muncul di properties sebelah kiri hirarki dari folder web08 tersebut.
Pemrograman Web
Setelah file projek dibuat, selanjutnya membuat programnya. Berikut

langkah-langkahnya :
1. Langkah pertama membuat file header.php dan footer.php. Caranya

masuk ke direktori web08\application\views, lalu klik kanan pada
folder views - klik New Folder, beri nama templates. Pada folder
templates tersebut klik kanan – New File – beri nama header.php dan
buat satu lagi dengan nama footer.php. Ketikkan script seperti berikut
:
 web08\application\views\templates\header.php
<html>
<head>
<title>LABTI</title>
<link rel="stylesheet" href="<?php echo base_url();
?>assets/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url();
?>assets/manualcss/style.css">
</head>
<body>
<div class="container">
<hr>
<h1><marquee><blink><font color="magenta">..::::JADWAL KULIAH
4IA08::::..</font></blink></marquee></h1>
<hr>
 web08\application\views\templates\footer.php
<div class="footer">
<center><p>Copyright © 2017 Frz Development</p></center>
</div>
</div>
<script src="<?echo base_url(); ?>
assets/js/bootstrap.min.js"></script>
</body>
</html>
Logika :
Setiap komponen dalam projek ini dibuat terpisah, seperti header, isi,
dan footer. Hal ini berfungsi untuk meringankan kinerja template Code
Igniter dalam mengeksekusi setiap komponen yang ada. header.php
ini berfungsi sebagai tempat pemanggilan style bootsrap dan style
buatan user sendiri yang diletakkan pada tag <head></head>. Dan
juga berisi konten awal yaitu teks berjalan yang diberikan dalam tag
<marquee></marquee>.
2. Langkah selanjutnya membuat file mhs.php. Caranya masuk ke
direktori web08\application\views, lalu klik kanan pada folder views -
klik New Folder, beri nama pages. Pada folder pages tersebut klik
kanan – New File – beri nama mhs.php. Ketikkan script seperti
berikut :
 web08\application\views\pages\mhs.php
<div id="all">
<div id="header">
<h2>Selamat Datang di Halaman Ini</h2>
</div>
<div id="konten">
<div id="tabel">
<table>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Hari</th>
<th rowspan="2">Mata Kuliah</th>
<th colspan="2">Jam</th>
<th rowspan="2">Aksi</th>
</tr>
<tr>
<th>Masuk</th>
<th>Keluar</th>
</tr>
<tr>
<td>1</td>
<td>Senin</td>
<td>Bahasa Inggris Bisnis 1</td>
<td id="jam">10.30</td>
<td id="jam">12.30</td>
<td align="center">
<a href="#" class="btn btn-success btn-sm" role="button">Edit</a>
<a href="#" class="btn btn-danger btn-sm"
role="button">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Senin</td>
<td>Teknik Kompilasi</td>
<td id="jam">12.30</td>
<td id="jam">15.30</td>
<td align="center">
</td>
</tr>
<tr>
<td>3</td>
<td>Selasa</td>
<td>Pemodelan dan Simulasi</td>
<td id="jam">07.30</td>
<td id="jam">10.30</td>
<td align="center">
</td>
</tr>
<tr>
<td>4</td>
<td>Rabu</td>
<td>Rekayasa Perangkat Lunak</td>
<td id="jam">11.30</td>
<td id="jam">13.30</td>
<td align="center">
</td>
</tr>
<tr>
<td>5</td>
<td>Rabu</td>
<td>Pengantar Pengolahan Citra</td>
<td id="jam">13.30</td>
<td id="jam">15.30</td>
<td align="center">
</td>
</tr>
<tr>
<td>6</td>
<td>Rabu</td>
<td>Pengantar Teknologi Forensik Informasi</td>
<td id="jam">15.30</td>
<td id="jam">17.30</td>
<td align="center">
</td>
</tr>
<tr>
<td>7</td>
<td>Kamis</td>
<td>Pengantar Bisnis Informatika</td>
<td id="jam">10.30</td>
<td id="jam">12.30</td>
<td align="center">
</td>
</tr>
<tr>
<td>8</td>
<td>Kamis</td>
<td>Pemrograman Web</td>
<td id="jam">12.30</td>
<td id="jam">14.30</td>
<td align="center">
</td>
</tr>
<tr>
<td>9</td>
<td>Kamis</td>
<td>Jaringan Komputer Lanjut</td>
<td id="jam">14.30</td>
<td id="jam">16.30</td>
<td align="center">
</td>
</tr>
</table>
<hr>

<script src="assets/js/bootstrap.min.js"></script>
</div>
</div>
Logika :
File mhs.php merupakan isi dari web ini, yaitu tabel jadwal perkuliahan
kelas 4IA08. Scriptnya diletakkan di dalam tag <body></body>. Tabel
ini merupakan lanjutan dari activity pertemuan sebelumnya namun di
tambah kolom baru dengan judul “Aksi” dan di dalamnya terdapat 2
tombol yaitu Edit dan Delete. Kolom ini nantinya untuk
mengimplementasikan CRUD (Create, Read, Update, Delete) di
pertemuan berikutnya.
3. Langkah selanjutnya membuat file Halaman.php. Caranya masuk ke

direktori web08\application\controllers, lalu klik kanan pada folder
controllers - klik New File, beri nama Halaman.php. Ketikkan script
seperti berikut :
web08\application\controllers\Halaman.php
<?php if ( ! defined('BASEPATH')) exit ('No direct script access
allowed');
class halaman extends CI_Controller {
public function index() {
$this->load->view('welcome_message');
}
public function view() {
$this->load->view('templates/header');
$this->load->view('pages/mhs');
$this->load->view('templates/footer');
}
}
Logika :
File halaman.php berfungsi untuk menyatukan setiap komponen web

yang ada (yaitu header.php, mhs.php dan footer.php) agar dapat
menjadi satu halaman.
4. Langkah selanjutnya mengkonfigurasi file routes.php. Caranya
masuk ke direktori web08\application\config, lalu cari file routes.php.
Ubah konfigurasinya hanya pada bagian seperti berikut :
 web08\application\config\routes.php
$route['default_controller'] = 'halaman/view';
Logika :
File routes.php ini berfungsi untuk memetakan ulang permintaan URI

ke fungsi kontroler tertentu. Fungsi kontroler tertentu yang dimaksud
yaitu fungsi dengan nama view yang ada di file halaman.php
5. Langkah terakhir mempercantik halaman website dengan style

berdasarkan keinginan user. Caranya masuk ke direktori
web08\assets\, lalu pada menu assets klik kanan – New Folder – beri
nama manualcss. Pada folder manualcss klik kanan – pilih New File –
beri nama style.css. Ketikkan script seperti berikut :
 web08\assets\manualcss\style.css
body {
background: #FFB;
}
.container {
background:#FFF;
margin:20px auto;
}
table tr, th {
text-align:center;
}
table, td, th {
border: 1px solid grey;
padding: 5px;
margin: auto;
background-color:#eee;
}
th {
background-color:#bbb;
}
#jam {
text-align: center;
}
#all {
width:960px;
margin-left:auto;
margin-right:auto;
}
#all #header {
height:120px;
background-color:#ccc;
}
#all #header h2 {
text-align:center;
padding:45px;
}
#all #konten {
background-color:#aaa;
}
#all #footer {
background-color:#ccc;
height:30px;
}
Logika :
File style.css ini merupakan atribut/style yang diberikan sendiri oleh

user sesuai tag yang ada pada setiap dokumen (header.php, mhs.php
dan footer.php).

Pemrograman Web - CodeIgniter & Bootstrap

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemrograman Web - CodeIgniter & Bootstrap

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN AKHIR

Mata Praktikum : Pemrograman Web

LABORATORIUM TEKNIK INFORMATIKA

Berikut langkah-langkah beserta logika script untuk membuat projek pada

Persiapan Awal File Projek

1. Pastikan XAMPP sudah terinstal. Jika sudah jalankan modul Apache.

3. Untuk mempermudah dalam pengeditan script, disarankan

Setelah file projek dibuat, selanjutnya membuat programnya. Berikut

1. Langkah pertama membuat file header.php dan footer.php. Caranya

3. Langkah selanjutnya membuat file Halaman.php. Caranya masuk ke

File halaman.php berfungsi untuk menyatukan setiap komponen web

File routes.php ini berfungsi untuk memetakan ulang permintaan URI

5. Langkah terakhir mempercantik halaman website dengan style

File style.css ini merupakan atribut/style yang diberikan sendiri oleh

Anda mungkin juga menyukai