Cara menggunakan gambar baca di html

Kali ini saya akan membahas cara membuat, membaca, mengupdate dan menghapus gambar menggunakan bahasa pemrograman PHP dan MYSQL. Masih hampir sama dengan beberapa waktu lalu tentang postingan yang saya buat tentang Cara Membuat Edit Menggunakan Modal Bootstrap. Jadi kita harus online untuk memanggil bootstrap agar tampilan tidak terlalu kaku

Table of Contents Show

Buat Buat Baca Perbarui Hapus Gambar Di PHP dan MYSQL
Bagaimana cara menampilkan gambar dalam HTML?
Mengapa gambar tidak bisa muncul di HTML?
Bagaimana cara menampilkan gambar di website?
Bagaimana cara menautkan gambar dan css dalam HTML?

Buat Buat Baca Perbarui Hapus Gambar Di PHP dan MYSQL

1. Pertama buat database dengan nama "belajar_image" (tanpa tanda petik)

2. Kemudian buat tabel dengan nama “user” dimana pada tabel tersebut terdapat 3 field yaitu id_user, username dan photo

3. Untuk type id_user pilih integer dan beri Primary Key dan Auto Increment, sedangkan untuk username dan photo beri type varchar saja dan untuk Length/Values isinya terserah anda atau sesuai kebutuhan anda

4. Buat folder dengan nama "crud_image" atau bisa disesuaikan dengan kebutuhan anda, lalu di dalam folder tersebut buat saja folder lain dengan nama "photo"

5. Kemudian kita buat koneksi ke database terlebih dahulu, buat file dan beri nama koneksinya. php dan masukkan script di bawah ini

<?php

    $server = "localhost";

    $username = "root";

    $password = "";

    $database = "belajar_image";



    mysql_connect($server,$username,$password) or die("Koneksi gagal");

    mysql_select_db($database) or die("Database tidak bisa dibuka");

?>

6. Selanjutnya kita buat index. php untuk menampilkan data (Baca) yang akan kita buat nantinya, sekaligus untuk menampilkan tombol tambah data (masukkan script dibawah ini)

<?php

    include 'koneksi.php';

?>

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="">

        <meta name="author" content="">

        <title>Index</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <body>

        <div class="container">

            <div class="row"> 

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <a href="formdata.php" class="btn btn-primary btn-sm"><span class="fa fa-plus"></span> Tambah Data</a>

                    </div>

                    <!-- /.panel-heading -->

                    <div class="panel-body">

                        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">

                            <thead>

                                <tr>

                                    <th>No</th>

                                    <th>Username</th>

                                    <th>Foto</th>

                                    <th>Aksi</th>

                                </tr>

                            </thead>

                            <tbody>

                                <?php 

                                    $no=1;

                                    $sql = mysql_query("select * from user order by id_user desc");

                                    while($data=mysql_fetch_array($sql)){

                                        

                                ?>

                                <tr>

                                    <td><?php echo $no ?></td>

                                    <td><?php echo $data['username'] ?></td>

                                    <td><img src="foto/<?php echo $data['foto'] ?>" width="150px" height="120px" /></td>

                                    <td>

                                        <a href="formedit.php?id_user=<?php echo $data['id_user']; ?>" class="btn btn-warning" Title="Edit"><span class="glyphicon glyphicon-edit"></a>

                                        <a onclick="if(confirm('Apakah anda yakin ingin menghapus data ini ??')){ location.href='deletedata.php?id_user=<?php echo $data['id_user']; ?>' }" class="btn btn-danger" Title="Delete"><span class="glyphicon glyphicon-remove"></a>

                                    </td>

                                </tr>

                                    <?php

                                    $no++;

                                    }

                                    ?>

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

</html>

_
7. Sekarang buat file lain dengan nama formdata. php, fungsinya untuk menginputkan data yang akan kita tampilkan, masukan saja script dibawah ini

<?php

    include 'koneksi.php';

