Optimasi javascript pada Yii Framework

Leave a comment.


Optimalisasi kode website sangat penting dilakukan pada awal pengembangan suatu website. Kenapa? karena tanpa adanya optimalisasi di awal pengembangan, akan menyebabkan kurangnya efisiensi waktu. Di sebabkan optimalisasi menunggu suatu website lambat pada saat sudah dalam proses produksi. Untuk itu di perlukan adanya optimalisasi kode pada awal pengembangan, salah satunya yaitu optimalisasi javascript.

Menurut optimalisasi javascript versi Yahoo, javascript sebaiknya di letakkan di bagian bawah sebelum tag penutup body. Hal ini sesuai dengan prinsip bahwa sebuah halaman website seharusnya yang di load pertama kali adalah html dan css, kemudian baru javascript. Sehingga user tidak menunggu terlalu lama hanya karena javascriptnya terlalu banyak. Dan hal ini dapat menghindari unstyled content.

Pada framework Yii default lokasi javascript adalah di header, untuk itu kita akan memindahkan lokasinya ke footer. Ada dua cara yang bisa kita gunakan, cara pertama dengan menambahkan posisi pada saat kita mendaftar sebuah file javascript. Cara kedua dengan memaksa Yii agar menggunakan default lokasi ke footer. Cara pertama memiliki kelemahan pada saat kita Yii mendaftarkan javascript dari widgetnya secara otomatis, maka javascriptnya akan berada di header sesuai lokasi defaultnya.

Sebelumnya kita lihat format penulisan registerScript file pada Yii.

public CClientScript registerScriptFile(string $url, integer $position=NULL)

registerScriptFile merupakan fungsi dari class CClientScript, parameter pertama adalah lokasi script yang akan kita daftarkan, parameter kedua adalah konstanta angka posisi javascript. Terdapat 3 posisi yang dapat kita gunakan, pertama POS_HEAD. Posisi ini akan meletakkan script di antara tag head. Posisi POS_BEGIN akan meletakkan script setelah tag pembuka body dan posisi POS_END akan meletakkan script sebelum tag penutup body (</body>). Bisa juga dengan angka yaitu 0 untuk POS_HEAD, 1 untuk POS_BEGIN dan 2 untuk POS_END.

Kita lihat cara pertama terlebih dahulu seperti contoh berikut ini, misalkan kita ingin mendaftarkan file javascript custom.js:

<?php
$cs = Yii::app()->getClientScript();
$customJsFile = Yii::app()->baseUrl . '/js/custom.js';

$cs->registerScriptFile($customJsFile, CClientScript::POS_END);

Dengan cara ini script kita akan di letakkan pada akhir sebelum tag penutup body.
Cara yang kedua adalah dengan menambahkan posisi pada file konfigurasi pada Yii. misalkan namanya main.php (nama config ini bisa berbeda tergantung setingan Anda). File ini berada di folder protected/config.

'components' => array(
    // ... baris komponen lain
    'clientScript' => array(
        'defaultScriptFilePosition' => CClientScript::POS_END
    ),
    // ... baris komponen lain
)

Dengan begini semua file javascript yang di daftar dengan fungsi registerScriptFile akan berada pada footer dan Anda tidak perlu menyertakan lokasi pada saat menggunakan fungsi registerScriptFile. Ok, semoga artikel ini bermanfaat bagi Anda :)


Berkenalan dengan Silex, PHP Microframework

Leave a comment.


Silex adalah microframework yang di buat dengan bahasa PHP. Silex di buat berdasarkan pada komponen framework Symfony, framework ini terinspirasi oleh sinatra (Ruby). Karena sangat simple dan di tujukan untuk halaman web satu file saja. Instalasi silex sangat mudah, apalagi jika menggunakan Composer.

Kebutuhan PHP minimum yang di butuhkan silex adalah PHP versi >= 5.3.3. Dan pastikan ekstensi php phar aktif jika Anda akan menginstall silex menggunakan composer. Jika menggunakan composer, tinggal buat file composer.json lalu tambahkan script berikut ke file composer.json:

{
    "require": {
        "silex/silex": "~1.1"
    }
}

Kemudian jalankan composer dengan mengetikan

// Jalankan script ini terlebih dahulu jika composer belum di install
// curl -s http://getcomposer.org/installer | php

php composer.phar install

Jika ingin mengupdate silex tinggal ketikan php composer.phar update

Penggunaan Dasar

Sebagai contoh saya membuat folder aplikasi dengan nama silex-app di dalam folder htdocs, folder ini berisi file-file aplikasi termasuk framework silex. Strukturnya seperti berikut:

+ silex-app
  + vendor
  - composer.json
  - composer.lock
  - index.php

Untuk memulai menggunakan silex, tambahkan require vendor/autoload.php pada file php (dalam contoh saya letakkan pada file index.php ). Kemudian buatlah instance dari kelas Silex\Application. Setelah definisi kontroler, panggil fungsi run dari instansi aplikasi. Untuk lebih jelasnya silahkan lihat kode berikut ini:

