bonex apex: Mei 2011

Minggu, 29 Mei 2011

Hindari Cara Bonek Saat Install APEX 4

Sering kali kita melakukann install aplikasi dengan cara pintas, untuk aplikasi yang menyediakan "click and go" memang tidak masalah. Tapi untuk kasus software oracle biasanya tidak bisa seperti itu.

Oke untuk kasus APEX, cara pintas atau saya sebut cara bonek (bondho nekat), misal dengan cara googling, lantas dicoba install berdasarkan hasil googling. Kali ini khusus install APEX saya tidak menyarankan cara bonex, untuk yang lain boleh :D. Karena itu disini saya tidak memposting bagaimana installasi APEX. Tapi sekedar saran-saran dalam instalasi.

Untuk Kasus installasi APEX saran saya adalah :

Bacalah dokumen instalasi dengan sabar dan runtut
Penuhi semua requirement
Penuhi langkah post-instalasi

Pada kasus install dengan cara googling biasanya banyak yang terlewat langkah-langkahnya yang pada akhirnya ketika akan mengaktifkan komponen atau feature pada APEX akan terjadi Error.

Beberapa hal yang harus dilakukan namun biasanya terlewat dengan cara bonek adalah:

PlsqlNLSLanguage yang Db pakai adalah: AMERICAN_AMERICA.AL32UTF8.
Menjalankan script drdeflang.sql untuk requirement oracle text nanti berguna untuk help.
Menjalankan script untuk update PL/SQL Web Toolkit: kasus Db 11g bisa skip ini namun untuk 10g anda harus lakukan ini.
Membuat tablespace tersendiri untuk engine APEX: di dokumentasi biasa memakai SYSAUX, namun sebenarnya tidak disarankan demikian karena akan bercampur dengan schema database.
Membuat profile baru atau edit profile: Untuk kasus 11g, default profile yang dipakai biasanya expired 180 hari, maka saya sarankan untuk edit atau buat profile dengan PASSWORD_LIFE_TIME unlimited.
Menjalankan script untuk Enable Network service: Khusus untuk 11g.
Menjalankan script untuk Enable Indexing online help: Khusus untuk 11g.
Mengatur jumlah JOB_QUEUE_PROCESSES.
Membuang schema versi sebelumnya: jika anda install di oracle XE (versi 2) atau 11g jika saat install opsi dipilih maka Apex versi 3 sudah ada di database.
Memperbaiki invalid ACL: untuk 11g

Kali ini cara bonex hindari!!

Oke ... selamat baca doc instalasi, lalu selamat install.

Sabtu, 28 Mei 2011

Tribute to Mr. Denes Kubicek

Kenapa saya harus ucapkan terima kasih kepada orang ini?

Tanpa mengurangi rasa hormat dan terima kasih pula pada orang-orang komunitas Oracle Application Express (APEX), yang telah bermurah hati berbagi ilmu dalam forum, blog maupun demo aplikasi yang telah mereka buat. Spesial untuk orang inilah saya sangat terkesan.

Karena dia sangat murah hati memperbolehkan orang-orang komunitas ini untuk belajar melalui workspace yang telah dia buat. Hal ini bukanlah mudah, karena butuh kepercayaan dan kemurah hatian yang tulus, banyak sekali pakar-pakar APEX yang telah berbagi ilmu, namun saya baru pertama kali yang berani memberikan aksesnya ke dalam workspacenya. Serta begitu detail langkah-langkah yang diberikan, dengan akses yang diberikan saya belajar banyak dari dia, benar-benar membuka pintu yang banyak bagi saya, antara teori dan praktek jadi lebih mudah dibayangkan. Dan itu gratis… hebat bukan..what a generous man!

Sekali lagi

Thanks You Mr. Denes Kubicek for your help, assistance and generosity !

With all My Heart
Lutfi Hedir
Denes Kubicek's Blog
Denes Kubicek's Demo Tutorial

Apa itu Oracle Application Express (APEX) ?