?>

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="">

        <meta name="author" content="">

        <title>Form Data</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <body>

        <div class="container">

            <div class="row"> 

                <div class="panel panel-primary">

                    <div class="panel-heading">

                        <span class="fa fa-user"> Tambah User</span>

                    </div>

                    <!-- /.panel-heading -->

                    <div class="panel-body">

                        <form action="tambahdata.php" method="post" enctype="multipart/form-data">

                            <div class="form-group">

                                <label>Username</label>

                                <input name="username" type="text" class="form-control" placeholder="Username .." required>

                            </div>

                            <div class="form-group">

                                <label>Foto</label>

                                <input name="gambar" id="gambar" type="file" class="form-control" required>

                            </div>

                            <input type="submit" class="btn btn-primary" value="Simpan">

                            <a href="index.php" class="btn btn-warning"> Kembali</a>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

</html>

8. Sekarang kita buat file proses input dengan nama adddata. php dan masukkan script di bawah ini

<?php 

include "koneksi.php";



$username = $_POST['username'];

$sumber = $_FILES['gambar']['tmp_name'];

    $target = 'foto/';

    $nama_gambar = $_FILES['gambar']['name'];



$pindah = move_uploaded_file($sumber, $target.$nama_gambar);

if($pindah){

$query = "insert into user values('','$username','$nama_gambar')";

$hasil = mysql_query($query);

}

if($hasil)

{

header("location:index.php");

}

else{

    echo "Penyimpanan gagal";

} 

?>

9. Sampai di sini Anda telah membuat dan membaca, kemudian kami akan mengeditnya. Buat file lain dan beri nama formit. php kemudian masukkan script dibawah ini

<?php

    include 'koneksi.php';

?>

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="">

        <meta name="author" content="">

        <title>Form Edit</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <body>

        <div class="container">

            <div class="row"> 

                <?php

                    $id_user=mysql_real_escape_string($_GET['id_user']);

                    $det=mysql_query("select * from user where id_user='$id_user'")or die(mysql_error());

                    while($d=mysql_fetch_array($det)){

                    ?>

                <div class="panel panel-primary">

                    <div class="panel-heading">

                        <span class="fa fa-user"> Edit User</span>

                    </div>

                    <!-- /.panel-heading -->

                    <div class="panel-body">

                        <form action="updatedata.php" method="post" enctype="multipart/form-data">

                            <input name="id_user" type="hidden" class="form-control" value="<?php echo $d['id_user'] ?>" required>

                            <div class="form-group">

                                <label>Username</label>

                                <input name="username" type="text" class="form-control" value="<?php echo $d['username'] ?>" required>

                            </div>

                            <div class="form-group">

                                <label>Foto</label><br>

                                <img src="foto/<?php echo $d['foto'] ?>" width="150px" height="120px" /></br>

                                <input type="checkbox" name="ubah_foto" value="true"> Ceklis jika ingin mengubah foto<br>

                                <input name="gambar" id="gambar" type="file" class="form-control">

                            </div>

                            <input type="submit" class="btn btn-primary" value="Simpan">

                            <a href="index.php" class="btn btn-warning"> Kembali</a>

                        </form>

                        <?php 

                            }

                            ?>

                    </div>

                </div>

            </div>

        </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

</html>

_
10. Sekarang kita sedang melakukan proses update editan, sebenarnya cukup rumit untuk mengeditnya tapi saya yakin anda bisa memahaminya. Ok buat file dan beri nama updatedata. php dan masukkan script di bawah ini

<?php

include "koneksi.php";



$id_user=$_POST['id_user'];

$username=$_POST['username'];



// Cek apakah user ingin mengubah fotonya atau tidak

