Category: HTML5

5 Teknik Dasar HTML5 yang Wajib Anda Ketahui
Dalam berbagai artikel dan contoh kode pada blog ini sudah diterapkan beberapa fitur baru yang ada di HTML5. Saat ini sebagian besar browser terbaru sudah mendukung fitur-fitur tersebut. Berikut ini adalah 5 teknik dasar HTML5 untuk membuat dokumen HTML Anda menjadi lebih singkat dan bersih.

1. Penulisan doctype pada awal sebuah dokumen HTML yang lebih singkat dan sederhana.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
Dulu, hampir tidak mungkin ada seorang web developer yang hafal di luar kepala kode untuk menuliskan doctype di atas. Sekarang Anda dapat menggantinya dengan doctype berikut ini.
```
<!doctype html>
```
Sederhana sekali dan tidak perlu menuliskannya dengan huruf besar seperti orang sedang marah.

2. Penggunaan XML namespace dan atribut-atribut XML lain pada elemen html tidak diperlukan.
```
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
```
Pada HTML5 cukup ditulis:
```
<html lang="en">
```
3. Pada HTML5 diperkenalkan cara baru untuk menyebutkan charset dokumen.
```
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
```
Pada HTML5 menjadi:
```
<meta charset="utf-8">
```
4. Pada HTML5 kita bisa menulis tag script, style, dan link tanpa atribut type="text/javascript" dan type="text/css".
```
<script type="text/javascript">
  // kode javascript Anda di sini
</script>
```
Pada HTML5 cukup dituliskan seperti berikut:
```
<script>
  // kode javascript Anda di sini
</script>
```
5. Dokumen HTML5 tetap valid tanpa adanya slash ‘/’ pada self closing tag.
```
<img src="" alt="" />
<br />
```
Pada HTML5, tanda slash bisa dihilangkan.
```
<img src="" alt="">
<br>
```
Itulah 5 teknik dasar untuk membuat sebuah dokumen HTML5 yang valid dan memiliki syntax yang kompatibel dengan HTML4 dan XHTML1. Jadi tidak ada salahnya untuk menggunakannya dalam setiap website yang kita buat. Seperti yang Anda lihat, HTML5 membuat kode menjadi lebih singkat dan bersih, sehingga menghasilkan ukuran file yang lebih kecil. Ukuran file yang lebih kecil akan membuat website menjadi lebih ringan untuk diakses.
May 11, 2012
Jangan Gunakan Autofocus pada Form Login
Autofocus adalah salah satu atribut baru yang dikenal pada HTML 5. Autofocus adalah sebuah atribut boolean (true/false). Atribut autofocus akan secara otomatis mengatur fokus ke kotak input yang telah ditentukan. Jadi bisa dibilang autofocus menghemat 1 kali mouse klik.

Contoh website yang menggunakan autofocus pada kotak input adalah mesin pencari Google. Ketika ingin mencari sesuatu melalui Google, kita tidak perlu mengeklik pada kotak input untuk bisa mengetik kata kuncinya. Secara otomatis kursor berkedip di kotak input, pertanda bisa langsung mengetik di situ.

Di bawah ini adalah potongan kode untuk menunjukan penggunaan autofocus.
```
<label for="nama">Nama </label><input id="nama" name="nama" type="text" autofocus="autofocus"/>
```
Pada atribut boolean seperti autofocus, pengisian nilai tidak mutlak diperlukan, jadi penulisan seperti di bawah ini juga benar.
```
<label for="nama">Nama </label><input id="nama" name="nama" type="text" autofocus/>
```
Semua browser moderen mendukung fitur ini, kecuali Internet Explorer. Untuk mengimplementasikan fitur ini pada browser yang tidak mendukung autofocus, maka bisa digunakan JavaScript. Namun bukan itu yang menjadi masalah di sini. Perhatikan potongan kode di bawah ini.
```
<label for="nama">Nama </label><input id="nama" name="nama" type="text" <strong>autofocus="autofocus"</strong>/> <br />
<label for="password">Password </label><input id="password" name="password" type="password" />
```
Ada sebuah halaman yang berisi sebuah form login. Salah satu kotak input-nya memiliki atribut autofocus. Jadi kursor akan secara otomatis berkedip di kotak “nama” setelah halaman selesai dimuat seutuhnya. Namun beberapa pengguna tidak sabar atau tidak mengetahui fitur ini, sehingga mereka mengeklik pada kotak input “nama” tanpa menunggu halaman dimuat seutuhnya. Akibatnya, ketika pengguna sampai pada kotak input “password”, lalu halaman selesai dimuat seutuhnya, maka kursor akan berpindah lagi ke kotak input “nama”.

