MEMBERIKAN PENDAMPINGAN BIDANG TEKNIK, EKONOMI, ILMU

(1)

(2)

(3)

1

LAPORAN KEGIATAN

UNIVERSITAS GUNADARMA JAKARTA

2021

MEMBERIKAN PENDAMPINGAN BIDANG TEKNIK, EKONOMI, ILMU KOMPUTER, DAN PSIKOLOGI BAGI SISWA-SISWI DAN GURU

SMK YADIKA 13 TAMBUN UTARA, BEKASI

(4)

2

DAFTAR ISI

Halaman

Cover

………

¹

Daftar Isi

………

²

Materi Modul & Tim Pelaksana : Bidang : Sistem Komputer, Teknik Elektro, dan Fisika

………

³

Bidang : Ekonomi

………

⁵

Bidang : Ilmu Komputer, Sistem Informasi, Teknik Informatika, dan Matematika

………

⁸

Bidang : Psikologi

………

⁹

Lampiran 1 : Foto Kegiatan

………

¹⁰

Lampiran 2 : Surat Undangan

………

¹⁴

Lampiran 3 : Surat Keterangan/Ucapan Terimakasih

………

¹⁵

Lampiran 5 : Jadwal Kegiatan

………

²²

(5)

3

BIDANG : SISTEM KOMPUTER, TEKNIK ELEKTRO, dan FISIKA

Materi 1 : PENGENALAN K3 (KESELAMATAM DAN KESEHATAN KERJA) UMUM

Peserta : Siswa - siswi SMK Tim Dosen :

1. Dr. Erma Triawati Ch, S.T., M.T

2. Dr. Robby Kurniawan Harahap, S.Kom., M.T 3. Yasman Rianto, S.Si., M.M.S.I

4. Desy Kristyawati, S.T., M.T 5. Jamilah, S.Kom., M.T 6. Alona, S.T., M.T Silabus Materi 1 :

1. Pengertian K3, Syarat Dasar K3, Tujuan Penerapan K3 Umum 2. Dasar Hukum K3 Umum

3. Insiden K3 dan Kecelakaan kerja

4. Bahaya K3 dan Pengendalian Resiko K3 5. Budaya 5R

6. Makna Rambu, Label Kemasan Bahan Beracun Dan Berbahaya (B3), Label Transportasi Bahan Beracun Dan Berbahaya (B3), Makna Label Dan Warna Perpipaan, Tanda Dan Makna Papan Informasi Di Tempat Kerja

7. Alat Pelindung Diri (APD)

8. Penyakit Akibat Kerja (PAK) dan Kesehatan Kerja 9. Api Dan Kebakaran & Metode Pemadaman Api Tujuan Materi 1 :

1. Siswa dapat mengetahui dan memahami Pengertian K3, Syarat Dasar K3, Tujuan Penerapan K3 Umum

2. Siswa dapat mengetahui dan memahami Dasar Hukum K3 Umum 3. Siswa dapat mengetahui dan memahami Insiden K3 dan Kecelakaan

4. Siswa dapat mengetahui dan memahami Bahaya K3 dan Pengendalian Resiko K3 5. Siswa dapat mengetahui dan memahami Budaya 5R

6. Siswa dapat mengetahui dan memahami Makna Rambu, Label Kemasan Bahan Beracun Dan Berbahaya (B3), Label Transportasi Bahan Beracun Dan Berbahaya (B3), Makna Label Dan Warna Perpipaan, dan Tanda Dan Makna Papan Informasi Di Tempat Kerja

7. Siswa dapat mengetahui dan memahami Alat Pelindung Diri (APD)

8. Siswa dapat mengetahui dan memahami Penyakit Akibat Kerja (PAK) dan Kesehatan Kerja

9. Siswa dapat mengetahui dan memahami Api Dan Kebakaran & Metode Pemadaman Api

(6)

4

Materi 2 : PELATIHAN PEMBUATAN BUKU DIGITAL DENGAN MENGGUNAKAN

