Pages

Selasa, 29 Januari 2013

Fix TimThumb for working on EC2

Fix TimThumb for working on EC2

After move your wordpress site on cloud infrastructur like Amazon EC2, might you’ve noticed that a number of images aren’t displaying correctly on your WordPress site. This tip is for anyone using TimThumb (aka "timthumb.php") either directly or indirectly via a WordPress theme (WooThemes uses it a lot) and is not having their thumbnails successfully generated.

There's a good chance that this has to do with the TimThumb script not working correctly. TimThumb is an image resizing script, often used for featured images and thumbnails. The problem is not isolated to eFrog Themes, but is widespread across a lot of themes that use TimThumb as an image resizing mechanism.

Change this code

if(stripos($real, $this->docRoot) == 0){

to

if(stripos($real, realpath($this->docRoot)) == 0){

Hope it will help you to resolve your TimThumb problems with Amazon EC2

Baca selengkapnya...

Jumat, 11 Januari 2013

Linux Like admin di Windows dengan Chocolatey

Akhirnya ketemu tools untuk Windows yang bagus dimana semua paket bisa diinstall via command. Tools ini namanya "Chocolatey"

Yang membuat saya menyukai Linux O/S adalah semua yang kita butuhkan bisa didapatkan melalui package manager seperti "apt-get" kalau di Debian like OS atau "yum" di RedHat like OS... Nah, baru-baru ini saya ketemu tools yang laiknya tools di Linux tersebut yang berjalan di Windows OS.

Apa istimewanya menggunakan package manager? Menggunakan package manager berarti kita tidak perlu pusing dengan konfigurasi tambahan yang harus kita lakukan setelah menginstall. Konfigurasi2 ini biasanya memakan waktu dan cukup memusingkan jidat.. hee..he.. :p

Menginstall Chocolatey

Menginstall chocolatey sangat mudah dilakukan, cukup menjalankan command berikut di command prompt atau powershell namun pastikan terlebih dahulu terkoneksi dengan internet saat menjalankan command ini:

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('http://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

Setelah chocolatey terinstall di sistem, kita bisa menginstall banyak tools bagus yang mungkin lebih familiar untuk linux/unix administrator seperti wget, vim, etc. List tools atau aplikasi bisa kita lihat di Chocolatey Gallery

Contoh:

Oke, sekian dari saya.. selamat bermain dengan Chocolatey!

Baca selengkapnya...

Sabtu, 17 November 2012

Fundamental HTTP Request dan Response dalam Ajax

Sebuah aplikasi web sebenarnya hanyalah media perantara antara user dengan webserver yang melayani permintaan dan menerima respon dari server web kemudian menyampaikannya ke user melalui. Saat ini standar yang digunakan browser untuk bekomunikasi dengan server web adalah HTTP (HyperText Transfer Protocol) versi HTTP/1.1.

Ajax, tentunya juga menggunakan protokol HTTP ini untuk melakukan komunikasi dengan server. Maka, dalam rangka untuk memahami bagaimana konsep Ajax, penting untuk mengetahui bagaimana sebuah situs web memproses permintaan dan menerima respon dari server web.
Bisa dikatakan HTTP bekerja layaknya e-mail. Permintaan dikirim, header tertentu diteruskan yang memungkinkan server web untuk tahu persis apa yang harus ditangani dan bagaimana untuk menangani permintaan. Kebanyakan header dalam HTTP bersifat opsional, namun ada satu header yang harus ada yaitu host header. Header ini sangat penting karena header ini yang memungkinkan server tahu dari mana request berasal dan kemana harus mengembalikan response proses.

Setelah permintaan telah diterima, server kemudian mengirimkan respon kembali. Ada banyak kode respon dalam HTTP yang dinyatakan dalam angka yang berbeda:

Error code Error text Description HTTP version
Informational responses
100 Continue This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished. HTTP/1.1 only
101 Switching Protocol This code is sent in response to an Update: request header by the client, and indicates that the protocol the server is switching too. It was introduced to allow migration to an incompatible protocol version, and is not in common use. HTTP/1.1 only
Successful responses
200 OK The request has succeeded. The meaning of a success varies depending on the HTTP method:
  • GET: The resource has been fetched and is transmitted in the message body.
  • HEAD: The entity headers are in the message body.
  • POST: The resource describing the result of the action is transmitted in the message body.
  • TRACE: The message body contains the request message as received by the server.
The methods PUT, DELETE, and OPTIONS can never result in a 200 OK response.
HTTP/0.9 and later
201 Created The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request. HTTP/0.9 and later
202 Accepted The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing. HTTP/0.9 and later
203 Non-Authoritative Information This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response. HTTP/0.9 and 1.1
204 No Content There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones. HTTP/0.9 and later
205 Reset Content This response code is sent after accomplishing request to tell user agent reset document view which sent this request. HTTP/1.1 only
206 Partial Content This response code is used because of range header sent by the client to separate download into multiple streams. HTTP/1.1 only
Redirection messages
300 Multiple Choice The request has more than one possible responses. User-agent or user should choice one of them. There is no standardized way to choice one of the responses. HTTP/1.0 and later
301 Moved Permanently This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response. HTTP/0.9 and later
302 Found This response code means that URI of requested resource has been changed temporarily. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests. HTTP/0.9 and later
303 See Other Server sent this response to directing client to get requested resource to another URI with an GET request. HTTP/0.9 and 1.1
304 Not Modified This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response. HTTP/0.9 and later
305 Use Proxy This means requested response must be accessed by a proxy. This response code is not largely supported because security reasons. HTTP/1.1 only
306 unused This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification. HTTP/1.1 only
307 Temporary Redirect Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the 302 Found HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request. HTTP/1.1 only
308 Permanent Redirect This means that the resource is now permanently located at another URI, specified by the Location: HTTP Response header. This has the same semantics as the 301 Moved Permanently HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.
Note: This is an experimental response code whose specification is currently in draft form.
draft-reschke-http-status-308
Client error responses
400 Bad Request This response means that server could not understand the request due to invalid syntax. HTTP/0.9 and later
401 Unauthorized Authentication is needed to get requested response. This is similar to 403, but in this case, authentication is possible. HTTP/0.9 and later
402 Payment Required This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently. HTTP/0.9 and 1.1
403 Forbidden Client does not have access rights to the content so server is rejecting to give proper response. HTTP/0.9 and later
404 Not Found Server can not find requested resource. This response code probably is most famous one due to its frequency to occur in web. HTTP/0.9 and later
405 Method Not Allowed The request method is known by the server but has been disabled and cannot be used. The two mandatory methods, GET and HEAD, must never be disabled and should not return this error code. HTTP/1.1 only
406 Not Acceptable This response is sent when the web server, after performing server-driven content negotiation, doesn't find any content following the criteria given by the user agent. HTTP/1.1 only
407 Proxy Authentication Required This is similar to 401 but authentication is needed to be done by a proxy. HTTP/1.1 only
408 Request Timeout This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome or IE9, use HTTP preconnection mechanisms to speed up surfing (see bug 634278, which tracks the future implementation of such a mechanism in Firefox). Also note that some servers merely shut down the connection without sending this message. HTTP/1.1 only
409 Conflict This response would be sent when a request conflict with current state of server. HTTP/1.1 only
410 Gone This response would be sent when requested content has been deleted from server. HTTP/1.1 only
411 Length Required Server rejected the request because the Content-Length header field is not defined and the server requires it. HTTP/1.1 only
412 Precondition Failed The client has indicated preconditions in its headers which the server does not meet. HTTP/1.1 only
413 Request Entity Too Large Request entity is larger than limits defined by server; the server might close the connection or return an Retry-After header field. HTTP/1.1 only
414 Request-URI Too Long The URI requested by the client is too long for the server to handle. HTTP/1.1 only
415 Unsupported Media Type The media format of the requested data is not supported by the server, so the server is rejecting the request. HTTP/1.1 only
416 Requested Range Not Satisfiable The range specified by the Range header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data. HTTP/1.1 only
417 Expectation Failed This response code means the expectation indicated by the Expect request header field can't be met by the server. HTTP/1.1 only
Server error responses
500 Internal Server Error The server has encountered a situation it doesn't know how to handle. HTTP/0.9 and later
501 Not Implemented The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD. HTTP/0.9 and later
502 Bad Gateway This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response. HTTP/0.9 and later
503 Service Unavailable The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the Retry-After: HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached. HTTP/0.9 and later
504 Gateway Timeout This error response is given when the server is acting as a gateway and cannot get a response in time. HTTP/1.1 only
505 HTTP Version Not Supported The HTTP version used in the request is not supported by the server. HTTP/1.1 only
Baca selengkapnya...

Minggu, 04 November 2012

AJAX: Melangkah lebih jauh dengan XMLHttpRequest

AJAX didasarkan pada penggunaan engine javascript yang tertanam hampir di semua browser modern. Dengan kontra bahwa perilaku kode javascript yang kita ciptakan akan bervariasi sesuai dengan engine javascript yang digunakan oleh masing-masing browser. Untuk mengetahui lebih lanjut engine javascript browser, Anda dapat membacanya lebih lanjut di wikipedia.

XMLHttpRequest

Seperti yang sudah dibahasa pada posting saya sebelumnya, AJAX menggunakan object javascript XMLHTTPRequest untuk berkomunikasi dengan web server.
Objek javascript XMLHttpRequest atau yang biasa disingkat xhr,seperti namanya,akan memungkinkan kita untuk membuat request melalui protokol http ke web server dengan return XML.

Membuat objek XMLHttpRequest

var xhr = null;
if (window.XMLHttpRequest) //Firefox dan lainnya
    xhr = new XMLHttpRequest();
else if (window.ActiveXObject) {//Internet Explorer
    try {
        xhr = new ActiveXObject ("MSXML2.XMLHTTP");
    } catch(e) {
        xhr = new ActiveXObject ("Microsoft.XMLHTTP");
    }
} else {
    //XMLHttpRequest tidak didukung oleh browser Anda
    alert ("Browser Anda tidak mendukung objek XMLHttpRequest ...");
    xhr = false;
}

Penggunaan Objek XMLHttpRequest

Property / Method Deskripsi
open("method","url",flag) Membuka koneksi ke server.
method: metode koneksi "GET" atau "POST"
url: url tujuan koneksi
flag: tipe boolean, true jika asynchronous.
setRequestHeader("nama","nilai") Mengeset HTTP header dalam request.
Contoh:
POST
nama->"Content-Type"
value->"application/x-www-form-urlencoded"
send("params") mengirim parameter request.
Jika menggunakan metode GET, parameter akan diset null namun parameter dikirim melalui url query string.
Jika menggunakan metode POST, parameter akan dikirim melalui form.
abort() Membatalkan request
onreadystatechange fungsi yang akan dieksekusi ketika terjadi perubahan pada objek.
readyState fungsi yang menguji fungsi onreadystatechange.
0: Not Initialized (belum / tidak di inisiasi)
1: Open (telah dibuka)
2: Sent (telah dikirim)
3: In Progress (dalam proses)
4: Ready (semua data telah dimuat)
status respon status dalam kode
statusText respon status dalam format teks
responseText respon pesan yang dikembalikan server dalam format text
responseXML respon pesan yang dikembalikan server dalam format XML
Baca selengkapnya...

Senin, 29 Oktober 2012

AJAX: Apa dan bagaimana yang disebut AJAX?

Bagaimana sebenarnya website (yang menggunakan teknologi) AJAX?

Banyak yang mengira bahwa web dengan fitur "canggih" yang apabila di klik langsung menampilkan data adalah AJAX.

Padahal belum tentu. Bisa saja website tersebut sebenarnya hanya menyembunyikan element html tertentu pada halaman web-nya, alih-alih melakukan request ke server.

Miskonsepsi berikutnya adalah banyak yang menggunakan JAX, bukan AJAX. AJAX yang kehilangan fitur Asynchronous-nya. Websitenya telah benar melakukan request ke server secara background, namun tidak secara async/acak.

Ilustrasi gambar berikut semoga dapat membantu anda memahami perbedaan AJAX dengan teknologi web tradisional.


Definisi AJAX

Ajax, seperti yang kita ketahui bersama adalah singkatan dari Asynchronous JavaScript And XML. Pada dasarnya, teknologi Ajax menggunakan objek javascript XMLHttpRequest untuk melakukan request data ke server web secara asynchronously-atau tanpa harus me-refresh halaman.

Bagimana Teknologi AJAX bekerja

Aplikasi web mengirim request ke server, kemudian server melakukan proses yang kemudian mengirimkan kembali data hasil proses tersebut ke browser client.
Menggunakan objek XMLHttpRequest tidak berarti semua respon kode harus kembali dalam bentuk XML. XMLHttpRequest pada saat ini lebih sering digunakan oleh programmer untuk mengembalikan data dalam bentuk JSON karena JSON lebih ramah bandwith dibanding XML.

Ajax tidak sekedar dapat digunakan untuk tujuan yang sangat sederhana seperti loading halaman HTML atau melakukan validasi form. Kekuatannya menjadi semakin hebat ketika dikawinkan dengan bahasa server-side scripting.

Ketika clientside dan serverside dikawinkan, maka lahirlah suatu aplikasi web yang menakjubkan. Dalam rangka menggunakan Ajax dan tentunya yang pertama kita harus memiliki pemahaman yang kuat tentang dasar-dasar pemograman javascript. Oleh karena itu, blog saya banyak membahas dasar-dasar JavaScript akan sangat penting ketika mencoba untuk membangun aplikasi Ajax powered.

Tunggu posting saya berikutnya yang membahas dasar-dasar XMLHttpRequest object.

Baca selengkapnya...

Minggu, 28 Oktober 2012

Web Design Batam

Looking for Expert Web Designer in Batam?

Hi, I am Yudhi Armyndharis, an professional web designer based in Batam, Indonesia.

I'm here to build website design, offer you solution for customized and unique web development projects which are aimed to help you achieve your business goals and needs.

I have been working in web design batam projects for many companies; ranging from large, medium, and small companies, and also for personal use. I pay great attention to the quality of my work, and I’m also flexible and understanding to my client's desire.

BATAM, INDONESIA BASED PROFESSIONAL WEB DESIGNER & APPS.

I build an web also apps - That's different - period
You'll find your web working as your business tools. Looking for web design batam? Just let me know what you need. Baca selengkapnya...

JavaScript dan Cookies

Kita pasti sering mendengar istilah "Cookie" di internet. Didalam dunia web, "cookie" adalah potongan informasi yang diberikan oleh web server kepada browser saat pertama kalinya terjadi interaksi antara web server dengan browser. Data ini disimpan kedua-duanya; baik di web server maupun di browser sehingga data ini dapat saling dipergunakan antara web browser dan server.

Dengan menggunakan JavaScript, kita bisa melakukan banyak hal bermanfaat dengan cookie. Misalnya, membuat web yang menggunakan sistem authentikasi dengan fasilitas pengingat password. Kita bisa menggunakan cookie untuk menyimpan username serta password sehingga saat berikutnya, pengunjung web kita tidak perlu bersusah-payah melakukan login ulang. Kita juga bisa menggunakan cookie untuk men-track bagian website kita yang sering dikunjungi sehingga kita dapat menghitung secara spesifik bagian mana dari website kita yang paling sering dikunjungi.


Konsep Penggunaan Cookie

Yang pastinya, cookie tidak bisa melakukan hal-hal berikut:

  • Cookie tidak bisa digunakan untuk mendapatkan informasi "real" dari user, contohnya mendapatkan alamat email user
  • Cookie tidak bisa digunakan untuk memeriksa konten hard disk,
  • Cookie tidak bisa digunakan untuk mentransmit virus

Jadi, cookie itu sebenarnya hanya sebuah file sederhana yang tersimpan di hard disk pengunjung dimana kita bisa menggunakannya hanya untuk menyimpan beberapa informasi saja. Oh iya, satu lagi:

  • Cookie hanya valid untuk web yang membuatnya. Mekanisme di browser tidak mengizinkan kita untuk membaca/menulis cookie yang dibuat oleh orang/web lain.

Artinya, kita hanya bisa menggunakan cookie yang kita buat sendiri.

Membuat Cookie

Cookie dapat dibuat dengan format berikut:

cookieName=cookieValue;
expires=expirationDateGMT;
path=URLpath; domain=siteDomain

Keterangan

cookieName: nama dari Cookie yang kita buat. Nama cookie wajib dibuat.

expires: tanggal kadaluarsa cookie. Cookie akan dihapus oleh browser secara otomatis apabila melewati tanggal ini.

path: alamat web cookie.

domain: domain cookie.


Baca selengkapnya...

Jumat, 07 September 2012

Teknik Shorthand JavaScript

Menyingkat script, memperkecil ukuran kode, ... mempercepat loading

Kita dapat menggunakan sejumlah pernyataan JavaScript dengan metode singkatan untuk memperkecil size kode, setidaknya size kode kita berkurang beberapa byte yang akan memberikan keuntungan mempercepat waktu loading aplikasi kita :)

Perlu diketahui, metode singkatan atau "shorthand" dalam JavaScript (maupun ECMAScript sebagai induk resmi dari Javascript) bukanlah cara yang resmi. Cara ini murni merupakan metode yang ditemukan oleh programmer.

Mari kita mulai, ...

1. Cara Singkat Deklarasi Variable

Metode singkat deklarasi variable dalam javascript ini juga dapat kita temukan dalam banyak bahasa lainnya. Metode ini dapat menghemat banyak waktu dan ruang ketika mendeklarasikan beberapa variabel sekaligus.

Metode Longhand:
var x;
var y;
var z = 3;

Metode Shorthand:
var x, y, z = 3;


2. Cara Singkat Deklarasi Object Array

Metode singkat mendeklarasikan object array dalam satu baris.

Metode Longhand:
var a = new Array();
a[0] = "myString1";
a[1] = "myString2";
a[2] = "myString3";

Metode Shorthand:
var a = ["myString1", "myString2", "myString3"];


3. Cara Singkat Deklarasi Object Array Asosiatif

Bagaimana dengan array asosiatif? Hampir sama dengan cara diatas, array asosiatif juga bisa kita singkat. Contoh seperti berikut...

Metode Longhand:
var mySkill = new Array();
mySkill['Web Programming'] = 'PHP';
mySkill['Desktop Programming'] = 'Java';
mySkill['Database'] = 'MySQL';

Metode Shorthand:
var mySkill= {
    'Web Programming': 'PHP',
    'Desktop Programming': 'Java',
    'Database': 'MySQL'
};


4. If true … else

Ini adalah metode penghemat kode untuk ketika kita ingin melakukan test kondisi. Kita dapat mempersingkat test kondisi satu dengan yang lain dengan menggunakan operator ternary.

Metode Longhand:
var big;
if (x > 10) {
    big = true;
} else {
    big = false;
}

Metode Shorthand:
var big = (x > 10) ? true : false;

Cara singkat untuk test kondisi bercabang (nested if):
var big = (x > 10);
//Contoh kondisi bercabang
x = 3;
var big = (x > 10) ? "besar dari 10" : (x < 5) ? "kurang dari 5" : "antara 5 dan 10";


5. Null, Undefined

Ketika membuat variabel baru kadang-kadang kita perlu memeriksa apakah variabel referensi untuk nilai itu tidak null atau undefined.

Metode Longhand:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     var variable2 = variable1;
}
Metode Shorthand:
var variable2 = variable1  || '';
Bingung dengan metode singkat ini? Mungkin anda perlu membaca post saya sebelumnya Null dan Undefined pada JavaScript.


6. Membandingkan nilai Variable

Cara ini untuk membandingkan nilai variable,.. Contoh kode dibawah ini adalah kode untuk mengembalikan salah satu nilai variable tersebut bergantung pada ada atau tidaknya nilai_awal.

Metode Longhand:
if (!nilai_awal) {
    return nilai_awal;
} else{
   return nilai_akhir('100');
}
Metode Shorthand:
return nilai_awal || nilai_akhir('100');
Baca selengkapnya...

Rabu, 29 Agustus 2012

Ext.ux.data.PagingStore problem with empty store

I'm using Ext.ux.data.PagingStore extension made by Condor because I need local store for paging my ExtJs grid. But, there is problem with this extension. The grid paging toolbar always set the current page cursor at page 2 while the store is empty.

After searching at sencha forum, I've found this solution was succesfully solve my problem with Ext.ux.data.PagingStore.

Just add a constructor for Ext.ux.data.PagingStore:
constructor: function(config) {
        this.totalLength = 0;
        Ext.ux.data.PagingStore.superclass.constructor.call(this, config);
},

and ... At the beginning of the Ext.ux.PagingToolbar's onChange method:
Change the code
if (this.cursor >= t) {
     this.cursor = Math.ceil((t + 1) / s) * s;
}
into like this:
if (this.cursor >= t && this.cursor > 0) {
     this.cursor = Math.ceil((t + 1) / s) * s;
}




The link to sencha forum thread is:
http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5&p=624509&viewfull=1#post624509

Hopefully that save your headache too.. :)
Baca selengkapnya...