Bayangkan jika seseorang sedang mengetik di kotak password lalu tiba-tiba kursor berpindah ke kotak input “nama” yang notabene bertipe text. Password-nya akan tercetak di kotak input “nama” tanpa samaran. Hal ini fatal karena password bisa dilihat oleh orang lain yang kebetulan lewat di dekat kita.

Website yang menerapkan fitur ini pada form login contohnya adalah Facebook, sedangkan yang tidak adalah Twitter.
March 30, 2012

Multiple File Upload dengan PHP dan HTML5

Multiple upload HTML5
Jika kita ingin melakukan upload lebih dari satu file, biasanya akan menggunakan kode HTML sebagai berikut:

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="berkas&#91;&#93;" />
  <input type="file" name="berkas&#91;&#93;" />
  <input type="submit" value="Upload" />
</form>

Kelemahannya adalah kita harus menekan tombol browse sebanyak jumlah file yang ingin di-upload. Selain itu membutuhkan bantuan Javascript jika diinginkan fasilitas untuk penambahan field upload.

Melanjutkan catatan file upload yang lalu, kali ini adalah tentang mengunggah (upload) banyak berkas (file) dengan PHP dan HTML5. Ternyata HTML5 sudah mampu mengunggah banyak file sekaligus tanpa bantuan Javascript, hanya dengan sebuah form <input type=’file’>. Namun ada 2 hal yang membedakan dengan file upload biasa, pertama pada attribute name, yaitu di belakangnya ditambahkan tanda kurung kotak “[ ]” yang akan menyebabkan PHP memperlakukannya sebagai sebuah array. Perbedaan yang kedua yaitu adanya attribute multiple, yang baru diperkenalkan pada HTML5.

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="berkas2&#91;&#93;" />
  <input type="submit" value="Upload" />
</form>

Jika kita coba tampilkan di layar menggunakan perintah print_r($_FILES) (baca catatan file upload yang lalu) maka hasilnya adalah kurang lebih sebagai berikut:

Array
(
    [berkas2] => Array
        (
            [name] => Array
                (
                    [0] => 125586922.jpg
                    [1] => afpheh5e.jpg
                    [2] => baby nirvana.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                    [1] => image/jpeg
                    [2] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/phpuBSQsq
                    [1] => /tmp/phpOJajKX
                    [2] => /tmp/phpW93N1u
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                    [2] => 0
                )

            [size] => Array
                (
                    [0] => 91835
                    [1] => 41895
                    [2] => 36404
                )

        )

)

Sekarang kita punya array multidimensi yang bentuknya sedikit aneh karena alih-alih dikelompokkan berdasarkan indeks 0, 1, 2, dst melainkan indeks name, type, tmp_name, dst. Menggunakan operator foreach kita bisa membagi file menurut indeks numeriknya tanpa harus melakukan transformasi array yang rumit.

foreach($_FILES['berkas2']['tmp_name'] as $key => $tmp_name) {
  move_uploaded_file($tmp_name, "uploads/{$_FILES['berkas2']['name'][$key]}");
}

Kini mengunggah banyak file sekaligus jadi lebih mudah, tekan tombol ctrl pada keyboard atau cukup drag mouse untuk memilih file-file yang ingin di-upload. Berikut ini adalah kode sumber lengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <title>upload 1 file</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <form action="" method="post" enctype="multipart/form-data">
        <p>
          <input type="file" name="berkas2&#91;&#93;" multiple="multiple" />
          <input type="submit" value="Upload" />
        </p>
      </form>
    </div>
  </body>
</html>
 
<pre>
<?php
  if(isset($_FILES&#91;'berkas2'&#93;)) {
    foreach($_FILES&#91;'berkas2'&#93;&#91;'tmp_name'&#93; as $key => $tmp_name) {
      move_uploaded_file($tmp_name, "uploads/{$_FILES['berkas2']['name'][$key]}");
    }
  }
?>

October 28, 2011

Category: HTML5

5 Teknik Dasar HTML5 yang Wajib Anda Ketahui

Jangan Gunakan Autofocus pada Form Login

Multiple File Upload dengan PHP dan HTML5