Oracle Application Express (Oracle APEX) yang dulu disebut HTML-DB adalah sebuah framework yang berbasis pada sebuah database dedicated (sementara ini sampai versi terbaru masih dedicated untuk Oracle Db saja dan lisensi include dalam lisensi database), ini artinya apa bahwa engine aplikasi dibangun sepenuhnya didalam sebuah database. Bahkan untuk arsitektur Embedded PL/SQL Gateway seperti yang dipakai dalam Oracle XE dan Oracle 11G file image (library,css,theme,dll) disimpan didalam database metadata juga. Inilah hal yang berbeda dibandingkan framework yang lain.

Oracle APEX kenapa me-claim sebagai Application Express?

IDE Browser Based.
didalam framework anda telah memiliki, application developer, SQL workshop untuk interaksi dengan object Database,Team development dan Administration dalam satu paket yang bisa diakses melalui web browser.

Rapid Application Development (RAD).

APEX menganut RAD dimana memudahkan untuk membuat prototyping. Disisi client tidak ada instalasi apapun serta tidak memerlukan kemampuan knowledge yang handal dalam HTML,CSS,XML dan Javascript (catatan : anda hanya memakai komponen basic) anda dengan mudah bisa membangun form, report, chart dan komponen-komponen yang lain yang diperlukan dengan menggunakan wizard, theme dan komponen yang ada dengan kecepatan yang mengagumkan.

Asitektur

Komunikasi antara web browser dan Database dimana engine APEX berada melalui Web Listener. Adapun web listener yang bisa dipakai adalah

Oracle Application Express Listener

Cara pertama memakai Oracle Application Express Listener yang merupakan sebuah Java based sebagai alternative dari Apache mod_plsql. Anda bisa memakai web listener seperti OC4J, Oracle WebLogic Server dan Oracle GlassFish Server (Lihat implementasi arsitektur weblogic di posting ini)

Apache MOD_PLSQL
Cara kedua dengan mengimplementasikan Oracle HTTP Server (Apache) sebagai middle tier yang berisi mod_plsql plug-in . Plugin berfungsi sebagai penghubung komunikasi antara Web server dan Oracle Application Express objects yang ada didalam Oracle database. Arsitektur ini memerlukan konfigurasi file dads.conf. serta file image yang disimpan didalam Oracle HTTP Server (Apache).

Embedded PL/SQL Gateway
Cara ke tiga dengan Embedded PL/SQL Gateway (EPG) yang bekerja didalam oracle Database itu sendiri yaitu XML DB HTTP server. Arsitektur ini menyimpan file metadata seperti images, CSS, dan JavaScript didalam database. Konfigurasi ini cocok untuk development karena memerlukan konfigurasi yang mudah namun untuk production tidak disarankan untuk memakai ini.

Sejarah
Diperkenalkan pertama kali sebagai bagian dari Oracle Db 10gR1 adalah HTML DB 1.5 tahun 2003, dan berikut perkembangannya dan sedikit feature nya sampai sekarang:

2003 - HTML DB 1.5 : release pertama.

2004 - HTML DB 1.6 : memperkenalkan Theme.

2005 - HTML DB 2.0 : memperkenalkan SQL Workshop.

2006 – Oracle APEX 2.1 & 2.2 : memperkenalkan Package Application dan Oracle XE.

2007 - Oracle APEX 3.0 : memperkenalkan Flash Chart, PDF Printing dll.

2008 - Oracle APEX 3.1 : memperkenalkan Interactive Report ,BLOB dll.

2009 - Oracle APEX 3.2 : memperkenalkan migrasi dari Form Developer dll.

2010 - Oracle APEX 4.0 : memperkenalkan Dynamic Actions,Websheets, Chart Improvement, RESTful Webservice dll.

2011 - Oracle APEX 4.0.2 : perbaikan dari versi 4.0 .

Perkembangan terakhir Oracle Application Express 5.0 Early Adopter is now available ‼ untuk mencobanya disini dan keterangan improvementnya disitu.

Browser Requirement

Pada bagian ini saya hanya focus pada versi terbarunya, yaitu APEX 4, browser yang support adalah:

Microsoft Internet Explorer 7.0 ++.

Mozilla Firefox 3.5 ++ .

Google Chrome 4.0 ++ .

Apple Safari 4.0 ++ .

Namun harap di-ingat anda harus tetap mencobanya dulu ke masing-masing browser untuk memastikan semuanya lancar, karena script CSS dan JavaScript akan menampilkan hal yang berbeda di masing-masing browser.

APEX dan jQuery