Senin, 27 Agustus 2012

Null dan Undefined pada JavaScript

Banyak yang menguji ekspresi nilai dalam JavaScript dengan cara berikut:

if (SomeObject != null ) ...

Apa yang salah?

Dalam javascript, object yang belum tercipta akan mengembalikan nilai "undefined", jadi kode tersebut diatas hanya dapat dipergunakan untuk mengecek nilai object yang sebelumnya telah terdefinisi. Jika object belum tercipta, maka kode tersebut malah menciptakan error lain... yaitu "SomeObject is undefined"

Kita dapat menggunakan "typeof" secara eksplisit untuk memeriksa apakah object telah terdefinisi, atau menggunakan trik lainnya. Tapi, cara itu juga memungkinkan celah terjadinya kesalahan dalam evaluasi nilai.


Cara yang benar:

if (!SomeObject) {

Terlihat singkat, tapi inilah yang lebih benar.
Sekali lagi perlu diperhatikan bahwa "undefined" berbeda dengan "null".
Object yang tidak/belum memiliki nilai mengembalikan nilai "null", sedangkan object yang malah belum tercipta sama sekali akan mengembalikan nilai "undefined".
Baca selengkapnya...

Minggu, 14 Agustus 2011

Namespace untuk memudahkan organisasi kode JavaScript

Sebagai Web Programmer, kita harus menyadari bahwa kadang programmer lain dapat berinteraksi dengan kode web yang kita buat ataupun sebaliknya, kadang kala kita sering kali "mencuri" potongan class, widget dari berbagai sumber untuk membentuk kode milik kita sendiri. Untuk itulah kita memerlukan namespaces.

Tunggu dulu... Sebenarnya, Apa itu Namespace?
Definisi Wikipedia, Namespace adalah "an abstract container providing context for the items (names, or technical terms, or words) it holds and allowing disambiguation of items having the same name [...] For many programming languages, a namespace is a context for identifiers. In an operating system, an example of namespace is a directory."

Jadi namespace itu dalam pemrograman cuma digunakan untuk memudahkan melakukan identifikasi dan organisasi kode. Layaknya kita mengatur semua file mp3 kedalam folder "My Music", dan file gambar dan photo ke dalam folder "My Picture".

Atau coba perhatikan gambar berikut yang merupakan diagram namespace Domain Name dan Filesystem Unix:


Mengapa menggunakan namespaces?

Menggunakan Namespace sangat penting bagi kita sebagai web programmer untuk memastikan bahwa kode yang kita buat tidak ditimpa ketika diproses oleh JavaScript intepreter. Jika ada programmer lain yang mendefinisikan sebuah variabel dengan nama yang sama dengan yang kita buat, maka variable tersebut akan ditimpa. Kode milik programmer terakhir yang diproses oleh JavaScript merupakan variable yang dianggap sah.

Ini terjadi karena JavaScript adalah bahasa fungsional yang menciptakan fungsi atau variabel yang tidak dibungkus dalam fungsi lain dan dibuat dalam lingkup global (window). Maka untuk mengatasi terjadinya konflik seperti ini, kita dapat menempatkan variable maupun fungsi milik kita kedalam object sehingga hanya berada di scope object yang kita buat.

Cara Membuat Namespace
Pertama tentunya kita harus menentukan "nama" sebagai namespace kita.. hehe :)
Buatlah nama yang merefer fungsi yang dimilik dari object namespace tersebut. Misal untuk menampilkan data pegawai, kita beri namespace "appPegawaiView", untuk mengedit data pegawai, kita beri namespace "appPegawaiEdit"...