SIGIL

Peserta : Siswa - siswi SMK Tim Dosen :

1. Dr. Atit Pertiwi, S.Kom., M.M.S.I

2. Dr. Veronica Ernita Kristianti, S.T., M.T 3. Dr. Jonifan, S.Si., M.M.S.I

4. Mariza Wijayanti, S.T., M.T 5. Hafidzah, S.T., M.T

6. Ragiel Hadi Prayitno, S.Kom., M.T

Silabus Materi 2:

1. Pendahuluan

1. Definisi Buku Digital (Ebook) 2. Jenis – jenis Format Buku Digital 3. Aplikasi Buku Digital

2. Pengenalan Software SIGIL 1. Fitur SIGIL

2. Persiapan Pembuatan Buku Digital dengan SIGIL 3. Instalasi Software SIGIL

1. Instalasi Software SIGIL

2. Pengenalan Menu – Menu pada SIGIL 4. Pembuatan Buku Digital dengan SIGIL

1. Mengatur format E-text, Gambar dan Tabel dengan MS.Word 2. Mengatur Format Audio dan Video dengan SW Format Factory 3. Mengubah Format .Doc atau .Docx ke Html

4. Menyisipkan Video 5. Membuat Daftar Isi 6. Membuat Cover Buku 5. Publish ke EPub

1. Pengenalan Tools Reader Buku Digital 2. Instalasi Plugin Readium Pada Google 3. Cara Membaca EPub Pada Readium

Tujuan Materi 2:

1. Siswa dapat mengetahui dan memahami definsi Buku Digital

2. Siswa dapat mengetahui dan mengidentifikasi jenis – jenis format Buku Digital 3. Siswa dapat mengetahui dan memahami aplikasi Buku Digital

4. Siswa dapat mengetahui dan memahami fitur – fitur yang terdapat pada software Sigil 5. Siswa dapat mengetahui dan mengidentifikasi persiapan pembuatan buku digital

dengan menggunakan Sigil

6. Siswa dapat melakukan instalasi Software Sigil

7. Siswa dapat mengetahui dan memahami Menu – Menu pada Sigil 8. Siswa dapat membuat dan manipulasi data dengan Sigil

9. Siswa dapat mengetahui dan memahami Tools Reader Buku Digital 10. Siswa dapat melakukan instalasi Plugin Readium Pada Google

11. Siswa dapat mengetahui dan memahami cara membaca E-Pub pada Readium

(7)

5

BIDANG : EKONOMI

Materi 1 : KEWIRAUSAHAAN DAN DIGITAL MARKETING Peserta : Siswa - siswi SMK

Tim Dosen :

1. Prof. Dr. Ir. Susi Suhendra, M.Si 2. Dr. Lies Handrijaningsih, S.E., M.M 3. Dr. S. Tiwi Anggraeni, S.E., M.M 4. Dr. Emmy Indrayani, S.E., M.M 5. Dr. Renny, S.E., M.M

6. Dr. Sri Murtiasih, S.E., M.M 7. Tanti Arfianti Dewi, S.E., M.M

8. Christera Kuswahyu Indira, S.E., M.M 9. Septi Mariani, S.E., M.M

10. Handayani , S.E., M.M 11. Budi Utami, S.E., M.M 12. Anisah, S.E., M.M

13. Endika Perdana, S.T., M.M Silabus Materi 1 :

1. Konsep dasar kewirausahaan dan Diigital marketing 2. Pemahaman etika bisnis dan kiat sukses dalam wirausaha

3. Kelebihan dalam digital marketing dan jenis jenis Digital marketing 4. Langkah langkah dalam memulai Digital marketing

5. Cara yang digunakan untuk menyusun strategi dalam Digital marketing 6. Penggunaaan B2B dan B2C dalam bidang bisnis

7. Karakteristik dalam enterpreneurship dan lingkungan pendukung kewirausahaan 8. Latihan

Tujuan Materi 1 :

