PRAKTIKUM. Rekayasa Web. Modul 1: Introduction CodeIgniter. Laboratorium Teknik Informatika Universitas Pasundan

Transkripsi

1 PRAKTIKUM Rekayasa Web Modul 1: Introduction CodeIgniter Laboratorium Teknik Informatika Universitas Pasundan

2 Konten modul: 1. What is CodeIgniter? 2. MVC 3. Template Tujuan praktikum: 1. Praktikan diharapkan mampu mengetahui hal-hal seputar CodeIgniter (CI). 2. Praktikan diharapkan mampu memahami Konsep MVC pada CodeIgniter (CI). 3. Praktikan diharapkan mampu memahami templating web page menggunakan CI.. TIM DOSEN IF 1

3 1 Bagian 1 Teori 1.1 CodeIgniter CodeIgniter adalah sebuah web framework yang dikembangkan oleh Rick Ellis dari Ellis Lab. CodeIgniter dirancang untuk menjadi sebuah web framework yang ringan dan mudah untuk digunakan. Bahkan pengakuan dari Rasmus Lerdorf, pencipta Bahasa pemrograman PHP, mengatakan bahwa CodeIgniter merupakan web framework yang mudah dan andal Seputar CodeIgniter Sebelum mencoba CodeIgniter, perlu diketahui istilah web framework itu sendiri. Menurut Microsoft Computer Dictionary, web adalah sekumpulan dokumen yang saling terhubung dalam sistem hypertext yang penggunanya akan menjelajahi web melalui halaman beranda. Sedangkan framework adalah desain struktur dasar yang dapat digundakan kembali (reuseable) yang terdiri dari abstract class dan concrete class di pemrograman berorientasi objek. Menurut dokumentasi CodeIgniter, CodeIgniter merupakan toolkit bagi orang yang ingin membangun aplikasi web menggunakan PHP. Tujuannya adalah membuat pengembangan proyek menjadi lebih cepat dibandingkan dengan menulis kode dari awal (scratch). CodeIgniter menyediakan kumpulan library untuk tugas tugas yang sering dilakukan (commonly needed task) dan sangat mudah untuk mengakses library yang tersedia di CodeIgniter. Dengan menggunakan CodeIgniter, kita cukup fokus pada pengembangan proyek dan meminimalisasi jumlah kode yang akan dibuat. Sebagai web framework populer yang menggunakan bahasa pemrograman PHP, CodeIgniter mempunyai berbagai keunggulan, seperti: 1. Free, karena berada dibawah lisensi open source mirip Apache/BSD, kita dapat melakukan apapun dengan CodeIgniter. Lisensi lengkapnya dapat dilihat di halaman dokumentasi 2. Light Weight, sistem inti CodeIgniter memerlukan library yang sedikit. Berbeda sekali dengan framework lainnya yang membutuhkan banyak sumber daya tambahan. Library tambahan akan digunakan ketika request secara dinamis, membuat sistem yang dibangun menjadi efisien dan cukup cepat 3. Fast, menurut dokumentasi, performa yang dimiliki CodeIgniter terbukti cepat setelah dibandingkan dengan web framework lainnya TIM DOSEN IF 2

