Tutorial Belajar Bootstrap 4 Part 24 – Membuat Tampilan Web dengan Bootstrap
Selamat datang lagi dalam tutorial warungbelajar, masih dalam seri tutorial bootstrap 4, di tutorial part ke 24 ini yang juga merupakan part terakhir tutorial bootstrap 4, kita akan membahas cara membuat tampilan web dengan bootstrap.
Sebenarnya pada website resmi dari bootstrap telah menyediakan beberapa contoh yang bisa kita gunakan atau kita modifikasi untuk tampilan website anda, silahkan anda bisa mengakses dokumentasi resmi bootstrap https://getbootstrap.com/docs/4.0/examples/
nah dalam tutorial kita kita akan belajar untuk memodifikasi salah satu contoh yang terdapat pada website bootstrap, serta memahami bagian – bagian code yang ditulis.
Cara membuat tampilan web dengan bootstrap
sebagai tahap awal kita perlu mempersiapkan terlebih dahulu bahan untuk tampilan webnya, disini kita gunakan file library bootstrap secara offline ya seperti file JS ataupun file CSS.
untuk struktur dari data yang ada pada folder belajarnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
\---template_bootstrap | index.html | +---assets | +---img | | CSS.png | | html.png | | img-1.jpg | | img-2.jpg | | img-3.jpg | | Javascript.png | | JQUERY.png | | logo_warungbelajar.png | | MYSQL.png | | PHP.png | | | \---js | jquery.min.js | popper.min.js | \---bootstrap +---css | bootstrap-grid.css | bootstrap-grid.css.map | bootstrap-grid.min.css | bootstrap-grid.min.css.map | bootstrap-reboot.css | bootstrap-reboot.css.map | bootstrap-reboot.min.css | bootstrap-reboot.min.css.map | bootstrap.css | bootstrap.css.map | bootstrap.min.css | bootstrap.min.css.map | \---js bootstrap.bundle.js bootstrap.bundle.js.map bootstrap.bundle.min.js bootstrap.bundle.min.js.map bootstrap.js bootstrap.js.map bootstrap.min.js bootstrap.min.js.map |
Keterangan :
- Untuk folder bootstrap adalah hasil extract dari file bootstrap dari website resmi bootstrap https://getbootstrap.com/docs/4.0/getting-started/download/
- untuk folder assets kita gunakan untuk menyimpan data dari image dan file js tambahan
- untuk file jquery.min.js anda bisa anda download di https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
- untuk file popper.min.js anda bisa download di https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
Tenang nanti diakhir tutorial kita akan sertakan file hasil belajarnya untuk bahan belajar, nah kita asumsikan anda sudah menyiapkan file – filenya, lalu kita buka file index.html, isi dari skripnya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../../../favicon.ico"> <title>Carousel Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/popper.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <style> /* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; } .post { margin-bottom:50px; margin-top:50px; text-align: center; } </style> </head> <body> <header> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#"> <img src="assets/img/logo_warungbelajar.png" alt="logo" style="width:40px;"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Profil</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Kursus </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">PHP</a> <a class="dropdown-item" href="#">MYSQL</a> <a class="dropdown-item" href="#">JAVASCRIPT</a> <a class="dropdown-item" href="#">JQUERY</a> </div> </li> </ul> </div> </nav> </header> <main role="main"> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="assets/img/img-1.jpg" alt="Gambar - 1" width="1280" height="700"> <div class="carousel-caption"> <h3>Slide 1</h3> <p>Deskripsi Slide 1</p> </div> </div> <div class="carousel-item"> <img src="assets/img/img-2.jpg" alt="Gambar - 2" width="1280" height="700"> <div class="carousel-caption"> <h3>Slide 2</h3> <p>Deskripsi Slide 2</p> </div> </div> <div class="carousel-item"> <img src="assets/img/img-3.jpg" alt="Gambar - 3" width="1280" height="700"> <div class="carousel-caption"> <h3>Slide 3</h3> <p>Deskripsi Slide 3</p> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <div class="container post"> <div class="row"> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="assets/img/html.png" alt="Card image cap"> <div class="card-body"> <p class="card-text">Belajar HTML di Warung Belajar</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Tampil</button> </div> <small class="text-muted">30 Part</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="assets/img/CSS.png" alt="Card image cap"> <div class="card-body"> <p class="card-text">Belajar CSS di Warung Belajar</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Tampil</button> </div> <small class="text-muted">30 Part</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="assets/img/PHP.png" alt="Card image cap"> <div class="card-body"> <p class="card-text">Belajar PHP di Warung Belajar</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Tampil</button> </div> <small class="text-muted">30 Part</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="assets/img/MYSQL.png" alt="Card image cap"> <div class="card-body"> <p class="card-text">Belajar MYSQL di Warung Belajar</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Tampil</button> </div> <small class="text-muted">30 Part</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="assets/img/JAVASCRIPT.png" alt="Card image cap"> <div class="card-body"> <p class="card-text">Belajar Javascript di Warung Belajar</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Tampil</button> </div> <small class="text-muted">30 Part</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="assets/img/JQUERY.png" alt="Card image cap"> <div class="card-body"> <p class="card-text">Belajar Jquery di Warung Belajar</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Tampil</button> </div> <small class="text-muted">30 Part</small> </div> </div> </div> </div> </div> </div> </main> <!-- FOOTER --> <footer class="container"> <p style="text-align: center;">© 2017-2018 Warung Belajar </p> </footer> </body> </html> |
Ketika kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- Perhatikan pada line 35 – 68, skrip yang ditulis di antara tag <header> </header> ditampilkan sebagai header dari tampilan web, disana dituliskan menu navigasi baik dalam bentuk logo, dan menu dropdown, jika anda belum mengetahui mengenai cara membuat menu navigasi silahkan buka tutorial warung belajar sebelumnya mengenai membuat menu navigasi dengan bootstrap
- Perhatikan pada line 70 – 207, skrip yang ditulis diantara tag <main> </main> akan ditampilkan pada bagian content utama web, tepatnya berada dibawah header
- Perhatikan pada line 72 – 113, skrip yang ditulis digunakan untuk menampilkan carousel, anda bisa memodifikasi skrip yang ditulis, jika anda belum mengetahui apa itu carousel bisa membaca tutorial kami sebelumnya cara membuat carousel dengan bootstrap
- Perhatikan pada line 115 – 206, skrip yang ditulis untuk menampilkan content web setelah carousel, pada setiap bagian kotak kita buat dengan tag <div> dan menambahkan class col-md-4, angka 4 disini yang membuat dalam satu baris akan ditampilkan 3 bagian kotak, jika ada belum mengetahui mengenai grid system bisa membaca tutorial kami sebelumnya mengenal grid system bootstrap
- Perhatikan pada line 214 – 216, skrip yang ditulis diantara tag <footer> </footer> digunakan untuk membuat footer dari tampilan web
Membuat Tampilan website lainnya
Nah gimana mudah kan ? jika anda ingin membuat tampilan website lainnya, anda bisa menggunakan contoh yang diberikan bootstrap, silahkan masuk ke dokumentasi resmi bootstrap https://getbootstrap.com/docs/4.0/examples/
disana disediakan beberapa tampilan yang bisa anda modifikasi, semisal anda pilih salah satu, semisal kita pilih tampilan Album, silahkan langsung di klik saja, maka akan tampil halaman yang anda pilih.
nah berikutnya silahkan klik kanan –> Lihat Sumber Halaman atau bisa menekan Ctrl + U di Keyboard untuk menampilkan source code dari tampilan tersebut.
nah source code inilah yang bisa anda copy paste ke text editor, dan silahkan ganti posisi dari library Bootstrap untuk Js dan CSS, serta gambar gambar yang anda ingin rubah.
Mencari Template Bootstrap
Alternative lain jika anda ingin membuat tampilan website dengan bootstrap adalah dengan download theme yang sudah jadi, di luar sana banyak sekali web yang membagikan theme bootstrap secara Free, selain free banyak juga yang menjual theme Bootstrap, nah kali ini warung belajar akan membahas web – web yang memberikan theme bootstrap yang free
Silahkan buka google lalu ketikkan keyword “Free Bootstrap Theme”
banyak kan, dan itu semua free lho, anda gak perlu membuat tampilan webnya dari awal, cukup download dan modifikasi.
semisal kita ambil salah satu contoh web startbootstrap.com, web ini menyediakan theme bootstrap yang bisa download secara free.
Anda tinggal pilih dan download theme yang ada inginkan
Semisal anda ingin download theme Creative, silahkan Klik pada tombol “Preview & Download”
maka akan ditampilkan detail dari tampilan theme, silahkan klik tombol download untuk mendownload dari theme tersebut.
silahkan simpan ditempat yang anda inginkan, dan nanti hasilnya downloadnya silahkan di extract menggunakan winzip atau winrar.
hasilnya nanti akan membuat folder dengan nama yang sama dengan file zip hasil download theme
silahkan masuk ke folder tersebut, maka anda akan menemui file index.html, nah file ini bisa anda buka di text editor seperti sublime atau notepad++ dan bisa anda modifikasi sesuai keinginan anda
jika file ini dibuka di browser maka hasilnya akan menampilkan theme yang seperti anda pilih di web startbootstrap.com
bagaimana mudah kan teman – teman, anda bisa menggunakan contoh yang ada di dokumentasi resmi bootstrap, ataupun bisa download di website lain yang menyediakan theme bootstrap yang bisa digunakan secara free, tinggal search aja di google dengan keyword “Free Bootstrap Theme”, untuk file hasil belajar silahkan bisa di download disini
Baik sekian dulu teman – teman pembahasan mengenai cara membuat tampilan web dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial – tutorial berikutnya.
tutorial sangat bagus, tetap share ilmu2 dan tutorial2 bermanfaat yaa gan. tahanks tutntunan bootstrap nya
Mantap sekali teman. Trima kasih dan selamat dan sukses selalu