For user, UI mod. is very anticipated. But for maker, it’s different

Dari sisi user, tentu user sangat senang. Apalagi pada kaum muda yang cukup “senang-ngoprek”, tetapi dari sisi developer, mereka menyebutnya ini adalah bencana. Why? Karena dengan mudahnya mengubah UI, sehingga sebuah produk tidak memiliki ciri unik(yang selalu ada di produk tersebut) untuk membedakan dengan yang lain. For example, Windows(PC)ciri khususnya adalah taskbar & start menu, kemudian semenjak versi Windows Vista terdapat tampilan aero. Atau MacOSX yang selelu bertampilan minimalis dengan warna dominan putih-abu-abu(ga cuman OSX tapi sampai iOS juga ber cirikas sama). Untuk user mungkin hal ini sangat membosankan karena user ingin tampil berbeda satu denan yang lainnya, tetapi untuk produsen pembuat brand-nya merasa itu bukan hal yang menyenangkan karena band ciri khas dari si produsen tidak bisa muncul karena ditutupi oleh modifikasi UI dari sisi user.

OK whatever with that, since I’m user not the maker of Android . Hasil belajar otodidak hal pertama yang harus dimiliki untuk memodifikasi UI dari Android adalah Launcher. FYI I’m using SonyEricson Xperia Arc. It’s very slow one for the hi-end smart phone for now. Intinya setelah berkutat seharian, dan mencoba menggunakan

My Xperia Arc Lock-screen and home screen (All image get from DeviantART me Just using it for personal use)

Ok, Launcher yang pertama kali saya pakai(dan sampai sekarang saya gunakan) adalah GOLauncher EX. Dari situ lock screen yang saya gunakan juga dari ‘GOLocker’ dengan theme “Metro UI”(paling kiri).

My Minimalist Screen

Untuk layar pertama untuk jam, saya ingin tampil seminimalis mungkin . Untuk itu, saya menggunakan “LED Clock” dan battery indicator menggunakan “BattStat“.  Untuk menu/dock background saya menggunakan image yang saya buat sendiri di Adobe Potoshop(simplenya hanya background transparant berwarna hitam), untuk icon-icon pada dock saya juga membuat icon sendiri dengan bantuan Photoshop.

So full with Tile thumbnail, the idea taken from Windows Phone 7 Retro

Last screen for calendar

Layar berikutnya penuh dengan Tile Icon, ide ini diambil dari Windows Phone 7.5 Mango(kemarin sempet megang-megang dan coba-coba Nokia Lumia 800). Icon-iconnya saya membuatnya dengan Photoshop, dan untuk memasang ukuran custom di home-screen menggunakan apps. Desktop Visualizer. And last one the same concept at last for half screen , bwahnya saya butuh melihat kalender dari “GO Widget” dengan theme “Transparency“.

Simplenya sama seperti di Linux, icon terbuat dari file png atau jpg. mendukung opacity juga terus terang dengan demikian jauh mempermudah pembuatan icon custom-nya

Akhirnya that’s how I make my first themes…

Credits:

Image used on this theme are taken from one or two DeviantArt gallery:

• http://kurodot.deviantart.com
• http://vivi-s.deviantart.com
• http://nutcase23.deviantart.com

My very first Nendoroid

Sudah lama saya tidak bermain hardware PC, mugnkin bosan, mungkin sudah eneg dan mungkin tak ada waktu. Saya pikir itu adalah hal yang sangat baik mengingat akhirnya saya bisa terlepas dari ketergantungan ( ) yang sangat menguras uang. Tetapi sepertinya tidak

Semenjak dulu rasanya saya ingin memiliki action figure, tetapi saat itu keadaan ekonomi masih tidak mungkin (Karena masih bergantung sama ortu ). Bukan hal lain karena harga Action figure seperti ini jauh lebih mahal dari seri Hi-grade atau bahkan Master grade Gundam Kit Bandai . Tetapi dengan kondisi sekarang, saya mulai bisa membelinya semenjak sudah bisa cari duit sendiri ( ).

Salah satu action figure yang ingin saya miliki adalah Nendoroid. Nendoroid adalah salah satu jenis action figure yang dibuat “chibi” atau di-bonsai . Kenapa saya tertarik dengan nendoroid? Simplenya aja, most of them cuter than the figure yang dalam ukuran skala aslinya berikutnya adalah, kebanyakan seperti biasa limited edition. BIasa hanya diproduksi 1000-2000 pcs saja.

Kemarin, kebetulan saya membeli sebuah nendoroid(yang ga sengaja, niatnya cuman mau lihat-lihat saja) yaitu seri Mikkumiku Kagami(versi Cosplay Kagami dalam Lucky Star OVA) yang dibuat oleh Good Smile Company(perusahaan kawakan yang membuat nendoroid, dan figure-figure berkualitas) seharga sekitar Rp 700.000,- . Mahal? Maybe

Mikkumiku Kagami nendoroid

Mikkumiku Kagami Nendoroid

Nendoroid ini memiliki 3 face yang bsia diganti dan beberapa aksesoris… dan akhirnya, nendoroid ini saya hadiahkan kepada adik saya kemarin untuk hadiah ulang tahun kebetulan dia suka Hatsune miku & tahu Lucky Star .

kepergian Nendoroid ini tidak berhenti, kemarin saya akhrinya memutuskan membeli Nendoroid lain yang memang sudah saya inginkan dari dulu(semenjak animenya tayang), Kosaka Kirino.

Nendoroid Kosaka Kirino re-run in order...

And what I waiting for next is this one :

Nendoroid Snow Miku : Fluffy Coat Ver.

release date 02-12 on WOnfest 2012

Semenjak melihat demo tersebut, saya punya keinginan membuat UI yang sama seperti itu yang bisa digunakan dalam sebuah web-application. Dengan type seperti ini, User tidak perlu bolak-balik ke beberapa page karena 1 halaman hanya dapat mengakomodir 1 proses. Dengan demikian produktifitas user dapat meningkat. Plus saya tidak usah membuat form-form khusus di setiap page-page tertentu.

Tutorial result

Well untuk pemulaan, kita harus membuat desain windownya terlebih dahulu, untuk itu dalam tutorial kali ini saya akan membuat sebuah box window mirip dengan Windows 7 (walau tak sama 100% ). Ini akan menjadi dasar User interface yang saya ceritakan di atas sekaligus mendemokan artikel tentang CSS3 yang saya tulis sebelumnya (3 My Favorite CSS3).

Untuk permulaan buatlah sebuah folder untuk menampung file pekerjaan Anda. Saya menggunakan nama “design”, dan di dalamnya buatlah 2 buah folder yitu:

• images
• css

Sebelum memulai pekerjaan kita, download-lah file-file images yang dibutuhkan.

The background taken from theme pack waterfall in Windows theme

Extract semua file di dalam file zip ke folder ‘images’. Setelah itu buatlah sebuah file css di dalam folder “css” dengan nama “main.css“, dan sebuah file html di folder utama bernama “index.html”.

Buka file “index.html” dan mulailah menulis tag-tag HTML sbb:

[html]

[/html]

