Print bookPrint book

Bootstrap

Site: Elearning Muhidin Saimin
Course: Web Development
Book: Bootstrap
Printed by: Guest user
Date: Tuesday, 17 September 2024, 3:38 AM

Table of contents

1. Dasar Bootstrap

Tutorial cara menggunakan bootstrap 5 dalam membuat website. Perlu di ketahui, sebuah situs memerlukan tampilan yang menarik, enak di setiap browser, mobile friendly dan seo friendly. Oleh karena itu, dalam pembuatan halaman harus menggunakan html, css dan js yang mendukung.

Penggunaan framework bootstrap 5 adalah sebuah pilihan, hal ini berlaku ketika tidak ingin lagi untuk memikirkan kesulitan yang berulang setiap saat. Bayangkan jika setiap projek web berulang membuat sebuah framework, oleh karena itu lebih baik jika menggunakan sebuah framework yang memberikan kemudahan membuat halaman.

Twitter Bootstrap Framework

Twitter Bootstrap adalah sebuah html, css, dan js framework yang di gunakan untuk membuat halaman situs internet. Sebuah framework yang sangat populer saat ini dan banyak di gunakan para web designer.

Pertama kali di buat oleh designer dan developer di Twitter pada pertengahan tahun 2010 oleh @mdo dan @fat. Dipublikasikan kepada khalayak umum pada 19 Agustus 2011 sampai dengan sekarang sebagai sebuah Open Source Framework.

Pada versi ke-3 telah menerapkan responsive secara standar dan lebih mengedepankan mobile first atau perangkat mobile terlebih dahulu. Setelah itu, dalam versi ke-4 terjadi perubahan dalam penggunaan SASS dan penggunaan Flexbox di CSS. Hal ini di maksudkan untuk mengarahkan komunitas web development menggunakan properti CSS terbaru, mengurangi ketergantungan, dan lebih menerapkan teknologi baru untuk browser modern saat ini.

Tutorial Bootstrap 5 Versi Terbaru

Twitter Bootstrap 5

Pada versi 5 yang masih dalam pengembangan, fokus dalam meningkatkan basis versi 4. Mengedepankan fitur dan komponen, menghilangkan suport untuk browser lama, tidak menggunakan jQuery, dan menerapkan teknologi CSS Custom Properties yang lebih maju.

Sampai saat tutorial ini di buat, versi terbaru sudah memasuki tahap ke v5.0.1. Dalam versi terbaru ini, jQuery bukan lagi sebagai depedensi yang masuk dalam kebutuhan wajib. Di versi sebelumnya, jQuery di gunakan sebagai kebutuhan wajib untuk menjalankan fungsi script.

Tutorial Bootstrap 5 dalam Website Sederhana

Tutorial ini berguna untuk web designer dan web developer, akan tetapi tidak menutup kemungkinan juga bagi anda yang sekedar ingin belajar membuat halaman web.

1. Menggunakan Editor Halaman

Pastikan memiliki editor halaman web yang bisa mengubah berkas html, css, dan js.

2. Instalasi Bootstrap 5

Menggunakan framework ini mengharuskan mengunduh terlebih dahulu bahan-bahan yang akan di gunakan. Unduh bisa langsung dengan mengunjungi halaman web https://getbootstrap.com.

Download Bootstrap 5

Anda di berikan kemudahan dalam download untuk bootstrap 5 dengan pilihan cara menggunakan yang telah di kompres atau tidak.

Compiled CSS & JS

Source Code

Berkas ini memerlukan perangkat untuk membangun halaman menggunakan NPM. Unduh dan instalasi terlebih dahulu Node.js sebelum menggunakan berkas download.

Bonus Contoh Halaman

Framework menyediakan juga berkas contoh untuk di download. Ekstrak berkas zip contoh halaman dan gunakan semestinya sebagai acuan pembuatan halaman.

Versi Online menggunakan CDN

Cascading Style Sheet

Bisa menggunakan CSS versi CDN dengan menyisipkan baris kode di bawah ini ke halaman html.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
Javascript

Untuk JS versi CDN, bisa di sisipkan baris kode di bawah ini dan tempatkan di bagian bawah halaman html. Penempatan javascript disarankan disimpan sebelum kode penutup </body>.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

Untuk versi Online menggunakan CDN, pastikan komputer terhubung dengan internet untuk melihat hasil halaman.

3. Menggunakan Contoh Halaman

Download terlebih dahulu berkas contoh halaman yang di inginkan. Setelah itu, simpan berkas yang akan buat dalam sebuah folder. Selanjutnya bisa melihat contoh konten dengan klik tombol di bawah ini.

Gunakan versi Compiled CSS & JS dan simpan pada folder vendor. Buat halaman index.html dengan kode html di bawah ini :

