Progressive JPEG untuk Optimalnya Blog Anda

Progressive JPEG sebenarnya merupakan kekuatan tambahan dalam memperingan loadnya sebuah halaman web. Namun hal ini tidak banyak disadari oleh para desainer. Padahal dengan sedikit energi mengkonversi JPEG tersebut, performa web yang kita miliki akan lebih joss. Eh ya, ini ilmu lama, yang saya juga belum lama tahu. Maka silakan dibully jika di blog ini banyak sekali gambar JPEG yang belum bersifat Progressive JPEG.

Gambar Image dalam Dunia IT

Gambar image, merupakan salah satu unsur yang tidak dapat dipisahkan dari dunia aplikasi web ataupun mobile yang harus berhadapan dengan client. Gambar image memiliki sesuatu yang tidak dapat digantikan oleh kata-kata. Dunia pergambaran di komputer mengalami banyak kisah. Masih ingat model gambar bitmap? Yang ekstensinya BMP? Atau gambar GIF (baca : ji-ai-ef), atau mungkin malah ada juga jaman sekarang PNG? Jenis format image yang paling disukai di dunia web sekarang tak lain dan tak bukan adalah : JPEG, atau berekstensi jpeg dan jpeg. Untuk gambar yang sifatnya membutuhkan latar belakang transparan, dapat menggunakan PNG. 

Continue reading “Progressive JPEG untuk Optimalnya Blog Anda”

Tentang Halaman Responsive (Responsive Web Design)

 

Ini adalah tentang client-side. Karena perkembangan teknologi hardware sangat cepat, terutama untuk kelas tablet yang memiliki layar kecil, maka otomatis teknologi web pun mau tidak mau harus mengikuti agar memiliki tampilan ramah hardware. Karena layar tablet cenderung kecil, terlebih untuk beberapa jenis smartphone, maka ditemukan beberapa cara untuk melayani seluruh hardware tersebut, agar tatkala layar besar dia bisa tampil maksimal, dan saat layar kecil dia pun bisa tampil optimal. Cara yang telah dikembangkan antara lain:

  1. Memanfaatkan pengenalan user-agent client dari sisi server. Dalam PHP dikenal adanya $_SERVER[‘HTTP_USER_AGENT’] untuk menangkap dengan apakah web tersebut dibuka. Dengan demikian akan dapat dikenali jika dibuka dari mobile phone akan diberikan tampilan mini, dan ketika dibuka dari komputer akan diberikan tampilan lebar. Kelemahannya adalah, beberapa gadget tidak dikenali sebagai smartphone. Disamping itu, kerja web layouter akan menjadi ganda, membuat tampilan desktop dan menentukan tampilan mobile. Belum lagi jika berhadapan dengan netbook, komputer namun dengan layar kecil. Tampilan juga tidak optimal.
  2. Responsive Web Design. Yaitu melakukan optimalisasi CSS dan Javascript yang bekerja di sisi client, yang mana CSS versi terbaru juga telah dapat mengenali jenis perangkatnya. Namun tanpa mengenali jenis perangkatnya, CSS terbaru telah dapat dirancang untuk disesuaikan dengan lebar layar bagaimanapun bentuknya.

Dengan RWD (Responsive Web Design) tampilan akan lebih fleksibel, fluid dan segalanya akan didasarkan pada grid. Jika pada non-responsive web design lebar akan tergantung pada pixel, maka pada RWD tidak lagi, semua akan disesuaikan dengan persentase lebar, termasuk gambar dan elemen-elemen HTML lainnya.

RWD juga memanfaatkan sepenuhnya fungsi @media sebagai pelacak browser dan lebar browser. Sehingga dengan lebar berapapun browser kita, tidak akan muncul scroll kiri dan kanan. Penggunaan media query ini antara lain seperti berikut

 

#content ul li a {
  color: #900;
  width:100%;
  display: block;
}

@media all and (min-width: 1001px) {
  #content ul li a:after {
    content: "lebar";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #content ul li a:before {
    content: "Sedang";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) {  
    #content ul li a:before {
    content: "Kecil";
    font-style: italic;
    color: #666;
  }

 