Lalu bukalah “main.css” dan tulislah copy-lah beberapa code untuk CSS-nya sbb:
[css]
body {
/* make little floaty from the top */
margin-top: 100px;
/* set your desktop background */
background-image: url(../images/the_bg.jpg);
/* windows 7 using Segoe UI font but it’s not
* very common on other OS, we will using Verdana instead
*/
font-family: Verdana,Helvetica,sans-serif;
/* set font size… well it’s up to you */
font-size: 0.8em;
}

/* some oldies browser make blue border in image link
* this one will remove all blue border
*/
a img{ border: none; }

/* hyperlink global rule */
a:link, a:visited {
color: #0066CC;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

.clear{
clear: both;
}
[/css]

Cobalah buka file HTML tersebut di browser, Tampilan akan kurang lebih seperti gambar berikut ini:

Anda melihat sebuah div:
[html]

[/html]
Dimana semua isi dari window akan ada disana, maka tambahkan CSS class dengan nama ‘main_container’, lalu isi dengan CSS script sbb:
[css]
/* Main container is the main DIV contained the Window frame */
.main_container {
/* Magin left-right set auto to make it in center */
margin-left: auto;
margin-right: auto;

/* width of windo we set to 70% */
width: 70%;
min-width: 800px;

/* set background image */
background-image: url(../images/window_bg.png);

/* set the border color */
border: 1px solid #666666;
/* CSS3 droping shadow for window */
-moz-box-shadow : 5px 5px 15px #000000; /* mozilla prefix */
-webkit-box-shadow : 5px 5px 15px #000000; /* webkit prefix (chrome/safari) */
box-shadow : 5px 5px 15px #000000; /* legal css 3 only */

/* CSS3 makes rounded box */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;

/* make padding to make the border feel real */
padding: 0px 5px 5px 5px;

}
[/css]

Coba refresh HTML, maka akan mendapati sebuah box di tengah layar seperti berikut:

Dalam pembuatan container ini saya menggunakan 2 efek dari CSS3 yaitu border radius dan juga box-shadow untuk membuat efek round corner dan juga sedikit kosmetik untuk shadow.

Kita lanjut ke langkah selanjutnya. kita akan membuat navigasi dan juga title dari sebuah window. Hasilnya akn seperti di bawah ini.

Untuk menghasilkan hasil seperti di atas, kita tambahkan HTML script berikut ini di dalam div ber-class ‘main_container‘
[html]

Window name goes here

[/html]

Bagian Header di bungus dalam class ‘window_header‘ dimana ditempati oleh box untuk title dan juga 3 tombol navigasi(minimize, Maximize, dan Close button). Dan kemudian tambahkan beberapa line CSS berikut ini ke dalam file CSS Anda:

[css]
/* ============= CSS for header area ============== */

/* Window title area, title in upper left */
.window_title{
font-size: 0.9em;
padding: 2px;
color: #fff;
text-align: center;
background-image: url(“../images/darken_bg.png”);
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-weight: bolder;
width: 200px;
float: left;
/* bottom border make round */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* add little shadow */
box-shadow: 1px 1px 1px #000000;
}

/* Button List area, like Minimize, max, close button */
.btn_list{
float: right;
padding: 0px;
}

/* make the easy effect, just fade it with CSS3 */
.btn_list a:link,.btn_list a:visited{
opacity : 0.6;
}

/* make the button fully shown */
.btn_list a:hover{
opacity : 1;
}

.btn_list div{
float: left;
}
/* ============= CSS for header area END ============== */
[/css]

Saya coba terangkan sedikit CSS-nya:

Line 9 Saya memberikan sebuah background hitam transparant karena pada line 7 saya set warna tulisan menjadi putih(#fff).
Line 10-12 Bagian title area kita beri border kiri, bwah, dan bagian kanan saja.
Line 14 Panjang 200px, sesuaikan dengan panjang title Anda.
Line 15 kita set box agar berada di sebelah kiri(float: left).
Line 17-18 Kita terapkan CSS 3, disini saya memberi efek round-corner di bagian bawah box.
Line 20 Terakhir, another CSS3, kita beri bayangan tipis di bagian bawah box.

Ok, apabila Anda me-refresh browser, Anda mendapati bahwa box bagian title window sudah terbentuk di sebelah kiri, sedangkan untuk bagian kanan belum terbentuk

Untuk Class “btn_list” kita set agar berada di kanan(float:right), sisanya beberapa class CSS untuk button(dimana saya memilih menggunakan float agar terlihat menempel satu sama lain). Serta efek “opacity”(dari CSS3) untuk keadaan normal sehingga terlihat lebih transparant. Dan pada saat hiver, kita set opacity kembali ke nilai 1(dimana nilai opacity 0 berarti akan menghilang sama sekali dan 1 akan menampilkan element seperti pada keadaan normal/no-opacity).

Ok… next kita akan buat sebuah box untuk navigasi history atau yang dikenal sebagai breadcrumb. Hasilnya kurang lebih nantinya akan seperti berikut ini:

Untuk membuat tampilan breadcrumb dan juga search box, tambahkan script HTML berikut ini di bawah bagian header:

[html]

• Root node
• Node one
• Node two
• Node two
• Node two
• Node two

[/html]

Before you go on….

Sampai sejauh ini, HTML kita akan seperti ini:
Show ▼

[html]

Window name goes here

• Root node
• Node one
• Node two
• Node two
• Node two
• Node two

[/html]

Ok, next the CSS...
[css]
/* ============= CSS for header NAV. area START ============== */
.upper_navigation{
margin-top: 7px;
margin-bottom:8px;
}

.breadcrumb_container{
/* Breadcrumb navi is in the left side so make it float in the left */
float: left;
/* 75:25% => 75=> breadcrumb, 25 Search box */
width: 75%;
/* the color is white */
background: #fff;

padding: 3px;

border: solid 1px #666666;

/* little rounded */
-moz-border-radius : 3px;
-webkit-border-radius : 3px;
border-radius : 3px;

/* thin shadow */
-moz-box-shadow : 1px 1px 3px #666;
-webkit-box-shadow : 1px 1px 3px #666;
box-shadow : 1px 1px 3px #666;
}

/* breadcrumb root have "folder" image */
.breadcrumb_root{
float: left;
background-image: url(../images/gtk-open_20.png);
background-repeat: no-repeat;
width: 20px;
height: 18px;
}

/* breadcrumb listing, becarefull with content width */
.breadcrumb_item{
float: left;
}

.breadcrumb_item ul{
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
}

.breadcrumb_item ul li{
display: inline;
background: url(../images/node.png);
background-repeat: no-repeat;
padding-left: 10px;
width: 100px;
}

.breadcrumb_item a:link,.breadcrumb_item a:visited{
text-decoration: none;
color: #000;
padding: 5px;
}
.breadcrumb_item a:hover{
background-image: url(../images/breadcrumb_hover.png);
background-repeat: repeat-x;
border: solid 1px #999999;
padding: 4px;
}

/* Search Box CSS Classes */
.search_box{
/* make height equals the breadcrumb height around 24px */
height: 24px;
/*
set magin from the left around 77% (remmeber the breadcrumb section is 75 in width)
at last give space 2% from breadcrumb box
*/
margin-left: 77%;
/* also set the bg */
background: #fff;

/* the rest is same with breadcrumb box */
border: solid 1px #666666;
-moz-border-radius : 3px;
-webkit-border-radius : 3px;

border-radius : 3px;
-moz-box-shadow : 1px 1px 3px #666;
-webkit-box-shadow : 1px 1px 3px #666;
box-shadow : 1px 1px 3px #666;
}

/*
search box styling,the width set to 80% if greater than 80% will throw
the submit button bellow the textbox in Opera(only)
*/
.search_box input[type=text]{
border: none;
padding: 0px 0px 0px 5px;
height: 23px;
float: left;
width: 80%;
}
/* Button with background image set it in the right of the box */
.search_box input[type=submit]{
border: none;
background-color: transparent;
background-image: url(../images/search_btn.png);
background-repeat: no-repeat;
background-position: center center;
height: 23px;
float: right;
}
/* ============= CSS for header NAV. area END ============== */
[/css]

Untuk penjelasannya, kurang lebih seperti yang tertulis diatas

Next bagian utama. Bagian utama dibagi 4 bagian. Bagian atas(toolbar, bisa Anda isi dengan link, pada div ber-class "content_toolbar"), bagian sidebar(div ber-class "window_side_bar"), bagian content(Div ber-class "window_content"), dan footer(div ber-class "window_footer").
[html]

add special toolbar/link here

• Main Menu item
• This is Root menu 1
  • Menu item
  • Menu item
    • sub of Menu item
  • Menu item
• This is Root menu 2
  • Menu item
  • Menu item
  • Menu item

Lorem ipsum dolor sit ame

Page description in here, you can
describe your page content to your user what is this page for.

Field set title

Field set content

2 3 4

This is text area

Some hyperlink

[/html]

don't forget... the CSS
[css]
/* ======= CSS for main content area(content&sidebar) START ======= */
.window_main_container{
/* Set background to white */
background-color: #fff;
/* set space between title area to content box */
margin-top: 5px;

/* set some border */
border-left: 1px solid #585151;
border-right: 1px solid #585151;
border-top: 1px solid #585151;
/* Bottom border is blue */
border-bottom: 1px solid #CCD9EA;
}

/* ontent upper toolbar */
.content_toolbar{
height: 16px;
background-image: url("../images/bg_toolbar.png");
background-repeat: repeat-x;
padding: 8px 5px 5px 5px;
font-size: 11px;
border-bottom: solid 1px #CCD9EA;
}

/* sidebar classes */
.window_side_bar{
float: left;
width: 200px;
padding: 5px;
font-size: 0.9em;
}

.window_side_bar a:link, .window_side_bar a:visited{
color: #151C55;
text-decoration: none;
}

.window_side_bar a:hover{
text-decoration: underline;
color: #0066CC;
}

.window_side_bar ul{
list-style: none;
color: #151C55;
font-weight: bolder;
padding-left: 10px;
padding-bottom: 10px;
}

.window_side_bar ul li{
padding-bottom: 5px;
}

.window_side_bar ul li ul{
list-style: none;
color: #151C55;
padding-left: 10px;
padding-top: 3px;
}

.window_side_bar ul li ul li{
padding-left: 10px;
font-weight: normal;
font-size: 11px;
padding-bottom: 0px;
}

/* This is class for main content window, all content will go here */
.window_content{
background-image: url("../images/bg_sidebar.jpg");
background-repeat: repeat-y;
/* set min height for main container : D */
min-height: 400px;
padding: 0px 0px 0px 210px;
top: 0px;
left: 0px;
}

.content_wrapper{
padding: 2px 10px 5px 10px;
}

/* ======= CSS for main content area(content&sidebar) END ======= */

.window_footer{

/* Footer window background color */
background-color: #F1F5FB;
/* set height window footer */
height: 65px;
/* footer upper border */

border-left: 1px solid #585151;
border-right: 1px solid #585151;
}

/* content styling */
h2 {
color: #4776BD;
font-weight: normal;
font-size: medium;
}
.content_desc{
padding-bottom: 20px;
font-style: italic;
}
.window_content{
font-size: 11px;
}

fieldset{
border: 1px solid #CCCCCC;
}

legend{
color: #003399;
font-size: 1.1em;
}

/* input object classes */
.window_content input[type=text],
.window_content input[type=password],
.window_content input[type=date],
.window_content input[type=file],
.window_content select{
font-size: small;
width: 250px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #7DA2CE;
padding: 3px;
}

textarea{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
width: 250px;
height: 60px;
resize: true;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #7DA2CE;
padding: 3px;
}
[/css]

Ok, kurang lebih sekarang file HTML & CSS keseluruhan akan seperti berikut:

HTML file
Show ▼

[html]

Window name goes here

• Root node
• Node one
• Node two
• Node two
• Node two
• Node two

add special toolbar/link here

• Main Menu item
• This is Root menu 1
  • Menu item
  • Menu item
    • sub of Menu item
  • Menu item
• This is Root menu 2
  • Menu item
  • Menu item
  • Menu item

Lorem ipsum dolor sit ame

Page description in here, you can
describe your page content to your user what is this page for.

Field set title

Field set content

2 3 4

This is text area

Some hyperlink

[/html]

CSS:
Show ▼

[css]
body {
/* make little floaty from the top : D */
margin-top: 100px;
/* set your desktop background : D */
background-image: url(../images/the_bg.jpg);
/* windows 7 using Segoe UI font but it's not
* very common on other OS, we will using Verdana instead
*/
font-family: Verdana,Helvetica,sans-serif;
/* set font size... well it's up to you */
font-size: 0.8em;
}

/* some oldies browser make blue border in image link
* this one will remove all blue border
*/
a img{ border: none; }

/* hyperlink global rule */
a:link, a:visited {
color: #0066CC;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

.clear{
clear: both;
}

/* Main container is the main DIV contained the Window frame */
.main_container {
/* Magin left-right set auto to make it in center */
margin-left: auto;
margin-right: auto;

/* width of windo we set to 70% */
width: 70%;
min-width: 800px;

/* set background image */
background-image: url(../images/window_bg.png);

/* set the border color */
border: 1px solid #666666;
/* CSS3 droping shadow for window */
-moz-box-shadow : 5px 5px 15px #000000; /* mozilla prefix */
-webkit-box-shadow : 5px 5px 15px #000000; /* webkit prefix (chrome/safari) */
box-shadow : 5px 5px 15px #000000; /* legal css 3 only */

/* CSS3 makes rounded box */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;

/* make padding to make the border feel real : D */
padding: 0px 5px 5px 5px;

}

/* ============= CSS for header area ============== */

/* Window title area, title in upper left */
.window_title{
font-size: 0.9em;
padding: 2px;
color: #fff;
text-align: center;
background-image: url("../images/darken_bg.png");
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-weight: bolder;
width: 200px;
float: left;
/* bottom border make round */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* add little shadow */
box-shadow: 1px 1px 1px #000000;
}

/* Button List area, like Minimize, max, close button */
.btn_list{
float: right;
padding: 0px;
}

/* make the easy effect, just fade it with CSS3 */
.btn_list a:link,.btn_list a:visited{
opacity : 0.6;
}

/* make the button fully shown */
.btn_list a:hover{
opacity : 1;
}

.btn_list div{
float: left;
}
/* ============= CSS for header area END ============== */

/* ============= CSS for header NAV. area START ============== */
.upper_navigation{
margin-top: 7px;
margin-bottom:8px;
}

.breadcrumb_container{
/* Breadcrumb navi is in the left side so make it float in the left */
float: left;
/* 75:25% => 75=> breadcrumb, 25 Search box */
width: 75%;
/* the color is white */
background: #fff;

padding: 3px;

border: solid 1px #666666;

/* little rounded */
-moz-border-radius : 3px;
-webkit-border-radius : 3px;
border-radius : 3px;

/* thin shadow */
-moz-box-shadow : 1px 1px 3px #666;
-webkit-box-shadow : 1px 1px 3px #666;
box-shadow : 1px 1px 3px #666;
}

/* breadcrumb root have "folder" image */
.breadcrumb_root{
float: left;
background-image: url(../images/gtk-open_20.png);
background-repeat: no-repeat;
width: 20px;
height: 18px;
}

/* breadcrumb listing, becarefull with content width */
.breadcrumb_item{
float: left;
}

.breadcrumb_item ul{
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
}

.breadcrumb_item ul li{
display: inline;
background: url(../images/node.png);
background-repeat: no-repeat;
padding-left: 10px;
width: 100px;
}

.breadcrumb_item a:link,.breadcrumb_item a:visited{
text-decoration: none;
color: #000;
padding: 5px;
}
.breadcrumb_item a:hover{
background-image: url(../images/breadcrumb_hover.png);
background-repeat: repeat-x;
border: solid 1px #999999;
padding: 4px;
}

/* Search Box CSS Classes */
.search_box{
/* make height equals the breadcrumb height around 24px */
height: 24px;
/*
set magin from the left around 77% (remmeber the breadcrumb section is 75 in width)
at last give space 2% from breadcrumb box
*/
margin-left: 77%;
/* also set the bg */
background: #fff;

/* the rest is same with breadcrumb box */
border: solid 1px #666666;
-moz-border-radius : 3px;
-webkit-border-radius : 3px;

border-radius : 3px;
-moz-box-shadow : 1px 1px 3px #666;
-webkit-box-shadow : 1px 1px 3px #666;
box-shadow : 1px 1px 3px #666;
}

/*
search box styling,the width set to 80% if greater than 80% will throw
the submit button bellow the textbox in Opera(only)
*/
.search_box input[type=text]{
border: none;
padding: 0px 0px 0px 5px;
height: 23px;
float: left;
width: 80%;
}
/* Button with background image set it in the right of the box */
.search_box input[type=submit]{
border: none;
background-color: transparent;
background-image: url(../images/search_btn.png);
background-repeat: no-repeat;
background-position: center center;
height: 23px;
float: right;
}
/* ============= CSS for header NAV. area END ============== */

/* ======= CSS for main content area(content&sidebar) START ======= */
.window_main_container{
/* Set background to white */
background-color: #fff;
/* set space between title area to content box */
margin-top: 5px;

/* set some border */
border-left: 1px solid #585151;
border-right: 1px solid #585151;
border-top: 1px solid #585151;
/* Bottom border is blue */
border-bottom: 1px solid #CCD9EA;
}

/* ontent upper toolbar */
.content_toolbar{
height: 16px;
background-image: url("../images/bg_toolbar.png");
background-repeat: repeat-x;
padding: 8px 5px 5px 5px;
font-size: 11px;
border-bottom: solid 1px #CCD9EA;
}

/* sidebar classes */
.window_side_bar{
float: left;
width: 200px;
padding: 5px;
font-size: 0.9em;
}

.window_side_bar a:link, .window_side_bar a:visited{
color: #151C55;
text-decoration: none;
}

.window_side_bar a:hover{
text-decoration: underline;
color: #0066CC;
}

.window_side_bar ul{
list-style: none;
color: #151C55;
font-weight: bolder;
padding-left: 10px;
padding-bottom: 10px;
}

.window_side_bar ul li{
padding-bottom: 5px;
}

.window_side_bar ul li ul{
list-style: none;
color: #151C55;
padding-left: 10px;
padding-top: 3px;
}

.window_side_bar ul li ul li{
padding-left: 10px;
font-weight: normal;
font-size: 11px;
padding-bottom: 0px;
}

/* This is class for main content window, all content will go here */
.window_content{
background-image: url("../images/bg_sidebar.jpg");
background-repeat: repeat-y;
/* set min height for main container : D */
min-height: 400px;
padding: 0px 0px 0px 210px;
top: 0px;
left: 0px;
}

.content_wrapper{
padding: 2px 10px 5px 10px;
}

/* ======= CSS for main content area(content&sidebar) END ======= */

.window_footer{

/* Footer window background color */
background-color: #F1F5FB;
/* set height window footer */
height: 65px;
/* footer upper border */

border-left: 1px solid #585151;
border-right: 1px solid #585151;
}

/* content styling */
h2 {
color: #4776BD;
font-weight: normal;
font-size: medium;
}
.content_desc{
padding-bottom: 20px;
font-style: italic;
}
.window_content{
font-size: 11px;
}

fieldset{
border: 1px solid #CCCCCC;
}

legend{
color: #003399;
font-size: 1.1em;
}

/* input object classes */
.window_content input[type=text],
.window_content input[type=password],
.window_content input[type=date],
.window_content input[type=file],
.window_content select{
font-size: small;
width: 250px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #7DA2CE;
padding: 3px;
}

textarea{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
width: 250px;
height: 60px;
resize: true;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #7DA2CE;
padding: 3px;
}
[/css]

Okey... now refresh your browser... and the final result will be like this image:

Tutorial result

Known Issue...

As you know ... it's alll about Internet Explorer. IE 8 will be okay although there is no round corner, but not IE 7 and older IE, it'll mess the design.

Sekian tutorial kali ini, Thank you

Download Source Code

]]> http://neo.rizkhey.net/2012/01/4243-clone-windows-7-window-box-with-html-css3/feed 0 http://neo.rizkhey.net/2012/01/4264-chrome-feat-hatsunemiku-tell-your-world http://neo.rizkhey.net/2012/01/4264-chrome-feat-hatsunemiku-tell-your-world#comments Mon, 23 Jan 2012 03:53:12 +0000 リズキ http://neo.rizkhey.net/?p=4264

Beberapa waktu lalu saya mendapatkan sebuah video link di sebuah website luar sana yang berisi musik dari Vocaloid, Hatsune Miku. Bagusnya musik ini menjadi background promosional Google Chrome.

Judul Musik-nya sendiri adalah “Tell your World”, ga beberapa lama dari situs tersebut juga mengatakan bahwa Lagu ini sempat menduduki peringkat 1 iTunes Japan.

Hatsune miku sendiri adalah sebuah program dari beberapa saudara Vocaloidnya yang digunakan untuk membuat vocal sebuah lagu. Awalnya sekitar beberapa tahun lalu, saya tidak begitu suka dengan Vocaloid, tetapi setelah diberi Video Thanks giving 39 sekitar setahun yang lalu, saya menjadi fans-nya.

Kalau diumpamakan dunia software mungkin Vocaloid adalah bahasa pemprograman bebas/opensource tak terikan lisensi/biaya, Anda cukup mempelajari bagaimana menggunakan softwarenya, dan Anda bisa menciptakan Lagu, dan Viola… jadilah Musik ciptaan Anda sendiri tinggal Anda publish ke public-public services Seperti Youtube atau nico-nico douga. If You’re lucky enough, Your songs maybe will be used on Hatsune Miku next Live concert

Well can’t be helped… this songs is superb after all

It’s not as easy as writing 1 line of CSS, but now we can

Banyak yang sering terbatas dengan ukuran(width) yang terbatas karena image-nya statis, Untungnya para perancang standart di luar sana mengerti kebutuhan ini untuk kebutuhan desain yang lebih menarik dan juga lebih mudah. Sekarang kita dengan mudah menuliskan 1 line CSS seperti halnya mendefinisikan border sebuah elemen.

Internet explorer? ah you know who the villain isn’t

Bagaimana dengan Browser compatibility? Seperti biasa Internet Explorer selalu tertinggal. Tidak usah menyebutkan Internet Explorer6, bahkan 8 pun belum mensupport CSS3 ini, baru Internet Explorer mensupport CSS3. Sangat disayangkan semenjak Browser mobile seperti Dolphin(Android) dapat mensupportnya dengan baik. Sementara Mozilla Firefox, Webkit browser(Safari & Chrome), dan Opera sudah dapat menjalakan fasilitas ini dengan baik.

Mozilla firefox (untuk yang mempunyai versi < 4), didepan line CSS ditambahkan prefix “-moz-“, sementara untuk Chrome dan Safari untuk menanggulangi versi tua, dapat menggunakan prefix “-webkit-“.

Oke cukup penjelasannya, saya akan coba bahas beberapa modul CSS3 yang saya sukai untuk project keseharian saya:

1. border-radius

Border radius adalah yang saya bahas di atas, berfungsi untuk membuat rounded-corner. Syntaxnya sangat sederhana

[css]
/* for Mozila */
-moz-border-radius: [num]px;
/* for Webkit */
-webkit-border-radius: [num]px;

border-radius: [num]px;
[/css]

Bagaimana apabila yang diinginkan sudut tertentu saja? There is another way

[css]
/* bottom-left radius */
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
/* bottom-right radius */
-moz-border-radius-bottomright : 5px;
border-bottom-right-radius: 5px;
/* top-left radius */
-moz-border-radius-topleft : 5px;
border-top-left-radius: 5px;

/* top-right radius */
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
[/css]

2. box-shadow

Sama dengan rounded border, syntax CSS3 ini akan membuat shadow disekeliling box

[css]
/* for mozilla */
-moz-box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]
/* for webkit */
-webkit-box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]

