Haloo…. Selamat pagi. Alhamdulillah selepas subuh ini, Java Web Media mau melanjutkan tutorial tentang Code Igniter. Pada seri ke-5 dari tutorial ini, Anda akan membuat halaman dasbor Administrator (back end) yang akan dapat diakses di http://localhost/tutorial_ci/admin/dasbor.
Sebelum mengikuti tutorial ini, pastikan Anda telah:
- Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
- Mengikuti Tutorial Code Igniter Part 2: Membuat halaman home
- Mengikuti Tutorial Code Igniter Part 3: Membuat halaman kontak
- Mengikuti Tutorial Code Igniter Part 4: Membuat halaman login administrator
- Mengunduh hasil akhir tutorial Part 4 bisa diunduh di sini: https://drive.google.com/file/d/0B5BhV6c89_2YZWRiQnM1c1R1elE/edit?usp=sharing
- Untuk referensi, Anda dapat mengunduh source code hasil akhir Tutorial Part 5: https://drive.google.com/file/d/0B5BhV6c89_2YVU5zdkZjVGFERE0/edit?usp=sharing
Langkah persiapan
Sebelum memulai membuat halaman dasbor, Anda harus terlebih dahulu menyediakan folder untuk mengelola template halaman administrator. Halaman dasbor ini nantinya akan menjadi template dasar dari seluruh halaman administrator. Pada Tutorial Code Igniter Part 4: Membuat halaman login administrator Anda telah membuat folder layout.
Berikut langkah-langkahnya:
- Buka folder tutorial_ci/application/views/admin
- Buat folder baru dengan nama dasbor di dalam folder admin tersebut
Membuat template untuk seluruh halaman administrator/back end
Tutorial ini telah menyediakan bentuk template halaman administrator atau backend dari website Anda. Anda bisa melihatnya di folder tutorial_ci/assets/admin atau bisa Anda akses di http://localhost/tutorial_ci/assets/admin. Tugas Anda sekarang adalah membuat template tersebut agar dapat diakses melalui framework CI.Membuat file head.php (folder tutorial_ci/application/views/admin/layout/)
File head.php adalah bagian paling atas dari template halaman dasbor.
Ikuti langkah-langkah berikut ini:
- Buka file index.html dari folder tutorial_ci/assets/admin/. Ini adalah template dasar halaman dasbor
- Buat file PHP baru dengan nama head.php di folder tutorial_ci/application/views/admin/layout/
- Copy code baris ke-1 sampai dengan baris ke-13 (mulai dari <!doctype html> sampai dengan <div id=”wrapper”>, seperti terlihat dalam kode di bawah ini:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Halaman Administrator – Java Web Media</title>
<link href=”../images/javawebmedia.png” rel=”shortcut icon”>
<link href=”../css/style-admin.css” rel=”stylesheet” type=”text/css”>
<link href=”../SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css”>
<script src=”../SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
</head>
<body>
<div id=”wrapper”> - Lakukan perubahan pada kode yang ada di dalam area <head> sampai dengan </head> ini yang semula:
<title>Halaman Administrator – Java Web Media</title>
Lalu ubah menjadi dynamic text:
<link href=”../images/javawebmedia.png” rel=”shortcut icon”>
<link href=”../css/style-admin.css” rel=”stylesheet” type=”text/css”>
<link href=”../SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css”>
<script src=”../SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
<title><?php echo $title; ?></title> <link href="<?php echo base_url(); ?>assets/images/javawebmedia.png" rel="shortcut icon"> <link href="<?php echo base_url(); ?>assets/css/style-admin.css" rel="stylesheet" type="text/css"> <link href="<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"> <script src="<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
- Simpan file head.php
Membuat file header.php (dalam folder tutorial_ci/application/views/admin/layout/)
File header.php akan menampilkan bagian header dari halaman dasbor.
Berikut langkah-langkahnya:
- Buat file PHP baru dengan nama header.php dalam folder tutorial_ci/application/views/admin/layout/
- Dari file index.html yang ada di folder assets/admin/, copy code mulai dari <header> sampai dengan <!–En header–> (sekitar baris ke-15 s/d 21) seperti terlihat pada kode di bawah ini:
<header> <div class="akun"><a href="#" title="Update konfigurasi"><img src="../images/javawebmedia.png" width="16" height="16"> Sistem Informasi Java Web Media</a></div> <div class="akun"><a href="#" title="Update profil"><img src="../images/img/user_red.png" width="16" height="16"> Andoyo cakep</a></div> <div class="akun"><a href="#" title="Logout disini"><img src="../images/img/delete.png" width="16" height="16"> Logout</a></div> <div class="home"><a href="#" title="Beranda"><img src="../images/img/house_go.png" width="16" height="16"> Beranda</a></div> </header> <!--En header-->
- Lalu pada paste code tersebut di file header.php kemudian lakukan perubahan sehingga menjadi seperti kode di bawah ini. Perubahan-perubahan yang dilakukan diberi warna merah.
<header> <div class="akun"><a href="<?php echo base_url(); ?>admin/dasbor/config" title="Update konfigurasi"><img src="<?php echo base_url(); ?>assets/images/javawebmedia.png" width="16" height="16"> Sistem Informasi Java Web Media</a></div> <div class="akun"><a href="<?php echo base_url(); ?>admin/update" title="Update profil"><img src="<?php echo base_url(); ?>assets/images/img/user_red.png" width="16" height="16"> Andoyo cakep</a></div> <div class="akun"><a href="<?php echo base_url(); ?>admin/logout" title="Logout disini"><img src="<?php echo base_url(); ?>assets/images/img/delete.png" width="16" height="16"> Logout</a></div>
<div class="home"><a href="<?php echo base_url(); ?>" title="Beranda"><img src="<?php echo base_url(); ?>assets/images/img/house_go.png" width="16" height="16"> Beranda</a></div> </header> <!--En header-->
- Simpan file header.php
Membuat file menu.php (dalam folder tutorial_ci/application/views/admin/layout/)
File menu.php ini nanti akan menjadi file yang khusus untuk menampilkan dan mengelola menu yang ada di halaman administrator.
Berikut langkah-langkahnya:
- Buat file PHP baru dengan nama menu.php dalam folder tutorial_ci/application/views/admin/layout/
- Copy kode yang ada di file index.html dalam folder assets/admin/ mulai baris ke-23 sampai baris ke-46 (atau mulai dari <nav> sampai dengan <!– End navigasi–>). Atau seperti kode di bawah ini:
<nav>
<ul id=”MenuBar1″ class=”MenuBarHorizontal”>
<li><a href=”#”>Dashboard</a> </li>
<li><a href=”#” class=”MenuBarItemSubmenu”>Berita ARA</a>
<ul>
<li><a href=”#”>Data berita</a></li>
<li><a href=”#”>Tambah berita</a></li>
</ul>
</li>
<li><a href=”#” class=”MenuBarItemSubmenu”>User</a>
<ul>
<li><a href=”#”>Data User</a></li>
<li><a href=”#”>Tambah User</a></li>
</ul>
</li>
<li><a href=”config.php”>Konfigurasi</a></li>
</ul>
</nav>
<script type=”text/javascript”>
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”../SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”../SpryAssets/SpryMenuBarRightHover.gif”});
</script>
<!–End Navigasi–> - Paste kode tersebut ke file menu.php. Lalu lakukan perubahan (lihat warna merah).
<nav>
<ul id=”MenuBar1″ class=”MenuBarHorizontal”>
<li><a href=”<?php echo base_url(); ?>admin/dasbor”>Dashboard</a> </li>
<li><a href=”<?php echo base_url(); ?>admin/berita” class=”MenuBarItemSubmenu”>Berita ARA</a>
<ul>
<li><a href=”<?php echo base_url(); ?>admin/berita”>Data berita</a></li>
<li><a href=”<?php echo base_url(); ?>admin/berita/tambah”>Tambah berita</a></li>
</ul>
</li>
<li><a href=”<?php echo base_url(); ?>/admin/user” class=”MenuBarItemSubmenu”>User</a>
<ul>
<li><a href=”<?php echo base_url(); ?>admin/user”>Data User</a></li>
<li><a href=”<?php echo base_url(); ?>admin/user/tambah”>Tambah User</a></li>
</ul>
</li>
<li><a href=”<?php echo base_url(); ?>/dasbor/config”>Konfigurasi</a></li>
</ul>
</nav>
<script type=”text/javascript”>
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarRightHover.gif”});
</script>
<!–End Navigasi–> - Simpan kembali file menu.php tersebut
Membuat file footer.php (dalam folder tutorial_ci/application/views/admin/layout/)
File footer.php adalah bagian bawah dari tampilan website halaman dasbor.Berikut langkah-langkahnya:
- Buat file PHP baru dengan nama footer.php dalam folder tutorial_ci/application/views/admin/layout/
- Copy code yang ada di file index.html yang ada dalam folder assets/admin mulai baris ke-51 sampai ke-55 (atau mulai dari <div class=”clearfix”> sampai dengan </html>). Seperti pada kode di bawah ini:
<div class=”clearfix”></div>
<footer>Web Design by Java Web Media – © by Java Web Media </footer>
</div>
</body>
</html> - Paste kode tersebut di file footer.php
- Simpan file footer.php
Membuat file wrapper.php (di dalam folder tutorial_ci/application/views/admin/layout/)
File wrapper.php berfungsi untuk menyatukan seluruh elemen template yang telah dipisah-pisah tadi yang selainjutnya akan di-load di controller yang nanti akan kita buat.
Berikut langkah-langkahnya:
- Buat file PHP baru dengan nama wrapper.php dalam folder tutorial_ci/application/views/admin/layout/
- Ketik kode di bawah ini:
<?php
require_once(‘head.php’);
require_once(‘header.php’);
require_once(‘menu.php’);
require_once(‘konten.php’);
require_once(‘footer.php’); - Simpan file wrapper.php
Membuat file konten.php (dalam folder tutorial_ci/application/views/admin/layout/)
Halaman atau file konten.php akan digunakan untuk me-load/menampilkan halaman utama di masing-masing modul.
Berikut langkah-langkahnya:
- Buat file PHP baru dengan nama konten.php dalam folder tutorial_ci/application/views/admin/layout/
- Ketik kode di bawah ini:
<?php
if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
if($isi){
$this->load->view($isi);
} - Simpan file konten.php
Membuat file dasbor_view.php (dalam folder tutorial_ci/application/views/admin/dasbor/)
Halaman dasbor akan menjadi halaman utama bagian backend atau administrator website Anda.
Ikuti langkah-langkah ini:
- Buat file PHP baru dengan nama dasbor_view.php dalam folder tutorial_ci/application/views/admin/dasbor/
- Ketik kode di bawah ini:
<div class=”konten”>
<h1>Halaman dasbor Code Iginter – Java Web Media</h1>
</div>
<!– End konten –> - Simpan file dasbor_view.php
Membuat Controller untuk menampilkan halaman dasbor
File dasbor.php (dalam folder tutorial_ci/application/controllers/admin)
Langkah selanjutnya adalah membuat controller untuk menampilkan halaman dasbor agar bisa diakses melalui website Anda dengan alamat http://localhost/tutorial_ci/admin/dasbor/. Nama class yang digunakan adalah Dasbor.
Berikut langkah-langkahnya:
- Buat file PHP baru dengan nama dasbor.php di dalam folder tutorial_ci/application/controllers/admin/
- Ketik kode di bawah ini:
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class Dasbor extends CI_Controller {
public function index() {
$data=array(‘title’=>’Halaman Administrator – Java Web Media’,
‘isi’ =>’admin/dasbor/dasbor_view’
);
$this->load->view(‘admin/layout/wrapper’,$data);
}
} - Simpan file dasbor.php
Uji coba halaman dasbor
Langkah selanjutnya adalah mengetes halaman dasbor Anda dengan mengetikkan alamat http://localhost/tutorial_ci/admin/dasbor di browser Anda. Hasilnya harus seperti gambar di bawah ini:
Tidak ada komentar:
Posting Komentar