Cara Menggabungkan Website dengan Iframe

Share:

Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini kita akan membahas hal yang cukup menarik di bidang pemrograman web khususnya, yaitu iframe. Jika kalian pernah berkunjung ke sebuah situs dan ternyata situs tersebut ada video youtube misalnya, maka itu adalah bagian dari iframe. Simak ulasannya berikut ini.



Iframe

Seperti yang saya singgung di atas. Adanya iframe memungkinkan kita untuk menyematkan video ke dalam web yang kita buat. Tidak hanya video, kalian juga bisa menyematkan gambar, dokumen seperti google doc, halaman web atau file lainnya.

Website yang menggunakan iframe biasanya ditandai dengan adanya tag <iframe>, tag ini bisa kalian lihat dengan menggunakan view page source pada browser. Jika kalian menggunakan iframe, artinya source-nya tidak berasal dari server kalian. Jadi lebih ringan dari segi storage. Berikut ini tag iframe yang bisa kalian gunakan


<iframe src="alamat website" frameborder="0" width="100%" height="500px"></iframe>


Menggunakan iframe sangatlah fleksibel, karena kalian bisa meletakkannya dimanapun. Iframe juga tidak terpengaruh dengan tampilan css yang kalian buat, jadi iframe akan menampilkan komponen apa adanya, sesuai bagaimana dia ditampilkan saat diakses langsung. 


Keuntungan Menggunakan Iframe

(1). Menghemat Server Storage: Kalian tidak perlu membuat halaman khusus, dan dengan data yang disimpan di dalam database. Dengan menggunakan iframe semua resource ditanggung oleh server lain. Kalian hanya perlu embed komponennya saja.
 
(2). Tidak Perlu Membangun Rest Api: dalam kasus tertentu, kita tidak perlu membuat rest api. Karena sumber data yang akan kita ambil hanya sedikit. Contohnya embed hanya video youtube tertentu saja. Membuat rest api terlalu rumit dibandingkan hanya menempelkan komponen tertentu saja.

(3). Mudah digunakkan: Cara menggunakannya mudah sekali, kalian tidak perlu memiliki kemampuan koding. Hanya perlu menggunakan tag iframe yang diikuti dengan alamat url situs yang dituju. Dan mudah diimplementasikan di blogger, wordpress, di berbagai cms dan tentunya di website yang dibuat sendiri. 

Baca Artikel Lain ✨
📰 1. 5 Alasan Kenapa Anda Wajib Menggunakan Wordpress untuk Mengembangkan Website yang Berhasil read more
📰 2. Cara Proteksi Halaman Login Wordpress dengan Captcha read more
📰 3. Apa itu Brute Force Attack dan Berikut Tips Manjur Untuk Mencegahnya Komputer read more

Cara Menggabungkan Website dengan Iframe

Ini adalah bagian inti dari artikel yang saya buat kali ini. Dalam studi kasus kali ini kita akan membuat sebuah tampilan website sederhana, dimana komponennya akan kita buat di halaman lain dan akan di-embed ke halaman website utama. 

1. Buatlah sebuah folder baru dengan nama latihan_iframe, untuk lokasi folder silahkan kalian tentukan sendiri.
2. Buatlah sebuah file baru di dalamnya dan beri nama index.html. Silahkan copy script di bawah ini dan pastekan ke dalam file tersebut.
        

<html>     <head>         <!-- Bootstrap CSS -->         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"             integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">         <title>Hello, world!</title>     </head>     <body>         <!-- membuat container dengan margin top 4 -->         <div class="container mt-4">             <!-- membuat menu, dengan warna primary atau warna biru gelap -->             <nav class="navbar navbar-dark bg-primary">                 <div class="container-fluid">                     <a class="navbar-brand" href="#">Latihan Iframe</a>                 </div>             </nav>         </div>         <!-- komponen akan ditampilkan di bawah menu dengan lebar maksimal dan tinggi 500px -->         <iframe src="komponen.html" frameborder="0" width="100%" height="500px"></iframe>         <!-- Bootstrap js -->         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"             integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"             crossorigin="anonymous"></script>     </body> </html>