box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]
[/css]

Example

3. Opacity

Agak jarang dipake tapi lumayan berguna dan mempermudah pekerjaan, berfungsi mengatur opacity sebuah element.
[css]opacity:[0-1];[/css]
Derajat opacity antara 0 dan 1. Contoh:

[html highlight_lines="8"]

[/html]

Itulah 3 dari banyak CSS3 yang paling sering saya gunakan. Karena secara user yang menggunakan IE masih agak troublesome, tentinysa saya tidak menggunakan untuk bagian -bagian kritis, dan hanya sebagai kosmetik bukan seperti jaman CSS1 ke CSS2 yang ada sampai tata letak(Overflow, top, left, etc) yang membuat cukup kacaw layout apabila browser tidak mendukung seperti jaman sekitar 2006-an saat IE6 masih sebagian besar browser

Untuk mempelajari lebih jauh CSS3, Anda dapat belajar di CSS3.info, saya juga belajar dari web tersebut .

SOPA/PIPA ini awalnya memang bertujuan baik yaitu untuk membatasi nilai pembajakan yang tinggi terutama film-film hollywood, tetapi ternyata tidak hanya sampai disitu saja.

Untuk lebih jelasnya apa itu SOPA/PIPA bisa disaksikan di tautan video berikut ini:

PROTECT IP / SOPA Breaks The Internet from Fight for the Future on Vimeo.

