Tuesday, April 3, 2018

File Upload menggunakan JQUERY sebagai tampilan dan BLOB sebagai penyimpanan

  April 03, 2018      

File Upload menggunakan JQUERY sebagai tampilan dan BLOB sebagai penyimpanan


Mau Shared kali ini mau berbagi ilmu kepada semua agan-agan sekalian. ilmu kali ini adalah diperuntukkan bagi orang yang gemar membuat WEB yaitu membuat File Upload dengan menggunakan JQuery.Untuk tampilannya seperti pada gambar diatas. Mungkin teman-teman sekalian udah sering membuat atau mencoba file upload yang sudah banyak bertebaran di internet. tinggal searching di mbah google dengan keyword "file upload HTML" udah keluar jutaan situs-situs yang mebahas tentang ini. akan tetapi saya disini mencoba berinovasi dengan buatan saya sendiri dengan bantuan jquery. tapi mohon maaf ya jika ada kesalahan karena saya masih newbie nich. saya yakin banyak bertebaran para master-master WEB di luar sana. jadi saya juga butuh bimbingannya para master-master dan suhu-suhu sekalian.

langsung saja dech kita coba langkah-langkah dibawah ini: Oh iya lupa sekedar informasi dalam pembuatan file upload ini media penyimpanan menggunakan MySQL dan tersimpan dalam bentuk BLOB. jadi BLOB disini adalah data yang kita simpan bukan disimpan kedalam folder akan tetapi ikut bersama data MySQL yang kita buat. untuk lebih jelasnya cari aja dech di mbah google.hehehehehe
    • langkah pertama yaitu buatlah database dan juga field-field seperti gambar dibawah ini :
      disini saya membuat dengan nama database "upload" dengan filed-field sebagai berikut:
      untuk script Mysql-nya sebagai berikut:
      CREATE DATABASE database_name; 
      CREATE TABLE `data_upload` (
       `no` int(3) NOT NULL AUTO_INCREMENT,
       `upload_nama` varchar(255) DEFAULT NULL,
       `upload_type` varchar(30) DEFAULT NULL,
       `upload_size` int(6) DEFAULT NULL,
       `upload_file` mediumblob,
       PRIMARY KEY (`no`)
      ) ;
        • setelah kita membuat database kita akan beranjak membuat syntax html dan javascript
        sebelumnya file-file JQuery yang kita butuhkan adalah sebagai berikut:
        Javascript:
        1. jquery.1.6.1.min.js
        2. jquery.ui.1.8.13.min.js
        3. jquery.keyfilter.1.7.min.js

        <html>

        <head>
         Upload 
         
         
         
         
         
        </head>

        <body> 
         


        File Upload Menggunakan JQUERY
         









         
         Upload File 
         
         
         
                 		 



         



        </body>

        </html>

        File diatas merupakan syntax HTML yang digunakan untuk tampilan WEB kita selanjutnya kita akan menambahkan syntax Javascript dengan kode berikut ini:

        Untuk penempatan file javascript berada sebelum tanda </head> pada HTML. selanjutnya kita membuat CSSnya. CSS ini diletakkan juga sebelum </head> untuk syntaxnya sebagai berikut:

        kemudian kita simpan syntax tersebut dengan nama index.php
        selanjutnya kita akan membuat file penyimpanannya dengan diberi nama upload.php untuk syntaxnya seperti berikut ini: 

        $connect_db = mysql_connect(localhost,yourusername,yourpassword);
        $select_db = mysql_select_db(upload); // database yang digunakan
        if(!$connect_db) die ("Database tidak tersambung ..."); // kondisi penggunaan database
        if(!$select_db) die ("Database tidak tersedia ...");
        if ($_FILES[upload_file][tmp_name]){

         $fileName = $_FILES[upload_file][name];
         $fileType = $_FILES[upload_file][type];
         $fileSize = $_FILES[upload_file][size];
         $tmpName = $_FILES[upload_file][tmp_name];
         $fopen = fopen($tmpName, r);
         $file = fread($fopen, filesize($tmpName));
         $file = addslashes($file);
         fclose($fopen);
         if(!get_magic_quotes_gpc()){
         $fileName = addslashes($fileName);
         }
        $query= "INSERT INTO data_upload(upload_nama,upload_type,
        upload_size,upload_file) VALUES(".$fileName.",".$fileType.",
        ".$fileSize.",".$file.")";
        $hasil = mysql_query($query);
         if (!$hasil){
         echo { "File Upload Gagal disimpan..." };
         exit;
         }else{
         echo { "File Upload Berhasil disimpan..." };
         exit;
         }
         }
        ?>

        Selesai Sudah kita dalam membuat File Upload menggunakan jquery. Mudah Bukan..!hehehe maaf nich agan-agan klo kata-katanya kurang dimengerti untuk itu saya langsung kasih aja dech file downloadnya biar bisa langsung anda pelajari.Oh iya ditunggu juga komentarnya ya...!! terima kasih

        File Download 2shared :
        File Upload Menggunakan JQuery

        visit link download