Bootstrap Cara Mudah Membuat Website Dengan Bootstrap

Dipublikasikan oleh admin pada

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.

Head HTML link bootstrap

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.

PHP
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>
 
PHP
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.

PHP
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

PHP
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">&times;</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
      ==================================================================================================================
      -->
PHP
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">&times;</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.

PHP
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>
bootstrap modal

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.

PHP
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">&times;</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.

PHP
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

Kategori: bootstrapconnectConnect to MYSQLlogin phpmembuat websitemodalmodal bootstrapmysqlphpphpmyadminregister phpUncategorizedwebsite
Tags:

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?

Balas

    admin · 28/01/2021 pada 9:49 am

    Siapp bang insyaallah lagi buat website sendiri nihh, terimaaksih yah bang masukannya

    Balas

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos Terkait

membuat website

Script Function

Triggers database
membuat website

Membuat Website Toko Online #1 Membuat database Relasi dan Triggers ( PHP Native )

StudyKuy – Membuat Website Toko Online #1 Membuat database Relasi dan Triggers ( PHP Native ). Haloo sobat study kuy mari kita ngoding lagi, nah di artikel ini studykuy akan membagi kan ilmu membuat website Read more…

Cara Mudah Membuat Card HTML
HTML

Cara Mudah Membuat Card HTML

Selamat malam, teman studykuy sudah lama tidak membagi ilmu tentang ngoding, pada arikel ini studykuy akan membagi ilmu cara mudah membuat card HTML membuat card html ini biasanya untuk membuat price list pada sebuah website ecommerce.