Membuat Google Wannabe Paging

Alhamdulillah, aplikasi Tunas Unggul Bangsa sudah live dan bisa diakses lewat internet melalui http://donatur.yayasan-tunas-bangsa.com.

Appfuse menggunakan displaytag untuk menampilkan data2nya per halaman, misalnya 10 record perhalaman, hanya saja displaytag mengambil keseluruhan data meskipun yg ditampilkan hanya 10 record, hal ini dikarenakan displaytag memiliki fasilitas utk sorting per kolom, ataupun download data dalam bentuk excel atau pdf. Hal ini tentu saja tidak hemat resource karena hanya untuk menampilkan 10 record saja, sistim harus query seluruh record.

Oleh karena itu saya menggunakan cara sendiri untuk menampilkan data sesuai kebutuhan, saya hanya melakukan query sebanyak record yang butuh ditampilkan, dan sebagai penanda tampilan record keberapa, diperlukan penanda halaman (paging), misalnya halaman 2 menampilkan record mulai 11 sampai 20, dst. Dalam post ini saya jelaskan bagaimana membuat paging seperti yang ada di google.

Jika Anda googling, akan ada daftar halaman (paging) jika hasil pencariannya banyak, seperti : "Previous 1 2 3 4 5 6 7 8 9 10 Next". Untuk membuatnya sangat mudah dan saya hanya bermain dengan beberapa if-else di jsp dengan beberapa parameter, dan ini bisa diaplikasikan dengan bahasa2 lain.

Aplikasi Tunas Unggul Bangsa menggunakan spring MVC wannabe (karena ternyata tidak benar2 MVC), oleh karena itu bermain dengan banyak controller, dengan kata lain untuk menampilkan suatu halaman maka dubutuhkan controller. Saya butuh tiga parameter untuk controller paging:
1. page, halaman yang direquest user, misalnya 5
2. totalPages, banyak halaman, didapatkan dengan cara query "Select Count" dibagi perPage, dimana perPage adalah total record tiap halaman.
Misalnya total record = 100, perPage = 10 record, maka totalPage = 10.
3. listPages, daftar halaman yang muncul di aplikasi.
Misalnya kita menampilkan 5 halaman, maka yg muncul adalah "3 4 5 6 7"

Sementara itu di jsp-nya algoritmanya sebagai berikut:
1. jika page != 1 maka cetak "Awal", link ke halaman 1
2. cetak semua nilai listPages, jika sama dengan requestedPage maka tidak ada link, selain itu link ke halaman yg sesuai
3. jika totalPages != 0 dan requestedPage != totalPages maka cetak "Akhir", link ke halaman terakhir
Hasil dari contoh kita adalah "Awal 3 4 5 6 7 Akhir"

Tulis semua langkah diatas kedalam file jsp terpisah, misalnya paging.jsp, maka kita hanya tinggal include diatas table record.

Sebagai perbandingan dengan google, google memiliki 20 listPages, jika total halaman yg kita miliki bukan 5 tapi 20, maka kita memiliki listPages yang sama dengan google, dan itu bisa saja diubah karena saya jadikan Constant, hanya saja nantinya malah jelek tampilannya soalnya akan sangat melebar. Perbedaan yg lain adalah google menampilan "Prev" dan "Next", dimana link-nya menuju halaman sebelum atau halaman berikutnya, sedangkan yg kita miliki "Awal" dan "Akhir" menuju halaman awal dan akhir.

Redirect Default Page Bukan ke Login.jsp

Aplikasi Appfuse menggunakan acegi security, setting defaultnya dia akan selalu minta username untuk bisa membuka halaman2 didalam aplikasi, padahal nantinya aplikasi yang saya buat seharusnya bisa dibuka semua orang, tanpa perlu login terlebih dahulu, meskipun ada halaman2 yang harus login dulu untuk bisa mengaksesnya. Dalam benak saya halaman seperti profile yayasan, daftar nama2 donatur, detil masing2 donatur bisa dilihat semua pengunjung web.

