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.
|
| 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
|
| 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.
|
| 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
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi