Cara Mudah Membuat Website dengan bootstrap menggunakan HTML dan CSS, penulisan kali ini mari kita membuat website
Dengan keinginan kita sendiri menggunakan CSS , HTML dan PHP.
Bagi yang baru belajar semoga dapat membantu untuk mengatasi problem yang kalian alami.
Membuat Folder baru.
Kita buatkan dahulu folder agar semua library dapat terkumpul menjadi satu dan kita bisa menggunakan agar tampilan website
kita menjadi lebih menarik.Lalu kita download bootstrap di https://getbootstrap.com/ atau kalian bisa menggunakan bootstrap online.
Index
Selanjutnya kita buat file dalam folder yaitu index.php atau html.
Lalu kalian buatkan pemanggilan untuk bootstrap kalian pada script kalian saya buatkan yang online dan offline.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Membuat Navbar dengan bootstrap</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" > <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" > <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.js"> </head> |
1 2 3 | <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script> |
Saat kalian rasa untuk headnya sudah cukup lalu kita beralih ke dalam tampilan Navbarnya,
jika kalian bingung kalian bisa copy di bootstrap atau kalian copy skrip di bawah.
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 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">StudyKuy</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <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 dropdown"> <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded=""> Action </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#" data-toggle="modal" data-target="#mylogin">Login</a> <a class="dropdown-item" href="#" data-toggle="modal" data-target="#mydaftar">Daftar</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About US</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> |
Nahh mudah kan kalian tinggal copas scriptnya dehh, untuk script diatas ada perintah modal untuk login dan daftar untuk menikmati apa yang kita sajikan dalam web kita,
karena kita menggunakan modal bootstrap maka kita buatkan form modalnya.
jika kalian bingung membuat modal kalian bisa baca blog sebelumnya.
Baca Juga : Cara Membuat Form Login PHP Dengan Mysqli Koneksi Database
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 | <!--Start Modal Login ================================================================================================================== --> <div class="example-modal"> <div id="mylogin" class="modal fade" role="dialog" style="display:none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Login</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <form action="" method="post" role="form"> <div class="form-group"> <div class="row"> <label class="col-sm-3 control-label text-right">User Name <span class="text-red">*</span></label> <div class="col-sm-8"><input type="text" class="form-control" name="nama_user" value="" placeholder="Masukkan User Name"></div> </div> </div> <div class="form-group"> <div class="row"> <label class="col-sm-3 control-label text-right">Password<span class="text-red">*</span></label> <div class="col-sm-8"><input type="password" class="form-control" name="pass" value="" placeholder="Masukkan Password"></div> </div> </div> <div class="modal-footer"> <button id="nosave" type="button" class="btn btn-danger pull-left" data-dismiss="modal">Batal</button> <input type="submit" name="submit" class="btn btn-primary" value="Login"> </div> </form> </div> </div> </div> </div> </div> <!--END Modal Login ================================================================================================================== --> |
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 | <!--Start Modal Daftar ================================================================================================================== --> <div class="example-modal"> <div id="mydaftar" class="modal fade" role="dialog" style="display:none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Daftar</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <form action="" method="post" role="form"> <div class="form-group"> <div class="row"> <label class="col-sm-4 control-label text-left">Nama Lengkap <span class="text-red">*</span></label> <div class="col-sm-8"><input type="text" class="form-control" name="nama_user" value="" placeholder="Masukkan User Name"></div> </div> </div> <div class="form-group"> <div class="row"> <label class="col-sm-4 control-label text-left">Nama User <span class="text-red">*</span></label> <div class="col-sm-8"><input type="text" class="form-control" name="nama_user" value="" placeholder="Masukkan User Name"></div> </div> </div> <div class="form-group"> <div class="row"> <label class="col-sm-4 control-label text-left">Password<span class="text-red">*</span></label> <div class="col-sm-8"><input type="password" class="form-control" name="pass" value="" placeholder="Masukkan Password"></div> </div> </div> <div class="modal-footer"> <button id="nosave" type="button" class="btn btn-danger pull-left" data-dismiss="modal">Batal</button> <input type="submit" name="submit" class="btn btn-primary" value="Login"> </div> </form> </div> </div> </div> </div> </div> <!--END Modal Daftar ================================================================================================================== --> |
Nah selesai untuk membuat navbar dengan menggunakan bootstrap dan modal bootstrap. Selanjutnya apa yang akan buat, selanjutnya saya akan membuat slide gambar atau carousel
agar pengunjung tau nih apa isi web kita atau apa yang kita sajikan di website kita dan
bisa juga apa saja promo yang kita berikan dalam website kita jika website kita itu web online shop.
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 | <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img\ampera.jpeg" class="d-block w-100" alt="..." height="500px"> <div class="carousel-caption d-none d-md-block"> <h5>Jembatan Ampera</h5> </div> </div> <div class="carousel-item"> <img src="img\danau-toba-lake-toba.jpg" class="d-block w-100" alt="..." height="500px"> <div class="carousel-caption d-none d-md-block"> <h5>Danau Toba</h5> </div> </div> <div class="carousel-item"> <img src="img\pantai-iboih.jpg" class="d-block w-100" alt="..." height="500px"> <div class="carousel-caption d-none d-md-block"> <h5>Pantai Ibioh</h5> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> |

