<?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>Blog Adiputra</title>
	<atom:link href="http://www.adiputra.web.id/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.adiputra.web.id</link>
	<description>Belajar, Berbagi, dan Berkarya</description>
	<lastBuildDate>Tue, 15 May 2012 03:11:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Setting JCrop pada Codeigniter</title>
		<link>http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/</link>
		<comments>http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/#comments</comments>
		<pubDate>Fri, 11 May 2012 19:22:33 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[Code Snippet]]></category>
		<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jCrop]]></category>
		<category><![CDATA[jCrop Codeigniter]]></category>
		<category><![CDATA[Setting jCrop]]></category>
		<category><![CDATA[Tutorial Codeigniter]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=152</guid>
		<description><![CDATA[Bagaimana cara setting jCrop pada Codeigniter. eh jCrop itu apa ya ? jcrop adalah plugin jQuery powerfull yang berguna untuk melakukan Cropping atau pemotongan gambar sesuai yang kita inginkan. Setiap Photo Editor kayak PhotoShop, Paint, PhotoScape pasti ada fitur untuk meng-crop gambar sesuai yang kita mau. Kasus yang mungkin teman-teman lihat adalah pada Facebook ya.. [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.adiputra.web.id/wp-content/uploads/2012/04/codeigniter-lg.gif" alt="" title="codeigniter-lg" width="230" height="201" class="alignleft size-full wp-image-99" />Bagaimana cara setting jCrop pada Codeigniter. eh jCrop itu apa ya ? jcrop adalah plugin jQuery powerfull yang berguna untuk melakukan Cropping atau pemotongan gambar sesuai yang kita inginkan. Setiap Photo Editor kayak PhotoShop, Paint, PhotoScape pasti ada fitur untuk meng-crop gambar sesuai yang kita mau. Kasus yang mungkin teman-teman lihat adalah pada Facebook ya..<span id="more-152"></span></p>
<p>Baiklah, bagaimana cara setting jCrop dengan Codeigniter, berikut step sederhana nya.</p>
<p>Jangan lupa download terlebih dahulu jCrop di sini : <a href="http://deepliquid.com/content/Jcrop.html">http://deepliquid.com/content/Jcrop.html</a>. Setelah di download, lakukan pengaturan codeigniter teman-teman agar si index.php nya hilang. Lalu, buat folder JS, CSS dan Images dalam projek codeigniter teman, tambahkan pula folder result dalam folder Images untuk menyimpan hasil crop gambar, simpan semua css yang didapat dari jCrop dalam folder CSS yang anda buat di dalam codeigniter, lakukan hal yang sama pada file JS dan gambar-gambar yang didapat dari jCrop.</p>
<p><a href="http://www.adiputra.web.id/wp-content/uploads/2012/05/jcrop1..jpg"><img src="http://www.adiputra.web.id/wp-content/uploads/2012/05/jcrop1..jpg" alt="jCrop dengan Codeigniter" title="jcrop1" width="174" height="115" class="aligncenter size-full wp-image-153" /></a></p>
<p>Bila sudah, setting controller yang pertama di-load adalah &#8220;Upload&#8221; *opsional sih, biar sama aja*. lalu buat controller tersebut seperti kode dibawah ini.</p>
<div class="codecolorer-container php default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span> <span style="color: #990000;">defined</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'BASEPATH'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #990000;">exit</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'No direct script access allowed'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">class</span> Upload <span style="color: #000000; font-weight: bold;">extends</span> CI_Controller <span style="color: #009900;">&#123;</span><br />
<br />
&nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> index<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><br />
&nbsp; <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># panggil view crop<br />
</span>&nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">view</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'crop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> do_crop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># ambil width crop<br />
</span>&nbsp; &nbsp; <span style="color: #000088;">$targ_w</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'w'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># abmil heigth crop<br />
</span>&nbsp; &nbsp; <span style="color: #000088;">$targ_h</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'h'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># rasio gambar crop<br />
</span>&nbsp; &nbsp; <span style="color: #000088;">$jpeg_quality</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">90</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># folder tempat gambar yang mau di crop<br />
</span>&nbsp; &nbsp; <span style="color: #000088;">$src</span> <span style="color: #339933;">=</span> APPPATH <span style="color: #339933;">.</span> <span style="color: #0000ff;">'../images/pool.jpg'</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># inisial handle copy gambar<br />
</span>&nbsp; &nbsp; <span style="color: #000088;">$img_r</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecreatefromjpeg</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$src</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$dst_r</span> <span style="color: #339933;">=</span> <span style="color: #990000;">ImageCreateTrueColor</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$targ_w</span><span style="color: #339933;">,</span> <span style="color: #000088;">$targ_h</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># simpan hasil croping pada folder lain<br />
</span>&nbsp; &nbsp; <span style="color: #000088;">$path_img_crop</span> <span style="color: #339933;">=</span> <span style="color: #990000;">realpath</span><span style="color: #009900;">&#40;</span>APPPATH <span style="color: #339933;">.</span> <span style="color: #0000ff;">'../images/result'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># nama gambar yg di crop<br />
</span>&nbsp; &nbsp; <span style="color: #000088;">$img_name_crop</span> <span style="color: #339933;">=</span> <span style="color: #990000;">time</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'.jpg'</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># proses copy<br />
</span>&nbsp; &nbsp; <span style="color: #990000;">imagecopyresampled</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$dst_r</span><span style="color: #339933;">,</span><span style="color: #000088;">$img_r</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'x'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'y'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #000088;">$targ_w</span><span style="color: #339933;">,</span><span style="color: #000088;">$targ_h</span><span style="color: #339933;">,</span><span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'w'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'h'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># buat gambar<br />
</span>&nbsp; &nbsp; <span style="color: #990000;">imagejpeg</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$dst_r</span><span style="color: #339933;">,</span><span style="color: #000088;">$path_img_crop</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'/'</span><span style="color: #339933;">.</span> <span style="color: #000088;">$img_name_crop</span><span style="color: #339933;">,</span><span style="color: #000088;">$jpeg_quality</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><br />
<span style="color: #009900;">&#125;</span><br />
<br />
<span style="color: #666666; font-style: italic;">/* End of file upload.php */</span><br />
<span style="color: #666666; font-style: italic;">/* Location: ./application/controllers/upload.php */</span></div></td></tr></tbody></table></div>
<p>Bila sudah, sekarang kita buat view &#8220;crop.php&#8221; seperti pada kode dibawah ini :</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&lt;?php echo base_url(); ?&gt;</span></span>js/jquery.min.js&quot;&gt;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&lt;?php echo base_url(); ?&gt;</span></span>js/jquery.Jcrop.js&quot;&gt;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&lt;?php echo base_url(); ?&gt;</span></span>css/jquery.Jcrop.css&quot; type=&quot;text/css&quot; /&gt;<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&lt;?php echo base_url(); ?&gt;</span></span>css/demos.css&quot; type=&quot;text/css&quot; /&gt;<br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Javascript&quot;</span>&gt;</span><br />
<br />
&nbsp; &nbsp; &nbsp; $(function(){<br />
&nbsp; &nbsp; &nbsp; &nbsp; var jcrop_api;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; $('#cropbox').Jcrop({<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aspectRatio: 1,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onSelect: updateCoords,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSelect: [ 0, 0, 15, 15 ]<br />
&nbsp; &nbsp; &nbsp; &nbsp; },function(){<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jcrop_api = this;<br />
&nbsp; &nbsp; &nbsp; &nbsp; });<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; jcrop_api.setOptions({ <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bgFade: true,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bgOpacity: 0.4<br />
&nbsp; &nbsp; &nbsp; &nbsp; });<br />
&nbsp; &nbsp; &nbsp; });<br />
<br />
&nbsp; &nbsp; &nbsp; function updateCoords(c)<br />
&nbsp; &nbsp; &nbsp; {<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('#x').val(c.x);<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('#y').val(c.y);<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('#w').val(c.w);<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('#h').val(c.h);<br />
&nbsp; &nbsp; &nbsp; };<br />
<br />
&nbsp; &nbsp; &nbsp; function checkCoords()<br />
&nbsp; &nbsp; &nbsp; {<br />
&nbsp; &nbsp; &nbsp; &nbsp; if (parseInt($('#w').val())) return true;<br />
&nbsp; &nbsp; &nbsp; &nbsp; alert('Please select a crop region then press submit.');<br />
&nbsp; &nbsp; &nbsp; &nbsp; return false;<br />
&nbsp; &nbsp; &nbsp; };<br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;outer&quot;</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;jcExample&quot;</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;article&quot;</span>&gt;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>Jcrop - Crop Behavior<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #808080; font-style: italic;">&lt;!-- This is the image we're attaching Jcrop to --&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&lt;?php echo base_url(); ?&gt;</span></span>images/pool.jpg&quot; id=&quot;cropbox&quot; /&gt;<br />
<br />
&nbsp; &nbsp; <span style="color: #808080; font-style: italic;">&lt;!-- This is the form that our event handler fills --&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">action</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&lt;?php echo base_url(); ?&gt;</span></span>upload/do_crop&quot; method=&quot;post&quot; onsubmit=&quot;return checkCoords();&quot;&gt;<br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hidden&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;x&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;x&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hidden&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;y&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;y&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hidden&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;w&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;w&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hidden&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;h&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;h&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Crop Image&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">form</span>&gt;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">b</span>&gt;</span>An example server-side crop script.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">b</span>&gt;</span> Hidden form values<br />
&nbsp; &nbsp; &nbsp; are set when a selection is made. If you press the <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">i</span>&gt;</span>Crop Image<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">i</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; button, the form will be submitted and a 150x150 thumbnail will be<br />
&nbsp; &nbsp; &nbsp; dumped to the browser. Try it!<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;dl_links&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://deepliquid.com/content/Jcrop.html&quot;</span>&gt;</span>Jcrop Home<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> |<br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://deepliquid.com/content/Jcrop_Manual.html&quot;</span>&gt;</span>Manual (Docs)<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
<br />
<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Handle cropping-nya bisa dilihat pada function do_crop() pada controller &#8220;upload.php&#8221;. Lalu jangan lupa pemanggilan js jcrop dan gambar yang ingin di-crop. Pengaturan lengkap mengenai jcrop bisa dibaca pada manualnya : <a href="http://deepliquid.com/content/Jcrop_Manual.html">http://deepliquid.com/content/Jcrop_Manual.html</a></p>
<p>Sampai sini, jalankan&#8230;</p>
<p><a href="http://www.adiputra.web.id/wp-content/uploads/2012/05/hasil-jcrop.jpg"><img src="http://www.adiputra.web.id/wp-content/uploads/2012/05/hasil-jcrop-300x160.jpg" alt="" title="hasil jcrop" width="300" height="160" class="aligncenter size-medium wp-image-155" /></a></p>
<p>Moga Setting jCrop pada Codeigniter bisa digunakan diprojek teman-teman. <img src='http://www.adiputra.web.id/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/mengupload-dan-menampilkan-gambar-dengan-php/" rel="bookmark" class="crp_title">Mengupload dan Menampilkan Gambar Dengan PHP</a></li><li><a href="http://www.adiputra.web.id/membuat-email-responder-sederhana-dengan-php/" rel="bookmark" class="crp_title">Membuat Email Responder Sederhana Dengan PHP</a></li><li><a href="http://www.adiputra.web.id/watermark-gambar-dengan-php/" rel="bookmark" class="crp_title">Watermark Gambar Dengan PHP</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cara Mengambil Nilai Dolar dari Website Bank BCA dan Mandiri dengan PHP</title>
		<link>http://www.adiputra.web.id/cara-mengambil-nilai-dolar-dari-website-bank-bca-dan-mandiri-dengan-php/</link>
		<comments>http://www.adiputra.web.id/cara-mengambil-nilai-dolar-dari-website-bank-bca-dan-mandiri-dengan-php/#comments</comments>
		<pubDate>Fri, 11 May 2012 17:45:47 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[Code Snippet]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[BCA]]></category>
		<category><![CDATA[cUlr PHP]]></category>
		<category><![CDATA[Curl]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[DOM PHP]]></category>
		<category><![CDATA[Mandiri]]></category>
		<category><![CDATA[Mengambil Dolar]]></category>
		<category><![CDATA[Teknik cUrl]]></category>
		<category><![CDATA[Tutorial PHP]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=147</guid>
		<description><![CDATA[Cara mengambil nilai dolar dari website bank BCA dan Mandiri dengan PHP dapat dilakukan dengan teknik cUrl dan DOM nya milik PHP. Biasanya teknik ini digunakan untuk keperluan e-commerce saat si toko menginginkan harga produk nya ter-list juga dengan harga dolar yang sesuai dengan perubahan dolar. Aneh nya, *saya juga gak ngerti* nilai dolar dari [...]]]></description>
			<content:encoded><![CDATA[<p>Cara mengambil nilai dolar dari website bank BCA dan Mandiri dengan PHP dapat dilakukan dengan teknik cUrl dan DOM nya milik PHP. Biasanya teknik ini digunakan untuk keperluan e-commerce saat si toko menginginkan harga produk nya ter-list juga dengan harga dolar yang sesuai dengan perubahan dolar. <span id="more-147"></span>Aneh nya, *saya juga gak ngerti* nilai dolar dari bank <a href="http://www.bca.co.id/" title="Bank BCA">BCA</a> atau <a href="http://www.bankmandiri.co.id/" title="Bank Mandiri">Mandiri</a> itu tidak sama yah. Begitu juga kalau saya lihat dari <a href="http://www.google.com/finance/converter" title="Google Currency Converter">google</a> maupun si <a href="http://finance.yahoo.com/currency-converter/" title="Yahoo Finance">Yahoo</a> punya nilai yang beda. Terlepas dari  itu semua, kita balikin ke yang punya toko mau nya gemana.</p>
<p>Berikut ini code untuk menampilkan nilai harga jual dan beli Dolar dari website bank BCA.</p>
<div class="codecolorer-container php default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
&nbsp; <span style="color: #000088;">$url</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'http://www.bca.co.id'</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;curl_init&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span><br />
&nbsp; &nbsp; <span style="color: #990000;">die</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'CURL tidak ada, setting di php.ini Anda'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #000088;">$chp</span> <span style="color: #339933;">=</span> <span style="color: #990000;">curl_init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #990000;">curl_setopt</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chp</span><span style="color: #339933;">,</span> CURLOPT_RETURNTRANSFER<span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #990000;">curl_setopt</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chp</span><span style="color: #339933;">,</span> CURLOPT_URL<span style="color: #339933;">,</span> <span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #000088;">$content</span> <span style="color: #339933;">=</span> <span style="color: #990000;">curl_exec</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chp</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># echo $content;<br />
</span>&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># menghilangkan error karna markup yg tidak lengkap saat menggunakan DOMDocument<br />
</span>&nbsp; <span style="color: #990000;">var_dump</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">libxml_use_internal_errors</span><span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># akses DOM bawaan PHP<br />
</span>&nbsp; <span style="color: #000088;">$dom</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> DOMDocument<span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># load HTML hasil CURL<br />
</span>&nbsp; <span style="color: #000088;">$dom</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">loadHTML</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$content</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># lakukan looping<br />
</span>&nbsp; <span style="color: #000088;">$rows</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$dom</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getElementsByTagName</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'tr'</span> <span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$tr</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$cells</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$tr</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getElementsByTagName</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'td'</span> <span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$td</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #000088;">$cells</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$td</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">nodeValue</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$rows</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$cells</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># lihat detail hasil looping<br />
</span>&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;&lt;pre&gt;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #990000;">print_r</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$rows</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;Bank BCA : &lt;br /&gt;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;Harga Jual 1 dolar($) itu = Rp. &quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$rows</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;&lt;br /&gt;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;Harga Beli 1 dolar($) itu = Rp. &quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$rows</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Lalu ini kode untuk mengambil dolar pada website nya bank Mandiri :</p>
<div class="codecolorer-container php default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
&nbsp; <span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
&nbsp; <span style="color: #000088;">$url</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'http://www.bankmandiri.co.id'</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;curl_init&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span><br />
&nbsp; &nbsp; <span style="color: #990000;">die</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'CURL tidak ada, setting di php.ini Anda'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #000088;">$chp</span> <span style="color: #339933;">=</span> <span style="color: #990000;">curl_init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #990000;">curl_setopt</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chp</span><span style="color: #339933;">,</span> CURLOPT_RETURNTRANSFER<span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #990000;">curl_setopt</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chp</span><span style="color: #339933;">,</span> CURLOPT_URL<span style="color: #339933;">,</span> <span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #000088;">$content</span> <span style="color: #339933;">=</span> <span style="color: #990000;">curl_exec</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chp</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># echo $content;<br />
</span>&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># menghilangkan error karna markup yg tidak lengkap saat menggunakan DOMDocument<br />
</span>&nbsp; <span style="color: #990000;">var_dump</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">libxml_use_internal_errors</span><span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># akses DOM bawaan PHP<br />
</span>&nbsp; <span style="color: #000088;">$dom</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> DOMDocument<span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># load HTML hasil CURL<br />
</span>&nbsp; <span style="color: #000088;">$dom</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">loadHTML</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$content</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># lakukan looping<br />
</span>&nbsp; <span style="color: #000088;">$rows</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$dom</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getElementsByTagName</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'tr'</span> <span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$tr</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$cells</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$tr</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getElementsByTagName</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'td'</span> <span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$td</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #000088;">$cells</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$td</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">nodeValue</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000088;">$rows</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$cells</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #666666; font-style: italic;"># lihat detail hasil looping<br />
</span>&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;&lt;pre&gt;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #990000;">print_r</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$rows</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;Bank Mandiri : &lt;br /&gt;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;Harga Jual 1 dolar($) itu = Rp. &quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$rows</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;&lt;br /&gt;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;Harga Beli 1 dolar($) itu = Rp. &quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$rows</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
<span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<p>Silahkan coba jalankan salah satu kode diatas, lalu bandingkan dengan nilai dolar di website Bank BCA atau di Mandiri.</p>
<p>Sebenarnya code ini masih kurang bagus mengingat kita mesti liat struktur html dari website BCA atau Mandiri terlebih dahulu.Tapi yaa semoga aja si BCA atau Mandiri gak ngubah-ngubah struktur website nya terutama tampilan value si dolar nya.</p>
<p>Sekian penjelasan dan kode Cara mengambil nilai dolar dari website bank BCA dan Mandiri dengan PHP, moga ada manfaat nya. <img src='http://www.adiputra.web.id/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/validasi-tipe-gambar-saat-upload-dengan-php/" rel="bookmark" class="crp_title">Validasi Tipe Gambar Saat Upload Dengan PHP</a></li><li><a href="http://www.adiputra.web.id/validasi-dimesi-gambar-dengan-php/" rel="bookmark" class="crp_title">Validasi Dimesi Gambar Dengan PHP</a></li><li><a href="http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/" rel="bookmark" class="crp_title">Setting JCrop pada Codeigniter</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/cara-mengambil-nilai-dolar-dari-website-bank-bca-dan-mandiri-dengan-php/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Instalasi Twitter API pada Codeigniter</title>
		<link>http://www.adiputra.web.id/instalasi-twitter-api-pada-codeigniter/</link>
		<comments>http://www.adiputra.web.id/instalasi-twitter-api-pada-codeigniter/#comments</comments>
		<pubDate>Sat, 14 Apr 2012 08:13:22 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[API]]></category>
		<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[Codeigniter API Twitter]]></category>
		<category><![CDATA[Codeigniter Tutorial]]></category>
		<category><![CDATA[Twitter API]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=121</guid>
		<description><![CDATA[Baik Twitter ataupun Facebook memegang peran penting saat ini untuk keperluan tertentu baik pada website, aplikasi desktop ataupun aplikasi mobile. Pada website, twitter digunakan untuk promosi, ataupun sekedar menyapa customer suatu perusahaan dan lain sebagainya. Untuk promosi, suatu website membuat fungsi khusus untuk bagaimana caranya si website dapat mengirimkan data-data promosi ke twitter secara langsung [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.adiputra.web.id/wp-content/uploads/2012/04/codeigniter-lg.gif" alt="" title="codeigniter-lg" width="230" height="201" class="alignleft size-full wp-image-99" />Baik Twitter ataupun Facebook memegang peran penting saat ini untuk keperluan tertentu baik pada website, aplikasi desktop ataupun aplikasi mobile. Pada website, twitter digunakan untuk promosi, ataupun sekedar menyapa customer suatu perusahaan dan lain sebagainya. Untuk promosi, suatu website membuat fungsi khusus untuk bagaimana caranya si website dapat mengirimkan data-data promosi ke twitter secara langsung tanpa harus buka akun twitter.</p>
<p>Bagaimana caranya website dapat mengirimkan data-data promosi ke twitter secara langsung tanpa harus login akun twitter kita ?? Berikut penjelasan yang saya coba tulis pada artikel ini.<span id="more-121"></span></p>
<p>Pada Twitter, terdapat API untuk mengakses data-data nya secara langsung. Dokumentasinya dapat dilihat pada link ini. Lalu bagaimana cara konfigurasinya agar website dapat terkoneksi langsung dengan twitter pada Codeigniter ?</p>
<p>Sebelumnya, kita buat aplikasi terlebih dahulu pada twitter. Cara membuat aplikasi twitter dapat langsung pada link ini { <a href="https://dev.twitter.com/apps/new">https://dev.twitter.com/apps/new</a>  }.</p>
<p><a href="http://www.adiputra.web.id/wp-content/uploads/2012/04/create-application-twitter.jpg"><img src="http://www.adiputra.web.id/wp-content/uploads/2012/04/create-application-twitter-300x160.jpg" alt="" title="create application twitter" width="300" height="160" class="aligncenter size-medium wp-image-122" /></a></p>
<p>Setelah kita membuat aplikasi, kita akan mendapatkan kunci, customer key lalu customer secret.</p>
<p><a href="http://www.adiputra.web.id/wp-content/uploads/2012/04/customer-key-twitter.jpg"><img src="http://www.adiputra.web.id/wp-content/uploads/2012/04/customer-key-twitter-300x159.jpg" alt="" title="customer key twitter" width="300" height="159" class="aligncenter size-medium wp-image-123" /></a></p>
<p>Setelah itu, kita download terlebih dahulu Class Twitter di php. Class Twitter yang saya gunakan ini dari Abraham, dapat di download pada link berikut { <a href="https://github.com/abraham/twitteroauth">https://github.com/abraham/twitteroauth</a> }</p>
<p>Baik, kita sekarang langsung buka Codeigniter. Buat file pada folder config application dengan nama twitter.php. Isikan code seperti dibawah ini.</p>
<div class="codecolorer-container php default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000088;">$config</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'consumer_key'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;kode customer key yg didapat dr twitter&quot;</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$config</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'consumer_secret'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;kode customer secret yg didapat dr twitter&quot;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Lalu, Class Twitter dari Abraham yang kita download tadi, cari folder twitteroauth. Simpan pada libraries.</p>
<p><a href="http://www.adiputra.web.id/wp-content/uploads/2012/04/twitter-oauth.jpg"><img src="http://www.adiputra.web.id/wp-content/uploads/2012/04/twitter-oauth.jpg" alt="" title="twitter oauth" width="222" height="209" class="aligncenter size-full wp-image-124" /></a></p>
<p>Jika sudah, sekarang buat file controller dengan nama twitter.php. Isikan kode seperti dibawah ini.</p>
<div class="codecolorer-container php default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">class</span> Twitter <span style="color: #000000; font-weight: bold;">extends</span> CI_Controller<span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">function</span> __construct<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parent<span style="color: #339933;">::</span>__construct<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># load twitter config<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'twitter'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">function</span> login<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># include kan class twitter api<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #b1b100;">include_once</span> APPPATH<span style="color: #339933;">.</span><span style="color: #0000ff;">'libraries/twitteroauth/twitteroauth.php'</span><span style="color: #339933;">;</span> <br />
&nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># ambil customer key dan customer secret pada config file<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$consumer_key</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">item</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'consumer_key'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$consumer_secret</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">item</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'consumer_secret'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># buat objek untuk twitteroauth<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$oauth</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> TwitterOAuth<span style="color: #009900;">&#40;</span><span style="color: #000088;">$consumer_key</span><span style="color: #339933;">,</span><span style="color: #000088;">$consumer_secret</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># halaman callback untuk handle response dr twitter<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$callback</span> <span style="color: #339933;">=</span> base_url<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'twitter/callback'</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># request token<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$oauthRequest</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$oauth</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getRequestToken</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$callback</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># simpan sementara data request token pada session<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">session</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">set_userdata</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;o_tok&quot;</span><span style="color: #339933;">,</span><span style="color: #000088;">$oauthRequest</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'oauth_token'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">session</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">set_userdata</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;o_tok_secret&quot;</span><span style="color: #339933;">,</span><span style="color: #000088;">$oauthRequest</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'oauth_token_secret'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># panggil halaman authorize twitter<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$registerUrl</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$oauth</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getAuthorizeURL</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$oauthRequest</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; redirect<span style="color: #009900;">&#40;</span><span style="color: #000088;">$registerUrl</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">function</span> callback<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># include kembali class twitter<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #b1b100;">include_once</span> APPPATH<span style="color: #339933;">.</span><span style="color: #0000ff;">'libraries/twitteroauth/twitteroauth.php'</span><span style="color: #339933;">;</span> <br />
&nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># include customer key dan customer secret twitter<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$consumer_key</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">item</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'consumer_key'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$consumer_secret</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">item</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'consumer_secret'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># ambil session dari token yang telah dibuat pada fungsi login<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$o_token</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">session</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">userdata</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'o_tok'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$o_token_secret</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">session</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">userdata</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'o_tok_secret'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># buat objek twitter oauth dengan customer key dan secret beserta token yang di dapat pada fungsi login<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$connection</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> TwitterOAuth<span style="color: #009900;">&#40;</span><span style="color: #000088;">$consumer_key</span><span style="color: #339933;">,</span> <span style="color: #000088;">$consumer_secret</span><span style="color: #339933;">,</span> <span style="color: #000088;">$o_token</span><span style="color: #339933;">,</span> <span style="color: #000088;">$o_token_secret</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># dapatkan akses token dengan mengambil oauth_verifier<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$access_token</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$connection</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getAccessToken</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_REQUEST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'oauth_verifier'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># biasanya sy simpan data token, ID twitter, userid, screen name ke database<br />
</span>&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># agar nanti tidak usah melakukan objek twitter kembali, tinggal panggil token yang tersimpan pada database<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$data_token</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">&quot;twitter_id&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">&quot;o_token&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$access_token</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'oauth_token'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">&quot;o_token_secret&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$access_token</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'oauth_token_secret'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">&quot;user_id&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$access_token</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'user_id'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">&quot;screen_name&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$access_token</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'screen_name'</span><span style="color: #009900;">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># berikut cara update status otomatis tanpa login<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$data</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$connection</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'statuses/update'</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'status'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;status dari twitter api&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #339933;">*/</span><br />
&nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># lakukan proses penyimpanan data token, dll....<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<p>Jika sudah, saat nya kita coba akses fungsi login dari controller twitter.</p>
<p>Pada koding diatas, hanya mendapatkan token dan update status twitter API. Untuk melakukan aksi lainnya seperti otomatis follow ID tertentu, atau mendapatkan data-data lainnya pada twitter user login dapat dibaca API twitter pada halaman berikut ini { <a href="https://dev.twitter.com/docs/api">https://dev.twitter.com/docs/api</a>  }</p>
<p>Sampai sini Instalasi Twitter API pada Codeigniter, semoga bermanfaat. <img src='http://www.adiputra.web.id/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/instalasi-facebook-api-pada-codeigniter/" rel="bookmark" class="crp_title">Instalasi Facebook API pada Codeigniter</a></li><li><a href="http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/" rel="bookmark" class="crp_title">Setting JCrop pada Codeigniter</a></li><li><a href="http://www.adiputra.web.id/mengupload-dan-menampilkan-gambar-dengan-php/" rel="bookmark" class="crp_title">Mengupload dan Menampilkan Gambar Dengan PHP</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/instalasi-twitter-api-pada-codeigniter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Instalasi Facebook API pada Codeigniter</title>
		<link>http://www.adiputra.web.id/instalasi-facebook-api-pada-codeigniter/</link>
		<comments>http://www.adiputra.web.id/instalasi-facebook-api-pada-codeigniter/#comments</comments>
		<pubDate>Fri, 06 Apr 2012 19:29:08 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[API]]></category>
		<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Facebook API]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=96</guid>
		<description><![CDATA[Untuk menyambungkan website kita dengan Facebook base Codeigniter dapat kita lakukan dengan beberapa proses sederhana. Saya coba jelaskan pada artikel ini, semoga dapat dijadikan acuan terutama bagi saya dan teman-teman yang ingin menyambungkan website dengan Facebook yang biasa dikenal API Facebook. Sebelumnya kita harus mendaftarkan aplikasi terlebih dahulu pada Facebook. Setelah kita mendaftarkan aplikasi pada [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.adiputra.web.id/wp-content/uploads/2012/04/codeigniter-lg.gif" alt="" title="codeigniter-lg" width="230" height="201" class="alignleft size-full wp-image-99" />Untuk menyambungkan website kita dengan Facebook base Codeigniter dapat kita lakukan dengan beberapa proses sederhana. Saya coba jelaskan pada artikel ini, semoga dapat dijadikan acuan terutama bagi saya dan teman-teman yang ingin menyambungkan website dengan Facebook yang biasa dikenal API Facebook.<span id="more-96"></span></p>
<p>Sebelumnya kita harus mendaftarkan aplikasi terlebih dahulu pada Facebook. Setelah kita mendaftarkan aplikasi pada facebook, kita akan mendapatkan appID dan appSecret. Saya tidak akan menjelaskan detail cara mendaftarkan aplikasi pada Facebook, silahkan searching pada om google.</p>
<p><strong>Langkah Pertama</strong><br />
Buat file dalam folder config dengan nama facebook.php, isikan code dibawah ini :</p>
<div class="codecolorer-container php default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
&nbsp; &nbsp;<span style="color: #000088;">$config</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'appId'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;xxxxxxxxx&quot;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// APP ID FROM FACEBOOK</span><br />
&nbsp; &nbsp;<span style="color: #000088;">$config</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'secret'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;xxxxxxxxxxx&quot;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// APP SECRET FROM FACEBOOK</span><br />
&nbsp; &nbsp;<span style="color: #000088;">$config</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'cookie'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">TRUE</span><span style="color: #339933;">;</span><br />
<span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<p><a href="http://www.adiputra.web.id/wp-content/uploads/2012/04/config.jpg"><img src="http://www.adiputra.web.id/wp-content/uploads/2012/04/config-300x133.jpg" alt="" title="config" width="300" height="133" class="aligncenter size-medium wp-image-97" /></a><br />
<center><em>Klik Gambar untuk diperbesar</em></center></p>
<p><strong>Langkah Kedua</strong><br />
Download PHP SDK Facebook, lalu ambil file facebook.php dan fb_ca_chain_bundle. Masukan kedua file tersebut pada folder libraries. PHP SDK Facebook dapat kita download di documentasi situs Facebook API.</p>
<p><a href="http://www.adiputra.web.id/wp-content/uploads/2012/04/libraries.png"><img src="http://www.adiputra.web.id/wp-content/uploads/2012/04/libraries-300x169.png" alt="" title="libraries" width="300" height="169" class="aligncenter size-medium wp-image-98" /></a></p>
<p><center><em>Klik Gambar untuk diperbesar</em></center></p>
<p><strong>Langkah Ketiga</strong><br />
Buat Controller facebook.php lalu buat code seperti dibawah ini.</p>
<div class="codecolorer-container php default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">defined</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'BASEPATH'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #990000;">exit</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'No direct script access allowed.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">class</span> Facebook <span style="color: #000000; font-weight: bold;">extends</span> CI_Controller <span style="color: #009900;">&#123;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">function</span> __construct<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; parent<span style="color: #339933;">::</span>__construct<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;">// ====== facebok option setting -==========</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">load</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">library</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #339933;">,</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">item</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$fbConfig</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">item</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;">// ==========================================</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #000000; font-weight: bold;">function</span> register_facebook<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$fbConfig</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">item</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$url</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'https://graph.facebook.com/oauth/authorize?client_id='</span><span style="color: #339933;">.</span><span style="color: #000088;">$fbConfig</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'appId'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&amp;redirect_uri='</span><span style="color: #339933;">.</span>site_url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook/do_register_facebook_ext'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&amp;scope=email,read_stream,user_birthday,user_photos,photo_upload,publish_stream,manage_pages,status_update,offline_access,user_likes&amp;display=popup'</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; redirect<span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #000000; font-weight: bold;">function</span> do_register_facebook_ext<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$fbConfig</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">config</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">item</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">isset</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'code'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$token_url</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;https://graph.facebook.com/oauth/access_token?client_id=&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$fbConfig</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'appId'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;&amp;redirect_uri=&quot;</span><span style="color: #339933;">.</span>site_url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook/do_register_facebook_x'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;&amp;client_secret=&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$fbConfig</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'secret'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&amp;code='</span><span style="color: #339933;">.</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'code'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$token_data</span> <span style="color: #339933;">=</span> <span style="color: #990000;">file_get_contents</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$token_url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// grab data token</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #990000;">preg_match</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/access_token=([^&amp;]+)/&quot;</span><span style="color: #339933;">,</span><span style="color: #000088;">$token_data</span><span style="color: #339933;">,</span><span style="color: #000088;">$token</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// filter grap data untuk dapatkan token</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$access_token</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$token</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// ambil token FB</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># biasanya saya simpan access_token ke database bila perlu untuk melakukan proses API lainnya<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$url</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'https://graph.facebook.com/me?access_token='</span><span style="color: #339933;">.</span><span style="color: #000088;">$access_token</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;"># url untuk ambil data user Login FB<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$fb</span> &nbsp;<span style="color: #339933;">=</span><span style="color: #990000;">json_decode</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">file_get_contents</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// ambil data user login FB</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$id_fb</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$fb</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'id'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;"># ambil ID User FB<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$name_fb</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$fb</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;"># ambil Name User FB<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$image_fb</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'https://graph.facebook.com/'</span><span style="color: #339933;">.</span><span style="color: #000088;">$fb</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'/picture'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;"># ambil gambar User FB<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$email_fb</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$fb</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'email'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;"># ambil email jika email tidak disembunyikan<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># array ini untuk kirim ke wall user FB<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000088;">$attachment</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">'userid'</span><span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$id_fb</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">'access_token'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$access_token</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">'message'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'Pesan Header'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">'name'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;Nama Pesan&quot;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">'link'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;Link URL sisip disini&quot;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">'description'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'Penjelasan lebih lengkap sisip di sini juga'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0000ff;">'picture'</span><span style="color: #339933;">=&gt;</span><span style="color: #0000ff;">'gambar untuk kirim ke wall'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$post</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">facebook</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">api</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'/me/feed'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'POST'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$attachment</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># biasanya sy buat session untuk menyimpan data di halaman lain nya<br />
</span>&nbsp; &nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">session</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">set_userdata</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'id_fb'</span><span style="color: #339933;">,</span><span style="color: #000088;">$id_fb</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">session</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">set_userdata</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'name_fb'</span><span style="color: #339933;">,</span><span style="color: #000088;">$name_fb</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">session</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">set_userdata</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'image_fb'</span><span style="color: #339933;">,</span><span style="color: #000088;">$image_fb</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">session</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">set_userdata</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'email_fb'</span><span style="color: #339933;">,</span><span style="color: #000088;">$email_fb</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># panggil halaman selesai login<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;redirect<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'facebook/register_fb_finish'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #b1b100;">else</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #666666; font-style: italic;"># jika gagal dapatkan kode atau user FB tidak menyetujui aplikasi kita<br />
</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;gagal registrasi&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">function</span> register_fb_finish<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;hai..selesai login dengan fb&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p><strong>Langkah Ke Empat</strong><br />
Testing <img src='http://www.adiputra.web.id/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>Penjelasan bisa di liat pada koding diatas.<br />
Moga bermanfaat..</p>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/instalasi-twitter-api-pada-codeigniter/" rel="bookmark" class="crp_title">Instalasi Twitter API pada Codeigniter</a></li><li><a href="http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/" rel="bookmark" class="crp_title">Setting JCrop pada Codeigniter</a></li><li><a href="http://www.adiputra.web.id/mengupload-dan-menampilkan-gambar-dengan-php/" rel="bookmark" class="crp_title">Mengupload dan Menampilkan Gambar Dengan PHP</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/instalasi-facebook-api-pada-codeigniter/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Pengenalan jQuery Api Live</title>
		<link>http://www.adiputra.web.id/pengenalan-jquery-api-live/</link>
		<comments>http://www.adiputra.web.id/pengenalan-jquery-api-live/#comments</comments>
		<pubDate>Fri, 06 Apr 2012 17:08:05 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jQuery Dasar]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[jQuery Live]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=93</guid>
		<description><![CDATA[Web tidak lepas dengan namanya event, di klik, di mouseover, mouseleave, onchange dan banyak lagi event pada web. Penanganan event pada web harus jadi point plus bagi seorang web developer. Pada artikel ini saya ingin share mengenai penanganan event dengan api jquery live(). Apa bedanya penanganan event dengan api bind() dengan api live(), akan saya [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.adiputra.web.id/wp-content/uploads/2012/03/jquery.jpg" alt="" title="jquery-adiputra.web.id" width="246" height="174" class="alignleft size-full wp-image-62" />Web tidak lepas dengan namanya event, di klik, di mouseover, mouseleave, onchange dan banyak lagi event pada web. Penanganan event pada web harus jadi point plus bagi seorang web developer. Pada artikel ini saya ingin share mengenai penanganan event dengan api jquery live(). Apa bedanya penanganan event dengan api bind() dengan api live(), akan saya jelaskan pada artikel ini.<span id="more-93"></span></p>
<p>Agar lebih jelas, mari kita coba penggunaan api bind() untuk penanganan event kode seperti dibawah ini.</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;!doctype html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span>utf-<span style="color: #cc66cc;">8</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Live Jquery API<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;box&quot;</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>Element Text<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'text/javascript'</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'text/javascript'</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'external.js'</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Lalu saya buat sebuah handle javascript external dengan nama file external.js</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div ul li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li di click'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> li_clone <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">clone</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>li_clone<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>li_clone<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Pada kode diatas saya buat event, apabila element text di klik, copy element tersebut lalu tambahkan pada UL element. Untuk meng-copy sebuah element teman-teman bisa menggunakan api clone() jquery.</p>
<p><em>Demo bisa liat disini :</em> <a href="http://jsbin.com/enulob/3">http://jsbin.com/enulob/3</a></p>
<p>Saat menjalankan kode diatas, klik element text lalu akan terlihat bahwa terjadi penambahan element LI pada UL, itulah fungsi dari api clone(). Terlihat berjalan dengan baik ya..</p>
<p>Suatu saat pasti teman ingin menghandle bagaimana cara nya agar element yang sudah kita clone tadi dapat menjalankan fungsi handle event yang sama dengan event yang pertama. Pada kode diatas, saat proses penambahan element LI pada UL, saya sebut (LI kedua dan LI seterusnya), saat kita klik, maka LI kedua dan seterusnya tidak dapat menjalankan proses seperti layaknya LI pertama yaitu menambahkan element LI ke dalam UL. Lalu bagaimana agar LI kedua dan berikutnya dapat menjalankan aksi seperti LI pertama ??</p>
<p>Dengan adanya jquery api live(), kita dapat menyelesaikan solusi permasalahan sederhana kode diatas, berikut saya coba tulis handle dengan jquery api live().</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;!doctype html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span>utf-<span style="color: #cc66cc;">8</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Live Jquery API<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;box&quot;</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>Element Text<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'text/javascript'</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'text/javascript'</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'external.js'</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Lalu external.js nya seperti kode dibawah ini.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div ul li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li di click'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> li_clone <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">clone</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>li_clone<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>li_clone<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Saat dicoba, maka akan sesuai yang kita inginkan, baik element LI kedua atau berikutnya dapat menjalankan aksi seperti pada element LI pertama. </p>
<p><em>Demo bisa dilihat disini</em> : <a href="http://jsbin.com/exanik">http://jsbin.com/exanik</a></p>
<p>Menarik kan ??<br />
Semoga dapat menambah teknik skill teman-teman untuk handle event pada berbagai kasus web development.</p>
<blockquote><ul>
<li>Catatan Tambahan : api jQuery.live() untuk versi jquery 1.7+ sudah tergantikan dengan api jQuery.on()</li>
<li>
Referensi Tulisan : <a href="http://api.jquery.com/live/" title="http://api.jquery.com/live/" target="_blank">http://api.jquery.com/live/</a></li>
</ul>
</blockquote>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/pengenalan-jquery-api-bind/" rel="bookmark" class="crp_title">Pengenalan jQuery Api Bind</a></li><li><a href="http://www.adiputra.web.id/seleksi-banyak-element-melalui-index-dengan-jquery/" rel="bookmark" class="crp_title">Seleksi Banyak Element Melalui Index dengan jQuery</a></li><li><a href="http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/" rel="bookmark" class="crp_title">Setting JCrop pada Codeigniter</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/pengenalan-jquery-api-live/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Pengenalan jQuery Api Bind</title>
		<link>http://www.adiputra.web.id/pengenalan-jquery-api-bind/</link>
		<comments>http://www.adiputra.web.id/pengenalan-jquery-api-bind/#comments</comments>
		<pubDate>Sat, 31 Mar 2012 18:22:28 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jQuery Dasar]]></category>
		<category><![CDATA[Bind]]></category>
		<category><![CDATA[Event Handler]]></category>
		<category><![CDATA[Jquery Bind]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=75</guid>
		<description><![CDATA[Salah satu kemudahan dengan menggunakan jQuery sebagai framework javascript adalah banyak nya api yang memudahkan kita menempelkannya pada projek yang akan kita kerjakan. Tiap api memiliki fungsi dan kegunaan masing-masing. Pada artikel ini, saya akan coba sedikit menjelaskan apa itu api Bind pada jQuery. Langsung saja ke contoh kasus sederhana. 123456789101112131415161718192021222324&#60;!DOCTYPE html&#62; &#60;html&#62; &#60;head&#62; &#160; [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.adiputra.web.id/wp-content/uploads/2012/03/jquery.jpg" alt="" title="jquery-adiputra.web.id" width="246" height="174" class="alignleft size-full wp-image-62" />Salah satu kemudahan dengan menggunakan jQuery sebagai framework javascript adalah banyak nya api yang memudahkan kita menempelkannya pada projek yang akan kita kerjakan. Tiap api memiliki fungsi dan kegunaan masing-masing.<span id="more-75"></span></p>
<p>Pada artikel ini, saya akan coba sedikit menjelaskan apa itu api Bind pada jQuery. Langsung saja ke contoh kasus sederhana.</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span>utf-<span style="color: #cc66cc;">8</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Bind Jquery Event<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ini Alt&quot;</span>&gt;</span>Saya Sebuah Link<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'result'</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'display:none;'</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'text/javascript'</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; &nbsp; $(function(){<br />
&nbsp; &nbsp; &nbsp; $('h2 a').mouseover(function(){<br />
&nbsp; &nbsp; &nbsp; &nbsp; var alt = $(this).attr('alt');<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('div.result').html(alt);<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('div.result').show(300);<br />
&nbsp; &nbsp; &nbsp; }).mouseleave(function(){<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('div.result').hide();<br />
&nbsp; &nbsp; &nbsp; });<br />
&nbsp; &nbsp; });<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Saat kita menjalankan kode diatas, akan terlihat sederhana bagaimana menghandle suatu element link, lalu kita ingin mengambil informasi dari link tersebut melalui event mouseover dan mouserleave. Terlihat pada kode handlenya kita buat 2 event yaitu mouserover dan mouseleave. Coba bayangkan apabila kita ingin menghandle banyak event pada satu element tertentu, kebayang panjang kode kita apabila menuliskan dengan cara diatas.</p>
<p>Untung nya pada jquery terdapat api Bind, dengan api Bind, kita dapat menuliskan banyak event handle pada satu element untuk melakukan beberapa aksi sekaligus. Bagaimana cara penerapan nya, berikut kode diatas dengan menggunakan event Bind.</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span>utf-<span style="color: #cc66cc;">8</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Bind Jquery Event<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ini Alt&quot;</span>&gt;</span>Saya Sebuah Link<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'result'</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'display:none;'</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'text/javascript'</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; &nbsp; $(function(){<br />
&nbsp; &nbsp; &nbsp; $('h2 a').bind('mouseover mouseleave', function(){<br />
&nbsp; &nbsp; &nbsp; &nbsp; var alt = $(this).attr('alt');<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('div.result').html(alt);<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('div.result').toggle();<br />
&nbsp; &nbsp; &nbsp; });<br />
&nbsp; &nbsp; });<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Lihat pada kode diatas menjadi lebih sederhana lagi bukan ??<br />
Dengan begitu, kita tidak perlu lama-lama menuliskan kode panjang untuk menghandle suatu element dengan event yang banyak. Dengan Api Bind pada Jquery, sesuai dengan moto jQuery, &#8220;write less do more&#8221;.</p>
<p>Moga bermanfaat&#8230;:)</p>
<blockquote><ul>
<li>Catatan Tambahan : api jQuery.bind() untuk versi jquery 1.7+ sudah tergantikan dengan api jQuery.on()</li>
<li>
Referensi Tulisan : <a href="http://api.jquery.com/bind/" title="http://api.jquery.com/bind/" target="_blank">http://api.jquery.com/bind/</a></li>
</ul>
</blockquote>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/pengenalan-jquery-api-live/" rel="bookmark" class="crp_title">Pengenalan jQuery Api Live</a></li><li><a href="http://www.adiputra.web.id/seleksi-banyak-element-melalui-index-dengan-jquery/" rel="bookmark" class="crp_title">Seleksi Banyak Element Melalui Index dengan jQuery</a></li><li><a href="http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/" rel="bookmark" class="crp_title">Setting JCrop pada Codeigniter</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/pengenalan-jquery-api-bind/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Seleksi Banyak Element Melalui Index dengan jQuery</title>
		<link>http://www.adiputra.web.id/seleksi-banyak-element-melalui-index-dengan-jquery/</link>
		<comments>http://www.adiputra.web.id/seleksi-banyak-element-melalui-index-dengan-jquery/#comments</comments>
		<pubDate>Thu, 22 Mar 2012 01:52:24 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jQuery Dasar]]></category>
		<category><![CDATA[Manipulasi DOM]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=61</guid>
		<description><![CDATA[Pada artikel ini saya akan sharing tentang penyeleksian element html yang banyak untuk mengambil element tertentu dengan index dari element tersebut dengan jquery. Untuk yang sudah paham mengenai penyeleksian ini tidak usah dibaca, namun apabila ingin refresh atau mengingat-ingat kembali api jquery ini silahkan.. Berikut saya jelaskan terlebih dahulu bagaimana javascript default mengambil banyak element [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.adiputra.web.id/wp-content/uploads/2012/03/jquery.jpg" alt="" title="jquery-adiputra.web.id" width="246" height="174" class="alignleft size-full wp-image-62" />Pada artikel ini saya akan sharing tentang penyeleksian element html yang banyak untuk mengambil element tertentu dengan index dari element tersebut dengan jquery. Untuk yang sudah paham mengenai penyeleksian ini tidak usah dibaca, namun apabila ingin refresh atau mengingat-ingat kembali api jquery ini silahkan..<span id="more-61"></span></p>
<p>Berikut saya jelaskan terlebih dahulu bagaimana javascript default mengambil banyak element tertentu dengan index yang kita inginkan.</p>
<p>Saya buat html sederhana seperti dibawah ini</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; &nbsp; .notif{<br />
&nbsp; &nbsp; &nbsp; color: red;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep{<br />
&nbsp; &nbsp; &nbsp; list-style-type: none;<br />
&nbsp; &nbsp; &nbsp; padding-left: 0px;<br />
&nbsp; &nbsp; &nbsp; width: 70px;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep li {<br />
&nbsp; &nbsp; &nbsp; border : 1px solid blue;<br />
&nbsp; &nbsp; &nbsp; padding: 5px;<br />
&nbsp; &nbsp; }<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'listrep'</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>satu<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>dua<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tiga<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>empat<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>lima<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>enam<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tujuh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>delapan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sembilan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sepuluh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Dari kode html di atas, coba ubah list element ke 3 dengan warna merah. Yang pernah membuat pasti  merasa lama membuat kode dengan javascript default. Itu hanya membuat element ke-3 dengan warna merah saja, bagaimana bila element diantara element 4 dan 8 yang harus dirubah dengan warna merah ? Pasti rada panjang kode javascriptnya.</p>
<p>Untungnya kita sudah ada jQuery, dengan jquery kita dapat menyeleksi kasus sederhana seperti diatas dengan 1 baris saja, ya tentunya dengan menambahkan jquery ke html kita diatas. Bagaimana caranya ?</p>
<p>Di jQuery terdapat banyak api atau saya sebut sebagai fungsi untuk melakukan penyeleksian beberapa<br />
element html dengan index tertentu. Salah satu yang pertama adalah fungsi :eq(). Fungsi :eq() di jQuery saya sebut berguna untuk menyeleksi elemen tertentu pada index tertentu. Misalnya dapat dilihat pada kode dibawah ini</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; &nbsp; .notif{<br />
&nbsp; &nbsp; &nbsp; color: red;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep{<br />
&nbsp; &nbsp; &nbsp; list-style-type: none;<br />
&nbsp; &nbsp; &nbsp; padding-left: 0px;<br />
&nbsp; &nbsp; &nbsp; width: 70px;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep li {<br />
&nbsp; &nbsp; &nbsp; border : 1px solid blue;<br />
&nbsp; &nbsp; &nbsp; padding: 5px;<br />
&nbsp; &nbsp; }<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/jquery-latest.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'listrep'</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>satu<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>dua<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tiga<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>empat<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>lima<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>enam<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tujuh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>delapan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sembilan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sepuluh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; &nbsp; $(function(){<br />
&nbsp; &nbsp; &nbsp; $(&quot;li:eq(4)&quot;).addClass(&quot;notif&quot;);<br />
&nbsp; &nbsp; });<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Pada kode diatas, saat menjalankan pada browser kita maka akan terlihat bahwa element li ke-5 akan berubah warna nya dengan warna merah. Perubahan tersebut dilakukan hanya dengan 1 baris saja yaitu pada kode</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;li:eq(4)&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;notif&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>lihat, bahwa 4 tersebut adalah untuk menarik index ke-4 dari element list. Karna di javascript index selalu dimulai dengan index ke-0 maka saat menarik index ke-4 akan mengambil index element li dengan text &#8220;lima&#8221;.</p>
<p>Selain fungsi :eq() terdapat juga fungsi lainnya untuk menyeleksi beberapa kondisi seperti fungsi :gt().<br />
Saya contohkan kode dibawah ini,</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; &nbsp; .notif{<br />
&nbsp; &nbsp; &nbsp; color: red;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep{<br />
&nbsp; &nbsp; &nbsp; list-style-type: none;<br />
&nbsp; &nbsp; &nbsp; padding-left: 0px;<br />
&nbsp; &nbsp; &nbsp; width: 70px;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep li {<br />
&nbsp; &nbsp; &nbsp; border : 1px solid blue;<br />
&nbsp; &nbsp; &nbsp; padding: 5px;<br />
&nbsp; &nbsp; }<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/jquery-latest.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'listrep'</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>satu<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>dua<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tiga<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>empat<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>lima<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>enam<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tujuh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>delapan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sembilan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sepuluh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; &nbsp; $(function(){<br />
&nbsp; &nbsp; &nbsp; $(&quot;li:gt(4)&quot;).addClass(&quot;notif&quot;);<br />
&nbsp; &nbsp; });<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Apabila kita lihat bahwa dengan menggunakan fungsi :gt(), kita dapat menyeleksi index setelah dari index yang telah kita tentukan. Pada contoh diatas saya coba dengan index ke-4 dan hasilnya terlihat setelah index ke-4 element list berubah berwarna merah. Jadi fungsi :gt() merupakan fungsi untuk menyeleksi index dari element tertentu lebih besar dari index yang telah kita tentukan.</p>
<p>Lalu bagaimana dengan index sebelum index ke-4, adakah fungsi untuk menyeleksi index sebelum index ke-4 ?</p>
<p>Di jQuery ternyata disediakan pula untuk menyeleksi lebih kecil dari index yang telah kita tentukan. Fungsi :lt() di jQuery dapat kita pakai untuk kondisi seperti itu. Berikut adalah contohnya.</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; &nbsp; .notif{<br />
&nbsp; &nbsp; &nbsp; color: red;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep{<br />
&nbsp; &nbsp; &nbsp; list-style-type: none;<br />
&nbsp; &nbsp; &nbsp; padding-left: 0px;<br />
&nbsp; &nbsp; &nbsp; width: 70px;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep li {<br />
&nbsp; &nbsp; &nbsp; border : 1px solid blue;<br />
&nbsp; &nbsp; &nbsp; padding: 5px;<br />
&nbsp; &nbsp; }<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/jquery-latest.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'listrep'</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>satu<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>dua<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tiga<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>empat<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>lima<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>enam<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tujuh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>delapan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sembilan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sepuluh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; &nbsp; $(function(){<br />
&nbsp; &nbsp; &nbsp; $(&quot;li:lt(4)&quot;).addClass(&quot;notif&quot;);<br />
&nbsp; &nbsp; });<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Mungkin kita ingin menyeleksi terhadap index tertentu sampai index tertentu. Dengan fungsi .slice nya milik jQuery kita dapat melakukan hal tersebut dengan mudah. Berikut contoh sederhana bagaimana mendapatkan index ke-4, ke-5, ke-6, dan ke-7</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; &nbsp; .notif{<br />
&nbsp; &nbsp; &nbsp; color: red;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep{<br />
&nbsp; &nbsp; &nbsp; list-style-type: none;<br />
&nbsp; &nbsp; &nbsp; padding-left: 0px;<br />
&nbsp; &nbsp; &nbsp; width: 70px;<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ul#listrep li {<br />
&nbsp; &nbsp; &nbsp; border : 1px solid blue;<br />
&nbsp; &nbsp; &nbsp; padding: 5px;<br />
&nbsp; &nbsp; }<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/jquery-latest.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'listrep'</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>satu<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>dua<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tiga<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>empat<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>lima<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>enam<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>tujuh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>delapan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sembilan<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>sepuluh<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
&nbsp; &nbsp; $(function(){<br />
&nbsp; &nbsp; &nbsp; $(&quot;li&quot;).slice(4,8).addClass(&quot;notif&quot;);<br />
&nbsp; &nbsp; });<br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Untuk diperhatikan mengenai fungsi .slice bahwa parameter pertama merupakan parameter untuk index awal yang ingin diseleksi, sedangkan parameter kedua merupakan parameter untuk index batas. Jadi apabila saya tulis seperti ini.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;li&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">4</span><span style="color: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;notif&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>maka yang diseleksi oleh si jQuery nya adalah hanya index ke-4 sedangkan index ke-5 tidak akan terseleksi.</p>
<p>Sampai disini, moga ada tambahan ilmunya buat pembaca.</p>
<p>Rerefensi : http://api.jquery.com/category/selectors/ </p>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/pengenalan-jquery-api-bind/" rel="bookmark" class="crp_title">Pengenalan jQuery Api Bind</a></li><li><a href="http://www.adiputra.web.id/pengenalan-jquery-api-live/" rel="bookmark" class="crp_title">Pengenalan jQuery Api Live</a></li><li><a href="http://www.adiputra.web.id/setting-jcrop-pada-codeigniter/" rel="bookmark" class="crp_title">Setting JCrop pada Codeigniter</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/seleksi-banyak-element-melalui-index-dengan-jquery/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>OOP Pada PHP &#8211; Pengenalan Scope Resolution Operator</title>
		<link>http://www.adiputra.web.id/oop-pada-php-pengenalan-scope-resolution-operator/</link>
		<comments>http://www.adiputra.web.id/oop-pada-php-pengenalan-scope-resolution-operator/#comments</comments>
		<pubDate>Thu, 22 Mar 2012 01:12:46 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[PHP OOP]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=53</guid>
		<description><![CDATA[OOP pada PHP mengenal istilah Scope Resolution Operator atau biasa disebut “Paamayim Nekudotayim” kadang juga disebut “double colon”. Scope Resolution Operator dalam OOP pada PHP biasa digunakan untuk mengakses property dan method pada suatu class tanpa harus instansiasi class yang ingin digunakan. Pada bahasan Scope Resolution Operator kita akan mengenal keyword {parent, self, dan static}. [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-1442" title="oop php" src="http://terusbelajar.files.wordpress.com/2011/08/oop-php.jpg" alt="" width="262" height="152" />OOP pada PHP mengenal istilah Scope Resolution Operator atau biasa disebut “Paamayim Nekudotayim” kadang juga disebut “double colon”. Scope Resolution Operator dalam OOP pada PHP biasa digunakan untuk mengakses property dan method pada suatu class tanpa harus instansiasi class yang ingin digunakan. Pada bahasan Scope Resolution Operator kita akan mengenal keyword {parent, self, dan static}.<span id="more-53"></span></p>
<p>Untuk lebih jelas lagi, saya coba buatkan test kelas untuk menggambarkan apa itu Scope Resolution Operator.</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
	class test {
		public $job = &quot;PHP Developer&quot;;

		public function sebut_nama() {
			return &quot;adiputra&quot;;
		}

		public function sebut_kerjaan() {
			return $this-&gt;job;
		}
	}

	echo test::sebut_nama(); // output : “adiputra”
?&gt;
</pre>
<p>Pada contoh diatas, Saya dapat mengakses method dari suatu class secara langsung tanpa harus instansiasi class terlebih dahulu. Aturan nya mudah, kita hanya menyebutkan nama class diikuti dengan nama method atau property. Lalu apabila saya menambahkan code seperti dibawah ini.</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
	class test {
		public $job = &quot;PHP Developer&quot;;

		public function sebut_nama() {
			return &quot;adiputra&quot;;
		}

		public function sebut_kerjaan() {
			return $this-&gt;job;
		}
	}

	echo test::sebut_nama(); // output : “adiputra”
        echo test::sebut_kerjaan(); // error
?&gt;
</pre>
<p>        Apabila saya memanggil method sebut_kerjaan() maka akan memunculkan error seperti gambar dibawah ini :</p>
<p><img src="http://terusbelajar.files.wordpress.com/2011/11/1.png" alt="" title="OOP PHP - Scope Resolution Operator" width="640" height="70" class="size-full wp-image-1487" /></p>
<p>        Error tersebut muncul karna saat memanggil method sebut_kerjaan() terdapat keyword $this dimana keyword tersebut merupakan keyword pendefinisian suatu object. Karna kita menggunakan scope resolution operator (tidak membuat object) maka muncul lah error tersebut. </p>
<p>	Telah dijelaskan diatas sebelumnya bahwa scope resolution operator tidak lepas dari keyword parent, self dan static. Berikut ini saya coba jelaskan lagi cara penggunaan pada kasus pembuatan class e-commerce. Saya buatkan class Produk seperti code dibawah ini :</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
	class Produk {
		const DISKON = 20;

		public static function get_diskon() {
			return self::DISKON;
		}
	}
?&gt;
</pre>
<p>Terdapat suatu constanta Diskon, untuk kasus sederhana, setiap produk memiliki diskon tetap yaitu 20 {dalam bentuk persen}.  Terdapat pula method get_diskon yang isi nya adalah pemanggilan value dari constanta DISKON. Terlihat terdapat keyword self yaitu pemanggilan property constanta Diskon. Keyword self biasa digunakan untuk pemanggilan property atau method pada class itu sendiri.</p>
<p>Lalu saya coba buatkan class baju.php</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

	class baju extends produk {
		public static $_dijual = &quot;ya&quot;;

		private $_ukuran;
		private $_warna;

		public function set_ukuran($ukuran) {
			$this-&gt;_ukuran = $ukuran;
		}

		public function get_ukuran() {
			return $this-&gt;_ukuran;
		}

		public function set_warna($warna) {
			$this-&gt;_warna = $warna;
		}

		public function get_warna() {
			return $this-&gt;_warna;
		}

		public static function get_diskon() {
			return parent::get_diskon();
		}

		public static function get_dijual() {
			return self::$_dijual;
		}

	}

?&gt;
</pre>
<p>        Yang mesti ditekankan pada code diatas adalah penggunaan self dan penggunaan parent. Pada method get_diskon, terdapat keyword parent dimana berfungsi untuk memanggil method get_diskon yang ada pada class parent yaitu class Produk. Jadi kita dapat memanggil method parent dari class tertentu dengan scope resolution operator.</p>
<p>	Sedangkan pada method get_dijual terdapat keyword self memanggil property $_dijual dimana property tersebut bertipe static. {keyword static akan saya jelaskan pada artikel selanjutnya, insyAllah}</p>
<p>	Lalu saya coba jalankan dengan code dibawah ini :</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
	include_once(&quot;produk.php&quot;);
	include_once(&quot;baju.php&quot;);

	$oBaju = new baju;
	$oBaju-&gt;set_warna(&quot;biru&quot;);
	$oBaju-&gt;set_ukuran(&quot;M&quot;);

	echo $oBaju-&gt;get_warna() . &quot;&lt;br /&gt;&quot;;
	echo $oBaju-&gt;get_ukuran() . &quot;&lt;br /&gt;&quot;;

	echo baju::get_dijual() . &quot;&lt;br /&gt;&quot;;
	echo baju::get_diskon() . &quot;%&lt;br /&gt;&quot;;
?&gt;
</pre>
<p>Tampilan keluaran nya dapat dilihat pada gambar dibawah ini.</p>
<p><img src="http://terusbelajar.files.wordpress.com/2011/11/2.jpg" alt="OOP PHP - Scope Resolution Operator" title="OOP PHP - Scope Resolution Operator" width="640" height="88" class="size-full wp-image-1488" /></p>
<p>        Begitulah konsep sederhana Scope Resolution Operator di OOP PHP. Contoh code diatas hanya untuk menjelaskan alur sederhana agar teman-teman dapat memahami lebih mudah Scope Resolution Operator.</p>
<p>	Semoga bermanfaat..:)</p>
<p>Artikel versi PDF bisa dilihat disini :<br />
<a href="http://www.docstoc.com/docs/101750808/Scope-Resolution-Operator" title="OOP pada PHP : Pengenalan Scope Resolution Operator" target="_blank">http://www.docstoc.com/docs/101750808/Scope-Resolution-Operator</a></p>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/oop-pada-php-pengenalan-inheritance/" rel="bookmark" class="crp_title">OOP Pada PHP &#8211; Pengenalan Inheritance</a></li><li><a href="http://www.adiputra.web.id/oop-pada-php-controlling-akses-pada-property-dan-method/" rel="bookmark" class="crp_title">OOP Pada PHP &#8211; Controlling akses pada property dan method</a></li><li><a href="http://www.adiputra.web.id/oop-pada-php-class-property-method-dan-objek-2/" rel="bookmark" class="crp_title">OOP pada PHP &#8211; Class, Property, Method dan Objek</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/oop-pada-php-pengenalan-scope-resolution-operator/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>OOP Pada PHP &#8211; Pengenalan Inheritance</title>
		<link>http://www.adiputra.web.id/oop-pada-php-pengenalan-inheritance/</link>
		<comments>http://www.adiputra.web.id/oop-pada-php-pengenalan-inheritance/#comments</comments>
		<pubDate>Thu, 22 Mar 2012 01:10:34 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[inheritance php]]></category>
		<category><![CDATA[OOP PHP Tutorial]]></category>
		<category><![CDATA[PHP OOP]]></category>
		<category><![CDATA[PHP tutorial]]></category>
		<category><![CDATA[Tutorial PHP]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=51</guid>
		<description><![CDATA[Inheritance atau turunan merupakan salah satu fitur dari pemrograman OOP dimana satu Class menuruni satu atau banyak class lainnya. Suatu Class yang dituruni biasa disebut Class Anak (child) sedangkan Class yang menuruni biasa disebut Class Induk (parent). Inheritance akan sangat berguna apabila kita menginginkan kode kita rapih sesuai dengan keterkaitan antara Class. Saya coba contohkan [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-1442" title="oop php" src="http://terusbelajar.files.wordpress.com/2011/08/oop-php.jpg" alt="" width="262" height="152" />Inheritance atau turunan merupakan salah satu fitur dari pemrograman OOP dimana satu Class menuruni satu atau banyak class lainnya. Suatu Class yang dituruni biasa disebut Class Anak (child) sedangkan Class yang menuruni biasa disebut Class Induk (parent).<span id="more-51"></span></p>
<p>Inheritance akan sangat berguna apabila kita menginginkan kode kita rapih sesuai dengan keterkaitan antara Class. Saya coba contohkan pada kasus toko online. Pada suatu toko menjual baju, topi, celana. Apabila kita membuat Class untuk aplikasi ini dengan masing-masing Class maka mungkin akan seperti ini :</p>
<p><strong>file : baju.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

class Baju {

    private $nama;
    private $warna;
    private $ukuran;
    private $tipe;

    public function getNama() {
        return $this-&gt;nama;
    }

    public function setNama($nama) {
        $this-&gt;nama = $nama;
    }

    public function getWarna() {
        return $this-&gt;warna;
    }

    public function setWarna($warna) {
        $this-&gt;warna = $warna;
    }

    public function getUkuran() {
        return $this-&gt;ukuran;
    }

    public function setUkuran($ukuran) {
        $this-&gt;ukuran = $ukuran;
    }

    public function getTipe() {
        return $this-&gt;tipe;
    }

    public function setTipe($tipe) {
        $this-&gt;tipe = $tipe;
    }

}

?&gt;
</pre>
<p><strong>File : celana.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

class Celana {

    private $warna;
    private $ukuran;
    private $tipe;
    private $model;
    private $nama;

    public function getWarna() {
        return $this-&gt;warna;
    }

    public function setWarna($warna) {
        $this-&gt;warna = $warna;
    }

    public function getUkuran() {
        return $this-&gt;ukuran;
    }

    public function setUkuran($ukuran) {
        $this-&gt;ukuran = $ukuran;
    }

    public function getTipe() {
        return $this-&gt;tipe;
    }

    public function setTipe($tipe) {
        $this-&gt;tipe = $tipe;
    }

    public function getModel() {
        return $this-&gt;model;
    }

    public function setModel($model) {
        $this-&gt;model = $model;
    }

    public function getNama() {
        return $this-&gt;nama;
    }

    public function setNama($nama) {
        $this-&gt;nama = $nama;
    }
}
?&gt;
</pre>
<p><strong>File : topi.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

class Topi {

    private $warna;
    private $ukuran;
    private $model;
    private $nama;

    public function getWarna() {
        return $this-&gt;warna;
    }

    public function setWarna($warna) {
        $this-&gt;warna = $warna;
    }

    public function getUkuran() {
        return $this-&gt;ukuran;
    }

    public function setUkuran($ukuran) {
        $this-&gt;ukuran = $ukuran;
    }

    public function getModel() {
        return $this-&gt;model;
    }

    public function setModel($model) {
        $this-&gt;model = $model;
    }

    public function getNama() {
        return $this-&gt;nama;
    }

    public function setNama($nama) {
        $this-&gt;nama = $nama;
    }

}
?&gt;
</pre>
<p>Mudah ya,,kita hanya buat class dari masing2 produk. Tapi coba deh liat, kira-kira dari ketiga Class tersebut ada tidak property / variable yang sama ?? ada ya&#8230;</p>
<blockquote><p>memang kenapa ?? </p></blockquote>
<p>ya baiknya kita buat simple aja&#8230;pada contoh diatas, saya hanya buat 3 produk yaitu baju, celana, dan topi. Coba bayangkan kalu kita disuruh buat aplikasi seperti tokobagus.com. Wew produknya banyak,,,mau buat Class satu2 dengan kriteria yang banyak juga ??</p>
<p>Disinilah fungsi dari mekanisme Inheritance / Penurunan Class. Dengan adanya mekanisme ini, kita dapat membuat Class dengan property / method yang bisa digunakan oleh Class-Class lain sehingga diharapkan kode dari yang kita buat lebih sederhana lagi.</p>
<p>Saya coba implementasikan inheritance ya produk dari yang telah disebutkan diatas. Pertama saya buat class induk / parent terlebih dahulu.</p>
<p><strong>File : produk.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

class Produk {

    protected $ukuran;
    protected $warna;
    protected $nama;

    public function getUkuran() {
        return $this-&gt;ukuran;
    }

    public function setUkuran($ukuran) {
        $this-&gt;ukuran = $ukuran;
    }

    public function getWarna() {
        return $this-&gt;warna;
    }

    public function setWarna($warna) {
        $this-&gt;warna = $warna;
    }

    public function getNama() {
        return $this-&gt;nama;
    }

    public function setNama($nama) {
        $this-&gt;nama = $nama;
    }

}
?&gt;
</pre>
<p>Dapat dilihat pada Class Produk terdapat property yang hampir dimiliki oleh setiap item produk seperti nama baju, nama celana, nama topi dan lainnya.</p>
<p>Lalu sekarang kita buat class item produk yaitu Class Baju, Class Celana, Class Topi dengan meng-inheritkan Class Produk.</p>
<p><strong>File : baju.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
include_once(&quot;produk.class.php&quot;);

class Baju extends Produk {

    private $tipe;

    public function getTipe() {
        return $this-&gt;tipe;
    }

    public function setTipe($tipe) {
        $this-&gt;tipe = $tipe;
    }
}

?&gt;
</pre>
<p><strong>File : celana.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

include_once(&quot;produk.class.php&quot;);

class Celana extends Produk {

    private $tipe;
    private $model;

    public function getTipe() {
        return $this-&gt;tipe;
    }

    public function setTipe($tipe) {
        $this-&gt;tipe = $tipe;
    }

    public function getModel() {
        return $this-&gt;model;
    }

    public function setModel($model) {
        $this-&gt;model = $model;
    }

}
?&gt;
</pre>
<p><strong>File : topi.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
include_once(&quot;produk.class.php&quot;);

class Topi extends Produk {

    private $model;

    public function getModel() {
        return $this-&gt;model;
    }

    public function setModel($model) {
        $this-&gt;model = $model;
    }

}
?&gt;
</pre>
<p>Untuk meng-inherit-kan Class kita cukup dengan keyword <strong>“<em>extends</em>”</strong> ke Class Induk / parent. Dengan keyword tersebut berarti kita sudah melakukan inheritance Class ke Class induk sehingga kita dapat mengakses baik property ataupun method yang ada pada Class induk / parent.</p>
<p>Berikut saya coba buat kode untuk implementasi Inheritance dari source code yang telah kita buat diatas.</p>
<p><strong>File : tes_toko.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
    include_once(&quot;topi.class.php&quot;);
    include_once(&quot;baju.class.php&quot;);
    include_once(&quot;celana.class.php&quot;);

    define(&quot;br&quot;, &quot;&lt;br /&gt;&quot;);

    // buat objek Topi
    $obj_topi = new Topi(); // buat objek

    // setting property objek
    $obj_topi-&gt;setNama(&quot;Topi_001&quot;);
    $obj_topi-&gt;setUkuran(10);
    $obj_topi-&gt;setWarna(&quot;biru&quot;);
    $obj_topi-&gt;setModel(&quot;bordiran&quot;);

    // get property objek
    echo &quot;Nama Produk : &quot; . $obj_topi-&gt;getNama() . br;
    echo &quot;Ukuran : &quot; . $obj_topi-&gt;getUkuran() . br;
    echo &quot;Warna : &quot; . $obj_topi-&gt;getWarna() . br;
    echo &quot;Model : &quot; . $obj_topi-&gt;getModel() . br;

    // buat objek baju
    $obj_baju = new Baju();

    // setting property baju;
    $obj_baju-&gt;setNama(&quot;Baju_001&quot;);
    $obj_baju-&gt;setUkuran(10);
    $obj_baju-&gt;setWarna(&quot;biru&quot;);
    $obj_baju-&gt;setTipe(&quot;Kemeja&quot;);

    // get property objek baju
    echo br;
    echo &quot;Nama Produk : &quot; . $obj_baju-&gt;getNama() . br;
    echo &quot;Ukuran : &quot; . $obj_baju-&gt;getUkuran() . br;
    echo &quot;Warna : &quot; . $obj_baju-&gt;getWarna() . br;
    echo &quot;Tipe : &quot; . $obj_baju-&gt;getTipe() . br;

    // buat objek celana
    $obj_celana = new Celana();

    // setting property celana
    $obj_celana-&gt;setNama(&quot;Celana_001&quot;);
    $obj_celana-&gt;setUkuran(12);
    $obj_celana-&gt;setWarna(&quot;biru&quot;);
    $obj_celana-&gt;setModel(&quot;Cutbray..&quot;);
    $obj_celana-&gt;setTipe(&quot;Katun&quot;);

    // get property objek celana
    echo br;
    echo &quot;Nama Produk : &quot; . $obj_celana-&gt;getNama() . br;
    echo &quot;Ukuran : &quot; . $obj_celana-&gt;getUkuran() . br;
    echo &quot;Warna : &quot; . $obj_celana-&gt;getWarna() . br;
    echo &quot;Tipe : &quot; . $obj_celana-&gt;getTipe() . br;
    echo &quot;Model : &quot; . $obj_celana-&gt;getModel() . br;
?&gt;
</pre>
<p>Terlihat pada kode diatas, kita dapat mengakses langsung method dari Class Produk untuk setiap item produk. Sehingga dengan konsep seperti ini kita dapat menyederhanakan kode kita.</p>
<p>Lalu apabila kita jalankan akan muncul tampilan seperti pada gambar dibawah ini.</p>
<p><img src="http://terusbelajar.files.wordpress.com/2011/09/inheritance2.png" alt="" title="OOP PHP : Inheritance" width="640" height="143" class="aligncenter size-full wp-image-1453" /></p>
<p>Dari sini, semoga dipahami konsep mekanisme inheritance OOP pada PHP. Permasalahan lain mengenai mekanisme Inheritance akan dijelaskan pada artikel berikutnya.</p>
<p>Moga bermanfaat.</p>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/oop-pada-php-pengenalan-scope-resolution-operator/" rel="bookmark" class="crp_title">OOP Pada PHP &#8211; Pengenalan Scope Resolution Operator</a></li><li><a href="http://www.adiputra.web.id/oop-pada-php-controlling-akses-pada-property-dan-method/" rel="bookmark" class="crp_title">OOP Pada PHP &#8211; Controlling akses pada property dan method</a></li><li><a href="http://www.adiputra.web.id/oop-pada-php-class-property-method-dan-objek/" rel="bookmark" class="crp_title">OOP Pada PHP : Class, Property, Method dan Objek</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/oop-pada-php-pengenalan-inheritance/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>OOP Pada PHP &#8211; Controlling akses pada property dan method</title>
		<link>http://www.adiputra.web.id/oop-pada-php-controlling-akses-pada-property-dan-method/</link>
		<comments>http://www.adiputra.web.id/oop-pada-php-controlling-akses-pada-property-dan-method/#comments</comments>
		<pubDate>Thu, 22 Mar 2012 01:07:43 +0000</pubDate>
		<dc:creator>adiputra</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[PHP OOP]]></category>

		<guid isPermaLink="false">http://www.adiputra.web.id/?p=49</guid>
		<description><![CDATA[Salah satu fitur dari OOP adalah pembungkusan (encapsulation) dimana sesuatu tidak dapat diakses bebas namun memiliki akses tertentu. Setiap Class yang kita buat, dapat kita atur agar dapat diakses secara tidak bebas atau bebas sesuai dengan keinginan kita. Dalam OOP inilah yang disebut sebagai Controlling Access Class. Apa yang diakses ? Yang diakses tentunya adalah [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-1442" title="oop php" src="http://terusbelajar.files.wordpress.com/2011/08/oop-php.jpg" alt="" width="262" height="152" />Salah satu fitur dari OOP adalah pembungkusan (encapsulation) dimana sesuatu tidak dapat diakses bebas namun memiliki akses tertentu. Setiap Class yang kita buat, dapat kita atur agar dapat diakses  secara tidak bebas atau bebas sesuai dengan keinginan kita. Dalam OOP inilah yang disebut sebagai Controlling Access Class. Apa yang diakses ? Yang diakses tentunya adalah fungsi / method serta property / variable.<span id="more-49"></span></p>
<p>Controlling pada OOP ada 3 yaitu :</p>
<ul>
<li>Public : Akses pada Controlling ini berarti bahwa baik property ataupun method dapat diakses di dalam Class dimana property atau method itu didefinisikan ataupun di luar Class</li>
<li>Private : Akses pada Controlling ini berarti bahwa baik property ataupun method dapat diakses hanya pada Class dimana property atau method itu didefinisikan.</li>
<li>Protected : Akses pada Controlling ini berarti bahwa baik property ataupun method dapat diakses hanya pada Class dimana property atau method itu didefinisikan ataupun Class yang merupakan turuan dari Class yang didefinisikan.</li>
</ul>
<p>Ketiga Controling tersebut lah yang dipakai pada OOP baik itu di PHP ataupun di Java. Apabila kita tidak menuliskan Controlling tersebut maka dianggap default adalah public.</p>
<p>Untuk membedakan antara keduanya kita akan mencoba mempraktekan.</p>
<p>Saya akan membuat Class Member dengan kode seperti dibawah ini.<br />
<strong>File : Member.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

class Member {

    public $nama=&quot;adiputra&quot;;
    private $rahasia;

    public function sebut_nama() {
        echo &quot;Hi...nama saya &quot;.$this-&gt;nama;
    }

    public function setting_nama($p_nama) {
        $this-&gt;nama = $p_nama;
    }

    private function sebut_rahasia() {
        echo &quot;Ini rahasia pribadi : &quot;.$this-&gt;rahasia;
    }

}

?&gt;
</pre>
<p>Lalu saya akan membuat file untuk mempraktekan Class member.</p>
<p><strong>File : tes_member.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
    include_once(&quot;member.class.php&quot;);
    define(&quot;br&quot;,&quot;&lt;br /&gt;&quot;);

    $obj_member = new Member();
    $obj_member-&gt;sebut_nama();

    echo br . $obj_member-&gt;nama;
?&gt;
</pre>
<p>Apabila kode diatas dijalankan akan menghasilkan tampilan pada gambar dibawah ini.</p>
<p><img src="http://terusbelajar.files.wordpress.com/2011/08/tes_member.png" alt="" title="tes_member" width="640" height="143" class="aligncenter size-full wp-image-1453" /></p>
<p>Pada gambar diatas, terlihat bahwa kita dapat memanggil fungsi / method dengan akses public dengan mudah (pada baris kode ke-6). Kita juga dapat memangil property dengan akses public dengan baik (pada baris kode ke-8).</p>
<p>Sekarang coba kita akan mengkases property pada Class Member dengan akses private.</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
    include_once(&quot;member.class.php&quot;);
    define(&quot;br&quot;,&quot;&lt;br /&gt;&quot;);

    $obj_member = new Member();
    echo $obj_member-&gt;rahasia;
?&gt;
</pre>
<p>Pada kode diatas akan muncul error pada gambar seperti ini.</p>
<p><img src="http://terusbelajar.files.wordpress.com/2011/08/tes-member1.png" alt="" title="tes-member1" width="640" height="169" class="aligncenter size-full wp-image-1454" /></p>
<p>Begitupun apabila kita coba akses method / fungsi dengan akses private.</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
    include_once(&quot;member.class.php&quot;);
    define(&quot;br&quot;,&quot;&lt;br /&gt;&quot;);

    $obj_member = new Member();
    echo $obj_member-&gt;sebut_rahasia();
?&gt;
</pre>
<p><img src="http://terusbelajar.files.wordpress.com/2011/08/tes-member2.png" alt="" title="tes-member2" width="640" height="198" class="aligncenter size-full wp-image-1455" /></p>
<p>Kenapa bisa seperti itu ? Karna akses nya private dan kita sudah tau bahwa akses private hanya bisa dilakukan apabila pemanggilan / akses dilakukan di file Class itu sendiri.</p>
<p>Lalu bagaimana kalu suatu saat kita membutuhkan property yg private namun masih bisa di ambil dari luar ??</p>
<p>Temen-temen bisa ambil dengan cara membuat fungsi / method dengan akses public untuk mengambil property yang private. Berikut saya coba ganti sedikit Class Member.</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

class Member {

    public $nama=&quot;adiputra&quot;;
    private $rahasia=”ini rahasia ya..”;

    public function sebut_nama() {
        echo &quot;Hi...nama saya &quot;.$this-&gt;nama;
    }

    public function setting_nama($p_nama) {
        $this-&gt;nama = $p_nama;
    }

    public function sebut_rahasia() {
        return $this-&gt;rahasia;
    }

}

?&gt;
</pre>
<p>Lalu kita coba panggil dengan membuat file baru</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
    include_once(&quot;member.class.php&quot;);
    define(&quot;br&quot;,&quot;&lt;br /&gt;&quot;);

    $obj_member = new Member();
    echo $obj_member-&gt;sebut_rahasia();
?&gt;
</pre>
<p>Maka akan keluar hasil sesuai isi dari property rahasia.</p>
<p>Seperti itulah praktek dari akses public dan akses private. Selanjutnya kita akan coba praktekan akses protected. Kita buat turunan / inherit dari Class Member. Inheritance akan dibahas pada artikel selanjutnya.</p>
<p>Saya akan rubah sedikit Class Member seperti pada kode dibawah ini</p>
<pre class="wp-code-highlight prettyprint">
&lt;?php

class Member {

    public $nama=&quot;adiputra&quot;;
    protected $rahasia=&quot;ini rahasia&quot;;

    public function sebut_nama() {
        echo &quot;Hi...nama saya &quot;.$this-&gt;nama;
    }

    public function sebut_rahasia() {
        return $this-&gt;rahasia;
    }

}

?&gt;
</pre>
<p>Pada kode Class Member tersebut yang saya rubah adalah akses Protected dari property rahasia. Sengaja agar kita coba akses pada Class turunannya. Selanjutnya saya buat Class turunan member.<br />
<strong><br />
File : turunan.member.class.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
include_once(&quot;member.class.php&quot;);

class turunan extends Member {
    private $rahasia_lain=&quot;ini rahasia lain&quot;;
    public $nama_lain=&quot;adi&quot;;

    public function sebut_nama_member(){
        return $this-&gt;nama;
    }

    public function sebut_rahasia_member(){
        return $this-&gt;rahasia;
    }
}
?&gt;
</pre>
<p>Lalu kita akan coba membuat praktek pemanggilannya.</p>
<p><strong>File : tes_member.php</strong></p>
<pre class="wp-code-highlight prettyprint">
&lt;?php
    include_once(&quot;turunan.member.class.php&quot;);
    define(&quot;br&quot;,&quot;&lt;br /&gt;&quot;);

    $obj_turunan = new turunan();

    echo $obj_turunan-&gt;sebut_rahasia_member(); // panggil property rahasia member
    echo br . $obj_turunan-&gt;nama; // akses property member
    echo br . $obj_turunan-&gt;nama_lain; // akses property turunan
?&gt;
</pre>
<p>Dan hasilnya dapat dilihat pada gambar dibawah ini.</p>
<p><img src="http://terusbelajar.files.wordpress.com/2011/08/tes-member3.png" alt="" title="tes-member3" width="640" height="186" class="aligncenter size-full wp-image-1456" /></p>
<p>itulah maksud dari akses protected, property dapat diakses secara langsung / bebas dari class turunannya.</p>
<p>Sampai disini smoga bisa dipahami.</p>
<div id="crp_related"><h3>Artikel yang Berhubungan :</h3><ul><li><a href="http://www.adiputra.web.id/oop-pada-php-class-property-method-dan-objek-2/" rel="bookmark" class="crp_title">OOP pada PHP &#8211; Class, Property, Method dan Objek</a></li><li><a href="http://www.adiputra.web.id/oop-pada-php-class-property-method-dan-objek/" rel="bookmark" class="crp_title">OOP Pada PHP : Class, Property, Method dan Objek</a></li><li><a href="http://www.adiputra.web.id/oop-pada-php-pengenalan-inheritance/" rel="bookmark" class="crp_title">OOP Pada PHP &#8211; Pengenalan Inheritance</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.adiputra.web.id/oop-pada-php-controlling-akses-pada-property-dan-method/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

