Javascript Native Pemrograman PHP Web

Cara Mengupload Gambar dengan Ajax dan Menyimpan ke Database PHP

March 4, 2019
dewan
11 Comments

Cara Mengupload Gambar/Foto dengan Ajax dan menyimpan ke Database MySQL/MariaDB menggunakan PHP – Hai ketemu lagi dengan saya dewan komputer dan pada kali ini saya akan memposting tentang cara menyimpan foto/gambar ke dalam database dan tentunya saya menggunakan Ajax. Setelah sebelumnya saya mencontohkan cara upload file menggunakan ajax dan tanpa loading, pada contoh kali ini yang beda hanya kita menyimpannya pada database juga. Namun sebenarnya yang tersimpan di database hanya nama filenya saja atau path. Untuk gambar/foto tentunya tersimpan di local storage atau pada server. Kalau gambar disimpan di database bisa sobat bayangkan database sampe bergiga-giga dan jika ingin pindah server pasti tidak akan bisa maka sangat tidak mungkin jika gambar/foto/file disimpan pada databasenya melainkan hanya nama filenya saja sehingga kita bisa mengaturnya pada local storagenya nanti. Caranya mudah tinggal sobat ikuti saja cara dibawah :

Baca Juga :

Membuat CRUD Expert, Upload Data & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 1 MENAMPILKAN DATA

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetes nantinya apakah benar-benar terkoneksi atau belum dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_fileupload`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_customer` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL,
  `avatar` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;

 

Membuat Form Input dan Upload

Sebelum lanjut tentunya kita harus membuat file upload terlebih dahulu dan saya juga sekalian mencontohkan dengan form input lainnya seperti teks. Sobat bisa mengunjungi juga postingan saya sebelumnya tentang CRUD dibawah karena sebenarnya ini kita menambahkan file upload yang sebelumnya tidak ada file uploadnya :

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP

1.Pertama tentunya untuk mempercantik tampilan saya menggunakan bootstrap dan kita juga membutuhkan jquery.js. Tambahkan kode berikut pada tag <head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Karena untuk keperluan demo jadi saya mencontohkan menggunakan librari online, namun jika sobat ingin menggunakan untuk keperluan development tentunya sobat harus mendownloadnya terlebih dahulu atau sobat bisa mendownloadnya bersama dengan project ini diakhir postingan.

 

2. Buat file index.php dan masukkan kode dibawah ini untuk membuat formnya :

<form id="form-data">
	<div class="form-group">
		<input type="button" name="view" id="view" value="View Data" onClick="location='view.php'" class="btn btn-info mt-3" />
	</div>

	<div class="form-group">
		<label>Nama Customer</label>
		<input type="text" name="nama_customer" id="nama_customer" class="form-control" />
	</div>
	<div class="form-group">
		<label>Alamat</label>
		<textarea class="form-control" id="alamat" name="alamat"></textarea>
	</div>
	<div class="form-group">
		<label>File Upload</label>
		<input type="file" name="fileupload" id="fileupload" class="form-control" />
	</div>
	<div class="form-group">
		<input type="button" name="simpan" id="simpan" value="Simpan" class="btn btn-info mt-3" />
	</div>
</form>

 

3. Masih di file index.php pada tag<body> paling bawah kita tambahkan kode javascript dan ajax seperti dibawah ini

<script>
	$(document).ready( function () {
		$("#simpan").click(function(){
		const fileupload = $('#fileupload').prop('files')[0];

	        let formData = new FormData();
	        formData.append('fileupload', fileupload);
	        formData.append('nama_customer', $('#nama_customer').val());
	        formData.append('alamat', $('#alamat').val());

	        $.ajax({
	            type: 'POST',
	            url: "upload.php",
	            data: formData,
	            cache: false,
	            processData: false,
	            contentType: false,
	            success: function (msg) {
	                alert(msg);
	                document.getElementById("form-data").reset();
	            },
	            error: function () {
	                alert("Data Gagal Diupload");
	            }
	        });
        });
    });
</script>

 

4. Buat file koneksi.php untuk mengkoneksikan dengan database dan isikan dengan kode berikut

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

 

3. Buat file upload.php untuk menyimpan foto/gambar ke local storage dan ke database dan isikan dengan kode dibawah

<?php
  include 'koneksi.php';

  $temp = "upload/";
  if (!file_exists($temp))
    mkdir($temp);

  $nama_customer   = $_POST['nama_customer'];
  $alamat          = $_POST['alamat'];
  $fileupload      = $_FILES['fileupload']['tmp_name'];
  $ImageName       = $_FILES['fileupload']['name'];
  $ImageType       = $_FILES['fileupload']['type'];

  if (!empty($fileupload)){
    $acak           = rand(11111111, 99999999);
    $ImageExt       = substr($ImageName, strrpos($ImageName, '.'));
    $ImageExt       = str_replace('.','',$ImageExt); // Extension
    $ImageName      = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);
    $NewImageName   = str_replace(' ', '', $acak.'.'.$ImageExt);

    move_uploaded_file($_FILES["fileupload"]["tmp_name"], $temp.$NewImageName); // Menyimpan file

    $query = "INSERT into tbl_fileupload (nama_customer, alamat, avatar) VALUES (?, ?, ?)";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param("sss", $nama_customer, $alamat, $NewImageName);
    $dewan1->execute();

    echo "Data Berhasil Disimpan";
  } else {
    echo "Data Gagal Disimpan";
  }