if(isset($_POST['ubah_foto'])){ // Jika user menceklis checkbox yang ada di form ubah, lakukan :

    // Ambil data foto yang dipilih dari form

    $sumber = $_FILES['gambar']['name'];

    $nama_gambar = $_FILES['gambar']['tmp_name'];

    

    // Rename nama fotonya dengan menambahkan tanggal dan jam upload

    $fotobaru = date('dmYHis').$sumber;

    

    // Set path folder tempat menyimpan fotonya

    $path = "foto/".$fotobaru;



    if(move_uploaded_file($nama_gambar, $path)){ // Cek apakah gambar berhasil diupload atau tidak

        // Query untuk menampilkan data user berdasarkan id_user yang dikirim

        $query = "SELECT * FROM user WHERE id_user='".$id_user."'";

        $sql = mysql_query($query); // Eksekusi/Jalankan query dari variabel $query

        $data = mysql_fetch_array($sql); // Ambil data dari hasil eksekusi $sql



        // Cek apakah file gambar sebelumnya ada di folder foto

        if(is_file("foto/".$data['foto'])) // Jika gambar ada

            unlink("foto/".$data['foto']); // Hapus file gambar sebelumnya yang ada di folder images

        

        // Proses ubah data ke Database

        $query = "update user set username='$username', foto='$fotobaru' where id_user='$id_user' ";

        $sql = mysql_query($query); // Eksekusi/ Jalankan query dari variabel $query



        if($sql){ // Cek jika proses simpan ke database sukses atau tidak

            // Jika Sukses, Lakukan :

            header("location: index.php"); // Redirect ke halaman index.php

        }else{

            // Jika Gagal, Lakukan :

            echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";

            echo "<br><a href='index.php'>Kembali Ke Form</a>";

        }

    }else{

        // Jika gambar gagal diupload, Lakukan :

        echo   "<script> alert('Maaf, Gambar gagal untuk diupload'); 

                location = 'index.php'; 

                </script>";

    }

}else{ // Jika user tidak menceklis checkbox yang ada di form ubah, lakukan :

    // Proses ubah data ke Database

    $query = "update user set username='$username' where id_user='$id_user' ";

    $sql = mysql_query($query); // Eksekusi/ Jalankan query dari variabel $query



    if($sql){ // Cek jika proses simpan ke database sukses atau tidak

        // Jika Sukses, Lakukan :

        header("location: index.php"); // Redirect ke halaman index.php

    }else{

        // Jika Gagal, Lakukan :

        echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";

        echo "<br><a href='index.php'>Kembali Ke Form</a>";

    }

}



?>

11. Terakhir adalah proses menghapus data. Buat file dengan nama data terhapus. php dan masukkan script di bawah ini

<?php

include "koneksi.php";



$id_user=$_GET['id_user'];

$query = "Delete From user Where id_user='$id_user'";



$hasil = mysql_query($query);

    

    if($hasil){

        header("location:index.php");

    }

    else{

        echo "Hapus Data Gagal";

    }



?>

_12. Silahkan buka program diatas dengan url http. //localhost/crud_image

Oke, sejauh ini Anda sudah berhasil membuat, membaca, memperbarui, dan menghapus gambar menggunakan PHP dan MYSQL. Cara diatas saya menggunakan Xampp versi 5, jadi fungsi crud image diatas hanya berjalan di xampp versi 5, jangan coba di jalankan di xampp versi 7

Buat kalian yang gak mau ribet bisa download di bawah ini lengkap dengan file SQLnya

Unduh Klik di sini

Membagikan

Bagaimana cara menampilkan gambar dalam HTML?

Gambar dapat ditempatkan dalam HTML dengan menggunakan tag . Tag ini memiliki atribut wajib yaitu src. Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan. Alamat URL gambar di atribut src dapat berupa URL atau alamat jalur. Kemudian tag

Mengapa gambar tidak bisa muncul di HTML?

Salah satu penyebab gambar tidak muncul di web adalah nama folder gambar error pada kode HTML . Kesalahan tersebut membuat server tidak dapat menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah diperbaiki, akses halaman situs web tempat gambar tidak muncul.

Bagaimana cara menampilkan gambar di website?

Untuk menampilkan gambar dengan HTML, Anda dapat menggunakan tag lalu sisipkan atribut “src=” pada tag . Atribut src berguna untuk melakukan link dengan file gambar, jadi atribut src ini digunakan untuk memanggil lokasi dan nama file gambar.