Tutorial Submit Form berbasis Ajax

Kebanyakan tutorial PHP form di website ini menggunakan teknik submit biasa. Kali ini, kita akan membahas tkenik submit form berbasis Ajax dengan jQuery. Kelebihan teknik ini adalah lebih cepat dan terasa nyaman dilihat dari sisi user.  Untuk tutorial kali ini, kita akan membuat halaman kritik saran dengan kolom email dan isi pesan. Tampilan halamannya seperti di screenshoot.

[Read more…]

Cara Menghilangkan Pesan Notice, Warning dan deprecated di PHP

Beberapa hal yang paling sering ditanyakan pengunjung blog ini adalah

1. “mas, program ga jalan?” atau “mas, programmnya error parse-error-syntax-error-unexpected-end-of-file..”
2. “mas, program jalan sih, tapi muncul notice…?”
3. “Mas kok saat di coba ada warningnya ya?”
4. “Mas, program jalan sih, tapi kok ada pesan deprecated?”.

Empat pertanyaan diatas adalah pertanyaan yang paling sering ditanyakan di komentar tutorial. Apakah anda salahsatunya? Hal yang perlu diketahui adalah program yang saya buat entah itu free code atau tutorial sudah di uji bahwa program itu berjalan dengan benar. Namun karena perbedaan sistem operasi serta perbedaan versi PHP dan konfigurasinya maka ketika anda coba, munculah 4 jenis error seperti yang ada dipertanyaan. Empat alasan itulah yang membuat saya menulis artikel ini, agar di kemudian hari jika ada yang bertanya seperti ini cukup saya beri referensi artikel ini saja tanpa harus bolak balik memberi tahu berkali kali.

“mas program ga jalan?”

Jika tutorial yang saya buat sama sekali tidak berjalan dan tidak kadang nge-blank putih di webnya, maka kemungkinan terbesar adalah karena short_open_tag off di php yang anda pakai, entah anda pakai Linux, Webhosting, XAMPP, Wamp atau pake yang lain, asal pakai php, solusinya aktifkan short_open_tag di php.ini.

baca artikel saya yang lain

  1. Mengenal File konfigurasi PHP, baca pada bagian short_open_tag.
  2. Mengatasi error di php

“mas, program jalan sih, tapi muncul notice….kenapa ya?”

notice adalah salah satu pesan error dari php yang menandakan kode yang kita tulis tidak mengikuti standar yang disarankan oleh php. Penyebab lain adalah sebuah variable dideklarasikan namun belum diberi nilai.
Cara termudah adalah dengan menambahkan satu bari kode diawal file php tersebut.

<?php
error_reporting(0);
//kode php yang lain
.....
//end of code 
?>

Kekurangan cara ini adalah anda akan kesulitan jika terjadi syntax error atau fatal error yang disebabkan kesalahan syntax atau logika program. Bagaimana menganalisa terjadi error, cara termudah ganti error_reporting(0) menjadi error_reporting(1). Jadi kesimpulan dasarnya saat koding dan debuging nilai error_reporting=1 dan saat website sudah live error_reporting=0.

Cara lain meliat error adalah dengan membaca error_log. Error_Log di webhosting biasanya ada di folder public_html. Jika kita masih dalam development menggunakan XAMPP, letak eror ini ada di folder XAMPP\apache\logs\error.log.

“Mas kok saat di coba ada warningnya ya?”

Warning sering biasanya saat melakukan query msyql dengan fungsi mysql_query(). Cara mengatasinya bisa dibaca di artikel saya yang berjudul
mengatasi error mysql_query(). Selain karena query mysql, kadang warning juga muncul saat php gagal mengakses file. Untuk hal ini pembahasannya panjang. Intinya perbaiki cara kodingnya, terutama membiasakan dengan gaya koding try....catch.. sehingga saat gagal diakses tidak muncul pesan warning,namun muncul pesan yang kita definisikan sendiri. misalkan kita buat dialogbox, maaf file gagal diakses.

“Mas, program jalan sih, tapi kok ada pesan deprecated?”.