Contoh:
var appPegawaiView = {};
var appPegawaiEdit = {};

Atau kita dapat memeriksa terlebih dahulu apakah sudah ada object yang memiliki nama yang sama dengan object namespace yang ingin kita buat dengan cara:
if (!appPegawaiView) appPegawaiView = {};
if (!appPegawaiView.form) appPegawaiView.form = {};
if (!appPegawaiView.data) appPegawaiView.data = {};

Contoh lengkap:
var appPegawaiView = function(){
	var private_var;
	function private_method(){
	}
	return {
		method_1: function(){
			// kode metode 1 disini
		},
		method_2: function(){
			// kode metode 2 disini
		}
	};
}();
Baca selengkapnya...

Sabtu, 13 Agustus 2011

Memahami Object dalam JavaScript

Object dalam bahasa yang paling disalahpahami di dunia

Banyak yang percaya, JavaScript adalah bahasa yang paling disalahpahami di dunia.. Contohnya dalam memahami Object dalam javaScript.

Mana sebenarnya "Object" dalam JavaScript?

JavaScript dibentuk dari object. Array adalah object. Fungsi adalah object. Object adalah Object. Jadi, mana object sebenarnya???

Object adalah pasangan nama dan nilai. Nama-nama adalah string, dan nilai dari string tersebut bisa bertipe string, angka, boolean, dan juga bertipe object (fungsi dan array).. Wahaha.. makin bingung kan?

