Scribd Logo
Unggah

Selamat datang di Scribd!

  • TWITTER BOOTSTRAP DALAM PRAKTIKUM

    Diunggah oleh

    M Hamzah SKom MKom
    6 tayangan11 halaman

    Judul Asli

    Untitled

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    6 tayangan11 halaman

    TWITTER BOOTSTRAP DALAM PRAKTIKUM

    Diunggah oleh

    M Hamzah SKom MKom

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 11

    PRAKTIKUM PEMROGRAMAN WEB

    MODUL 7
    TWITTER BOOTSTRAP

    Disusun oleh:
    (Nama)
    (NIM)

    PROGRAM STUDI TEKNIK INFORMATIKA


    FAKULTAS TEKNIK
    UNIVERSITAS MUHAMMADIYAH JEMBER
    2015
    Modul 7
    Twitter Bootstrap

    I. Tujuan:
    1. Mengenalkan tentang Twitter Bootstrap
    2. Memahami penggunaan Twitter Bootstrap sebagai framework CSS
    3. Mengetahui cara menerapkan Twitter Bootstrap untuk template website
    4. Mengetahui cara membuat desain layout dengan Twitter Bootstrap

    II. Dasar Teori


    1. DEFINISI TWITTER BOOTSTRAP
    Twitter Bootstrap merupakan sebuah framework CSS dari twitter yang menyediakan
    berbagai macam komponen antarmuka web untuk digunakan bersama-sama. Selain
    komponen antarmuka, bootstrap juga menyediakan layout halaman dengan mudah dan
    rapi. Twitter bootstrap ini menerapkan konsep responsive template sehingga layout dapat
    menyesuaikan dengan lebar dari media yang mengaksesnya.
    III. Tools yang digunakan:
    1) Notepad++ / Sublime Text / Aptana Studio / Netbeans / Eclipse / dan lain-lain
    2) Web Browser (Mozilla Firefox / Google Chrome / Opera / dan lain-lain)
    3) XAMPP (sebagai paket tools untuk menjalankan program berbasis PHP)

    IV. Latihan Praktikum


    Aturan Praktikum:
     Sebelum melakukan praktikum dibawah ini, buatlah sebuah folder kerja dengan
    nama praktikum7 didalam folder htdocs.
     Ikuti format penamaan file pada praktikum ini.
     Pastikan bahwa service dari Apache dan MySQL sudah dalam status running.
     Harap ditanyakan kepada asisten praktikum atau dosen pengampu jika mengalami
    kesulitan.
     Setiap selesai melaksanakan latihan, diharuskan dijalankan melalui browser untuk
    memastikan bahwa latihan kita sukses.
     Bagi yang menggunakan komputer laboratorium, DIHARUSKAN MENGHAPUS
    folder praktikum7 di htdocs setelah selesai melaksanakan praktikum ini.

    1) Menyiapkan Twitter Bootstrap


    Silahkan ekstrak file bootstrap.zip pada direktori kerja praktikum7. Hasil ekstraksi
    terdapat 3 folder: css, js, img.

    Maka akan didapatkan struktur file seperti berikut:


    2) Mengakses Twitter Bootstrap
    Untuk dapat mengakses twitter bootstrap, maka perlu dipanggil dengan sintaks berikut
    diantara tag <head> dan </head>:

    Buatlah file dengan nama latihan2.php yang diletakkan pada direktori utama dari
    praktikum7, kemudian isikan dengan syntax berikut:

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

    Layout 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
    responsif.

    Modifikasilah 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:
    Bagaimana membuat sebuah grid kolomnya? Buatlah sebuah class .row kemudian
    tambahkan didalamnya class baru dengan nama .span* (tanda bintang adalah nilai angka
    mulai dari 1 sampai 12). Semakin besar nilainya, semakin panjang kolomnya.

    latihan4.php

    Silahkan dimodifikasi nilai dari span4 dan span8 sesuka anda untuk dapat mengetahui
    perbedaannya.

    5) Basic Boostrap: Text


    Buatlah file bernama latihan5.php
    6) Basic Bootstrap: Table
    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 latihan6.php kemudian isikan dengan kode berikut:

    Pada contoh kode diatas menggunakan fungsi tambahan yaitu .table-striped, cobalah
    diganti dengan menggunakan class-class tambahan yang lain.
    Modifikasilah dengan memanfaatkan fungsi dari table row sehingga code dari table
    adalah sebagai berikut:

    Kemudian lihatlah perubahannya!

    7) Basic Bootstrap: Form


    Buatlah file latihan5.php. Basic class form pada twitter bootstrap adalah sebagai berikut:
    Selain hal diatas, terdapat opsional form:
    .form-search

    .form-inline

    .form-horizontal

    Cobalah modifikasi dengan menggunakan class diatas!!


    V. Tugas Praktikum
    Buatlah laporan praktikum modul ini dengan disertai SCREENSHOT dan PENJELASAN
    dari setiap langkah yang telah dikerjakan pada latihan diatas.

    Laporan dikumpulkan kepada Asisten Praktikum pada pertemuan yang akan datang dalam
    bentuk hardcopy.

    VI. Kesimpulan
    Dari praktikum diatas, jawab pertanyaan berikut dalam bentuk kesimpulan:
    1. Apa yang anda ketahui tentang Twitter Bootstrap?
    2. Apakah anda sudah memahami cara penggunaan Twitter Bootstrap pada halaman web?

    Anda mungkin juga menyukai