Pengalaman pengguna dapat sangat ditingkatkan pada fitur unggah gambar jika kami memungkinkan pengguna untuk melihat pratinjau gambar yang telah mereka pilih sebelum benar-benar mengunggahnya ke server dengan mengeklik tombol unggah.
Dalam tutorial ini, kita akan membuat formulir yang mengambil dua input:gambar profil pengguna (gambar), dan bio (teks). Ketika pengguna mengisi formulir dan mengklik tombol unggah, kami akan menggunakan skrip PHP kami untuk mengambil nilai formulir (gambar dan bio) dan menyimpan gambar di folder proyek kami yang disebut gambar. Setelah gambar disimpan di folder proyek, kami akan menyimpan catatan di database yang berisi nama gambar dan bio pengguna.
Setelah menyimpan info ini, kami akan membuat halaman lain yang mengkueri profil pengguna dari database yang menampilkannya di halaman dengan bio masing-masing pengguna dengan gambar profil mereka.
Jadi mari kita mulai implementasinya.
Buat folder proyek dan beri nama image-preview-upload. Di dalam folder ini, buat file bernama form.php dan folder bernama gambar untuk menyimpan gambar.
form.php:
<?php include_once('processForm.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Preview and Upload PHP</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 offset-md-4 form-div">
<a href="profiles.php">View all profiles</a>
<form action="form.php" method="post" enctype="multipart/form-data">
<h2 class="text-center mb-3 mt-3">Update profile</h2>
<?php if (!empty($msg)): ?>
<div class="alert <?php echo $msg_class ?>" role="alert">
<?php echo $msg; ?>
</div>
<?php endif; ?>
<div class="form-group text-center" style="position: relative;" >
<span class="img-div">
<div class="text-center img-placeholder" onClick="triggerClick()">
<h4>Update image</h4>
</div>
<img src="images/avatar.jpg" onClick="triggerClick()" id="profileDisplay">
</span>
<input type="file" name="profileImage" onChange="displayImage(this)" id="profileImage" class="form-control" style="display: none;">
<label>Profile Image</label>
</div>
<div class="form-group">
<label>Bio</label>
<textarea name="bio" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" name="save_profile" class="btn btn-primary btn-block">Save User</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script src="scripts.js"></script>Sebelum saya mengatakan apa pun tentang formulir, pertama-tama mari buat file gaya bernama main.css untuk formulir di folder root proyek kita.
main.css:
.form-div { margin-top: 100px; border: 1px solid #e0e0e0; }
#profileDisplay { display: block; height: 210px; width: 60%; margin: 0px auto; border-radius: 50%; }
.img-placeholder {
width: 60%;
color: white;
height: 100%;
background: black;
opacity: .7;
height: 210px;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: none;
}
.img-placeholder h4 {
margin-top: 40%;
color: white;
}
.img-div:hover .img-placeholder {
display: block;
cursor: pointer;
}
Pada baris pertama file form.php kami, kami menyertakan file yang berisi skrip PHP kami yang bertanggung jawab untuk menerima nilai formulir dan memprosesnya (yaitu, menyimpan gambar di folder gambar dan membuat catatan yang sesuai di tabel pengguna dalam basis data).
Jika Anda melihat formulirnya, Anda akan melihat bahwa kami menyetel nilai tampilan properti CSS ke none; Kami melakukan ini karena kami tidak ingin menampilkan elemen input HTML default untuk unggahan file. Sebagai gantinya, kita akan membuat elemen yang berbeda dan menatanya seperti yang kita inginkan dan kemudian ketika pengguna mengklik elemen kita, kita akan menggunakan JavaScript di bawah kap untuk memicu elemen input file HTML yang tersembunyi bagi kita.
Sekarang mari tambahkan skrip yang bertanggung jawab untuk memicu elemen input file dan kemudian juga menampilkan gambar untuk pratinjau.
Buat file bernama scripts.js di root aplikasi Anda dan tambahkan kode ini ke dalamnya:
script.js:
function triggerClick(e) {
document.querySelector('#profileImage').click();
}
function displayImage(e) {
if (e.files[0]) {
var reader = new FileReader();
reader.onload = function(e){
document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
}
reader.readAsDataURL(e.files[0]);
}
}
Sekarang ketika pengguna mengklik pada area gambar bulat, fungsi triggerClick() akan memicu event klik pada elemen input file tersembunyi. Saat pengguna memilih gambar, peristiwa onChange dipicu pada bidang input file dan kita dapat menggunakan kelas FileReader() JavaScript untuk sementara menampilkan gambar untuk pratinjau.
Ketika pengguna mengklik tombol 'Simpan Pengguna', formulir input akan dikirimkan ke halaman yang sama. Jadi pada halaman form.php yang sama, kami menyertakan file processForm.php yang berisi kode untuk memproses formulir kami.
Jadi di folder root proyek buat file bernama processForm.php;
processForm.php:
<?php
$msg = "";
$msg_class = "";
$conn = mysqli_connect("localhost", "root", "", "img-upload");
if (isset($_POST['save_profile'])) {
// for the database
$bio = stripslashes($_POST['bio']);
$profileImageName = time() . '-' . $_FILES["profileImage"]["name"];
// For image upload
$target_dir = "images/";
$target_file = $target_dir . basename($profileImageName);
// VALIDATION
// validate image size. Size is calculated in Bytes
if($_FILES['profileImage']['size'] > 200000) {
$msg = "Image size should not be greated than 200Kb";
$msg_class = "alert-danger";
}
// check if file exists
if(file_exists($target_file)) {
$msg = "File already exists";
$msg_class = "alert-danger";
}
// Upload image only if no errors
if (empty($error)) {
if(move_uploaded_file($_FILES["profileImage"]["tmp_name"], $target_file)) {
$sql = "INSERT INTO users SET profile_image='$profileImageName', bio='$bio'";
if(mysqli_query($conn, $sql)){
$msg = "Image uploaded and saved in the Database";
$msg_class = "alert-success";
} else {
$msg = "There was an error in the database";
$msg_class = "alert-danger";
}
} else {
$error = "There was an erro uploading the file";
$msg = "alert-danger";
}
}
}
?>
Kode ini menerima nilai input yang dikirimkan dari formulir. Input ini terdiri dari gambar pengguna dan bio. Di server, kita dapat mengakses file gambar dan semua informasi gambar terkait seperti nama gambar, ukuran, ekstensi, dll, dalam variabel super global $_FILE[] sedangkan informasi lain seperti teks ditemukan di $_POST[] variabel superglobal.
Dengan menggunakan informasi dalam variabel super global $_FILE[], kami dapat memvalidasi gambar. Misalnya, kode sumber kami hanya dapat menerima gambar yang ukurannya kurang dari 200kb. Tentu saja, Anda selalu dapat mengubah nilai ini jika mau.
Anda perhatikan dalam kode di atas bahwa kami terhubung ke database yang disebut img-upload. Buat database ini dan buat tabel yang disebut pengguna dengan bidang berikut:
tabel pengguna:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Sekarang buka formulir di browser Anda dan masukkan beberapa info. Jika semuanya berjalan dengan baik, gambar Anda akan diunggah ke folder gambar di proyek Anda dan catatan terkait disimpan dalam database.
Menampilkan Gambar dari Basis Data
Setelah gambar kita ada di database, menampilkannya sangat mudah. Buat file di folder root dan beri nama profiles.php.
profiles.php:
<?php
$conn = mysqli_connect("localhost", "root", "", "img-upload");
$results = mysqli_query($conn, "SELECT * FROM users");
$users = mysqli_fetch_all($results, MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Preview and Upload</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 offset-md-4" style="margin-top: 30px;">
<a href="form.php" class="btn btn-success">New profile</a>
<br>
<br>
<table class="table table-bordered">
<thead>
<th>Image</th>
<th>Bio</th>
</thead>
<tbody>
<?php foreach ($users as $user): ?>
<tr>
<td> <img src="<?php echo 'images/' . $user['profile_image'] ?>" width="90" height="90" alt=""> </td>
<td> <?php echo $user['bio']; ?> </td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Sederhana! File ini terhubung ke database, menanyakan semua info profil dari tabel pengguna dan mencantumkan profil pengguna dalam format tabel yang menampilkan gambar profil setiap pengguna terhadap bio mereka. Gambar ditampilkan hanya dengan menggunakan nama gambar dari database dan menunjuk ke folder gambar tempat gambar berada.
Kesimpulan
Saya harap Anda menikmati tutorial singkat ini. Jika Anda memiliki pertanyaan, tulis di komentar di bawah.
Jangan lupa dukung dengan cara berbagi.
Selamat bersenang-senang.