Error keempat ini disebabkan karena kita memakai fungsi yang sudah usang alias ketinggalan jaman. Fungsi seperti mysql_querysession_register() dan fungsi lain yang dinyatakan usang, sebaiknya tidak dipakai lagi.PHP terbaru biasanya sudah mengganti fungsi deprecated dengan fungsi baru yang lebih aman atau lebih cepat. Contohnya mysql_query(), fungsi ini sudah ada sejak lebih dari 10 tahun lalu. Selain itu, jika anda membaca buku terbitan lama, maka makin banyak pesan deprecated yang muncul dilayar. Cara termudah untuk mengatasi deprecated adalah menggunakan cara pertama yaitu menambahkan error_reporting(0); di awal file.

Cara yang lebih bagus, gunakan fungsi fungsi terbaru. sebagai contoh untuk akses mysql sebaiknya gunakan msyqli atau PDO. tutorial untuk pemrograman PHP Mysql dengan teknik mysqli dan PDO bisa anda baca di artikel saya dengan judul:


  1. Tutorial PHP dan mySQLi


  2. Pemrograman Database PHP dengan PDO

Semoga, setelah ini 4 pertanyaan diatas tidak lagi muncul di komentar. Selamat belajar PHP!, Happy Coding!

Mengenal Alternatif Syntax di PHP

PHP merupakan bahasa yang flexible. Flexibilatas ini bisa dilihat dari Metode pemrogramannya ataupun dari syntaxnya. Dilihat dari cara membuat program, kita bisa menggunakan pendekatan OOP atau prosedural. Dilihat dari syntax pembukanya, kita bisa menggunakan short open tag dan standar tag. Dilihat dari struktur kontrolnya ada standar syntax, short syntax dan alternatif syntax. Agar pembahasan tidak melebar, saya akan menjelaskan hanya dari sisi syntax saja.

Short open tag

Short open tag adalah syntax pendek yang disediakan oleh php. berikut ini adalah contoh syntax standar dan syntax short open tag.

//contoh stndar syntax 
<?php
echo " selamat datang di PHP";
?>

//contoh short open tag 
<?
echo " selamat datang di PHP";
?>

Saat ini, kebanyakan seting PHP Menonaktifkan short open tag. Jadi sangat direkomendasikan gunakan standar tag saja mengingat walaupun syntaxnya panjang sedikit. Saya dulu juga sering menggunakan Short open tag namun sekarang tidak lagi karena sering bermasalah di server ataupun di XAMPP terbaru. Jika anda mencoba tutorial yang ditulis ditahun tahun 2014 kebawah, maka anda akan menemukan syntax code yang saya buat menggunakan short open tag.

Cara ini kadang mengakibatkan program tidak jalan, program mengalami pesan error unxexpected end of line. Untuk menghilangkan error tesebut, ganti setiap <? ?> dengan <?php ….?> . Cara lain namun tidak saya rekomendasikan adalah aktifkan short_open_tag di PHP.ini. Petunjuk cara mengaktifkannya bisa dibaca disini.

Short syntax

short syntax adalah syntax alternatif dari kode if...else jika hanya punya dua kondisi. contoh syntax if yang dijadikan short syntax.

//standar if 
$status="";
if($nilai>50)
{
$status= " lulus ";
}
else
{
$status="gagal";
}
//contoh short syntax dari kode diatas adalah 
$status=$nilai > 50 ? 'lulus' : 'gagal';


Contoh penggunaan short syntax ini bisa anda baca di sini.

Alternatif syntax di Struktur Control PHP

alternatis syntax disini adalah menggantikan kurung buka tutup dengan titik dua dan kata penutup seperti endif,endwhile,endfor dsb.

//Kita akan mencoba menggunakan alternatif syntax 
//untuk if else untuk kode if else nilai diatas. 
if($nilai>50):
$status="lulus";
else:
$status="gagal";
endif;

//berikut ini contoh perulangan loop dengan for 

//standar syntax
for ($i=1;i<10;i++)
{
echo " nomor ".$i;
}

//alternatif syntax  for
for($i=1;i<10;i++):
echo "nomor ".$i;
endfor;

//Contoh alternatif while 

///ceritanya habis ambil data dari msyql 
while($data=mysql_fetch_object($res))
{
echo $data->nama;
}
//alternatif syntax untuk while
while($data=mysql_fetch_object($res)):
echo $data->nama;
endwhile;