Mulai versi 4 APEX sudah built-in dengan jQuery 1.4 ini artinya anda tidak perlu upload UI ke dalam APEX . jQuery telah tersedia di file image /i/libraries/ seperti gambar dibawah :

Sumber : Oracle APEX Documentation dan referensi yang lain

Jumat, 27 Mei 2011

Implementasi Syntax Highlighter ke Dalam Blogger

Ketika menuliskan contoh coding ke dalam blogger akan menghasilkan tulisan yang susah dibaca ketika tampil di blog. hal ini bisa dibantu dengan mengimplementasikan Syntax Highlighter ke dalam design template page blogger.

Implementasi ini pada dasarnya memasukkan link library javascript ke dalam design blogger kita, yang kemudian akan dieksekusi di bagian body.oke untuk singkatnya kita coba saja.

Login ke dalam blogger.
Backup template awal (klik Download Full Template) jaga-jaga untuk merestore template ke keadaan semula jika terjadi masalah.
Edit bagian <head></head> design. Design >>Edit HTML

copy paste css ini ke bagian head sebelum ]]></b:skin>
Sebelum tag </head> copy kode berikut:

Bagian sebelum tag </body> tambahkan code berikut

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Simpan perubahan template design.
Test Drive

Lakukan posting dengan Edit HTML
Tuliskan kode berikut
Lakukan preview
Tampilan posting pastikan seperti ini

select sysdate
from dual;

Catatan :

Anda tidak harus me-copy seluruh link script, tergantung kebutuhan code. Jika anda cuma butuh highligth untuk code: sql,css,xml dan javascript cukup copy seperti ini :

Gunakan tool ini untuk membantu escape HTML, terutama jika mengandung tag <link>

original source : http://heisencoder.net

Senin, 23 Mei 2011

Memanggil Procedure Melalui URL APEX 4 & Db 10g XE

Dengan apex kita bisa memanggil langsung sebuah procedure yang telah dibuat dalam sebuah schema database.

Salah satu contoh penggunaanya adalah untuk link verifikasi saat registrasi online, dimana user nanti tinggal di berikan sebuah URL yang langsung menjalankan sebuah procedure dalam DB.

Mengikuti langkah-langkah keren yang telah diberikan oleh Dietmar Aust's Blog,

eh..ternyata tetap saja gagal, karena contoh kasus yang dipakai adalah APEX versi 2 sedangkan yang saya pakai versi 4. coba-coba akhirnya ketemu solusinya.

ternyata untuk menggantikan skema FLOWS_020100 bukan FLOWS_FILES
melainkan APEX_04000 jadi modifikasi script menjadi :

alter session set current_schema=APEX_040000;

CREATE OR REPLACE function wwv_flow_epg_include_mod_local(
    procedure_name in varchar2)
return boolean
is
begin
    --
    -- Administrator note: the procedure_name input parameter may be in the format:
    --
    --    procedure
    --    schema.procedure
    --    package.procedure
    --    schema.package.procedure
    --
    -- If the expected input parameter is a procedure name only, the IN list code shown below
    -- can be modified to itemize the expected procedure names. Otherwise you must parse the
    -- procedure_name parameter and replace the simple code below with code that will evaluate
    -- all of the cases listed above.
    --
    if upper(procedure_name) in (
          'TUTORIAL.HELLO_WORLD') then
        return TRUE;
    else
        return FALSE;
    end if;
end wwv_flow_epg_include_mod_local;
/

Selanjutnya ikuti saja yang lain.

Jangan lupa untuk menyebutkan schema dan nama procedurenya sama persis (sensitive case). insyaallah berhasil, jika tidak berarti anda belum beruntung :)).

Danke Mr Dietmar Aust

Jumat, 20 Mei 2011

Implementasi jQueryUI Accordion

Implementasi jQueryUI Accordion pada dasarnya sama dengan ketika implementasi jQueryUI Tabs.
Yang berbeda adalah sbb:

Pada bagian template definition :

<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
#BODY##SUB_REGION_HEADERS##SUB_REGIONS#
</div>

<link rel="stylesheet" href = "/i/libraries/jquery-ui/1.8/themes/
ui-lightness/jquery-ui.css" type="text/css" />
 
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.accordion.min.js" type="text/javascript"></script>