Sebetulnya default page appfuse ketika membuka dari address page misalnya http://localhost:8080/tunasbangsa bukan ke login.jsp tapi ke mainMenu.html, tapi karena setting acegi security meminta username maka aplikasi ketika pertama kali dibuka senantiasa masuk ke halaman login terlebih dahulu.

Settingan yang perlu dirubah adalah berikut:
1. security.xml
Di bean=filterInvocationInterceptor, ubah/hapus semua halaman2 yang disetting hanya bisa dibuka untuk role tertentu, misalnya
/users.html*=admin
Di security.xml sudah didaftarkan role2 user pada aplikasi, kebetulan diaplikasi ini ada 2 role, "admin" dan "user", sebelumnya halaman users.html hanya bisa dibuka untuk pengunjung dengan role=admin saja, jadi selain admin maka tidak halaman tersebut bisa dibuka dg error semacam akses denied, maksudnya misalnya ada pengunjung yg sudah login tapi rolenya selain admin dan meminta halaman itu maka dia tidak bisa mengkases, apalagi apabila belum login, maka aplikasi akan redirect ke halaman login.

Di acegi security ada ROLE_ANONYMOUS role yang didefinisikan acegi untuk pengunjung yang tidak login terlebih dahulu, oleh karena itu, kita bisa menghapus line diatas atau mengubah menjadi:
/users.html*=ROLE_ANONYMOUS

di bean=methodSecurityInterceptor yang mendefinisikan method2 yg bisa diakses, modify/hapus pula line berikut:
org.ikaits.service.UserManager.getUsers=admin
Line itu mengharuskan pengunjung bertipe admin untuk bisa mengakses method getUsers, padahal method itu dipanggil ketika aplikasi meload halaman /users.html

2. action-servlet.xml
Di bean adminUrlMapping, pindahkan statement berikut ke bean urlMapping,
<prop key="/users.html">userController</prop>

Jika security.xml itu menyetting buat acegi security-nya maka action-servlet.xml menyetting request halaman2 yg di minta pengunjung, aplikasi ini menggunakan framework SpringMVC, sehingga halaman2 yg akan diminta diatur menggunakan controller, pendaftaran page apa ke controller apa ditaruh di file ini.

bean adminUrlMapping, mendaftarkan url2 yangg bisa diakses oleh admin, sedangkan urlMapping mendaftarkan url2 yang bisa diakses semua pengunjung, oleh karena itu perlu dipindahkan url /users.html tidak hanya untuk pengunjung dengan role admin.

3. menu.jsp
Melist menu2 yang muncul diaplikasi, yang letaknya ada dibawah header, saya hapus menu yang tidak perlu yaitu:
<menu:displayMenu name="FileUpload"/>
Menu ini untuk menampilkan halaman upload file

4. menu-config.xml
Hapus item berikut, item tersebut sebelumnya menjadi sub-menu dari menu "Administrasi", yang mana menu tersebut hanya diperuntukkan bagi role admin, padahal sekarang bisa dibuka untuk semua pengunjung.
<Item name="ViewUsers" title="menu.admin.users" page="/users.html"/>
Tambahkan
<Menu name="ViewUsers" title="menu.admin.users" page="/users.html" />
Sekarang url users.html menjadi menu utama seperti login, home, dsb, bukan menjadi submenu dari menu Administrasi.

Untuk halaman utama (home), saat ini aplikasi hanya menampilkan logo dan cerita singkat profile yayasan, no rekening sementara dan link untuk mendaftarkan diri sebagai donatur, yang mana setelah mendaftar tidak bisa login terlebih dahulu karena menunggu persetujuan dari admin, logo itu juga masih sementara dibuat dari memodifikasi logo yang dirasa mirip dengan tema yayasan, diambil dari john clements, Untuk situs internet yang menggunakan teknologi yang sama (appfuse) yang dibuat kantor saya adalah:
https://ib.bprks.co.id
http://careers.johnclements.com/