Di atas merupakan tampilan dimana navbar dan bagian atas di website kita bagaimana menurut kalian menarik tidak hehe.
nah selanjutnya kita buatkan untuk tampilan di bawahnya lagi nih,
apa yang akan kita buat selanjutnya kita akan buatkan layout menjadi tiga.
Agar tampilan lebih menarik kita akan menampilkan informasi informasi yang bisa membuat pengunjung tertarik.
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 | <div class="menu-kiri"> <div class="kotak"> <h3>Pemesanan</h3> <p> Kami menyediakan Promo 70% paket liburan bersama keluarga untuk menikmati paket tersebut bisa lakukan login Jika anda pengguna baru silahkan lakukan reistrasi </p> </br> </div> </div> <div class="menu-tengah"> <div class="kotak"> <h3>Sejarah Perkembangan Teknologi</h3> <span class="tanggal-posting"> Diposting pada 11.04 WIB, 29 April 2019 </span> <img src="img\ampera.jpeg" alt="sejarah Palembang"> <p> Palembang zaman dulu tentu berbeda dengan zaman sekarang yang kini sedang dipermak cantik untuk kebutuhan Asian Games 2018. </p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contohModalScroll" align="center" >Selengkapnya</button> <div class="modal fade" id="contohModalScroll"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="contohModalScrollableTitle">SEJARAH Dari PALEMBANG</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Palembang zaman dulu tentu berbeda dengan zaman sekarang yang kini sedang dipermak cantik untuk kebutuhan Asian Games 2018. Dulu Palembang serba sederhana. Alat transportasi pun masih jadul. Perahu dan sepeda masih menjadi transportasi utama. Jembata Ampera yang berdiri di atas Sungai Musi ini terlihat sangat gagah. Pada masa itu, jembatan harus menggunakan pemberat dibagian tengah jembatan agar kapal besar bisa melewati jembatan ini, dan ketika kapal sudah lewati jembatan, pemberat akan diturunkan agar jalan jembatan bisa menyatu dan bisa dilewati </div> <div class="modal-footer"> <a href="https://phinemo.com/mengintip-wajah-palembang-zaman-dulu-yang-masih-sederhana/"> Baca Lebih Lengkap</a> </div> </div> </div> </div> </div> </div> <div class="menu-kanan"> <div class="kotak"> <h3>Jadwal Buka</h3> <h4 align="center">Jadwal Buka</h4> <center> <p>Senin-Minggu 08.00 WIB - 22.00 WIB</p> </center> </div> <div class="kotak"> <h3>Berita Terbaru</h3> <nav class="menu-artikel"> <ul> <li><a href="https://www.liputan6.com/bisnis/read/4064519/kehadiran-robot-tak-bakal-rebut-pekerjaan-manusia">Teknologi robot pintar</a></li> <li><a href="https://inixindojogja.co.id/negara-berteknologi-paling-maju-di-dunia/">Negara termaju saat ini</a></li> <li><a href="https://id.wikipedia.org/wiki/Sejarah_komputer">Sejarah pembuatan komputer</a></li> <li><a href="https://id.wikipedia.org/wiki/Bill_Gates">Kehidupat Bill Gates</a></li> </ul> </nav> </div> </div> <footer> <h4> <img src="img/logoSK.png" width="100px">Senang melayani kalian @copyright 2019 || by StudyKuy</h4> </footer> |
Nah script diatas merupakan tampila ketika si pengunjuk website belum melakukan login nah ketika pengunjung website
sudah melakukan login maka pengunjung akan di sajikan halaman yang lebih menarik lagi.
Baca juga : Dampak Covid Virus terhadap Negara-negara di Dunia
Dalam script diatas saya juga menambahkan CSS yang di buat sendiri tanpa menggunakan css dari bootstrap.
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 | <style media="screen"> footer { clear: both; background-color: #212529; color: white; padding: 5px; text-align: center; } .kotak { border: 1px solid gainsboro; padding: 8px; margin-bottom: 15px; } .kotak h3 { background-color: #212529; color: white; text-align: center; padding: 10px; margin-bottom: 13px; } .kotak img { display: block; width: 100%; margin-bottom: 10px; } .kotak p { text-align: center; margin-bottom: 10px; } .menu-kiri { width: 400px; margin-right: 20px; float: left; } .menu-tengah { width: 760px; margin-right: 20px; float: left; } .menu-tengah h3 { background: #212529; color: white; margin-bottom: 0; } .menu-tengah p{ text-align: left; } .menu-kanan { width: 300px; float: left; } .menu-kanan, .menu-kiri, .menu-tengah { margin-bottom: 15px; } </style> |
Begitulah untuk membuat website dengan mudah tanpa ribet dengan mencontoh dari bootstrap,
bagaimana apakah kalian cukup terbantu dengan adanya tutorial ini
2 Komentar
Jaya Purnama · 27/01/2021 pada 7:15 am
Mantap mas.. Keren blognya.. Saya juga kalo sekarang lagi belajar ngoding mas.. Keren sih kalo bisa buat web sendiri🙏
admin · 28/01/2021 pada 9:49 am
Siapp bang insyaallah lagi buat website sendiri nihh, terimaaksih yah bang masukannya