Modul Web21

2016 ZELDIANTO EKA PUTRA
P
E
M
O
G
R
A
M
A
N
W
E
B
2
Pemograman Web 2 By Zeldianto E.P 1
CODE IGNITER
Code Igniter merupakan aplikasi open source yang berupa framework dengan
metode MVC (Model,View,Controller) untuk membangun sebuah website
dinamis dengan menggunakan PHP. Code Igniter memudahkan Developer
dalam membuat website dibandingkan harus membuat dari awal.
MVC merupakan suatu konsep yang cukup populer dalam pembangunan
aplikasi web. Terdapat 3 jenis komponen yang membangun suatu MVC yaitu :
1. View, bagian yang menangani presentation logic. Pada suatu aplikasi
web bagian ini bisa berupa file HTML atupun PHP yang diatur oleh
Controller.
2. Model, biasanya berhubungan langsung dengan database untuk
memanipulasi data seperti Insert, Delete, Update, Search, Create.
3. Controller, merupakan bagian yang mengatur hubungan antara bagian
model dan view. Controller berfungsi menerima request dari user
kemudian menentukan apa yang akan diproses oleh aplikasi.
Code Igniter adalah sebuah framework yang bebas digunakan siapapun tanpa
harus membayar lisensi. Code Igniter dapat anda download dari situs dibawah
ini:
http://www.codeigniter.com
http://duasatuberbagi.blogspot.co.id/2016/03/download-codeigniter.html
Sebelum menggunakan Code Igniter tentunya anda sudah memiliki aplikasi

pengelola database seperti WAMP,LAMP,MAMP,XAMPP. Anda bebas
menggunakan aplikasi manapun, namun saya menyarankan agar anda
memakai XAMPP atau WAMP karna kemudahan pemakaian dan
kelengkapan tools yang disediakan.
http://duasatuberbagi.blogspot.co.id | CANRUS
INSTALASI CODE IGNITER

Setelah anda berhasil mendownload Code Igniter dari salah satu link pada
halaman 1, selanjutnya anda dapat melakukan proses instalasi agar Code
Igniter dapat berjalan di komputer anda. Silahkan extract hasil download tadi,
lalu pindahkan ke direktori C:\xampp\htdocs. Lalu rename menjadi ci_template.
Setelah itu buka browser anda dan ketikkan link http://localhost/ci_template/

Jika muncul tampilan seperti dibawah ini, maka itu pertanda bahwa anda
sudah berhasil melakukan proses instalasi Code Igniter.
CRUD DALAM CODE IGNITER