Penjelasan alternatif syntax bisa dibaca dokumentasi resmi php.

Mengapa kita perlu alternatif syntax?

Alasan utama adalah memahami gaya pemrograman PHP, terutama memahami kode yang ditulis oleh programer lain. Jika anda perogramer wordpress atau plugin wordpress, anda akan sering melihat alternatif syntax seperti ini. Selain itu menggunakan alternatif syntax membuat kode lebih mudah dibaca, terutam jika di letakan di Nested control. Saya beri contoh berikut ini.

anggaplah kita ingin menampilkan nilai dari database. jika nilai kurang dari 50, maka status tidak lulus, jika > 50 berarti lulus. Berikut ini adalah alternatif syntaxnya.

while($data=mysql_fetch_object($res)):
$nilai=$data->nilai;
    if(nilai>80):
          echo "Lulus memuaskan";
    elseif(nilai>50):
         echo "lulus standar ":
    elseif($nilai>0):
         echo "Tidak lulus ";
    endif;
endwhile;

Perhatikan penulisan kode diatas. Bukankah kode sekarang lebih mudah dibaca karena tidak ada lagi kurang buka tutup? . Anda bebas menggunakan syntax yang mana, manun secara pribadi saya sekarang lebih suka dengan alternatif syntax ini karena mudah dibaca. Semoga bermanfaat!

Teknologi dibalik WhatsApp berbasis Web

Artikel ini akan membahas teknologi dibalik WhatsApp berbasis Web yang merupakan layanan baru dari WhatsApp. Jika anda ingin tahu cara memakai whatsapp Berbasis web, silahkan baca artikelnya disini.  WhatsApp berbasis web menggunakan teknologi canggih dan sebagian berupa komponen Open source atau standar terbuka sehingga kita seharusnya juga bisa membuat aplikasi yang mirip baik dari segi tampilan ataupun fungsionalitasnya.

Tampilan WhatsApp berbasis Web

Tampilan WhatsApp berbasis Web

 

Teknologi yang saya bahas hanya teknologi di sisi Front End yang kebanyakan adalah javascript Framework dan HTML. Teknologi tersebut adalah sbb:

  1. HTML5
  2. ModernizerJS
  3. Material Design Thema
  4. VelocityJS
  5. UndersoreJS
  6. BlueBirdJS
  7. MomentJS
  8. ReactJS

 

HTML5

WhatsApp menggunkan 2 Fitur HTML yang paling baru yaitu akses Hardware. WhatsApp Web ini mampu mengambil gambar dari camera Laptop/PC dan mengirimkannya keteman chat anda. Selain itu, Aplikasi Web ini mampu merekam suara dan mengirimkan ke teman chating. Semua itu dlakukan tanpa Plugin semacam Flash atau Java. Jika anda ingin membuat aplikasi web yang mendukung akses kamera silahkanbaca tutorialnya disini . Bagaimana jika browser tidak mendukung HTML5? cara kedua yaitu menggunakan Fallback. Fallback adalah teknik untuk mendeteksi apakah browser bisa mengakses kamera secara langsung, jika tidak bisa, maka akses dengan Plugin Flash. Anda bisa menggunakan library  WebCamJS.   Untuk tutorial mengakses microphone dan merekam suara langsung dari browser, tutorial bisa dibaca disini.

HTML5 benar benar dipakai secara Optimal oleh Whatsapp agar aplikasinya ringan serta bisa diakses disembarang browser yang mendukung hTML5. Walaupun demikian, saat ini browser yang paling Optimal dalah Google Chrome.  Satu lagi fitur yang ada adalah Desktop Notifikasi. Sejauh ini, Hanya Google Chrome yang mengimplementasikan fitur ini. Anda bisa mempelajari tentang notifikasi ini di http://www.html5rocks.com/en/tutorials/notifications/quick/

Modernizer