Begini.., Object biasanya diimplementasikan sebagai hashtables sehingga nilai dapat diambil dengan cepat. Jika kamu masih bingung dengan hashtables, coba baca artikel yang bagus tentang hashtables disini.

Jika nilai merupakan sebuah fungsi, kita dapat menganggapnya sebagai method. Ketika method sebuah object dipanggil, variable ini kemudian akan dimasukkan kedalam object. Method dapat secara instan mengakses variable melalui variable lain.

Perlu diingat, Object hanya dapat diproduksi oleh Constructor, yang memang berfungsi untuk menginisialisasi object. Constructor menyediakan fitur yang memberikan class dalam bahasa yang berbeda, termasuk variable static dan method.

Tipe Object: Public dan Private

Public

Anggota atau member sebuah object bertipe public. Fungsi apapun dapat mengakses, memodifikasi, menambah atau menghapus anggota. Ada dua teknik untuk menambahkan anggota dalam object. Yaitu dengan menambahkan kedalam Constructor atau melalui Protoype..

Teknik Constructor
Teknik ini biasanya digunakan untuk menginisalisasi variable instan publik. Konstruktor variable ini digunakan untuk menambahkan anggota ke dalam object.
Contoh:
function myContainer(param){
   this.member = param;
}

Jadi, saat ingin membuat sebuah object baru, kita cukup menggunakan cara:
var myNewContainer = new myContainer('abc');