Penjelasan:

Kita membuat sebuah halaman html sederhana, dimana ada menu dan komponen di dalamnya. Silahkan cek dokumentasi bootstrap untuk melihat berbagai cara membuat menu dengan bootstrap

Selain itu perhatikan juga tag <iframe> di tengah-tengah halaman, saat dijalankan hanya muncul bagian menu saja, itu karena kita belum membuat halaman komponen.html. Jadi jika kalian jalankan maka tidak menampilkan apapun di bagian komponennya.



3. Buatlah sebuah file baru dengan nama komponen.html, lalu copy script di bawah ini dan pastekan ke dalam file tersebut.

        

<!-- masih menggunakan bootstrap css, jika tidak digunakan maka tampilannya akan berantakan --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"     integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <br> <div class="container">     <div class="row">         <div class="col-sm">             <div class="card">                 <div class="card-body">                     <h5 class="card-title">Lorem Ipsum Dolor Sit Amet</h5>                     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor                         incididunt ut labore et dolore magna aliqua.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>         </div>         <div class="col-sm">             <div class="card">                 <div class="card-body">                     <h5 class="card-title">Lorem Ipsum Dolor Sit Amet</h5>                     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor                         incididunt ut labore et dolore magna aliqua.</p>                     <a href="#" class="btn btn-primary">Go somewhere</a>                 </div>             </div>         </div>         <div class="col-sm">             <div class="card">                 <div class="card-body">                     <h5 class="card-title">Lorem Ipsum Dolor Sit Amet</h5>                     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod                         tempor incididunt ut labore et dolore magna aliqua.</p>                     <a href="#" class="btn btn-primary">Go somewhere</a>                 </div>             </div>         </div>     </div> </div>

Penjelasan:

Di halaman komponen.html di atas, kita tetap memasukkan bootstrap css, alasannya karena bootstrap css yang ada di file index.html tidak akan memberikan pengaruh ke halaman komponen.html, jika tidak menggunakan bootstrap css maka tampilannya akan berantakan.

Kemudian, di bagian setelah container, kita membuat 3 buah card. Untuk penjelasan bootstrap card bisa kalian lihat dokumentasinya secara langsung di situs resmi bootstrap.



4. Kemudian silahkan kalian jalankan project sebelumnya, klik 2 kali pada file index.html maka aplikasi browser akan terbuka dan halamannya akan tampak serperti gambar di bawah ini.

cara menggabungkan website dengan iframe
Tampilan halaman index.html



Kalian juga bisa melihat bagaimana sebenarnya halaman komponen.html ditampilkan, silahkan klik 2 kali pada file komponen.html, maka tampilannya akan tampak seperti gambar di bawah ini

cara menggabungkan website dengan iframe
Tampilan halaman komponen.html




Selain dengan contoh di atas. Kalian juga bisa menggunakan iframe dari website lain, seperti alamat blog saya misalnya. Catatan penting: tidak semua website bisa menggunakan iframe, contohnya: google.com. Saat kalian memasang iframe dengan src google.com maka akan muncul tulisan refused to connect 

Tampilan di bawah ini adalah contoh jika saya menggunakan iframe langsung ke blog saya. 

cara menggabungkan website dengan iframe
Embed website lain ke index.html



Kalian tidak bisa merubah tampilan website yang di-embed, sekalipun dengan menambahkan script css. Atribut yang bisa kalian pakai adalah atribut untuk mengatur lebar dan ketinggian dari iframe itu sendiri. 

Untuk penggunaan iframe di blogger dan wordpress juga cukup mudah sekali. Buatlah post baru lalu tempelkan script iframe dalam mode html. Atau kalian bisa meletakkannya di bagian sidebar dengan mengambahkan widget html/javascript. 

Baiklah, sekian tutorial kali ini. Silahkan tanyakan langsung di kolom komentar jika ada yang kurang dimengerti, dan mudah-mudahan saya bisa menjawab pertanyaan kalian.

No comments

Kalo baca, tolong kasih komentar dong!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik