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

IT Tutorial

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

Setup Apache Tomcat 7.0.16 di XAMPP 1.7.7

Apache Tomcat sangat diperlukan untuk membuat dan mengembangkan aplikasi server berbasis JAVA . Apache Tomcat adalah environment yang perlu kita siapkan. XAMPP sebagai web server mengakomodir kebutuhan pengembangan ini dengan memberikan fitur tomcat pada paketnya.

Instalasi XAMPP 1.7.7 :

  1. Download setup installer XAMPP di link berikut ,
  2. install XAMPP 1.7.7 , ikut langkah-langkah instalasi
  • – untuk win7 pastikan folder instalasi xampp tidak di drive C:/Program Files , ada masalah dengan permissionsetelah – – selesai instalasi , jalankan xampp-control dari start menu,
  • untuk win7 pastikan xampp dijalankan (run) sebagai administrator , klik-kanan shortcut , klik run as administrator

Menyiapkan Environment JAVA untuk tomcat:

  1. Download setup java development kit, jdk di link berikut ,
  2. install jdk , ikuti langkah-langkah instalasi

Setup Windows Environment :

  1. Klik start menu , klik-kanan pada bagian [Computer] , pilih [Properties]
  2. klik [Advanced system settings]
  3. klik [Environment Variables]
  4. klik pada ‘System Variables’ klik [New]

– untuk JAVA_HOME,

  • ketik pada ‘variable name’ : JAVA_HOME
  • pada variable value : [direktori program files]\Java\jdk1.6.0_25\bin
  • klik ‘OK’

– untuk CATALINA_HOME, klik [New]

  • ketik pada ‘variable name’ : CATALINA_HOME
  • pada variable value : [direktori xampp 1.7.7]\tomcat;
  • klik ‘OK’

– menambahkan folder java/bin pada PATH

  • pada ‘system variables’ , temukan dan pilih ‘Path’
  • klik [Edit] , pada bagian ‘variable value’ tambahkan: ;[direktori program files]\Java\jdk1.6.0_25\bin
  • klik OK

Menjalankan Apache Tomcat

Jalankan xampp-control ,

pada bagian ‘Tomcat ‘ klik tombol [start] , maka muncul teks ‘running’ .

klik tombol [Admin]

Gambar Output

 

gambar tomcat

tomcat

Referensi Lanjut

Temporarily Disable AVG Antivirus

Sensitif-nya suatu antivirus terhadap file-file yang masuk (intrude) ke sistem komputer kita merupakan satu keunggulan software antivirus tersebut. Tetapi ‘sedikit’ menjengkelkan apabila kemudian software-software yang mau kita install akhirnya terfilter .

image

Ada caranya supaya kita leluasi untuk menginstall software-software yang kita perlukan. Cukup bypass atau ‘temporarily disable avg protection’.

Lakukan cara tersebut dengan

  1. Open AVG user Interface
  2. klik Tools > Advanced Settings
  3. Pada jendela settings klik dan centangi ‘Temporarily disable AVG protection
  4. klik OK

sip . kl sudah, coba jalankan kembali software yang ingin diinstallkan. Jangan lupa untuk mengaktifkan kembali proteksi AVG ini pada saat software sudah berhasil diinstalkan.

Postgresql – Create Database

CREATE THE PostgreSQL DATABASE

——————————

default login adalah default user dibuat pada saat postgres di install. Bila menggunakan command prompt, maka user database postgre terintegrasi dengan user native pada masing-masing server/komputer . Untuk itu, user login pada komputer kita harus di-create sebagai user database postres. Caranya adalah dengan membuka edito rpgAdmin3 dan membuat [login-roles] atas nama user login komputer kita .

Untuk meng-create database postgresql di lingkunganWindows, kita bisa gunakan pgAdmin3 lakukan langkah berikut ,

  1. jalankan editor pgAdmin3 : [start][all program][postgreSQL9.0][pgAdmin3]

  2. koneksi ke server database :

    1. pada [object browser] , klik-kanan [namaserver] , pilih [Connect]

    2. ketik password untuk user ‘postgres’ , klik [OK]

  3. create database :

    1. klik-kanan [databases] , pilih [new databases] , klik kolom [Name], ketik namadatabase

    2. klik [OK]

  4. create user :

    1. klik-kanan [login-roles] , pilih [new login-roles]

    2. ketik ‘Role Name’ , ‘Password’, ‘Password’

    3. klik [OK]

  5. ubah ownership database;

    1. klik-kanan ‘namadatabse’ ; pilih [properties] ,

    2. klik [Owner] pilih ‘login-roles’ yang dibuat pada langkah sebelumnya

    3. klik [OK]