Object baru kita, "myNewContainer" adalah object yang dibangun dengan menggunakan konstruktor fungsi "myContainer".
Object myNewContainer secara otomatis mempunyai anggota bernilai 'abc'. (myNewContainer.member)

Teknik Prototype
Teknik ini biasanya digunakan untuk menambahkan method public. Ketika anggota dicari (dan tidak ditemukan) dalam sebuah object yang dicari, maaka anggota akan diambil dari anggota prototype Constructor itu sendiri. Mekanisme ini digunakan untuk pewarisan, yang dapat lebih menghemat memori dibandingkan dengan selalu membuat object baru.

Teknik protoype ini juga dapat digunakan untuk metode dari object yang dibuat oleh Constructor.
Contoh:
myContainer.prototype.stamp = function(string){
   return this.member + string;
}
dari contoh diatas, kita telah menambahkan sebuah method baru kedalam sebuah constructor, yaitu "stamp"... jadi nilai otomatis diwariskan ke object yang dibuat dengan constructor tersebut...Coba kita panggil object yang kita ciptakan sebelumnya dengan cara:
myNewContainer.stamp('def');
Maka, nilai dari object myNewContainer sekarang menjadi 'abcdef'.
Baca selengkapnya...

Membaca JSON dengan Ext JS

Ext JS memiliki fungsi yang memudahkan kita untuk membaca Call Back hasil request Ajax.

