Scribd
Unggah
26 tayangan34 halaman

Minggu 4 - Bootstrap Framework

Diunggah oleh

Adoras Malvy Adoras
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
26 tayangan34 halaman

Minggu 4 - Bootstrap Framework

Diunggah oleh

Adoras Malvy Adoras
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 34

17 May 2024

Matkul: SIG Berbasis Web

Bootstrap: HTML, CSS dan JS


Dany Laksono | Dept. Teknik Geodesi UGM
Today: Bootstrap; HTML, CSS dan JS

• Komponen web: HTML, CSS dan JS

• Client-side Scripting dengan Javascript

• Mengenal Bootstrap Framework

• Praktek: membangun antarmuka web dengan Bootstrap


HTML, CSS dan JS
Bootstrap, HTML, CSS dan JS
Komponen Halaman Web

Komponen dasar halaman web 2.0


Komponen Halaman Web

<div id=“kucing>

HTML is the Object


Komponen Halaman Web

<style>
#kucing {
warnaBulu: hitam;
panjangEkor: 4cm}
CSS define its Properties </style>
Komponen Halaman Web

Kucing.bobo(“no”);
(membangunkan kucing yg bobo)

Kucing.tambahEkor(“200cm”);
(panjang ekor kucing ditambah 2
meter)
JS define its Action or Method
Anatomi Elemen HTML
Komponen Halaman Web
Menerapkan Style pada HTML dengan CSS Selector

Dengan CSS Selector kita


dapat memilih elemen
HTML yang diinginkan,
kemudian menerapkan
aturan CSS tertentu

Contoh:
‘Jadikan semua Heading
1 berwarna biru’
Komponen Halaman Web
Menerapkan Style pada HTML dengan CSS Selector

Element selector ID selector Class selector

#para1 {
p { .center {
text-align: center;
text-align: center; text-align: center;
color: red;
color: red; color: red;
}
} }

Selective selector Grouping selector


p .center {
h1, h2, p {
text-align: center;
text-align: center;
color: red;
color: red;
}
}
Komponen Halaman Web
Javascript Client-side Scripting
Komponen Halaman Web
Javascript Client-side Scripting

Object Properties Methods

car.name = Fiat car.start()

car.model = 500 car.drive()

car.weight = 850kg car.brake()

car.color = white

Javascript: Pemrograman web berbasis object


Komponen Halaman Web

HTML+CSS = Styling webpage


HTML

<p class='biru'> Ini tulisan warna biru </p>

CSS

.biru {
color:blue
} Ini tulisan warna biru
Komponen Halaman Web
HTML dan CSS: HTML+CSS+JS = Interactive Styling
<html>
<body>
<h1 id=“teks” style=“color:blue”> Text ini aslinya warna biru </h1>
…
</body>
</html>
Text ini aslinya warna
biru
Javascript (isikan pada titik-titik di atas):
<script>
document.getElementById("teks").style.color="red";
</script>
Komponen Halaman Web
AJAX dan Manipulasi DOM

• DOM (Document Object Model)


adalah susunan hirarkis dari elemen-
elemen HTML pada suatu halaman
Web
• Tiap halaman tersusun dari elemen
HTML yang berbeda, sehingga
memiliki struktur DOM yang berbeda
pula
• Konsep DOM: elemen HTML = objek
Komponen Halaman Web
AJAX dan Manipulasi DOM See you again

• Selector adalah cara yang digunakan dalam CSS untuk


memilih elemen mana yang akan dirubah stylenya
• Dengan memanfaatkan selector dan Javascript, dapat
dibuat sebuah halaman yg interaktif, responsif dan
dinamis.
• Metode ini disebut dengan Manipulasi DOM
(Document Object Model)
• Contoh manipulasi DOM:
getElementsByTagName("p");
P.S.: Not this DOM!
Cek: https://www.w3schools.com/js/js_htmldom_elements.asp
Komponen Halaman Web
AJAX dan Manipulasi DOM See you again

Tabel Selector DOM