?>

 

4. Buat file view.php untuk menampilkan data dan foto dari database ke dalam tabel, dan isikan dengan kode dibawah

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" href="dk.png">
	<title>View - Dewan Upload</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
	<nav class="navbar navbar-dark bg-secondary">
	  <a class="navbar-brand" href="index.php" style="color: #fff;">
	    Dewan Komputer
	  </a>
	</nav>

	<div class="container mb-3">
		<h3 align="center" class="mb-3 mt-3">Semua Data</h3>
		<div class="row">
			<div class="col-sm-6 offset-sm-3">
				<table class="table table-bordered">
					<tr>
						<td>No</td>
						<td>Nma Customer</td>
						<td>Alamat</td>
						<td>Avatar</td>
					</tr>
					<?php
						include 'koneksi.php';
						$no=1;
						$query = "SELECT * FROM tbl_fileupload ORDER BY id DESC";
						$dewan1 = $db1->prepare($query);
						$dewan1->execute();
						$res1 = $dewan1->get_result();
						while ($row = $res1->fetch_assoc()) {
					?>
						<tr>
							<td><?php echo $no++; ?></td>
							<td><?php echo $row['nama_customer']; ?></td>
							<td><?php echo $row['alamat']; ?></td>
							<td><img src="upload/<?php echo $row['avatar']; ?>" width="100px" height="60px"></td>
						</tr>
					<?php } ?>
				</table>
			</div>
		</div>
	</div>

	<div class="navbar bg-dark fixed-bottom">
		<div style="color: #fff;">© <?php echo date('Y'); ?> Copyright:
		    <a href="https://dewankomputer.com/"> Dewan Komputer</a>
		</div>
	</div>
</body>
</html>

 

5. Jika sobat jalankan maka form akan jadi seperti dibawah

Dan jika sobat klik view data dan sudah mengupload data/foto maka akan muncul seperti gambar dibawah

 

Jika sobat ingin menggabungkan postingan ini dengan CRUD tentu sobat bisa juga kunjungi postingan saya tentang CRUD yang menggunakan Ajax disitu sobat juga bisa menambahkan validasi dan Hapus Data serta edit data tentunya. Sekian postingan saya tentang Cara Mengupload Gambar dengan Ajax dan Menyimpan ke Database PHP. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan sobat tinggalakan pada kolom komentar dibawah. Kunjungi juga postingan saya yang lain yang bisa menambah ilmu sobat.

Baca juga :

Cara membuat Crop and Upload Menggunakan Ajax pada PHP

Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP

Cara Upload Gambar dari URL Menggunakan Ajax dan PHP

Cara Mengupload File dengan Ajax Tanpa Loading pada PHP

Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP

Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP

Cara Membuat Upload dan Ekstrak Zip pada PHP

Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal

 

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :


Sampai jumpa pada postingan saya selanjutnya..

11 thoughts on “Cara Mengupload Gambar dengan Ajax dan Menyimpan ke Database PHP”

  1. Pingback: CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP - Part 3 Update Data - Dewan Komputer

  3. semoga webnya makin maju dan berguna bagi bangsa dan negara hehehe, untuk tutuorial ini saya ucapkan terimakasih banyak…

    Reply

  4. mohon bantuannya, terdapat error yaitu Undefined index: fileupload, mohon bantuannya untuk perbaikan, makasih banyak, saya masih belajar

    Notice: Undefined index: fileupload in C:\xampp\htdocs\uts weblanjut\proseslatihan.php on line 9

    Notice: Undefined index: fileupload in C:\xampp\htdocs\uts weblanjut\proseslatihan.php on line 10

    Notice: Undefined index: fileupload in C:\xampp\htdocs\uts weblanjut\proseslatihan.php on line 11
    An Error Caused By An Empty Field Or Uploaded A File Not A Picture

    Reply

    1. pesannya kalo di translate
      Kesalahan Disebabkan Oleh Bidang Kosong Atau Mengunggah File Bukan Gambar
      dan
      Undefined index: fileupload
      berarti ngga ada yg nama fieldnya “fileupload” yg dikirim
      di inputnya kan namanya
      … type=”file” name=”fileupload” id=”fileupload” ….
      dan di ajax/form data
      const fileupload = $(‘#fileupload’).prop(‘files’)[0];

      let formData = new FormData();
      formData.append(‘fileupload’, fileupload);

      itu udah sama atau ada yg mas ubah atau gmn

      Reply

  5. jika memakai modal error tidak ada, tetapi ketika saya menghapus modal (documen on click..) dan mengganti button menjadi submit name send, lalu if isset post send, maka data tidak bisa di upload unidentifed error

    Reply

      1. maksudnya sih, ada form input, dengan lampiran beberapa foto sesuai field/kolomnya. misal : file 1 -> foto selfie , file 2 -> foto dengan ktp
        Form input :
        Nama, Alamat,
        Form upload :
        foto selfie, foto dengan ktp
        gimana ya modif scriptnya ?

        Reply
  7. Pingback: CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP - Part 4 Hapus Data - Dewan Komputer

Leave a Reply

Your email address will not be published. Required fields are marked *

five + ten =