Cara Membuat Penjelajah File Gambar Kustom di PHP

oleh Vincy. Terakhir diubah pada 3 Juni 2019.

Penjelajah file, yang dirancang khusus untuk menampilkan file gambar akan menjadi tambahan yang keren untuk aplikasi web PHP Anda saat Anda menangani gambar.

Bayangkan penjelajah file gambar yang dibangun di PHP dengan opsi untuk menelusuri file dalam ikon, daftar, dan tampilan terperinci. Itulah yang akan kita lihat dan bangun dalam artikel ini.

Memiliki fitur untuk menjelajahi file gambar dengan mode tampilan yang berbeda akan memperkaya aplikasi web Anda. Galeri gambar adalah pilihan yang populer tetapi jika dilengkapi dengan tampilan lain, itu akan menjadi kemenangan yang pasti bagi pengguna.

Sesuaikan Tampilan

Lihat Demo

Membuat penjelajah file gambar dengan PHP sederhana dan berguna untuk aplikasi web yang berpusat pada gambar. Ada banyak aplikasi web yang mengimplementasikan penjelajahan file gambar ini dengan fitur-fitur canggih.

Dalam contoh ini, saya telah membuat contoh sederhana untuk menjelajahi hanya file dari folder target tertentu. Kami dapat meningkatkan kode ini dengan mendukung untuk menjelajahi direktori gambar termasuk sub direktori daripada hanya melihat file.

Apa isinya?

  1. Keuntungan Membuat Penjelajah Kustom untuk gambar
  2. Pustaka PHP / jQuery yang ada untuk mengintegrasikan penjelajah gambar
  3. Tentang Contoh Penjelajah Gambar Kustom
  4. Penerapan Kode untuk Contoh Image File Explorer
  5. Ambil hasil tampilan file explorer gambar dari database
  6. Buat antarmuka HTML untuk penjelajah file gambar
  7. Struktur File
  8. Skrip Basis Data
  9. Output Penjelajah Gambar Kustom

Keuntungan Membuat Penjelajah Kustom untuk gambar

Penjelajah file gambar kustom memiliki banyak keunggulan seperti yang tercantum di bawah ini.

  • Ini memiliki opsi untuk menjelajahi file gambar dalam tampilan berbeda seperti daftar, detail, galeri, tayangan slide, dan lainnya.
  • Ini dapat disesuaikan untuk menampilkan gambar dinamis dari database atau sumber direktori.
  • Ini akan memiliki pengaturan untuk mengkonfigurasi tampilan default dan juga memiliki kontrol untuk beralih ke tampilan lain.
  • Ini membantu untuk menampilkan galeri foto dengan tampilan galerinya.
  • Fitur slideshow dari image file explorer akan membantu dalam memberikan presentasi bergambar.

Pustaka PHP / jQuery yang ada untuk mengintegrasikan penjelajah gambar

Sebagian besar plugin penjelajah file gambar yang ada mendukung tampilan galeri atau tontonan. Misalnya, explr-js, file-explore.js, dan lainnya.