Contoh
const demoQuery = document.querySelector('#demo-query’);
const demoQueryAll = document.querySelectorAll('.demo-query-all'); P.S.: Not this DOM!
Komponen Halaman Web
AJAX dan Manipulasi DOM Manipulasi DOM dapat dilakukan dengan data
yang akan terupdate secara dinamis (mis. dari
basisdata)

AJAX (Asynchronous Javascript and XML)


adalah metode yang dipakai untuk
mengupdate DOM tanpa merubah seluruh
halaman web

Cek: Not This AJAX


https://www.w3schools.com/xml/ajax_intro.asp
https://gabrieltanner.org/blog/javascript-dom-introduction
Komponen Halaman Web
AJAX dan Manipulasi DOM

Contoh AJAX: Google Search


Autocorrect

Only this part is updating


Komponen Halaman Web
AJAX dan Manipulasi DOM

Latihan DOM

Ketikkan script di samping menggunakan


text editor
Simpan sebagai HTML
Jalankan dengan browser

Jawablah:
• Elemen DOM apa yang diupdate oleh
JS?
• Perintah apa yang digunakan untuk
memanggil elemen tsb?
• Seandainya yang akan diupdate adalah
semua heading 1, bagaimana script
yang digunakan?
Bootstrap Framework
Bootstrap, HTML, CSS dan JS
Bootstrap Framework
Konsep Bootstrap

“Bikin web dari nol itu berat.


kau tidak akan kuat. Biar aku saja”
Bootstrap Framework
Konsep Bootstrap
• Bootstrap menyediakan komponen yang sudah
'dibungkus' untuk memudahkan pembangunan web
menggunakan HTML, CSS dan JS
• Web yang dibangun dengan Bootstrap bersifat
Responsive, artinya dapat dengan mudah menyesuaikan
ukuran pada browser desktop atau mobile
• Bootstrap terbaru: versi 4.5.2

<button type="button"> <button type="button"


Tombol class="btn btn-primary"> getbootstrap.com
</button> Tombol
</button> v.4.0
No Bootstrap With Bootstrap
Bootstrap Framework
Konsep Bootstrap
Bootstrap Responsive web page

di browser Mobile di browser dekstop


Bootstrap Framework
Cara Memanggil Bootstrap

1. Melalui BootstrapCDN (Content Delivery Network)


<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>

2. Mengunduh file CSS dan JS Bootstrap, kemudian memanggil file tsb pada halaman
HTML
(preferable)
https://github.com/twbs/bootstrap/releases/download/v4.0.0/bootstrap-4.0.0-dist.zip
Bootstrap Framework
Sistem Grid Bootstrap
Bootstrap membagi layar menjadi 12 kolom (col)

<div class="row">
<div class="col">col</div>
<div class="col">col</div> Definisi kolom cara otomatis
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
Definisi kolom cara manual (8 + 4 = 12)
</div>
Bootstrap Framework
Komponen Bootstrap

Semantic Button (default)

btn-outline

btn-lg / btn-sm

btn-block

https://getbootstrap.com/docs/4.0/components/buttons/
Bootstrap Framework
Komponen Bootstrap

<div class="card" style="width: 18rem;">


<img class="card-img-top" src="..." alt="Card
image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to
build on the card title and make up the bulk
of the card's content.</p>
<a href="#" class="btn btn-primary">Go
somewhere</a>
</div>
</div>

https://getbootstrap.com/docs/4.0/components/card
Bootstrap Framework
Komponen Bootstrap

<form>
<div class="form-group">
....
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>

https://getbootstrap.com/docs/4.0/components/forms
Bootstrap Framework

Pingendo Bootstrap
Builder
Bootstrap Framework
Userful Resources

1. Notepad++ (https://notepad-plus-plus.org/). Simple text editor


2. VSCode (https://code.visualstudio.com/). A more powerful text
editor for serious purposes
3. Bootsnipp (https://bootsnipp.com/). Collections of Bootstrap
templates with editor. Free
4. Bootswatch (http://bootswatch.com/). Bootstrap Theming (not yet
work with Bootstrap v4)
5. startbootstrap.com. Bootstrap starter templates
TERIMA KASIH

Anda mungkin juga menyukai