Setelah database tersebut siap . Lanjutkan dengan langkah instalasi aplikasi web yang kita kehendaki .

Mengintegrasikan XAMPP dan PostGreSQL di Windows

Barangkali ada rekan-rekan developer yang sedang ngulik aplikasi web dengan database postgreSQL , saya tuliskan langkah-langkah integrasinya sebagai berikut .

Sebagai catatan, saya buat [xampp-direktori] di direktor F:\ silakan sesuaikan saja dengan environment yang ada di masing-masing PC .

Pre-requisite

  1. XAMPP , xampp-win32-1.7.3.exe
  2. postgreSQL , postgresql-9.0.1-1-windows.exe
  3. phpPgAdmin , phpPgAdmin-5.0.2.zip
  4. notepad untuk edit

Langkah 1 : Instalasi XAMPP for Windows

  1. jalankan xampp-win32-1.7.3.exe
  2. ikuti langkah-langkah instalasi ,

Langkah 2 : Instalasi PostgreSQL

  1. jalankan setup installer postgresql-9.0.1-1-windows.exe
  2. ikuti langkah-langkah instalasi
  3. definisikan direktori instalasi di [xampp-direktori]\ hasilnya adalah direktori [xampp-direktori]\PostGreSQL\9.0\
  4. tuliskan password untuk user db ‘postgres’ .
  5. Jalankan [start menu][all programs][postgresql][pgAdmin III]
    • klik-kanan [Server] [PostgreSQL 9.0] pilih ‘connect’ ketik password untuk user ‘postgres’
    • klik-kanan [Login Roles] , pilih ‘New Login Role’ , ketik role name : admin, password, . Pada tab [Role privileges] pilih ‘Superuser’ , klik OK
    • klik-kanan [Databases] pilih ‘New Databases’ , ketik Name, pilih Owner, klik OK

Langkah 3 : Instalasi phpPgAdmin

3.1 Deploy phpPgAdmin

  1. ekstrak dan copy phpPgAdmin-5.0.2.zip ke folder [xampp-direktori]/phpPgAdmin
  2. edit [xampp-direktori]\phpPgAdmin\conf\config.inc , untuk baris-baris berikut

$conf[‘servers’][0][‘desc’] = ‘PostgreSQL’;

$conf[‘servers’][0][‘host’] = ‘localhost’;

$conf[‘servers’][0][‘port’] = 5432;

$conf[‘servers’][0][‘sslmode’] = ‘allow’;

$conf[‘servers’][0][‘defaultdb’] = ‘postgres’;

$conf[‘servers’][0][‘pg_dump_path’] = ‘F:\\xampp\\PostgreSQL\\9.0\\bin\\pg_dump.exe’;

$conf[‘servers’][0][‘pg_dumpall_path’] = ‘F:\\xampp\\PostgreSQL\\9.0\\bin\\pg_dumpall.exe‘;

  1. edit file [xampp-direktori]\conf\extra\httpd-xampp.conf , ketik baris program berikut

#start

Alias /phpPgAdmin “F:\xampp\phpPgAdmin”

<Directory “F:\xampp\phpPgAdmin”>

AllowOverride AuthConfig

</Directory>

#end

  1. Tambahkan ‘phpPgAdmin’ pada tag <LocationMatch> sehingga menjadi :<LocationMatch “^/(?i:(?:xampp|security|licenses|phpmyadmin|phpPgAdmin|webalizer|server-status|server-info))”>

     

  2. Save file.

3.2 Edit file php.ini

  1. edit file [xampp-direktori]\php\php.ini , hapus ‘;’ pada baris :extension=php_pgsql.dll

     

  2. save file

3.3 Restart / Jalankan Apache

  1. setelah selesai jalankan xampp-control panel
  2. start apache
  3. akses dari browser ke http://localhost/phpPgAdmin
  4. ketik username : admin , password : password (sesuai dengan user yang dibuat dari pgAdminIII)