Image Load

Hello world,

Kali ini saya mencoba membuat website statis menggunakan Angular 9 dan Bootstrap 4 untuk desain websitenya. Untuk pembahan angular kali ini langsung masuk ke studi kasus karena contoh-contoh penggunaan angular sebagian sudah saya bahas sebelumnya yang menggunakan versi 7 yang sebagian besar sepertinya sama. Lalu kenapa harus bootstrap? Karena mudah dan yang memang biasa saya pakai.

Oke langsung saja masuk ke dalam contoh  kali ini. Sebelumnya (di sini) saya sudah buat projectnya dengan nama contohapp yang tinggal kita lanjutkan saja kali ini.

Menambahkan Bootstrap 4

Ada beberapa cara untuk menambahkan bootstrap pada project angular kita yaitu dengan menambahkan pada angular.json, CLI atau menambahkan pada index.html.

Menambahkan pada  index.html.

Langkah ini menurut saya paling simpel karena tidak perlu install apapun pada project kita. Kita tinggal ambil script dari bootstrap seperti di bawah ini ke dalam  index.html pada project kita.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Sehingga file index.html kita akan menjadi seperti berikut.

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Contohapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>
<app-root></app-root>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>

</html>

Pada tahap ini kita tinggal pasang-pasang saja komponen dari bootstrap 4.


Selamat mencoba :)