1. Siswa dapat mengetahui dan memahami konsep dasar kewirausahaan dan Digital Marketing

2. Siswa dapat mengetahui dan memahami konsep dasar menjadi wirausahawan sukses

3. Siswa dapat mengetahui dan memahami konsep dasar Keunggulan dalam Digital marketing

4. Siswa dapat mengetahui dan memahami penggunaan Digital marketing 5. Siswa dapat menegetahui dan memahami strategi dalam Digital Marketing 6. Siswa dapat mengetahui dan memahami fungsi Digital marketing dalam bidang

bisnis

7. Siswa dapat mengetahui dan berkemampuan untuk menumbuhkan jiwa kewirausahaan dengan menggunakan Digital marketing

(8)

6

Materi 2 : PPh 21 DAN PENGISIAN SPT ORANG PRIBADI Peserta : Siswa-siswi SMK

Tim Dosen :

1. Dr. Silvia Avira, S.E., M.M 2. Dr. Susanti Usman, S.E., M.M.S.I 3. Dr. Martani, S.E., M.M

4. Dr. Sariyati, S.E., M.M

5. Dr. Sugiharti Binastuti, S.E., M.M 6. Dr. Supriyo Hartadi, S.E., M.M 7. Dr. Ely Sapto Utomo, S.E., M.M 8. Early Armein, S.E., M.M

9. Nurul Khotimah, S.E., M.M

10. Rini Dwiastutiningsih, S.E., M.M.S.I 11. Eva Khadijah, S.E., M.M

12. Irfan Ardiansyah, S.E., M.M 13. Ir. Noversyah, M.M

Silabus Materi 2 :

1. Subyek, Obyek & Tarif PPh 21

2. Cara Perhitungan PPh 21 Pegawai Tetap & Bukan Pegawai 3. Contoh Kasus Perhitungan PPh 21

4. Cara pengisian Bukti Potong PPh 21 5. Simulasi Pengisian efilling 1770 S

1. Siswa dapat mengetahui & memahami subyek, obyek & tarif PPh 21

2. Siswa dapat mengetahui & memahami cara perhitunva PPh 21 Pegawai Tetap &

Bukan Pegawai

3. Siswa dapat mengetahui & memahami contoh kasus perhitungan PPh 21 4. Siswa dapat mengetahui & memahami cara pengisian Bukti potong PPh 21 5. Siswa dapat mengetahui & memahami Simulasi Pengisian efilling form 1770 S

(9)

7

BIDANG : ILMU KOMPUTER, SISTEM INFORMASI, TEKNIK INFORMATIKA, dan MATEMATIKA

Materi 1 : MEMPERCANTIK HALAMAN WEBSITE DENGAN BOOTSTRAP Peserta : Siswa - siswi SMK

Tim Dosen :

1. Dr. Trini Saptariani, S.Kom., M.M.S.I 2. Dr. Ir. Anita Wasutiningsih, M.M 3. Dr. Budi Utami Fahnun, S.Kom., M.M 4. Ertie Nur Hartiwati, S.Kom., M.M.S.I 5. Maria Y. Aryati Wahyuningrum, S.Si., M.M 6. Raden Andhika Prihestira Hartadi, S.T., M.M.S.I 7. Mita Lailasari, S.Kom., M.M.S.I

8. Widiastuti, S.Kom., M.M.S.I 9. Sindy Nova, S.Kom., M.M.S.I 10. Indra Adi Permana, S.T., M.M.S.I Silabus Materi 1 :

1. Konsep Dasar Aplikasi komputer

2. Pengenalan Konsep dasar Aplikasi berbasis Website 3. Alat – alat untuk membangun aplikasi website 4. Uraian konsep dasar dan arsitektur bootstrap

5. Cara-cara yang digunakan untuk membuat aplikasi berbasis website

6. Pembuatan aplikasi sederhana tampilan dengan konten image berbasis website dengan framework bootstrap

