Menu
» »Unlabelled » Cara Membuat Form Upload dan Download

A+ A-


Pernahkah anda mengupload file seperti foto, mp3, video dll. Dan pernahkah anda mendownload seperti foto, mp3, video dll.
Disini kita akan bahas bagaimana cara proses upload dan download suatu file tersebut




Pertama kita buat database dengan nama upload&download :
-- Table structure for savefile
-- ----------------------------
CREATE TABLE `savefile` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `date` date NOT NULL,
  `type` varchar(10) NOT NULL,
  `size` int(11) NOT NULL,
  `url` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=104 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records
-- ----------------------------
INSERT INTO `savefile` VALUES ('88', 'cantik', '2015-02-02', 'jpg', '8790', './data/cantik.jpg');
INSERT INTO `savefile` VALUES ('102', 'all night', '2015-02-07', 'mp3', '12009037', './data/all night.mp3');
INSERT INTO `savefile` VALUES ('103', 'cursor', '2015-02-07', 'rar', '14683525', './data/cursor.rar');

Kemudian buat file baru dengan nama config.php :
  1. <?php
  2. $host = "localhost";
  3. $user = "root";
  4. $pass = "root";
  5. $db_name = "upload&download";
  6. mysql_connect($host, $user, $pass) or die (mysql_error());
  7. mysql_select_db($db_name) or die (mysql_error());
  8. ?>
Selanjutnya kita buat index.php :
  1.  <html>
  2. <head><title>Cara Membuat Form Upload dan Download</title></head>
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. <body>
  5. <div id="head"></div>
  6.     <div id="header">
  7.     <h2>Cara Membuat Form Upload dan Download</h2>
  8.     Oleh Onehied
  9.         <div id="menu">
  10.         <a href="index.php" class="active">Home</a>
  11.         <a href="upload.php">Upload</a>
  12.         <a href="download.php">Download</a>
  13.         </div>
  14.         <div id="content">
  15.         <p>Cara Membuat Form Upload dan Download oleh <a href="http://www.darionehied.blogspot.com/" target="_blank"><strong>darionehied</strong></a>
  16.            Anda bisa mempublikasikan ulang, atau merubah Source Code ini.
  17.            </p>
  18.         </div>
  19.     </div>
  20. </body>
  21. </html>
Buat file baru dengan nama upload.php :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Cara Membuat Form Upload dan Download</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css">
  6. </head><body>
  7.     <div id="head">
  8.         <div id="header">
  9.             <h2>Cara Membuat Form Upload dan Download</h2>
  10.             <span>Oleh Onehied</span>
  11.              <div id="menu">
  12.             <a href="index.php">Home</a>
  13.             <a href="upload.php" class="active">Upload</a>
  14.             <a href="download.php">Download</a>
  15.             </div>
  16.              <p>Silakan Upload file yang anda inginkan.</p>
  17.             <?php
  18.         include 'config.php';
  19.          if (isset($_POST['save'])){
  20.         $file_name         = $_POST['name'];
  21.         $file_date         = date("Y-m-d");
  22.         $file_size         = $_FILES['file']['size'];
  23.         $file              = $_FILES['file']['name'];
  24.         $file_type         = strtolower(end(explode('.', $file)));
  25.         $file_tmp        = $_FILES['file']['tmp_name'];
  26.         $file_lokasi     = './data/'.$file_name.'.'.$file_type;
  27.         $file_tujuan    = $file_lokasi;
  28.         // Simpan ke Database
  29.         $sql = "insert into savefile (name,date,type,size,url) values ('$file_name', '$file_date','$file_type','$file_size','$file_tujuan')";
  30.         mysql_query($sql);       
  31.         // Simpan di Folder Gambar
  32.         $lokasi = './data/'.$file_name.'.'.$file_type;
  33.         move_uploaded_file($file_tmp,$lokasi);
  34.         {echo"<script>alert('file Berhasil diupload !');</script>";    }
  35.         }
  36.             ?>
  37.   <div id="content">
  38.             <form method="post" enctype="multipart/form-data">
  39.             <th align="left"><b>Name File : </b></th>
  40.             <tr>
  41.             <th align="left"><input type="text" name="name" size="35" maxlength="255" required />
  42.             <br><br></th></tr>
  43.             <tr>
  44.             <th align="left"><b>Search File : </b></th></tr>
  45.             <tr><th align="left"><input type="file" name="file" required /><br><br></th></tr>
  46.             <tr>
  47.             <th align="left"><input type="submit" value="Upload" name="save"></th></tr><br><br>
  48.                     </form>
  49.  <div id="acc4"><a href="http://www.darionehied.blogspot.com/" target="_blank">darionehied</a></div>       
  50.         </div>
  51.         </div>
  52.     </div>
  53. </body>
  54. </html>