<?php
require __DIR__ . '/vendor/autoload.php';

$app = new Silex\Application();

// Buat action untuk menerima request dengan alamat /hello/{nama}
$app->get('/hello/{name}', function($name) use ($app) {
    return 'Hello ' . $app->escape($name);
});

$app->run();

Kemudian coba Anda jalankan dengan mengetikan alamat localhost/silex-app/hello/world, viola akan muncul tulisan hello world.

Jika Anda ketikan localhost/silex-app/hello/php makan akan muncul tulisan hello php. Pertama kali saya mencoba framework ini cuma bisa bilang wow, simpel banget hehehe. Mungkin pada saat masih dalam pengembangan Anda di sarankan untuk menghidupkan fitur debug dengan menambahkannya pada aplikasi. Hal ini sangat membantu dalam mengetahui eror pada aplikasi atau istilahnya bugs.

$app['debug'] = true;

Bagi yang belum mengetahui apa itu anonymous function, saya akan jelaskan sedikit. Anonymous function adalah fungsi yang tidak memerlukan nama, mirip dengan anonymous function pada javascript. Kemudian keyword use setelah anonymous function di gunakan agar variabel di luar anonymous function dapat di akses di dalam anonymous function.

Coba kita tambah action lain dengan nama about:

<?php
require __DIR__ . '/vendor/autoload.php';

$app = new Silex\Application();

// Buat action untuk menerima request dengan alamat /hello/{nama}
$app->get('/hello/{name}', function($name) use ($app) {
    return 'Hello ' . $app->escape($name);
});

$app->get('/about', function() {
    return 'Halaman about'; 
});
$app->run();

Coba Anda jalankan lagi dengan mengetikan alamat localhost/silex-app/about, wow akan muncul tulisan “halaman about”. Kita sudah mencoba method get, bagaimana dengan method post. Untuk menggunakan method post, Anda perlu menyertakan class Request dan Response setelah keyword require. Kelas ini sudah termasuk di dalam framework silex.

Pertama buat action untuk menampilkan formnya, misalkan namanya contact-us. Kemudian buat action untuk menerima data dari form, misalnya save-contact. Kita lihat kode berikut ini:

// Tambahkan kode ini setelah autoload
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

// Tambahkan sebelum $app->run();
$app->get('/contact-us', function() {
    $form = '
    <form action="/silex-app/save-contact" method="post">
      <input type="text" name="email" id="email" />
      <input type="submit" name="submit" value="Submit" />
    </form>';

    return $form;
});

$app->post('/save-contact', function(Request $request) {
    $email = $request->get('email');
    return new Response('Email Anda adalah: ' . $email, 201);
});

Jika urlnya di akses maka akan menampilkan output seperti berikut:

Kemudian setelah form di submit, makan akan tampil seperti ini:

Fitur silex yang masih banyak sekali yang tidak mungin saya jelaskan semua. Mungkin lain waktu akan saya jelaskan fitur-fitur yang lainnya seperti penggunaan template engine Twig, Class controller, Session, Database dengan Doctrin dll. Semoga artikel yang singkat ini dapat memberi gambaran tentang microframework silex pada PHP. Untuk lebih detilnya Anda bisa mengunjungi website resminya di silex.sensiolabs.org


Array: Fungsi in_array

Leave a comment.


Dalam PHP, fungsi in_array sering kita pakai karena beberapa framework pada PHP kebanyakan menggunakan array. Namun apa kegunaan dari fungsi in_array itu?, dari nama fungsinya dapat kita lihat bahwa fungsi ini untuk memeriksa apakah sebuah data/angka ada dalam sebuah array.

bool in_array ( mixed $needle , array $haystack [, bool $strict ] )

Parameter pertama adalah data yang akan di cari ($needle), parameter kedua adalah sebuah array ($haystack) dan parameter ketiga adalah mode strict atau bukan. Jika di isi true maka PHP akan memeriksa juga tipe dari data yang akan di bandingkan(parameter 1) dengan array-nya. $needle dapat berupa string, angka, boolean ataupun karakter. $haystack juga dapat berupa array string, array number, float dan lain-lain. Perlu di ingat bahwa fungsi ini bersifat case-sensitive, artinya huruf besar dan kecil di bedakan. Misalnya kata Linux berbeda dengan linux atau LINUX. Contoh script:

<?php
$os = array('Linux', 'Unix', 'Mac', 'Windows');
$findMe = 'Linux';
var_dump(in_array ( $findMe , $os ) ); // Outputnya: bool(true)

// in_array bersifat case-sensitive
var_dump(in_array ( 'linux' , $os ) ); // Outputnya: bool(false)
var_dump(in_array ( 'LINUX' , $os ) ); // Outputnya: bool(false)

in_array juga dapat digunakan untuk data dengan tipe yang lain seperti integer, float, ataupun boolean. Lihat contoh di bawah:

