1. LAPORAN PENGABDIAN KEPADA MASYARAKAT
2. METERI/MODUL
3. SURAT KETERANGAN DARI INSTANSI 4. SERTIFIKAT
BUKTI BIDANG C :
Semester Genap 2021/2022
1. LAPORAN PENGABDIAN KEPADA
MASYARAKAT
i
LAPORAN
PENGABDIAN MASYARAKAT
PELATIHAN PEMBUATAN SISTEM INFORMASI BERBASIS WEBSITE PADA REMAJA ISLAM MASJID AT-TAUBAH
JAKARTA MENUJU SDM UNGGUL
Oleh:
AHMAD AL KAAFI (201303138) LELIYANAH, M. KOM (202010210)
SUPARNI, M.KOM (200703072)
MOCHAMMAD ABDUL AZIS, M.KOM (201903054) TITIN AGUSTINA (17210311)
VALENTANIA SALSABILA (17210506) NAZWA TIARA RIZKY (17210652)
TEKNOLOGI INFORMASI
FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS BINA SARANA INFORMATIKA
AGUSTUS 2022
ii
HALAMAN PENGESAHAN
1. Judul :
2. Mitra :
3. Ketua Pelaksana
a. Nama lengkap :
b. NIP : 201303138 c. Jabatan Fungsional : Lektor
d. Program Studi : Teknik Informasi e. Email : [email protected] 4. Jumlah Anggota : 4
a. Nama Anggota 1 : b. Nama Anggota 2 : c. Nama Anggota 4 : d. Nama Anggota 5 : e. Nama Anggota 6 : 5. Lokasi Kegiatan/Mitra
a. Wilayah Mitra (Desa/Kecamatan) : Mampang Prapatan b. Kabupaten/Kota : Jakarta Selatan
c. Provinsi : DKI Jakarta
6. Biaya yang diusulkan : Rp 3.017.500,-
Jakarta, 2 Maret 2021
Mengetahui,
Rektor Universitas Bina Sarana Informatika Ketua Pelaksana,
(Dr. Mochamad Wahyudi M.Kom, M.M, M.Pd) (Ahmad Al Kaafi, M.Kom)
Menyetujui,
Ketua LPPM Universitas Bina Sarana Informatika
(Taufik Baidawi, M.Kom)
iii
DAFTAR ISI
HALAMAN SAMPUL ... i
HALAMAN PENGESAHAN ... ii
DAFTAR ISI ... i
RINGKASAN ... iv
I. PENDAHULUAN ... 1
II. METODE PELAKSANAAN ... 4
III. LUARAN YANG DICAPAI (OUTPUT)... 5
IV. MANFAAT YANG DIPEROLEH (OUTCOME) ... 7
V. REALISASI BIAYA ... 8
VI. KESIMPULAN DAN SARAN ... 8
DAFTAR PUSTAKA ... 9
LAMPIRAN ... 10
iv
RINGKASAN
Dunia telah memasuki era globalisasi mulai persaingan menciptakan dan menerapkan teknologi baru di negara-negara maju (Ketut Sudarsana, Bagus Made Anggara Putra, Nyoman Temon Astawa, & Wayan Lali Yogantara, 2019). Berkembangnya teknologi informasi yang sangat pesat di kalangan masyarakat, membuat masyarakat tertarik untuk memberi kemudahan dalam menyampaikan informasi melalui website. Hal ini membutuhkan keterampilan yang terlatih karena banyaknya software untuk membuat sistem informasi berbasis website. Perlunya pemilihan software yang mudah digunakan juga menjadi faktor terpenting dalam membuat system informasi dengan konten yang menarik.
Masjid selain menjadi tempat ibadah juga sekaligus dapat menjadi tempat untuk menambah wawasan, dengan mengikuti kegiatan masjid seperti kajian Islam, salah satunya Masjid At- Taubah yang terletak di Jl. Pancoran Barat VIII, RT 009/03 No. 20 Kel. Pancoran Kec.
Pancoran, Jakarta Selatan 12780. Masjid At- Taubah mempunyai beberapa kegiatan rutin yang diadakan oleh pengurus atau Remaja diantaranya kajian rutin yang tidak hanya diikuti oleh ikhwan tetapi oleh akhwat juga. Selain kegiatan tersebut, fungsi masjid juga menjadi tujuan utama yaitu tempat ibadah bagi orang muslim untuk dapat beribadah dengan sholat berjamaah atau ibadah lainnya di Masjid At- Taubah. Masjid At- Taubah juga mempunyai banyak kegiatan yang diadakan seperti kajian ceramah rutin, bakti sosial, kegiatan muharram dan lain sebagainya. Semenjak pandemi, beberapa kegiatan masjid secara offline diberhentikan dahulu karena banyaknya kasus yang positif di kalangan masyarakat. Agar masyarakat luas mengetahui, kiranya diperlukan media untuk sosialisasi seperti sistem informasi berbasis website. sistem informasi berbasis website Ikatan Remaja Islam Masjid At-Taubah (IKRIMA) merupakan media informasi yang dapat dimanfaatkan secara efektif dan efisien dalam penyampaian informasi-informasi yang berhubungan dengan layanan yang diberikan. Metode Pelaksanaan kegiatan pengabdian masyarakat berupa pelatihan pembuatan sistem informasi berbasis website dilakukan dengan beberapa tahapan yang dimulai dari perencanaan, pelaksanaan dan evaluasi. Pelatihan ini lebih menitikberatkan pada kegiatan praktek dibandingkan dengan penjabaran materi. Pelaksanaan pelatihan secara hybird dengan menggunakan media conference dengan materi yang telah disusun sistematis. Hasil kegiatan pelatihan diharapkan dapat menunjukkan bahwa peserta memiliki pemahaman yang meningkat terkait manfaat website sebagai sarana atau media informasi dan target luaran berupa publikasi di media elektronik. Kemampuan peserta terkait cara membuat dan mengelola website juga diharapkan mengalami peningkatan kemampuan menuju SDM unggul.
1 I. PENDAHULUAN
Dalam Undang-Undang Nomor 20 Tahun 2003 tentang Sistem Pendidikan Nasional disebutkan bahwa setiap Perguruan Tinggi wajib melaksanakan Tridarma Perguruan Tinggi yaitu pengajaran, penelitian, dan pengabdian kepada masyarakat. Program pengabdian kepada masyarakat yang akan diselenggarakan oleh Universitas Bina Sarana Informatika berkaitan dengan kepedulian setiap lembaga atau institusi yang bergerak di bidang Pendidikan khususnya Pendidikan Tinggi dengan mengikuti perkembangan dan kemajuan teknologi sebagai salah satu negara yang memiliki potensi sumber daya alam dan manusia yang banyak.
Di era ini untuk mendapatkan sebuah berita sangatlah mudah. Media digital memberi kemudahan kepada setiap pemakainya untuk saling menyebarkan berita. Sumber berita dapat diperoleh darimana saja (Wati & Sari, 2021). Di era modern, semua organisasi baik formal maupun nonformal memperoleh kemudahan sekaligus tantangan dalam menjalankan visi dan misinya agar relevan dengan perkembangan teknologi dan informasi (IT), termasuk organisasi di dalam masjid yang disebut dengan pengurus masjid (Prasetiyo & Gunarsi, 2019)
Berdakwah merupakan kegiatan pembelajaran dengan cara menyampaikan ajaran agama yang wajib dilakukan seluruh umat Islam, sebagai penggerak utama dalam berdakwah.
Remaja masjid menyadari kemajuan teknologi dan efek dari pandemic covid 19 membuat kegiatan dakwah sulit dilakukan, padahal kegiatan dakwah harus tetap dilakukan. Sehingga muncul ide melakukan kegiatan dakwah menggunakan fasilitas internet atau virtual agar dakwah tetap berjalan dengan membuat video kegiatan masjid (Muslim & Sasmita, 2021)
Pada kondisi seperti sekarang, pendidikan di Indonesia mayoritas masih didominasi oleh model informasi secara daring. Salah satu bentuk pemanfaatan teknologi informasi dan komunikasi dalam pendidikan adalah dengan lahirnya sistem informasi berbasis website.
Website dapat juga diartikan sebagai kumpulan halaman yang dapat menampilkan berbagai informasi dalam bentuk teks, suara, gambar, animasi atau gabungan dari beberapa bentuk atau semuanya. (Nurmi, 2015). Dalam Herliandry et al, 2020,pembelajaran online didefinisikan sebagai pengalaman transfer pengetahuan menggunakan video, audio, gambar, komunikasi teks, perangkat lunak (Basilaia & Kvavadze, 2020) dan dengan dukungan jaringan internet (Zhu & Liu, 2020) (Agung Mahardini, 2020). Proses transfer pengetahuan menggunakan video, audio, gambar, komunikasi teks, perangkat lunak kedalam sistem informasi berbasis website ini membawa pengaruh terjadinya proses transformasi informasi
2
konvesional ke dalam bentuk digital. Karena semakin majunya teknologi yang ada saat ini, dan dengan adanya sistem informasi secara daring menjadi solusi untuk remaja masjid dapat memanfaatkan internet untuk berdakwah.
Dalam pelaksanaannya metode dalam kegiatan pengabdian masyarakat adalah berupa webinar/workshop secara hybird memberikan pengetahuan dan keterampilan dasar membangun website. Oleh karena itu, kami berinisiatif untuk memberikan Pelatihan Pembuatan Sistem Informasi Berbasis Website Pada Remaja Islam Masjid At-Taubah Jakarta agar para pengurus tersebut memiliki pengetahuan yang dapat mendukung mereka dalam melakukan berbagai kegiatannya menuju SDM unggul.
1. Analisis Situasi
Keberadaan Masjid At-Taubah di tengah masyarakat memiliki peranan penting dalam membangun moral dan akhlak. Salah kegiatannya adalah berdakwa, yang merupakan kegiatan keagaman dengan cara menyampaikan ajaran agama yang wajib dilakukan seluruh umat Islam, Remaja Masjid sebagai salah satu penggerak dalam berdakwah. Dalam masa pandemi Covid-19 yang belum mereda, masyarakat sedikit kesulitan dalam memperoleh informasi yang maksimal dikarenakan adanya pembatasan aktivitas diluar rumah sehingga mereka diharapkan dapat memanfaatkan informasi yang dilakukan secara daring. Dengan adanya kegiatan pengabdian kepada masyarakat yang akan dilaksanakan ini memungkinkan dapat meningkatkan minat dan pengetahuan pengurus masjid terutama remaja masjid dalam membuat sarana dakwah/informasi dengan website menjadi lebih menarik dinikmati oleh masyarakat luas. Dengan adanya website diharapkan dapat meningkatkan pelayanan terhadap masyarakat dengan menyediakan informasi yang dapat diakses secara cepat, tepat dan akurat.
Mitra Pengabdian Masyarakat kali ini melibatkan pengurus dan Remaja Islam Masjid At- Taubah yang terletak di Jl. Pancoran Barat VIII, RT 009/03 No. 20 Kel. Pancoran Kec.
Pancoran, Jakarta Selatan 12780
3
Gambar 1. Kegiatan-Kegiatan Remaja Masjid At-Taubah
2. Peta Lokasi Mitra
Lokasi pelaksanaan pengabdian masyarakat kali ini adalah menggunakan Aula Masjid At-Taubah yang terletak di Jl. Pancoran Barat VIII, RT 009/03 No. 20 Kel. Pancoran Kec.
Pancoran, Jakarta Selatan 12780 yang berjarak kurang lebih 10,7 KM dari kampus Universitas Bina Sarana Informatika yang berlokasi di Jl. Kramat Raya No.98, RT.2/RW.9, Kwitang, Kec. Senen, Kota Jakarta Pusat.
4
Gambar 2. Map Jarak Lokasi Tempat Pengabdian Masyarakat dengan Kampus
3. Permasalahan Mitra
Mengacu kepada butir Analisis Situasi, uraikan permasalahan prioritas mitra yang mencakup hal-hal berikut ini.
a. Kurangnya pengetahuan pengurus masjid dalam mengaplikasikan beberapa program di Handphone atau Laptop yang dimiliki dalam peningkatan membuat informasi yang menarik.
b. Minimnya keterampilan pengurus dalam membuat konten dan informasi secara online agar lebih menarik dengan penambahan background lagu, suara, dan caption yang dapat juga dijadikan tolak ukur peningkatan kemampuan.
c. Pengurus hanya mengandalkan selembaran tanpa design untuk komunikasi dan memberikan informasi kepada masyarakat guna menarik perhatain pembaca serta penyampaian informasi hanya melalui mulut ke mulut, sehingga kurang luasnya informasi yang diberikan. Hanya orang-orang sekitar yang dekat dengan masjid saja yang mengetahui tentang kegiatan Masjid At-Taubah Jakarta.
II. METODE PELAKSANAAN
Metode pelaksanaan kegiatan yang dilakukan adalah dengan memberikan workshop untuk memberikan pengetahuan dan keterampilan dasar belajar membuat sistem informasi
5
berbasis website yang dapat mendukung mereka dalam melakukan berbagai kegiatan keagamaan maupun sosial. Adapun tahapan kegiatan yang telah dilaksanakan adalah sebagai berikut:
1. Pelatihan dilaksamakan diawali dengan pembukaan dan penyampaian materi 2. Materi yang disampaikan berisi teori dan praktek
3. Selanjutnya peserta akan diberikan tutorial berupa pembuatan website dengan bootstrap sesuai dengan materi
4. Evaluasi dilaksanakan setalah Pelatihan dilaksanakan dengan mengamati perkembangan Remaja Masjid dalam memanfaatkan teknologi informasai dan komunikasi dalam pembuatan website dengan hasil mengalami peningkatan pengetahuan menjadi 80%.
Berikut merupakan rincian Tugas Panitia Pengabdian Masyarakat:
1. Ahmad Al Kaafi, M.Kom (Ketua Pelaksana): Mengkoordinasikan kegiatan pengabdian masyarakat dari kordinasi dengan tempat pengabdian masyarakat, pengajuan proposal, pelaksanaan sampai dengan pembuatan laporan
2. Leliyanah, M.Kom (Ketua Tim Tutor): Mengkoordinasikan pelaksanaan pelatihan berupa pembuatan materi/modul workshop, pembagian tugas tim tutor, koordinasi dengan ketua dan tim tutor saat pelaksanaan workshop
3. Suparni, M. Kom, Titin Agustina, Valentania Salsabila dan Nazwa Tiara Rizky (Tim Tutor): Melaksanakan penyampaian materi yang telah disiapkan, mengelola presensi kehadiran dan memastikan materi yang disampaikan dapat diterima oleh peserta.
4. Mochammad Abdul Azis, M.Kom, Titin Agustina, Valentania Salsabila dan Nazwa Tiara Rizky (Publikasi): Penyampaian informasi program pengabdian kepada masyarakat, Dokumentasi proposal dan hasil pelaksanaan pengabdian kepada masyarakat, Pembuatan Kuesioner dan Rekap Kuesioner, Membuat Press Realese Publikasi hasil pelaksanaan pengabdian kepada masyarakat dan Pemantauan serta evaluasi pelaksanaan pengabdian kepada masyarakat.
Adapun pelaksanaan Pengabdian Masyarakat ini akan dilaksanakan pada : Hari/Tanggal : Sabtu-Minggu, 19-20 Maret 2022 Tempat : Masjid At-Taubah Pancoran, Jakarta
Alamat : Jl. Pancoran Barat VIII, RT 009/03 No. 20 Kel. Pancoran Kec. Pancoran, Jakarta Selatan 12780
Waktu : 09.00 – 14.00 WIB
Join Zoom Meeting
6
https://us02web.zoom.us/j/7576749767?pwd=cjNQYjAzVGRJcTJpTExFQnpxVVp6Z z09
Meeting ID: 757 674 9767 Passcode: PMGNP2003
III. LUARAN YANG DICAPAI (OUTPUT)
Jenis luaran yang akan dihasilkan dari solusi tersebut berupa press release. Kegiatan pengabdian masyarakat ketika sudah selesai dilaksanakan memiliki rencana target capaian luaran yang dituangkan pada tabel 1. Rencana target capaian luaran.
Tabel 1. Luaran dan Target Capaian
No Jenis Luaran Indikator Capaian Status
Capaian 1 Publikasi di jurnal ilmiah
cetak atau elektronik
Artikel di Jurnal Nasional Tidak Terakreditasi
Ya
2 Artikel di media masa cetak atau elektronik
Lokal Ya
3 Mitra Non Produktif
Pengetahuannya meningkat Ya
Keterampilannya meningkat Ya
Pelayanannya meningkat Ya
Hasil dari kegiatan pengabdian masyarakat ini adalah berupa publikasi pada media masa dengan tautan sebagai berikut: https://news.bsi.ac.id/2022/03/24/dosen-universitas- bsi-beri-pelatihan-5/ dan pada Jurnal Nasional Tidak Terakreditasi ABDITEKNIKA Volume 2 Nomor 1 April 2022 Halaman 50-55 ISSN 2775-1694 (http://jurnal.bsi.ac.id/index.php/abditeknika/article/view/1131/694)
7
IV. MANFAAT YANG DIPEROLEH (OUTCOME)
Kontribusi yang diberikan mitra Kontribusi yang diberikan oleh mitra meliputi:
a. Identifikasi masalah pembuatan sistem informasi berbasis website;
b. Menyiapkan sarana dan prasarana yang dibutuhkan selama kegiatan di tempat mitra;
c. Bersedia di diberikan pembelajaran tentang pembuatan video tutorial.
Manfaat pelatihan yang diperoleh mitra berupa peningkatan pengetahuan dan keterampilan tentang membuat sistem informasi berbasis website. Sebelum kegiatan dilakukan pendataan kepada peserta terkait pemahaman aplikasi penunjang pembelajaran dan promosi produk dengan skala 1-10, semakin besar angka, semakin tinggi tingkat pemahamannya. Dari hasil pendataan awal sebagian besar remaja masjid mengetahui terkait aplikasi penunjang pembelajaran dan promosi produk namun hanya sebatas tahu saja. Setelah mengikuti pelatihan para remaja tidak hanya sekedar mengetahui saja tetapi mereka dapat mengaplikasikannya secara langgsung. Hasil peningkatan pengetahuan peserta sebelum pelatihan dan sesudah pelatihan dapat dilihat pada tabel 2.
8
Tabel 2. Garfik Pengetahuan dan Keterampilan
V. REALISASI BIAYA
Realisasi biaya dalam melaksanakan kegiatan pengabdian pada masyarakat, sebagai berikut:
Tabel 3. Rincian Biaya HONOR
No Item Honor Kegiatan Volume Satuan Honor (Rp) Total (Rp)
1 Honor Tutor 1 150000 150000
2 Honor Anggota Tutor 4 55000 220000
Total Honor 370000
BELANJA BAHAN
No Item Bahan Volume Satuan Honor (Rp) Total (Rp)
1 Fotokopi Bahan Materi 25 Jilid 10000 250000
2 ATK 1 Paket 145000 145000
3 Spanduk 1 Pcs 50000 50000
4 Biaya Cetak 1 PCs 10000 10000
Total Belanja Bahan 455000
BELANJA BARANG NON OPERASIONAL
No Item Bahan Volume Satuan Honor (Rp) Total (Rp)
1 Snack Keseluruhan 25 Pack 17000 425000
2 Souvenir 20 Paket 22500 450000
Total Belanja Barang Non Operasional 875000
BIAYA PERJALANAN
9
No Item Bahan Volume Satuan Honor (Rp) Total (Rp)
1 Transport Tutor 1 - 50000 50000
2 Transport Anggota 5 - 50000 250000
3 Transport Peserta 20 - 50000 1000000
4 Kuota Internet 20 - 50000 1000000
Total Biaya Perjalanan 2300000
Total Keseluruhan 4000000
VI. KESIMPULAN DAN SARAN
Dari kegiatan pengabdian masyarakat ini dapat disimpulkan bahwa:
a. Kegiatan pengabdian masyarakat yang dilakukan kepada Ikatan Remaja Islam Masjid At-Taubah (IKRIMA) Pancoran-Jakarta telah berhasil dengan baik, para remaja masjid sebagai sasaran sangat antusias dalam mengikuti setiap tahapan kegiatan pelatihan.
b. Pengetahuan dan pemahaman remaja masjid mengenai pembuatan dan penggunaan sistem informasi berbasis website sehingga para remaja masjid sedikit banyak sudah dapat pembuatan dan penggunaan sistem informasi berbasis website.
c. Ikatan Remaja Islam Masjid At-Taubah (IKRIMA) Pancoran-Jakarta mulai memahami dan tidak mengalami kesulitan dalam pembuatan dan penggunaan sistem informasi berbasis website.
Adapun saran yang dapat diberikan pada kegiatan pengabdian masyarakat ini adalah:
a. Para remaja masjid yang telah mengikuti kegiatan pelatihan atau workshop Pelatihan Pembuatan Sistem Informasi berbasis website untuk peningkatan kemampuan menuju SDM unggul, diharapkan dapat memecahkan permasalahan yang sering tejadi saat memberikan informasi terkait kegiatan-kegiatan yang telah dan yang akan dilaksanakan.
b. Pembuatan Sistem Informasi berbasis website memiliki peran atau manfaat yang efektif.
c. Adanya keberlanjutan kegiatan pelatihan sejenis yang diselenggarakan secara periodik sehinga dapat meningkatkan kemampuan Remaja Islam Masjid At-Taubah (IKRIMA) Pancoran-Jakarta dalam pembuatan Sistem Informasi berbasis website.
DAFTAR PUSTAKA
Agung Mahardini, M. M. (2020). Analisis Situasi Penggunaan Google Classroom pada Pembelajaran Daring Fisika. Jurnal Pendidikan Fisika, 8(2), 215.
https://doi.org/10.24127/jpf.v8i2.3102
Ketut Sudarsana, I., Bagus Made Anggara Putra, I., Nyoman Temon Astawa, I., & Wayan Lali Yogantara, I. (2019). The use of Google classroom in the learning process. Journal
10
of Physics: Conference Series, 1175(1). https://doi.org/10.1088/1742- 6596/1175/1/012165
Muslim, B., & Sasmita. (2021). WEBSITE SARANA DAKWAH REMAJA MESJID BAABUL JANNAH DEMPO UTARA. NGABDIMAS, 4(1), 16–22.
Nurmi, H. (2015). Membangun Website Sistem Informasi Dinas Pariwisata. Jurnal Edik Informatika, 1(2).
Prasetiyo, W. H., & Gunarsi, S. (2019). FABRIKASI FITNAH DAN GERAKAN DAKWAH PEMUDA: PENGUATAN LITERASI MEDIA DAN PENGELOLAAN MEDIA SOSIAL PADA ORGANISASI KEPEMUDAAN MASJID FORSAM KLATEN SELATAN. URECOL, 9(2), 54–63.
Wati, E. F., & Sari, A. P. (2021). Edukasi Literasi Digital terhadap Perkembangan Anak pada TPA Al Ihsan. SENADA, 2(1), 38–46.
11 LAMPIRAN
Lampiran A. Absen Panitia
12
13 Lampiran B. Absen Peserta
14
15 Lampiran C. Surat Keterangan Mitra/Instansi
16
17 Lampiran D. Luaran PM
https://news.bsi.ac.id/2022/03/24/dosen-universitas-bsi-beri-pelatihan-5/
18
Lampiran E. Dokumentasi Kegiatan Pengabdian Masyarakat
Pembukaan acara Pelaksana PM
Pemaparan materi oleh tutor
19
Pemaparan materi oleh tutor
Peserta memperhatikan penjelasan materi
20
Peserta memperhatikan penjelasan materi
21
Sesi Tanya Jawab
22 Penutupan
Penutup dan diakhiri Photo Bersama
2. MATERI / MODUL
[DOCUMENT TITLE]
[Document subtitle]
MODUL
PENGABDIAN KEPADA MASYARAKAT
2022
2 | P a g e
Daftar Isi
Daftar Isi ... 2 Kata Pengantar ... 3 BAB 1 Pengenalan ... 4 1.1. Apa itu Bootstrap ... 4 1.2. Peralatan pendukung ... 4 BAB 2 Pembahasan ... 7 2.1. Menginstall Boostrap 4 ... 7 2.2. Menyiapkan File ... 11 2.3. Memberikan Navigation Bar ... 13 2.4. Menambahkan Jumbotron ... 16 2.5. Menyusun Isi Konten ... 18 BAB 3 Penutup ... 26
3 | P a g e
Kata Pengantar
Saat ini website menjadi kebutuhan untuk mencari informasi diberbagai kalangan masyarakat, kemudahan untuk menyebarkan, mempromosikan dan menyampaikan informasi yang tepat, cepat dan akurat menjadi keunggulan dalam sebuah website, tidak hanya perusahaan, website juga digunakan oleh berbagai kalangan untuk meningkatkan dan menjangkau informasi yang ingin disampaikan kepada khalayak secara luas.
Dalam membuat website dibutuhkan kemampuan yang baik dalam memahami kegunaan website yang dibuat, agar sesuai dengan kebutuhan dan tujuan website tersebut dibuat.
Seiring dengan berkembangnya dunia teknologi informasi saat ini, banyak yang dimudahkan dalam membuat website sesuai dengan kegunaan dan fungsinya. Kemudahan tersebut salah satunya dengan adanya framework seperti bootstrap, CMS dan masih banyak lagi. Pada workshop kali ini akan disampaikan materi pembuatan website dengan menggunakan framework bootstrap 4.
4 | P a g e
BAB I Pengenalan
1.1. Apa Itu Bootstrap
Website menjadi kebutuhan yang sangat signifikan, sebagai sebuah media yang dapat menyampaikan informasi secara luas, cepat dan akurat. Saat ini pembuatan website dapat dilakukan dengan sangat mudah. Kita bisa memanfaatkan beberapa perangkat seperti framework yang dapat mempermudah kita dalam pembuatan website termasuk proses menghias website dengan menggunakan CSS framework.
Pada workshop kali ini, framework yang digunakan adalah Bootstrap. Bootsrap adalah salah satu framework CSS yang bisa kita manfaatkan untuk mempermudah pekerjaan kita ketika ingin mempercantik tampilan website. Framework yang satu ini memainkan class di setiap tag html untuk memberikan efek CSS pada tag tersebut.
Orang-orang memang sudah banyak yang mengenal bootstrap sebagai framework yang sangat mudah untuk kita gunakan. Bagi orang yang awam, mungkin akan sedikit memerlukan adaptasi untuk memahami dan menghafalkan penggunaan class yang tepat untuk mendapatkan efek CSS yang sesuai.
Bagi kita yang masih pemula, kita tidak perlu merasa khawatir akan mengalami kesulitan ketika menggunakan framework yang satu ini. Dengan memanfaatkan dokumentasi Bootstrap yang sangat lengkap dan mudah untuk kita pahami, kita bisa menjadi pengguna Bootstrap yang handal dalam waktu yang singkat.
1.2. Peralatan Pendukung
Selanjutnya, kita juga harus mengetahui hal-hal apa saja yang harus dipersiapkan untuk membuat sebuah website dengan menggunakan bootstrap 4. Dengan begitu, kita bisa mengikuti langkah-langkah pembuatan website, sehingga kita bisa lebih mengerti dan memahami proses pembuatan website dengan menggunakan bootstrap.
a. Bootstrap 4
Pada tahap awal kita harus menyiapkan framework bootstrap yang dapat di download di akun resmi boostrap itu sendiri https://getbootstrap.com/. Hal yang perlu kita perhatikan dalam menginstall Bootstrap di laptop maupun PC kita adalah versinya. Dalam proses membuat website dengan Bootstrap tanpa template kali ini, kita akan menggunakan Bootstrap
5 | P a g e
versi 4. Walaupun terbilang sudah ketinggalan jaman, versi 4 sendiri sudah cukup stabil sehingga sangat jarang kita menemukan bug di versi 4 ini.
Berbeda dengan Bootstrap 4, pada Bootstrap versi 5 terdapat beberapa bug yang mungkin saja bisa kita alami. Hal ini karena Bootstrap 5 sendiri juga masih terus mengalami perkembangan dan update dari pihak pengembang Bootstrap sendiri.
b. Text Editor
Selanjutnya, kita juga harus menyiapkan text editor sebelum membuat website dengan bootstrap 4. Hal ini juga sangat penting untuk kita persiapkan. Text editor merupakan senjata utama yang akan kita gunakan dalam tutorial kali ini. Pastikan untuk menggunakan text editor yang paling nyaman menurut diri kita masing-masing. Dengan menggunakan text editor ternyaman, kita bisa menikmati proses pembelajaran kita kali ini. Kita bisa betah berlama-lama berada di depan layar laptop maupun kita dengan code editor kesukaan kita.
Bermacam-macam text editor bisa kita gunakan untuk mengikuti tutorial pada kali ini.
Mulai dari Visual Studio Code, Notepad++, Sublime Text, dan lain sebagainya, bisa kita gunakan selama code editor tersebut support untuk mengedit file html. Dengan menggunakan text editor yang sesuai, kode program yang kita ketik juga akan menjadi lebih rapi dan mudah melakukan debugging ketika terjadi error. Setelah mengetahuinya, tentunya kita menjadi semakin tahu kelebihan dan kekurangan berbagai macam editor. Dengan begitu, kita bisa lebih mudah dalam memilih text editor mana yang akan kita gunakan.
Pada Workshop tutorial membuat website kali ini kita bisa menggunakan Visual Studio Code sebagai code editornya. Bagi kita yang merasa kurang nyaman dengan code editor yang satu ini, kita bisa menggunakan software code editor kesukaan masing-masing.
c. Web Browser
Peralatan selanjutnya yang harus kita siapkan adalah web browser. Browser adalah sebuah alat yang nantinya akan kita gunakan untuk melihat tampilan dari hasil kode program yang sudah kita tuliskan. Setelah menuliskan kode program di software code editor favorit masing-masing, kita bisa membuka file tersebut melalui browser.
Browser yang dapat digunakan dalam pelatihan kai ini adalah browser yang sehari- hari kita gunakan aktivitas browsing, seperti mozilla firefox, google chrome, microsoft edge, dan masih banyak browser yang dapat digunakan. Walaupun terdapat beberapa browser yang tidak bisa menjalankan tag html dengan maksimal, tapi pada pelatihan hari ini kita akan menghindari penggunaan tag html seperti itu.
6 | P a g e
d. XAMPP (Optional)
XAMPP merupakan web server untuk menjalankan script PHP. Di tutorial ini, kita akan menginstall bootstrap di XAMPP. Namun, Anda tidak harus menggunakan XAMPP untuk dapat menggunakan bootstrap ini.
7 | P a g e
BAB II Pembahasan
2.1. Menginstall Boostrap 4
Setelah semua peralatan pendukung sudah kita siapkan, sekarang saat nya kita masuk ke proses install bootstrap 4 di xampp pada windows. Pada bagian pertama ini, kita akan membahas mengenai cara install bootstrap 4 di xampp pada windows secara offline.
Ketika kita menggunakan cara yang satu ini, maka bootstrap akan benar-benar terinstall pada website kita. Jadi, kita bisa menemukan folder bootstrap tersebut di folder projek website kita. Karena bersifat offline inilah sehingga bootstrap tetap bisa berjalan meskipun kita tidak terhubung ke internet.
1. Download Bootstrap 4 melalui Website Bootstrap
Framework bootstrap yang kita gunakan adalah bootstrap versi 4 dapat di download di akun resmi boostrap itu sendiri https://getbootstrap.com/docs/4.6/getting-started/download/.
Setelah itu, kita akan langsung berada di halaman download dari Bootstrap versi 4. Nah langkah berikutnya adalah dengan langsung saja menekan tombol download berwarna ungu.
File yang kita download merupakan package berformat zip yang berisi file framework bootstrap 4 ini terlebih dahulu. Tunggu beberapa saat hingga proses download selesai.
Sekali lagi, pastikan kita mendownload bootstrap dari halaman bootstrap versi 4. Karena terdapat beberapa file konfigurasi yang berbeda antara bootstrap versi 4 dengan bootstrap versi 5. Jadi, apabila kita menggunakan bootstrap versi 5 pada tutorial kali ini, bisa saja terjadi kesalahan langkah yang menimbulkan terjadinya error di kode programnya nanti.
8 | P a g e
2. Melakukan Proses Ekstrak dengan WinRAR
Langkah selanjutnya untuk cara install bootstrap 4 di xampp pada windows secara offline yaitu melakukan proses ekstrak terhadap file yang sudah kita download sebelumnya.
Ketika download sudah selesai, silahkan menuju ke direktori tempat kita menyimpan hasil unduhan kita tadi.
Folder penyimpanan untuk menyimpan hasil download sebelumnya berada di This PC\Downloads\Compressed\. Bagi kita yang menggunakan Internet Download Manager ketika melakukan download bootstrap sebelumnya, maka penyimpanannya kemungkinan besar sama seperti di gambar.
Kemudian, klik dua kali pada file hasil download kita sebelumnya. Ketika kita sudah menginstall WinRAR, maka file akan otomatis terbuka pada WinRAR kita. Sehingga tampilan WinRAR nya akan seperti berikut ini.
Kemudian klik kanan pada bootstrap-4.6.0-dist yang ada pada WinRAR. Setelah itu akan muncul beberapa aksi yang bisa kita terapkan ke file tersebut. Pilih aksi dengan Extract to a specified folder. Aksi ini kita pilih karena dengan menggunakan pilihan aksi tersebut, kita bisa mengatur hasil ekstrak dari file tersebut ingin kita letakkan di mana.
9 | P a g e
Setelah memilih aksi tersebut, maka akan muncul perintah untuk memilih direktori tempat kita meletakkan hasil proses ekstrak nantinya. Nah, pada tahap ini, arahkan direktori ke tempat kita menginstall xampp. Arahkan ke tempat dimana proyek kita berada.
Pada xampp, proyek website milik kita biasanya berada di dalam folder htdocs yang berada di xampp. Pilih folder proyek website kita untuk meletakkan hasil ekstrak file nantinya. Pada tutorial kali ini, proyek yang akan kita gunakan memiliki nama folder belajar_bootstrap.
3. Menambahkan index.html dan Membukanya pada Code Editor
Langkah berikutnya untuk cara install bootstrap 4 adalah menambahkan index.html pada proyek kita. Pastikan pada direktori tempat ekstrak bootstrap sebelumnya (proyek website kita) sudah terdapat file index.html ini. Jika belum ada, silahkan buat file index.html terlebih dahulu pada direktori tersebut.
Klik kanan pada file tersebut sehingga muncul pilihan aksi seperti pada gambar di atas. Kemudian silahkan pilih aksi untuk membuka file tersebut dengan code editor favorit kita masing-masing. Sehingga kita akan langsung diarahkan ke code editor kita tersebut.
10 | P a g e
Karena pada tutorial kali ini, code editor yang digunakan adalah Visual Studio Code, maka pada gambar tersebut dipilihlah software code editor itu. Bagi yang menggunakan code editor selain Visual Studio Code, silahkan pilih aksi Open with lalu klik pada code editor yang ingin dipakai. Atau kita juga bisa langsung pergi ke code editor favorit masing-masing dan membuka file index.html lewat code editor tersebut.
4. Menambahkan Kode Pada index.html
Selanjutnya ketika sudah membuka file index.html di code editor masing-masing, kemudian kitab isa menambahkan sedikit kode untuk mengimport atau memanggil CSS pada Bootstrap 4 ke file index.html kita. Caranya cukup kita tuliskan kode berikut ini ke dalam file index.html seperti di bawah ini.
Kode tersebut sebenarnya merupakan kode yang cukup simpel. Kode <!DOCTYPE html> merupakan kode yang berfungsi untuk membuat browser nanti bisa mengenali bahwa file tersebut merupakan sebuah dokumen dengan jenis html. Dengan begitu, browser akan dapat membaca file index.html ini sebagai sebuah file yang mengandung tag html dan akan menampilkan tag tersebut sebagai sebuah formatting pada tampilannya nanti.
Kode tersebut seringkali kita abaikan keberadaannya padahal kode itu memiliki peran yang sangat penting sebagai identitas dari file tersebut.
Kemudian kode dengan tag <title> berguna untuk menampilkan judul halaman nantinya. Judul dari sebuah halaman html seperti ini bisa kita lihat di tab browser masing- masing. Biasanya, di sebelah kiri dari judul ini, terletak icon dari dari tiap halaman yang kita buka melalui browser.
Lalu tag <h1> berguna untuk menampilkan tulisan di dalamnya dengan format h1 atau Heading 1. Dengan menggunakan tag ini, kita akan mendapatkan tulisan yang besar dengan gaya bold. Selain itu, ada juga button yang sudah kita tambahkan dengan menggunakan tag <button>
11 | P a g e
Dengan beberapa kode program tersebut, maka kita bisa menghasilkan tampilan HTML standar seperti berikut ini.
2.2. Menyiapkan File
Pada pelatihan kali ini kita akan membuat sebuah website portofolio sederhana yang nantinya, dapat kita sesuaikan dengan portofolio kita masing-masing. Langkah pertama dari cara membuat website responsive tanpa template dengan bootstrap 4 adalah menyiapkan file index.html untuk tampilan utama yang akan tampil pada browser nantinya. Untuk menyiapkannya, silahkan buatlah sebuah file dengan nama index.html pada direktori yang akan digunakan untuk menempatkan website ini nantinya.
Jika bingung dengan direktori atau folder yang digunakan, silahkan ikuti saja sesuai dengan tutorial pada kali ini yaitu pada Documents yang bisa kita akses melalui ThisPC ->
Documents pada File Explorer masing-masing.
Buatlah folder belajar-website pada direktori tersebut. Setelah membuat folder tersebut, sekarang kita bisa langsung masuk ke folder belajar-website untuk kemudian membuat file index.html di dalamnya. Caranya adalah dengan masuk ke folder belajar- website lalu tekan klik kanan pada area yang kosong kemudian pilih New -> Text Document. Lalu tulis saja nama file text tersebut dengan nama index.html dan hilangkan format .txt yang berada di akhir nama file sebelumnya.
12 | P a g e
Apabila muncul peringatan seperti gambar di bawah ini, tekan saja Yes dan file index.html sudah selesai kita siapkan.
Setelah file index.html sudah kita siapkan, selanjutnya adalah mengisinya dengan starter template bootstrap 4. Karena kita sudah pernah membahas tentang cara instalasi bootstrap 4, maka sekarang tinggal kita gunakan pengetahuan tersebut untuk melakukan instalasinya pada file index.html kita ini. Langsung saja copy dan paste kode program starter template bootstrap 4 berikut ini.
13 | P a g e
Setelah menyalinnya, silahkan buka software code editor masing-masing untuk membuka file index.html. Setelah file tersebut sudah berhasil terbuka di code editor, silahkan paste saja kode starter template yang telah kita salin sebelumnya.
Untuk melihat tampilan dari index.html ini, kita bisa menekan klik kanan pada file tersebut kemudian pilih Open with -> browser favorit kita. Setelah itu, kita akan melihat tampilan seperti gambar berikut ini pada browser yang kita gunakan.
2.3. Memberikan Navigation Bar
Bagian pertama yang harus kita urus adalah Navigation Bar. Maka dari itu, cara membuat website responsive tanpa template dengan bootstrap 4 yang berikutnya adalah menambahkan navigation bar pada index.html kita. Proses membuat navigation bar ini tidak akan sesulit yang kita bayangkan. Kita bisa membuat navigation bar dengan menggunakan
14 | P a g e
template yang sudah ada di website bootstrap 4. Bisa langsung kita download di link https://getbootstrap.com/docs/4.6/components/navbar/#nav.
Ketika mengunjungi website tersebut, maka kita akan melihat tampilan seperti pada gambar di atas. Nah, perhatikan kode program yang ada pada website tersebut. Fokuslah terhadap bagian Nav karena pada bagian itu terdapat navigation bar paling sederhana yang bisa kita gunakan dalam studi kasus kita kali ini. Silahkan tekan tombol copy untuk menyalin kode program dari Nav tersebut. Atau kita juga bisa mendapatkan kode program tersebut dengan menyalinnya melalui kode program berikut ini.
15 | P a g e
Perhatikan bagian baris pertama
Pada bagian itu terdapat class navbar, navbar-expand-lg, navbar-light dan bg- light. Class navbar berarti menunjukan bahwa tag tersebut merupakan navigation bar.
Kemudian untuk navbar-expand-lg itu lebih mengatur ke ukurannya terhadap ukuran window pada browser. Silahkan ubah ubah saja bagian lg nya saja menjadi sm, md, atau xs untuk melihat perubahan yang terjadi.
Selain itu, bagian yang tidak kalah penting adalah navbar-light dan bg-light. Navbar- light berarti bahwa navigation bar tersebut berwarna cerah atau putih sehingga class ini akan memberikan efek berupa mengubah tulisan pada navigation bar menjadi gelap.
Sedangkan bg-light akan mengatur background dari navigation bar yang ada.
Untuk melakukan kustomisasi warna, silahkan ubah-ubah saja light menjadi dark, primary, danger, info, dan sebagainya sesuai dengan aturan pewarnaan bootstrap yang ada di dokumentasi mereka.
Letakkan kode program yang sudah kita salin, tepat di urutan pertama di dalam tag
<body>.
Setelah meletakkan kode pada bagian tersebut, sekarang saatnya kita lihat terlebih dahulu. Sudah seperti apa tampilan dari file index.html kita. Silahkan langsung saja buka melalui browser masing-masing.
Jika sudah, sekarang saatnya mengubah sedikit bagian navbarnya. Ubahlah kode program mulai dari <nav> hingga </nav> sehingga menjadi seperti berikut ini.
16 | P a g e
Kemudian hapus code di bawah ini
Sehingga menghasilkan tampilan web seperti di bawah ini
2.4. Menambahkan Jumbotron
Jumbotron menjadi hal yang penting untuk membuat tampilan website kita menjadi semakin menarik saat pertama kali dibuka oleh orang-orang. Peran dari Jumbotron sendiri adalah sebagai tampilan pertama yang hadir saat website kita selesai di load. Link https://getbootstrap.com/docs/4.6/components/jumbotron/ dapat kita gunakan untuk mencari jumbotron yang cocok untuk kita.
17 | P a g e
Silahkan cari bagian fluid jumbotron karena jumbotron inilah yang akan kita gunakan pada kali ini. Setelah itu, langsung saja tekan copy yang ada di dalam kotak merah pada gambar di atas untuk menyalin kode dari fluid jumbotron ini. Kemudian ketika kita sudah menyalin kode nya, sekarang saatnya buka kembali file index.html kita dengan menggunakan software kode editor masing-masing. Ketika kita sudah membuka file pada code editor, sekarang saatnya fokus ke bagian yang ditunjuk dengan kotak merah pada gambar di atas.
Silahkan hapus kode <h1>Hello, World!</h1>.
Setelah menghapusnya, sekarang saatnya kita untuk meletakkan kode yang sudah kita salin sebelumnya dari fluid jumbotron melalui dokumentasi bootstrap sebelumnya. Dengan meletakkan kode tersebut, sekarang kita akan mendapatkan tampilan seperti berikut ini.
18 | P a g e
Disini kita akan berfokus untuk membahas terkait class nya. Class jumbotron fluid- jumbotron menandakan bahwa div tersebut termasuk sebuah jumbotron dengan tipe fluid- jumbotron. Class display-4 dan lead menandakan bahwa teks di dalamnya akan tampil dengan format display-4 maupun lead yang sudah diatur masing-masing oleh bootstrap.
Setelah mengetahui fungsi class nya, sekarang kita akan melakukan sedikit perubahan teks pada display-4 dan lead. Pada div dengan class display-4, gantilah teks nya menjadi Portofolio Ku. Kemudian pada div dengan class lead, ubahlah menjadi Selamat Datang di Website Portofolio Ku. Dengan begitu, kita akan mendapatkan tampilan seperti berikut ini.
2.5. Menyusun Isi Konten
Untuk Menyusun isi konten, kita dapat menyalin kode berikut ini.
Div dengan class row menandakan bahwa itu akan tampil dalam satu baris yang sama.
Kemudian div dengan class col-md-4 menandakan bahwa seluruh konten di dalamnya akan tampil sebagai kolom dengan berukuran 4/12 pada layar laptop (md = medium = laptop).
Bingung? Untuk lebih jelasnya, perhatikan gambar berikut ini yang menjelaskan struktur dari kode tersebut.
19 | P a g e
Kotak kotak pada gambar merupakan penjelasan dan ilustrasi dari struktur kode yang dituliskan di atas sebelumnya.
Setelah menyalin kode sebelumnya, sekarang saatnya kita untuk menempelkan kode tersebut di file kita. Jadi, langsung saja buka file index.html sehingga kode keseluruhan seperti ini:
20 | P a g e
Disitu terdapat bagian untuk Foto Profil, Informasi Pribadi, dan Riwayat Pendidikan.
Sekarang saatnya kita melengkapi bagian foto profil terlebih dahulu. Pada bagian ini, silahkan cari foto terbaik masing-masing, kemudian pindahkan foto tersebut di folder belajar- website sama seperti letak dari file index.html sebelumnya.
21 | P a g e
Pastikan juga kita sudah mengubah nama dari gambar yang akan kita gunakan menjadi foto_profil.jpg agar lebih mudah saat mengikuti langkah-langkah berikutnya.
Selanjutnya, silahkan buka kembali file index.html dengan menggunakan code editor favorit masing-masing. Setelah file terbuka, langsung saja gunakan kode berikut ini untuk menambahkan gambar pada website kita.
Penjelasan Program :
atribut src menunjukan alamat dari gambar yang ingin kita gunakan. Kemudian class rounded-circle berguna untuk membuat bentuk dari gambar yang kita gunakan menjadi berbentuk lingkaran tanpa harus mengedit foto yang akan kita gunakan secara manual.
Selanjutnya width tersebut berguna untuk mengatur lebar dari gambar kita. Ketika kita tidak menambahkan height untuk mengatur tingginya, maka tinggi dari gambar tersebut akan secara otomatis mengikuti lebarnya dengan mempertahankan rasio asli dari foto tersebut.
Untuk meletakkannya, perhatikanlah kotak merah pada gambar di atas atau lebih tepatnya pada baris ke 37 setelah div dengan class col-md-4. Letakkan kode yang sudah kita salin pada tempat tersebut dimana pada kode sebelumnya, disitu terdapat tulisan Foto Profil.
Hapus tulisan Foto Profil dan timpa dengan kode yang sudah kita salin sebelumnya. Setelah itu, kita akan melihat tampilan website seperti berikut ini.
22 | P a g e
Cara membuat website responsive tanpa template selanjutnya yang harus kita lakukan adalah mengurus bagian informasi pribadi. Setelah sebelumnya kita menyelesaikan bagian foto profil, sekarang saatnya untuk lanjut ke informasi pribadi.
Pada bagian ini, kita hanya akan menambahkan beberapa informasi dalam bentuk teks saja.
Mulai dari nama lengkap, tempat tanggal lahir, alamat, media sosial, dan informasi lain terkait diri kita sendiri.
Langsung saja salin kode berikut ini kemudian letakkan di baris 100 pada file index.html di code editor masing-masing.
Penjelasan Program :
Class card menunjukan bahwa seluruh tag di dalamnya akan tampil dengan format card pada bootstrap. Kemudian di card-body nya, terdapat beberapa baris dengan kolom untuk membuat tampilannya tampak lebih rapi. Sebenarnya, kode tersebut bisa kita temukan di dokumentasi bootstrap 4 melalui website mereka.
Setelah itu, kita akan mendapatkan tampilan seperti berikut ini.
23 | P a g e
Sekarang kita sudah selesai mengisi informasi pribadi kita. Sekarang saatnya untuk masuk ke cara membuat website responsive tanpa template dengan bootstrap 4 yang berikutnya yaitu mengisi bagian Riwayat Pendidikan.
Pada bagian ini, kita akan menggunakan List Group dari bootstrap 4 untuk menambahkan informasi terkait riwayat pendidikan kita. Langsung saja gunakan kode berikut ini untuk menambahkan informasi terkait riwayat pendidikan kita.
Pastikan untuk meletakkan kode berikut ini di dalam div dengan class col-md-4 di mana pada sebelumnya, di situ terdapat isi Riwayat Pendidikan. Hapus teks Riwayat Pendidikan tersebut kemudian gantilah dengan kode yang akan kita salin berikut ini.
24 | P a g e
Penjelasan Program :
div class list-group untuk menandakan satu group list dari riwayat pendidikan. Kemudian div class list-group-item menandakan satu list item dari list group tersebut.
Lalu tag h5 dengan class mb-1 menandakan bahwa teks di dalamnya akan tampil dengan format h5 dengan margin-bottom nya adalah 1 pada ukuran bootstrap (maksimal ukuran adalah 5).
Untuk p dengan class mb-1 berisi konten tentang jurusan yang kita ambil. Sedangkan untuk tag small merupakan lama kita menempuh pendidikan di tempat itu.
Setelah menyalin dan menempelkannya pada bagian yang tepat, kita akan mendapatkan tampilan seperti berikut ini pada browser.
Sampai langkah ini, kita sudah berhasil menyusun isi dari konten Tentang Saya. Selanjutnya, kita perlu menambahkan sedikit bagian untuk menuliskan pengalaman dan pencapaian yang kita miliki, langsung saja mari kita lanjut ke cara membuat website responsive tanpa template dengan bootstrap 4 yang selanjutnya berikut ini.
Untuk menambahkan bagian pengalaman dan pencapaian tersebut, kita perlu menambahkannya di bawah dari Informasi Ku dan Riwayat Pendidikan. Untuk itu, kita bisa menyalin kode berikut ini terlebih dahulu kemudian menempelkannya pada file index.html kita pada baris ke 93 di code editor favorit masing-masing.
25 | P a g e
Disitu terdapat a href dengan image di dalamnya. Inilah yang membuat gambar icon dari masing-masing kontak bisa langsung di klik. Setelah di klik akan langsung mengarah ke akun media sosial masing-masing.
Untuk mengaktifkannya, kita hanya perlu mengisi bagian href pada tag a tersebut saja. Isilah dengan link atau url yang ingin kita tuju ketika menekan tombol tersebut.
Kemudian jika kita sudah menempelkannya, maka kita akan mendapatkan tampilan browser seperti berikut ini.
26 | P a g e
BAB III Penutup
Dengan adanya pelatihan pembuatan web dengan menggunakan bootstrap ini diharapkan kita dapat membuat web yang kita inginkan sesuai dengan informasi yang akan kita sampaikan kepada khalayak banyak