Dalam video diatas dijelaskan bahwa Pemerintah Amerika berhak menutup situs apabila memiliki tautan/link/content yang melanggar copyright. Sebagai contoh seorang user facebook, menaruh video klip musik yang diupload orang lain di Youtube dan yang mengupload bukan oleh sipemilik video(mungkin studio produksinya), maka Facebook harus menghapus tautan tersebut dan Youtube harus mensensor/menghapus video tersebut. Apabila tidak dilakukan maka Facebook atau Youtube bisa saja ditutup oleh pemerintah. Karena dalam peraturan ini dianggap bahwa penyedia service bertanggung jawab penuh atas content dari situsnya.

Hari ini Wikipedia menutup layanan ensiklopedi-nya yang berbahasa Inggris sebagai rasa protes terhadap Rancangan Undang-undang ini. Selain itu, WordPress, dan juga sampai php.net juga mengikuti aksi ini.

Halaman Black out WIkipedia berbahasa Inggriss

Blackout page WordPress.org, WordPress menyediakan plugin Blackout khusus untuk aksi ini bagi pemngguna WordPress

PHP.net ikut andil dalam aksi ini

Selain pihak-pihak di atas pihak seperti Google juga melakukan protes dengan menutupi logo Google di search enginenya.

Berikut potongan saat CPU usage naik.

