Bootstrap: Pemrograman Tampilan Web Menggunakan Bootstrap

**stevennathaniel** · 08-15-2015, 09:12 AM

Catatan:

Ini threadnya bersambung terus ya. jadi isinya gue coba update terus terusan, yg penting ada sedikit langsung di share. jangan ragu & malu-malu untuk komen di thread ini. santai aja. biar rame threadnya

Kemungkinan juga nggak bahas soal Bootstrap aja, tapi juga bahas soal PHP, MySQL, Apache HTTP. digabung disini aja, biar komplit isinya dan nggak kebanyakan thread. kalau banyak thread tapi malah nggak keurus nanti malah bikin bingung. mendingan fokus 1 thread aja.

Saya mau share tentang cara membuat tampilan aplikasi web menggunakan Bootstrap. ini adalah halaman resmi dari Bootstrap:

http://getbootstrap.com/

untuk tutorialnya, salah satunya bisa didapat disini:

http://www.w3schools.com/bootstrap/

untuk mempraktekan pemrograman Bootstrap ini kita perlu menginstal :

Apache HTTP server
PHP
MySQL
konektor PHP MySQL

walaupun nggak semuanya dipakai untuk Bootstrap, tapi itu komponen-komponen dasar yg gue pakai untuk membuat pemrograman web. XAMPP juga bisa dipergunakan.

Dan untuk komponen intinya installah ini:

Bootstrap

JQuery

Bootstrap maupun JQuery tanpa di instal pun bisa, asalkan ketika menjalankan halaman web nya harus terkoneksi ke internet. masukan link ini ke dalam source code html nya:

Code:
!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Untuk text editornya bisa menggunakan Dreamweaver, SublimeText, Notepad++ atau GEdit. Pemrogramannya pun bisa dilakukan di Linux maupun Windows.

Untuk source code pertama yg sudah saya tulis ada disini:

Code:
<!DOCTYPE html>

<html lang="en">

<head>

    <title>Contoh Bootstrap</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://localhost/PHPDreamweaver/bootstrap-3.3.5-dist/css/bootstrap.min.css">

    <script src="http://localhost/PHPDreamweaver/jquery-1.11.3.min.js"></script>

    <script src="http://localhost/PHPDreamweaver/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

    <div class="jumbotron">

        <h1>Halaman Awal Bootstrap Milik Saya</h1>

        <p>Cobalah mengatur ulang ukuran halaman responsif ini untuk melihat efeknya</p>

    </div>

    <div class="row">

        <div class="col-sm-4">

            <h3>Kolom 1</h3>

            <p>Minum kopi di pagi hari sangat enak dengan di temani oleh roti goreng</p>

            <p>Setelah itu langsung berangkat ke kantor</p>

        </div>

    <div class="col-sm-4">

        <h3>Kolom 2</h3>

        <p>Menu makan siang yg paling enak adalah kepiting saos dari Dandito</p>

        <p>Minumnya jus buah naga</p>

    </div>

    <div class="col-sm-4">

        <h3>Kolom 3</h3>

        <p>Menu makan siang yg paling enak adalah kepiting saos dari Dandito</p>

        <p>Minumnya jus buah naga</p>

    </div>

    </div>

</div>

</body>

</html>

berikut ini tampilan halaman web dari codingan diatas:

[Image: 20572747812_c935c72dcf_b.jpg]

jadilah tampilan web nya. untuk mengonlinekannya saya bikin web server di Virtualbox , menggunakan OS CentOS. dan di konek kan ke internet menggunakan jaringan internet Telkom Speedy. dengan melakukan port forwarding di modem router nya.

Ini contoh tutorial yg kedua:

Sumber tutorial nya:

http://www.w3schools.com/bootstrap/tryit...&stacked=h

berikut ini source code nya:

Code:
<!doctype html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="./bootstrap-3.3.5-dist/css/bootstrap.min.css">

<script src="./jquery-1.11.3.min.js"></script>

<script src="./bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>h1 Bootstrap heading <small>(36px)</small></h1>

<h2>h2 Bootstrap heading <small>(30px)</small></h2>

<h3>h3 Bootstrap heading <small>(24px)</small></h3>

<h4>h4 Bootstrap Heading <small>(18px)</small></h4>

<h5>h5 Bootstrap Heading <small>(14px)</small></h5>

<h6>h6 Bootstrap heading<small>(12px)</small></h6>

</div>

</body>

</html>

Berikut ini screen shoot tampilan web nya:

[Image: 20399393439_c2ed23e324_b.jpg]

**stevennathaniel** · 09-05-2015, 10:04 AM

selanjutnya aku mau kasih source code untuk nyoba-nyoba bikin form sederhana, untuk tutorial selengkapnya ada disini ya:

http://www.w3schools.com/bootstrap/boots...inputs.asp

http://www.w3schools.com/bootstrap/tryit...&stacked=h

source codenya seperti ini yg gue cobain:

Code:
<!DOCTYPE html>

<html>

<head>

<title>Contoh Form Bootstrap</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.5-dist/css/bootstrap.min.css">

    <script src="./jquery-1.11.3.min.js"></script>

    <script src="./bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container">

        <h2>Form Bootstrap: input</h2>

        <p>Form di bawah ini berisi dua input elemen; satu yg bertipe text dan satu lagi bertipe password</p>

        <form role="form">

            <div class="form-group">

                <label for="usr">Nama:</label>

                <input type="text" class="form-control" id="usr">

            </div>

            <div class="form-group">

                <label for="pwd">Password:</label>

                <input type="password" class="form-control" id="pwd">

            </div>

        </form>

    </div>

</body>

</html>

Screen shot tampilan hasilnya:

[Image: Bootstrap_Form.png]

iKONspirasi · 09-08-2015, 12:07 AM

wew kereen om, +2 nih dari gw

**stevennathaniel** · 09-08-2015, 12:19 PM

terimakasih pak @iKONspirasi

**Nuey** · 11-11-2015, 03:04 AM

Om hadir disini dulu saya, pengguna baru soalnya... Btw kan saya baru belajar jquery nih kalo langsung belajar boostrap bisa gak yah? Smile

nozarc · 11-11-2015, 01:21 PM

saya juga lagi buat form2 dari bootstrap nih, tapi tampilannya malah ancur ketika dibuka via firefox.tapi kalau buka di chrome malah normal,

**Psytrap** · 11-11-2015, 01:38 PM

Keren.. ntar ane coba :v hehehhee