4 4. Menggunakan kaidah M-V-C, Dengan menggunakan Model-View-Controller, kita dapat memisahkan bagian logic dan presentation dari aplikasi yang kita bangun. Hal ini tentu sangat cocok dan bagus untuk proyek yang memfokuskan desainer fokus pada template file dan programmer fokus pada pembangunan logic dari aplikasi yang dibangun 5. Menghasilkan URL yang bersih, URL yang dihasilkan oleh CodeIgniter bersih dan ramah terhadap mesin pencari. CodeIgniter menggunakan pendekatan segment-based dibandingkan dengan query string yang biasa digunakan oleh programmer yang tidak menggunakan web framework. Gambar 1.1 menggambarkan contoh URL yang dihasilkan CodeIgniter: Gambar 1.1 Hasil URL CodeIgniter 6. Packs a Punch, CodeIgniter hadir dengan berbagai library yang akan membantu tugas - tugas di pengembangan web yang sudah umum dan sering dilakukan seperti mengakses database, mengirim , validasi data dari form, mengelola session, manipulasi gambar, bekerja dengan XML-RPC dan masih banyak lagi 7. Extensible, kita dapat menambahkan library atau helper yang kita ciptakan sendiri ke dalam CodeIgniter. Selain itu kita dapat juga menambahkan fitur lewat class extension atau system hooks. 8. Thoroughly Documented, hampir semua fitur, library, dan helper yang ada di CodeIgniter telah terdokumentasi dengan lengkap dan tersusun dengan baik. Ketika mendapatkan unduhan CodeIgniter, dokumentasinya sudah tersedia dan siap digunakan 9. Mempunyai komunitas yang ramah, komunitas CodeIgniter sangat ramah dan siap membantu pengguna CodeIgniter pemula atau yang sudah mahir. Komunitasnya dapat ditemui di : Cara Kerja Codeigniter Untuk melengkapi pemahaman mengenai CodeIgniter, terdapat sebuah diagram yang menjelaskan cara kerja CodeIgniter yang ada pada gambar 1.2: TIM DOSEN IF 3

5 Gambar 1.2 Cara Kerja CodeIgniter Berikut adalah penjelasan cara kerja CodeIgniter: 1. index.php bertindak sebagai controller terdepan, dan menginisialisasi resource yang diperlukan untuk menjalankan CodeIgniter. 2. Router memeriksa HTTP request untuk menentukan apa yang harus dikerjakan 3. Jika cache file ada, maka akan ditampilkan langsung, dengan melewati eksekusi normal sistem 4. Sebelum memuat controller, HTTP request akan memeriksa apa yang disubmit user dan memfilternya untuk keamanan. 5. Controller memuat model, core libraries, plugin, helper, dan resource lainnya untuk 6. memproses permintaan tertentu 7. View ditampilkan di browser sesuai proses yang dikerjakan controller. Jika caching dijalankan, view akan di-cache terlebih dahulu agar dapat ditampilkan di request selanjutnya. 1.2 MVC Model-View-Controller atau MVC adalah sebuah metode untuk membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan (View) dan cara bagaimana memprosesnya (Controller). Dalam implementasinya kebanyakan framework dalam aplikasi website adalah berbasis arsitektur MVC (gambar 1.3). MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi kontrol dalam sebuah aplikasi. Berikut Penjelasan singkat mengenai MVC: Model, Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang membantu seseorang dalam pengelolaan basis data seperti memasukkan data ke basis data, pembaruan data dan lain-lain. View, View adalah bagian yang mengatur tampilan ke pengguna. Bisa di katakan berupa halaman web. TIM DOSEN IF 4

6 Controller, Controller merupakan bagian yang menjembatani model dan view Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web. Gambar 1.3 Konsep MVC 1.3 Templating Web Page Untuk membuat template website yang dinamis, sama seperi menggunakan include() pada bagian header dan footer pada penggunaan PHP native, tetapi di codeigniter kita membuat nya dengan menload view codeigniter yang kita pisah-pisahkan sesuai keinginan, misalnya anda bisa memisahkan bagian header, footer, sidebar dan konten untuk mencegah pengulangan penulisan syntax dan memudahkan dalam hal memodifikasi temlate website. Material Kit adalah Free Bootstrap UI Kit sebuah desain baru yang fresh terinpirsasi oleh material desain milik Google. Creative Tim Memperkenalkan konsep material dalam rangkaian komponen yang indah dan mudah digunakan. Seiring dengan restyling elemen Bootstrap, selengkapnya dapat dilihat di alamat : TIM DOSEN IF 5

