Cara Upload Gambar dan file Doc Kedalam Database Menggunakan PHP

Selamat malam sobat blogger kali ini kami aka share bagaimana cara upload gambar dan file doc kedalam database menggunakan php. Disini kami akan akan menggunakan form Ajax Bootsrap supaya tampilan yang dihasilkan lebih bagus untuk di lihat.

Langsung saja kami akan memulainya, yang pertama kalian lakukan adalah membuat databasenya terlebih dahulu dan ingat sesuai judul diatas kami akan share Cara Upload Gambar dan file Doc (Word, dll) sekaligus.

Buat database dengan nama "image" kemudian masukkan database dibawah ini.

 -- phpMyAdmin SQL Dump
-- version 4.8.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 06, 2018 at 05:04 PM
-- Server version: 10.1.32-MariaDB
-- PHP Version: 7.2.5

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `image`
--

-- --------------------------------------------------------
--
-- Table structure for table `uploadimg`
--

CREATE TABLE `uploadimg` (
  `number` int(11) NOT NULL,
  `username` varchar(11) NOT NULL,
  `complaintFile` varchar(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `uploadimg`
--
ALTER TABLE `uploadimg`
  ADD PRIMARY KEY (`number`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `uploadimg`
--
ALTER TABLE `uploadimg`
  MODIFY `number` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
 

Kami menggunakan tipe data varchar di atas bertujuan supaya nanti file yang di upload bukan doc saya tetapi bisa gambar dan lainnya.

Kita telah membuat database di atas berikutnya yang mesti dilakukan adalah membuat form-nya. Perlu sobat ketehui disini kita menggunakan 2 form, form pertama untuk form input gambar dan doc dan form kedua adalah form untuk memanggil doc atau gambar yang ada di database.

Tetapi sebelum anda membuat form dibawah jangan lupa untuk membuat folder dengan nama complaintdocs yang bertujuan sebagai penyimpanan file yang akan kita upload nantinya.

Berikut form untuk upload gambarnya. Disini kami memberi nama filenya "index.php". berikut formnya.

 <?php session_start();
error_reporting(0);
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'image');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
else{

  if(isset($_POST['submit']))
  {
    $number=$_SESSION['number'];
    $username=$_POST['username'];
    $compfile=$_FILES["compfile"]["name"];


    move_uploaded_file($_FILES["compfile"]["tmp_name"],"complaintdocs/".$_FILES["compfile"]["name"]);
    $query=mysqli_query($con,"insert into uploadimg (username,complaintFile) values('$username','$compfile')");

    $sql=mysqli_query($con,"select number from uploadimg  order by number desc limit 1");
    while($row=mysqli_fetch_array($sql))
    {
     $cmpn=$row['number'];
   }
   $complainno=$cmpn;
   echo '<script> alert("submit succesfull  "+"'.$complainno.'")</script>';
 }
 ?>
 <!DOCTYPE html>
 <html>
 <head>
  <title>IMAGE</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="index.php">FORM UPLOAD IMAGE</a>
      <a class="navbar-brand" href="panggil-image.php">FORM GET IMAGE</a>
    </div>
  </div>
</nav>
<br />
<h2 align="center">UPLOAD IMAGE</h2>
<br />
<form method="post" enctype="multipart/form-data">
 <div class="form-group">
   <label>ENTER USERNAME</label>
   <input type="text" name="username" class="form-control" required="required">
 </div>
 <div class="form-group">
   <label>UPLOAD IMAGE</label>
   <input class="form-control" type="file" name="compfile" value="" required="required">
 </div>
 <div class="form-group">
   <button class="btn btn-primary" type="submit" name="submit">Submit</button>
 </div>
</form>

</div>
</body>
</html>
<?php } ?> 



Pada form di atas kami telah menghubungkan kedalam database image. dan perhatikan beberapa penjelasan dibawah ini.

Perintah move_uploaded_file($_FILE['file']['tmp_name'], $nama) adalah fungsi paling utama dalam script upload kita. Dimana fungsi inilah sebenarnya yang digunakan php untuk mengirimkan file dari komputer kita ke web server. Dalam fungsi tersebut , kita melihat dua bagian utama, yaitu :

  • Sumber file dari komputer kita $_FILE['file']['tmp_name']
  • Tujuan upload file yaitu $nama ,  Dalam hal ini kami tidak menyebutkan pada direktori mana file akan kita tempatkan, sehingga saya menuliskan secara langsung tujuan filenya dengan $nama, yang artinya file yang kita upload nantinya akan disimpan menjadi 1 direktory dengan script uploadnya, nama filenya juga akan tetap sama dengan nama file yang kita upload.

Kemudian perhatikan <form method="post" enctype="multipart/form-data"> fingsi dari enctype="multipart/form-data" adalah membaca data yang bertipe type="file" jika anda tidak menggunakan itu maka gambar atau doc yang kalian upload tidak akan masuk kedalam database.

Tahap berikutnya adalah membuat form untuk memanggil database, disini kami memberi nama panggil-image.php berikut formnya.

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'image');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>IMAGE</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="index.php">FORM UPLOAD IMAGE</a>
      <a class="navbar-brand" href="panggil-image.php">FORM GET IMAGE</a>
    </div>
  </div>
</nav>
<br />
<h2 align="center">GET IMAGE</h2>
<br />
<form method="post">
 <div class="form-group">
   <table class="table">
    <thead>
      <tr>
        <th scope="col">Number</th>
        <th scope="col">Username</th>
        <th scope="col">Image</th>
      </tr>
    </thead>
    <tbody>

      <?php $query=mysqli_query($con, "select * from uploadimg"); while($row=mysqli_fetch_array($query)) { ?>
        <tr>
          <td><?php echo htmlentities($row['number']);?></td>
          <td><?php echo htmlentities($row['username']);?></td>
          <td><?php $cfile=$row['complaintFile'];
          if($cfile=="" || $cfile=="NULL")
          {
            echo "File NA";
          }
          else{?>
            <a href="complaintdocs/<?php echo htmlentities($row['complaintFile']);?>" target="_blank"/> View File</a>
            <?php } ?></td>
          </tr>
        <?php  } ?>
      </tbody>
    </table>
  </div>
</form>

</div>
</body>
</html>
 

Pada form di atas kami memberikan sedikit sentuhan ketika memanggil database image, jadi ketika gambar tidak ada yang masuk kedalam database maka tampilannya adalah File NA tetapi ketika database image atau doc ada didalam database maka tampilannya View File. untuk lebih detailnya lihat gambar dibawah ini.


Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, jika anda belum paham dengan tutorial dibawah ini jangan segan-segan untuk meninggalkan koment dibawah dan kami akan selalu membantu anda.