What’s wrong? Even 1080p H264 without Hardware decoding is very piece of cake for Intel Core i5 even in mobile version…

Anehnya peristiwa ini terjadi hanya saat subtitle muncul saja, dan CPU usage normal kembali saat subtitle hilang. Paling parah saat subtitle sering berubah apalagi pada line-line yang berlirik cepat.

Pertama-tama saya coba menginstall ulang codec-nya. Tetapi nihil tidak ada hasil, CPU usage terus di tinggi. Berikutnya saya mencoba mencari di Google, sayangnya saya kebingungan keyword apa yang harus saya pakai

Setelah beberapa lama mencari akhirnya saya menemukan jawabannya. Pada link tersebut dia menganjurkan untuk meng-uncheck opsi “Allow animation when buffering” opsi pada “DirectVobSub”. Tapi ahsilnya nihil, tetap tinggi

Kemudian saya coba melihat-lihat option pada MPC-HC, dan menemukan opsi serupa di dalam meny “Subtitle“, lalu saya mencoba meng-uncheck opsi tersebut, merestart MPC-HC dan akhirnya masalah hilang.

Fixing hi. CPU usage with uncheck opsi "Allow animation when buffering"

Sayangnya hal itu kandas karena pada saat itu driver untuk MS SQL server yang disediakan oleh CI terutama dalam hal limit-nya bisa dibilang cacat. Walau metodologi yang digunakan sama dengan yang digunakan oleh ADODB(saya pernah bahas di artikel : Emulate Microsoft SQL Server Select Limit(2005 and above)), sayangnya apabila ADODB masih memilah lagi resultnya supaya yang dikembalikan seperti yang diminta user, sedangkan CI mengembalikannya mentah-mentah.