Dengan menggunakan fungsi decode(), sangat memudahkan kita membaca data JSON bahkan tanpa melakukan mapping sekalipun.

Misalnya callback ajax request menghasilkan JSON seperti berikut:
{"success":true,"data":[{"idpegawai":"8503030WB", "namapegawai":"Yudhi Armyndharis", "alamat":"Batam"}]}
Maka kita dapat mengambil data nama pegawai dengan cara seperti berikut:
Ext.Ajax.request({
	url: 'store/datapegawai.php',
	params: {
	    action: 'read',
	    idpegawai: '8503030WB'
	},
	success: function(resp, opt){ 
		var callbackdata = Ext.util.JSON.decode(resp.responseText.trim());
		//ambil namapegawai dan simpan sebagai variable
		var namapegawai = callbackdata.data[0].namapegawai;
		//tampilkan di console
		console.log(namapegawai);
	},
	failure: function(resp,opt) { 
	    Ext.Msg.alert('Error','Database server error..'); 
	}
});
Baca selengkapnya...

Sabtu, 02 Juli 2011

Indentasi

Masih dalam topik Standar Pengkodean pada Elemen Dasar PHP, kali ini saya akan membahas tentang:
  1. Indentasi,
  2. Pemformatan Kode Program,
  3. Konsistensi, dan
  4. Dokumentasi Program.