<!doctype html>
<html>
   <head>
    <!-- Meta tags diwajibkan -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Masukkan link CSS anda disini -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <title>Demo</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ReeZh Design</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto mb-2 mb-md-0">
        <li class="nav-item active">
          <a class="nav-link" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu" aria-labelledby="dropdown01">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<main class="container">

  <div class="starter-template text-center py-5 px-3">
    <h1>Bootstrap 5 Starter Template</h1>
    <p class="lead">Gunakan dokumen ini sebagai cara cepat untuk memulai proyek baru.<br> Dokumen ini adalah contoh Framework.</p>
  </div>

</main><!-- /.container -->
<footer>
  <div class="container text-center">
    <a href="https://reezhdesign.com" target="_blank" rel="noopener">ReeZh Design</a> - Jasa Pembuatan Website
  </div>
</footer>
     <!-- Masukkan script JS anda disini -->
     <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Simpan berkas index.html. Buka berkas atau file tersebut menggunakan browser internet favorit.

SELAMAT, anda telah membuat sebuah halaman Bootstrap 5.


2. Form Login

Pernah ga sih? Kalian membuat form login dengan bootstrap yang terbaru, yaitu bootstrap 5. Pasti pernah dong, nah. Jika kalian belum paham mengenai bootstrap 5, langsung saja ikuti tutorial diartikel ini, Cara Membuat Form Login Dengan Bootstrap 5. Tutorial ini ditujukan bagi seorang programmer yang belum paham mengenai bootstrap 5.

Bootstrap adalah sebuah library framework CSS yang telah dibuat khusus untuk membantu mengembangkan front end pada sebuah website. Namun, berjalannya waktu. Akhirnya boostrap 5 telah rilis, bootstrap 5 adalah versi terbaru yang sekarang. Perubahan pun juga ada pada bootstrap 5. Yaitu: Menghapus jQuery Dari Komponen Dan menggunakan Vanilla Javascriptm dan lain sebagainya.


Adapun bahan yang diperlukan, yaitu:

1. Text editor

2. Bootstrap 5

Berikut Ini Membuat Form Login Dengan Bootstrap 5

1. Buatlah sebuah file  dan beri nama file tersebut index.html, buatnya Di Text editor ya sob.

2. Langkah selanjutnya, kalian ketik kodingan dibawah ini, atau langsung mengcopy. Lalu pindahkan ke text editor kalian.



3. Setelah selesai memindahkan kodingan ke text editor kalian, langsung saja membuka file index.html tadi yang kalian buat, dan akan tampil sebuah halaman form login, yang dibuat dengan bootstrap 5.

Baiklah, sampai disini saja penjelasan saya, sampai berjumpa diartikel lanjutnya... semoga bermanfaat.


3. Template Web

Selain kita dapat membuat template web responsive menggunakan html dan css, kita juga bisa membuatnya melalui bootstrap. Buat kalian desainer web pasti sudah tidak asing lagi mengenai framework css ini.

Bootstrap merupakan kerangka kerja (framework) yang di khususkan untuk menangani terkait tampilan halaman web. Sejak di rilisnya versi ke 2 dan ke 3 tahun 2012-2013 bootstrap mengalami banyak pembarahuan dan sangat di minati oleh front end developer.

Penggunaannya yang sangat mudah membuat framework ini banyak di minati, apalagi untuk seorang full stack developer yang tidak begitu menguasai sepenuhnya masalah desain dan tampilan web, framework ini sangat membantu untuk membuat template website responsive dengan mudah dan cepat.

Template Web Responsive dengan Bootstrap

Pada kesempatan kali ini saya akan membagikan cara membuat tampilan web sederhana dengan tema blog menggunakan bootstrap.

Sebelum kita lanjutkan perlu kalian pahami terlebih dahulu sistem grid pada bootstrap.

Bootstrap membagi halaman grid menjadi 12 grid/kolom

Apabila kita ingin membuat dengan span1 maka kita perlu membuat sebanyak 12, atau jika kita ingin membuat dengan span2 maka kita membutuhkan 6 grid/kolom untuk memenuhi seluruh layar, begitu seterusnya.

Untuk penjelasan lebih jelasnya silakan baca pada artikel:

Apa saja yang perlu dipersiapkan?

Tentu saja kalian harus punya bootstrap nya terlebih dahulu, silakan kalian download di situs resminya.

Hingga artikel ini di publikasi bootstrap sudah berada di versi ke 4. Namun kalian juga masih bisa menggunakan versi sebelumnya (versi 3) karena masih sangat mempunih.

Untuk tutorial baca : cara menggunakan bootstrap 4

Setelah kalian unduh bootstrap, buat sebuah direktori baru lalu kemudian simpan hasil unduhan di folder tersebut.

Di dalam folder bootstrap terdapat 2 sub folder yaitu css dan js yang berisikan file-file css dan library javascript.

Buat juga folder gambar untuk menyimpan daftar gambar yang di perlukan pada template web responsive dengan bootstrap.

Membuat Halaman index.html

Selanjutnya buat sebuah file dengan nama index.html melalui teks editor :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Template Web Responsive dengan Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="index.html">
        <img src="gambar/logo.png" alt="logo" style="width:200px;">
    </a>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Pemrograman</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Database</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Framework</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Lainnya</a>
            </li>
        </ul>
    </div>