7. Latihan Tujuan Materi 1 :

1. Siswa dapat mengetahui dan memahami konsep dasar aplikasi komputer 2. Siswa dapat mengetahui dan memahami konsep dasar aplikasi berbasis website 3. Siswa dapat mengetahui dan memahami bagaimana membangun aplikasi berbasis

website

4. Siswa dapat mengetahui dan memahami konsep dasar Website

5. Siswa dapat mengetahui dan memahami framework pembangun website

6. Siswa dapat mengetahui dan memahami Bootsrap sebagai front end-framework 7. Siswa dapat mengetahui cara-cara pemrograman aplikasi berbasis website dengan

framework Bootstrap beserta perintah-perintahnya.

8. Siswa dapat mengetahui dan berkemampuan untuk membangun sebuah aplikasi sederhana berbasis website dengan bootstrap

(10)

8

Materi 2 : PENGENALAN DAN PERANCANGAN BASIS DATA MENGGUNAKAN MICROSOFT ACCESS

Peserta : Siswa - siswi SMK Tim Dosen :

1. Dr. Anacostia Kowanda, S.Kom., M.M.S.I 2. Dr. Astie Darmayantie, S.T., M.M.S.I., M.Sc 3. Dr. Anggraeni Ridwan, S.Kom., M.M.S.I 4. Dr. Onny Marleen, S.Kom., M.M.S.I 5. Dr. Yuti Dewita Arimbi, S.T., M.M.S.I 6. Nelly Sofi, SKom., M.M.S.I

7. Khairunnisa Raihani, S.Kom., M.M.S.I 8. Wiwied Widiyaningsih, S.Kom., M.M.S.I 9. Faramita Dwitama, S.T., M.M

10. Jennie Kusumaningrum, S.T., M.T Silabus Materi 2 :

1. Pengenalan Database dan Ms. Access 2. Pembuatan Tabel dan Operasi Tabel 3. Pembuatan query sederhana

4. Pembuatan relasi dan operasi menghubungkan (relasi) antar table 5. Membuat Form

6. Membuat Report 7. Latihan

1. Siswa dapat mengetahui dan memahami konsep dasar-dasar pengolahan data pada suatu aplikasi.

2. Siswa dapat mengetahui dan memahami konsep dasar pengolahan data menggunakan basis data

3. Siswa dapat mengetahui dan memahami konsep penggunaan konsep basis data dalam bentuk tabel untuk pembuatan aplikasi dengan Ms. Access

4. Siswa dapat memahami cara memasukkan data ke dalam tabel pada Ms. Access 5. Siswa dapat memahami cara membuat query sederhana pada Ms. Access 6. Siswa dapat memahami cara membuat relasi antar tabel pada Ms. Access 7. Siswa dapat memahami cara membuat form pada Ms. Access

8. Siswa dapat memahami cara membuat laporan pada Ms. Access

(11)

9

BIDANG : PSIKOLOGI

Materi : MENCIPTAKAN KETAHANAN DALAM MENUMBUHKAN MINAT BELAJAR PADA SISWA BELAJAR DARING

Peserta : Guru SMK Tim Dosen :

1. Dr. dr. Matrissya Hermita 2. Vonny Wijaya, S.Psi., M.Si 3. Mimi Wahyuni, S.Psi., M.Si

4. Christiana Wulandari, S.E., M.I.Kom 5. Maria Chrisnatalia, S.Psi., M.Si Silabus Materi :

1. Pengertian Resiliensi 2. Resiliensi Bersifat Dinamis

3. Perspektif Perkembangan Terhadap Resiliensi 4. Pengertian minat

5. Karakter dan Potensi Diri : - Percaya Diri

- Kreatif dan Inovatif

- Berorientasi tugas dan hasil Tujuan Materi :

1. Guru dapat memahami bagaimana pelaksanaan belajar secara Daring dengan siswa 2. Guru dapat memahami dan mengetahui konsep dasar pembelajaran Daring dengan

siswa