Masukkan kode tersebut ke dalam kode CSS. Saat browser diperkecil, maka akan muncul kata SEDANG dan selanjutnya SEMPIT. Dengan memanfaatkan media query ini maka ukuran layout juga dapat disesuaikan dengan lebar browser yang ada. Cara mengetest cukup mudah. Perkecil saja web browser kita, apakah muncul perubahan tulisan?

Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

Webchat adalah sebuah media obrol interaktif memalui web. Contoh webchat sering kita lihat di meebo atau fasilitas chat Facebook. Kita pun bisa membuat. Secara konsep sederhana, chat terdiri dari sebuah halaman POST chat, yang dikirimkan ke server, dan ditampilkan melalui halaman web. Secara standard, web tidak akan bisa menerima POST chat dan menampilkannya tanpa merefresh. Maka dengan fasilitas Javascript, kita bisa merefreshkan beberapa bagian elemen web tersebut, tanpa harus merefresh halaman secara keseluruhan. Proses merefresh elemen(div) tersebut jika kurang bijak juga akan banyak memakan resource browser dan menghabiskan memori komputer.

webchat

Disini kita belajar memahami sebuah konsep web dengan menggunakan PHP, MySQL dan JQuery. JQuery sendiri adalah sebuah library Javascript yang telah disusun untuk keperluan penyederhanaan dan optimalisasi fungsi-fungsi javascript. JQuery ini juga cukup tangguh untuk pengganti ajax terutama untuk keperluan hubungan Client Server. Marilah kita mencoba merancang sebuah skenario pembuatan sistem chat berbasis web.

Di sini saya merancang menggunakan tiga (3) file script server utama yaitu :

  • index.php
  • login.php
  • logout.php

Script Server tersebut dikunci tampilan oleh file: styles.css. Sedangkan script sisi-client (diletakkan di direktori js) yang digunakan adalah:

  • library jquery
  • chat.js

Script pendukung di sisi server (diletakkan di direktori scripts) akan dipisahkan sesuai dengan tugasnya antara lain:

  • database.php (penghubung dengan database)
  • datetime.php (pengambil value waktu terakhir chat)
  • postchat.php (pengirim kalimat chat)
  • getchat.php (pengambil kalimat chat secara real-time)
  • chatlist.php (pengambil chat yang sudah ada sebelumnya)
  • chatuserlist.php (pengambil data user yang aktif)

Secara rancangan sistem ini akan berjalan dengan kendali penuh dari script chat.js.
Continue reading “Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery”

[Tips] Operasional Array PHP

Array merupakan variabel penting dalam semua pemrograman termasuk PHP, dimana array memiliki kemampuan membawa dalam satu variable dapat memuat banyak value dan key yang serupa. Contoh Array adalah misal akan kita bentuk sebuah variabel data nama anak-anak kelas III dalam sebuah sekolah akan diletakkan dalam sebuah tabel:

nis nama
001 Banu
002 Budi
003 Bayu
004 Bono

 

Isi dari sebuah tabel itu dapat dimasukkan dalam sebuah variabel array , dimana tiap item array akan berisi KEY dan VALUE, dan antara item satu dengan yang lain akan dipisahkan dengan tanda koma, seperti demikian :

$arr = array("001"=>"Banu","002"=>"Budi","003"=>"Bayu","004"=>"Bono");

Cara lain membuat array adalah dengan :

$arr["001"] = "Banu";
$arr["002"] = "Budi";
$arr["003"] = "Bayu";
$arr["004"] = "Bono";

Adapun sebuah array dapat saja tidak memiliki KEY tapi memiliki Value. Misal:

$arr = array("Banu","Budi","Bayu","Bono");

MENAMPILKAN ARRAY dalam PHP
Menampilkan Array dalam PHP dapat dengan menggunakan fungsi perintah php print_r();

print_r($arr);