tambahkan pula function js untuk menyimpan cookies state (supaya ketika di submit posisi yang terbuka tetap pada section yang sama). Serta memakai icon custom

 
<script type="text/javascript">
apex.jQuery(function() {
  apex.jQuery("##REGION_STATIC_ID#").accordion({cookie:{expires:1}});
});
jQuery(function($) {
    var userpanel = $("##REGION_STATIC_ID#");
    var index = $.cookie("accordion");
    var active;
    if (index !== undefined) {
        active = userpanel.find("h3:eq(" + index + ")");
    }
    userpanel.accordion({
        header: "h3",
        event: "hoverintent",autoHeight: true,animated: 'bounceslide',collapsible: true,fillSpace: false, 
        active: active,
        change: function(event, ui) {
            var index = $(this).find("h3").index ( ui.newHeader[0] );
            $.cookie("accordion", index);
        }
    });
});

</script> 

<script>
 $(function() {
  var icons = {
   header: "ui-icon-circle-arrow-e",
   headerSelected: "ui-icon-circle-arrow-s"
  };
  $( "##REGION_STATIC_ID#" ).accordion({
   icons: icons
  });
  $( "#toggle" ).button().toggle(function() {
   $( "##REGION_STATIC_ID#" ).accordion( "option", "icons", false );
  }, function() {
   $( "##REGION_STATIC_ID#" ).accordion( "option", "icons", icons );
  });
 });
 </script>

Pada bagian Sub Region template :

 <h3><a href="#">#SUB_REGION_TITLE#</a></h3>
<div>#SUB_REGION#</div>

catatan region child yang akan memakai parent jQuery accordion sebaiknya memakai no template.
Demo hasil di sini
Eksplorasi lebih lanjut silahkan pelajari di sini

Oke sekarang kita lihat hasilnya

source awal : Thanks Patrick Wolf for sharing on oracle forum

Membuat Tree dengan custom icon

Jika anda telah mengimplementasikan APEX tree, tentu tahu bahwa ada 3 tree template
1. Default : tanpa icon
2. Blue : dengan icon default warna biru
3. Classic : dengan icon folder

Namun untuk digunakan sebagai menu navigator tentu kurang menarik dan tidak merepresentasikan proses atau sekedar folder, nah untuk membuatnya cukup mudah.
Lakukan langkah2 berikut :

Buatlah nested table (table yang mereference ke table itu sendiri). Jangan lupa untuk membuat kolom untuk membedakan tipe node.

CREATE TABLE T_TREE
(
  ID           NUMBER(10)                       NOT NULL,
  SEQ          NUMBER(5),
  DESCRIPTION  VARCHAR2(100 BYTE),
  ALIAS        VARCHAR2(50 BYTE),
  PAGE         NUMBER(10),
  STATUS       VARCHAR2(2 BYTE),
  MENU_ID      NUMBER(10),
  LINK         VARCHAR2(500 BYTE),
  TOOLTIP      VARCHAR2(100 BYTE)
)

Upload data.
Buatlah page dalam apex.
Upload icon yang kan dipakai melalui shared component>images>upload file image
Buatlah region tree dengan query seperti ini.

select case when connect_by_isleaf = 1 then 0
            when level = 1             then 1
            else                           -1
       end as status, 
       level, 
       DESCRIPTION as title, 
       case when "STATUS" = 'X' then '#WORKSPACE_IMAGES#pt_process2.png'
            when "STATUS" = 'M' then '#WORKSPACE_IMAGES#folder.gif'
            when "STATUS" = 'F' then '#WORKSPACE_IMAGES#form.png'
            when "STATUS" = 'R' then '#WORKSPACE_IMAGES#article.gif'
       end         as icon,
       "ID" as value, 
       "TOOLTIP" as tooltip, 
       case when "STATUS" in ('F','R') then
        'f?p=&APP_ID.:'||"PAGE"||':&SESSION.::NO::P1_SELECTED_NODE:'||"ID" 
       else
        'f?p=&APP_ID.:1:&SESSION.::NO::P1_SELECTED_NODE:'||"ID"
       end as link 
from T_TREE
start with "STATUS" = 'X'
connect by prior "ID" = "MENU_ID"
order siblings by "SEQ"

Oke selanjutnya anda akan lihat hasilnya

eng..ing..eng....