3. Guru dapat berperan secara optimal dalam pembelajaran Daring sengan siswa

4. Guru memahami dan menumbuhkan semangat ke pada siswa dalam pembelajaran Daring

5. Guru dan siswa sama-sama bekerjasama agar terciptanya pembelajaran Daring yang efektif.

&&&&&

(12)

10

Lampiran 1 : Foto Kegiatan

Materi 1: PENGENALAN K3 (KESELAMATAM DAN KESEHATAN KERJA) UMUM

BIDANG : SISTEM KOMPUTER, TEKNIK ELEKTRO, dan FISIKA Materi 2: PELATIHAN PEMBUATAN BUKU DIGITAL DENGAN MENGGUNAKAN SIGIL

(13)

11

Materi 1: KEWIRAUSAHAAN DAN DIGITAL MARKETING

Materi 2 : PPh 21 DAN PENGISIAN SPT ORANG PRIBADI

(14)

12

Materi 1 : MEMPERCANTIK HALAMAN WEBSITE DENGAN BOOTSTRAP

Materi 2 : PENGENALAN DAN PERANCANGAN BASIS DATA MENGGUNAKAN MICROSOFT ACCESS

(15)

13

Materi : MENCIPTAKAN KETAHANAN DALAM MENUMBUHKAN MINAT BELAJAR PADA SISWA BELAJAR DARING

(16)

14

Lampiran 2 : Surat Undangan

(17)

15

Lampiran 3 : Surat Keterangan/Ucapan Terimakasih

Materi 1: PENGENALAN K3 (KESELAMATAM DAN KESEHATAN KERJA) UMUM

(18)

16

Materi 2: PELATIHAN PEMBUATAN BUKU DIGITAL DENGAN MENGGUNAKAN SIGIL

(19)

17

Materi 1: KEWIRAUSAHAAN DAN DIGITAL MARKETING

(20)

18

Materi 2 : PPh 21 DAN PENGISIAN SPT ORANG PRIBADI

(21)

19

Materi 1 : MEMPERCANTIK HALAMAN WEBSITE DENGAN BOOTSTRAP

(22)

20

Materi 2 : PENGENALAN DAN PERANCANGAN BASIS DATA MENGGUNAKAN MICROSOFT ACCESS

(23)

21

Materi : MENCIPTAKAN KETAHANAN DALAM MENUMBUHKAN MINAT BELAJAR PADA SISWA BELAJAR DARING

(24)

22

Lampiran 4 : Jadwal Kegiatan

NO Kegiatan Pengabdian Kepada Masyarakat

Oktober 2020

November 2020

Desember 2020

Januari 2021

Februari 2021

1 Koordinasi dengan pihak terkait

2 Sosialisasi awal kegiatan Pengabdian Kepada Masyarakat

3 Analisis kebutuhan mitra

4 Pembuatan modul

5 Pelaksanaan Pendampingan

6 Sosialisasi dan pelaporan hasil pengabdian

(25)

(26)

Merancang Dan Mempercantik Tampilan Website MenggunakanBOOTSTRAP V4.1

1. Dr. Trini Saptariani SKom., MMSI 2. Dr. Ir. Anita Wasutiningsih

3. Ertie Nur Hartiwati SKom.,MMSI

4. Maria Y. Aryati Wahyuningrum, SSI., MM 5. Raden Andhika Prihestira ST., MMSI 6. Mita Lailasari SKom.,MMSI

7. Dr. Budi Utami Fahnun SKom.,MM 8. Widiastuti SKom.MMSI

9. Sindy Nova SKom., MMSI 10. Indra Adi Permana ST., MMSI

(27)

WEBSITE

Website adalah sebuah kumpulan halaman pada suatu domain di internet yang dibuat dengan tujuan tertentu dan saling

berhubungan serta dapat diakses secara luas melalui halaman depan (home page) dengan menggunakan browser.

3

(28)

4

Static

Web statis adalah web dimana penggunanya tidak dapat