Kemudian buat file dengan nama download.php :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Cara Membuat Form Upload dan Download</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css">
  6. </head><body>
  7.     <div id="container">
  8.         <div id="header">
  9.             <h2>Cara Membuat Form Upload dan Download</h2>
  10.             <span>Oleh Onehied</span>
  11.                  <div id="menu">
  12.                     <a href="index.php">Home</a>
  13.                     <a href="upload.php">Upload</a>
  14.                     <a href="download.php" class="active">Download</a>
  15.                  </div>
  16.                  <div id="content">
  17.             <p>Silahkan delete atau download file yang sudah di Upload. Untuk mendownload file ber-ekstensi (gambar) jpg, jpeg, bmp, png, gif dll Silakan klik kanan download with IDM, jika anda menggunakan IDM atau Anda bisa klik download kemudian klik kanan save image as.</p>
  18.             <p align="right"><a href="http://www.darionehied.blogspot.com/" target="_blank"><strong>darionehied</strong></a></p>      
  19.             <p>
  20. <table width="100%">
  21. <tr>
  22.     <td align="center" width="50"><b>Opsi</b></td>
  23.     <td align="center"><b>No</b></td>
  24.     <td align="center"><b>Name</b></td>
  25.     <td align="center"><b>Date</b></td>
  26.     <td align="center" width="70"><b>Type</b></td>
  27.     <td align="center" width="70"><b>Size</b> (b)</td>
  28. </tr>
  29. <?php
  30.     include 'config.php';
  31.     $sql = "select * FROM savefile";
  32.     $no = 1;
  33.     $tampil = mysql_query($sql);
  34.     while ($data = mysql_fetch_array($tampil)){
  35. ?>
  36. <tr>
  37. <td align="center"><?php echo $id ?><a href="delete.php?id=
  38. <?php echo $data['id']; ?>"><img src="images/delete.gif"></a>&nbsp;
  39. <a href="<?=$data['url'];?>"><img src="images/downloadb.png"></a></td>
  40. <td align="center"><?php echo $no; ?></td>
  41. <td align="center"><?php echo $data['name']; ?></td>
  42. <td align="center"><?php echo $type= date("Y-m-d"); ?></td>
  43. <td align="center"><?php echo $data['type']; ?></td>
  44. <td align="center"><?php echo $data['size']; ?></td>
  45. </tr>
  46. <?php
  47. $no++;
  48. }
  49. ?>
  50.             </table>
  51.             </p>
  52.         </div>
  53.         </div>
  54.     </div>
  55. </body>
  56. </html>
 Selanjutnya kita buat file delete.php :
  1. <?php
  2. include('config.php');
  3. $id = $_GET['id'];
  4. $query = mysql_query("delete from savefile where id='$id'") or die(mysql_error());
  5. if ($query) {
  6.     header('location:download.php?message=delete');
  7. }
  8. ?>
 Dan terakhir kita buat file dengan nama style.css :
  1. body {
  2.     background-color:none;
  3.      
  4.      }
  5. #header {
  6.     width:550px;
  7.     margin:20px auto;
  8.     padding:10px;
  9.     text-align:center;
  10.     background-color:#fff;
  11.     box-shadow:0px 0px 3px #000;
  12.     }
  13. h1, h2, h3 {
  14.     margin:0;
  15.     padding:0;
  16. }
  17. #menu {
  18.     text-align:center;
  19.     margin:15px 0px;
  20.     border-top:1px solid #0099FF;
  21.     border-bottom:1px solid #0099FF;
  22. }
  23.     #menu a {
  24.         display:inline-block;
  25.         padding:5px 10px;
  26.         text-decoration:none;
  27.         color:#000;
  28.         font-weight:bold;
  29.     }
  30.    
  31.         #menu a:hover {
  32.             background-color:#0099FF;
  33.         }
  34.        
  35.         #menu a.active {
  36.             background-color:#0099FF;
  37.         }
  38.        
  39. .table, td {
  40.     border:1px solid #0099FF}
  41. #acc4 {
  42.     text-align:right;
  43.     }
  44. input[type=submit] {
  45.     color:#ffff;
  46.     width:80px;
  47.     height: 25px;
  48.     background:#3399FF;
  49.     margin:10px 0px 0px 0px;
  50.     border-radius:18px 18px 18px 18px;
  51.     text-decoration:none;
  52.      }
  53.      a, a:link, a:visited { color:#0099FF; font-weight: normal; text-decoration: none;}
  54.     #menu1 a:hover }       
Download Source Code
Download
Password
darionehied
Posted by

Share to:

at 6:57 AM

Posting Komentar

Langganan: Posting Komentar (Atom)
 
Top