Indentasi
Untuk menghasilkan kode program yang rapi dan mudah dibaca, gunakan indentasi. Langkah ini bisa dilakukan menggunakan tab atau spasi (biasanya empat spasi).
Saya sendiri biasanya menggunakan dua spasi dengan tujuan "menghemat" size kode yang nantinya dihasilkan.

// Tanpa indentasi
if (is_valid()){
return false;
}

if (is_valid()){
  return true;
}
Pemformatan Kode Program
Hindari kode yang memanjang dalam satu baris untuk memudahkan penelusuran kode program. Sebagai solusinya, format kode program dengan menguraikan bagian-bagiannya.
// Susah ditelusuri
if ($vokal == 'a' || $vokal == 'i' || $vokal == 'u' || $vokal == 'e' || $vokal == 'o'){
  $huruf = "Huruf Vokal";
}
// Mudah ditelusuri
if ($vokal == 'a' || $vokal == 'i' || $vokal == 'u' || 
    $vokal == 'e' || $vokal == 'o')
{
    $huruf = "Huruf Vokal";
}
Sebagai tambahan, sebaiknya selalu gunakan spasi untuk merapikan kode program.
$bahasa = 'php';
$kategori = 'pemrograman';
$url = 'http://www.php.net';
// Apabila diperlukan anda dapat meluruskan assignment variable sehingga menjadi lebih rapi
$bahasa   = 'php';
$kategori = 'pemrograman';
$url      = 'http://www.php.net';
Konsistensi
Penulisan kode yang konsisten menjadikan kode program lebih mudah dibaca dan dipahami maknanya.
Apabila variable digunakan untuk tujuan yang sama, sebaiknya diberikan nama yang serupa juga. Contohnya, jika variable $jml digunakan untuk menyatakan suatu jumlah, maka usahakan untuk selalu menggunakan nama ini seterusnya dalam kode program Anda.
Jadi, maksud konsistensi disini adalah jangan memberikan nama yang berbeda untuk tujuan yang serupa. Misalnya $jum, $jumlah atau $total.
Untuk penggunaan di suatu blok, Anda bisa mendeklarasikan variabel dengan prefix / awalan yang sama, misalnya $jml_data, $jml_max, $jml_min. Meskipun kelihatan susah untuk diterapkan, sebaiknya kita berupaya untuk menjaga konsistensi karena hal ini dapat meminimalisasi kerancuan penamaan.
Dokumentasi Program
Dokumentasi program diklasifikasikan ke dalam dua bagian, yaitu baris komentar dan dokumentasi API. Pada posting ini saya hanya akan membahas baris komentar, sedangkan untuk dokumentasi API akan dijelaskan pada posting selanjutnya.
Bahasa PHP mendukung tiga jenis sintaks untuk menuliskan baris komentar yaitu style C, C++ dan Perl/Shell.
/*
Komentar style C
*/