Plugin ini digunakan untuk menjelajahi file dalam tampilan hierarki. Dengan menggunakan plugin ini, struktur file yang ditampilkan dengan

    bersarang akan diubah menjadi pohon seperti format hierarki.

    Dalam contoh PHP ini, penjelajah file gambar tidak memiliki plugin yang digunakan untuk menjelajahi file dalam daftar atau galeri. Tayangan slide ditampilkan dengan menggunakan skrip lightbox jQuery.

    Tentang Contoh Custom Image File Explorer

    Dalam contoh PHP ini, saya telah membuat antarmuka untuk menampilkan penjelajah file gambar untuk menelusuri gambar. Gambar dapat dieksplorasi dalam tiga jenis tampilan tampilan Galeri, tampilan Daftar dan Slideshow.

    Data gambar bersifat dinamis yang secara fisik terletak di folder dan jalurnya disimpan dalam database.

    Tampilan galeri digunakan untuk memproyeksikan file gambar dalam bentuk galeri foto. Pada tutorial sebelumnya, kita telah melihat cara menampilkan galeri gambar dan cara menyusun ulang gambar dalam format galeri.

    Tampilan daftar akan menampilkan nama file gambar dari database dengan poin-poin ikonik. Tampilan slide adalah tampilan muka yang memungkinkan untuk melihat gambar yang diperbesar dalam popup dengan mengklik slide gambar.

    Penjelajah file gambar ini dengan tiga tombol di header untuk mengubah tampilan di antara daftar, galeri, dan tayangan slide. Dengan mengklik tombol-tombol ini, nama tampilan yang dipilih diterima dan digunakan untuk mengubah tampilan yang sesuai.

    Implementasi Kode untuk Contoh File Explorer Gambar

    Kode contoh ini dapat dilihat sebagai tiga komponen utama. Yaitu untuk mengambil data gambar dari database, membuat antarmuka penjelajah file gambar dengan HTML dan CSS dan untuk merender hasil dinamis.

    Hasil gambar yang diambil dari database secara fisik terletak di sub folder dari contoh aplikasi. Dengan referensi jalur file, file gambar ditampilkan dalam tampilan HTML.

    Di bagian berikut, kita dapat melihat bagaimana setiap tampilan dirancang dan kontrol navigasi ditambahkan untuk menjelajahi file. Dengan mengklik kontrol navigasi, tampilan yang dipilih diposting ke PHP untuk mengganti tampilan penjelajah file gambar dengan tepat.

    Ambil hasil tampilan file explorer gambar dari database

    Dalam antarmuka penjelajah gambar, data gambar bersifat dinamis yang diambil dari database. Jalur gambar disimpan di tbl_image tabel database.

    Kode di bawah ini menyertakan skrip PHP ke dalam file image explorer HTML. Dalam skrip ini, kueri MySQL dibuat dan dijalankan untuk mengambil data gambar dari database.

    Hasil database disimpan ke dalam variabel array yang akan diiterasi untuk menampilkan gambar dalam format yang dipilih.

    <?php include 'DBController.php';
    $db_handle = new DBController();
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <!-- Main CSS -->
    <link rel="stylesheet" href="https://phppot.com/php/how-to-create-custom-image-file-explorer-in-php/main.css">
    </head>
    <body>
        <div id="gridview">
            <div class="heading">Image File Explorer</div>
            <div class="btn">
                <form name="subimg" id="subimg" method="post" action="" enctype="multipart/form-data">
                    <button class="gallery-icon" id="gallery-icon" name="gallery-icon" >Gallery view</button>
                    <button class="list-icon" id="list-icon" name="list-icon">List view</button> 
                    <input type="button" class="slideshow-icon" id="slideshow-icon" name="slideshow-icon" value="Slideshow"> 
                </form> 
            </div>
            
    <?php
    $query = $db_handle->runQuery("SELECT * FROM tbl_image ORDER BY id ASC");
    if (! empty($query)) {
        foreach ($query as $key => $value) { 
        // Image file explorer view HTML
        }
    }
    ?> 
           </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <!-- Main JS -->
    <script src="main.js"></script>
    </body>
    </html>
    

    Buat antarmuka HTML untuk penjelajah file gambar

    Bagian ini mencakup tujuan utama dari contoh ini yaitu untuk membuat beberapa file gambar yang menjelajahi tampilan dengan opsi untuk beralih. Di sub bagian berikut, Kode HTML untuk tampilan (daftar, galeri, tayangan slide) ditampilkan.

    Kode HTML untuk menampilkan tampilan daftar

    Ini untuk menunjukkan tampilan daftar penjelajah file gambar. Ini menunjukkan daftar nama gambar dengan poin-poin gambar ikonik.

    <?php 
    if(isset($_POST['list-icon'])) { 
    ?>  
         <div class="image1">
              <img src="https://phppot.com/php/how-to-create-custom-image-file-explorer-in-php/<?php echo $query[$key]["image_path"] ; ?>" />
              <?php echo $query[$key]["name"] ; ?>
         </div>
    <?php   
    } 
    ?>
    

    Galeri gambar dinamis dari database

    Tampilan galeri adalah tampilan default dalam contoh ini. Di galeri ini, setiap ubin akan ditampilkan dengan mengulangi hasil kueri basis data.

    Iterasi loop yang sama digunakan untuk tampilan daftar dan galeri. Pada setiap iterasi, opsi tampilan yang dipilih dicentang untuk membuat ubin yang sesuai di jendela penjelajah gambar.

    Dalam contoh ini, ubin galeri hanya menampilkan gambar. Dalam tutorial sebelumnya, kami telah menunjukkan galeri produk keranjang belanja di mana lebih banyak detail diletakkan di setiap ubin galeri.

    <?php
    if (! empty($query)) {
        foreach ($query as $key => $value) {
    ?>
        <div class="image">
            <img src="https://phppot.com/php/how-to-create-custom-image-file-explorer-in-php/<?php echo $query[$key]["image_path"] ; ?>" />
        </div>
    <?php       
        }
    }
    ?>
    

    Menjalankan tayangan slide Gambar jQuery

    Wadah slideshow ini digunakan untuk menampilkan slide gambar dengan navigasi kiri kanan. Itu galeriModal container adalah kotak dialog target untuk menampilkan tayangan slide gambar dengan opsi tutup.

    Dalam kode ini, file main.js file berisi skrip perpustakaan kotak cahaya jQuery. Metode pustaka ini digunakan untuk menginisialisasi tayangan slide dari antarmuka penjelajah file gambar.

    Dengan mengklik Tampilan slide tombol pada header menu tindakan contoh ini, tayangan slide akan dimulai. Ikon tutup di sudut kanan atas jendela tampilan slide digunakan untuk menghentikan tampilan slide dan kembali ke tampilan daftar atau galeri.

    Ikon berikutnya sebelumnya di kedua sisi slide gambar digunakan untuk memindahkan slideshow ke depan dan ke belakang. Dalam contoh ini, acara buka / tutup slideshow ditangani dengan efek fade in fade out yang mulus dengan jQuery.

    <div class="galleryShadow"></div>
            <div class="galleryModal">
              <i class="galleryIcon gIquit close"></i>
              <i class="galleryIcon gIleft nav-left"></i>
              <i class="galleryIcon gIright nav-right"></i>
              <div class="galleryContainer">
                  <img src="">
              </div> 
            </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <!-- Main JS -->
    <script src="main.js"></script>
    

    Stylesheet untuk antarmuka penjelajah file gambar

    Ini adalah gaya yang ditambahkan dengan main.css. Gaya ini digunakan untuk slideshow dan UI penjelajah file gambar lainnya.

    .galleryShadow {
        display: none;
        -webkit-transition: ease all .5s;
        transition: ease all .5s;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.9);
    }
    
    .galleryModal {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition: ease all .5s;
        transition: ease all .5s;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }
    
    .galleryModal .galleryContainer {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 80%;
        height: 80%;
    }
    
    .galleryModal .galleryContainer img {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
        border: 10px solid #fff;
        border-radius: 10px;
    }
    
    .galleryModal .galleryContainer .galleryText {
        position: absolute;
        width: 100%;
        height: auto;
        top: 100%;
        color: #fff;
        text-align: center;
        font-size: 1.5em;
    }
    
    .galleryModal .galleryIcon {
        position: absolute;
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
        text-align: center;
        color: #fff;
    }
    
    .galleryModal .gIquit {
        right: 10px;
        top: 10px;
    }
    
    .galleryModal .gIleft {
        top: 50%;
        left: 10px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .galleryModal .gIright {
        top: 50%;
        right: 10px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .close {
        background: url("./icons/icon-close.png") no-repeat;
        cursor: pointer;
    }
    
    .nav-left {
        background: url("./icons/icon-left.png") no-repeat;
        cursor: pointer;
    }
    
    .nav-right {
        background: url("./icons/icon-right.png") no-repeat;
        cursor: pointer;
    }
    
    .list-icon, .gallery-icon, .slideshow-icon {
        padding: 10px 40px;
        background: #586e75;
        border: #485c61 1px solid;
        color: #FFF;
        border-radius: 2px;
        cursor: pointer;
    }
    
    div.image {
        margin: 10px;
        display: inline-block;
        position: relative;
    }
    
    div.image img {
        width: 100%;
        max-width: 300px;
        height: auto;
        border: 1px solid #ccc;
    }
    
    .heading {
        padding: 10px 10px;
        margin-bottom: 10px;
        font-size: 1.2em;
    }
    
    div.image1 img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin: 8px 15px;
        padding: 2px;
    }
    
    div.image1 {
        border-bottom: #F0F0F0 1px solid;
    }
    
    .image-container {
        margin: 25px 0px;
        background: #f5f5f5;
    }
    
    body {
        font-family: Arial;
        color: #212121;
        font-size: 0.95em;
    }

    Struktur File

    Struktur file contoh explorer gambar kustom ditunjukkan di bawah ini. Dalam struktur ini, gambar yang disimpan dalam database secara fisik terletak di file galeri map. Itu ikon folder berisi navigasi slideshow dan ikon tutup.

    Itu index.php adalah halaman arahan yang menyertakan kode HTML untuk menampilkan berbagai tampilan saat menjelajahi file gambar. DBController.php menangani fungsionalitas terkait database untuk mengambil gambar dinamis dari database.

    File main.js dan main.css berisi skrip slideshow dan lightbox. Juga, ini termasuk gaya tambahan untuk membuat galeri gambar dan tampilan daftar di browser.

    Struktur File Explorer File Gambar Kustom

    Script Database

    Ini adalah skrip database yang berisi pernyataan buat tabel tbl_image. Dengan mengimpor tabel database ini, Anda dapat menjalankan contoh ini dan membuatnya berfungsi di lingkungan Anda untuk menggunakan contoh penjelajah gambar kustom.

    CREATE TABLE IF NOT EXISTS `tbl_image` (
      `id` int(2) NOT NULL AUTO_INCREMENT,
      `name` varchar(30) COLLATE latin1_bin NOT NULL,
      `image_path` text COLLATE latin1_bin NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1 COLLATE=latin1_bin;
    
    INSERT INTO `tbl_image` (`id`, `name`, `image_path`) VALUES
    (1, 'handbag.jpeg', 'gallery/handbag.jpeg'),
    (2, 'watch.jpeg', 'gallery/watch.jpeg'),
    (3, 'Trendy Watch', 'gallery/trendy-watch.jpeg'),
    (4, 'Travel Bag', 'gallery/travel-bag.jpeg'),
    (5, 'ducklings.jpeg', 'gallery/ducklings.jpeg'),
    (6, 'wooden-dolls.jpeg', 'gallery/wooden-dolls.jpeg'),
    (7, 'camera.jpeg', 'gallery/camera.jpeg'),
    (8, 'perls.jpeg', 'gallery/perls.jpeg');
    COMMIT;
    

    Keluaran Penjelajah Gambar Kustom

    Tangkapan layar berikut menunjukkan gambar dalam berbagai tampilan. Ketiga jenis tampilan yang berbeda ini dapat dilihat dengan memilih tampilan dari bilah menu header yang ditunjukkan pada tangkapan layar.

    Tampilan galeri

    Tampilan Galeri Penjelajah File Gambar

    Tampilan daftar

    Tampilan Daftar File Explorer Gambar Image

    Tampilan slide

    Tampilan slide gambar dipicu dengan mengklik Tampilan slide tombol pada menu header. Konten slide berturut-turut pada tayangan slide diambil dari markup daftar gambar yang ditambahkan di halaman arahan.

    Pemilih kelas pada rekaman gambar atau ubin digunakan sebagai referensi untuk mengambil data yang akan ditampilkan pada setiap slide.

    Tampilan Slide Penjelajah File Gambar

    Kesimpulan

    File explorer gambar dapat dirancang dengan berbagai cara berdasarkan kebutuhan aplikasi. Secara khusus, tampilan akan bervariasi di antara tampilan hierarki seperti pohon, representasi ikonik (kecil, sedang, besar), tampilan galeri, dan lainnya.

    Kode contoh ini eksklusif untuk menjelajahi hanya file gambar dari database. Terkadang target sumber daya file gambar telah menjadi direktori, bukan database.

    Kode ini akan membantu mengimplementasikan penjelajah file gambar dengan tiga tampilan berbeda. Navigasi tombol memudahkan peralihan tampilan gambar dari satu sama lain.

    Unduh

    ↑ Kembali ke Atas

[ad_2]
Source link