Sebelum melaju lebih jauh, syarat mutlak yang dibutuhkan adalah Anda sudah menggunakan Microsoft SQL Server 2005 atau lebih tinggi, karena cara ini tidak berjalan pada Database Ms. SQL Server 2000, dan driver PHP ke Ms. SQL Server baik mssql atau sqlsrv telah terinstall pada server Anda

Untuk lebih memahami, cobalah membuat sebuah table dengan nama “strong>tutorial_limit” di database MSSQL Anda dengan meng-execute SQL berikut ini.
[sql]
CREATE TABLE [dbo].[tutorial_limit](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [varchar](200) NOT NULL,
[some_random] [varchar](255) NOT NULL,
CONSTRAINT [PK_tutorial_limit] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
[/sql]

Lalu set koneksi database Anda ke Database MS SQL Anda menggunakan driver mssql/sqlsrv. Sebagai contoh, config yang saya gunakan adalah sbb:

[php num="51"]
$db['default']['hostname'] = ‘.’;
$db['default']['username'] = ‘sa’;
$db['default']['password'] = ‘sa’;
$db['default']['database'] = ‘tutorial’;
$db['default']['dbdriver'] = ‘sqlsrv’;
$db['default']['dbprefix'] = ”;
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = ”;
$db['default']['char_set'] = ‘utf8′;
$db['default']['dbcollat'] = ‘utf8_general_ci’;
$db['default']['swap_pre'] = ”;
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
[/php]

Saya menggunakan extension Ms. SQL Server Native(sqlsrv) karena XAMPP yang saya gunakan Apachenya sudah menggunakan compile-an dari VC9 begitu juga dengan PHP-nya(mssql extension dll yang saya punya hanya untuk VC6 )

Kemudian buatlah sebuah file controller dengan nama “paging_example.php” isilah dengan code berikut ini:
[php]
/**
* @property CI_Form_validation $form_validation
* @property CI_Input $input
* @property CI_DB_active_record $db
* @property CI_DB_forge $dbforge
* @property CI_Session $session
* @property CI_Loader $load
* @property CI_Upload $upload
*/

class Paging_example extends CI_Controller
{

function __construct() {
parent::__construct();
$this->load->database();
$this->load->library(array(‘table’,'pagination’));
}

function insert_dummy()
{
for ( $i = 0 ; $i < 300 ; $i++ )
{
$data_insert = array(
'name' => ‘this is row ‘ . ($i+1),
‘some_random’ => sha1($i)
);

$this->db->insert(‘tutorial_limit’,$data_insert);
}
}

function some_paging()
{
/* set base config of pagination */
$config['base_url'] = base_url() . ‘paging_example/some_paging’;
$config['total_rows'] = $this->db->count_all_results(‘tutorial_limit’);
$config['per_page'] = 10;

$this->pagination->initialize($config);

$data['records'] = $this->db->get(‘tutorial_limit’, $config['per_page'], $this->uri->segment(3));
$data['link_pagination'] = $this->pagination->create_links();
$this->load->view(‘pagination’,$data);
}
}

?>
[/php]

Kita sekalian buat untuk view-nya, kita buat sebuah file dengan nama “pagination.php” isilah dengan code berikut ini:

[html]

num_rows() > 0 ){ ?>
table->generate($records); ?>




[/html]

Perhatikan kode controller di atas, kita akan membuat dua page, yaitu “insert_dummy” dan juga “some_paging”. untuk melakukan tutorial ini, kita membutuhkan data-data dummy untuk pagination, maka dari itu kita akan coba insert dummy data secara otomatis sebanyak 300 row.

Execute-lah page “insert_dummy” tersebut(arahkan browser ke http://[your_host]/[path_to_ci_directory]/index.php/paging_example/insert_dummy), sehingga apabila anda lihat, table yang Anda buat sudah berisi 300 row.

Dummy Data sebanyak 300 row

Kemudian cobalah jalankan page “some_paging” (arahkan browser ke http://[your_host]/[path_to_ci_directory]/index.php/paging_example/some_paging)

Saat halaman "some_paging" dijalankan akan muncul seperti ini kurang lebih

Tidak nampak sesuatu yang aneh? tentu saja ini baru halaman utama. Apabila Anda melihat/membuka SQL-server Profiler, Anda akan melihat query yang di execute adalah:

[sql]SELECT TOP 10 * FROM tutorial_limit[/sql]

Ok… mari kita klik halaman kedua

Kekacuan muncul mulai page kedua dimana hasil yang tidampilkan sebanyak 20 row padahal seharusnya yang di kembalikan hanya 10 row data saja

SQL yang kita lihat mungkin akan seperti ini:

[sql]SELECT TOP 20 * FROM tutorial_limit[/sql]

Lanjuut…. ke 3rd page

Kekacuan terus berlanjut, untuk halaman ketiga mengembalikan 30 row

Lanjutnya sudah pasti akan menjadi seperti ini:

[sql]SELECT TOP 30 * FROM tutorial_limit[/sql]

Dengan kata lain semakin ke belakang jumlah record yang ditampilkan akan berjumlah

Penyelesaian

Untuk menyelesaikan masalah ini, kita bisa membuka file di dalam folder

Untuk yang menggunakan mssql extension

Untuk yang menggunakan sqlsrv extension

Carilah method “_limit” di file yang Anda buka(di kedua driver baik sqlsrv atau mssql berisi kode yang sama persis):

[php]
/**
* Limit string
*
* Generates a platform-specific LIMIT clause
*
* @access public
* @param string the sql query string
* @param integer the number of rows to limit the query to
* @param integer the offset value
* @return string
*/
function _limit($sql, $limit, $offset)
{
$i = $limit + $offset;

return preg_replace(‘/(^\SELECT (DISTINCT)?)/i’,'\\1 TOP ‘.$i.’ ‘, $sql);
}
[/php]

Saya pernah membahas sebelumnya bagaimana melimit hasil query Microsoft SQL Server di level database dan bukan di level PHP (disini), dalam kasus ini saya akan menggunakan kode serupa agar fungsi limit untuk driver Microsoft SQL server di CI ini(baik menggunakan mssql ataupun sqlsrv) dapat berjalan seperti seharusnya. Caranya replace seluruh isi method “__limit” menjadi seperti snippet berikut ini:

[php]
/**
* Limit string
*
* Generates a platform-specific LIMIT clause
*
* @access public
* @param string the sql query string
* @param integer the number of rows to limit the query to
* @param integer the offset value
* @return string
*/
function _limit($sql, $limit, $offset)
{

$sql = str_replace(“\n”, ” “, $sql);

$orderby = stristr($sql, ‘ORDER BY’);

if (!$orderby)
{
$over = ‘ORDER BY (SELECT 0)’;
}
else
{
$over = preg_replace(‘/\”[^,]*\”.\”([^,]*)\”/i’, ‘”inner_tbl”.”$1″‘, $orderby);
}

// Remove ORDER BY clause from $sql
$sql = preg_replace(‘/\s+ORDER BY(.*)/’, ”, $sql);

// Add ORDER BY clause as an argument for ROW_NUMBER()
$sql = “SELECT ROW_NUMBER() OVER ($over) AS \”ZEND_DB_ROWNUM\”, * FROM ($sql) AS inner_tbl”;

$start = $offset + 1;
$end = $offset + $limit;

$sql = “WITH outer_tbl AS ($sql) SELECT * FROM outer_tbl WHERE ZEND_DB_ROWNUM BETWEEN $start AND $end”;

return $sql;
}
[/php]

Setelah diubah save file driver tersebut. Apabila Anda menggunakan extension “sqlsrv” ada sedikit masalah yang harus dihadapi lagi, apabila Anda merefresh halaman pagination, maka Anda tidak akan menampilkan satu row datapun, tetapi pagination berjalan tanpa ada error/warning.

Hal ini diakibatkan karena masih ada Bug pada driver library SQLSRV dari Microsoft(sampai yang saat ini saya gunakan versi 2.0) dimana pada query yang complex, fungsi yang digunakan untuk me-return jumlah row(sqlsrv_num_rows) akan mereturn nilai “-1″ dan bukan jumlah row yang dikembalikan. Sehingga otomatis tidak mengembalikan apapun. Untuk mengatasinya, Anda bisa mengedit file “system\database\drivers\sqlsrv\sqlsrv_result.php” carilah method “num_rows“. Ubah kode dari:

[php]
function num_rows()
{
return @sqlsrv_num_rows($this->result_id);
}
[/php]
menjadi:
[php]
function num_rows()
{
$num_row = @sqlsrv_num_rows($this->result_id);
if ( $num_row == -1 ){ return 1; }
else { return $num_row; }

}
[/php]

Sekarang apabila Anda save dan coba refresh, seharusnya sudah normal. Ini dikarenakan dalam class html table akan mengecek apakah object hasil query yang diberikan memiliki result > 0 atau tidak. Secara koding akan seperti ini:

[php]
if ( $query->num_rows() > 0 ){
//do something like printing row data/etc
}
[/php]

Tetapi karena hasil dari method “num_rows()” adalah -1 sehingga kondisi tidak terpenuhi maka PHP tidak menulis apapun. Mod diatas digunakan untuk mengakali, apabila yang direturn(oleh sqlsrv library dalam PHP) adalah -1, maka dari si driver(dalam CI db driver) akan mereturn nilai 1 sehingga kondisi terpenuhi dan loop untuk menulis hasil row akan berjalan.

Hal ini akan selalu terjadi apabila Anda menggunakan perintah limit di Active record class. Apabila Anda ingin mengetahui jumlah row yang dihasilkan secara pasti, saya biasa mengakali dengan perintah dasar “count” dalam PHP.

[php]
$real_num_row = count($query->result_array());
[/php]

Okay.. let’s roll… kita lihat hasilnya

1st page FIX (yay... tentu saja, sejak semula masalah tidak timbul di halaman pertama )

Lanjut ke halaman kedua yang mana sebelum kita modifikasi jumlah row yang muncul berjumlah 10… dan hasilnya….

Yeah, Halaman kedua masalah selesai... tidak ada lagi 20 row yang muncul

Ok fix… mari kita langsung lompat ke halaman yang agak jauh, dan hasilnya….

Yes, we have no problem now

Apabila Anda perhatikan, dalam setiap list akan menambahkan satu kolom bernama ‘ZEND_DB_ROWNUM’. Anda dapat sembunyikan kolom tersebut secara manual.

Thankyou

Kantor saya adalah salah satu dari banyak yang dulunya banyak menggunakan aplikasi .net yang cukup ‘berumur’ sehingga masih banyak database SQL Server berceceran. Tetapi pada dasarnya sebuah perusahaan yang terus berkembang, kebutuhan terus bertambah dan selalu ada istilah “tambal sulam” sampai pada suatu titik akhirnya diputuskan membuat aplikasi baru dan kadang mereka masih ingin mempertahankan database lama(terikat lisensi yang sudah dibeli mungkin ). Sehingga mau tidak mau walupun saya menggunakan PHP untuk membuat program mereka, saya menggunakan SQL server sebagai databasenya.

Saat saya mengupgrade development environment ke VC 9 untuk PHP, bukanlah tanpa tantangan terutama datang dari database connection ke Microsoft SQL server dimana library standart (mssql) sudah tidak ada lagi semenjak versi 5.3 series. Mau tidak mau  salah satu yang bisa saya gunakan adalah native SQL Server driver for PHP(sqlsrv). Kebetulan beberapa waktu lalu saya memutuskan untuk terjun ke salah satu Framework termudah, yaitu Codeigniter. Saya punya rencana untuk menggunakan CI ini sejak lama, tetapi baru di versi 2.x.x ini saya akhirnya bisa terjun ke dalam CI karena sudah menyediakan driver native SQLSRV. Tetapi sayang tidak semulus itu. Error langsung muncul ketika saya meload halaman web, walau configuration database sudah benar.

CI error, cannot connect to SQL server database melalui driver SQLSRV walau config sudah benar

Config yang sata gunakan kurang lebih seperti ini(application/config/database.php):

[php highlight_lines="60" num="51"]
$active_group = ‘default’;
$active_record = TRUE;

$db['default']['hostname'] = ‘.’;
$db['default']['username'] = ‘sa’;
$db['default']['password'] = ‘sa’;
$db['default']['database'] = ‘tutorial’;
$db['default']['dbdriver'] = ‘sqlsrv’;
$db['default']['dbprefix'] = ”;
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = ”;
$db['default']['char_set'] = ‘utf8′;
$db['default']['dbcollat'] = ‘utf8_general_ci’;
$db['default']['swap_pre'] = ”;
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
[/php]

Lalu pada config autoload(application/config/autoload.php), saya melakukan auto loading untuk library database

[php num="55"]$autoload['libraries'] = array(‘database’);[/php]

Dan hasilnya… adalah gambar di atas saat meload halaman welcome default CI

So… dimana saya salah? ataukah Bug?

Contoh di atas saya menggunakan versi terakhir(2.1.0), yang notabene juga terjadi di versi sebelumnya(2.0.3). Setelah mencoba-coba akhirnya ada hal yang harus diperbaiki di file “sqlsrv_driver.php“(system\database\drivers\sqlsrv\sqlsrv_driver.php).

Kesalahan terjadi sangat simple, pada sekitar line 89 pada method ‘db_pcconnect’

[php num="81"]
/**
* Persistent database connection
*
* @access private called by the base class
* @return resource
*/
function db_pconnect()
{
$this->db_connect(TRUE);
}
[/php]

Perhatikan keterangan dokumentasi dari method itu pada tag @return harusnya me-return sebuah resource, tetapi nyatanya tidak ada syntax return disini, sehingga pastinya akan dianggap false oleh si pemanggil. Akibatnya koneksi dianggap gagal. Coba tambahkan kata “return” di awal line 89, sehingga menjadi:

[php num="81"]
/**
* Persistent database connection
*
* @access private called by the base class
* @return resource
*/
function db_pconnect()
{
return $this->db_connect(TRUE);
}
[/php]

Simpan dan coba refresh halaman, seharusnya error sudah tidak nampak lagi.

Langkah ini sebenarnya tidak perlu apabila Anda mengeset option “pcconnect” ke FALSE(lihat line 60 pada config code di atas).
[php num="60"]$db['default']['pconnect'] = FALSE;[/php]

Latar belakang kenapa saya menulis post ini adalah:

Seperti yang kita tahu seperti MySQL atau Postgre SQL memiliki fungsi LIMIT(Yang katanya bukan merupakan standart SQL internasional) dan sangat mudah untuk melimit hasil query, tetapi tidak untuk MSSQL server.

Saya masih ingat dulu akhirnya saya bermain dengan XML data source dengan menggunakan Adobe Spry dataset untuk melakukan paging, hanya saja pastinya karena diload semua, apabila data sudah amat banyak bukan main lamanya.

Setelah beberapa lama akhirnya saya menggunakan Database Abstraction Layer dengan menggunakan ADODB untuk PHP. library yang besar ini mempunyai virtualisasi untuk LIMIT function. Tetapi apabila kita tinjau lebih dalam virtualisasi Limit, yang disediakan ternyata hanya akan membantu sesaat. Kenapa demikian?

Banyak yang mengakali fungsi limit untuk SQL server di PHP menggunakan perintah TOP di SQL querynya, kemudian return data ke pengakses berdasarkan logic di PHP. Dengan kata lain semakin besar offsetnya, akan semakin besar overhead yang terjadi. Sebagai contoh mungkin apabila kita mau melihat 40 record pertama, library ADODB akan membuat syntax

[sql]SELECT TOP 40 * FROM some_table[/sql]

Karena kasusnya adalah 40 row pertama sehingga akan langsung dikembalikan semuanya. Tetapi apabila kita hendak melihat 40 row kedua(di halaman/pahge kedua misalnya), maka library ADODB akan membuat query:
[sql]SELECT TOP 80 * FROM some_table[/sql]
Lalu hasilnya akan me-return 80 row data, kemudian diseleksi lagi untuk row 0-39 akan diabaikan, dan row 40-79 akan di return.

Okay… itu masih acceptable karena isinya hanya under 100 row… bahkan 1000 row masih bisa dibilang tidak begitu pengaruh… lalu apabila yang kita hendak lakukan pagination adalah 200.000 row? maka apabila kita ingin melihat halaman terakhir, maka ke 200.000 row akan di retrieve oleh PHP dan hanya diambil 40 row terakhir saja. Inilah yang membuat overhead.

Saya masih ingat dulu untuk melakukan Limitasi Select data, Query harus dirubah cukup panjang. Pastinya tidak bisa dibilang query standard lagi dan tidak bisa diterapkan secara mudah dengan banyak query yang sudah ada(aka harus dibongkar query-nya). Tentunya bukan sesuatu yang enak di dengar oleh telinga Developer . Setelah kemarin saya iseng memulai belajar Zend Framework mata saya tertuju di salah satu library Zend Framework yaitu “db” yang di dalamnya sudah terdapat adapter untuk extensi “sqlsrv” Dan setelah dibaca sedikit demi sedikit saya mengambil satu bagian yang menarik yang tugasnya untuk melakukan LIMIT(Little modified ).

[php]
/**
* Adds an adapter-specific LIMIT clause to the SELECT statement.
*
* @param string $sql
* @param integer $count
* @param integer $offset OPTIONAL
* @return string
* @throws Zend_Db_Adapter_Sqlsrv_Exception
*/
function limit($sql, $count, $offset = 0)
{
$orderby = stristr($sql, ‘ORDER BY’);

if (!$orderby) {
$over = ‘ORDER BY (SELECT 0)’;
} else {
$over = preg_replace(‘/\”[^,]*\”.\”([^,]*)\”/i’, ‘”inner_tbl”.”$1″‘, $orderby);
}

// Remove ORDER BY clause from $sql
$sql = preg_replace(‘/\s+ORDER BY(.*)/’, ”, $sql);

// Add ORDER BY clause as an argument for ROW_NUMBER()
$sql = “SELECT ROW_NUMBER() OVER ($over) AS \”ZEND_DB_ROWNUM\”, * FROM ($sql) AS inner_tbl”;

$start = $offset + 1;
$end = $offset + $count;

$sql = “WITH outer_tbl AS ($sql) SELECT * FROM outer_tbl WHERE CAST(ZEND_DB_ROWNUM as bigint ) BETWEEN $start AND $end”;

return $sql;
}
[/php]

Fungsi diatas manambahkan SQL query menjadi agak panjang, tetapi paling tidak sudah dibantu pembuatnnya tinggal dibungkus dalam class Database Abstraction layer milik Anda atau digunakan ala kadarnya

Contoh pemakaian(apabila menggunakan sqlsrv extension, kurang lebih sama dengan mssql function biasa):

[php]
$conn = sqlsrv_connect( “SERVERADDRS/IPADDRESS”, array(“UID” => ‘sqlserv_userid’, “PWD” => ‘sqlserv_password’, “Database”=>”dbname”));
if( $conn === false )
{
echo “Could not connect.\n”;
die( print_r( sqlsrv_errors(), true));
}

$str = “SELECT * FROM TBObject WHERE 1=1 ORDER BY Name “;

//fetch data from record 11 of 20 record
$stmt = sqlsrv_query( $conn, limit($str,20,11), array(), array( “Scrollable” => SQLSRV_CURSOR_KEYSET ));
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_BOTH))
{
var_dump($row);
}
[/php]

Contoh dengan mssql Function:
[php]
mssql_connect(’10.0.0.23′, ‘sa’, ‘xxxx’);
mssql_select_db(‘dbname’);

$str = “SELECT * FROM TBObject WHERE 1=1 ORDER BY Name “;

$result = mssql_query(limit($str, 20,11));

while($r = mssql_fetch_array($result))
{
var_dump($r);
}
[/php]

Fungsi diatas akan mengubah Query seperti:

[sql]SELECT * FROM TBObject WHERE 1=1 ORDER BY Name[/sql]

Fungsi diatas akan mengubah Query seperti:

[sql]WITH outer_tbl AS (SELECT ROW_NUMBER() OVER (ORDER BY Name ) AS “ZEND_DB_ROWNUM”, * FROM (SELECT * FROM TBObject WHERE 1=1) AS inner_tbl) SELECT * FROM outer_tbl WHERE CAST(ZEND_DB_ROWNUM as bigint ) BETWEEN 12 AND 31[/sql]

Good Luck

Artikel ini sebenarnya pernah saya tulis, hanya tak sengaja terhapus saat error pada server terjadi beberapa waktu lalu, sehingga saya rewrite ulang dengan draft yang pernah saya buat