Scribd Logo
Upload

Welcome to Scribd!

  • Modul 4 - Bootstrap

    Uploaded by

    PintarNgoding
    17 views15 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views15 pages

    Modul 4 - Bootstrap

    Uploaded by

    PintarNgoding

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    MODUL PRAKTIKUM

    PEMROGRAM AN B E RB A SIS W EB

    BOOTSTRAP

    Disusun oleh:
    Rafika Sari Yaslan (1610651017)

    PROGRAM ST UDI TEKNIK INFOR MATIK A


    FAKULTAS TEKNIK
    UNIVER SITAS M UH AM MAD IYAH JEMBER
    2019
    Modul : Bootstrap

    I. Tujuan:
    1. M engenalkan tentang Bootstrap
    2. M emahami penggunaan Bootstrap sebagai framework CSS
    3. M engetahui cara menerapkan Bootstrap untuk template website
    4. M engetahui cara membuat desain layout dengan Bootstrap

    II. Dasar Teori


    1. DEFINISI BOOTSTRAP
    Bootstrap merupakan sebuah framework CSS yang menyediakan berbagai macam
    komponen antarmuka web untuk digunakan bersama-sama. Selain kom ponen
    antarmuka, bootstrap juga menyediakan layout halaman dengan mudah dan rapi.
    Twitter bootstrap ini menerapkan konsep responsive tem plate sehingga layout dapat
    menyesuaikan dengan lebar dari media yang mengaksesnya.

    III. Tools yang digunakan:


    1) Notepad++ / Sublim e Text / Aptana Studio / Netbeans / Eclipse / dan lain-lain
    2) Web Browser (M ozilla Firefox / Google Chrome / Opera / dan lain-lain)
    3) XAM PP (sebagai paket tools untuk menjalankan program berbasis P HP)
    IV. Latihan Praktikum

    Aturan Praktiku m:

     Sebelum melakukan praktikum dibaw ah ini, buatlah sebuah folder kerja


    dengan nama praktikum4 didalam folder htdocs.
     Ikuti format penamaan file pada praktiku m ini.

     Pastikan bahw a service dari A pache dan MySQL sudah dalam status running.

     Harap ditanyakan kepada asisten praktikum atau dosen pengampu jika


    mengalami kesulitan.
     Setiap selesai melaksanakan latihan, diharuskan dijalan kan melalui brow ser
    untu k memastikan bahw a latihan kita su kses.
     Bagi yan g menggunakan komputer laboratorium, DIHARUSKAN
    M ENGHAPUS folder praktikum4 di htdocs setelah selesai melaksanakan
    praktikum ini.
    1) Menyiapkan Bootstrap

    Silahkan dow nload file bootstrap di Link berikut


    https://getbootstrap.com/docs/4.0/getting-started/dow nload/
    Kemudian ekstrak file tersebut pada direktori kerja praktiku m4. Hasil ekstraksi
    terdapat 2 folder: css, js
    Sehingga didapatkan direktori folder seperti ini :
    2) Mengakses Bootstrap
    Untuk dapat mengakses bootstrap, maka perlu dipanggil dengan sintaks berikut
    diantara tag <head> dan </head> :

    Buatlah file dengan nama latihan1.php yang dileta kkan pada direktori utama dari
    Praktiku m4, kemudian isikan dengan syntax berikut:

    3) Layout

    Fix layout bootstrap adalah dengan menggunakan class .container, sehingga format
    penulisannya:
    Buatlah latihan2.php, kemudian modifikasi sintaks dari latihan 1 sehingga dimasukkan
    didalam <div class=“container“> </div> . Berikut codenya lengkap:

    La yout 2 kolom :

    Untuk dapat membuat layout dalam 2 kolom: sidebar dan body content, maka format
    codenya adalah sebagai berikut:
    Class container-fluid dapat menjadikan sebuah halaman menjadi halaman yang
    responsive atau full selebar halaman browser .
    M odifikasilah latihan diatas sehingga pada bagian body menjadi seperti berikut:

    4) Grid System Bootstrap

    Standar grid pada bootstrap menggunakan 12 kolom. Dengan sistem grid inilah yang
    menjadikan sebuah halaman memiliki fitur responsif.
    Berikut ini adalah gambar dari panjang kolom tiap macam grid:

    Class .row berfungsi untuk m em buat baris pada brow ser kemudian tam bahkan
    didalamnya class baru dengan nama .col-* (tanda bintang adalah nilai angka mulai dari 1
    sampai 12). Semakin besar nilainya, semakin panjang kolom nya. Silahkan dimodifikasi
    nilai dari span4 dan span8 sesuka anda untuk dapat mengetahui perbedaannya.
    5) Basic Boostrap: Coloring
    Buatlah file bernama latihan3.php dengan source code berikut :

    Untuk pewarnaan Background gunakan class .bg-* (tanda bintang diganti dengan code
    warna sesuka hati seperti pada text). Contoh :

    6) Basic Bootstrap: T able


    Fungsi dasar tabel pada bootstrap dengan memanggil class .table pada tag <table>
    Selain fungsi dasar .table tersebut, bootstrap juga menyediakan beberapa fungsi tambahan
    yaitu:
    .table-striped .table-bordered

    .table-hover .table-condensed

    Buatlah file latihan 4.php kemudian isikan dengan kode berikut:

    Pada contoh kode diatas menggunakan fungsi tam bahan yaitu .table-stripe d, cobalah
    diganti dengan menggunakan class-class tam bahan yang lain. M odifikasilah dengan
    memanfaatkan fungsi dari table row sehingga code dari table adalah sebagai berikut:
    Kemudian lihatlah perubahannya!

    7) Basic Bootstrap: B u tton


    Kelas .btn dirancang untuk digunakan dengan tag <button>. Namun, Anda juga
    dapat menggunakan kelas ini pada tag <a> atau <input> (meskipun beberapa brow ser
    mungkin menerapkan rendering yang sedikit berbeda). Selain Buton biasa, boostrap juga
    menyediakan fungsi lain yaitu Outline Button
    Buatlah file latihan5.php. Basic class button pada bootstrap adalah sebagai berikut:
    Jalankan contoh kode diatas, terdapat perbedaan class pada baris ke 18 dan 1 9,
    kemudian perhatikan perbedaan hasilnya.

    8) Bootstrap: Navigation
    M embuat menu Navigasi menggunakan bootstrap tidaklah sulit. Hanya perlu menambah
    class-class yang sudah di sediakan oleh bootstrap. M enu navigasi bootstrap di buat dengan
    menggunakan tag <nav> dan letakkan di dalam tag <body> html paling atas.

    Buatlah file latihan5.php dan ketikan kode berikut:

    Coba jalankan kode tersebut dibrow ser. Kemudian, untuk menambahkan menu dalam menu
    atau biasa disebut Dropdown Menu, tambahkan code berikut pada salah satu itemnya

    <li class="nav-item dropdown">


    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
    role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here </a>
    <div class="dropdown -divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    </div>
    </li>
    Jalankan lagi code tersebut, dan perhatikan perubahannya!
    Untuk membuat tampilan navigasi semakin menarik, bootstrap memiliki fungsi lainnya
    yaitu N avigation Bar atau Navb ar. Tambahkan class .navb ar didalam tag <n av>, selain
    itu anda juga bisa menambahkan class expand-xl, expand-lg, expand-md, expand-sm (Class
    ini digunakan untuk mengatur menu navigasi agar tampil secara vertical ketika diakses
    dengan ukuran layar tertentu ) untuk pembahasan ukuran layar s ilahkan melihat di tutorial
    sebelumnya tentang grid system pada bootstrap. Lalu tambahkan kode berikut dalam
    latihan6.php :

    <nav class= "navbar navbar-expand-lg navbar- light bg- light">


    <a class= "navbar-brand" href="#" >Navbar</a>
    <button class="navbar- toggler" type= "button" data- toggle="collapse" data -
    target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
    expanded="false" aria-label="Toggle navigation" >
    <span class="navbar- toggler-icon"></span>
    </button>
    <div class="collapse navbar -collapse" id= "navbarNavDropdown">
    <ul class="navbar-nav">

    --- navigation item ---


    </div>
    </nav>

    Jalankan kode tersebut, kemudian lihat peruba hannya. M enarik bukan?

    9) Bootstrap – Form
    Form adalah elemen yang sangat penting yang ada dalam aplikasi berbasis web, dimana
    dengan form ini user dalam melakukan interaksi dengan aplikasi, seperti proses input edit
    dll. Bootstrap menyediakan class khusus lagi untuk mendesign form dan pastinya terlihat
    menarik dan rapi. Untuk mendapatkan hasil form yang menarik bootstrap telah membuat
    desing form menjadi 3 model, yaitu :
     Form vertikal
    Form default dari bootstrap
     Form inline
    Form yang label dan inputan nya terletak sebaris
     Form horizontal
    Form yang posisi label dan inputnya terletak horizontal
    Untuk membuat form dengan bootstrap, gunakan class “form-grup” pada tag <div>
    sebelum tag <input>, <textarea>,<select> dan elemen form lainnya.

    Buatlah file latihan7.php dengan source code berikut :

    Kemudian jalankan source code tersebut dibrowser.

    Bootstrap juga menyediakan class yang bisa digunakan untuk bagian checkbox . Untuk
    membuat checkbox yang ditampilkan secara vertical anda perlu membuat tag <div> dengan
    class .form-check, atau class .form-check-label untuk checkbox horizontal. Berikutnya buat
    tag <checkbox> dan tambahkan class form-check-input seperti code berikut :
    Terapkan source code diatas pada latihan7.php
    Bootstrap juga menyediakan class untuk m embuat radio Buton, dengan source
    code berikut :

    Terapkan source code diatas pada latihan7.php


    Bootstrap juga menyediakan class yang bisa digunakan untuk bagian select menu. Untuk
    membuat select menu anda perlu membuat tag <select> tambahkan class form-control.
    Seperti contoh source code berikut :

    Terapkan source code diatas pada latihan7.php, kemudian lihat hasilnya.


    Latihan Praktikum Modul : Bootstrap

    Dengan menerapkan Framework CSS Bootstrap 4.0, buatlah :


    1. Halaman Login
    2. Navbar M enu
    3. Sidebar M enu
    4. Form pendaftaran
    5. Tabel Data M ahasiswa

    Hardcopy laporan praktikum :


     Screenshot source code + keterangan,
     Screenshot hasil

    Batas pengumpulan tugas praktikum akan disampaikan oleh asisten praktikum .

    SELAM AT M ENGER JAKA N!!!

    You might also like