<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>夢の翼 &#187; Scripting &amp; Programing</title>
	<atom:link href="http://neo.rizkhey.net/category/it-life/programing-it-life/feed" rel="self" type="application/rss+xml" />
	<link>http://neo.rizkhey.net</link>
	<description>~ Wings of Dream ~</description>
	<lastBuildDate>Fri, 10 Feb 2012 14:14:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Clone Windows 7 Window Box with HTML &amp; CSS3</title>
		<link>http://neo.rizkhey.net/2012/01/4243-clone-windows-7-window-box-with-html-css3</link>
		<comments>http://neo.rizkhey.net/2012/01/4243-clone-windows-7-window-box-with-html-css3#comments</comments>
		<pubDate>Sat, 28 Jan 2012 14:53:19 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=4243</guid>
		<description><![CDATA[Apakah Anda sudah pernah melihat Ubuntu Online Tour? Apabila belum mungkin Anda bisa ke website Ubuntu, ada sebuah link di bagian bawah halaman  utama. Tour ini merupakan complete replica Ubuntu dalam HTML &#38; Javascript. Very cool I think 
Semenjak melihat demo tersebut, saya punya keinginan membuat UI yang sama seperti itu yang bisa digunakan dalam [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Apakah Anda sudah pernah melihat Ubuntu Online Tour? Apabila belum mungkin Anda bisa ke website <a href="http://ubuntu.com">Ubuntu</a>, ada sebuah link di bagian bawah halaman  utama. Tour ini merupakan complete replica Ubuntu dalam HTML &amp; Javascript. Very cool I think <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /></p>
<p style="text-align: justify;">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.</p>
<p><div id="attachment_4250" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/ilus1.jpg"><img class="size-medium wp-image-4250" title="Tutorial result" src="http://neo.rizkhey.net/wp-content/uploads/2012/01/ilus1-450x345.jpg" alt="Tutorial result" width="450" height="345" /></a><p class="wp-caption-text">Tutorial result</p></div><span id="more-4243"></span></p>
<p style="text-align: justify;">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% <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> ). Ini akan menjadi dasar User interface yang saya ceritakan di atas sekaligus mendemokan artikel tentang CSS3 yang saya tulis sebelumnya (<a title="3 My favorite CSS3" href="http://neo.rizkhey.net/2012/01/4195-3-omy-favorite-css3">3 My Favorite CSS3</a>).</p>
<p style="text-align: justify;">Untuk permulaan buatlah sebuah folder untuk menampung file pekerjaan Anda. Saya menggunakan nama &#8220;design&#8221;, dan di dalamnya buatlah 2 buah folder yitu:</p>
<ul>
<li>images</li>
<li>css</li>
</ul>
<p style="text-align: justify;">Sebelum memulai pekerjaan kita, download-lah file-file images yang dibutuhkan.</p>
<div class="download_box"><a title="Images pack" href="http://neo.rizkhey.net/wp-content/uploads/2012/01/images.zip">Images download</a></div>
<blockquote style="margin-top: 20px;">
<p style="text-align: justify;">The background taken from theme pack waterfall in Windows theme</p>
</blockquote>
<p style="text-align: justify;">Extract semua file di dalam file zip ke folder &#8216;images&#8217;. Setelah itu buatlah sebuah file css di dalam folder &#8220;<em>css</em>&#8221; dengan nama &#8220;<em>main.css</em>&#8220;, dan sebuah file html di folder utama bernama &#8220;index.html&#8221;.</p>
<p style="text-align: justify;">Buka file &#8220;index.html&#8221; dan mulailah menulis tag-tag HTML sbb:</p>
<p>[html]<br />
<!DOCTYPE html><br />
<html><br />
    <head></p>
<link href="css/main.css" type="text/css" rel="stylesheet" />
    </head><br />
    <body></p>
<div class="main_container"></div>
<p>    </body><br />
</html><br />
[/html]</p>
<p>Lalu bukalah &#8220;main.css&#8221; dan tulislah copy-lah beberapa code untuk CSS-nya sbb:<br />
[css]<br />
body {<br />
    /* make little floaty from the top  */<br />
    margin-top: 100px;<br />
    /* set your desktop background  */<br />
    background-image: url(../images/the_bg.jpg);<br />
    /* windows 7 using Segoe UI font but it&#8217;s not<br />
     * very common on other OS, we will using Verdana instead<br />
     */<br />
    font-family: Verdana,Helvetica,sans-serif;<br />
    /* set font size&#8230; well it&#8217;s up to you */<br />
    font-size: 0.8em;<br />
}</p>
<p>/* some oldies browser make blue border in image link<br />
 * this one will remove all blue border<br />
 */<br />
a img{ border: none; }</p>
<p>/* hyperlink global rule */<br />
a:link, a:visited {<br />
    color: #0066CC;<br />
    text-decoration: none;<br />
}</p>
<p>a:hover{<br />
    text-decoration: underline;<br />
}</p>
<p>.clear{<br />
    clear: both;<br />
}<br />
[/css]</p>
<p>Cobalah buka file HTML tersebut di browser, Tampilan akan kurang lebih seperti gambar berikut ini:<br />
<a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/body_css.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/body_css-442x450.jpg" alt="Body CSS" title="Body CSS" width="442" height="450" class="aligncenter size-medium wp-image-4256" /></a></p>
<p>Anda melihat sebuah div:<br />
[html]
<div class="main_container"></div>
<p>[/html]<br />
Dimana semua isi dari window akan ada disana, maka tambahkan CSS  class dengan nama &#8216;main_container&#8217;, lalu isi dengan CSS script sbb:<br />
[css]<br />
/* Main container is the main DIV contained the Window frame */<br />
.main_container {<br />
    /* Magin left-right set auto to make it in center */<br />
    margin-left: auto;<br />
    margin-right: auto; </p>
<p>    /* width of windo we set to 70% */<br />
    width: 70%;<br />
    min-width: 800px;</p>
<p>    /* set background image */<br />
    background-image: url(../images/window_bg.png);</p>
<p>    /* set the border color */<br />
    border: 1px solid #666666;<br />
    /* CSS3 droping shadow for window */<br />
    -moz-box-shadow : 5px 5px 15px #000000;     /* mozilla prefix */<br />
    -webkit-box-shadow : 5px 5px 15px #000000;  /* webkit prefix (chrome/safari) */<br />
    box-shadow : 5px 5px 15px #000000;          /* legal css 3 only */</p>
<p>    /* CSS3 makes rounded box */<br />
    -moz-border-radius: 6px;<br />
    -webkit-border-radius: 6px;<br />
    border-radius: 6px;</p>
<p>    /* make padding to make the border feel real */<br />
    padding: 0px 5px 5px 5px;</p>
<p>}<br />
[/css]</p>
<p>Coba refresh HTML, maka akan mendapati sebuah box di tengah layar seperti berikut:<br />
<a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/container_start.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/container_start-441x450.jpg" alt="Container window" title="Container window" width="441" height="450" class="aligncenter size-medium wp-image-4261" /></a></p>
<p>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.</p>
<p>Kita lanjut ke langkah selanjutnya. kita akan membuat navigasi dan juga title dari sebuah window. Hasilnya akn seperti di bawah ini.</p>
<p><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/header.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/header-450x220.jpg" alt="Header navigation" title="Header navigation" width="450" height="220" class="aligncenter size-medium wp-image-4273" /></a></p>
<p>Untuk menghasilkan hasil seperti di atas, kita tambahkan HTML script berikut ini di dalam div ber-class &#8216;<em><strong>main_container</strong></em>&#8216;<br />
[html]<br />
            <!-- MAIN CONTAINER FOR WINDOW START --></p>
<div class="main_container">
<p>            <!-- HEADER WINDOW(TITLE, CLOSE BTN, ETC) START --></p>
<div class="window_header">
<div class="window_title">Window name goes here</div>
<div class="btn_list">
<div><a href="#" title="Minimize"><img alt="Minimize window" src="images/minime.png"></a></div>
<div><a href="#" title="Maximize"><img alt="sign out" src="images/btn.png"></a></div>
<div><a href="#" title="close"><img alt="sign out" src="images/logout.png"></a></div>
</p></div>
<div class="clear"></div>
</p></div>
<p>            <!-- HEADER WINDOW(TITLE, CLOSE BTN, ETC) END --><br />
[/html]</p>
<p>Bagian Header di bungus dalam class &#8216;<em>window_header</em>&#8216; 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:</p>
<p>[css]<br />
/* ============= CSS for header area ============== */</p>
<p>/* Window title area, title in upper left */<br />
.window_title{<br />
    font-size: 0.9em;<br />
    padding: 2px;<br />
    color: #fff;<br />
    text-align: center;<br />
    background-image: url(&#8220;../images/darken_bg.png&#8221;);<br />
    border-left: 1px solid #999999;<br />
    border-right: 1px solid #999999;<br />
    border-bottom: 1px solid #999999;<br />
    font-weight: bolder;<br />
    width: 200px;<br />
    float: left;<br />
    /* bottom border make round */<br />
    border-bottom-left-radius: 5px;<br />
    border-bottom-right-radius: 5px;<br />
    /* add little shadow */<br />
    box-shadow: 1px 1px 1px #000000;<br />
}</p>
<p>/* Button List area, like Minimize, max, close button */<br />
.btn_list{<br />
    float: right;<br />
    padding: 0px;<br />
}</p>
<p>/* make the easy effect, just fade it with CSS3 */<br />
.btn_list a:link,.btn_list a:visited{<br />
    opacity : 0.6;<br />
}</p>
<p>/* make the button fully shown */<br />
.btn_list a:hover{<br />
    opacity : 1;<br />
}</p>
<p>.btn_list div{<br />
    float: left;<br />
}<br />
/* ============= CSS for header area END ============== */<br />
[/css]</p>
<p>Saya coba terangkan sedikit CSS-nya:</p>
<blockquote><p><strong>Line 9</strong> Saya memberikan sebuah background hitam transparant  karena pada line 7 saya set warna tulisan menjadi putih(#fff).<br />
<strong>Line 10-12</strong> Bagian title area kita beri border kiri, bwah, dan bagian kanan saja.<br />
<strong>Line 14</strong> Panjang 200px, sesuaikan dengan panjang title Anda.<br />
<strong>Line 15</strong> kita set box agar berada di sebelah kiri(float: left).<br />
<strong>Line 17-18</strong> Kita terapkan <strong>CSS 3</strong>, disini saya memberi efek round-corner di bagian bawah box.<br />
<strong>Line 20</strong> Terakhir, another CSS3, kita beri bayangan tipis di bagian bawah box.</p></blockquote>
<p>Ok, apabila Anda me-refresh browser, Anda mendapati bahwa box bagian title window sudah terbentuk di sebelah kiri, sedangkan untuk bagian kanan belum terbentuk <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /></p>
<p>Untuk Class &#8220;btn_list&#8221; 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 &#8220;opacity&#8221;(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).</p>
<p>Ok&#8230; next kita akan buat sebuah box untuk navigasi history atau yang dikenal sebagai breadcrumb. Hasilnya kurang lebih nantinya akan seperti berikut ini:</p>
<p><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/breadcrumb.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/breadcrumb-450x270.jpg" alt="Next is Breadcrumb" title="Next is Breadcrumb" width="450" height="270" class="aligncenter size-medium wp-image-4279" /></a></p>
<p>Untuk membuat tampilan breadcrumb dan juga search box, tambahkan script HTML berikut ini di bawah bagian header:</p>
<p>[html]<br />
            <!-- HEADER NAVIGATION START --></p>
<div class="upper_navigation">
<div class="breadcrumb_container">
<div class="breadcrumb_root"></div>
<div class="breadcrumb_item">
<ul>
<li><a href="#">Root node</a></li>
<li><a href="#">Node one</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
</ul></div>
<div class="clear"></div>
</p></div>
<div class="search_box">
<form action="#">
<input type="text" name="textbox" />
<input type="submit" value="" />
                    </form>
<div class="clear"></div>
</p></div>
<div class="clear"></div>
</p></div>
<p>            <!-- HEADER NAVIGATION END --><br />
[/html]</p>
<blockquote>
<h3>Before you go on&#8230;.</h3>
<p>Sampai sejauh ini, HTML kita akan seperti ini:<br />
<a href="javascript:void(null);" onclick="s_toggleDisplay(document.getElementById('SID1266598660'), this, 'Show &#9660;', 'Hide &#9650;');">Show &#9660;</a></p>
<div id='SID1266598660' style='display:none;'>
<p>[html]<br />
<!DOCTYPE html><br />
<html><br />
    <head><br />
        <!--<br />
        <script src="js/jquery.js" type="text/javascript" ></script><br />
        <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript" ></script></p>
<link href="css/jquery-ui-1.8.16.cupertino.css" type="text/css" rel="stylesheet" />
        --></p>
<link href="css/main.css" type="text/css" rel="stylesheet" />
<p>    </head><br />
    <body></p>
<p>        <!-- MAIN CONTAINER FOR WINDOW START --></p>
<div class="main_container">
<p>            <!-- HEADER WINDOW(TITLE, CLOSE BTN, ETC) START --></p>
<div class="window_header">
<div class="window_title">Window name goes here</div>
<div class="btn_list">
<div><a href="#" title="Minimize"><img alt="Minimize window" src="images/minime.png"></a></div>
<div><a href="#" title="Maximize"><img alt="sign out" src="images/btn.png"></a></div>
<div><a href="#" title="close"><img alt="sign out" src="images/logout.png"></a></div>
</p></div>
<div class="clear"></div>
</p></div>
<p>            <!-- HEADER WINDOW(TITLE, CLOSE BTN, ETC) END --></p>
<p>            <!-- HEADER NAVIGATION START --></p>
<div class="upper_navigation">
<div class="breadcrumb_container">
<div class="breadcrumb_root"></div>
<div class="breadcrumb_item">
<ul>
<li><a href="#">Root node</a></li>
<li><a href="#">Node one</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
</ul></div>
<div class="clear"></div>
</p></div>
<div class="search_box">
<form action="#">
<input type="text" name="textbox" />
<input type="submit" value="" />
                    </form>
<div class="clear"></div>
</p></div>
<div class="clear"></div>
</p></div>
<p>            <!-- HEADER NAVIGATION END --></p></div>
<p>        <!-- MAIN CONTAINER FOR WINDOW END --></p>
<p>    </body><br />
</html><br />
[/html]</p>
</div>
</blockquote>
<p>Ok, next the CSS...<br />
[css]<br />
/* ============= CSS for header NAV. area START ============== */<br />
.upper_navigation{<br />
    margin-top: 7px;<br />
    margin-bottom:8px;<br />
}</p>
<p>.breadcrumb_container{<br />
    /* Breadcrumb navi is in the left side so make it float in the left */<br />
    float: left;<br />
    /* 75:25% => 75=> breadcrumb, 25 Search box */<br />
    width: 75%;<br />
    /* the color is white */<br />
    background: #fff;</p>
<p>    padding: 3px;</p>
<p>    border: solid 1px #666666;</p>
<p>    /* little rounded */<br />
    -moz-border-radius : 3px;<br />
    -webkit-border-radius : 3px;<br />
    border-radius : 3px;</p>
<p>    /* thin shadow */<br />
    -moz-box-shadow : 1px 1px 3px #666;<br />
    -webkit-box-shadow : 1px 1px 3px #666;<br />
    box-shadow : 1px 1px 3px #666;<br />
}</p>
<p>/* breadcrumb root have "folder" image */<br />
.breadcrumb_root{<br />
    float: left;<br />
    background-image: url(../images/gtk-open_20.png);<br />
    background-repeat: no-repeat;<br />
    width: 20px;<br />
    height: 18px;<br />
}</p>
<p>/* breadcrumb listing, becarefull with content width */<br />
.breadcrumb_item{<br />
    float: left;<br />
}</p>
<p>.breadcrumb_item ul{<br />
    margin-top: 0px;<br />
    margin-bottom: 0px;<br />
    padding-left: 0px;<br />
}</p>
<p>.breadcrumb_item ul li{<br />
    display: inline;<br />
    background: url(../images/node.png);<br />
    background-repeat: no-repeat;<br />
    padding-left: 10px;<br />
    width: 100px;<br />
}</p>
<p>.breadcrumb_item a:link,.breadcrumb_item a:visited{<br />
    text-decoration: none;<br />
    color: #000;<br />
    padding: 5px;<br />
}<br />
.breadcrumb_item a:hover{<br />
    background-image: url(../images/breadcrumb_hover.png);<br />
    background-repeat: repeat-x;<br />
    border: solid 1px #999999;<br />
    padding: 4px;<br />
}</p>
<p>/* Search Box CSS Classes */<br />
.search_box{<br />
    /* make height equals the breadcrumb height around 24px */<br />
    height: 24px;<br />
    /*<br />
    set magin from the left around 77% (remmeber the breadcrumb section is 75 in width)<br />
    at last give space 2% from breadcrumb box<br />
    */<br />
    margin-left: 77%;<br />
    /* also set the bg */<br />
    background: #fff;</p>
<p>    /* the rest is same with breadcrumb box */<br />
    border: solid 1px #666666;<br />
    -moz-border-radius : 3px;<br />
    -webkit-border-radius : 3px;</p>
<p>    border-radius : 3px;<br />
    -moz-box-shadow : 1px 1px 3px #666;<br />
    -webkit-box-shadow : 1px 1px 3px #666;<br />
    box-shadow : 1px 1px 3px #666;<br />
}</p>
<p>/*<br />
    search box styling,the width set to 80% if greater than 80% will throw<br />
    the submit button bellow the textbox in Opera(only)<br />
*/<br />
.search_box input[type=text]{<br />
    border: none;<br />
    padding: 0px 0px 0px 5px;<br />
    height: 23px;<br />
    float: left;<br />
    width: 80%;<br />
}<br />
/* Button with background image set it in the right of the box */<br />
.search_box input[type=submit]{<br />
    border: none;<br />
    background-color: transparent;<br />
    background-image: url(../images/search_btn.png);<br />
    background-repeat: no-repeat;<br />
    background-position: center center;<br />
    height: 23px;<br />
    float: right;<br />
}<br />
/* ============= CSS for header NAV. area END ============== */<br />
[/css]</p>
<p>Untuk penjelasannya, kurang lebih seperti yang tertulis diatas <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /></p>
<p>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").<br />
[html]<br />
            <!-- main container for content START --></p>
<div class="window_main_container">
<div class="content_toolbar">
                    add special toolbar/link here
                </div>
<div class="window_side_bar">
<ul>
<li><a href="#">Main Menu item</a></li>
<li>
                            This is Root menu 1</p>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a>
<ul>
<li><a href="#">sub of Menu item</a></li>
</ul>
</li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li>
                            This is Root menu 2</p>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
</ul></div>
<div class="window_content">
<div class="content_wrapper">
<h2>Lorem ipsum dolor sit ame</h2>
<div class="content_desc">
                            Page description in here, you can<br />
                            describe your page content to your user what is this page for.
                        </div>
<fieldset>
<legend>Field set title</legend>
<p>                            Field set content</p>
<div style="padding: 3px;">
<input type="text" name="txt_textbox" /></div>
<div style="padding: 3px;">
<select>
<option value="1" >2</option>
<option value="2" >3</option>
<option value="3" >4</option>
</select></div>
<div style="padding: 3px;">
                                <textarea name="txt_textarea">This is text area</textarea>
                            </div>
<div style="padding: 3px;">
<input type="submit" />
                                <a href="#">Some hyperlink</a>
                            </div>
</fieldset></div>
</p></div>
<div class="clear"></div>
</p></div>
<p>            <!-- main container for content END--></p>
<p>            <!-- WINDOW FOOTER AREA --></p>
<div class="window_footer"></div>
<p>            <!-- WINDOW FOOTER AREA --><br />
[/html]</p>
<p>don't forget... the CSS<br />
[css]<br />
/* ======= CSS for main content area(content&#038;sidebar) START ======= */<br />
.window_main_container{<br />
    /* Set background to white */<br />
    background-color: #fff;<br />
    /* set space between title area to content box */<br />
    margin-top: 5px;</p>
<p>    /* set some border */<br />
    border-left: 1px solid #585151;<br />
    border-right: 1px solid #585151;<br />
    border-top: 1px solid #585151;<br />
    /* Bottom border is blue */<br />
    border-bottom: 1px solid #CCD9EA;<br />
}</p>
<p>/* ontent upper toolbar */<br />
.content_toolbar{<br />
    height: 16px;<br />
    background-image: url("../images/bg_toolbar.png");<br />
    background-repeat: repeat-x;<br />
    padding: 8px 5px 5px 5px;<br />
    font-size: 11px;<br />
    border-bottom: solid 1px #CCD9EA;<br />
}</p>
<p>/* sidebar classes */<br />
.window_side_bar{<br />
    float: left;<br />
    width: 200px;<br />
    padding: 5px;<br />
    font-size: 0.9em;<br />
}</p>
<p>.window_side_bar a:link, .window_side_bar a:visited{<br />
    color: #151C55;<br />
    text-decoration: none;<br />
}</p>
<p>.window_side_bar a:hover{<br />
    text-decoration: underline;<br />
    color: #0066CC;<br />
}</p>
<p>.window_side_bar ul{<br />
    list-style: none;<br />
    color: #151C55;<br />
    font-weight: bolder;<br />
    padding-left: 10px;<br />
    padding-bottom: 10px;<br />
}</p>
<p>.window_side_bar ul li{<br />
    padding-bottom: 5px;<br />
}</p>
<p>.window_side_bar ul li ul{<br />
    list-style: none;<br />
    color: #151C55;<br />
    padding-left: 10px;<br />
    padding-top: 3px;<br />
}</p>
<p>.window_side_bar ul li ul li{<br />
    padding-left: 10px;<br />
    font-weight: normal;<br />
    font-size: 11px;<br />
    padding-bottom: 0px;<br />
}</p>
<p>/* This is class for main content window, all content will go here */<br />
.window_content{<br />
    background-image: url("../images/bg_sidebar.jpg");<br />
    background-repeat: repeat-y;<br />
    /* set min height for main container : D */<br />
    min-height:  400px;<br />
    padding: 0px 0px 0px 210px;<br />
    top: 0px;<br />
    left: 0px;<br />
}</p>
<p>.content_wrapper{<br />
    padding: 2px 10px 5px 10px;<br />
}</p>
<p>/* ======= CSS for main content area(content&#038;sidebar) END ======= */</p>
<p>.window_footer{</p>
<p>    /* Footer window background color */<br />
    background-color: #F1F5FB;<br />
    /* set height window footer */<br />
    height: 65px;<br />
    /* footer upper border */</p>
<p>    border-left: 1px solid #585151;<br />
    border-right: 1px solid #585151;<br />
}</p>
<p>/* content styling */<br />
h2 {<br />
    color: #4776BD;<br />
    font-weight: normal;<br />
    font-size: medium;<br />
}<br />
.content_desc{<br />
    padding-bottom: 20px;<br />
    font-style: italic;<br />
}<br />
.window_content{<br />
    font-size: 11px;<br />
}</p>
<p>fieldset{<br />
    border: 1px solid #CCCCCC;<br />
}</p>
<p>legend{<br />
    color: #003399;<br />
    font-size: 1.1em;<br />
}</p>
<p>/* input object classes */<br />
.window_content input[type=text],<br />
.window_content input[type=password],<br />
.window_content input[type=date],<br />
.window_content input[type=file],<br />
.window_content select{<br />
    font-size: small;<br />
    width: 250px;<br />
    -moz-border-radius:3px;<br />
    -webkit-border-radius:3px;<br />
    border-radius:3px;<br />
    border: solid 1px #7DA2CE;<br />
    padding: 3px;<br />
}</p>
<p>textarea{<br />
    font-family: Arial, Helvetica, sans-serif;<br />
    font-size: small;<br />
    width: 250px;<br />
    height: 60px;<br />
    resize: true;<br />
    -moz-border-radius:3px;<br />
    -webkit-border-radius:3px;<br />
    border-radius:3px;<br />
    border: solid 1px #7DA2CE;<br />
    padding: 3px;<br />
}<br />
[/css]</p>
<p>Ok, kurang lebih sekarang file HTML &#038; CSS keseluruhan akan seperti berikut:</p>
<blockquote><p>
HTML file<br />
<a href="javascript:void(null);" onclick="s_toggleDisplay(document.getElementById('SID1386893589'), this, 'Show &#9660;', 'Hide &#9650;');">Show &#9660;</a></p>
<div id='SID1386893589' style='display:none;'>
<p>[html]<br />
<!DOCTYPE html><br />
<html><br />
    <head></p>
<link href="css/main.css" type="text/css" rel="stylesheet" />
    </head><br />
    <body></p>
<p>        <!-- MAIN CONTAINER FOR WINDOW START --></p>
<div class="main_container">
<p>            <!-- HEADER WINDOW(TITLE, CLOSE BTN, ETC) START --></p>
<div class="window_header">
<div class="window_title">Window name goes here</div>
<div class="btn_list">
<div><a href="#" title="Minimize"><img alt="Minimize window" src="images/minime.png"></a></div>
<div><a href="#" title="Maximize"><img alt="sign out" src="images/btn.png"></a></div>
<div><a href="#" title="close"><img alt="sign out" src="images/logout.png"></a></div>
</p></div>
<div class="clear"></div>
</p></div>
<p>            <!-- HEADER WINDOW(TITLE, CLOSE BTN, ETC) END --></p>
<p>            <!-- HEADER NAVIGATION START --></p>
<div class="upper_navigation">
<div class="breadcrumb_container">
<div class="breadcrumb_root"></div>
<div class="breadcrumb_item">
<ul>
<li><a href="#">Root node</a></li>
<li><a href="#">Node one</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
<li><a href="#">Node two</a></li>
</ul></div>
<div class="clear"></div>
</p></div>
<div class="search_box">
<form action="#">
<input type="text" name="textbox" />
<input type="submit" value="" />
                    </form>
<div class="clear"></div>
</p></div>
<div class="clear"></div>
</p></div>
<p>            <!-- HEADER NAVIGATION END --></p>
<p>            <!-- main container for content START --></p>
<div class="window_main_container">
<div class="content_toolbar">
                    add special toolbar/link here
                </div>
<div class="window_side_bar">
<ul>
<li><a href="#">Main Menu item</a></li>
<li>
                            This is Root menu 1</p>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a>
<ul>
<li><a href="#">sub of Menu item</a></li>
</ul>
</li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li>
                            This is Root menu 2</p>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
</ul></div>
<div class="window_content">
<div class="content_wrapper">
<h2>Lorem ipsum dolor sit ame</h2>
<div class="content_desc">
                            Page description in here, you can<br />
                            describe your page content to your user what is this page for.
                        </div>
<fieldset>
<legend>Field set title</legend>
<p>                            Field set content</p>
<div style="padding: 3px;">
<input type="text" name="txt_textbox" /></div>
<div style="padding: 3px;">
<select>
<option value="1" >2</option>
<option value="2" >3</option>
<option value="3" >4</option>
</select></div>
<div style="padding: 3px;">
                                <textarea name="txt_textarea">This is text area</textarea>
                            </div>
<div style="padding: 3px;">
<input type="submit" />
                                <a href="#">Some hyperlink</a>
                            </div>
</fieldset></div>
</p></div>
<div class="clear"></div>
</p></div>
<p>            <!-- main container for content END--></p>
<p>            <!-- WINDOW FOOTER AREA --></p>
<div class="window_footer"></div>
<p>            <!-- WINDOW FOOTER AREA -->
        </div>
<p>        <!-- MAIN CONTAINER FOR WINDOW END --></p>
<p>    </body><br />
</html><br />
[/html]</p>
</div>
</blockquote>
<blockquote><p>
CSS:<br />
<a href="javascript:void(null);" onclick="s_toggleDisplay(document.getElementById('SID732869936'), this, 'Show &#9660;', 'Hide &#9650;');">Show &#9660;</a></p>
<div id='SID732869936' style='display:none;'>
<p>[css]<br />
body {<br />
    /* make little floaty from the top : D */<br />
    margin-top: 100px;<br />
    /* set your desktop background : D */<br />
    background-image: url(../images/the_bg.jpg);<br />
    /* windows 7 using Segoe UI font but it's not<br />
     * very common on other OS, we will using Verdana instead<br />
     */<br />
    font-family: Verdana,Helvetica,sans-serif;<br />
    /* set font size... well it's up to you */<br />
    font-size: 0.8em;<br />
}</p>
<p>/* some oldies browser make blue border in image link<br />
 * this one will remove all blue border<br />
 */<br />
a img{ border: none; }</p>
<p>/* hyperlink global rule */<br />
a:link, a:visited {<br />
    color: #0066CC;<br />
    text-decoration: none;<br />
}</p>
<p>a:hover{<br />
    text-decoration: underline;<br />
}</p>
<p>.clear{<br />
    clear: both;<br />
}</p>
<p>/* Main container is the main DIV contained the Window frame */<br />
.main_container {<br />
    /* Magin left-right set auto to make it in center */<br />
    margin-left: auto;<br />
    margin-right: auto; </p>
<p>    /* width of windo we set to 70% */<br />
    width: 70%;<br />
    min-width: 800px;</p>
<p>    /* set background image */<br />
    background-image: url(../images/window_bg.png);</p>
<p>    /* set the border color */<br />
    border: 1px solid #666666;<br />
    /* CSS3 droping shadow for window */<br />
    -moz-box-shadow : 5px 5px 15px #000000;     /* mozilla prefix */<br />
    -webkit-box-shadow : 5px 5px 15px #000000;  /* webkit prefix (chrome/safari) */<br />
    box-shadow : 5px 5px 15px #000000;          /* legal css 3 only */</p>
<p>    /* CSS3 makes rounded box */<br />
    -moz-border-radius: 6px;<br />
    -webkit-border-radius: 6px;<br />
    border-radius: 6px;</p>
<p>    /* make padding to make the border feel real : D */<br />
    padding: 0px 5px 5px 5px;</p>
<p>}</p>
<p>/* ============= CSS for header area ============== */</p>
<p>/* Window title area, title in upper left */<br />
.window_title{<br />
    font-size: 0.9em;<br />
    padding: 2px;<br />
    color: #fff;<br />
    text-align: center;<br />
    background-image: url("../images/darken_bg.png");<br />
    border-left: 1px solid #999999;<br />
    border-right: 1px solid #999999;<br />
    border-bottom: 1px solid #999999;<br />
    font-weight: bolder;<br />
    width: 200px;<br />
    float: left;<br />
    /* bottom border make round */<br />
    border-bottom-left-radius: 5px;<br />
    border-bottom-right-radius: 5px;<br />
    /* add little shadow */<br />
    box-shadow: 1px 1px 1px #000000;<br />
}</p>
<p>/* Button List area, like Minimize, max, close button */<br />
.btn_list{<br />
    float: right;<br />
    padding: 0px;<br />
}</p>
<p>/* make the easy effect, just fade it with CSS3 */<br />
.btn_list a:link,.btn_list a:visited{<br />
    opacity : 0.6;<br />
}</p>
<p>/* make the button fully shown */<br />
.btn_list a:hover{<br />
    opacity : 1;<br />
}</p>
<p>.btn_list div{<br />
    float: left;<br />
}<br />
/* ============= CSS for header area END ============== */</p>
<p>/* ============= CSS for header NAV. area START ============== */<br />
.upper_navigation{<br />
    margin-top: 7px;<br />
    margin-bottom:8px;<br />
}</p>
<p>.breadcrumb_container{<br />
    /* Breadcrumb navi is in the left side so make it float in the left */<br />
    float: left;<br />
    /* 75:25% => 75=> breadcrumb, 25 Search box */<br />
    width: 75%;<br />
    /* the color is white */<br />
    background: #fff;</p>
<p>    padding: 3px;</p>
<p>    border: solid 1px #666666;</p>
<p>    /* little rounded */<br />
    -moz-border-radius : 3px;<br />
    -webkit-border-radius : 3px;<br />
    border-radius : 3px;</p>
<p>    /* thin shadow */<br />
    -moz-box-shadow : 1px 1px 3px #666;<br />
    -webkit-box-shadow : 1px 1px 3px #666;<br />
    box-shadow : 1px 1px 3px #666;<br />
}</p>
<p>/* breadcrumb root have "folder" image */<br />
.breadcrumb_root{<br />
    float: left;<br />
    background-image: url(../images/gtk-open_20.png);<br />
    background-repeat: no-repeat;<br />
    width: 20px;<br />
    height: 18px;<br />
}</p>
<p>/* breadcrumb listing, becarefull with content width */<br />
.breadcrumb_item{<br />
    float: left;<br />
}</p>
<p>.breadcrumb_item ul{<br />
    margin-top: 0px;<br />
    margin-bottom: 0px;<br />
    padding-left: 0px;<br />
}</p>
<p>.breadcrumb_item ul li{<br />
    display: inline;<br />
    background: url(../images/node.png);<br />
    background-repeat: no-repeat;<br />
    padding-left: 10px;<br />
    width: 100px;<br />
}</p>
<p>.breadcrumb_item a:link,.breadcrumb_item a:visited{<br />
    text-decoration: none;<br />
    color: #000;<br />
    padding: 5px;<br />
}<br />
.breadcrumb_item a:hover{<br />
    background-image: url(../images/breadcrumb_hover.png);<br />
    background-repeat: repeat-x;<br />
    border: solid 1px #999999;<br />
    padding: 4px;<br />
}</p>
<p>/* Search Box CSS Classes */<br />
.search_box{<br />
    /* make height equals the breadcrumb height around 24px */<br />
    height: 24px;<br />
    /*<br />
    set magin from the left around 77% (remmeber the breadcrumb section is 75 in width)<br />
    at last give space 2% from breadcrumb box<br />
    */<br />
    margin-left: 77%;<br />
    /* also set the bg */<br />
    background: #fff;</p>
<p>    /* the rest is same with breadcrumb box */<br />
    border: solid 1px #666666;<br />
    -moz-border-radius : 3px;<br />
    -webkit-border-radius : 3px;</p>
<p>    border-radius : 3px;<br />
    -moz-box-shadow : 1px 1px 3px #666;<br />
    -webkit-box-shadow : 1px 1px 3px #666;<br />
    box-shadow : 1px 1px 3px #666;<br />
}</p>
<p>/*<br />
    search box styling,the width set to 80% if greater than 80% will throw<br />
    the submit button bellow the textbox in Opera(only)<br />
*/<br />
.search_box input[type=text]{<br />
    border: none;<br />
    padding: 0px 0px 0px 5px;<br />
    height: 23px;<br />
    float: left;<br />
    width: 80%;<br />
}<br />
/* Button with background image set it in the right of the box */<br />
.search_box input[type=submit]{<br />
    border: none;<br />
    background-color: transparent;<br />
    background-image: url(../images/search_btn.png);<br />
    background-repeat: no-repeat;<br />
    background-position: center center;<br />
    height: 23px;<br />
    float: right;<br />
}<br />
/* ============= CSS for header NAV. area END ============== */</p>
<p>/* ======= CSS for main content area(content&#038;sidebar) START ======= */<br />
.window_main_container{<br />
    /* Set background to white */<br />
    background-color: #fff;<br />
    /* set space between title area to content box */<br />
    margin-top: 5px;</p>
<p>    /* set some border */<br />
    border-left: 1px solid #585151;<br />
    border-right: 1px solid #585151;<br />
    border-top: 1px solid #585151;<br />
    /* Bottom border is blue */<br />
    border-bottom: 1px solid #CCD9EA;<br />
}</p>
<p>/* ontent upper toolbar */<br />
.content_toolbar{<br />
    height: 16px;<br />
    background-image: url("../images/bg_toolbar.png");<br />
    background-repeat: repeat-x;<br />
    padding: 8px 5px 5px 5px;<br />
    font-size: 11px;<br />
    border-bottom: solid 1px #CCD9EA;<br />
}</p>
<p>/* sidebar classes */<br />
.window_side_bar{<br />
    float: left;<br />
    width: 200px;<br />
    padding: 5px;<br />
    font-size: 0.9em;<br />
}</p>
<p>.window_side_bar a:link, .window_side_bar a:visited{<br />
    color: #151C55;<br />
    text-decoration: none;<br />
}</p>
<p>.window_side_bar a:hover{<br />
    text-decoration: underline;<br />
    color: #0066CC;<br />
}</p>
<p>.window_side_bar ul{<br />
    list-style: none;<br />
    color: #151C55;<br />
    font-weight: bolder;<br />
    padding-left: 10px;<br />
    padding-bottom: 10px;<br />
}</p>
<p>.window_side_bar ul li{<br />
    padding-bottom: 5px;<br />
}</p>
<p>.window_side_bar ul li ul{<br />
    list-style: none;<br />
    color: #151C55;<br />
    padding-left: 10px;<br />
    padding-top: 3px;<br />
}</p>
<p>.window_side_bar ul li ul li{<br />
    padding-left: 10px;<br />
    font-weight: normal;<br />
    font-size: 11px;<br />
    padding-bottom: 0px;<br />
}</p>
<p>/* This is class for main content window, all content will go here */<br />
.window_content{<br />
    background-image: url("../images/bg_sidebar.jpg");<br />
    background-repeat: repeat-y;<br />
    /* set min height for main container : D */<br />
    min-height:  400px;<br />
    padding: 0px 0px 0px 210px;<br />
    top: 0px;<br />
    left: 0px;<br />
}</p>
<p>.content_wrapper{<br />
    padding: 2px 10px 5px 10px;<br />
}</p>
<p>/* ======= CSS for main content area(content&#038;sidebar) END ======= */</p>
<p>.window_footer{</p>
<p>    /* Footer window background color */<br />
    background-color: #F1F5FB;<br />
    /* set height window footer */<br />
    height: 65px;<br />
    /* footer upper border */</p>
<p>    border-left: 1px solid #585151;<br />
    border-right: 1px solid #585151;<br />
}</p>
<p>/* content styling */<br />
h2 {<br />
    color: #4776BD;<br />
    font-weight: normal;<br />
    font-size: medium;<br />
}<br />
.content_desc{<br />
    padding-bottom: 20px;<br />
    font-style: italic;<br />
}<br />
.window_content{<br />
    font-size: 11px;<br />
}</p>
<p>fieldset{<br />
    border: 1px solid #CCCCCC;<br />
}</p>
<p>legend{<br />
    color: #003399;<br />
    font-size: 1.1em;<br />
}</p>
<p>/* input object classes */<br />
.window_content input[type=text],<br />
.window_content input[type=password],<br />
.window_content input[type=date],<br />
.window_content input[type=file],<br />
.window_content select{<br />
    font-size: small;<br />
    width: 250px;<br />
    -moz-border-radius:3px;<br />
    -webkit-border-radius:3px;<br />
    border-radius:3px;<br />
    border: solid 1px #7DA2CE;<br />
    padding: 3px;<br />
}</p>
<p>textarea{<br />
    font-family: Arial, Helvetica, sans-serif;<br />
    font-size: small;<br />
    width: 250px;<br />
    height: 60px;<br />
    resize: true;<br />
    -moz-border-radius:3px;<br />
    -webkit-border-radius:3px;<br />
    border-radius:3px;<br />
    border: solid 1px #7DA2CE;<br />
    padding: 3px;<br />
}<br />
[/css]</p>
</div>
</blockquote>
<p>Okey... now refresh your browser... and the final result will be like this image:<br />
<div id="attachment_4250" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/ilus1.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/ilus1-450x345.jpg" alt="Tutorial result" title="Tutorial result" width="450" height="345" class="size-medium wp-image-4250" /></a><p class="wp-caption-text">Tutorial result</p></div></p>
<blockquote>
<h3>Known Issue...</h3>
<p>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.
</p></blockquote>
<p>Sekian tutorial kali ini, Thank you <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /></p>
<div class="download_box">
<a href='http://neo.rizkhey.net/wp-content/uploads/2012/01/design.zip'>Download Source Code</a></div>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=4243&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2012/01/4243-clone-windows-7-window-box-with-html-css3/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>3 My favorite CSS3</title>
		<link>http://neo.rizkhey.net/2012/01/4195-3-omy-favorite-css3</link>
		<comments>http://neo.rizkhey.net/2012/01/4195-3-omy-favorite-css3#comments</comments>
		<pubDate>Sat, 21 Jan 2012 12:10:32 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css3]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=4195</guid>
		<description><![CDATA[Saya masih ingat sekitar tahun 2007-an dimana website suka menggunakan round-corner, shadow effect dengan menggunakan image. Kebutuhan memang terpenuhi dengan cara itu, hanya saja tidak sesederhana menuliskan 1 line CSS dan semua itu jadi. Kini, dengan CSS3 semua itu jadi lebih mudah. Saya mencoba membahas beberapa CSS3 favorit saya  ]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Saya masih ingat benar tahun 2007-2008 banyak website yang menggunakan <em>rounded-corner</em>, saat itu CSS3 mungkin belom terdengar. para desainer menggunakan pendekatan rounded-corner image untuk menutupi sudut-sudut yang tidak melengkung.</p>
<blockquote style="float: right; font-size: 1.3em; width: 300px; padding: 5px;"><p>It&#8217;s not as easy as writing 1 line of CSS, but now we can</p></blockquote>
<p style="text-align: justify;">Banyak yang sering terbatas dengan ukuran(<em>width</em>) 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.</p>
<p><span id="more-4195"></span></p>
<blockquote style="float: left; font-size: 1.3em; width: 250px;margin-right:10px;"><p>Internet explorer? ah you know who the villain isn&#8217;t <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /></p></blockquote>
<p style="text-align: justify;">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 &amp; Chrome), dan Opera sudah dapat menjalakan fasilitas ini dengan baik.</p>
<p style="text-align: justify;">Mozilla firefox (untuk yang mempunyai versi &lt; 4), didepan line CSS ditambahkan prefix &#8220;<em>-moz-</em>&#8220;, sementara untuk Chrome dan Safari untuk menanggulangi versi tua, dapat menggunakan prefix &#8220;<em>-webkit-</em>&#8220;.</p>
<p style="text-align: justify;">Oke cukup penjelasannya, saya akan coba bahas beberapa modul CSS3 yang saya sukai untuk project keseharian saya:</p>
<h3 style="text-align: justify;">1. border-radius</h3>
<p style="text-align: justify;">Border radius adalah yang saya bahas di atas, berfungsi untuk membuat <em>rounded-corner</em>. Syntaxnya sangat sederhana</p>
<p>[css]<br />
/* for Mozila */<br />
-moz-border-radius: [num]px;<br />
/* for Webkit */<br />
-webkit-border-radius: [num]px;</p>
<p>border-radius: [num]px;<br />
[/css]</p>
<div style="border-radius: 5px; height: 50px; border: solid 1px #000;width:300px;padding:5px;">User modern Firefox, Webkit browser, Opera and IE9 will see the corner rounded by 5 pixels</div>
<p>Bagaimana apabila yang diinginkan sudut tertentu saja? There is another way <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<p>[css]<br />
/* bottom-left radius */<br />
-moz-border-radius-bottomleft: 5px;<br />
border-bottom-left-radius: 5px;<br />
/* bottom-right radius */<br />
-moz-border-radius-bottomright : 5px;<br />
border-bottom-right-radius: 5px;<br />
/* top-left radius */<br />
-moz-border-radius-topleft : 5px;<br />
border-top-left-radius: 5px;</p>
<p>/* top-right radius */<br />
-moz-border-radius-topright: 5px;<br />
border-top-right-radius: 5px;<br />
[/css]</p>
<div style="padding:5px;border: solid 1px #000; width:300px; -moz-border-radius-bottomright: 20px;border-bottom-right-radius: 20px;">
not all corner rounded here
</div>
<h3 style="padding-top:30px;">2. box-shadow</h3>
<p style="text-align: justify;">Sama dengan rounded border, syntax CSS3 ini akan membuat shadow disekeliling box</p>
<p>[css]<br />
/* for mozilla */<br />
-moz-box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]<br />
/* for webkit */<br />
-webkit-box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]</p>
<p>box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]<br />
[/css]</p>
<p>Example</p>
<div style="border-radius: 5px; width: 400px; border: solid 1px #000;padding:5px;box-shadow:5px 5px 5px #666666;">User modern Firefox, Webkit browser, Opera and IE9 will see the corner rounded by 5 pixels with some shadow</div>
<h3 style="padding-top:30px;">3. Opacity</h3>
<p>Agak jarang dipake tapi lumayan berguna dan mempermudah pekerjaan, berfungsi mengatur opacity sebuah element.<br />
[css]opacity:[0-1];[/css]<br />
Derajat opacity antara 0 dan 1. Contoh:</p>
<p>[html highlight_lines="8"]</p>
<style>
.container_msg{
	background:url(wp-content/uploads/2012/01/css3-150x150.jpg);
	width:300px;
}
.the_box{
	background-color:#000;
	opacity:0.5;
	width:300px;
	padding:5px;
	border: solid 1px #000;
	color:#fff
}
</style>
<div class="container_msg">
<div class="the_box">This is should be&#8230;</div>
</div>
<p>[/html]</p>
<div style="width:300px;background:url(http://neo.rizkhey.net/wp-content/uploads/2012/01/css3-150x150.jpg)">
<div style="background-color:#000;opacity:0.5;width:300px;padding:5px;border: solid 1px #000;color:#fff">This is should be&#8230;</div>
</div>
<p style="text-align:justify;">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</p>
<p style="text-align:justify;">Untuk mempelajari lebih jauh CSS3, Anda dapat belajar di <a href="http://www.css3.info/preview/" title="css3.info" target="_blank">CSS3.info</a>, saya juga belajar dari web tersebut <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' />.</p>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=4195&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2012/01/4195-3-omy-favorite-css3/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fixing Select Limit Issue for Microsoft SQL Server Driver in Codeigniter</title>
		<link>http://neo.rizkhey.net/2012/01/4136-fixing-select-limit-issue-for-microsoft-sql-server-driver-in-codeigniter</link>
		<comments>http://neo.rizkhey.net/2012/01/4136-fixing-select-limit-issue-for-microsoft-sql-server-driver-in-codeigniter#comments</comments>
		<pubDate>Fri, 13 Jan 2012 10:33:34 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[Guide]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[CodeIgniter]]></category>
		<category><![CDATA[Microsoft SQL Server]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[sqlsrv]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=4136</guid>
		<description><![CDATA[Driver untuk mengakses Microsoft SQL server telah disediakan oleh framework CodeIgniter semenjak saya mencoba framework ini pertama kali (versi 1.6 kalau tak salah) sekitar 1-2 tahun lalu. Walau begitu saat itu untuk fungsi emulasi LIMIT yang dibutuhkan untuk pagination tidak berjalan seperti seharusnya. Bahkan sampai sekarang, versi 2.1.0 tetap demikian. Setelah perjalanan lama ini, akhirnya saya menemukan modifikasi cukup ampuh agar pagination dengan database Microsoft SQL server dapat berjalan baik di CodeIgniter.]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Sekitar tahun 2008 saya mulai melihat framework-framework yang umum dan disebar di Internet saat itu. Salah satunya yang cukup terkenal saat itu(hingga sekarang) adalah CodeIgniter. Pada saat itu saya membutuhkan sebuah framework untuk membuat proyek yang menggunakan Microsoft SQL Server(<em>As requested from my client</em>). Karena dalam PHP saya kurang perpengalaman menggunakan MS SQL sebagai DBMS-nya, akhirnya saya mencoba CI untuk calon framework yang saya akan gunakan.</p>
<p><span id="more-4136"></span></p>
<p style="text-align: justify;">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 : <a title="Emulate Microsoft SQL Server Select Limit(2005 and above)" href="http://neo.rizkhey.net/2012/01/4100-emulate-microsoft-sql-server-select-limit2005-and-above">Emulate Microsoft SQL Server Select Limit(2005 and above)</a>), sayangnya apabila ADODB masih memilah lagi resultnya supaya yang dikembalikan seperti yang diminta user, sedangkan CI mengembalikannya mentah-mentah.</p>
<blockquote><p style="text-align: justify;">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</p>
</blockquote>
<p style="text-align: justify;">Untuk lebih memahami, cobalah membuat sebuah table dengan nama &#8220;strong>tutorial_limit</strong>&#8221; di database MSSQL Anda dengan meng-execute SQL berikut ini.<br />
[sql]<br />
CREATE TABLE [dbo].[tutorial_limit](<br />
	[id] [int] IDENTITY(1,1) NOT NULL,<br />
	[name] [varchar](200) NOT NULL,<br />
	[some_random] [varchar](255) NOT NULL,<br />
 CONSTRAINT [PK_tutorial_limit] PRIMARY KEY CLUSTERED<br />
(<br />
	[id] ASC<br />
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]<br />
) ON [PRIMARY]<br />
[/sql]</p>
<p style="text-align: justify;">Lalu set koneksi database Anda ke Database MS SQL Anda menggunakan driver mssql/sqlsrv. Sebagai contoh, config yang saya gunakan adalah sbb:</p>
<p>[php num="51"]<br />
$db['default']['hostname'] = &#8216;.&#8217;;<br />
$db['default']['username'] = &#8216;sa&#8217;;<br />
$db['default']['password'] = &#8216;sa&#8217;;<br />
$db['default']['database'] = &#8216;tutorial&#8217;;<br />
$db['default']['dbdriver'] = &#8216;sqlsrv&#8217;;<br />
$db['default']['dbprefix'] = &#8221;;<br />
$db['default']['pconnect'] = TRUE;<br />
$db['default']['db_debug'] = TRUE;<br />
$db['default']['cache_on'] = FALSE;<br />
$db['default']['cachedir'] = &#8221;;<br />
$db['default']['char_set'] = &#8216;utf8&#8242;;<br />
$db['default']['dbcollat'] = &#8216;utf8_general_ci&#8217;;<br />
$db['default']['swap_pre'] = &#8221;;<br />
$db['default']['autoinit'] = TRUE;<br />
$db['default']['stricton'] = FALSE;<br />
[/php]</p>
<p style="text-align: justify;">Saya menggunakan extension <a title="SQLSRV, native Microsoft SQL Server Extension for PHP" href="http://neo.rizkhey.net/2011/04/3913-sqlsrv-native-microsoft-sql-server-extension-for-php">Ms. SQL Server Native(sqlsrv)</a> 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 <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /> )</p>
<p>Kemudian buatlah sebuah file controller dengan nama &#8220;<strong>paging_example.php</strong>&#8221; isilah dengan code berikut ini:<br />
[php]<br />
<?php<br />
/**<br />
* @property CI_Form_validation $form_validation<br />
* @property CI_Input $input<br />
* @property CI_DB_active_record $db<br />
* @property CI_DB_forge $dbforge<br />
* @property CI_Session $session<br />
* @property CI_Loader $load<br />
* @property CI_Upload $upload<br />
*/</p>
<p>class Paging_example extends CI_Controller<br />
{</p>
<p>    function  __construct() {<br />
        parent::__construct();<br />
        $this->load->database();<br />
        $this->load->library(array(&#8216;table&#8217;,'pagination&#8217;));<br />
    }</p>
<p>    function insert_dummy()<br />
    {<br />
            for ( $i = 0 ; $i < 300 ; $i++ )<br />
            {<br />
                    $data_insert = array(<br />
                            'name' => &#8216;this is row &#8216; . ($i+1),<br />
                            &#8216;some_random&#8217; => sha1($i)<br />
                    );</p>
<p>                    $this->db->insert(&#8216;tutorial_limit&#8217;,$data_insert);<br />
            }<br />
    }</p>
<p>    function some_paging()<br />
    {<br />
        /* set base config of pagination */<br />
        $config['base_url'] = base_url() . &#8216;paging_example/some_paging&#8217;;<br />
        $config['total_rows'] = $this->db->count_all_results(&#8216;tutorial_limit&#8217;);<br />
        $config['per_page'] = 10;</p>
<p>        $this->pagination->initialize($config);</p>
<p>        $data['records'] = $this->db->get(&#8216;tutorial_limit&#8217;, $config['per_page'], $this->uri->segment(3));<br />
        $data['link_pagination'] = $this->pagination->create_links();<br />
        $this->load->view(&#8216;pagination&#8217;,$data);<br />
    }<br />
}</p>
<p>?><br />
[/php]</p>
<p>Kita sekalian buat untuk view-nya, kita buat sebuah file dengan nama &#8220;<strong>pagination.php</strong>&#8221; isilah dengan code berikut ini:</p>
<p>[html]<br />
<html><br />
    <head></p>
<p>    </head><br />
    <body><br />
        <?php if ( $records->num_rows() > 0 ){ ?><br />
            <?php echo $this->table->generate($records); ?><br />
        <?php } ?><br />
        <?php echo $link_pagination; ?><br />
    </body><br />
</html><br />
[/html]</p>
<p style="text-align: justify;">Perhatikan kode controller di atas, kita akan membuat dua page, yaitu &#8220;insert_dummy&#8221; dan juga &#8220;some_paging&#8221;. 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.</p>
<p style="text-align: justify;">Execute-lah page &#8220;insert_dummy&#8221; tersebut(arahkan browser ke <strong>http://[your_host]/[path_to_ci_directory]/index.php/paging_example/insert_dummy</strong>), sehingga apabila anda lihat, table yang Anda buat sudah berisi 300 row.</p>
<div id="attachment_4142" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/sql_dummy_data.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/sql_dummy_data-450x428.jpg" alt="Dummy Data sebanyak 300 row" title="Dummy Data sebanyak 300 row" width="450" height="428" class="size-medium wp-image-4142" /></a><p class="wp-caption-text">Dummy Data sebanyak 300 row</p></div>
<p style="text-align: justify;">Kemudian cobalah jalankan page &#8220;some_paging&#8221; (arahkan browser ke <strong>http://[your_host]/[path_to_ci_directory]/index.php/paging_example/some_paging</strong>) </p>
<div id="attachment_4144" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/paging_1st_page.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/paging_1st_page-450x258.jpg" alt="1st Page of Pagination" title="1st Page of Pagination" width="450" height="258" class="size-medium wp-image-4144" /></a><p class="wp-caption-text">Saat halaman &quot;some_paging&quot; dijalankan akan muncul seperti ini kurang lebih</p></div>
<p style="text-align: justify;">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:</p>
<p>[sql]SELECT TOP 10 * FROM tutorial_limit[/sql]</p>
<p style="text-align: justify;">Ok&#8230; mari kita klik halaman kedua  <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> </p>
<div id="attachment_4146" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/2nd_page.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/2nd_page-450x427.jpg" alt="2nd page" title="2nd page" width="450" height="427" class="size-medium wp-image-4146" /></a><p class="wp-caption-text">Kekacuan muncul mulai page kedua dimana hasil yang tidampilkan sebanyak 20 row padahal seharusnya yang di kembalikan hanya 10 row data saja</p></div>
<p style="text-align: justify;">SQL yang kita lihat mungkin akan seperti ini:</p>
<p>[sql]SELECT TOP 20 * FROM tutorial_limit[/sql]</p>
<p style="text-align: justify;">Lanjuut&#8230;. ke 3rd page <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /> </p>
<div id="attachment_4145" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/3rd_page.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/3rd_page-450x427.jpg" alt="3rd page" title="3rd page" width="450" height="427" class="size-medium wp-image-4145" /></a><p class="wp-caption-text">Kekacuan terus berlanjut, untuk halaman ketiga mengembalikan 30 row <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p></div>
<p style="text-align: justify;">Lanjutnya sudah pasti akan menjadi seperti ini:</p>
<p>[sql]SELECT TOP 30 * FROM tutorial_limit[/sql]</p>
<p style="text-align: justify;">Dengan kata lain semakin ke belakang jumlah record yang ditampilkan akan berjumlah </p>
<div class="codecolorer-container text vibrant" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">[jumlah record per page] * [current page]</div></div>
<h4>Penyelesaian</h4>
<p style="text-align: justify;">Untuk menyelesaikan masalah ini, kita bisa membuka file di dalam folder </p>
<p>Untuk yang menggunakan <strong><em>mssql</em></strong> extension</p>
<div class="codecolorer-container text vibrant" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">system/database/drivers/mssql/mmsql_driver.php</div></div>
<p>Untuk yang menggunakan <strong><em>sqlsrv</em></strong> extension</p>
<div class="codecolorer-container text vibrant" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">system/database/drivers/sqlsrv/sqlsrv_driver.php</div></div>
<p style="text-align: justify;">Carilah method &#8220;<em>_limit</em>&#8221; di file yang Anda buka(di kedua driver baik sqlsrv atau mssql berisi kode yang sama persis):</p>
<p>[php]<br />
/**<br />
	 * Limit string<br />
	 *<br />
	 * Generates a platform-specific LIMIT clause<br />
	 *<br />
	 * @access	public<br />
	 * @param	string	the sql query string<br />
	 * @param	integer	the number of rows to limit the query to<br />
	 * @param	integer	the offset value<br />
	 * @return	string<br />
	 */<br />
	function _limit($sql, $limit, $offset)<br />
	{<br />
		$i = $limit + $offset;</p>
<p>		return preg_replace(&#8216;/(^\SELECT (DISTINCT)?)/i&#8217;,'\\1 TOP &#8216;.$i.&#8217; &#8216;, $sql);<br />
	}<br />
[/php]</p>
<p style="text-align: justify;">Saya pernah membahas sebelumnya bagaimana melimit hasil query Microsoft SQL Server di level database dan bukan di level PHP (<a href="http://neo.rizkhey.net/2012/01/4100-emulate-microsoft-sql-server-select-limit2005-and-above" title="Emulate Microsoft SQL Server Select Limit(2005 and above)">disini</a>), dalam kasus ini saya akan menggunakan kode serupa agar fungsi limit untuk driver Microsoft SQL server di CI ini(baik menggunakan <em>mssql </em>ataupun <em>sqlsrv</em>) dapat berjalan seperti seharusnya. Caranya replace seluruh isi method &#8220;<em>__limit</em>&#8221; menjadi seperti snippet berikut ini:</p>
<p>[php]<br />
    /**<br />
	 * Limit string<br />
	 *<br />
	 * Generates a platform-specific LIMIT clause<br />
	 *<br />
	 * @access	public<br />
	 * @param	string	the sql query string<br />
	 * @param	integer	the number of rows to limit the query to<br />
	 * @param	integer	the offset value<br />
	 * @return	string<br />
	 */<br />
	function _limit($sql, $limit, $offset)<br />
	{</p>
<p>		$sql = str_replace(&#8220;\n&#8221;, &#8221; &#8220;, $sql);</p>
<p>		$orderby = stristr($sql, &#8216;ORDER BY&#8217;);</p>
<p>		if (!$orderby)<br />
		{<br />
			$over = &#8216;ORDER BY (SELECT 0)&#8217;;<br />
		}<br />
		else<br />
		{<br />
			$over = preg_replace(&#8216;/\&#8221;[^,]*\&#8221;.\&#8221;([^,]*)\&#8221;/i&#8217;, &#8216;&#8221;inner_tbl&#8221;.&#8221;$1&#8243;&#8216;, $orderby);<br />
		}</p>
<p>		// Remove ORDER BY clause from $sql<br />
		$sql = preg_replace(&#8216;/\s+ORDER BY(.*)/&#8217;, &#8221;, $sql);</p>
<p>		// Add ORDER BY clause as an argument for ROW_NUMBER()<br />
		$sql = &#8220;SELECT ROW_NUMBER() OVER ($over) AS \&#8221;ZEND_DB_ROWNUM\&#8221;, * FROM ($sql) AS inner_tbl&#8221;;</p>
<p>		$start = $offset + 1;<br />
		$end = $offset + $limit;</p>
<p>		$sql = &#8220;WITH outer_tbl AS ($sql) SELECT * FROM outer_tbl WHERE ZEND_DB_ROWNUM BETWEEN $start AND $end&#8221;;</p>
<p>		return $sql;<br />
	}<br />
[/php] </p>
<blockquote><p style="text-align: justify;">Setelah diubah save file driver tersebut. Apabila Anda menggunakan extension &#8220;<em>sqlsrv</em>&#8221; 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. </p>
<p style="text-align: justify;">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-<em>return</em> jumlah row(<em><strong>sqlsrv_num_rows</strong></em>) akan mereturn nilai &#8220;-1&#8243; dan bukan jumlah row yang dikembalikan. Sehingga otomatis tidak mengembalikan apapun. Untuk mengatasinya, Anda bisa mengedit file &#8220;<strong>system\database\drivers\sqlsrv\sqlsrv_result.php</strong>&#8221; carilah method &#8220;<strong>num_rows</strong>&#8220;. Ubah kode dari:</p>
<p>[php]<br />
    function num_rows()<br />
	{<br />
		return @sqlsrv_num_rows($this->result_id);<br />
	}<br />
[/php]<br />
menjadi:<br />
[php]<br />
    function num_rows()<br />
	{<br />
		$num_row = @sqlsrv_num_rows($this->result_id);<br />
		if ( $num_row == -1 ){ return 1; }<br />
                else { return $num_row; }</p>
<p>	}<br />
[/php]</p>
<p style="text-align: justify;">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:</p>
<p>[php]<br />
if ( $query->num_rows() > 0 ){<br />
 //do something like printing row data/etc<br />
}<br />
[/php]</p>
<p style="text-align: justify;">Tetapi karena hasil dari method &#8220;num_rows()&#8221; 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 <em>loop </em>untuk menulis hasil row akan berjalan.</p>
<p style="text-align: justify;">Hal ini akan selalu terjadi apabila Anda menggunakan perintah <strong>limit</strong> di Active record class. Apabila Anda ingin mengetahui jumlah row yang dihasilkan secara pasti, saya biasa mengakali dengan perintah dasar &#8220;<strong>count</strong>&#8221; dalam PHP.</p>
<p>[php]<br />
$real_num_row = count($query->result_array());<br />
[/php]
</p></blockquote>
<p>Okay.. let&#8217;s roll&#8230; kita lihat hasilnya <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<div id="attachment_4162" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/1st_fix.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/1st_fix-450x295.jpg" alt="1st page FIX" title="1st page FIX" width="450" height="295" class="size-medium wp-image-4162" /></a><p class="wp-caption-text">1st page FIX (yay... tentu saja, sejak semula masalah tidak timbul di halaman pertama <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> )</p></div>
<p>Lanjut ke halaman kedua yang mana sebelum kita modifikasi jumlah row yang muncul berjumlah 10&#8230; dan hasilnya&#8230;.</p>
<div id="attachment_4163" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/2nd_fix.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/2nd_fix-450x295.jpg" alt="2nd Page Fix" title="2nd Page Fix" width="450" height="295" class="size-medium wp-image-4163" /></a><p class="wp-caption-text">Yeah, Halaman kedua masalah selesai... tidak ada lagi 20 row yang muncul</p></div>
<p>Ok fix&#8230; mari kita langsung lompat ke halaman yang agak jauh, dan hasilnya&#8230;.</p>
<div id="attachment_4161" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/fix.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/fix-450x304.jpg" alt="Page 28, FIX!!" title="Page 28, FIX!!" width="450" height="304" class="size-medium wp-image-4161" /></a><p class="wp-caption-text">Yes, we have no problem now <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p></div>
<p>Apabila Anda perhatikan, dalam setiap list akan menambahkan satu kolom bernama &#8216;ZEND_DB_ROWNUM&#8217;. Anda dapat sembunyikan kolom tersebut secara manual.</p>
<p>Thankyou <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /> </p>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=4136&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2012/01/4136-fixing-select-limit-issue-for-microsoft-sql-server-driver-in-codeigniter/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SQLSRV db Driver bug on Codeigniter 2.x.x</title>
		<link>http://neo.rizkhey.net/2012/01/4121-sqlsrv-db-driver-bug-on-codeigniter-2-x-x</link>
		<comments>http://neo.rizkhey.net/2012/01/4121-sqlsrv-db-driver-bug-on-codeigniter-2-x-x#comments</comments>
		<pubDate>Thu, 12 Jan 2012 05:10:10 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[Framework]]></category>
		<category><![CDATA[Guide]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=4121</guid>
		<description><![CDATA[Setelah sekian lama akhirnya di Codeigniter 2.x.x menyediakan sebuah driver untuk SQL Server menggunakan SQLSRV. Sesuatu yang menarik dan bagus karena mulai di PHP 5.3 fungsi library "mssql" sudah tidak disertakan lagi.. Sayang... di awal setting config saja sampai di Code igniter 2.10 langsung error... Dalam post ini akan menjelaskan bagaimana cara memperbaiki driver sqlsrv agar bekerja dengan baik.]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Beberapa dari Anda mungkin bertanya, kenapa saya menggunakan Ms. SQL Server untuk membuat program dengan PHP. Agak aneh dan tidak cocok, beberapa dari Anda mungkin berpikiran bahwa Ms SQL server adalah DBMS yang agak ngeselin(karena hanya jalan di Microsoft platform). Well inilah alasannya:</p>
<blockquote>
<p style="text-align: justify;">Kantor saya adalah salah satu dari banyak yang dulunya banyak menggunakan aplikasi <em>.net</em> yang cukup &#8216;berumur&#8217; sehingga masih banyak database SQL Server berceceran. Tetapi pada dasarnya sebuah perusahaan yang terus berkembang, kebutuhan terus bertambah dan selalu ada istilah &#8220;<em>tambal sulam</em>&#8221; sampai pada suatu titik akhirnya diputuskan membuat aplikasi baru dan kadang mereka masih ingin mempertahankan database lama(terikat lisensi yang sudah dibeli mungkin <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> ). Sehingga mau tidak mau walupun saya menggunakan PHP untuk membuat program mereka, saya menggunakan SQL server sebagai databasenya.</p>
</blockquote>
<p><span id="more-4121"></span></p>
<p style="text-align: justify;">Saat saya mengupgrade development <em>environment</em> 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 <a title="SQLSRV, native Microsoft SQL Server Extension for PHP" href="http://neo.rizkhey.net/2011/04/3913-sqlsrv-native-microsoft-sql-server-extension-for-php">native SQL Server driver for PHP</a>(<em>sqlsrv</em>). 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.</p>
<div id="attachment_4122" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/error.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/error-450x329.jpg" alt="CI error, cannot connect to SQL server database melalui driver SQLSRV walau config sudah benar" title="CI error, cannot connect to SQL server database melalui driver SQLSRV walau config sudah benar" width="450" height="329" class="size-medium wp-image-4122" /></a><p class="wp-caption-text">CI error, cannot connect to SQL server database melalui driver SQLSRV walau config sudah benar</p></div>
<p>Config yang sata gunakan kurang lebih seperti ini(application/config/database.php):</p>
<p>[php highlight_lines="60" num="51"]<br />
$active_group = &#8216;default&#8217;;<br />
$active_record = TRUE;</p>
<p>$db['default']['hostname'] = &#8216;.&#8217;;<br />
$db['default']['username'] = &#8216;sa&#8217;;<br />
$db['default']['password'] = &#8216;sa&#8217;;<br />
$db['default']['database'] = &#8216;tutorial&#8217;;<br />
$db['default']['dbdriver'] = &#8216;sqlsrv&#8217;;<br />
$db['default']['dbprefix'] = &#8221;;<br />
$db['default']['pconnect'] = TRUE;<br />
$db['default']['db_debug'] = TRUE;<br />
$db['default']['cache_on'] = FALSE;<br />
$db['default']['cachedir'] = &#8221;;<br />
$db['default']['char_set'] = &#8216;utf8&#8242;;<br />
$db['default']['dbcollat'] = &#8216;utf8_general_ci&#8217;;<br />
$db['default']['swap_pre'] = &#8221;;<br />
$db['default']['autoinit'] = TRUE;<br />
$db['default']['stricton'] = FALSE;<br />
[/php]</p>
<p style="text-align: justify;">Lalu pada config autoload(application/config/autoload.php), saya melakukan auto loading untuk library database</p>
<p>[php num="55"]$autoload['libraries'] = array(&#8216;database&#8217;);[/php]</p>
<p>Dan hasilnya&#8230; adalah gambar di atas saat meload halaman welcome default CI <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<p style="text-align: justify;">So&#8230; dimana saya salah? ataukah Bug?</p>
<p style="text-align: justify;">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 &#8220;<strong>sqlsrv_driver.php</strong>&#8220;(<em>system\database\drivers\sqlsrv\sqlsrv_driver.php</em>).</p>
<p style="text-align: justify;">Kesalahan terjadi sangat simple, pada sekitar line 89 pada method &#8216;db_pcconnect&#8217;</p>
<p>[php num="81"]<br />
     /**<br />
	 * Persistent database connection<br />
	 *<br />
	 * @access	private called by the base class<br />
	 * @return	resource<br />
	 */<br />
	function db_pconnect()<br />
	{<br />
		$this->db_connect(TRUE);<br />
	}<br />
[/php]</p>
<p>Perhatikan keterangan dokumentasi dari method itu pada tag <em><strong>@return</strong></em> 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 &#8220;return&#8221; di awal line 89, sehingga menjadi:</p>
<p>[php num="81"]<br />
    /**<br />
	 * Persistent database connection<br />
	 *<br />
	 * @access	private called by the base class<br />
	 * @return	resource<br />
	 */<br />
	function db_pconnect()<br />
	{<br />
		return $this->db_connect(TRUE);<br />
	}<br />
[/php]</p>
<p>Simpan dan coba refresh halaman, seharusnya error sudah tidak nampak lagi.</p>
<p>Langkah ini sebenarnya tidak perlu apabila Anda mengeset option &#8220;pcconnect&#8221; ke FALSE(lihat line 60 pada config code di atas).<br />
[php num="60"]$db['default']['pconnect'] = FALSE;[/php]</p>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=4121&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2012/01/4121-sqlsrv-db-driver-bug-on-codeigniter-2-x-x/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Emulate Microsoft SQL Server Select Limit(2005 and above)</title>
		<link>http://neo.rizkhey.net/2012/01/4100-emulate-microsoft-sql-server-select-limit2005-and-above</link>
		<comments>http://neo.rizkhey.net/2012/01/4100-emulate-microsoft-sql-server-select-limit2005-and-above#comments</comments>
		<pubDate>Thu, 12 Jan 2012 03:17:10 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[Guide]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[limit]]></category>
		<category><![CDATA[Microsoft SQL Server]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=4100</guid>
		<description><![CDATA[SQL server adalah salah satu DBMS yang cukup favorit(Selain MySQL yang free atau Oracle yang memang sudah jadi pentolnya DBMS). Beberapa kali saya menggunakan SQL server sebagai DBMS project saya. Karena saya menggunakan PHP sebagai main programing language, agak sulit awalnya saat saya mencari cara untuk melakukan pagination dengan menggunakan SQL server.
Latar belakang kenapa saya [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">SQL server adalah salah satu DBMS yang cukup favorit(Selain MySQL yang free atau Oracle yang memang sudah jadi pentolnya DBMS). Beberapa kali saya menggunakan SQL server sebagai DBMS project saya. Karena saya menggunakan PHP sebagai main programing language, agak sulit awalnya saat saya mencari cara untuk melakukan pagination dengan menggunakan SQL server.</p>
<p style="text-align: justify;">Latar belakang kenapa saya menulis post ini adalah:</p>
<p><span id="more-4100"></span></p>
<blockquote style="text-align: justify;"><p>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.</p>
<p>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.</p>
<p>Setelah beberapa lama akhirnya saya menggunakan Database Abstraction Layer dengan menggunakan <a title="ADODB for PHP" href="http://adodb.sourceforge.net/" target="_blank">ADODB</a> 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?</p>
<p>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 </p>
<p>[sql]SELECT TOP 40 * FROM some_table[/sql]</p>
<p>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:<br />
[sql]SELECT TOP 80 * FROM some_table[/sql]<br />
Lalu hasilnya akan me-<em>return</em> 80 row data, kemudian diseleksi lagi untuk row 0-39 akan diabaikan, dan row 40-79 akan di return. </p>
<p>Okay&#8230; itu masih <em>acceptable  </em>karena isinya hanya under 100 row&#8230; bahkan 1000 row masih bisa dibilang tidak begitu pengaruh&#8230; 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.</p>
</blockquote>
<p><!--more--></p>
<p style="text-align: justify;">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 <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /> . Setelah kemarin saya iseng memulai belajar Zend Framework mata saya tertuju di salah satu library <a title="Zend Framework" href="http://framework.zend.com/" target="_blank">Zend Framework</a> yaitu &#8220;db&#8221; yang di dalamnya sudah terdapat adapter untuk extensi &#8220;<em><a href="http://neo.rizkhey.net/2011/04/3913-sqlsrv-native-microsoft-sql-server-extension-for-php" title="SQLSRV, native Microsoft SQL Server Extension for PHP">sqlsrv</a></em>&#8221; Dan setelah dibaca sedikit demi sedikit saya mengambil satu bagian yang menarik yang tugasnya untuk melakukan LIMIT(Little modified <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /> ).</p>
<p>[php]<br />
/**<br />
* Adds an adapter-specific LIMIT clause to the SELECT statement.<br />
*<br />
* @param string $sql<br />
* @param integer $count<br />
* @param integer $offset OPTIONAL<br />
* @return string<br />
* @throws Zend_Db_Adapter_Sqlsrv_Exception<br />
*/<br />
function limit($sql, $count, $offset = 0)<br />
{<br />
	$orderby = stristr($sql, &#8216;ORDER BY&#8217;);</p>
<p>	if (!$orderby) {<br />
		$over = &#8216;ORDER BY (SELECT 0)&#8217;;<br />
	} else {<br />
		$over = preg_replace(&#8216;/\&#8221;[^,]*\&#8221;.\&#8221;([^,]*)\&#8221;/i&#8217;, &#8216;&#8221;inner_tbl&#8221;.&#8221;$1&#8243;&#8216;, $orderby);<br />
	}</p>
<p>	// Remove ORDER BY clause from $sql<br />
	$sql = preg_replace(&#8216;/\s+ORDER BY(.*)/&#8217;, &#8221;, $sql);</p>
<p>	// Add ORDER BY clause as an argument for ROW_NUMBER()<br />
	$sql = &#8220;SELECT ROW_NUMBER() OVER ($over) AS \&#8221;ZEND_DB_ROWNUM\&#8221;, * FROM ($sql) AS inner_tbl&#8221;;</p>
<p>	$start = $offset + 1;<br />
	$end = $offset + $count;</p>
<p>	$sql = &#8220;WITH outer_tbl AS ($sql) SELECT * FROM outer_tbl WHERE CAST(ZEND_DB_ROWNUM as bigint ) BETWEEN $start AND $end&#8221;;</p>
<p>	return $sql;<br />
}<br />
[/php]</p>
<p style="text-align: justify;">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 <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<p style="text-align: justify;">Contoh pemakaian(apabila menggunakan <strong><em><a href="http://neo.rizkhey.net/2011/04/3913-sqlsrv-native-microsoft-sql-server-extension-for-php" title="SQLSRV, native Microsoft SQL Server Extension for PHP">sqlsrv </a></em></strong>extension, kurang lebih sama dengan <strong><em>mssql</em></strong> function biasa):</p>
<p>[php]<br />
$conn = sqlsrv_connect( &#8220;SERVERADDRS/IPADDRESS&#8221;, array(&#8220;UID&#8221; => &#8216;sqlserv_userid&#8217;, &#8220;PWD&#8221; => &#8216;sqlserv_password&#8217;, &#8220;Database&#8221;=>&#8221;dbname&#8221;));<br />
if( $conn === false )<br />
{<br />
	echo &#8220;Could not connect.\n&#8221;;<br />
	die( print_r( sqlsrv_errors(), true));<br />
}</p>
<p>$str = &#8220;SELECT * FROM TBObject WHERE 1=1 ORDER BY Name &#8220;;</p>
<p>//fetch data from record 11 of 20 record<br />
$stmt = sqlsrv_query( $conn, limit($str,20,11), array(), array( &#8220;Scrollable&#8221; => SQLSRV_CURSOR_KEYSET ));<br />
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_BOTH))<br />
{<br />
	var_dump($row);<br />
}<br />
[/php]</p>
<p>Contoh dengan <strong><em>mssql</em></strong> Function:<br />
[php]<br />
mssql_connect(&#8217;10.0.0.23&#8242;, &#8216;sa&#8217;, &#8216;xxxx&#8217;);<br />
mssql_select_db(&#8216;dbname&#8217;);</p>
<p>$str = &#8220;SELECT * FROM TBObject WHERE 1=1 ORDER BY Name &#8220;;</p>
<p>$result = mssql_query(limit($str, 20,11));</p>
<p>while($r = mssql_fetch_array($result))<br />
{<br />
	var_dump($r);<br />
}<br />
[/php]</p>
<p style="text-align: justify;">Fungsi diatas akan mengubah Query seperti:</p>
<p>[sql]SELECT * FROM TBObject WHERE 1=1 ORDER BY Name[/sql]</p>
<p style="text-align: justify;">Fungsi diatas akan mengubah Query seperti:</p>
<p>[sql]WITH outer_tbl AS (SELECT ROW_NUMBER() OVER (ORDER BY Name ) AS &#8220;ZEND_DB_ROWNUM&#8221;, * 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]</p>
<p style="text-align: justify;">Good Luck <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /></p>
<blockquote><p>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 <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> </p></blockquote>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=4100&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2012/01/4100-emulate-microsoft-sql-server-select-limit2005-and-above/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interactive Drag&amp;Drop Sorting with jQueryUI &amp; AJAX</title>
		<link>http://neo.rizkhey.net/2012/01/4066-interactive-dragdrop-sorting-with-jqueryui-ajax</link>
		<comments>http://neo.rizkhey.net/2012/01/4066-interactive-dragdrop-sorting-with-jqueryui-ajax#comments</comments>
		<pubDate>Mon, 09 Jan 2012 10:59:15 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[Guide]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[jQuery UI]]></category>
		<category><![CDATA[mySQl]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[sortable]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=4066</guid>
		<description><![CDATA[
Dalam sebuah apliaksi web based baik itu intranet ataupun internet/public sering kali user dihadapkan pada sebuah event dimana user harus mengurutkan beberapa item secara manual. Tentu saja apabila kita ingin melakukan secara manual, kita bisa meminta user untuk melakukan input angka sebagai Order Number, apabila kita ingin. Tetapi alangkah lebih baiknya jika kita sedikit &#8216;memanjakan&#8216; [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/ilust-e1326106852927-450x382.gif" alt="" title="ilust" width="450" height="382" class="aligncenter size-medium wp-image-4067" /></p>
<p style="text-align: justify;">Dalam sebuah apliaksi web based baik itu intranet ataupun internet/public sering kali user dihadapkan pada sebuah event dimana user harus mengurutkan beberapa item secara manual. Tentu saja apabila kita ingin melakukan secara manual, kita bisa meminta user untuk melakukan input angka sebagai <em>Order Number</em>, apabila kita ingin. Tetapi alangkah lebih baiknya jika kita sedikit &#8216;<em>memanjakan</em>&#8216; user dengan user interface yang lebih <em>interactive</em>, yaitu dengan drag and drop <em>interface</em>.</p>
<p style="text-align: justify;">Dalam tutorial kali ini, target kita adalah membuat sebuah program sederhana terbuat dengan menggunakan PHP dan MYSQL yang akan menampilkan list nama -nama orang yang dapat di sorting dengan menggunakan drag and drop dan saat di drop itemnya, otomatis data di server akan langsung terupdate secara live dengan AJAX menggunakan bantuan dari jQuery UI. Untuk itu, kita membutuhkan beberapa hal yang kita butuhkan, yaitu:</p>
<ol>
<li>Web server untuk PHP &amp; Mysql (Saya mencotohkan dengan menggunakan XAMPP)*</li>
<li>jQuery UI</li>
<li>Text editor untuk programing(bisa menggunakan notepad++, netbeans for PHP, dreamweaver atau sesuai selera)</li>
</ol>
<blockquote>
<pre style="text-align: justify;">*Untuk web server saya anggap sudah dapat menginstallnya</pre>
</blockquote>
<p style="text-align: justify;">Untuk mendownload jQuery UI, bisa langsung mengunjungi halaman download-nya di alamat <a href="http://jqueryui.com/download">http://jqueryui.com/download</a> Sebelum mendownloadnya, boleh sedikit saya terangkan terlebih dahulu mengenai jQueryUI ini.</p>
<p style="text-align: justify;">jQuery UI ini adalah kumpulan-kumpulan modul-modul yang digunakan untuk membuat widget, web web object, animasi, yang sering digunakan secara umum dalam sebuah website, seperti date picker, Accordition, etc . jQuery UI sendiri dapat di download sesuai kebutuhan, misalnya kita akan menggunakan modul &#8220;<em>sortable</em>&#8220;, maka kita hanya butuh mendownload/memilih modul &#8216;<em>sortable</em>&#8216;. Dengan catatan bahwa sebuah modul biasanya memerlukan modul lainnya untuk dapat bekerja. Sebagai contoh untuk tutorial ini, modul &#8216;<em>sortable</em>&#8216; membutuhkan 3 modul lainnya yaitu &#8220;<em>UI core</em>&#8220;,&#8221;<em>UI Widget</em>&#8220;,&#8221;<em>UI Mouse</em>&#8221; untuk dapat bekerja.</p>
<p><span id="more-4066"></span></p>
<div id="attachment_4068" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/depend.jpg"><img class="size-medium wp-image-4068" title="Dependencies" src="http://neo.rizkhey.net/wp-content/uploads/2012/01/depend-450x208.jpg" alt="Dependencies" width="450" height="208" /></a><p class="wp-caption-text">Perhatikan ketergantungan/Dependencies dari sebuah modul yang akan kita gunakan</p></div>
<p style="text-align: justify;">Sehingga minimal untuk menjalakan modul yang akan kita pakai, kita membutuhkan ke-4 modul yang saya sebutkan sebelumnya, checklist-lah ke-4 item di halaman download jQuery UI kemudian klik tombol download(Untuk themes, saya akan menggunakan CSS sederhana untuk <em>styling</em>-nya, sehingga kita tidak akan menggunakan themes bawaan dari jQuery UI).</p>
<div id="attachment_4070" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/downloading_package.jpg"><img class="size-medium wp-image-4070" title="downloading package" src="http://neo.rizkhey.net/wp-content/uploads/2012/01/downloading_package-450x258.jpg" alt="downloading package" width="450" height="258" /></a><p class="wp-caption-text">Downloading package untuk modul sortable yang akan kita pakai</p></div>
<p style="text-align: justify;">Setelah mendownload-nya, extractlah folder &#8220;<em>js</em>&#8221;  yang ada di dalamnya ke sebuah folder dalam folder htdocs local server Anda. Misalnya folder tersebut saya beri nama &#8216;<em>jquery_ui</em>&#8216;, sebelum melanjut lebih jauh, buatlah sebuah table di database Anda dengan menggunakan drop SQL berikut ini:</p>
<p>[sql]<br />
CREATE TABLE IF NOT EXISTS `jqueryui_sort` (<br />
`id` int(11) NOT NULL AUTO_INCREMENT,<br />
`name` varchar(255) NOT NULL,<br />
`order` int(11) NOT NULL,<br />
PRIMARY KEY (`id`)<br />
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=10 ;</p>
<p>INSERT INTO `jqueryui_sort` (`id`, `name`, `order`) VALUES<br />
(1, &#8216;Sigit &#8216;, 8),<br />
(2, &#8216;Karto &#8216;, 9),<br />
(3, &#8216;George &#8216;, 4),<br />
(4, &#8216;Joe &#8216;, 6),<br />
(5, &#8216;Ciptanti &#8216;, 1),<br />
(6, &#8216;Nancy &#8216;, 7),<br />
(7, &#8216;Alfonsus &#8216;, 2),<br />
(8, &#8216;Johanna &#8216;, 5),<br />
(9, &#8216;Jaclyn&#8217;, 3);<br />
[/sql]</p>
<h4 style="padding-top:20px;"><strong>Membuat front page interface</strong></h4>
<p style="text-align: justify;">Untuk file front interface buatlah sebuah file, sebagai contoh saya beri nama &#8220;sort.php&#8221; dengan isi sbb:</p>
<p>[php]<br />
<?php<br />
/* connect to mysql databse */<br />
mysql_connect('localhost', 'root', $password);<br />
/* select the database */<br />
mysql_select_db('tutorial');</p>
<p>/* do some query selecting id and names order by ORDER asc */<br />
$str_query = "SELECT id,`name` FROM jqueryui_sort ORDER BY `order` ASC";<br />
$query = mysql_query($str_query)or die(mysql_error());</p>
<p>?><br />
<!DOCTYPE html><br />
<html><br />
    <head><br />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p>
<p>        <!-- Jquery.js include --><br />
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script></p>
<p>        <!-- JqueryUI library include --><br />
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script></p>
<style>
            .handler{
                border: solid 1px #2b81af;
                padding: 5px;
                margin: 2px 0px 0px 2px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                background-color: #fff;
                cursor: pointer;
            }
	</style>
<p>	<script>
            $(function() {
                    $( "#sortable" ).sortable({
                        update : function () {
                            var order = $("#sortable").sortable("serialize");
                            $.ajax ({
                                url : 'ajax_sort.php',
                                data: order,
                                type: 'post',
                                success: function(data){
                                    alert(data);
                                }
                            });
                      }
                    });
            });
	</script><br />
    </head><br />
    <body></p>
<div id="sortable">
            <?php while ( $result = mysql_fetch_object($query) ){ ?></p>
<div class="handler" id="list_<?php echo $result->id; ?>&#8221;><br />
                <?php echo $result->name; ?>
            </div>
<p>            <?php } ?>
        </div>
<p>    </body><br />
</html><br />
[/php]</p>
<p style="text-align: justify;">Pada file ini tugas utamanya adalah melakukan menampilkan urutan awal yang datanya diambil dari database yang tadi value-nya sudah kita masukan. Untuk itu mari kita bedah bagian-bagian coding ini</p>
<h4>Loading data</h4>
<p>[php highlight_lines="3,5,8,9"]<br />
<?php<br />
/* connect to mysql databse */<br />
mysql_connect('localhost', 'root', $password);<br />
/* select the database */<br />
mysql_select_db('tutorial');</p>
<p>/* do some query selecting id and names order by ORDER asc */<br />
$str_query = "SELECT id,`name` FROM jqueryui_sort ORDER BY `order` ASC";<br />
$query = mysql_query($str_query)or die(mysql_error());<br />
?><br />
[/php]</p>
<blockquote><p>
<strong>Line 3</strong> : Connect ke mysql database terdiri dari 3 parameter: &#8220;database host&#8221;(ip/address),&#8221;database username&#8221;, &#8220;database password&#8221;<br />
<strong>Line 5</strong> : Memilih database (contoh saya menggunakan database bernama tutorial)<br />
<strong>Line 8</strong> :  Membuat query string ke database table &#8216;<em>jqueryui_sort</em>&#8216; untuk mengambil data nama dan &#8216;id&#8217; yang diurutkan berdasarkan field &#8216;order&#8217;<br />
<strong>Line 9</strong> : Menjalankan Query
</p></blockquote>
<p>Setelah itu kita print ke halaman web di bagian <body> :<br />
[php num="55" highlight_lines="57"]</p>
<div id="sortable">
            <?php while ( $result = mysql_fetch_object($query) ){ ?></p>
<div class="handler" id="list_<?php echo $result->id; ?>&#8221;><br />
                <?php echo $result->name; ?>
            </div>
<p>            <?php } ?>
        </div>
<p>[/php]</p>
<p style="text-align: justify;">Perhatikan saya menaruh <em>loop</em> di dalam <em>div </em>ber-&#8217;<em>id</em>&#8216; &#8220;<strong>sortable</strong>&#8220;. Dan juga perhatikan setiap tag <em>div</em> akan memiliki id bernama &#8220;<em>list_{<strong>pk_table</strong>}</em>&#8220;. Fungsi dari pemberian id disini akan berpengaruh pada nama index <strong>POST</strong> yang nanti diterima oleh file penerima proses nantinya. Sedangkan pemberian nomor/<em>primary key</em>(x) setelah tanda <em>underscrore</em>(_) berfungsi untuk menandakan bahwa record database &#8216;x&#8217; mendapat urutan &#8216;n&#8217;.</p>
<p style="text-align: justify;">Apabila kita coba jalankan dan kita view source-nya Anda akan melihat kurang lebih script di atas akan menghasilkan code seperti berikut pada tag body <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> :</p>
<p>[html]</p>
<div id="sortable">
<div class="handler" id="list_9">Jaclyn</div>
<div class="handler" id="list_3">George </div>
<div class="handler" id="list_8">Johanna </div>
<div class="handler" id="list_4">Joe </div>
<div class="handler" id="list_6">Nancy </div>
<div class="handler" id="list_1">Sigit </div>
<div class="handler" id="list_2">Karto </div>
<div class="handler" id="list_7">Alfonsus </div>
<div class="handler" id="list_5">Ciptanti </div>
</div>
<p>[/html] </p>
<p style="text-align: justify;">Code diatas mengatakan bahwa &#8216;Jaclyn&#8217; memiliki ID 9 di dalam table, dan seterusnya.</p>
<p>Setelah itu untuk memerintakan jQueryUI untuk mengubah content dalam &#8216;div&#8217; ber &#8216;id&#8217; &#8220;sortable&#8221; menjadi sebuah list yang dapat di urutkan dengan melakukan drag and drop, kita harus menambahkan script di bagian dalam tag header halaman ini.</p>
<p>[javascript num="37" highlight_lines="37,38,39,40,42,44,45,46,47,43"]<br />
            $(function() {<br />
                    $( &#8220;#sortable&#8221; ).sortable({<br />
                        update : function () {<br />
                            var order = $(&#8220;#sortable&#8221;).sortable(&#8220;serialize&#8221;);<br />
                            $.ajax ({<br />
                                url : &#8216;ajax_sort.php&#8217;,<br />
                                data: order,<br />
                                type: &#8216;post&#8217;,<br />
                                success: function(data){<br />
                                    alert(data);<br />
                                }<br />
                            });<br />
                      }<br />
                    });<br />
            });<br />
[/javascript]</p>
<blockquote><p>
<strong>Line 37</strong> : fungsi singkat alternatif dari &#8220;$().ready(function(){ &#8230; })&#8221; yang berfungsi untuk menjalankan script saat seluruh halaman sudah terload(exclude image, object )<br />
<strong>Line 38</strong> : memberi perintah untuk mengubah div ber-id &#8216;sortable&#8217; menjadi sebuah sortable list.</p>
<p>Banyak option yang dapat digunakan dalam modul sortable ini, tetapi karena kita hanya akan melakukan update record ke database apabila saat urutan diubah, maka kita akan <em>bind event</em> saat terjadi update urutan saja.</p>
<p><strong>Line 39</strong> : Mengeset callback function saat terjadi update<br />
<strong>Line 40</strong> : Memasukan urutan yang baru ke dalam sebuah string yang akan kita kirim ke server dengan menggunakan AJAX.</p>
<p>Pada line ke 40, option &#8220;<strong><em>serialize</em></strong>&#8221; akan mengembalikan nilai urutan baru ke dalam format query string:<br />
contohnya:</p>
<div class="codecolorer-container text vibrant" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">list[]=9&amp;list[]=3&amp;list[]=8 ....</div></div>
<p><strong>Line 41 &#8211; 48</strong> : ajax Call dengan parameter sbb:</p>
<ol>
<li>Line 42: Alamat file untuk memproses data, apabila menggunakan fasilitas friendly URL dalam beberapa framework PHP, berilah full path-nya</li>
<li>Line 43: Data yang akan dikirim, kita kirim data yang sudah di <em>serialize</em> pada line 40</li>
<li>Line 44: type send data, kita set ke POST</li>
<li>Line 45-47 : mengeset Callback function saat sukses mengirimkan data dan proses selesai, dimana variable &#8216;<em>data</em>&#8216; berisi value yang dikembalikan oleh AJAX request. Untuk simplenya disini kita akan memberi tahu user kalau proses sort sudah selesai dengan memunculkan &#8216;<em>alert</em>&#8216; box.</li>
</ol>
</blockquote>
<p>Untuk sedikit pemanis, tambahkan sedikit CSS agar terlihat menarik <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /><br />
[css num="24"]</p>
<style>
            .handler{
                border: solid 1px #2b81af;
                padding: 5px;
                margin: 2px 0px 0px 2px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                background-color: #fff;
                cursor: pointer;
            }
	</style>
<p>[/css]<br />
<strong>NB:</strong><em> Gunakan browser support CSS3<img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></em></p>
<h4 style="padding-top:20px;"><strong>File Proses</strong></h4>
<p>Untuk file prosesnya, buatlah file bernama &#8216;<em>ajax_sort.php</em>&#8216;(disesuaikan dengan yang terdapat pada syntax javascript AJAX pada parameter &#8216;<em>url</em>&#8216;), lalu isi dengan code berikut ini:</p>
<p>[php]<br />
<?php<br />
/* connect to mysql databse */<br />
mysql_connect('localhost', 'root', $password);<br />
/* select the database */<br />
mysql_select_db('tutorial');</p>
<p>/* get parameters */<br />
$sort_result = $_POST['list'];</p>
<p>/* make sure it's array  */<br />
if ( is_array($sort_result) )<br />
{<br />
    foreach ($sort_result as $index => $value)<br />
    {<br />
        /* prepare update statement */<br />
        $str_query = &#8220;UPDATE jqueryui_sort SET `order`=&#8217;&#8221; . (intval($index)+1) . &#8220;&#8216; WHERE id = &#8216;&#8221; . intval($value) . &#8220;&#8216;&#8221;;<br />
        mysql_query($str_query);<br />
    }</p>
<p>    echo &#8220;sort success&#8221;;<br />
}</p>
<p>?><br />
[/php]</p>
<p>file ini lebih sederhana dibandingkan frontpagenya karena tugasnya hanya menerima data yang dikirim oleh AJAX request dari file &#8216;sort.php&#8217; untuk kemudian di loop dan melakukan update di database. Berikut adalah keterangan-keterangannya:</p>
<blockquote><p>
<strong>Line 3&#038;5</strong> : Sama seperti dalam file &#8216;sort.php&#8217; digunakan untuk <em>connecting</em> ke database dan memilih database &#8216;<em>tutorial</em>&#8216;<br />
<strong>Line 8</strong> : Menerima parameter kiriman dari AJAX dengan index &#8216;<em>list</em>&#8216; ingat dengan id di list di file fron-end? setiap row kita beri id &#8216;<em>list_{pk_value}</em>&#8216; disinilah pengaruhnya, apabila id-nya kita beri nama misalnya &#8220;abcd_{pk_value}&#8221;, maka index yang kita retrieve akan berada di &#8216;abcd&#8217;. Yang diterima disini berupa array.<br />
<strong>Line 11</strong> : Untuk mengecek saja, karena yang dikirim harus array terlebih kita akan melakukan perulangan foreach(yang mana membutuhkan array dan apabila yang diberikan bukan array maka akan menghasilkan error).<br />
<strong>Line 13</strong> : Melakukan perulangan/<em>loop</em> dengan menggunakan foreach untuk me-<em>loop</em> array yang diterima dari AJAX, intuk index/urutan arraynya dimasukan ke dalam variable &#8216;<em>$index</em>&#8216; dan value-nya(Yang mana berisi primary key dari amsing-masing row) dimasukan ke variable &#8216;<em>$variable</em>&#8216;.<br />
<strong>Line 16</strong> : Membuat  string SQL untuk mengupdate database dengan urutan baru. Logikanya kita sudah mendapatkan urutan yang baru(disimpan dalam <em>variable</em> &#8216;<em>$index</em>&#8216; ) untuk row yang ber-<em>primary key $value</em> sehingga SQL query-nya akan menjadi:<br />
[sql]UPDATE jqueryui_sort SET `order`=&#8217;&#8221; . (intval($index)+1) . &#8220;&#8216; WHERE id = &#8216;&#8221; . intval($value) . &#8220;&#8216;[/sql]<br />
Supaya afdol untuk index-nya saya tambahkan 1 agar tidak ada urutan nol(karena yang di-<em>retrieve</em> ini arraynya mulai dari <em>index </em>0)<br />
<strong>Line 17</strong> : <em>Executing query</em> yang dibuat di line 16 <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /><br />
<strong>Line 20</strong> : Meresponse hasil agar dikembalikan ke user.
</p></blockquote>
<p>Setelah selesai, sekarang cobalah buka file sort.php melalui browser (kalau dalam contoh saya ada di dalam folder <strong><em>try/jquery_ui</em></strong> sehingga saya menggunakan alamat : <em>http://localhost/try/jquery_ui/sort.php</em>). Cobalah drag salah satu item yang ada disana dan lepaskan di urutan baru, tunggulah sesaat sampai ada pesan di browser mengatakan &#8220;Sort success&#8221;.  Atau hasilnya seperti pada gambar berikut ini <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<div id="attachment_4087" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/result_sort_drag.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/result_sort_drag-450x360.jpg" alt="Saat item di drag untuk sorting" title="Saat item di drag untuk sorting" width="450" height="360" class="size-medium wp-image-4087" /></a><p class="wp-caption-text">Klik salah satu row dan drag ke urutan baru...</p></div>
<div id="attachment_4086" class="wp-caption aligncenter" style="width: 460px"><a href="http://neo.rizkhey.net/wp-content/uploads/2012/01/result_done.jpg"><img src="http://neo.rizkhey.net/wp-content/uploads/2012/01/result_done-450x360.jpg" alt="Pesan bahwa sort sudah selesai" title="Pesan bahwa sort sudah selesai" width="450" height="360" class="size-medium wp-image-4086" /></a><p class="wp-caption-text">Saat dilepas, maka AJAX call akan dijalankan(lihat frame Firebug di bagian bawah mengirim variable urutan barunya), dan setelah selesai di proses server, akan memberikan pesan sukses seperti di atas</p></div>
<h4 style="padding-top:20px;"><strong>Kesimpulan</strong></h4>
<p>Tutorial ini memberikan gambaran bagaimana mudahnya membuat sebuah interface yang interaktif dalam memberikan urutan untuk mengurutkan sebuah list dengan menarik dan pastinya akan mempermudah user. Apabila tanpa bantuan jQuery dan jQUery UI, sudah dipastikan pembuatan interface seperti ini akan memakan waktu lama. Tetapi dengan menggunakan jQuery UI amat sangat mempermudah pembuatan user interface yang amat menarik ini.</p>
<p>Akhirnya semoga berguna dalam pekerjaan rekan-rekan &#8230; Thanks <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /></p>
<div class="download_box">
<a href="http://download.rizkhey.net/view.php?file=tutorial_file/jquery_ui_sort_tutorial.zip" title="jQuery UI Sortable AJAX tutorial source code">Source Code</a>
</div>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=4066&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2012/01/4066-interactive-dragdrop-sorting-with-jqueryui-ajax/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[Tutorial] Web Services using XMLRPC with PHP</title>
		<link>http://neo.rizkhey.net/2011/08/3953-tutorial-web-services-using-xmlrpc-with-php</link>
		<comments>http://neo.rizkhey.net/2011/08/3953-tutorial-web-services-using-xmlrpc-with-php#comments</comments>
		<pubDate>Thu, 11 Aug 2011 05:00:39 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[web service]]></category>
		<category><![CDATA[XML]]></category>
		<category><![CDATA[xmlrpc]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=3953</guid>
		<description><![CDATA[
Web Services, mungkin sudah sering terdengar ungkapan ini, tetapi sekitar 2-3 bulan lalu akhirnya saya menggunakannya dalam lingkungan project. Singkatnya banyak sekali aplikasi berbasiskan web dengan berbagai macam latar belakang platform, dan juga OS. Celakanya adalah mereka terkadang tidak memberi akses ke database yang digunakan(atau mungkin gw ga tau DB apa yang mereka gunakan), mereka [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><a title="XMLRPC" href="http://my.rizkhey.net/files/xmlrpc_img.jpg"><img class="aligncenter" title="XMLRPC" src="http://my.rizkhey.net/files/ext_thumb_xmlrpc_img.jpg" alt="XMLRPC" width="450" height="295" /></a></p>
<p style="text-align: justify;">Web Services, mungkin sudah sering terdengar ungkapan ini, tetapi sekitar 2-3 bulan lalu akhirnya saya menggunakannya dalam lingkungan project. Singkatnya banyak sekali aplikasi berbasiskan web dengan berbagai macam latar belakang platform, dan juga OS. Celakanya adalah mereka terkadang tidak memberi akses ke database yang digunakan(atau mungkin gw ga tau DB apa yang mereka gunakan), mereka hanya memberikan sebuah interface untuk menerima atau mengirim data. Secara programing agaknya ga mungkin kita melakukan parsing HTML saja karena kita tidak bisa mendapatkan data dari si sumber data, kalaupun bisa, hasilnya tidak akan akurat.</p>
<p style="text-align: justify;">Dari sinilah lahir namanya web services. Dulu jaman kuliah, web services ini pernah disinggung waktu belajar ASP.net hanya saat itu masih <em>blurry</em>, saya tidak ngerti fungsinya karena dosen cuman menjelaskan bagaimana buatnya dan gunanya untuk transfer data ke system lain, tetapi dosen tidak memberikan contoh paling tidak saat dua cross platform saling bertukar data melalui web services tersebut sehingga paling tidak saya ada gambaran.</p>
<p style="text-align: justify;">Ada beberapa jenis metode menggunakan web service. Paling sederhana adalah XMLRPC dan yang lebih advanced adalah SOAP. keduanya menggunakan media format XML untuk bertukar data. Dalam tutorial ini, saya akan mencoba menerangkan penggunaan XMLRPC dalam PHP menggunakan sebuah library yang sangat sederhana yang dapoat diambil <a href="http://www.keithdevens.com/software/xmlrpc/ ">disini</a>.</p>
<p style="text-align: justify;">XMLRPC sendiri sudah banyak yang menggunakannya walau belum dipatentkan oleh W3C, contohnya oleh WordPress(dengan blogging aplikasinya seperti halnya di Microsoft Word 2007  atau ada juga aplikasi untuk OS mobile seperti Android, iPhone, etc), bloger, etc.</p>
<p style="text-align: justify;">Tutorial akan terbagi menjadi 2 bagian besar, yaitu <em>Bagian Server</em> dan <em>Bagian Client</em>. Bagian Client nanti akan merequest ke Server sebuah action dengan mengirim parameter atau hanya sekedar merequest saja, sedangkan server akan menerima request dan melakukan proses. Apabila Method/action yang diminta terdaftar maka server akan melakukan tugasnya dan mereturn sesuatu untuk kembali dibaca oleh si client, apabila method yang diinginkan tidak terdaftar maka server akan mengembalikan error value.</p>
<p><span id="more-3953"></span></p>
<blockquote style="text-align: justify;"><p>Yang dibutuhkan dalam tutorial ini adalah:</p>
<ol>
<li>Web Server Apache + PHP (simple, using XAMPP kalau tidak tahu cara installnya)</li>
<li>XML-RPC Library for PHP (<a href="http://keithdevens.com/software/xmlrpc" target="_blank">download disini</a>)</li>
<li>Text editor seperti Notepad++ atau Adobe Dreamweaver atau Notepad biasa apabila terpaksa <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /></li>
</ol>
</blockquote>
<p style="text-align: justify;">Sebelum memulai tutorial ini ada baiknya kita membuat sebuah folder di dalam folder di folder <strong><em>htdocs</em></strong>(apabila menggunakan XAMPP) dnegan nama &#8220;<strong><em>xmlrpc</em></strong>&#8221; kemudian buatlah 2 buah folder lagi di dalamnya bernama &#8220;<strong><em>server</em></strong>&#8221; dan &#8220;<strong><em>client</em></strong>&#8221; dimana nantinya folder <em><strong>server </strong></em>akan berisi file untuk <em>XMLRPC-server side</em> dan folder <em><strong>client</strong></em> akan berisi file-file untuk <em>XMLRPC-client side</em>.</p>
<p style="text-align: justify;">Kemudian buatlah sebuah database mysql baru(dalam contoh ini saya menggunakan nama database &#8216;<em><strong>tutorial</strong></em>&#8216;) dan import <a href="http://download.rizkhey.net/view.php?file=script/xmlrpc/tutorial.sql.gz">file dump ini</a> ke dalam mysql.</p>
<h2 style="text-align: justify;">SERVER SIDE</h2>
<p style="text-align: justify;">Copy-kan file XML-RPC Library yang sudah di download ke folder server. Dan rename menjadi &#8220;xmlrpc-func.php&#8221;. Kemudian logikanya karena Server nantinya yang akan berhubungan dengan database, maka kita harus buat sebuah file yang akan mempersiapkan koneksi ke database dan juga meng-include semua library yang kita buat nantinya.</p>
<p style="text-align: justify;">Sebelumnya kita buat dulu 3 php file dengan nama &#8220;index.php&#8221;, &#8220;xmlrpc_proc.php&#8221;, &#8221;app_load.php&#8221;. Sehingga susunan isi folder akan menjadi seperti berikut ini:</p>
<p style="text-align: justify;"><img class="aligncenter" title="Susunan Folder Server side" src="http://my.rizkhey.net/files/content.JPG" alt="" width="181" height="104" /></p>
<p style="text-align: justify;">Funsgi masing-masing file adalah sbb:</p>
<ol style="text-align: justify;">
<li><em><strong>app_load.php</strong></em>: akan melakukan koneksi ke database, dan menginclude library file serta file yang berisi fungsi-fungsi yang akan di execute oleh XMLRPC server.</li>
<li><em><strong>index.php</strong></em>: index file yang akan menjadi front-end XMLRPC server. Semua request untuk XMLRPC akan menuju ke file ini.</li>
<li><em><strong>xmlrpc-func.php</strong></em>: Library XMLRPC yang dibuat oleh Keith Devens.</li>
<li><em><strong>xmlrpc_proc.php</strong></em>: adalah file berisi method-method/action yang dapat dipanggil oleh client.</li>
</ol>
<p style="text-align: justify;">Okay, pertama-tama mari kita buat dulu isi untuk file <em><strong>app-load.php</strong></em>. Fungsi utama file ini adalah seperti dituliskan diatas, yaitu mengkoneksikan ke database, dan meng-include file-file library yang dibutuhkan.</p>
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl class="wp-caption aligncenter" style="width: 460px;">
<dt class="wp-caption-dt"><a title="XMLRPC Tutorial" href="http://my.rizkhey.net/files/1_app_load.JPG"><img title="XMLRPC Tutorial" src="http://my.rizkhey.net/files/ext_thumb_1_app_load.JPG" alt="XMLRPC Tutorial" width="450" height="274" /></a></dt>
<dd class="wp-caption-dd">app_load.php file content</dd>
</dl>
</div>
<p style="text-align: justify;">Penjelasan:</p>
<blockquote style="text-align: justify;">
<p style="text-align: justify;">Line 10 : connect ke mysql<br />
Line 11 : memilih database &#8220;tutorial&#8221;<br />
Line 12 : including xmlrpc library<br />
Line 21 : Including xmlrpc server action/method</p>
</blockquote>
<p style="text-align: justify;">Save file tersebut kemudian sekarang kita akan buat content file kedua yaitu &#8220;<em><strong>xmlrpc_proc</strong></em>&#8220;. File ini akan berisi 4 buah fungsi. Tiga fungsi untuk method/action yang digunakan oleh XMLRPC melayani request dari client dan 1 adalah fungsi untuk mereturn pesan error saat method/action yang direquest tidak terdaftar.</p>
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl class="wp-caption aligncenter" style="width: 449px;">
<dt class="wp-caption-dt"><a title="XMLRPC" href="http://my.rizkhey.net/files/xmlrpc_proc.gif"><img title="XMLRPC" src="http://my.rizkhey.net/files/xmlrpc_proc.gif" alt="XMLRPC" width="439" height="600" /></a></dt>
<dd class="wp-caption-dd">xmlrpc_proc.php content</dd>
</dl>
</div>
<p style="text-align: justify;">Bagian yang penting dalam file ini:</p>
<blockquote style="text-align: justify;">
<ol>
<li><strong>Line 6 &#8211; 10</strong> : kita daftarkan method yang dapat diakses oleh client dalam variable &#8220;$xmlrpc_methods&#8221;. Dimana key array merupakan nama alias fungsi method/action untuk client, sedangkan valuenya merupakan nama fungsi internal yang akan diexecute oleh XMLRPC.</li>
<li><strong>Line 15</strong> : merupakan <em><strong>function get_sum_data</strong></em>, yang nantinya akan berfungsi untuk pemanggilan request method &#8220;<em><strong>exec.get_sum_data</strong></em>&#8221; oleh client yang akan mengembalikan jumlah record dalam database.</li>
<li><strong>Line 23</strong> : fungsi untuk memberikan response ke client dengan mengembalikan value yang direquest dalam fungsi ini(jumlah record dalam table database).</li>
<li><strong>Line 29</strong>: fungsi <em><strong>load_list_limit</strong></em>, digunakan untuk mengambil data sejumlah yang direquest dari client(apabila method yang direquest adalah &#8216;<em><strong>exec.module_load_all_list_limit</strong></em>&#8216;). Dalam fungsi ini, fungsi menerima parameter berjenis array dimana index &#8217;0&#8242; berisi offset data mulai akan mulai diambil. Sedangkan offset &#8217;1&#8242; merupakan jumlah data yang akan diambil.</li>
<li><strong>Line 43</strong>: mengembalikan response ke client dengan jenis array berisi hasil query sejumlah yang dihasilkan berdasarkan parameter yang dikirimkan.</li>
<li><strong>Line 49</strong>: merupakan <em><strong>function load_single</strong></em>. Yang mana diexecute apabila client merequest method/action &#8220;<em><strong>exec.module_load_single</strong></em>&#8221; fungsinya adalah untuk mengambil detail 1 row dari data. Fungsi ini menerima 1 buah parameter berjenis integer yang merupakan <em><strong>primary key value row</strong></em> yang akan diambil.</li>
<li><strong>Line 53</strong>: di line 51 kita validasikan apakah id yang terkirim adalah berupa numerik atau bukan. Apabila bukan maka kita harus response kembali ke client sebuah pesan error. Maka di line 53 ini adalah contoh memberikan respons ke client untuk [pesan error, kita beri error number 3 untuk ini(Nomor error dapat dimodifikasi sesuai selera Anda <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> ).</li>
<li><strong>Line 61</strong>: Mengirimkan response ke client berisi data detail satu buah row yang direquest oleh client.</li>
<li><strong>Line 65</strong>: fungsi <strong>XMLRPC_method_not_found</strong>, dimana fungsi ini akan di-execute apabila method/action yang direquest tidak ditemukan.</li>
</ol>
</blockquote>
<p style="text-align: justify;">Save file tersebut. Sekarang mari kita buat file untuk front-end XMLRPC servernya <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<p style="text-align: justify;">Bukalah file "index.php" dan isilah contentnya seperti berikut ini:</p>
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl class="wp-caption aligncenter" style="width: 509px;">
<dt class="wp-caption-dt"><a title="xmlrpc" href="http://my.rizkhey.net/files/index.gif"><img title="xmlrpc" src="http://my.rizkhey.net/files/index.gif" alt="xmlrpc" width="499" height="685" /></a></dt>
<dd class="wp-caption-dd">index.php file content</dd>
</dl>
</div>
<p style="text-align: justify;">Keterangan isi file:</p>
<blockquote style="text-align: justify;">
<ol>
<li><strong>Line 10 </strong>: meng-include semua library yang sudah di load dalam file "app_load.php".</li>
<li><strong>Line 12</strong>: melakukan parsing XML terhadap request post.</li>
<li><strong>Line 16</strong>: mengambil nama method yang direquest oleh client</li>
<li><strong>Line 22</strong>: Mendapatkan parameter yang dikirim oleh Client.</li>
<li><strong>Line 33</strong>: kita cek apakah method yang diminta oleh client(lihat line 16), terdaftar atau tidak.</li>
<li><strong>Line 35</strong>: Apabila method/action yang direquest tidak ada, maka panggil fungsi untuk meresponse dengan fungsi "XMLRPC_method_not_found" supaya client tahu bahwa method/action yang dia request tidak ditemukan.</li>
<li><strong>Line 41-45</strong>: Apabila Method ditemukan maka panggil alias fungsi alias dari method yang direquest oleh client beserta parameter yang dikirimkan.</li>
</ol>
</blockquote>
<p style="text-align: justify;">Awalnya saya bingung bagaimana PHP bisa memanggil fungsi kalau kita tahu nama fungsinya dalam string seperti contoh di atas? Setelah mencari tahu, PHP memiliki keunikan yang bisa dibilang cukup praktis. cobalah coding berikut ini:</p>
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl class="wp-caption aligncenter" style="width: 514px;">
<dt class="wp-caption-dt"><img style="border: 1px solid black;" title="Trick PHP" src="http://my.rizkhey.net/files/cheatsheet.gif" alt="" width="504" height="221" /></dt>
<dd class="wp-caption-dd">Execute Function dari Nama Function dalam String Variable</dd>
</dl>
</div>
<p style="text-align: justify;">Cara ini selain dapat digunakan untuk function, dapat juga untuk classes dan juga variable sendiri <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<p style="text-align: justify;">Apabila Anda mengaksesnya ke alamat: 'http://localhost/xmlrpc/server/' Maka Anda akan melihat seperti ini dalam browser Anda:</p>
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl class="wp-caption aligncenter" style="width: 502px;">
<dt class="wp-caption-dt"><img class=" " style="border: 1px solid black;" title="Tampilan Dalam Browser" src="http://my.rizkhey.net/files/server.gif" alt="" width="492" height="379" /></dt>
<dd class="wp-caption-dd">Server Side apabila dimunculkan dalam browser</dd>
</dl>
</div>
<p style="text-align: justify;">Okay, sampai sini XMLRPC server telah selesai kita buat, pada step berikutnya kita akan membuat Client yang merequest ke server ini.</p>
<h2 style="text-align: justify;">CLIENT SIDE</h2>
<p style="text-align: justify;">Sisi Client adalah bagian yang mana nantinya akan merequest ke server berdasarkan method-method yang diijinkan oleh server. Untuk memulai membuat client, coopy-kan file "<em><strong>xmlrpc-func.php</strong></em>" ke folder client, kemudian buatlah sebuah file bernama "index.php" di folder client sehingga isi dari folder client kurang lebih sebagai berikut.</p>
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl class="wp-caption aligncenter" style="width: 204px;">
<dt class="wp-caption-dt"><img style="border: 1px solid black;" title="XMLRPC Client" src="http://my.rizkhey.net/files/1_client_folder_content.gif" alt="" width="194" height="78" /></dt>
<dd class="wp-caption-dd">XMLRPC Client-side folder</dd>
</dl>
</div>
<p style="text-align: justify;">Bukalah file "<strong>index.php</strong><em>" kemudian isilah contentnya seperti berikut ini:</em></p>
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl class="wp-caption aligncenter" style="width: 458px;">
<dt class="wp-caption-dt"><a href="http://my.rizkhey.net/files/client.gif" target="_blank"><img style="border: 1px solid black;" title="Client-side XMLRPC requesting code" src="http://my.rizkhey.net/files/client.gif" alt="" width="448" height="554" /></a></dt>
<dd class="wp-caption-dd">Isi dari "index.php" bukalah di halaman baru untuk melihat di ukuran aslinya(right click + open in new window)</dd>
</dl>
</div>
<p style="text-align: justify;">Keterangan file ini:</p>
<blockquote style="text-align: justify;">
<ol>
<li><strong>Line 7</strong>: Include Library yang dibutuhkan.</li>
<li><strong>Line 9</strong>: Masukan alamat host server XMLRPC. tanpa prefix "http://", apabila tidak menggunakan port http default(80), tambahkan pula disini. Misalkan alamat XMLRPC servernya adalah "<em><strong>http://www.xmlrpc-server.com:8080</strong></em>" maka masukan valuenya "<em><strong>www.xmlrpc-server.com:8080</strong></em>"</li>
<li><strong>Line 10</strong>: Masukan alamat tempat XMLRPC server berada, dalam kasus contoh tutorial ini: "/xmlrpc/server/index.php"</li>
<li><strong>Line 12</strong>: Optional, set  ke 1 apabila ingin mengaktifkan fasilitas debuging. Untuk melakukan debug, Anda dapat memanggil fungsi "<em><strong>XMLRPC_debug_print()</strong></em>" setelah merequest sesuatu dari server. Funsgi ini sangat baik untuk melakukan tracing error saat server mengembalikan value yang tidak semestinya(entah blank atau mengembalikan value true tetapi return valuenya kosong).</li>
<li><strong>Line 17-30</strong>: Contoh merequest method yang tidak mengirimkan parameter apapun, dan mengembalikan single value. pada Line 19: Melakukan request method/action '<em><strong>exec.get_sum_data</strong></em>' dan menampung return value dalam variable. Return variable dari fungsi ini selalu berupa array berisi 2 index. Index pertama akan mengembalikan value sukses atau tidaknya pemanggilan request. Apabila error dari server karena mugnkin method tidak ada, maka index pertama ini akan mengembalikan value <em><strong>FALSE</strong></em>, apabila berhasil maka akan mengembalikan value <em><strong>TRUE</strong></em>.<br />
<strong>CATATAN</strong>: terkadang apabila Server sukses dihubungi tetapi mungkina da salah syntax error, maka fungsi ini akan mengembalikan <em><strong>TRUE</strong></em> pada index pertama. Gunakan fungsi debuging untuk melihat error-nya <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></li>
<li><strong>Line 37-50</strong>: Melakukan request dengan mengirimkan satu parameter tunggal. Request contohnya ada di line: 38. Result return value akan berupa array.</li>
<li><strong>Line 56-71</strong>: Contoh request method "<em><strong>exec.module_load_all_list_limit</strong></em>", dimana mengirimkan parameter berupa array. Value yang dikembalikan berupa array multidimensi.</li>
<li><strong>Line 74-84</strong>: Contoh request method/action yang tidak terdaftar pada server, yang kemudian akan mengembalikan pesan error.</li>
</ol>
</blockquote>
<p style="text-align: justify;">Apabila kita perhatikan dari contoh client ini, maka dapat dilihat untuk melakukan request ke server XMLRPC ini sungguh amat simple, yaitu hanya dengan memanggil sebuah fungsi bernama XMLRPC_requesst dengan detail:</p>
<blockquote style="text-align: justify;">
<p style="text-align: justify;">XMLRPC_request ($site, $location, $methodName,[[ $params = NULL], $user_agent = NULL])</p>
<ol>
<li><strong>$site</strong> : Berjenis string, berisi alamat IP atau host dari XMLRPC server</li>
<li><strong>$location</strong>: Berjenis string, berisi alamat ke XMLRPC server file. detailnya sbb:<br />
<img class="aligncenter" title="Keterangan" src="http://my.rizkhey.net/files/keterangan.gif" alt="" width="359" height="53" /></li>
<li><strong>$param</strong>: parameter yang dikirimkan, apabila berjenis array, gunakan fungsi &#8220;XMLRPC_prepare($arr_parameter_tobe_send)&#8221;</li>
<li><strong>$user_agent</strong>: User Agent alias</li>
</ol>
<p>Return value akan berupa array index pertama merupakan indikasi apakah request berhasil atau tidak.  Apabila berhasil, maka akan mengembalikan TRUE apabila tidak akan berisi FALSE*. Pada INdex berikutnya apabila berhasil, maka akan mengembalikan value yang dikembalikan dari XMLRPC server(dapat berupa string, integer, atau array, dll). Sedangkan apabila gagal akan mengembalikan array dengan 2 assosiasi index yang pertama adalah &#8220;<em><strong>faultCode</strong></em>&#8221; dan kedua adalah &#8220;<em><strong>faultString</strong></em>&#8221;</p>
<div style="border: solid 1px #fff; font-size: 11px; padding: 5px;">*Sekali lagi apabila request berhasil tetapi karena mungkin ada kesalah kode pada server sehingga terjadi error syntax, atau kita salah memasukan path Location, index pertama ini akan tetap mengembalikan BOOL TRUE. Tetapi index berikutnya return valuenya kosong. Gunakan Debuging function untuk memeriksa error ini.</div>
</blockquote>
<p style="text-align: justify;">Dalam prakteknya, XMLRPC tidak hanya saja untuk bertukar data berupa string seperti contoh di atas. Pada aplikasinya, saya juga menggunakannya untuk transfer data binnary(image, ms Word file, etc) yang berukuran kecil menengah(sekitar under 10MB). Caranya simple saja, kita hanya perlu membaca file yang hendak kita kirim (dengan menggunakan fungsi <em><strong>file_get_contents($filename)</strong></em> kemudian hasilnya kita encrypt dengan menggunakan <em><strong>base64_encode</strong></em>. kemudian string hasil encodingnya dikirim via XMLRPC, kemudian oleh XMLRPC server pada method penerima kita buat fungsi kecil untuk mendecrypt kembali base64 string dengan fungsi <em><strong>base64_decode</strong></em> kemudian hasil stringnya kita simpan ke dalam file dengan menggunankan fopen,fwrite,fclose seperti biasanya). Butuh diingat cara mengirim file binnary menggunakan XMLRPC tidaklah begitu optimal untuk file berukuran besar, terlebih karena melakukan enkripsi ke base64 akan membengkakan size-nya sekitar 30% lebih besar dari string aslinya. Sehingga apabila contohnya kita mengirim 10MB file maka dalam keadaan terenkripsi akan terkirim sekitar 13,5MB string file. tentunya ini dapat menyebabkan overload memory usage pada XMLRPC server. Tetapi apabila mengirim file berukuran kecil saya rasa XMLRPC dapat menghandlenya dengan baik(sekitar &lt;3MB).</p>
<p style="text-align: justify;">Yang perlu diperhatikan adalah transfer dalam XMLRPC, semua string akan dinormalisasi(menggunakan htmlentities), itulah sebabnya apabila kita mentransfer file binnary, kita harus mengencryptnya ke base64 terlebih dahulu agar string tidak dimodifikasi oleh XMLRPC library.</p>
<p style="text-align: justify;">Sekian kiranya tutorial kali ini, semoga berguna, akhir kata, semua file dalam tutorial ini, dapat di <strong><a href="http://download.rizkhey.net/view.php?file=script/xmlrpc/XMLRPC_tutorial.zip" target="_blank">download disini</a></strong>. Pastikan edit database connectionnya, serta di bagian client, edit  variable &#8220;$xmlrpc_server_host&#8221; dan &#8220;$xml_rpc_server_path&#8221;.</p>
<p style="text-align: justify;">Thankyou <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /></p>
<blockquote>
<h4 style="text-align: justify;">Update &amp; addition</h4>
<p style="text-align: justify;">Beberapa pengunjung bertanya langsung pada saya karena program PHP meng-issue-kan warning saat XMLRPC dijalankan. Ini dikarenakan Call By reference pada PHP 5.3++ diberi label deprecated(will be removed in near future), tetapi bukan berarti error, PHP hanya memberitahukan bahwa pada versi-versi berikutnya(entah versi berapa) fasilitas ini akan dihilangkan. tetapi apabila Anda menggunakan library ini untuk urusan di website, Anda tidak perlu begitu kawatir, karena masih banyak yang menggunakan PHP 5.2 daripada PHP 5.3</p>
<p style="text-align: justify;">Untuk menyelesaikan masalah ini, apabila Anda menggunakan PHP 5.3.x (terutama yang menggunakan XAMPP) , Anda perlu merubah 1 buah value di &#8216;<strong><em>php.ini</em></strong>&#8216; pada value &#8216;<em>allow_call_time_pass_reference = off</em>&#8216; Ubah menjadi <em>&#8216;allow_call_time_pass_reference = On</em>&#8216;. Kemudian save file &#8216;<em><strong>php.ini</strong></em>&#8216; dan restart Apache. <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<p style="text-align: center;"><a href="http://neo.rizkhey.net/wp-content/uploads/2011/08/turn_on.jpg"><img class="aligncenter size-medium wp-image-4039" title="turn it to &quot;on&quot;" src="http://neo.rizkhey.net/wp-content/uploads/2011/08/turn_on-450x149.jpg" alt="turn it to &quot;on&quot;" width="450" height="149" /></a></p>
<p style="text-align: justify;">
</blockquote>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=3953&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2011/08/3953-tutorial-web-services-using-xmlrpc-with-php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Code and Code and always code</title>
		<link>http://neo.rizkhey.net/2011/07/3951-code-and-code-and-always-code</link>
		<comments>http://neo.rizkhey.net/2011/07/3951-code-and-code-and-always-code#comments</comments>
		<pubDate>Sun, 17 Jul 2011 01:42:26 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[Daily]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Works]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=3951</guid>
		<description><![CDATA[
Sudah 1 bulan rasanya tidak pernah nulis disini. Sibuk? mungkin agak sulit menemukan waktu yang tepat untuk sekedar menulis di Blog ini. Kesibukan pasti, sampai di rumah yang ada capek sendiri dan hanya tinggal melepas stress dan terlelap.
Akhir-akhir ini gw sendiri merasakan pengalaman yang tidak pernah gw rasakan sebelumnya dari jaman proyek semasa kuliah sampai [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://my.rizkhey.net/files/coding.JPG"><img class="aligncenter" src="http://my.rizkhey.net/files/ext_thumb_coding.JPG" alt="" width="450" height="345" /></a></p>
<p style="text-align: justify;">Sudah 1 bulan rasanya tidak pernah nulis disini. Sibuk? mungkin agak sulit menemukan waktu yang tepat untuk sekedar menulis di Blog ini. Kesibukan pasti, sampai di rumah yang ada capek sendiri dan hanya tinggal melepas stress dan terlelap.</p>
<p style="text-align: justify;">Akhir-akhir ini gw sendiri merasakan pengalaman yang tidak pernah gw rasakan sebelumnya dari jaman proyek semasa kuliah sampai 2 tahun lalu. Apabila banyak teman-teman gw yang berujung menjadi developer yang sifatnya ERP, atau website oriented, mungkin gw agak berbeda dengan mereka.</p>
<p style="text-align: justify;">Memang ilmu gw juga ga sejauh mereka, sampai sekarang DBMS yang gw pake masih 2 saja, yaitu masih MySQL atau MSSQL server. Berbeda dengan kebanyakan teman-teman gw yang lain yang sudah menggunakan Oracle, sometimes Postgres SQL. Bahasa pemprograman juga masih ga berbeda, gw masih menggunakan my tiny cuttie PHP. Sesekali waktu gw pengen merambah ke Java, tetapi kondisi sepertinya tidak begitu memungkinkan. Mungkin juga karena salah otak gw yang selalu ingin terus menyempurnakan program yang pernah gw buat. terlebih, gw bukan orang jenius, hanya seorang yang &#8220;slow&#8221; dalam mengerti.</p>
<p><span id="more-3951"></span></p>
<p style="text-align: justify;">Kini proyek gw ga jauh dari workflow dan juga pencatatan, serta multiformat file dan lalu lalang file. Mungkin kalau mau sharing apa yang gw pikirkan akhir-khir ini:</p>
<p style="text-align: justify;"><strong>Pertama</strong>, gw akhirnya melihat perbedaan speed untuk penggabungan antara  2 table atau lebih dengan menggunakan istilah &#8220;JOIN&#8221; dan Join barbar.</p>
<p style="text-align: justify;">Sebutlah ini Join bar-bar:</p>
<blockquote>
<p style="text-align: justify;"><strong>SELECT </strong>a.field1, b.field1 <strong>FROM </strong>tbl1 a, tbl2 b <strong>WHERE </strong>a.id=b.tbl1_ID AND [condition_string]</p>
</blockquote>
<p style="text-align: justify;">Sebutlah ini menggunakan sistem JOIN biasa:</p>
<blockquote>
<p style="text-align: justify;"><strong>SELECT</strong> a.field1, b.field1 <strong>FROM </strong>tbl1 <strong>JOIN </strong>tbl2 <strong>ON </strong>tbl1.id = tbl2.tbl1_ID <strong>WHERE</strong> [condition_string]</p>
</blockquote>
<p style="text-align: justify;">Sewaktu kuliah dulu di mata kuliah Sistem Basis Data(atau dulu sama anak Binus disingkat SBD) pertama kali diajarkan adalah menggunakan JOIN bar-bar. Baru kemudian menggunakan JOIN.</p>
<p style="text-align: justify;">Hanya saja pastinya karena namanya aja anak kuliah dan juga JOIN ada embel2nya(Inner, Outer, cross, etc) tentunya anak pemula akan memilih cara bar-bar. Suatu saat temen gw mengatakan bahwa penggunaan Join bar-Bar lebih dan jauh lebih lambat dari menggunakan syntax JOIN.</p>
<p style="text-align: justify;">Tetapi tentu gw ga bisa membuktikan saat itu karena gw ga ada data yang cukup untuk membuktikan itu(males bener gw buat dummy data untuk join yang cukup banyak tablenya), tetapi memang gw pegang rinsip, menggunakan JOIN lebih baik, tetapi sampai sekitar 4 bulan lalu mungkin, saat teman dari Binus menjadi PKL di kantor gw dan mereka menggunakan cara join bar-bar dengan data +/- 13ribu di beberapa table dan gw baru melihat memang 100:1 kecepatannya, jauh lebih cepat JOIN, ga jarang menggunakan select JOIN bar-bar timeout di PHP.</p>
<p style="text-align: justify;"><strong>Kedua</strong>, Pentingnya Denormalisasi. Oke sebelum beberapa teman gw mengatai gw gw coba jelaskan dulu. Gw bukan orang yang suka ngikutin teori(yeah teori normalisasi 1NF 2 NF dst), tetapi dari dulu gw selalu memisahkan apa yang gw pisah, tidak ada denormalisasi, karena gw males membuat fungsi yang otomatis diexecute saat value diupdate dan gw harus mengupdate juga field lain di table lain yang di denormalisasi(gw pelupa dan ga gitu teliti makanya sering kelupaan). Tetapi beberapa waktu lalu akhirnya gw menyerah dan banyak melakukan denormalisasi setelah menemukan bahwa 31.000 row data di join dengan 35.000 data dijoin lagi dengan sekitar 4-5 table yang rata-rata di atas 20.000 row data(Mysql Database). Walau dilimit sekitar 40 record per halaman, hasil reload halaman nyaris 20-30 detik untuk 1 halaman + beberapa sub query.</p>
<p style="text-align: justify;">User mana yang mau menunggu selama itu, segala upaya indexing sudah dilakukan, tetap membutuhkan at last  sekitar 10-15 detik untuk melakukan load data. Hal yang cukup biadab apabila kita membiarkan user yang kadang tidak sabar untuk melihat dan duduk menunggu meload 1 halaman selama 15 detik.</p>
<p style="text-align: justify;">Akhirnya beberapa bagian yang bisa dibuat denormalisasi, gw denormalisasikan. Bahkan gw menghilangkan beberapa JOIn dan menggunakan script yang dibilang agak konyol tetapi cukup efektif. sebut saja 1 row MemberDetail misalnya, memiliki JOIN sederhana seperti misalnya field &#8220;KOTA&#8221; yang terhubung ke ID table &#8220;CITY&#8221;, daripada gw join, lebih baik kalau kita mengurangi JOIN sederhana seperti ini kalau kita menghandle banyak data seperti ini, walau sedikit sumbangsih penambahan performance akan jauh lebih berharga <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /></p>
<p style="text-align: justify;">Pada contoh di atas, gw menggunakan 2 Query, pertama gw query-kan table City dan gw tampung ke Array dengan susunan indexnya berupa PK dari table &#8220;City&#8221; dengan Value nama kotanya. Pada Loop, untuk field  KOTA gw langsung mereplace ID yang terdapat disana dan mencarinya di di array yang memiliki key tsb dan hasilnya langsung di replace saja. Ini merupakan cara yang cukup sederhana tetapi cukup efektif untuk mengurangi load data berjoin  banyak. Apabila di logika daripada menjoin misalnya 31.000 data ke misalnya 100 data mending kita load 100 data sekali sisanya tinggal dicocokan di 31.000 data.</p>
<p style="text-align: justify;"><strong>Ketiga</strong>, Sekarang gw melakukan hal yang ga pernah gw lakukan sebelumnya mungkin bsia disebut distributed Computing Level rendah. copntoh kasusnya adalah begini. Sejauh ini yang kita biasa lakukan adalah program rata-rata dilakukan dalam 1 buah mesin, dimana biasanya apabila ada tambahan modul kita biasa tempel dan tempel diintegrasikan. Tetapi yang terjadi di gw adalah Aplikasi Gw menjadi aplikasi Induk yang mana nantinya setiap grup user punya palikasi sendiri yang harus berkirim data untuk dimasukan ke dalam proses workflow yang berjalan di dalamnya.</p>
<p style="text-align: justify;">Cara ini mungkin ga akan ribet kalau yang dikirim hanyalah data text, bisa menggunakan XMLRPC sederhana untuk komunikasinya. Tetapi nyatanya di perusahaan Media seperti gw kadang dari sisi user ga tau diri ngirim filenya, bisa sepaket TIFF image yang bisa sampai 200-500MB sekali transfer(It&#8217;s damn impossible to transfer file as big as 500MB encrypted in base64 karena dapat membengkak 30% alias bisa jadi sekitar 800MB <img src='http://neo.rizkhey.net/smilies/yahoo_sad.gif' alt='&#58;&#40;' class='wp-smiley' width='18' height='18' title='&#58;&#40;' /> ), sebagai anggapan itu kalau 1 user, bagaimana kalau di kantor gw terdapat 30 user Group yang suka kirim-kirim data secara bersamaan <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /> ??? Terlebih cara seperti ini agak mustahil ter-optimized dalam PHP.</p>
<p style="text-align: justify;">Next adalah di kantor besar seperti kantor besar, terkadang ada kantor lain yang posisinya terpisah di lain gedung, malah di lain wilayah. Tantangannya adalah terkadang namanya services, seperti Fiber Optic connection saja bisa terputus, sehingga kita tidak mungkin membiarkan mereka yang dikantor terpisah itu menggunakan aplikasi yang tertanam di kantor gw. Sehingga harus ditaruh di kantor yang terpisah tersebut. Sama seperti sebelumnya gw harus melakukan archiving data mereka ke server yang ada di kantor gw. Lagi kalau tadi ibaratnya hanya 200-500MB/grup saat gw melakukan fetching binnary data jadi mereka bisa bergiga-giga. Dan Aplikasi gw harus bisa mengirimkan hal itu lengkap dengan text record dari Databasenya. Plus gw juga harus menjaga sinkronasi user profile diantara 2 aplikasi, sehingga apabila ada perubahan data data server pusat juga harus ikut berubah.</p>
<p style="text-align: justify;">Oh well ini tantangan terbesar yang harus gw pecahkan di semester 2 2011 <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /> but worry not, gw sudah menemukan cara yang cukup baik, hanya saja gw butuh waktu untuk testingnya, terlebih setelah ini jadi gw harus menginsert/mengubah beberapa core fungction&amp;Classes di aplikasi ini&#8230; cukup riskan &gt;.&lt;</p>
<p style="text-align: justify;">
<p style="text-align: justify;">Intinya ada 3 bagian besar dalam developing yang baru gw aamin setelah 2 tahun ini semasa kerja. Kedepannya entah apalagi yang harus gw hadapi. Tetapi memang gw lebih suka menganalisis demiian daripada suruh buat ngoding melulu&#8230; terus terang gw lemah kalau suru koding transaksi ini dan itu <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /></p>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=3951&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2011/07/3951-code-and-code-and-always-code/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SQLSRV, native Microsoft SQL Server Extension for PHP</title>
		<link>http://neo.rizkhey.net/2011/04/3913-sqlsrv-native-microsoft-sql-server-extension-for-php</link>
		<comments>http://neo.rizkhey.net/2011/04/3913-sqlsrv-native-microsoft-sql-server-extension-for-php#comments</comments>
		<pubDate>Tue, 26 Apr 2011 10:49:21 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[Guide]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[SQL server]]></category>
		<category><![CDATA[sqlsrv]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=3913</guid>
		<description><![CDATA[
Sudah berapa lama  saya  ga update blog ini? 1 bulan? maybe. Tidak terasa  saya  masuk di penghujung kontrak di perusahaan  saya  sekarang. Akhir tidaklah buruk, beberapa ilmu baru dari proyek terakhir terus berdatangan. Kali ini  saya  mencoba sharing sebuah extension PHP yang native dibuat oleh Microsoft sendiri, [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="aligncenter" title="Microsoft SQL Server" src="http://my.rizkhey.net/files/Logo_Ms_SQL4.jpg" alt="" width="450" height="281" /></p>
<p style="text-align: justify;">Sudah berapa lama  saya  ga update blog ini? 1 bulan? maybe. Tidak terasa  saya  masuk di penghujung kontrak di perusahaan  saya  sekarang. Akhir tidaklah buruk, beberapa ilmu baru dari proyek terakhir terus berdatangan. Kali ini  saya  mencoba sharing sebuah extension PHP yang native dibuat oleh Microsoft sendiri, yaitu &#8220;sqlsrv&#8221;.</p>
<p style="text-align: justify;">Beberapa waktu lalu,  saya  sempat mendownload versi XAMPP untuk developing(versi 1.7.4) niatnya untuk mengecek kompitabilitas program  saya  supaya selalu up to date, dan apabila terbentur suatu kondisi,  saya  bisa cepat memikirkan jalan keluarnya. Kebetulan tantangan langsung muncul. Yap, terhitung dari XAMPP versi 1.7.4 dengan PHP 5.3.5++ PHP sudah tidak menyediakan driver untuk SQL server lagi(sebelumnya ada &#8216;mssql.dll&#8217; di folder &#8220;ext&#8221;, tetapi kini sudah tidak ada). Sehingga kalau tidak mau usaha, ok aplikasi  saya  akan stuck development di XAMPP 1.7.3 ke bawah. Atau menggunakan model ODBC( saya  kurang suka pake ODBC walau Database Abstraction Layer  saya  mendukung hal itu).</p>
<p><span id="more-3913"></span></p>
<p style="text-align: justify;">Beberapa post sebelumnya,  saya  pernah <a href="http://neo.rizkhey.net/2012/01/4100-emulate-microsoft-sql-server-select-limit2005-and-above">menyinggung hal ini</a>. Karena Microsoft mengembangkan sendiri drivernya, akhirnya PHP developer melepaskan dan mempercayakan kepada yang empunya DBMS <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> Singkat kata Microsoft punya driver yang diberi nama &#8220;sqlsrv&#8221; atau native driver Ms SQL Server.</p>
<p style="text-align: justify;">Installasinya karena &#8220;baunya&#8221; dari Microsoft  saya  pikir awalnya rumit( saya  ga gitu banyak kenangan baik dengan devekloping tools Microsoft <img src='http://neo.rizkhey.net/smilies/yahoo_sad.gif' alt='&#58;&#40;' class='wp-smiley' width='18' height='18' title='&#58;&#40;' /> ). Ternyata kali ini lebih mudah dari install extension Imagemagick <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /> Kurang lebih beginilah caranya( saya  coba di XAMPP versi 1.7.3):</p>
<ol>
<li>Download Extensionnya di <a href="http://www.microsoft.com/downloads/en/details.aspx?displaylang=en&amp;FamilyID=80e44913-24b4-4113-8807-caae6cf2ca05" target="_blank">sini</a>.</li>
<li>Pastikan PC dimana PHP terinstall memiliki &#8220;Microsoft SQL Server Native Client&#8221;(terutama SQL server 2008 Native Driver).<br />
Driver ini akan terinstall apabila di PC terinstall Visual Studio 2008(Baik express atau yang full package) atau SQL server 2008. Apabila tidak punya, bisa download di <a href="http://www.microsoft.com/downloads/en/details.aspx?FamilyID=c6c3e9ef-ba29-4a43-8d69-a2bed18fe73c" target="_blank">halaman ini</a>(Scroll bagian bawah atau cari bagian &#8220;<em>Microsoft SQL Server 2008 Native Client</em>&#8220;), download sesuai arsitektur OS yang dipakai(32 atau 64 bit) kemudian Install.</li>
<li>Buka installer program SQL Server Extension for PHP yangs udah di download. Dia akan menanyakan hendak diekstract dimana file nantinya(dia hanya minta extract tidak ada proses install).</li>
<li style="text-align: justify;">Buka folder dimana file ter-extract, maka akan banyak sekali file-file disana(terutama versi untuk <em>dll</em> file-nya). <del datetime="2012-01-12T03:20:31+00:00">Seperti yang seharusnya diingat, bahwa apabila kita menggunakan APACHE sebagai web server, maka kita memilih extension yang di compile dengan Visual C versi 6(VC6), sedangkan apabila menggunakan IIS, kita menggunakan extension yang dicompile dengan Visual C versi 9</del>.<br />
<blockquote><p>Mulai dari PHP 5.3.6 semua PHP menggunakan VC9, sehingga cek versi PHP Anda karena Apache 2 build baru juga telah menggunakan VC9(including latest XAMPP juga sudah menggunakan yang sudah di compile menggunakan VC9).</p>
<div id="attachment_4114" class="wp-caption aligncenter" style="width: 460px"><img src="http://neo.rizkhey.net/wp-content/uploads/2011/04/vc9-450x257.jpg" alt="PHP 5.3.8 Dijalankan di Apache 2 VC 9" title="PHP 5.3.8 Dijalankan di Apache 2 VC 9" width="450" height="257" class="size-medium wp-image-4114" /><p class="wp-caption-text">Contoh PHP 5.3.8 Dijalankan di Apache 2 VC 9, statusnya dapat diliat di halaman phpinfo</p></div>
<p>Apabila versi PHP Anda pilih yang menggunakan VC9 bukan yang VC6</p></blockquote>
<p>Dalam paketnya juga terdapat sebuah file help dokumentasi a&#8217;la dokumentasi PHP yang bisa digunakan untuk referensi fungsi-fungsi dalam extension <em>sqlsrv</em>.</p>
<p><div class="wp-caption aligncenter" style="width: 215px"><img title="SQLSRV" src="http://my.rizkhey.net/files/sqlsrv.JPG" alt="File hasiL Extract" width="205" height="348" /><p class="wp-caption-text">File hasiL Extract</p></div></li>
<li>Copy &#8220;<strong>php_sqlsrv_53_ts_vc6/9.dll</strong>&#8221; ke directory extension PHP(Semenjak XAMPP yang  saya  gunakan adalah versi 1.7.3 yang memiliki versi PHP 5.3.x maka yang dipilih adalah &#8216;php_sqlsrv_53_ts_vc6/9.dll&#8217;).</li>
<li>Buka file &#8220;<strong>php.ini</strong>&#8221; dalam folder PHP, tambahkan satu baris di bagian extension PHP untuk memanggil extension <em>sqlsrv</em>.Save kemudian Tutup file &#8220;php.ini&#8221;, kemudian restart Apache.
<p><div class="wp-caption aligncenter" style="width: 380px"><img title="Add line" src="http://my.rizkhey.net/files/addline.JPG" alt="Tambahkan Line untuk memanggil Extension SQLSrv" width="370" height="98" /><p class="wp-caption-text">Tambahkan Line untuk memanggil Extension SQLSrv</p></div></li>
<li>Pergilah ke halaman phpinfo(apabila menggunakan XAMPP) biasanya ada di alamat: &#8216;http://localhost/xampp/phpinfo.php&#8217; carilah sqlsrv. Apabila Anda berhsail, maka akan muncul di dalam list extension PHP yang aktif
<div class="wp-caption aligncenter" style="width: 460px"><a title="SQL server native driver active" href="http://my.rizkhey.net/files/sqlsrv_active.JPG"><img title="SQL server native driver active" src="http://my.rizkhey.net/files/ext_thumb_sqlsrv_active.JPG" alt="SQL server native driver active" width="450" height="223" /></a><p class="wp-caption-text">Extension sqlsrv Aktif di halaman phpinfo</p></div>
<p style="text-align: center;">
</li>
<li>Coba jalankan beberapa code sqlsrv untuk test, simplenya  saya  gunakan code seperti ini
<div class="wp-caption aligncenter" style="width: 460px"><a href="http://my.rizkhey.net/files/testCode.JPG"><img title="Contoh Code Untuk mengetest" src="http://my.rizkhey.net/files/ext_thumb_testCode.JPG" alt="Contoh Code Untuk mengetest" width="450" height="208" /></a><p class="wp-caption-text">Contoh Code Untuk mengetest</p></div>
<p>Apabila hasilnya keluar tanpa ada error, maka Anda berhasil menginstall extension sqlsrv.</li>
</ol>
<p style="text-align: justify;">Yang perlu diperhatikan disini adalah Pada field/column yang berjenis DATETIME, akan dikembalikan dalam bentuk Object berisi <em>value</em>-nya sendiri, <em>timezone type</em> dan  juga <em>timezone</em>-nya. Selain itu apabila Anda menggunakan ADODB sebagai abstraction layer untuk database, driver yang Anda bisa gunakan adalah &#8220;<em><strong>mssqlnative</strong></em>&#8220;.</p>
<p style="text-align: justify;">Tetapi bukan tanpa pekerjaan, ADODB &#8220;<em>mssqlnative</em>&#8221; driver mengembalikan value tanpa array untuk jenis DATETIME, hanya saja di sisipi dengan huruf  &#8220;T&#8221; sebagai seperasi pemisah antara tanggal dan waktu(biasanya spasi) dan diakhiri dengan huruf &#8220;Z&#8221;.</p>
<p style="text-align: justify;">Intinya  saya  belum tahu apa maksudnya itu(maklum telmi), Anda bisa mengeditnya di file &#8220;adodb-mssqlnative.inc.php&#8221; di folder &#8220;<em><strong>drivers</strong></em>&#8221; di dalam folder ADODB. Sekitar line 788 hapus &#8220;\T&#8221; ganti dengan spasi  dan juga hapus &#8220;\Z&#8221;.</p>
<p style="text-align: justify;">Apabila Anda tidak menggunakan ADODB for PHP, dan Anda ingin agar return value kolom berjenis DATETIME di return sebagai string, maka tambahkan satu parameter di saat membuat koneksi ke sqlsrv. Contoh sbb:</p>
<p>[php highlight_lines="3"]<br />
<?php<br />
$serverName = "MyServer";<br />
$connectionInfo = array( "Database"=>&#8220;AdventureWorks&#8221;, &#8216;ReturnDatesAsStrings &#8216;=> true);<br />
$conn = sqlsrv_connect( $serverName, $connectionInfo);<br />
if( $conn === false )<br />
{<br />
   echo &#8220;Could not connect.\n&#8221;;<br />
   die( print_r( sqlsrv_errors(), true));<br />
}</p>
<p>sqlsrv_close( $conn);<br />
?><br />
[/php]</p>
<p style="text-align: justify;">SQL native driver ini menurut yang  saya  baca menggunakan odbc yang sudah dioptimalisasikan oleh Microsoft. Dan semenjak extension ini dibuat oleh Microsoft, sehingga akan dimaintain oleh Microsoft.</p>
<p style="text-align: justify;">Untuk beberapa sumber bacaan yang menarik:</p>
<ul>
<li><a href="http://blogs.msdn.com/b/brian_swan/archive/2010/03/08/mssql-vs-sqlsrv-what-s-the-difference-part-1.aspx" target="_blank">mssql vs. sqlsrv: What’s the Difference? (Part 1)</a></li>
<li><a href="http://blogs.msdn.com/b/brian_swan/archive/2010/03/10/mssql-vs-sqlsrv-what-s-the-difference-part-2.aspx">MSSQL vs. SQLSRV: What’s the Difference? (Part 2)</a></li>
</ul>
<p style="text-align: justify;">Sekian tutorial kali ini&#8230; semoga berguna <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></p>
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=3913&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2011/04/3913-sqlsrv-native-microsoft-sql-server-extension-for-php/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>My Image Manager ver.2</title>
		<link>http://neo.rizkhey.net/2011/01/3847-my-image-manager-ver-2</link>
		<comments>http://neo.rizkhey.net/2011/01/3847-my-image-manager-ver-2#comments</comments>
		<pubDate>Thu, 27 Jan 2011 07:50:07 +0000</pubDate>
		<dc:creator>リズキ</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://neo.rizkhey.net/?p=3847</guid>
		<description><![CDATA[
Tahun 2008 lalu gw membuat sebuah web-based image uploader yang gw pakai sampai tahun 2010 lalu. Aplikasi simple ini gw buat untuk kebutuhan bloging gw, walau WordPress sudah semakin canggih image managernya(croping, mirroring, rotating,etc), tapi ada satu miss yang sampai saat ini belum diberikan oleh wordpress(bahkan dari dulu tahun 2008) diantaranya adalah Watermark/Signaturing image. Sehingga [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a title="My ver 2" href="http://my.rizkhey.net/files/1_09-Custom-Size-Thumbnail.JPG"><img src="http://my.rizkhey.net/files/cust_6_headline.jpg" alt="My ver 2" /></a></p>
<p style="text-align: justify;">Tahun 2008 lalu gw membuat sebuah <a href="http://project.rizkhey.net/projectdetail.php?id=7" target="_blank">web-based image uploader</a> yang gw pakai sampai tahun 2010 lalu. Aplikasi simple ini gw buat untuk kebutuhan bloging gw, walau WordPress sudah semakin canggih image managernya(croping, mirroring, rotating,etc), tapi ada satu miss yang sampai saat ini belum diberikan oleh wordpress(bahkan dari dulu tahun 2008) diantaranya adalah Watermark/Signaturing image. Sehingga tahun 2008 gw membuat aplikasi dengan pengetahuan seadanya untuk memenuhi kebutuhan gw saat itu.</p>
<p><span id="more-3847"></span></p>
<p style="text-align: justify;">Dua tahun berlalu, banyak yang ingin gw perbaiki. Tetapi seperti biasa, gw males liat coding gw dua tahun yang lalu <img src='http://neo.rizkhey.net/smilies/yahoo_tongue.gif' alt='&#58;&#80;' class='wp-smiley' width='18' height='18' title='&#58;&#80;' /> sehingga gw memutuskan membuat baru dari awal. Dilengkapi dengan beberapa fitur baru dan beberapa pengurangan fitur yang gw anggap ga perlu, selain itu dengan hasil evaluasi kebutuhan selama 2 tahun akhirnya akhir tahun lalu gw meng-upgrade system image managernya. Sampai hari ini gw melakukan beberapa penyempurnaan dan penambahan sedikit fasilitas.</p>
<p style="text-align: justify;">
<div id="attachment_3848" class="wp-caption aligncenter" style="width: 74px"><a href="http://download.rizkhey.net/view.php?file=script/My+ver2/my2.7z"><img class="size-full wp-image-3848" title="stock_bottom" src="http://neo.rizkhey.net/wp-content/uploads/2011/01/stock_bottom.png" alt="Download" width="64" height="64" /></a><p class="wp-caption-text">Download My ver.2 </p></div>
<blockquote>
<p style="text-align: justify;">Fasilitas:</p>
<ol>
<li>Image support jpg,gif, and PNG.</li>
<li>Proses Image dengan GD Library atau Image Magick.</li>
<li>4 cara upload : Standart Multiple Upload, Flash Upload(seperti Image Manager di WordPress dapat memilih lebih dari satu file), URL Upload, Image in Zip pack Upload(Zip only <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> ).</li>
<li>3 type Thumbnail: Standart, Extra(sometimes you need a bigger thumbnail for main image in a post) dan Custom Thumbnail(With Area Croping).</li>
<li>Watermarking/Signaturing with Image(png only) dengan posisi yang bisa diatur dengan preset di tengah, kanan atas, kanan bawah, kiri atas, atau kiri bawah.</li>
<li>Derajat transparansi dari Watermark tetap bisa diatur <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /></li>
<li>Default Size Thumbnail &amp; Extra Thumbnail dapat di setting sendiri.</li>
<li>QuickTag, untuk mendapatkan tag untuk digunakan di forum atau blog tidak usah ke halaman detail tiap-tiap image.</li>
</ol>
</blockquote>
<blockquote><p>System requirement:</p></blockquote>
<blockquote>
<ul>
<li>Webserver(tested on Apache 2)</li>
<li>PHP 5,2 atau lebih(tested di PHP 5,3)</li>
<li>Mysql 5 Database</li>
</ul>
</blockquote>
<blockquote><p>Komponen eksternal yang dipakai:</p>
<ul>
<li><a href="http://www.jquery.com" target="_blank">jQuery </a>(make anything simpler <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /> )</li>
<li><a href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank">jQuery Lightbox</a> (Some Decoration on previewing Thumbnail)</li>
<li><a href="http://deepliquid.com/content/Jcrop.html" target="_blank">jCrop</a> (For Custom Thumbnail creator)</li>
<li><a href="http://demo.swfupload.org/v220/index.htm" target="_blank">swfUpload</a> (For easy multi Upload <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /> )</li>
<li><a href="http://flowplayer.org/tools/" target="_blank">jQuery Tools</a> (for HTML5 slider range input)</li>
<li><a href="http://adodb.sourceforge.net/" target="_blank">ADODB for PHP</a> (for Database Abstraction Layer <img src='http://neo.rizkhey.net/smilies/yahoo_smiley.gif' alt='&#58;&#41;' class='wp-smiley' width='18' height='18' title='&#58;&#41;' /> )</li>
<li><a href="http://www.phpclasses.org/package/2495-PHP-Pack-and-unpack-files-packed-in-ZIP-archives.html" target="_blank">dUnzip Classes</a> (For Unziping purpose <img src='http://neo.rizkhey.net/smilies/yahoo_bigsmile.gif' alt='&#58;&#68;' class='wp-smiley' width='18' height='18' title='&#58;&#68;' /> )</li>
</ul>
<p>Notes:</p>
<ul>
<li>Beberapa bagian aplikasi menggunakan AJAX dan beberapa bagian menggunakan element HTML5 gunakan browser yang mensupport AJAX atau HTML5 untuk hasil terbaik.</li>
<li>Tested Browser: IE8+, Firefox 3.6, Google Chrome 8, Opera 10.</li>
</ul>
</blockquote>
<p>Untuk Installasinya:</p>
<ol>
<li>Extract file yang sudah di download</li>
<li>Buat sebuah database di Mysql</li>
<li>Import file &#8220;<em>my2-full.sql.gz</em>&#8221; yang ada di dalam folder &#8220;<em>DB_Drop</em>&#8220;</li>
<li>cari file &#8220;<em>config.php-sample</em>&#8221; di rename menjadi &#8220;<em>config.php</em>&#8220;</li>
<li>Buka file &#8220;<em>config.php</em>&#8220;, edit DB connection seperti host,username, etc di bagian config tsb, kemudian ubah isi variable &#8220;<em>$url</em>&#8221; sesuai dengan URL tempat image manager akan diupload.</li>
<li>Upload Semua file ke server, pastikan CHMOD beberapa folder seperti &#8220;<em>files</em>&#8220;,&#8221;<em>temp&#8221;</em>, dan &#8220;<em>tmp</em>&#8221; supaya bisa ditulis.</li>
<li>Buka URL tempat Image Manager diupload, Login dengan default username dan password yaitu &#8220;<em>admin</em>&#8221; dan passwordnya &#8220;<em>admin</em>&#8221; tanpa tanda kutip.</li>
<li>Aplikasi siap dipakai</li>
</ol>
<p>Berikut ini adalah beberapa contoh tampilan layarnya:</p>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/1_01.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_1_01.JPG" alt="My Ver2 Image Manager" width="450" height="270" /></a><p class="wp-caption-text">Login Page</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/02-gallery-Explain.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_02-gallery-Explain.JPG" alt="My Ver2 Image Manager" width="450" height="190" /></a><p class="wp-caption-text">Gallery Control</p></div>
<p style="text-align: center;">
<div class="wp-caption aligncenter" style="width: 460px"><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/04-PCUpload-A-FlashUpload.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_04-PCUpload-A-FlashUpload.JPG" alt="My Ver2 Image Manager" width="450" height="270" /></a></p>
<p><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/05-PCUpload-A-FlashUpload.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_05-PCUpload-A-FlashUpload.JPG" alt="My Ver2 Image Manager" /></a></p>
<p><p class="wp-caption-text">Flash Upload</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/06-PCUpload-B-NonFlash.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_06-PCUpload-B-NonFlash.JPG" alt="My Ver2 Image Manager" width="450" height="270" /></a><p class="wp-caption-text">Standart Upload</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/07-URL-Upload.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_07-URL-Upload.JPG" alt="My Ver2 Image Manager" width="450" height="270" /></a><p class="wp-caption-text">URL Upload</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/08-Zip-File-Upload.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_08-Zip-File-Upload.JPG" alt="My Ver2 Image Manager" width="450" height="270" /></a><p class="wp-caption-text">Zip upload</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/11-Image-Detail.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_11-Image-Detail.JPG" alt="My Ver2 Image Manager" width="450" height="270" /></a><p class="wp-caption-text">Image Properties</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My ver 2" href="http://my.rizkhey.net/files/1_09-Custom-Size-Thumbnail.JPG"><img title="My ver 2" src="http://my.rizkhey.net/files/ext_thumb_1_09-Custom-Size-Thumbnail.JPG" alt="My ver 2" width="450" height="270" /></a><p class="wp-caption-text">Custom Thumbnail Maker</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My Ver2 Image Manager" href="http://my.rizkhey.net/files/10-Custom-Thumbnail-List.JPG"><img title="My Ver2 Image Manager" src="http://my.rizkhey.net/files/ext_thumb_10-Custom-Thumbnail-List.JPG" alt="My Ver2 Image Manager" width="450" height="270" /></a><p class="wp-caption-text">Custom Thumbnail List</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My ver 2" href="http://my.rizkhey.net/files/1_13-Watermark.JPG"><img title="My ver 2" src="http://my.rizkhey.net/files/ext_thumb_1_13-Watermark.JPG" alt="My ver 2" width="450" height="270" /></a><p class="wp-caption-text">Watermark Option</p></div>
<div class="wp-caption aligncenter" style="width: 460px"><a title="My ver 2" href="http://my.rizkhey.net/files/1_12-Option.JPG"><img title="My ver 2" src="http://my.rizkhey.net/files/ext_thumb_1_12-Option.JPG" alt="My ver 2" width="450" height="270" /></a><p class="wp-caption-text">Option</p></div>
<p style="text-align: center;">
<img src="http://neo.rizkhey.net/?ak_action=api_record_view&id=3847&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://neo.rizkhey.net/2011/01/3847-my-image-manager-ver-2/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