7 2 Bagian 2 Latihan 2.1 Instalasi CodeIgniter CodeIgniter dapat di download gratis di website resminya yaitu Pada kuliah kali ini silahkan download di modul online. Silahkan ikuti intruksi dibawah ini. 1. Setelah mendownload dari module online, Kemudian Extract Folder CodeIgniter yang sudah di download sebelumnya ke direktori htdocs, kemudian ganti nama folder CodeIgniter_3.x.x tersebut dengan CI_NRP yang selanjutnya akan menjadi direktori kerja Anda, sehingga seperti yang ada pada gambar 2.1. Gambar 2.1 Struktur Folder CodeIgniter 2. Aktifkan Apache (web server) dan MySQL (database) melalui XAMPP Control Panel 3. Akses direktori tersebut lewat browser dengan URL : 4. Jika berhasil maka akan muncul tampilan seperti pada gambar 2.2. Gambar 2.2 Hasil Instalasi CodeIgniter TIM DOSEN IF 6

8 2.2 Membuat Hello World Pada Latihan kali ini kita akan membuat sebuah tulisan hello world di codeigniter. Caranya cukup mudah. Silakan ikuti intruksi dibawah ini! 1. Buka file didirektori Application -> Controllers -> Welcome.php, kemudian ikuti scriptnya seperti gambar 2.3. Gambar 2.3 Fungsi Index 2. Kemudian buka file didirektori Application -> views -> welcome_message.php. kemudian ikuti scriptnya gambar 2.4. Gambar 2.4 Halaman Utama Setelah mengikuti instruksi diatas silahkan refresh kembali url : tersebut amati hasilnya. 2.3 Templating web page Persiapan Untuk membuat templating web page, ada banyak hal yang harus dipersiapkan. Pertama, buka file hasil download source code sebelumnya terdapat didalamnya sebuah folder assets Extract Folder tersebut di direktori xampp -> htdocs -> CI_NRP. Pastikan ada tiga buah folder, seperti yang ada pada gambar 2.5. Gambar 2.5 Struktur Folder Utama CI_NRP Buatlah beberapa folder, sesuai dengan yang ada pada gambar 2.6. TIM DOSEN IF 7

9 Gambar 2.6 Struktur Folder Views Buatlah dua buah file pada application/controllers bernama buku.php dan kategori.php. Buat juga dua buah file pada application/models bernama m_buku.php dan m_kategori.php. Buatlah tiga buah file pada application/views/buku, yaitu dashboard.php, tambah_buku.php, dan ubah_buku.php. Pada application/views/kategori, buat juga tiga buah file, antara lain: dashboard.php, tambah_kategori.php, dan ubah_kategori.php. Untuk modularisasinya, buatlah file header.php, footer.php, dan sidebar.php di dalam folder parts. Dan yang terakhir, buat sebuah file pada folder template dengan nama my_template.php. Dengan begitu, persiapan telah selesai Pembuatan Halaman Website Pertama, ketikkan kode-kode yang ada pada gambar 2.7 ke dalam file buku.php. Gambar 2.7 Source Code Buku.php Setelah itu, ketikkan kode-kode yang ada pada gambar 2.8 ke dalam file kategori.php. TIM DOSEN IF 8

10 Gambar 2.8 Source Code Kategori.php Buatlah tampilan halaman web dengan memanfaatkan file-file yang telah dimodularisasi. Ketikkan kode yang tercantum pada gambar 2.9 untuk membuat header.php simpan pada folder parts. Gambar 2.9 Source Code Header.php Untuk file footer.php bisa diisi oleh source code yang tertera pada gambar Gambar 2.10 Source Code Footer.php TIM DOSEN IF 9

11 Ketik kode yang tertera pada gambar 2.11 ke file sidebar.php. Gambar 2.11 Source Code sidebar.php Selanjutnya, buatlah sebuah file my_template.php simpan pada folder template lalu ketikan kode sesuai pada gambar 2.12 Gambar 2.8 Source Code my_template.php TIM DOSEN IF 10