<?php
$userGroup = array(1, 2, 3, 4, 5);
$findMe = 1;
var_dump(in_array ( $findMe , $userGroup ) ); // Outputnya: bool(true)

// in_array dengan strict mode di set true
var_dump(in_array ( $findMe , $userGroup, true ) ); // Outputnya: bool(true)
var_dump(in_array ( '1' , $userGroup, true ) ); 
// Outputnya: bool(false) karena data yang di cari berbeda tipe dengan datanya

// Contoh in_array pada data dengan tipe boolean
var_dump(in_array ( true , array(true, false) ) ); // Output: bool(true)

Semoga artikel ini bermanfaat, jika ada pertanyaan, saran atau kritik yang membangun jangan sungkan-sungkan untuk memberikan komentar :)

sumber: php.net


String: Fungsi addcslashes

Leave a comment.


Fungsi ini berguna untuk menambahkan slash pada sebuah string dengan gaya bahasa C. Ada dua parameter yang harus di sertakan pada fungsi ini, parameter pertama adalah string yang akan di escape, parameter kedua adalah daftar karakter(char list) yang di replacekan ke string. Kita lihat contoh berikut:

echo addcslashes("Syafi'i", '\'');
// Ouput: Syafi\'i

Dari contoh di atas terlihat bahwa karakter petik satu, digantikan oleh karakter \’ (backslash petik satu). Bagaimana kalau kita tambahkan char list berupa A..z pada parameter kedua?.

echo addcslashes("Syafi'i", 'A..z\'');
// Ouput: \S\y\a\f\i\'\i

Terlihat bahwa semua karakter baik huruf kecil maupun huruf besar ketambahan karakter \(backslash). Hati-hati apabila Anda ingin mereplace karakter seperti 0, a, b, f, n, r, t dan v. Karakter ini akan di ubah ke bentuk \0, \a, \b, \f, \n, \r, \t dan \v. Karena dalam PHP \0 adalah (NULL), \r (carriage return), \n (newline), \f (form feed), \v (vertical tab) and \t (tab) dan karakter ini merupakan predefined escape sequences.

sumber: php.net


Menambahkan fungsi custom pada kelas bawaan Javascript

Leave a comment.


Javascript adalah termasuk bahasa pemrograman berorientasi objek dan berjalan di sisi client, melalui web browser. Javascript mempunyai beberapa kelas/objek dasar seperti Object, Array, Math, String, Number dan lain-lain. Masing-masing kelas mempunyai banyak fungsi yang berhubungan dengan kelas tersebut, salah satunya yaitu fungsi prototype. Fungsi prototype merupakan fungsi yang ada dalam kelas Object.

Kelas Object merupakan induk dari semua kelas pada Javascript, itu berarti kelas turunan dari Object akan mewakili semua fungsi public, termasuk fungsi prototype ini. Kali ini saya hanya akan membahas satu fungsi dari kelas Object yaitu prototype. Fungsi prototype di gunakan untuk menambah sebuah fungsi pada suatu kelas/objek pada Javascript, bisa juga untuk menumpuk fungsi yang sudah ada(hati-hati dengan fungsi ini).

Bagaimana cara menggunakannya?. Kita ambil contoh, misalnya kita ingin menambahkan fungsi yang berguna untuk mengambil elemen terakhir pada suatu Array. Jika awalnya kita harus menuliskan kode seperti ini

var nama = ['Agus', 'Susilo', 'Novi', 'Vita'];

// Ambil array terakhir
var arrayTerakhir = nama[nama.length - 1];
console.log(arrayTerakhir);

Maka kita dapat menambahkan menyederhanakan kode di atas, yaitu dengan menambahkan fungsi untuk mengambil array terakhir. Data array merupakan kelas dari object Array, maka kita akan menambahkan/meng-extends ke kelas Array.

// Tambahkan fungsi lastItem ke dalam objek Array
Array.prototype.lastItem = function() {
  return this[this.length - 1];
}

var nama = ['Agus', 'Susilo', 'Novi', 'Vita'];

// Ambil array terakhir
var arrayTerakhir = nama.lastItem();
console.log(arrayTerakhir);

Mudah bukan :) . Cara ini juga bisa di terapkan pada kelas yang kita buat, seperti contoh di bawah.

// Buat kelas dengan nama Person
function Person() {
  this.name = 'Agus';
  this.age = 29;
}

// Tambah fungsi untuk mencetak nama dan umur
Person.prototype.printData = function() {
  console.log('Name: ' + this.name);
  console.log('Age: ' + this.age);
}

// Instansi kelas Person dan cetakData
var p = new Person();
p.cetakData();

Pada dasarnya semua fungsi pada Javascript bisa di tumpuk(override) dengan menggunakan fungsi prototype, kecuali fungsi Object.create. Untuk itu bijaklah dalam menggunakan fungsi tersebut. Semoga artikel ini bermanfaat dalam menambah wawasan pemrograman Anda. Jangan sungkan untuk memberikan komentar agar artikel-artikel kami dapat lebih baik lagi :)