Month: October 2011

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

Dasar File Upload dengan PHP
Jika ingin membuat sebuah mekanisme pengunggah data umumnya kita menggunakan kode berikut:
```
<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="berkas" />
  <input type="submit" value="Upload" />
</form>
```
Simpan kode HTML di atas dengan nama upload.php, kemudian lihat hasilnya di browser.

Agar kode di atas agar dapat digunakan untuk meng-upload file maka tambahkan dengan script PHP berikut.
```
<?php
if(isset($_FILES&#91;'berkas'&#93;)) {
  move_uploaded_file($_FILES&#91;'berkas'&#93;&#91;'tmp_name'&#93;, "uploads/{$_FILES&#91;'berkas'&#93;&#91;'name'&#93;}");
}
?>
```
Letakkan kode tersebut setelah tag penutup html. Kemudian buatlah sebuah folder dengan nama “uploads” pada tempat yang sama script tersebut disimpan. Maka script sudah siap dicoba untuk meng-upload file yang akan diletakkan pada folder “uploads”.

Fungsi move_uploaded_file() digunakan untuk memindahkan file dari folder “temp” ke folder yang telah kita tentukan. Kemudian darimana saya mendapatkan kedua parameter tersebut? Untuk menjelaskan hal tersebut, lebih mudah jika kita langsung mempraktekannya.

Sekarang tuliskan kode dibawah ini untuk menggantikan fungsi move_uploaded_file() di atas, atau letakkan saja di bawahnya, tanpa menghapus fungsi tersebut.
```
print_r($_FILES);
```
Fungsi print_r($_FILES) akan menampilkan isi dari variable $_FILES. Lakukan upload file sekali lagi, maka selain meng-upload file ke server, browser akan menampilkan isi dari variable $_FILES.

Array ( [berkas] => Array ( [name] => Boston City Flow.jpg [type] => image/jpeg [tmp_name] => /tmp/php1UOmUg [error] => 0 [size] => 339773 ) )

Pada contoh di atas terlihat variable $_FILES bertipe array. Untuk mengakses indeks “name” dengan menggunakan $_FILES['berkas']['name'], sedangkan untuk mengakses indeks “tmp_name” caranya sama, $_FILES['berkas']['tmp_name'].

Bersambung ke catatan berikutnya untuk meng-upload banyak file sekaligus menggunakan HTML5 dan PHP. Source code lengkap tutorial ini ada di bawah. Kalau ada pertanyaan, silakan tinggalkan komentar.
```
<!DOCTYPE html>
<html>
  <head>
    <title>upload file</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <form action="" method="post" enctype="multipart/form-data">
        <p>
        <input type="file" name="berkas" />
        <input type="submit" value="Upload" />
        </p>
      </form>
    </div>
  </body>
</html>
 
<pre>
<?php
if(isset($_FILES&#91;'berkas'&#93;)) {
  move_uploaded_file($_FILES&#91;'berkas'&#93;&#91;'tmp_name'&#93;, "uploads/{$_FILES&#91;'berkas'&#93;&#91;'name'&#93;}");
  print_r($_FILES);
}
?>
```
Catatan: Tulisan ini juga pernah diterbitkan di sini. Saya terbitkan kembali karena saya berencana membuat catatan berseri.
October 20, 2011
Mengenal PHP Array
Artikel ini pernah diterbitkan di http://belajarwebdesign.com/web-programming/mengenal-php-array/

Bagi yang pernah belajar programming pasti sudah tidak asing lagi dengan array. Dalam berbagai bahasa pemrograman yang saya pelajari, array(larik) adalah kumpulan data bertipe sama yang menggunakan nama sama. Namun pada PHP, array memiliki kelebihan yang tidak dimiliki oleh bahasa pemrograman yang lain. Kelebihan inilah yang membuat array pada PHP menjadi sangat powerfull.

Pertama-tama array pada PHP sama seperti pada bahasa pemrograman yang lain.
```
$arr = array(1, 2, 3);
echo $arr[0]; // 1
echo $arr[1]; // 2
echo $arr[2]; // 3
```
Kemudian array pada PHP juga merupakan sebuah hash table.
```
$arr = array('satu'=>1, 'dua'=> 2, 'tiga'=>3);
echo $arr['satu']; // 1
echo $arr['dua']; // 2
echo $arr['tiga']; // 3
```
Dan hebatnya, array pada PHP memiliki ukuran yang dinamis.
```
$arr = array('satu'=>1, 'dua'=> 2, 'tiga'=>3);
$arr['empat'] = 4;
echo $arr['empat']; //4
```
Belum berhenti sampai di situ, array pada PHP juga bisa dengan mudah digabungkan.
```
$arr1 = array(1=>'satu', 2=>'dua');
$arr2 = array(3=>'three', 4=>'four');
$arr3 = $arr1 + $arr2;
print_r ($arr3); //Array ([1]=>satu [2]=>dua [3]=>three [4]=>four)
```
Masih banyak kelebihan-kelebihan array pada PHP yang dapat dilihat di http://php.net/manual/en/language.types.array.php
October 12, 2011

Month: October 2011

Multiple File Upload dengan PHP dan HTML5

Dasar File Upload dengan PHP

Mengenal PHP Array