12 Sekarang, mari kita mulai membuat kontennya. Untuk membuat halaman utama buku, salin kode berikut ini dan simpan sebagai file dashboard.php pada folder buku. <div class="main-panel"> <nav class="navbar navbar-transparent navbar-absolute"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">bookookoo</a> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="#pablo" class="dropdown-toggle" data-toggle="dropdown"> <i class="material-icons">person</i> <p class="hidden-lg hidden-md">admin</p> </a> </li> </ul> <form class="navbar-form navbar-right" role="search" action="#" method="post"> <div class="form-group is-empty"> <input type="text" class="form-control" placeholder="search" name="search"> <span class="material-input"></span> <button type="submit" class="btn btn-white btn-round btn-just-icon"> <i class="material-icons">search</i><div class="ripple-container"> </button> </form> </nav> <div class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header" data-background-color="green"> <h4 class="title"><i class="fa fa-book"></i> Daftar Buku</h4> <div class="card-content table-responsive"> <table class="table table-striped table-hover"> <thead class="text-success"> <td>no.</td> <td>cover</td> <td>judul Buku</td> <td>pengarang</td> <td>penerbit</td> <td>kategori</td> <td>opsi</td> </thead> <tbody> <tr> <td>1</td> <td><img class="img img-responsive thumbnail" src="<?= base_url('assets/img/laskarpelangi.jpg')?>"></td> <td>laskar Pelangi</td> <td>andrea Hirata</td> <td>pt. Gramedia</td> <td>novel</td> <td> <a class="btn btn-success" href="#"><i class="fa fa-edit"></i></a> <br><a href="#" class="btn btn-danger"><i class="fa fa-trash"></i></a> </td> TIM DOSEN IF 11

13 </tr> <tr> <td>2</td> <td><img class=" img img-responsive thumbnail" src="<?= base_url('assets/img/conanmovie.jpg')?>"></td> <td>conan Movie: Magician Of The Silver Sky (First)</td> <td>aoyama Gosho</td> <td>pt. Gramedia</td> <td>komik</td> <td> <a class="btn btn-success" href="#"><i class="fa fa-edit"></i></a> <br><a href="#" class="btn btn-danger"><i class="fa fa-trash"></i></a> </td> </tr> <tr> <td>3</td> <td><img class=" img img-responsive thumbnail" src="<?= base_url('assets/img/codeigniter.jpg')?>"></td> <td>framework Codeigniter 3</td> <td>yenda Purbadian</td> <td>pt. Gramedia</td> <td>edukasi</td> <td> <a class="btn btn-success" href="#"><i class="fa fa-edit"></i></a> <br><a href="#" class="btn btn-danger"><i class="fa fa-trash"></i></a></td> </tr> <tr> <td>4</td> <td><img class=" img img-responsive thumbnail" src="<?= base_url('assets/img/ecommerce.jpg')?>"></td> <td>membangun Toko Online Dengan Joomla & J2Store + Cd</td> <td>m. Hilmi Masruri & Java Creativity </td> <td>pt. Gramedia</td> <td>edukasi dan Teknologi</td> <td> <a class="btn btn-success" href="#"><i class="fa fa-edit"></i></a> <br><a href="#" class="btn btn-danger"><i class="fa fa-trash"></i></a> </td> </tr> </tbody> </table> <footer class="footer"> <div class="container-fluid"> <p class="copyright pull-right"> <script>document.write(new Date().getFullYear())</script> Teknik Informatika Universitas Pasundan. </p> </footer> Salin kode berikut ini dan simpan sebagai file tambah_buku.php. <div class="main-panel"> <nav class="navbar navbar-transparent navbar-absolute"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">bookookoo</a> <div class="collapse navbar-collapse"> TIM DOSEN IF 12