Awalnya mock up pertama kali akan dibuat seperti bprks, menggunakan frame, ada header, footer, leftFrame, rightFrame, dan mainFrame, sehingga untuk operasi aplikasi selanjutnya hanya meload mainFrame saja, tanpa perlu meload ulang gambar header dsb, hanya saja screen aplikasi akan terbatas luas layar saja, mainFrame akan seluas kecil karena footer senantiasa berada dibawah layar, scroll akan berada ditengah2 aplikasi, mock up seperti itu lebih cocok untuk aplikasi database yang kompleks saja tanpa terlalu memperhatikan tampilan, sedangkan aplikasi untuk yayasan ini juga berfungsi sebagai official site jadi perlu UI yang lebih bagus.

Continuing Appfuse Application Using Eclipse

We already have the application, it's all inside the folder tunasbangsa, but it's hard if we maintain and updating files scratch, we use eclipse for the IDE, just download eclipse, get the latest version, the Galileo version. after extract in the preferred folder, just run eclipse by double click eclipse.exe.

Adding Project
Add new project -> Java Project -> Create from existing source, point to folder tunasbangsa. At first, we gonna an error sign in our folder in project explorer, something like cannot find ant.jar or junit.jar. To resolve this error. Go to Project -> Properties -> Java Build Path, set the missing jar into the right path, I add New Variable, the button is right of list, I set into my Ant folder "D:/Java/apache-ant-1.7.0", and then I fix the missing jar into "ANT_HOME/lib/ant.jar". There should be no error anymore.


Setting Ant From Eclipse
Window -> Show View -> Ant, and then add buildfiles, point it into tunasbangsa build.xml, collapse the icon and there will be list of command we can call, we need only to double click it, for example for clean or deploy. We call deploy every we made a change into our application.
In appfuse, the default if we deploy, we also drop the database and create new again, so we don't need that again, just comment the value of db-drop and db-load, db-drop is for drop the database, db-load is for loading value from sample-data.xml. Do not comment everything, but comment the value in case of both of that command called by other command.
<target name="db-drop" depends="hibernatedoclet" description="drops database tables">
<!-- <taskdef name="schemaexport", ....

Setting Tomcat From Eclipse
We can debug altough it is a web application by setting tomcat inside eclipse, Window -> Show View -> Servers, add new server -> Tomcat 5.5, set the installation Directory into the appropriate folder, e.x in "C:\apache-tomcat-5.5.28", And then press finish, so in the Server view there will our new tomcat server, double click it. In the server locations, choose "Use Custom Location", if the radio disabled, just create new Tomcat Server, usually it is disabled if we already used the server. And browse Server path into our tomcat folder, and then choose radio Use Tomcat Installation, and save. And also set the Timeouts into 90 seconds, sometimes it needs more than 45 second for starting tomcat via eclipse.

Changing the Template of TunasBangsa
In appfuse we used sitemesh decorator to handle the UI, the styles are in folder "tunasbangsa\web\styles" there are three styles already, the default that we used so far is simplicity, to change the style, modify file web.xml in folder "tunasbangsa\web\WEB-INF\", there are a lot of context parameters, goes to the param-name=csstheme, the value=simplicity, change into "puzzlewithstyle", deploy it, run tomcat, I try to make it simple but not as simple as simplicity.

And also change the name of the application, in the web.xml changse the property of display-name into "Tunas Bangsa" and in the ApplicationResources.properties change "webapp.name=Tunas Bangsa".

I inspired by my campus site, I use the similar header and footer, I save the sites, I modify the header, add "Tunas Bangsa IKA ITS Jakarta Raya" in the right of the header. The template is similar with puzzlewithstyle, there are menu in header, so I copy folder puzzlewithstyle inside folder styles, I name it tunassimple, and inside the folder I paste the new header and footer. I change many things in .css files specially the color of the fonts, I just change and deploy to get my preferred stile. On thing important I met is I shuld add property height inside body, to make an html <table> tag using css.
body {
...
height:100%;
}
and inside header and footer I add property height
div#header {
...
height: 147px;
}
So, it similar with table and tr height, I did not use table because it not recommended nowadays, people recommend using style or css.

