Blogs ariefbb | Information Technology Best Practice – ITB Rotating Header Image

aplikasi web

Implementasi Breadcrumb untuk Navigasi Aplikasi Web

Breadcrumb bagi pengembang web merupakan satu komponen yang sangat penting. Breadcrumb merupakan representasi visual untuk hirarki navigasi . Komponen ini digunakan untuk memudahkan user mengetahui posisi dalam suatu web . Untuk web dengan multi-page (halaman banyak) serta data detail yang banyak dan saling terkait, maka posisi breadcrumb sangat dibutuhkan .

Ada banyak library breadcrumb yang bisa digunakan. Beberapa kriteria yang bisa dipilih oleh developer untuk digunakan antara lain :
1.  Memudahkan user mengetahui posisinya saat sekarang berada
2.  Memudahkan user untuk berpindah ke halaman utama , halaman lainnya sesuai dengan kebutuhan
3.  Hirarkis dan dinamis , mengenal tingkatan halaman serta dinamis untuk membuat user kenal dengan lokasi tempatnya berada .
Perancangan breadcrumb dilakukan mulai dengan mendefinisikan hirarki halaman dari aplikasi web yang akan dibuat , serta deep atau kedalaman dari situs tersebut .
Untuk implementasinya , maka kita dapat melakukan
1. hard-coding , membuat kode dengan menuliskan skrip dengan bahasa yang dikenali oleh browser
2. soft-coding, memanfaatkan beragam framework dan library yang terkait .
Salah satu contohnya adalah bisa dengan memanfaatkan library codeigniter breadcrumb .
Contoh implementasi breadcrumb dengan library breadcrumb :
1. controller
import library breadcrumb :
parent::__construct();
$this->load->library(‘breadcrumb’);
menulis implementasi di fungsi

function index(){ $this->breadcrumb->append_crumb(‘Home’, base_url()); $this->breadcrumb->append_crumb(‘Kategori’, base_url().’index.php/category’); //$this->breadcrumb->append_crumb(‘Spring Tutorial’, base_url().’tutorials/spring-tutorials’);$data=array(
‘category’=>$this->category_model->get_data_per_page(null),
‘breadcrumbs’=>$this->breadcrumb->output(),
);
$this->template->title(‘icomlabs’,’Category’)->set_layout(‘default’)->build(‘category_view’,$data);

}

2. view
tampilkan di view
<div>
<p>
<?php echo $breadcrumbs;?>
</p>
</div>
Kita secara fleksibel akan dapat menentukan tingkat / level navigasi sampai level detail yang sesuai dengan kebutuhan.

Setting User Manager untuk Apache Tomcat 7.0.16

Pada posting sebelumnya , sudah disampaikan mengenai setup server Apache Tomcat dengan menggunakan stack XAMPP 1.7.7 . Setelah tomcat berhasil dijalankan , kemudian aplikasi web berbasis JAVA sudah dapat ditampilkan , selanjutnya adalah mengelola tomcat web server.

Untuk pengelolaan , tomcat sudah menyediakan ‘Tomcat Manager’ . Bisa diakses dari url : http://localhost:8080 . Persoalan muncul pada saat mengklik menu ‘Tomcat Manager’ ini , karena muncul pop up yang meminta username dan password user manager.

Menambahkan User Manager

Cara menambahkan user manager ini , dapat dilakukan dengan cara :

1. edit file tomcat-users.xml dengan texteditor , lokasi file di [direktori xampp 1.7.1]\tomcat\conf

2. tambahkan baris di bawah ini, persis di atas </tomcat-users> pada file:

<user username=”admin” password=”root” roles=”admin,manager-gui”/>

3. simpan file

4. restart tomcat dari xampp-control panel .

5. klik ‘admin’ pada tomcat xampp-control panel untuk menampilkan halaman apache tomcat .

6. klik menu ‘tomcat manager’ , masukkan username : admin, password : root

7. akan muncul tampilan aplikasi tomcat manager

Hasil Output

image

Referensi Lanjut