// Komentar style C++

# Komentar style Perl/Shell
Meskipun ketiga jenis style komentar diatas valid, namun usahakan untuk memilih style yang paling sesuai untuk kode program Anda. Umumnya, style C digunakan untuk komentar yang terdiri dari beberapa baris.
Baca selengkapnya...

Elemen Dasar PHP

Elemen Dasar PHP

Sebagai pembuka, posting blog pertama ini akan mengajak Anda mengenal lebih dekat elemen-elemen PHP. elemen yang dimaksud meliputi autran-aturan dasar, sintaks, dan fitur bahasa. Mengingat peran penting elemen-elemen ini sebagai salah satu komponen fundamental dalam pembuatan aplikasi, maka sudah sepatutnya kita memahaminya secara baik dan benar.


Standar Pengkodean

Pada umumnya, setiap bahasa pemrograman mendefinisikan aturan-aturan standar yang dimaksudkan untuk dijadikan sebagai acuan bagi programmer. Dengan mengikuti aturan-aturan tersebut, kita dapat menghasilkan kode program yang konsisten dan seragam. Seabgai acuan, berikut akan dijelaskan mengenai beberapa aturan standar yang disarankan.

Standar Penamaan
Di dalam pemrograman, suatu nama digunakan untuk mengacu ke entitas yang dideklarasikan. Terkait hal ini, ada beberapa aturan dasar penamaan yang perlu sekali diperhatikan dalam upaya menghasilkan kode program yang readable.
Penamaan variable sebaiknya dituliskan menggunakan huruf kecil semua. Apabila nama terdiri atas beberapa kata, pisahkan dengan garis bawah (underscore). Sebagai contoh, $nama atau $nama_user.
Penamaan konstanta disarankan mengikuti aturan variabel, kecuali di sini menggunakan hruf besar semua, misalnya MAX, MAX_DATA atau JML_DATA.
Penamaan fungsi sebaiknya juga mengacu pada penamaan variable, dan sangat disarankan agar mencerminkan suatu aksi atau kata kerja, misalnya:
get_data(){
  //fungsi untuk mengambil data
}
set_data(){
  // fungsi untuk menulis data
}
atau
print_data(){
  // fungsi untuk mencetak data
}
Baca selengkapnya...