mengubah website secara langsung melalui browser dan hanya dapat diubah melalui source code.

Dinamis

Web yang kontennya dapat

diperbaharui secara berkala dengan mudah melalui database atau tanpa merubah source code.

WEBSITE DIBAGI MENJADI 2 MODEL :

(29)

5

CONTOH

Website Static

Website Portofolio

Website Profil Perusahaan Website Prototype

Website tentang kesehatan Website pendidikan

Website Sosial Media Website Jual Beli

CONTOH

Website Dinamis

(30)

Komponen Pembangun Website

6

HTML

HTML merupakan kerangka dasar website

CSS

Merupakan bahasa styling untuk website

SERVER SIDE

Untuk website dinamis diperlukan bahasa pemrograman, salah

satu contohnya

seperti PHP.

(31)

7

HTML & CSS

❖ HTML (HyperText Markup Language) adalah sebuah jenis teks dokumen khusus yang digunakan oleh web browser untuk mempresentasikan teks dan gambar.

❖ Dokumen HTML sering disebut sebagai “halaman web”.

❖ CSS adalah kode-kode yang dipakai untuk mendesain sebuah laman HTML.

❖ Jika HTML diibaratkan sebagai seorang manusia, maka CSS adalah pakaian yang membuat penampilan menjadi semakin menarik.

❖ CSS akan membantu para web

designer untuk mengubah tampilan teks

(baik dari bentuk dan ukuran font maupun

warnanya), menambahkan gambar, hingga

mengubah latar belakang sebuah halaman

HTML.

(32)

BOOTSTRAP

❖ Bootstrap adalah framework open-source khusus front end yang awalnya dibuat oleh Mark Otto dan Jacob Thornton untuk mempermudah dan mempercepat pengembangan web di front end.

❖ Bootstrap memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai fungsi dan komponen, seperti navigasi, sistem grid, carousel gambar, dan tombol (button).

8

❖ Fungsi utama dari Bootstrap

adalah untuk membuat situs

yang responsif. Interface

website akan bekerja secara

optimal di semua ukuran

layar baik di layar

smartphone maupun layar

komputer/laptop.

(33)

BOOTSTRAP LANJUTAN

❖ Bootstrap adalah framework front-end gratis yang belakangan ini semakin populer di kalangan front-end developer.

❖ Selain mudah digunakan,

framework ini juga

mempersingkat pekerjaan developer sehingga tidak perlu menulis sintaks secara manual dan berulang kali.

❖ Framework ini juga fleksibel dan mendukung hampir

semua keperluan

pengembangan front-end website

❖ Fungsi Bootstrap tidak

terbatas pada tampilan

website yang menarik saja,

tapi juga memberikan fitur

responsif agar halaman

website bisa bekerja secara

optimal di semua ukuran layar

perangkat.

(34)

Keuntungan jika menggunakan bootstrap

❖ Penggunaan bootstrap sangat menghemat waktu pengerjaan.

❖ Tampilan yang cukup menarik dan modern

❖ Tampilan sudah bisa dikatakan mobile friendly karena sudah bisa responsive, karena bootstrap sudah mendukung segala jenis resolusi.

❖ Sangat ringan dan terstruktur

❖ Dan masih banyak lagi keuntungan

yng didapat jika sudah membuat

suatu website

(35)

3 File Utama Bootstrap

1. Bootstrap.css

Bootstrap.css adalah framework yang mengatur dan mengelola layout website

2. Bootstrap.js

File ini merupakan bagian inti dari Bootstrap. Di dalamnya terdapat file JavaScriptyang bertanggung jawab atas interaktivitas website

3. Glyphicons

Ikon berperan penting pada

front-end website

(36)

Fitur – Fitur Bootstrap

1. Template Starter

2. Navbar

3. Container

4. Button

5. Form

6. Jumbotron

7. Tables

(37)

Template Starter

Bootstrap menyediakan

template basic dasar coding untuk memulai membuat website dengan