Dalam point HTML5, Whatsapp menyarankan menggunakan Chrome. Pertanyaan selanjutnya bagaimana Whatsapp mendeteksi Bahwa browser mendukung HTML5 Audio dan akses ke kamera langsung? WhatsApp tidak membuat code untuk mendeteksinya sendiri, namun menggunakan Library Modernizer. Library inilah yang akan mendeteksi apakah sebuah browser mendukung fitur HTML5 atau tidak. Yang perlu di ingat disini, semua browser modern sudah mendukung HTML5, permasalahannya implementasi fitur HTML5 dimasing masing browser berbeda. Disinilah manfaat Modernizer baru terasa. Anda juga bisa menerapkan di aplikasi yang sedang anda buat dengan mempelajarinya disini.

Material Design

Material design adalah konsep design yang di populerkan google dan dipakai sebagai dasar desain di Androdi Lolilop dan secara bertahap diterapkan disemua aplikasi Web punya Google. Jika anda pernah memakai GMail di Android atau memakai Google Inbox, maka anda sudah memakai material design. Saya sendiri tidak begitu tahu library yang dipakai oleh pihak whatsApp, namun anda juga bisa membuat aplikasi web dengan tampilan material design menggunakan CSS framework yang sifatnya open source. Dua CSS framework yang bisa anda pakai adalah sbb:

VelocityJS

VelocityJS adalah library Javascript yang dikhususkan untuk animasi tampilan. Pada intinya, VelocityJS adalah jQuerynya Animasi Web. Silahkan akses sendiri tutorialnya disini.

UnderscoreJS

UndescoreJS adalah library javascript yang mempermudah penulisan kode javascript. Underschore mempunyai lebih dari 100 fungsi yang akan mempermudah hidup anda dalam menulis javascript. Silahkan masuk kewebsitenya untuk mempeljari lebih lanjut di http://underscorejs.org/.

BluebirdJS

Bluebird disini bukan perusahaan taksiya :), bluebird disini adalah library javascript yang memudahkan proses penulisan kode, sama seperti VelocityJS dan underscoreJS. walaupn sama sama library penekannya berbeda, velocity untuk animasi, Underscore untuk fungsi helper sedangkan bluebird untuk akses kesistem, misalkan membaca file JSON. Bluebird banyak dipakai untuk mengurangi error di javascript dengan memperkuat kode dibagian “try…catch…”.

MomentJS

Saat anda chating, anda kadang melihat history chat dengan tulisan “1 jam yang lalu”,  “5 menit yang lalu” atau “3 hari yang lalu”. Konsep waktu relatif terhadap waktu saat ini dipakai disebagian besar aplikasi chat serta timeline jejaring social. Whatsapp juga tidak jauh berbeda, untuk memudahkan menkonersi waktu absolute seperti (2015-02-25 10:10:10) menjadi tulisan “3 hari yang lalu” cukup gunakan momentJS.

ReactJS

Pernah ga sih kita berpikir bagaimana facebook menangani halaman webnya secara realtime tanpa perlu reload website. Contohnya saat anda komentar, melike, menambah teman, membaca pesan dan aktivitas dilain, facebook jarang melakukan refresh Website. Kok bisa ya? Facebook menggunakan Library React untuk membangun interfacenya. RactJS adalah libary javascript yang dipakai dan khususkan untuk mebuat user interface yang responsive saat diakses user tanpa sering sering reload. React ini fungsinya sama dengan AngularJS.

 

Sebenarnya ada satu lagi teknologi yang dipakai whatsapp. Teknologi itu adalah WebFont. Whatsapp memanfaatkan Google Webfont  agar tampilan teksnya rapih dan terlihat lebih modern. Jika kita perhatikan, ternyata kebanyakan teknologi yang dipakai di WhatsApp adalah teknologi Opensource dan javascript library. Artinya, bagi kamu kamu programer Web yang hanya ngandalin PHP dan jQuery, sudah saatnye menambah skill baru dengan teknologi diatas. Kalau cuma PHP dan jQuery, siap siap saja bentar lagi tergusur! Teknologi memang tidak pernah berhenti, maka tugas kita sebagai programer yang terus menerus belajar sehingga aplikasi yang kita bangun bisa terus susuai dengan perkembangan jaman.

InsyaAllah, tutorial masing masing library diatas akan saya buatkan tutorialnya secara bertahap. Selamat belajar, semoga bermanfaat!