Crud dalam bahasa pemrograman merupakan singkatan dari Create, Read,
Update, Delete. Untuk mencoba melakukan Proses tersebut, silahkan ikuti
langkah berikut:
Setelah anda melakukan proses instalasi seperti pada halaman 2, selanjutnya
buka file yang ada di dalam Aplication -> Config. Yaitu file config.php,
autoload.php, database.php, routes.php.
Pada file config.php atur bagian base_url dan index_page seperti gambar
dibawah :
Pada file autoload.php atur bagian libraries dan helper seperti gambar
dibawah :
Pada file database.php edit bagian default database seperti gambar dibawah
ini :
Dengan catatan „database‟ => merupakan nama dari database yang akan kita
hubungkan ke dalam projek, disini saya menamai dengan “dbtemplate”. Perlu
diingat untuk cara yang ini kita memang belum memasukkan template ke
dalam Code Igniter, namun saya memberi nama projek ini dengan nama
template, karna projek ini akan terus berlanjut sampai tahap pemasukan
template nantinya.
Pada file routes.php silahkan anda edit pada default Controller yang terdapat
pada bagian paling bawah.
Jika kita artikan settingan seperti gambar diatas, itu berarti ketika kita
menjalankan web dengan browser, maka controller yang berjalan pertama kali
adalah controller “pemasok”. Sekarang kita masuk ke tahapan pembuatan
database. Silahkan buka aplikasi SQLYOG, atau PhpMyAdmin lewat browser
juga bisa. Lalu buatlah rangkaian database seperti ini
Jika database telah berhasil dibuat, maka langkah selanjutnya yaitu kita akan
membuat sebuah file baru yang akan kita letakkan di dalam controller, nama
dari file baru ini harus sama dengan yang tertera pada settingan default
Controller yaitu “Pemasok.php” ingat, nama dari controller ataupun model
harus diawali dengan huruf besar.
Berikut koding yang akan kita pakai pada controller Pemasok.php :
<?php
class Pemasok extends CI_Controller
{
function __construct()
{
parent :: __construct();
$this->load->model('Pemasokmodel');
}
function index()
{
$data = $this->Pemasokmodel->tampildata();
$d['tampil'] = $data;
$this->load->view('datapemasok',$d);
}
function formpemasok()
{
$idpem = $this->uri->segment('3');
if(!empty($idpem)){
$data['simpan'] = 'lama';
$data['ambildata'] = $this->Pemasokmodel-
>ambildata($idpem);
}
else
{
$data['simpan'] = 'baru';
$data['ambildata'] = $this->Pemasokmodel->datakosong();
}
$this->load->view('formpemasok',$data);
}
function simpan(){
$simpan = $this->input->post('simpan',true);
$idpem = $this->input->post('idpem',true);
$nama = $this->input->post('namapem',true);
$alamat = $this->input->post('alamat',true);
$notelp = $this->input->post('notelp',true);
if($simpan=='baru'){
$query = $this->Pemasokmodel-
>simpan($idpem,$nama,$alamat,$notelp);
if($query == TRUE)
{
echo "Data Dengan ID Pemasok ".$idpem." Berhasil di Simpan
<br>" ;
echo "<a href='index'>Kembali</a>";
}
}
if($simpan=='lama'){
$query = $this->Pelangganmodel-
>update($idpem,$nama,$alamat,$notelp);
if($query == TRUE)
{
echo "Data Dengan ID Pemasok ".$idpem." Berhasil di Update
<br>" ;
echo "<a href='index'>Kembali</a>";
}
}
}
function hapus()
{
$this->Pemasokmodel->delete($idpem);
redirect('pemasok/index');
}
}
?>
$this->Pemasokmodel->delete($idpem);
redirect('pemasok/index');
}
}
?>
Setelah Pemasok.php dibuat, maka selanjutnya kita akan membutuhkan

