Cara Membuat Halaman Form Dengan Bootstrap...

Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org

Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam

setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Cara Membuat Halaman Form Dengan Bootstrap CDN

Fitria Arnita

[email protected]

Abstrak

Bootstrap adalah front-end framework yang solek, bagus dan luar

biasa yang mengedapankan tampilan untuk mobile device

(Handphone, smartphone dll.) guna mempercepat dan mempermudah

pengembangan website. Bootstrap menyediakan HTML, CSS dan

Javascript siap pakai dan mudah untuk dikembangkan. Bootstrap

merupakan framework untuk membangun desain web secara

responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan

menyesuaikan ukuran layar dari browser yang kita gunakan baik di

desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan

ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. CDN

kepanjangan dari Content Delivery Network atau Content Distribution

Network atau dalam bahasa indonesia disebut Jaringan

Pendistribusian Konten. CDN adalah sebuah sistem jaringan server

untuk mendistribusikan konten yang ada dalam sebuah aplikasi/web

ke berbagai pengakses/pengguna di berbagai belahan dunia agar

data/konten yang dikirim diterima lebih cepat. Dalam hal ini saya

ingin mengenalkan bootstrap untuk pemula yang baru belajar

membuat halaman form.

Kata Kunci: Bootstrap, CDN, Pemula, Form

Pendahuluan

Bootstrap merupakan framework gratis front-end untuk pengembangan

web lebih cepat dan lebih mudah, bootstrap termasuk HTML dan CSS

berdasarkan desain template untuk tipografi, bentuk, tombol, tabel, navigasi, kata

modal, komidi putar gambar dan banyak plugin JavaScript opsional lainnya, serta

bootstrap juga memberikan Anda kemampuan untuk dengan mudah membuat

desain responsif.

Keuntungan Menggunakan Bootstrap

Mudah digunakan: Siapa saja dengan pengetahuan hanya dasar HTML

dan CSS dapat mulai menggunakan Bootstrap

Fitur responsif: CSS responsif Bootstrap ini menyesuaikan dengan

ponsel, tablet, dan desktop.

Pendekatan ponsel pertama: Dalam Bootstrap 3, gaya mobile pertama

merupakan bagian dari kerangka inti.

Kompatibilitas browser: Bootstrap kompatibel dengan semua browser

modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera)

Cara Mendapatkan Bootstrap

Jika kalian ingin mendapatkan Bootstrap kalian bisa mendapatkannya Di

getbootstrap.com.

Atau kalian juga bisa mensertakan saja sebuah CDN Bootstrap.

Apa itu Bootstrap CDN

Jika kalian tidak mau mendownload Bootstrap kalian bisa mendapatkannya

dari CDN.

MaxCDN memberikan dukungan CDN untuk CSS Bootstrap dan JavaScript.

Juga termasuk jQuery:



<link rel="stylesheet"

href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">



<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script

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

>

Banyak pengguna sudah download Bootstrap dari MaxCDN ketika

mengunjungi situs lain. Akibatnya, hal itu akan dimuat dari cache ketika mereka

mengunjungi situs Anda, yang mengarah ke waktu loading lebih cepat. Juga,

kebanyakan CDN akan memastikan bahwa sekali pengguna meminta file dari itu,

maka akan dilayani dari server terdekat dengan mereka, yang juga mengarah ke

waktu loading lebih cepat.





Pembahasan

Sebelum membuat halaman form, saya menggunakan bootstrap CDN.

1. Buka Notepad++nya, karena saya memakai Notepad++

2. Buat scriptnya

Yang pertama kita buat script untuk Nama

fitriaarnita

fitriaarnita





Yang kedua buat script untuk Email

Yang ketiga buat script untuk Alamat Dan Jenis Kelamin

fitriaarnita

fitriaarnita





Yang ke empat buat script untuk Agama

Yang ke empat buat script untuk Pekerjaan Dan Status

fitriaarnita

fitriaarnita





Yang ke lima buat script untuk Jenjang

Yang terakhir buat script untuk Sign Up

fitriaarnita

fitriaarnita





Kemudian Save

Klik localdisk C (karena folder saya berada di disk C)

Kemudian buka folder Xampp

fitriaarnita

fitriaarnita





Lalu save di folder Htdoc

Karena saya mempunyai folder khusus, saya menyimpan di folder

cyber dengan nama file hal form.html (bisa dengan nama lain,

yang penting .html dan type filenya all files jika tidak ada bisa

dengan html) klik Save.

fitriaarnita

fitriaarnita





Dan hasilnya seperti ini

fitriaarnita





Penutup

Bootstrap merupakan framework gratis front-end untuk pengembangan

web lebih cepat dan lebih mudah, bootstrap termasuk HTML dan CSS

berdasarkan desain template untuk tipografi, bentuk, tombol, tabel, navigasi, kata

modal, komidi putar gambar dan banyak plugin JavaScript opsional lainnya, serta

bootstrap juga memberikan Anda kemampuan untuk dengan mudah membuat

desain responsif.

Keuntungan Menggunakan Bootstrap

Mudah digunakan: Siapa saja dengan pengetahuan hanya dasar HTML

dan CSS dapat mulai menggunakan Bootstrap

Fitur responsif: CSS responsif Bootstrap ini menyesuaikan dengan

ponsel, tablet, dan desktop.

Pendekatan ponsel pertama: Dalam Bootstrap 3, gaya mobile pertama

merupakan bagian dari kerangka inti.

Kompatibilitas browser: Bootstrap kompatibel dengan semua browser

modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera).

CDN adalah sebuah sistem jaringan server untuk mendistribusikan konten

yang ada dalam sebuah aplikasi/web ke berbagai pengakses/pengguna di

berbagai belahan dunia agar data/konten yang dikirim diterima lebih cepat.

Sekian tutorial dari saya dan selamat mencoba ya





Referensi

Pengalaman Pribadi

Biografi hai hai nama saya Fitria Arnita, saat ini saya sibuk kuliah dan

bekerja. Saya kuliah di salah satu Perguruan Tinggi ilmu komputer di

Tangerang angkatan 2014 sampai saat ini. Rumah saya berada di daerah

Kabupaten Tangerang beralamat Dasana Indah. Kalo dengan hobi, saya lebih

menyukai anime (kartun jepang), saya sampai saat ini belum pernah mengikuti

organisasi, saya jurusan Sistem Informasi dan konsentrasinya Sistem Informasi

Manajemen. Terima kasih ya semoga bermanfaat

Cara Membuat Halaman Form Dengan Bootstrap...

Documents

Transcript of Cara Membuat Halaman Form Dengan Bootstrap...