14 <ul class="nav navbar-nav navbar-right"> <li> <a href="#pablo" class="dropdown-toggle" data-toggle="dropdown"> <i class="material-icons">person</i> <p class="hidden-lg hidden-md">admin</p> </a> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group is-empty"> <input type="text" class="form-control" placeholder="search"> <span class="material-input"></span> <button type="submit" class="btn btn-white btn-round btn-just-icon"> <i class="material-icons">search</i><div class="ripple-container"> </button> </form> </nav> <div class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header" data-background-color="green"> <h4 class="title">tambah Data Buku</h4> <div class="card-content"> <form action="#" method="post" enctype="multipart/form-data" > <div class="row"> <div class="col-md-4"> <div class="form-group label-floating"> <label class="control-label">kategori</label> <select class="form-control" name="kategori"> <option value="#" disabled selected></option> <option value="1">novel</option> <option value="2">bahasa dan Kamus</option> <option value="3">agama</option> <option value="4">edukasi</option> </select> <div class="col-md-4"> <div class="form-group label-floating"> <label class="control-label">judul Buku</label> <input type="text" class="form-control" name="judul"> <div class="col-md-4"> <div class="form-group label-floating"> <label class="control-label">nama Pengarang</label> <input type="text" class="form-control" name="pengarang"> <div class="row"> <div class="col-md-3"> <div class="form-group label-floating"> <label class="control-label">penerbit</label> <input type="text" class="form-control" name="penerbit"> <div class="col-md-3"> <div class="form-group label-floating"> <label class="control-label">tahun Terbit</label> <input type="text" class="form-control" name="tahunterbit"> <div class="col-md-3"> <div class="form-group label-floating"> TIM DOSEN IF 13

15 <label class="control-label">isbn</label> <input type="number" min="0" class="form-control" name="isbn"> <div class="col-md-3"> <div class="form-group label-floating"> <label class="control-label">browse Image</label> <input type="file" id="inputfile4" name="filefoto" class="form-control"> <div class="input-group"> <input type="text" readonly="" class="form-control"> <div class="row"> <div class="col-md-12"> <div class="form-group label-floating"> <label class="control-label">sinopsis Buku</label> <textarea class="form-control" rows="5" name="sinopsis"></textarea> <button type="submit" class="btn btn-success pull-right" style="margin: 0 20px 20px 0;"><i class="fa fa-save"></i> Simpan</button> <div class="clearfix"> </form> <footer class="footer"> <div class="container-fluid"> <p class="copyright pull-right"> <script>document.write(new Date().getFullYear())</script> Teknik Informatika Universitas Pasundan. </p> </footer> Jika data berhasil tampil, silakan lakukan hal yang hampir serupa untuk menampilkan data kategori buku! *) Tanyakan kepada asisten jika ada hal yang tidak dimengerti! Selamat Mencoba dan tetap semangat TIM DOSEN IF 14

16 3 Bagian 3 TUGAS 1. Buatlah sebuah halaman backend statis menggunakan metode templating dan tanpa menggunakan template halaman admin. Data yang ditampilkan pada website yang kalian buat bergantung pada kategori yang dibagikan. Untuk kategori dibagikan sesuai urutan digit terakhir NRP seperti dibawah ini: NRP % 10 = 1 -> Film NRP % 10 = 2 -> Pakaian NRP % 10 = 3 -> Elektronik NRP % 10 = 4 -> Otomotif NRP % 10 = 5 -> Obat NRP % 10 = 6 -> Makanan dan Minuman NRP % 10 = 7 -> Mainan NRP % 10 = 8 -> Aksesories NRP % 10 = 9 -> Komputer (HW/SW) NRP % 10 = 0 -> Outdoor Stuff 2. Buatlah sebuah database yang memiliki minimal 2 buah tabel yang saling terhubung. Salah satu tabel merupakan tabel master dan tabel lainnya bergantung kepada tabel master tersebut. Tabel master terdiri dari (minimal) 2 field dan tabel lainnya terdiri dari (minimal) 6 field. 3. Tugas dikumpulkan maksimal 3 X 24 jam ke alamat asisten masing masing atau sesuai ketentuan pengiriman dari asisten di shift praktikum masing masing. TIM DOSEN IF 15