sebuah model. Buatlah file model dengan nama “Pemasokmodel.php” :
<?php
class Pemasokmodel extends CI_Model
{
function tampildata()
{
return $this->db->get('pemasok');
}
function ambildata($idpem)
{
return $this->db->query("select * from pemasok where
idpemasok = '$idpem'");
}
function datakosong()
{
return $this->db->query("select '' as idpemasok, '' as
namapemasok, '' as alamatpemasok, '' as notelppemasok");
}
function simpan($idpem,$nama,$alamat,$notelp)
{
return $this->db->query("insert into pemasok
values('$idpem','$nama','$alamat','$notelp')");
}
function update($idpem,$nama,$alamat,$notelp)
{
return $this->db->query("UPDATE pemasok SET
namapemasok='$nama',alamatpemasok='$alamat',notelppemasok='
$notelp' WHERE
idpemasok='$idpem'");
}
function delete($idpem)
{
return $this->db->query("DELETE FROM pemasok WHERE
idpemasok='$idpem'");
}
}
?>
Controller dan Model sudah ada, namun tampilannya belum ada, maka kita
lanjut ke proses pembuatan tampilan, dimana kita akan membuat sebuah file
dengan nama “datapemasok.php” kemudian anda dapat menyimpannya ke
dalam folder View :
<html>
<body>
<center>
<table width="70%" border="5">
<tr>
<th>No.</th>
<th>ID PEMASOK</th>
<th>NAMA PEMASOK</th>
<th>ALAMAT</th>
<th>NO.TELP</th>
<th>Aksi</th>
</tr>
<?php
$nomor = 0 ;
foreach($tampil->result_array() as $baris){
$nomor ++;
?>
<tr>
<td><?php echo $nomor?></td>
<td><?php echo $baris['idpemasok']?></td>
<td><?php echo $baris['namapemasok']?></td>
<td><?php echo $baris['alamatpemasok']?></td>
<td><?php echo $baris['notelppemasok']?></td>
<td>
<input type="button" value="Edit" onClick="location.href=('<?php echo
base_url().'pemasok/formpemasok/'.$baris['idpemasok']?>')">
<input type="button" value="Hapus" onClick="pesan=confirm('Yakin data ini
dihapus ?'); if(pesan) location.href=('<?php echo
base_url().'pemasok/hapus/'.$baris['idpemasok']?>'); else return false;">
</td>
</tr><tr>
<?php } ?>
</table><h1></h1>
<button type="button" onClick="location.href=('<?php echo
base_url().'Pemasok/formpemasok'?>')">Tambah Data</button>
</center>
</body>
</html>
Langkah terakhir yaitu membuat sebuah form pemasok, dimana form ini akan
di tampilkan ketika anda meng-klik tombol Tambah Data atau juga tombol
Edit. Untuk itu silahkan buat file baru dengan nama “formpemasok.php” dan
simpan pada folder View.
<html>
<body>
<center>
<h2>Form Pemasok</h2><hr>
<form method="post" action="<?php echo base_url().'pemasok/simpan'?>">
<input type="hidden" name="simpan" value="<?php echo $simpan?>">
<?php $row = $ambildata->row_array(); ?>
<table width="60%" border="0">
<tr>
<td>ID PEMASOK</td>
<td width="2%">:</td>
<td><input type="text" name="idpem" required value="<?php echo
$row['idpemasok']?>"></td>
</tr>
<tr>
<td>NAMA PEMASOK</td>
<td><input type="text" name="namapem" required value="<?php echo
$row['namapemasok']?>"></td>
</tr>
<tr>
<td>ALAMAT</td>
<td><input type="text" name="alamat" required value="<?php echo
$row['alamatpemasok']?>"></td>
</tr>
<tr>
<td>No.TELP / HP</td>
<td><input type="text" name="notelp" required value="<?php echo
$row['notelppemasok']?>"></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="SIMPAN">
<input type="button" value="BATAL" onClick="location.href=('<?php echo
base_url().'pemasok'?>')">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Sampai disini anda sudah berhasil membuat sebuah aplikasi Web. Untuk
menjalankannya, silahkan buka browser dan ketikkan URL :
http://localhost/ci_template/
Berikut screenshot tampilan ketika web ini dijalankan :
NB: Logika yang dipakai dalam program ini yaitu ketika web di jalankan,
maka anda akan di arahkan ke tampilan data pemasok, pada tampilan data
pemasok, ada sebuah tombol dibawah table dengan nama Tambah Data,
tombol tersebut akan mengarahkan anda menuju form pemasok, dimana
anda di berikan hak untuk mengisi data yang ada pada form. Pada form
pemasok terdapat tombol Simpan dan Batal, jika anda menekan tombol
simpan, maka akan ada tampilan “Data dengan ID PEMASOK PM-XXX
berhasil disimpan” Jika anda menekan tombol Batal, maka anda akan
diarahkan langsung ke data pemasok.
GABUNGAN CODE IGNITER & TEMPLATE

Template Website merupakan merupakan salah satu dokumen atau file yang
sangat dibutuhkan dalam pembuatan website. Pada dasarnya, seorang
webmaster perlu mengetahui pengertian template website itu sendiri sebelum
membangun sebuah website. Intinya, template merupakan sebuah desain
tampilan halaman dengan berisikan file, dokumen, dan model-model
tambahan yang dikodekan dengan bahasa program dan siap pakai.
Untuk mendapatkan template anda dapat mendownload di berbagai situs
yang ada di internet. Berikut linknya :
https://freewebsitetemplates.com/
www.free-css.com/free-css-templates
www.dreamtemplate.com/
www.justfreetemplates.com/joomla-templates
www.html5webtemplates.co.uk/templates.html
http://all-free-download.com/free-website-templates/
Untuk memulai proses Penggabungan template kedalam Code Igniter, anda

dapat Mendownload terlebih dahulu template yang ada di salah satu situs
diatas. Hasil download akan berbentuk ZIP atau RAR, silahkan extract file
tersebut. Kurang lebih hasil extract tersebut akan anda dapatkan folder-folder
seperti Images, CSS, dan folder/ file pendukung lainnya.
Silahkan buat folder baru dengan nama “asset” didalam project ci_template.
Lalu copy-kan hasil extract-kan template yang sudah di download tadi
kedalam folder “asset”.
Setelah semua data di copy kedalam folder “asset”, diantara data tersebut
terdapat file “index.html”. Buka file tersebut dengan menggunakan EditPlus
atau Notepad++, lalu Save As dengan nama “template.php” yang artinya
format html tadi sudah kita rubah mejadi php. Simpan file “template.php”
tersebut ke dalam folder Application -> Views.
Sekarang anda perlu merubah beberapa skrip yang ada pada template.php
dengan menggunakan EditPlus atau Notepad. Caranya, buka file
template.php dengan EditPlus, disini saya menggunakan EditPlus sebagai
media editornya.
Pada bagian setelah <head> tambahkan koding seperti gambar dibawah ini:
Koding tersebut menghubungkan template.php tersebut ke folder asset,

Kenapa ? karna file .css dan juga image sebagai pelengkap dari template
tersebut sudah kita pisahkan ke folder asset. Makanya template.php itu kita
hubungkan ke folder asset. Jika pada saat menjalankan web terdapat ketidak
cocokan tampilan, maka anda perlu mengecek bagian ini.
Selanjutnya tambahkan semua link yang memakai “href” seperti gambar :
Perlu diingat bahwa “href” yang menunjukkan link URL tidak perlu
ditambahkan <?php echo $link ?> karna yang dirubah hanya lah link yang
menyambungkan template ke direktori asset. Contoh lainnya seperti gambar
berikut:
Yang artinya, koding tadi tidak hanya ditambahkan untuk koding yang
diawali “href” saja, namun juga akan berlaku untuk “src”.
Setelah itu, silahkan buat sebuah controller baru dengan nama Template.php
dengan koding berikut :
<?php
class Template extends CI_Controller
{
function index()
{
$this->load->view('template');
}
}
?>
Lalu untuk menjalankan template ini saat pertamakali web dijalankan anda
perlu merubah bagian default_Controller yang ada di Application -> Config ->
Routes.php seperti berikut :
Untuk mengecek apakah anda sudah berhasil memasukkan template ke

dalam Code Igniter, silahkan ketikkan http://localhost/ci_template/ pada
browser anda.
Hasil untuk setiap template berbeda, jika pada template yang anda gunakan,
tampilannya tidak sesuai aturan sebenarnya (berserakan) maka anda dapat
mengganti koding yang ada setelah “href” dan “src” tadi dengan :
Jika anda sudah melakukan cara diatas dengan benar, maka anda akan
mendapatkan tampilan template yang anda inginkan. Seperti di bawah ini :
Pada halaman tampilan awal template ini terdapat bagian Menu dan bagian
Konten. Pada bagian menu terdapat semua menu yang kita butuhkan guna
membangun sebuah website. Sementara pada bagian konten merupakan isi
dari postingan atau isi dari website yang kita buat setelah kita memilih salah
satu menu yang ada pada bagian menu.
Sama kita lihat pada tampilan gambar di atas, dari tulisan Uji Coba, Home,
sampai Contact merupakan barisan dimana menu tertera. Lalu pada bagian
gambar tangan di atas, merupakan bagian konten dimana isi dari website
yang kita bangun di tampilkan.
Baiklah, kita lanjut ke proses selanjutnya, yaitu mengedit atau menambahkan
menu sesuai dengan kebutuhan. Pada template di atas, saya sudah
mendapatkan 5 menu, yaitu Home, About, Service, Solution, Contact. Namun
saya tidak menginginkan menu-menu tersebut. Saya ingin mengganti salah
satu nya dengan menu Pemasok. Kenapa? Karna kita akan mengaitkan
template ini dengan projek kita sebelumnya tentang CRUD.
GABUNGAN CODE IGNITER & TEMPLATE 2

Pada proses ini tentunya anda sudah dapat menampilkan template yang ada
di dalam Code Igniter. Selanjutnya, saya menginginkan “datapemasok.php” di
tampilkan di dalam template ini.
Langkah pertama kita akan meng-edit bagian menu seperti dibawah ini :
Menjadi seperti ini :
Setelah itu anda dapat menghapus bagian konten dengan bantuan Adobe
Dreamweaver agar lebih gampang. Lalu pada bagian konten, tepat dimana
“datapemasok.php” akan di tampilkan anda tambahkan koding berikut :
Lalu langkah selanjutnya silahkan buka file “config.php” yang ada pada folder
application -> config. Lalu edit pada bagian base_url dan index_page . Silahkan
jalankan web anda. Maka anda akan mendapatkan tampilan seperti ini :
Jika anda tidak bisa menekan tombol Edit atau pun Tambah Data, maka anda
perlu mengedit bagian “datapemasok.php” tepatnya pada bagian input type
button “Tambah Data”. Tambahkan “index.php” sebelum koding
“pemasok/formpemasok”
Maka setelah itu anda akan mendapatkan tampilan seperti berikut :
NB : Sebagian webmaster menggunakan banyak controller untuk satu projek,

namun ada juga yang hanya menggunakan satu controller. Untuk Ebook ini
saya hanya menggunakan satu controller yang selalu di Update sesuai
kebutuhan.
PENUTUP
Demikian ebook sederhana ini saya buat. Mungkin isinya masih jauh dari
kata sempurna, namun saya berharap semoga ebook ini dapat membantu dan
menjadi bahan acuan bagi teman-teman dalam memulai membangun sebuah
aplikasi website, terutama bagi teman-teman yang berada pada level pemula.
Apabila teman-teman terdapat pertanyaan, teman-teman dapat
menghubungi saya di :
 E-Mail = zeldes21@gmail.com
 Bloger = http://duasatuberbagi.blogspot.co.id
 Facebook = zeldiantoekaputra@yahoo.com
Terimakasih, semoga dapat membantu Salam Sobat DUASATU.

Modul Web21

Diunggah oleh

Informasi Dokumen

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

Modul Web21

Diunggah oleh

Hak Cipta:

Format Tersedia

2016 ZELDIANTO EKA PUTRA

Sebelum menggunakan Code Igniter tentunya anda sudah memiliki aplikasi

INSTALASI CODE IGNITER

Setelah itu buka browser anda dan ketikkan link http://localhost/ci_template/

CRUD DALAM CODE IGNITER

Setelah Pemasok.php dibuat, maka selanjutnya kita akan membutuhkan

GABUNGAN CODE IGNITER & TEMPLATE

Untuk memulai proses Penggabungan template kedalam Code Igniter, anda

Koding tersebut menghubungkan template.php tersebut ke folder asset,

Untuk mengecek apakah anda sudah berhasil memasukkan template ke

GABUNGAN CODE IGNITER & TEMPLATE 2

Menjadi seperti ini :

Maka setelah itu anda akan mendapatkan tampilan seperti berikut :

NB : Sebagian webmaster menggunakan banyak controller untuk satu projek,

Anda mungkin juga menyukai