menggunakan bootstrap.

(38)

Navbar

Navigasi bar template dari bootstrap yang sudah

disediakan template

defaultnya beserta variasi

modelnya.

(39)

Container

Bootstrap menyediakan

container yang digunakan

sebagai wadah dari suatu

konten yang akan dibuat.

(40)

Button

Bootstrap menyediakan Template button (tombol)

dengan berbagai macam warna

yang dapat kita pilih sesuai

kebutuhan.

(41)

Form

Bootstrap menyediakan

berbagai amcam template

form input yang dapat dipilih

sesuai kebutuhan.

(42)

Jumbotron

Jumbotron dapat digunakan

Untuk ditampilkan pada halaman

depan website yang berisikan

identitas umum suatu website.

(43)

Tables

Bootstrap menyediakan template Untuk tables dengan berbagai model yang dapat dengan mudah di copy dan disesuaikan

dengan kebutuhan.

(44)

Instalasi Bootstrap Dasar

1. Download folder praktik pada link :

2. Buka folder yang sudah didownload

(45)

3. Buka Visual Studio Code, kemudian buka folder yang sudah didownload. ( Ctrl + O )

(46)

4. Buat 3 folder html yaitu index.html , guru.html, index.html. caranya adalah dengan memilih

icon new file.

(47)

6. Kunjungi website bootstrap, kemudian copy starter template .

(48)

7. Paste Starter Template pada file index.html

(49)

Membuat Navigasi Bar

1. Kunjungi halaman website bootstrap, lalu ketikkan kata kunci “navbar” pada kolom pencarian.

2. Kemudian pilih model tampilan navigasi bar yang diinginkan.

3. Copy paste kedalam file index html

(50)

Listing Navigasi bar

Style.css

(51)

Tampilan Navigasi bar

(52)

Membuat Corousel

1. Kunjungi halaman website bootstrap, lalu ketikkan kata kunci “corousel” pada kolom pencarian.

2. Kemudian pilih model tampilan corousel yang diinginkan.

3. Copy paste kedalam file index html

(53)

Listing Corousel

(54)

Tampilan Corousel

(55)

Membuat Jumbotron

1. Kunjungi halaman website bootstrap, lalu ketikkan kata kunci “jumbotron” pada kolom pencarian.

2. Kemudian pilih model tampilan jumbotron yang diinginkan.

3. Copy paste kedalam file index html

(56)

Listing Jumbotron

Skrip tombol

Style.css

(57)

Hasil Jumbotron

(58)

Membuat Footer

1. Untuk membuat footer kita dapat menggunakan class footer yang sudah disediakan pada oleh bootstrap.

2. Berikut ini adalah cara penulisan skrip footer

Style.css

(59)

Hasil Halaman Index dan Footer

(60)

Membuat Halaman Guru

1. Halaman ini

menggunakan navbar dan footer yang sama.

2. Menampilkan informasi

guru dengan fitur card

dari boostrap.

(61)

1. Card yang ditampilkan dalam satu baris adalah 4 buah card.

2. Maka dalam bootstrap menggunakan aturan row dan kolom.

3. Total kolom adalah 12, maka untuk menampilkan 4 buah card, masing masing card akan menggunakan 3 buah kolom.

4. Buatlah codingan seperti dibawah ini untuk membuat kerangka kolom :

Bagian yang kosong ini akan diisi template card

dari bootstrap

(62)

5. Buka website bootstrap dan cari “Card”, kemudian copy paste ke bagian yang

kosong di halaman guru.html

(63)

Listing Halaman Guru

Isi semua kolom

Style.css

(64)

Hasil Halaman Guru

(65)

Membuat Halaman Fasilitas

Membuat halaman fasilitas sama dengan

membuat halaman guru, yang membedakan

hanyalah model tampilan card dan tidak

menggunakan baris dan kolom

(66)

Listing Halaman Fasilitas

Style.css

(67)

TERIMA KASIH

(68)