Tutorial Membuat Upload dan Download File dengan PHP dan MySQLi -Saat ini, sudah banyak website yang mempunyai fasilitas untuk mengirimkan meng irimkan file dari komputer lokal/client ke komputer server atau biasa disebut upload file, lalu file tersebut bisa dengan mudah unduh oleh pengunjung, sehingga mempermudah pendistribusian file. Misalnya website sekolah yang mempunyai fasilitas e-learning atau website dealer mobil yang menyediakan free brosur untuk di download oleh calon pembeli. File yang di upload dan download formatnya bermacam-macam, ada foto, !F ,word dan lainnya. lainn ya. "arena itu, saya akan membuat tutorial upload dan download file. #utorialnya memang agak cukup panjang, tapi tenang saja saja karena pada akhir tulisan saya akan membagikan Source $odenya -Upload FilePertama kita buat database dan tabelnya, disini saya beri nama database adalah upload dan tabelnya juga upload
Kedua buat Folder untuk menampung file-file yang di upload, misalnya folder files
Ketiga buat script untuk form uploadnya
script form upload.php
Form Upload Upload
Keempat buat Script hasil upload script hasil_upload.php
<,php
// Baca lokasi file sementar dan nama file dari form (fupload) lo%asifile = F.0S12fupload2312tmpnam F.0S12fupload2312tmpname234 e234 namafile = F.0S12fupload2312name234 F.0S12fupload2312name234
// Tentukan folder untuk menyimpan file folder = "files/namafile"4 "files/namafile"4
// tanggal sekarang tlupload = date5"6md"74
// Apabila file berhasil di upload if 5mo+euploadedfile5lo%asi 5mo+euploadedfile5lo%asifile8"folder file8"folder"779 "779
echo ":ama File #
namafile su%ses di upload"4
// Masukkan informasi file ke database %one% = mys;liconnect5"localhost"8"root"8""8"upload"74 ;uery = ".:S0T .:TO upload 5namafile8 des%ripsi8 tlupload7 U0S52namafile28 2POST1des%ripsi328 2tlupload27"4 mys;li;uery5%one%8 ;uery74 ? else9 echo "File aal di upload"4 ? ,> sekarang saya coba jalankan scriptnya pada localhost %pload File dan deskripsi lalu klik upload
saat file berhasil di upload, maka tampilannya akan berubah seperti ini
untuk memastikan apakan file telah berhasil di upload, buka direktori files
-Download File-
Saya telah berhasil membuat upload file, sekarang saya akan membuat kebalikannya, yaitu download file. Sederhanya, aplikasi download file menyediakan link terhadap file yang akan kita download, dimana link itu di klik makan terjadilah proses download. Pertama saya buat file berisi script untuk menampilkan files yang available untuk di download
script download.php
pli%asi $o'nload <,php %one% = mys;liconnect5"localhost"8"root"8""8"upload"74
;uery = "S00@T A FOB upload O$0 C6 idupload $0S@"4 hasil = mys;li;uery5%one%8 ;uery74 'hile 5r = mys;lifetcharray5hasil779 echo ":ama File #
r1namafile3 "4 echo "$es%ripsi # r1des%ripsi3
"4 echo "
$o'nload File
"4 ? ,> Kedua saya buat file berisi script untuk menyimpan file yang di download
script simpan.php <,php
// Tentukan folder file yang boleh di download folder = "files/"4
// Lalu cek menggunakan fungsi file_eist if 5Efilee&ists5folder!0T12file2377 9 echo "
ccess forbiddenE nda tida% diperboleh%an mendo'nload file ini!
"4 e&it4 ?
// Apabila mendownload file di folder files else 9 header5"@ontent-Type# octet/stream"74 header5"@ontent-$isposition# attachment4 filename=D""!0T12file23!"D""74 fp = fopen5folder!0T12file238 "r"74 data = fread5fp8 filesiHe5folder!0T12file23774 fclose5fp74 print data4
? ,> apabila dijalankan scriptnya maka
ara Membuat Upload !dit dan Hapus "ambar dengan p#p Sebelum memulai pengkodean silahkan buat folder didalam htdocs dengan nama upload dan buat & folder lagi dengan nama gambar yang akan dibuat untuk menyimban file gambarnya '. Silahkan buka editor kalian bisa memakai $(( !) dll buatlah page inde* dan simpan kode dibawah ini diatas kode +/head
CSS DAN JQUERY +style input width012bordersolid &p* 3eeeeee2padding4p* 0p*25 inputhover bordersolid &p* 366FF5 .group margin&6p*25 .label7 displaytable5 .button te*t-aligncenter2background366FF2color3ffffff2 padding0p*2 border6p*2 width&66p*2 cursorpointer2 border solid 8p* 3eeeeee25 .buttonhoverborder solid 8p* 366FF25 .gambar-container width96p*2marginauto25 .gambar-container h8 te*t-aligncenter2font-family:rial, ;elvetica, sans-serif2font-
si
?javascript? function toggle@A var ele > document.getBlementCyDd@?sembunyi?A2 var gmbr > document.getBlementCyDd@?gmbr?A2 var te*t > document.getBlementCyDd@?tampil?A2 [email protected] >> ?block?A ele.style.display > ?none?2 gmbr.style.display > ?block?2 te*t.inner;#ME > ?$hange Dmage?2 5 else ele.style.display > ?block?2 gmbr.style.display > ?none?2 te*t.inner;#ME > ?$ancel?2 5 5 +/script
0. dan buatlah sebuah koneksi terapkan dipaling atas
PHP +php errorGreporting@BG:EE H @BGIJ#D$B K BG):LIDIAA2 Nhost>?localhost?2 Nuser>?root?2 Npass>??2 Ndb>?dbupload?2//nama database
Nkoneksi>mysOlGconnect@Nhost,Nuser,NpassA2 mysOlGselectGdb@Ndb,NkoneksiA2 if@NkoneksiA //echo ?Cerhasil koneksi?2 5else echoP"JIB"SD ::EP2// jika koneksi salah 5
4. Cuatlah sebuah form seperti dibawah ini Nama : *
Gambar : *
lebih lengkapnya form insert dan form edit lihat dibawah ini
HTML / PHP +; Nid>abs@@intANGB#QPidPRA2if@Nid> PPA NsOl>mysOlGOuery@?select T from tbGupload where id>PNidP?A2 while@Npost>mysOlGfetchGarray@NsOlAA +form name>?form&? action>?? method>?post? enctype>?multipart/form-data? +div class>?group? +label class>?label7?Iama ambar +/label+input type>?te*t? name>?nama? value>?+ ; echo NpostQPnamaPR2? reOuired +/div +div class>?group? +label class>?label7?ambar +/label +img id>?gmbr? class>?img-thumbnail? src>?gambar/+; echo NpostQPgambarPR2? width>?=6? height>?=6?/ +br +span+div id>?sembunyi? style>?display none2? +label for>?regGinputGname? class>?reO?Dmages+/label +input name>?gambar? type>?file? id>?gambar? accept>?image/T? style>?width401? +/div+br +/span +span+a id>?tampil? href>?javascripttoggle@A2? rel>?nofollow?$hange Dmage+/a+/span +/div +div class>?group?
+input name>?edituploadgambar? class>?button? type>?submit? value>?%!:#B? +/div +/form +; 55 else +form name>?form&? action>?? method>?post? enctype>?multipart/form-data? +div class>?group? +label class>?label7?Iama ambar +/label+input type>?te*t? name>?nama? reOuired +/div +div class>?group? +label class>?label7?ambar +/label+input name>?gambar? type>?file? reOuired +/div +div class>?group? +input name>?uploadgambar? class>?button? type>?submit? value>?SDM:I? +/div +/form+; 5
=. Sekrang kita mulai membuat script insert gambar dan terapkan diatas form yang baru kita buat tadi
PHP +; if @isset@NGJS#QPuploadgambarPRAA //// %I#%" MBI:MC:; Nnama>stripGtags@NGJS#QPnamaPRA2 Ngambar>NGFDEBSQPgambarPRQPnamePR2 Ntgl>date@?his-j-m-U?A2 NfileBrror > NGFDEBSQPgambarPRQPerrorPR2 Ntypeambar > array@Pimage/bmpP, Pimage/gifP, Pimage/jpgP, Pimage/jpegP, Pimage/pngPA2 if@inGarray@NGFDEBSQPgambarPRQPtypePR,NtypeambarAA echoP +ecnterFJLM:# :MC:L S:E:;+/centerP2//gambar sallah 5elseif@NfileSiNGFDEBSQPgambarPRQPsimysOlGOuery@?insert into tbGupload values@PP,PNnamaP,PNgambarPA?A2 Nmove > moveGuploadedGfile@NGFDEBSQPgambarPRQPtmpGnamePR,Pgambar/P.NgambarA2 if@NsOlA echo P+script language>?javascript? type>?te*t/javascript? alert@?upload gambar gagal ?A2+/scriptP2 echo ?+meta http-eOuiv>PrefreshP content>P62 url>./P?2 5 else echo P+script language>?javascript? type>?te*t/javascript? alert@?upload gambar berhasil ?A2+/scriptP2 echo ?+meta http-eOuiv>PrefreshP content>P62 url>./P?2 5 5
5
Perhatikan baikbaik !"ri#t $an% ber&arna i' (i!!et()P+ST,- .#0a1%ambar-233 45 !"ri#t ini 1iambi 1ari nama b.tt0n b.kan nama '0rm6
9. Setelah selai membuat script insert sekarang kita membuat sebuah script %pdate gambar/edit gambar
PHP +; if @isset@NGJS#QPedituploadgambarPRAA // %I#%" MBIB!D# Nid>NGB#QPidPR2 Nnama>stripGtags@NGJS#QPnamaPRA2 Ngambar>NGFDEBSQPgambarPRQPnamePR2 Ntgl>date@?his-j-m-U?A2 if@Ngambar >> ??A Nedit>mysOlGOuery@?%!:#B tbGupload SB# nama>PNnamaP );BLB id>PNidP?A2 if@Nedit-portofolioA echo P+script language>?javascript? type>?te*t/javascript? alert@?edit gambar berhasil ?A2+/scriptP2 echo ?+meta http-eOuiv>PrefreshP content>P62 url>./P?2 5 else echo P+script language>?javascript? type>?te*t/javascript? alert@?edit berhasil ?A2+/scriptP2 echo ?+meta http-eOuiv>PrefreshP content>P62 url>./P?2 5 5 else Ncari>mysOlGOuery@?select T from tbGupload where id>PNidP?A2 Ndt>mysOlGfetchGarray@NcariA2 Ngambar>NdtQPgambarPR2 Ntmpfile > ?./gambar/Ngambar?2 Ntypeambar > array@Pimage/bmpP, Pimage/gifP, Pimage/jpgP, Pimage/jpegP, Pimage/pngPA2 if@inGarray@NGFDEBSQPgambarPRQPtypePR,NtypeambarAA echoP FJLM:# :MC:L S:E:;P2 5elseif@NfileSiNGFDEBSQPgambarPRQPsimysOlGOuery@?%!:#B tbGupload SB# nama>PNnamaP,gambar>PNgambarP );BLB id>PNidP?A2
Nmove > moveGuploadedGfile@NGFDEBSQPgambarPRQPtmpGnamePR,P./gambar/P.NgambarA2 if@Nedit7A echo P+script language>?javascript? type>?te*t/javascript? alert@?edit gambar gagal ?A2+/scriptP2 echo ?+meta http-eOuiv>PrefreshP content>P62 url>./P?2 5 else echo P+script language>?javascript? type>?te*t/javascript? alert@?edit gambar berhasil ?A2+/scriptP2 echo ?+meta http-eOuiv>PrefreshP content>P62 url>./P?2 5 5 5 5 . roses pengerjaan hampir selesai, sekarang kita buat script untuk menghapus data/gambar
PHP 78PHP )a"t9)GET,-a"t-2//UNTU; MENHAPUS )i19ab!((int3)GET,-i1-23 i' ()a"t99-1e-34 )"ari9m$!<<.er$(=!ee"t * 'r0m tb.#0a1 &here i19-)i1-=3 )1t9m$!<'et"harra$()"ari3 )%mbr9)1t,-%ambar-2 )tm#>e 9 =6/%ambar/)%mbr= )!<9m$!<<.er$(=1eete 'r0m tb.#0a1 &here i19-)i1-=3 i'(?)!<34 e"h0 -7!"ri#t an%.a%e9=@aa!"ri#t= t$#e9=teBt/@aa!"ri#t= aert(=1eete %ambar %a%a ?=37/!"ri#t- e"h0 =7meta htt#e<.i9-re're!h- "0ntent9- .r96/-= e!e4 .nink ()tm#>e3 e"h0 -7!"ri#t an%.a%e9=@aa!"ri#t= t$#e9=teBt/@aa!"ri#t= aert(=1eete %ambar berha!i ?=37/!"ri#t- e"h0 =7meta htt#e<.i9-re're!h- "0ntent9- .r96/-= 8
Perhatikan baikbaik #r0!e! #en%ha#.!an ini ber1a!arkan i1 $an% 1item.kan 1an ihat !"ri#t .nink ()tm#>e3 !"ri#t ini ber'.n%!i .nt.k men%ha#.! %ambar $an% bera1a 1i1aam 1irekt0ri %ambar
&6. Uang terakhir sekarang membuat script untuk menampilkan gambar lihat dibawah ini
HTML DAN PHP 71i "a!!9=%ambar"0ntainer=7hFGALERY GAMAR7/hF 78#h# )!<9m$!<<.er$(=!ee"t * 'r0m tb.#0a1 0r1er b$ i1 1e!"=3)n09 &hie()1ata#0!t9m$!<'et"harra$()!<334)n08 71i "a!!9=%ambar=7hF78PHP e"h0 )1ata#0!t ,-nama-287/hF 7im% !r"9=%ambar/78PHP e"h0 )1ata#0!t,-%ambar-28=/ 7a "a!!9=e1it= hre'9=6/8i1978PHP e"h0 )1ata#0!t,-i1-28=EDIT GAMAR7/a 7a "a!!9=ha#.!= hre'9=6/8i1978PHP e"h0 )1ata#0!t,-i1-28 a"t91e=HAPUS7/a 7/1i 78#h# 8
Menam#ikan N0ti' ;etika Re're!h a"k .tt0n M.n%kin an1a #ernah ketika men%[email protected]%i 'a"eb00k a. men%etik !tat.!5 1an ketika be.m 1i #0!t a. an1a mere're!h #a%e maka akan a1a n0ti>ka!i5 akan menin%%akan haaman ini ata. ti1ak5 #a1a baha!an kai ini akan 1ibaha! ba%aimana "ara memb.at n0ti' !e#erti it.6 C.k.# 1en%an men%%.nakan "01e berik.t window.onbeforeunload = function() { return "Apakah anda akan meninggalkan halaman ini ?"; };
Siahkan tem#ekan !"ri#t ter!eb.t #a1a #a%e &eb!ite an1a5 !eamat men"0ba 1an !em0%a berman'aat 6