JENIS ARRAY
Array dapat meliputi tiga hal:

  • Array Numerik / Numeric Array: adalah operasional array dengan penyebutan key nya adalah urutan item array tersebut, dimulai dari angka ke 0 sebagai item array pertama. Contoh diatas dapat dikatakan bahwa
    $arr[0] = “Banu”
    $arr[1] = “Budi”
    dan seterusnya. Sehingga jika dilakukan echo dengan PHP:

    echo $arr[0];
    

    Hasilnya adalah “Banu”.

  • Array Asosiatif / Associative Array : adalah operasional array dengan penyebutan keynya adalah nama dari key tersebut. Contoh diatas dapat dikatakan bahwa

    $arr[“001”] = “Banu”
    $arr[“002”] = “Budi”
    dan seterusnya. Sehingga jika dilakukan echo dengan PHP:

    echo $arr["002"];
    

    hasilnya adalah “Budi”

  • Array Multidimensional / Multidimensional array : Adalah adanya array di dalam array. Misal :
    
    $makanan = array(
    "buah" => array("Jeruk","Jambu","Alpokat"),
    "sayuran" => array("Bayam","Kenci","Selada","Mikado"),
    "daging" => array("Kambing","Ayam","Sapi"),
    "nasi" => array("merah","hitam","putih", "jagung");
    );
    
    

PENGURAIAN VALUE ARRAY
Penguraian array dapat dilakukan dengan menggunakan looping untuk penyebutan seluruhnya, atau melakukan echo/print untuk penyebutan peritem. Contoh adalah :

$arr = array("001"=>"Banu","002"=>"Budi","003"=>"Bayu","004"=>"Bono");

