Scribd
Unggah
14 tayangan

Pemrograman Web - CodeIgniter & Bootstrap

Mempelajari salah satu framework dalam pengembangan web yaitu CodeIgniter; sebagai bahasa pemrogramannya, dan Bootstrap sebagai framework CSS nya

Diunggah oleh

user160496
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
14 tayangan

Pemrograman Web - CodeIgniter & Bootstrap

Mempelajari salah satu framework dalam pengembangan web yaitu CodeIgniter; sebagai bahasa pemrogramannya, dan Bootstrap sebagai framework CSS nya

Diunggah oleh

user160496
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

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 &copy; 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">
<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>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">
<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>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">
<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>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">
<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>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">
<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>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">
<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>8</td>
<td>Kamis</td>
<td>Pemrograman Web</td>
<td id="jam">12.30</td>
<td id="jam">14.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>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">
<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>
</table>
<hr>
<!--<script
src="https://ajax.googleapis.com/ajax/libs/jquery.min.js"></scrip
t>-->
<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).

Anda mungkin juga menyukai