Cara Membuat Halaman Form Dengan Bootstrap CDN

dokumen-dokumen yang mirip
Membuat Carousel Dengan Bootstrap CDN

Cara Mengembalikan Yang Sudah Terkirim di Gmail

PELATIHAN PHP ALUMNI DAN CALON ALUMNI INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA. By: Julianto Lemantara, S,Kom., M.Eng

Membuat Blockquote Di Wordpress

WELCOME MESSAGE WE STARTED AT. 10 March 2016 dimana komunitas ini didirikan

Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML

Prosedur Menjalankan Program

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI. autentikasi dan otorisasi user. Aplikasi belum menggunakan teknologi responsive

BAB IV IMPLEMENTASI DAN EVALUASI. implementasi desain dalam bentuk kode-kode program. Kemudian di tahap ini

Menginstal Fitur Aplikasi Marshmallow Di Kitkat & Lollipop

Cara Membuat Baru

HASIL PENILAIAN E-ASPIRASI 2017 DINAS KESEHATAN BENGKULU.

HASIL PENILAIAN E-ASPIRASI 2017 DINAS KESEHATAN JAWA TENGAH.

HASIL PENILAIAN E-ASPIRASI 2017 DINAS KESEHATAN SULAWESI SELATAN.

HASIL PENILAIAN E-ASPIRASI 2017 DINAS KESEHATAN JOGJAKARTA.

HASIL PENILAIAN E-ASPIRASI 2017 DINAS KESEHATAN KALIMANTAN TIMUR.

Mengenal Web Dinamis dan Statis Serta Perbedaanya

HASIL PENILAIAN E-ASPIRASI 2017 DINAS KESEHATAN KALIMANTAN SELATAN.

HASIL PENILAIAN E-ASPIRASI 2017 DINAS KESEHATAN BALI.

HASIL PENILAIAN E-ASPIRASI 2017 DINAS KESEHATAN MALUKU UTARA.

MANUAL APLIKASI PENDATAAN GURU SMA/SMK UNTUK GURU. 1 H a l a m a n. Pembangunan Aplikasi Sistem Informasi Kepegawaian Guru

TUTORIAL MEMBUAT HOSTING. diajukan untuk memenuhi tugas pada mata kuliah Jaringan Komputer dari dosen Tedi Gunawan, S.T., M.Kom.

Presentasi Hasil Penilaian Dinkes Provinsi By Zeembry

CARA MENGHILANGKAN IKLAN YANG MUNCUL DI DESKTOP

Object-Oriented Programming Sederhana Dengan PHP

6 APLIKASI WEB BROWSER TERBAIK SAAT INI

Sejarah HTML5. Abstrak. Pendahuluan. Reni Resiani Sunmaryati

Membuat Chating Messager Di Android

Panduan Edmodo Bagi Teacher Haris K, S.Pd, M.Cs.

Mengenal dan Mengedit HTML

TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP

APLIKASI AKUNTANSI MASJID BERBASIS WEB PORTAL

BAB II TINJAUAN PUSTAKA. Berkaca dari pesatnya laju perkembangan teknologi. modern, sistem penjadwalan guru di sebuah sekolah akan lebih

Mengenal & Menggunakan Google Drive

Presentasi Hasil Penilaian Website Unit Kemkes Update 17 Oktober 2016 By Zeembry

Nama : Susanaros N.C Sekolah : Smaga Magetan (Adiwiyata School)

HASIL PENILAIAN E-ASPIRASI WEBSITE UNIT KEMKES

Oleh: George Thomas. Web Site:

Mengenal AppendGrid di PHP

Cara Hosting CSS Blogger Menggunakan Google Drive

INSTALASI IONIC FRAMEWORK DI WINDOWS 7 UNTUK PENGEMBANGAN APLIKASI MOBILE HYBRID

Instalasi Sencha Touch - Tutorial Sencha Touch #Part 1

MENJELAJAHI DUNIA MAYA

TIP 8. Gambar 8.1. Tidak perlu lagi menggunakan Driver Adobe PDF untuk cetak dalam bentuk PDF

KUESIONER PENELITIAN (untuk Guru) 3. Apakah alat peraga dibutuhkan untuk membantu mengajar geometri?

HASIL PENILAIAN E-ASPIRASI WEBSITE UNIT KEMKES

BAB I PENDAHULUAN 1.1 Latar Belakang

LAPORAN RESMI. Flash, Audio dan Video. Dosen Pembimbing : Dwi SusantoS. ST, MT. Oleh Hamidah Nur Hidayati

C. Ms Powerpoint D. Notepad E. Ms Acces

Cara Membuat Website Dengan Dreamweaver 8

WEB BROWSER World Wide Web WWW SEARCH ENGINE Mesin pencari