foreach ( $arr as $item ){
echo $item . "
"; }

atau kadang kita langsung menyebut per item jika bukan looping yang kita perlukan :

echo $arr["002"];

atau

echo $arr[1];

PENGURAIAN KEY DAN VALUE ARRAY
Suatu ketika kita perlu mengurai Value Array beserta Keynya. Maka dapat digunakan looping seperti demikian :

$arr = array("001"=>"Banu","002"=>"Budi","003"=>"Bayu","004"=>"Bono");

foreach ( $arr as key => $value ){
echo $key . "=" . $value . "
"; }

PENGURAIAN ARRAY LANGSUNG MENJADI VARIABEL BARU
Sebuah array dapat dipecah langsung menjadi variabel-variabel baru misal :

$arr = array("nama"=>"bimosaurus","alamat"=>"wonosobo","usia"=>"200 tahun");

Dapat langsung digunakan :

$arr = array("nama"=>"bimosaurus","alamat"=>"wonosobo","usia"=>"200 tahun");
export( $arr );

Maka akan muncul variabel baru :
$nama = “bimosaurus”;
$alamat = “wonosobo”;
$usia = “200 tahun”;

PEMBENTUKAN ARRAY DENGAN EXPLODE
Sebuah array dapat juga terbentuk dari kata atau kalimat yang dipecah dengan menggunakan explode. Sebagai contoh adalah :

$kalimat = "sebenarnya saya sudah lama ingin sekali menulis";
$arr = explode(" ", $kalimat); // dipecah berdsar tanda " " / spasi

Hasilnya jika dibongkar dengan array numerik adalah :

echo $arr[0];

Hasilnya adalah “sebenarnya”. Coba juga dilakukan perintah fungsi print_r();
Kebalikan dari explode adalah implode

PENGURAIAN ARRAY dari MySQL
Andaikan tabel di atas, akan disebut dengan tabel siswa. Maka sebuah Query dari MySQL akan seperti berikut:

$sql = "SELECT * FROM `siswa`";
$query = mysql_query( $sql );

Setelah dilakukan query, maka SQL akan menghasilkan array. Array tersebut akan kita urai dengan beberapa cara. Fungsi yang digunakan juga bisa mysql_fetch_row, mysql_fetch_array, atau mysql_fetch_assoc. Sedangkan perintah looping yang digunakan akan sangat lebih mudah menggunakan while.

while( $r = mysql_fetch_array( $q ) ){
echo $r['nis'] . " = " . $r['nama'] . "
"; } }

Apa perbedaan mysql_fetch_row, mysql_fetch_array, dan mysql_fetch_assoc? Perbedaannya adalah mysql_fetch_row untuk penyebutan array numerik, mysql_fetch_assoc adalah untuk penyebutan array assosiatif, dan mysql_fetch_array bisa untuk keduanya.

Sekian, semoga bermanfaat

[Tips Trick] Bisakah Aplikasi Web Menjalankan File yang Dimiliki root Linux?

Linux, dirancang sebagai sistem operasi yang aman. Keamanan Linux didukung dengan beberapa fitur dasarnya antara lain ketatnya pengaturan akses, ijin / permission dan kepemilikan / owner. User pemilik hak tertinggi adalah super-user yaitu root. User root memang dirancang untuk bertugas terhadap administrasi-admistrasi dan pengaturan-pengaturan dasar bagi lancarnya sistem. Sebuah pengaturan yang ketat biasanya akan berpengaruh terhadap operasional file di tingkat user biasa. Sedangkan biasanya kenyamanan penggunaan akan mengakibatkan celah keamanan. Sehingga dengan demikian seorang sistem administrator harus bijak dalam mengeluarkan keputusan pengaturan sistem.

Dalam sebuah sistem server, layanan web akan dilayani oleh web server. Pada umumnya dalam linux ditangani oleh Apache, LightHTTPD, atau juga Nginx ( n-gin-x / baca engine-x). Seluruh webserver ini akan dihidupkan oleh sistem atau oleh root. Namun demikian webserver ini akan berjalan dengan mode bukan root. Biasanya untuk Linux keturunan RedHat, webserver akan berjalan sesuai namanya yaitu sebagai user apache, atau user nginx atau kadang diset juga sebagai user nobody. Sedangkan berbasis Debian, seperti ubuntu, mint, akan berjalan dengan nama www-data. Dengan demikian, seluruh file yang akan dipublish ke web harus memiliki properti ijin yang boleh diakses oleh user webserver tersebut. Jika saya menggunakan ubuntu, maka biasanya dalam DocumentRoot sistem komputer saya akan memiliki hak akses seperti berikut :

bimo@bimo-laptop ~/www/ $ ls -al
total 499721
drwxr-xr-x 311 www-data www-data      15136 2012-05-11 13:12 .
drwxr-xr-x  23 www-data www-data        544 2012-03-29 13:48 ..
drwxr-xr-x   3 www-data www-data         88 2010-11-28 21:11 sistemdpr
drwxr-xr-x   3 www-data www-data         80 2010-11-28 21:12 hack
drwxr-xr-x   9 www-data www-data        672 2011-04-22 14:35 aplikasi
-rw-r--r--   1 www-data www-data     4571 2010-11-21 07:32 index.php

 

Dalam contoh diatas, terdapat beberapa notasi atau urutan properti dari sebuah direktori/folder atau file. Tentang hal ini akan dibahas di lain posting.

Sebuah file yang dimiliki oleh root, jika user lain tidak diberi akses baik eksekusi, baca maupun modifikasi, maka user sistem tersebut akan gagal melakukan pembacaan file. Begitu juga dengan user apache/web. Ketika user web gagal, maka file tersebut tidak akan tampil di browser karena apache gagal melakukan pembacaan user. Dengan demikian sangat disarankan kepemilikan web adalah milik webserver user.

 

Mengapa webserver tidak boleh berjalan sebagai root?

Dengan alasan keamanan, webserver memang tidak boleh berjalan sebagai root. Sebuah aplikasi web dinamis kadang tanpa disadari, mengandung bug atau kesalahan pemrograman yang berbahaya. Sehingga ketika sebuah intrusi hacker masuk ke dalam web, hacker tersebut dapat melakukan apa saja setingkat dengan root. Hal ini sangat berbahaya. Misalkan adalah jika terdapat script yang mengijinkan user melakukan upload file, dan ternyata file tersebut adalah suatu tools yang memungkinkan adanya operasional sistem, maka jika user web adalah root, sangat mungkin sang hacker dapat membuat operasional penuh terhadap sistem, seperti menghapus seluruhnya, mematikan komputer, mengganti konfigurasi.

 

Dapatkah webserver dipaksa untuk berjalan sebagai root?

Secara teknis bisa saja. Namun sangat beresiko. Proses penggantian user yang akan dijalankan oleh webserver ada dalam konfigurasi webserver. Untuk apache terdapat pada apache.conf (debian) atau httpd.conf, untuk Redhat, Slackware, CentOS dll, yaitu pada bagian ini :

User apache
Group apache

namun sekali lagi tidak disarankan untuk mengganti menjadi user pelaku administrasi, terutama root.

 

Apakah berarti aplikasi web tidak dapat menjalankan pekerjaan-pekerjaan sistem?

Dalam kenyataannya, aplikasi web sering harus menjalankan : SMS Gateway, Menghidupkan dan mematikan webserver secara webbase, dan lain sebagainya. Kadang juga harus melakukan penggantian password user untuk satu alasan. Dapatkah? Ya, dapat. Yaitu dengan menyiasati dengan memanfaatkan file konfigurasi root /etc/sudoers/. Sudo adalah sebuah perintah yang artinya superuser do, atau dikerjakan dengan mode superuser. User yang dapat melakukan sudo adalah user yang terdaftar dalam /etc/sudoers ini. Dengan beberapa configuration maka sudoers dapat juga dilakukan tanpa password atau dengan password. Kira-kira isi sudoers adalah seperti berikut:

# /etc/sudoers
#
# This file MUST be edited with the 'visudo' command as root.
#
# See the man page for details on how to write a sudoers file.
#

Defaults        env_reset

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root    ALL=(ALL) ALL
bimo    ALL=(ALL) NOPASSWD: ALL
# Allow members of group sudo to execute any command
# (Note that later entries override this, so you might need to move
# it further down)

%sudo ALL=(ALL) ALL
#
#includedir /etc/sudoers.d

 

 

BERDEAL ANTARA APLIKASI DENGAN SUDOERS

Misal saya memerlukan akses root untuk menghidupkan sebuah server sms gateway. Sedangkan server tersebut akan dihidupkan dengan mode root dengan perintah :

/etc/init.d/sms start

Maka saya akan membuat script bernama sms.php yang kira-kira sebagai berikut:

 

$cmd  = "/etc/init.d/sms start";

exec($cmd,$ret);

 

Dengan perkiraan operasional adalah jika saya akan menghidupkan server sms adalah

http://namaserver/sms.php

 

 

Script itu hampir akan susah dijalankan oleh webserver. Maka saya akan mengganti script tersebut sebagai berikut :

  1. Membuat sebuah script shell yang berfungsi menghidupkan sms
  2. Membuat permission executable terhadap shell dan dapat diakses dan dieksekusi oleh webserver
  3. Mengganti konfigurasi sudoers
  4. Membuat script php yang akan menjalankan bash shell administrator sms.

 

SCRIPT SHELL

#/bin/bash

#file /opt/smsstart.sh

/etc/init.d/sms start

 

PERMISSION

chown root:root /opt/smsstart.sh

chmod a+x /opt/smsstart.sh

 

KONFIGURASI SUDOERS

# /etc/sudoers
#
# This file MUST be edited with the 'visudo' command as root.
#
# See the man page for details on how to write a sudoers file.
#

Defaults        env_reset

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root    ALL=(ALL) ALL
bimo    ALL=(ALL) NOPASSWD: ALL


#perhatikan bagian ini
www-data ALL=NOPASSWD: /opt/smsstart.sh

# Allow members of group sudo to execute any command
# (Note that later entries override this, so you might need to move
# it further down)

%sudo ALL=(ALL) ALL
#
#includedir /etc/sudoers.

 

 

 

SCRIPT PHP

 

$cmd  = "/opt/smsstart.sh";

exec($cmd,$ret);

 

 

Dengan trik seperti ini, maka kita tetap dapat membuat aplikasi web yang bertujuan untuk melakukan operasional / administrasi yang dapat dilakukan oleh root secara terbatas dan ketat. Yaitu dengan membuat apache/webserver memiliki hak akses setara root untuk menghidupkan sms melalui file /opt/smsstart.sh Namun, untuk hal ini tetap membutuhkan kehati-hatian dalam berprogramming.

Sekian, sekedar tulisan dan sekedar berbagi, semoga bermanfaat.

[Contoh] Cara Mudah Membuat Notasi Data untuk Grafik JQuery JQPlot dengan PHP

Salah satu kelemahan JQPlot dibanding HighChart adalah pembuatan notasi data grafik untuk diplot ke dalam halaman web. Seperti beberapa artikel lalu , HighChart memiliki kemudahan penulisan notasi, karena berjajar notasi sejenis, sesuai dengan arraynya. Berbeda dengan JQPlot. Penulisan notasi JQPlot berupa notasi bersama antara array x dan array y. Contoh: Misal kita memiliki dua array yang akan dijadikan grafik.

 

$r1 = array('1','3','5','7','9','11');

$r2 = array('1','2','1','2','1','2');

 

Pembuatan grafik dengan Highchart akan menggunakan cara seperti ini :

 

.
.
.
xAxis : {

categories : ['1','3','5','7','9','11']

},
.
.
.

series : ['1','2','1','2','1','2'];
.
.
.

 

 

Sedangkan JQPlot memiliki notasi seperti berikut :

$.jqplot('spacegrafik',  [[[1,1],[3,2],[5,1],[7,2],[9,1],[11,2]]]);

Padahal biasanya PHP akan menghasilkan data berasal dari array yang didapat dari MySQL, PostgreSQL, database lainnya, atau memang berupa data array. Untuk itu biasanya pembuatan grafik JQPlot jelas memakan satu langkah lebih banyak daripada penggunaan Highchart. Namun dengan beberapa kelebihan JQPlot, ditambah dengan kesukaan masing-masing developer, maka tidak salah mencoba menyiasati pembuatan notasi grafik ini. Pembuatan notasi Grafik JQPlot akan coba kita jelaskan pada code berikut ini :


 




 

Nah kira kira hasilnya adalah seperti demikian



Nah, selamat mencoba, semoga bermanfaat.

[Contoh] Cara Menumpuk Join Dua Gambar dengan PHP ( watermark )

Mungkin anda pernah melihat gambar seperti berikut :

 

 

Perhatikan pada bagian kanan bawah, anda akan melihat sebuah gambar berupa tulisan yang menimpa gambar utama. Gambar penumpuk tersebut dinamai dengan watermark. Biasanya anda akan kerepotan membuat watermark ini dengan menggunakan photosop atau corel baru kemudian diupload. Namun sebenarnya PHP memiliki kemampuan untuk mengolah hal tersebut. Dengan memanfaatkan kemampuan itu, maka kita dapat dengan mudah upload sembarang gambar tanpa watermark lebih dulu, dan akan secara otomatis terbentuk watermark dengan PHP.

Dengan fasilitas tersebut, maka banyak hal yang bisa dilakukan antara lain :

  • Memberi tanda SOLD / atau terjual pada produk toko online, jika produk tersebut telah terjual
  • Memberi proteksi gambar agar mempersulit proses penjiplakan oleh orang lain, karena akan terbawa tulisan watermarknya
  • Memberi keterangan gambar langsung pada gambarnya
  • dan lain sebagainya

 

PENUMPUKAN DUA GAMBAR

Proses penumpukan dua gambar akan dilakukan dengan memanfaatkan fasilitas GD PHP  Disini saya memiliki dua buah gambar, yang satu adalah skak.jpg, dan satunya adalah skak_text.jpg.

skak.jpg

Gambar kedua adalah skak_text.jpg

 

skak_text.jpg

 

Gambar ini akan kita tumpuk dengan posisi background adalah skak.jpg menjadi background bagi skak_text.jpg. Selain itu, skak_text.jpg akan diberi transparansi agar background masih terlihat. Maka akan kita bangun script seperti berikut:

 




 

Gambar yang akan dihasilkan adalah seperti berikut

 

Nah mudah kan?

Lantas bagaimana untuk membuat proses Upload? Mudah, tinggal menambahkan baris penambah form, filterisasi jika upload terset, dan pengambilan file dengan mengambil gambar dari tmp_name

Seperti berikut:




 

Nah, sebelum lanjut, selamat mencoba, semoga sukses, dan semoga artikel ini bermanfaat. 🙂