</nav>
<div class="jumbotron text-center">
    <h1>Belajar Programming Itu Mudah</h1>
    <p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="thumbnail">
                <a href="artikel.html"><img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre"></a>
                <div class="caption">
                    <h3>Belajar HTML & CSS</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p><a href="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="thumbnail">
                <a href="artikel.html"><img src="gambar/Programming.png" width="100%" alt="Cinque Terre"></a>
                <div class="caption">
                    <h3><a href="artikel.html" style="text-decoration:none;color: black;">Web Programming</a> </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p><a href="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="thumbnail">
                <a href="artikel.html"><img src="gambar/Python.png" width="100%" alt="Cinque Terre"></a>
                <div class="caption">
                    <h3>Belajar Python</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p><a href="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="thumbnail">
                <a href="artikel.html"><img src="gambar/Desain_UI_&_UX.png"  width="100%" alt="Cinque Terre"></a>
                <div class="caption">
                    <h3>Desain UI & UX</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p><a href="artikel.html" class="btn btn-light btn-block " role="button">Selengkapnya</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
    <p>Copyright 2020 kelasprogrammer.com</p>
</div>
</body>
</html>

Halaman index.html akan menjadi halaman utama saat web di jalankan di browser.

Tampilan nya akan seperti berikut:

contoh halaman web sederhana bootstrap

Kalian bisa modifikasi untuk logo dan daftar menu pada bagian header serta bagian konten juga bisa kalian sesuaikan dengan konten yang kalian miliki.

Saat jendela browser saya perkecil sesuai dengan ukuran layar smartphone maka tampilan layout akan menyesuaikan dengan kebutuhan layar perangkat.

membuat layout responsive dengan bootstrap

Membuat Halaman artikel.html

Selanjutnya buatlah sebuah file baru dengan nama artikel.html.

Halaman ini berfungsi untuk menampilkan detail isi artikel dari konten website kalian.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Artikel - Template Web Responsive dengan Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="index.html">
        <img src="gambar/logo.png" alt="logo" style="width:200px;">
    </a>

    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Pemrograman</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Database</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Framework</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Lainnya</a>
            </li>
        </ul>
    </div>
</nav>
<div class="jumbotron text-center">
    <h1>Belajar HTML & CSS</h1>
    <p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="thumbnail">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Pemrograman</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Belajar HTML & CSS</li>
                    </ol>
                </nav>
                <img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre">
                <div class="caption">

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <hr>
                </div>
                <div class="comment">
                    <label><h2>Leave a coment</h2></label>
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" class="form-control" id="usr">
                    </div>
                    <div class="form-group">
                        <label>Email:</label>
                        <input type="email" class="form-control" id="pwd">
                    </div>
                    <div class="form-group">
                        <label for="comment">Comment:</label>
                        <textarea class="form-control" rows="5" id="comment"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-info" value="Kirim Komentar">
                    </div>

                </div>

            </div>
        </div>
        <div class="col-sm-4">
            <div class="row">
                <div class="col-sm-12">
                    <div class="caption">
                        <h4>Web Programming</h4>
                        <div class="row">
                            <div class="col-xl-3">
                                <img src="gambar/Programming.png" width="100%" alt="Cinque Terre">
                            </div>
                            <div class="col-sm-9">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisgna aliqua. adipisgna aliqua</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="caption">
                        <h4>Belajar HTML & CSS</h4>
                        <div class="row">
                            <div class="col-xl-3">
                                <img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre">
                            </div>
                            <div class="col-sm-9">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisgna aliqua. adipisgna aliqua</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="caption">
                        <h4>Desain UI & UX</h4>
                        <div class="row">
                            <div class="col-xl-3">
                                <img src="gambar/Desain_UI_&_UX.png" width="100%" alt="Cinque Terre">
                            </div>
                            <div class="col-sm-9">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisgna aliqua. adipisgna aliqua</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="caption">
                        <h4>Belajar Python</h4>
                        <div class="row">
                            <div class="col-xl-3">
                                <img src="gambar/Python.png" width="100%"alt="Cinque Terre">
                            </div>
                            <div class="col-sm-9">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisgna aliqua. adipisgna aliqua</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <img src="gambar/iklan.png" width="100%"alt="Cinque Terre">
                </div>
            </div>

        </div>
        </div>
    </div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
    <p>Copyright 2020 kelasprogrammer.com</p>
</div>
</body>
</html>

Hasil tampilan nya seperti gambar berikut:

Contoh tampilan web blog dengan bootstrap

Saya membuat template web blog responsive dengan bootstrap ini hanya sebagai contoh buat teman-teman boleh belajar dan menjadi acuan referensi untuk kalian kembangkan sesuai dengan project web yang ingin kalian buat.

Saya menyadari masih banyak kekurangan dari tampilan web yang saya buat ini. Semoga kalian bisa mengembangkannya lebih bagus lagi.

Download Source Code

Silahkan buat kalian yang ingin langsung memiliki source code nya kalian bisa download di bawah ini:

[sociallocker id=”5349″] [/sociallocker]

Artikel Terkait