Cara Meng-install Web Server Lokal (xampp-win )


PROPOSAL PENAWARAN PEMBUATAN WEBSITE COMPANY PROFILE SAHABAT MEDIATAMA SISTEM

BAB 4 IMPLEMENTASI DAN EVALUASI. a. Spesifikasi piranti keras pada local server: Processor : Intel Pentium IV 1.8 Ghz

Pemrograman Web Week 1. Team Teaching

HASIL PENILAIAN E-ASPIRASI WEBSITE UNIT KEMKES

HASIL PENILAIAN E-ASPIRASI WEBSITE UNIT KEMKES

PETUNJUK PENGOPERASIAN REGISTRASI Keanggotaan IGTKI

PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP

BAB I PENDAHULUAN. informasi menjadi sangat mudah diakses. Walaupun jarak informasi terletak di

HASIL PENILAIAN E-ASPIRASI WEBSITE UNIT KEMKES

Modul Pengguna SCeLE

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI. sebuah sistem pencarian lokasi kuliner berbasis mobile web untuk wilayah

Tutorial Implementasi Jquery Mobile dan JSP. 1. Definisi Jquery Mobile

Cara membuat HTML dasar

LAPORAN PRAKTIKUM 2 FLASH, VIDEO DAN AUDIO

MENGGUNAKAN APLIKASI TELEGRAM DI BERBAGAI PERANGKAT

TUTORIAL DIGITAL PENGINDERAAN JAUH DAN SISTEM INFORMASI GEOGRAFI

MENGOPI DAFTAR KONTAK

PANDUAN MENGGUNAKAN SISTEM INFORMASI KEARSIPAN STATIS (SiKS) ARSIP UNIVERSITAS GADJAH MADA

Di wordpress satu hal yang paling banyak menjadi perdebatan seru yaitu tentang kecepatan website.

Perancangan Antarmuka Layanan Informasi Wisata dan Kuliner di DIY Berbasis Web dan Mobile Web

Cara Membuat Blog. Nuraini Setyowati. Abstrak. Pendahuluan.

MEMBUAT QR CODE DENGAN PHP

III DATA PERANCANGAN

Demby Pratama Politeknik Negeri Sriwijaya

Kuesioner Analisis Kebutuhan

Penjelajahan di Dunia Maya (Browsing/Surfing)

PENGANTAR APLIKASI E-SELEKTA TIPE USER ADMINISTRATOR

PENGERTIAN WEB web adalah

HASIL PENILAIAN E-ASPIRASI WEBSITE UNIT KEMKES Itjen.kemkes.go.id

Implementasi Identifikasi Kendala Sistem Identifikasi Pengguna Administrator Pengujian Sistem Member Pengunjung atau umum HASIL DAN PEMBAHASAN

MODULE A. Web Design-2017 CONTENTS. Modul ini terdiri dari file-file berikut: MODULE_A.docx MODULE_A_MEDIA.zip PENDAHULUAN

HASIL PENILAIAN E-ASPIRASI WEBSITE UNIT KEMKES

Panduan E-Learning Untuk Mahasiswa

MAKALAH Cara Mengomptimalisasi Browser

BAB 2. Membuat Halaman Web Sederhana. Materi

Menemukan & Berbagi Sumber Belajar

BAB IV ANALISIS DAN PERANCANGAN SISTEM. utuh ke dalam bagian - bagian komponennya dengan maksud untuk

Manual Book Penggunaan CMS. Website Portal Berita Antara Bogor (Untuk Administrator)

Tutorial. Membuat Mengirim dan Membuka . Edited By : Rudi Muryanta.

Pemrograman Web Week 4. Team Teaching

Elearning Perbanas Panduan Mahasiswa

BAB III LANDASAN TEORI

2. Searching, Bookmark dan Download

MODUL PERTEMUAN 2 BLOGGING. Mata kuliah : Pengantar Komputer dan Software

BUKU MANUAL PENGEMBANGAN SISTEM INFORMASI MANAJEMEN PERENCANAAN PEMBANGUNAN DAERAH

KELEBIHAN KEKURANGAN. Berikut Kelebihan yang dimiliki oleh Zimbra:

Transkripsi:

Cara Membuat Halaman Form Dengan Bootstrap CDN Fitria Arnita 23@gmail.com 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: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jquery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript --> <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

Yang kedua buat script untuk Email Yang ketiga buat script untuk Alamat Dan Jenis Kelamin

Yang ke empat buat script untuk Agama Yang ke empat buat script untuk Pekerjaan Dan Status

Yang ke lima buat script untuk Jenjang Yang terakhir buat script untuk Sign Up

Kemudian Save Klik localdisk C (karena folder saya berada di disk C) Kemudian buka folder Xampp

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.

Dan hasilnya seperti ini

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