• 22 February 2015

    Spesifikasi Perangkat Lunak yang digunakan :
    XAMPP versi 1.7.7
    Pada tutorial ini saya akan membahas mengenai bagaimana melakukan upload file pada PHP. Upload file yang akan kita buat disini, belum melibatkan database. Pada tutorial ini juga belum membahas bagaimana caranya kita membatasi :
    • 1. Ukuran file yang boleh diupload.
    • 2. Tipe file yang boleh diupload.
    • 3. Ukuran (panjang dan lebar) gambar yang boleh diupload. (Jika file yang diupload adalah file gambar)
    Beberapa hal diatas akan dibahas pada tutorial PHP [dasar] – Upload File (Tanpa Database). Sedangkan pembahasan mengenai upload file dengan database akan dibahas pada tutorial PHP [dasar] – Upload File (Dengan Database). Tanpa berpanjang lebar lagi, berikut adalah langkah-langkah untuk melakukan upload file pada PHP.

    Langkah 1 – Membuat Folder TutorialPHP

    Pastikan server apache sudah dijalankan (start) melalui XAMPP-Control Panel. Lalu buatlah sebuah folder tutorialphp pada folder htdocs. (Path lengkap : C:\xampp\htdocs\tutorialphp ).
    struktur-folder-tutorial-php
    Struktur Folder Tutorial PHP

    Langkah 2 – Membuat Form Upload

    Buatlah sebuah file baru dengan nama upload.php. Letakan file tersebut pada folder tutorialphp yang telah dibuat pada langkah 1. Lalu buatlah sebuah form upload seperti pada gambar dibawah ini :
    form-upload
    Form Upload
    Berikut adalah kode untuk membuat form upload diatas :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
    <head>
        <title>Form Upload File</title>
    </head>
    <body>
        <form action="proses_upload.php" method="post" enctype="multipart/form-data">
            <b>File :</b> <input type="file" name="berkas" />
            <input type="submit" name="btn-upload" value="Upload" />
        </form>
    </body>
    </html>
    Penjelasan kode :
    1. Baris 6 : Jika kita ingin membuat sebuah form yang akan menangani proses upload sebuah file, kita HARUS mencantumkan attribute enctype = “multipart/form-data”. Attribute ini menentukan jenis konten yang akan di-submit dari form ke server. Tanpa attribut ini, file yang kita pilih untuk diupload tidak akan pernah dikirim ke server. Bacaan lebih lanjut mengenai attribute ini ada pada referensi no 1 dan 2.
    2. Baris 7 : Untuk memilih gambar dari komputer lokal, gunakan tag HTML input yang memiliki tipe file (type=’file’) dan memiliki nama berkas (name=’berkas’).
    3. Baris 8 : Sebuah tombol submit (type=’submit’) yang memiliki nama btn-upload (name=’btn-upload’) dan memiliki value Upload (value = ‘Upload’). Dengan ‘U’ besar.

    Langkah 3 – Membuat Folder Fileupload

    Buatlah folder fileupload didalam folder tutorialphp. Folder ini digunakan untuk menyimpan file yang diupload.
    Folder Fileupload
    Folder Fileupload

    Langkah 4 – Membuat Kode PHP untuk Upload File

    Jika melihat langkah 2 baris 6, proses upload akan dilakukan oleh halaman proses_upload.php (action = ‘proses_upload.php’). Buatlah file proses_upload.php dan letakan pada folder tutorialphp.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <?php
        if($_POST['btn-upload'] == "Upload")
        {
            $nama_berkas = $_FILES['berkas']['name'];
            $tipe_berkas = $_FILES['berkas']['type'];
            $ukuran_berkas = $_FILES['berkas']['size'];
            if($nama_berkas != "")
            {
                $sumber = $_FILES['berkas']['tmp_name'];
                $target = "fileupload/$nama_berkas";
                if(move_uploaded_file($sumber,$target))
                {
                    echo "<b>Nama File :</b> $nama_berkas";
                    echo "<br/><b>Tipe File :</b> $tipe_berkas";
                    echo "<br/><b>Ukuran File :</b> $ukuran_berkas bytes";
                    echo "<br/> Telah berhasil diupload !!!";
                }else{
                    echo $_FILES['berkas']['error'];
                }
            }
        }
    ?>
    Penjelasan kode :
    1. Baris 2 : Memastikan bahwa pengguna (user) telah menekan tombol yang memiliki nama “btn-upload” dan memiliki value “Upload”. Bagian ini cukup penting karena jangan sampai proses upload dilakukan sebelum pengguna benar-benar menekan tombol btn-upload.
    2. Baris 4 : $_FILES[‘berkas’][‘name’] untuk mendapatkan nama file yang diupload.
    3. Baris 5 : $_FILES[‘berkas’][‘type’] untuk mendapatkan tipe file yang diupload.
    4. Baris 6 : $_FILES[‘berkas’][‘size’] untuk mendapatkan ukuran file yang diupload.
    5. Baris 8 : Memastikan bahwa pengguna telah memilih file yang akan diupload.
    6. Baris 10 : Semua file yang akan diupload akan disimpan sementara di folder temporary yang ada di server. Folder inilah yang dijadikan sebagai path sumber (source) sebelum akhirnya file akan di copy ke folder yang sebenarnya (target).
    7. Baris 11 : Folder tujuan yang akan menjadi tempat untuk file yang diupload.
    8. Baris 13 : Fungsi PHP untuk melakukan upload file dari path sumber ke path target.
    9. Baris 15-18 : Mencetak informasi file yang telah diupload oleh pengguna. Bagian kode ini akan dieksekusi jika proses upload telah berhasil dilakukan.
    10. Baris 20 : Mencetak pesan kesalahan jika proses upload tidak berhasil dilakukan.

    Langkah 5 – Ujicoba

    Setelah selesai melakukan 4 langkah sebelumnya, sekarang saatnya mencoba untuk memilih file yang akan diupload dan bukalah folder fileupload untuk memastikan bahwa proses upload file berhasil. Berikut ini adalah tampilan dari halaman proses_upload.php.
    Tampilan Proses Upload
    Tampilan Proses Upload

    Kesalahan Umum yang sering terjadi :

    1. 1. Pastikan bahwa pada index pertama dari $_FILES[‘index_pertama’][‘index_kedua’] adalah nama dari elemen input yang digunakan. Pada tutorial ini, nama element input yang digunakan untuk menampung path file yang diupload adalah berkas (Lihat langkah 2 Baris 7).
    2. 2. Pastikan bahwa kita menuliskan tmp_name untuk index kedua dari $_FILES[‘berkas’][‘tmp_name’]. Bukan temp_name (menggunakan ‘e’ -> temp).
    Demikian tutorial ini saya tulis. Semoga bermanfaat.

    Source Code :

    tutorialphp-uploadfile

    0 comments

  • Nisekoi Template Designed by Johanes Djogan

    ©2016 - ReDesigned By Ani-Sudo