For the application's icon, I go to ITS logo site, I copy ITS logo, and modify using photoshop, I'm not using gimp anymore, but the first header of this application I use gimp on my laptop. I only take the ITS name because I only need to show small icon that shows in the tab of my application. Deploy again and run tomcat, the result shows in the capture above.

Creating Simple Java Web Application

I join milist of alumny of my bachelor, the newest event is we gonna have scholarship for students and high school teacher, I want make a java sites for it, so I build the simple one, I create this document as if as you also want to create a simple java web application.

First I build in Ubuntu on my laptop, but I need internet for browsing, so I use on my office computer which is using Windows nowadays, infact last few months some pcs in my office re-using XP rather Ubuntu. So Im documenting my work on Windows and trying to write it as easier as I can. Contrary actually I prefer working on Ubuntu because of terminal and repository for downloading everything needed.

I use Appfuse 1.9.4 as wizard for creating java web application, I actually already made a start using Appfuse 2.0 with Maven rather Ant but it will need time for me for learning, so I decide it to use the older version, I already use this version on my previous project, so I will get the faster result, and it is much easier.

Here the list of needed things before working on this application:
1. java 1.6
2. mySql 5.1
3. appfuse 1.9.4
4. ant 1.7
5. tomcat 5.5

Here the steps:
1. Download them and install java and mysql, and extract for others in the prefer place.
2. When installing MySql server you gonna asked for root password, just type it as necessary, e.x: username=root, password=root
3. Open command prompt, write "java -version" and "ant -version", if the result is "is not recognized as an internal or external command," then we need do this things:
- open explorer, point to My Computer
- right click, Properties
- choose Advanced tab
- click Environment Variables
- in the System Variables box, the below one, click New
- Write Variable Name = ANT_HOME, Variable Value = D:\Java\apache-ant-1.7.0 (Or the prefered extracted path)
- Edit variable Path, copy the value into notepad, so we gonna have some line like this: C:\Program Files\.... it mention shortcut for the commands that our computer have, and then add this line : ";%ANT_HOME%\bin" for adding ANT_HOME
- restart computer
- for checking if we already have ant command in our computer type: "ant -version", and it should return some like this: "Apache Ant version 1.7.0 compiled on December 13 2006"
above steps set ANT_HOME and add "ant command" so we can call it from any place via command prompt.

4. Using command prompt, enter the extracted appfuse folder, for example on D:\Java\appfuse, and then type "ant new"
5. We gonna asked some questions:
[input] What would you like to name your application [myapp]? [myapp]
tunasbangsa
[input] What would you like to name your database [mydb]? [mydb]
tunasbangsa
[input] What package name would you like to use [org.appfuse]? [org.appfuse]
org.alits
It means I create new application named tunasbangsa, with database named tunasbangsa, and package named org.alits

6. System will do some operations, it needs some seconds, and if everything is correct, there will be a BUILD SUCCESFULL messages
7. Now you should be able to cd to your application and run: "ant setup test-all"
8. cd into the new application folder, type "cd ../tunasbangsa"
9. we already inside our application just type: "ant setup test-all", and it should be BUILD SUCCESFULL messages, if we got error something like username and password into mySql, change the password in properties.xml, by default the password is empty, we need to change same with our password, it's on line 53,
<property name="database.admin.password" value=""/>, set the password value = "root"

10. For viewing the result, run tomcat, enter into our extracted tomcat, for example in "C:\apache-tomcat-5.5.28", enter the bin folder, and run or double click startup.bat.
11. Goes to explorer, ie or firefox, type http://localhost:8080/tunasbangsa, it should shows the result same as in the capture above.