Bootstrap Part 1 : Pengertian Dan Cara Menggunakan Bootstrap

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 dan cepat. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Sehingga, user akan mendapatkan pengalaman yang lebih baik dalam berselancar tanpa mempertimbangkan perangkat apa yang harus digunakan, dan apabila kita menggunakan bootstrap, kita tinggal menggunakan nama class (untuk css) dan library (javascript) yang sudah ditentukkan oleh bootstrap tanpa perlu menulis kode dari 0 (awal) sehingga, bisa menghemat waktu dalam pengembangan website untuk urusan UI (User Interface). Bootstrap memiliki tampilan yang indah dan dapat di customisasi.

Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis, tentunya harus didukung dengan teknologi lain dalam pengembangannya.

Cara menggunakan Bootstrap

- Bootstrap v4.4.1

Anda harus memiliki file distribusi Bootstrap Download dapat dikunjungi pada artikel sebelumnya atau dapat di download pada situs resmi bootstrap https://getbootstrap.com/

- Code editor atau PHP editor

Anda harus memiliki code editor contoh Notepad ++, Macromedi Dreamweaver all versi, sublime text dsb.

- Xampp 

Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:

1. Buat Folder Baru
   Buatlah folder baru, beri nama "Belajar_Bootstrap".
2. Copy seluruh file Bootstrap ke dalam Folder Baru Tersebut
   Copy folder css, dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)
3. Buat file HTML
   Buat file baru di notepadd++ (atau code editor kesayangan Anda) kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama: index.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas. Berikut kodenya: 

   <!doctype html>
   <html lang="en">
     <head>
       <!-- Required meta tags -->
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
       <!-- Bootstrap CSS -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   
       <title>Hello, world!</title>
     </head>
     <body>
       <h1>Hello, world!</h1>
   
       <!-- Optional JavaScript -->
       <!-- jQuery first, then Popper.js, then Bootstrap JS -->
       <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
     </body>
   </html>
   

4. Uji Coba

silahkan kalian gunakan browser kalian : google crome, mozilla firefox dan aplikasi sejenis

ketik pada url :localhost/Belajar_Bootstrap/index.html dan pastikan xampp berjalan pada MySQL dan Apache.

• Struktur File dan folder

Setelah Anda melakukan langkah-langkah yang telah dijabarkan di atas, maka file dan folder seharusnya mengikuti struktur sebagai berikut:

Belajar_Bootstrap/
├── index.html
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   └── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
├── js/
│   ├── bootstrap.bundle.js
│   ├── bootstrap.bundle.js.map
│   ├── bootstrap.bundle.min.js
│   └── bootstrap.bundle.min.js.map
│   └── bootstrap.js
│   └── bootstrap.js.map
│   └── bootstrap.min.js
│   └── bootstrap.min.js.map
│   └── jquery-3.3.1.min.js

Soal UAS Jum'at

Mata Kuliah                : Pemrograman Web 2

Dosen Pengampu        : Haliq, S.Kom., M.T.I

1.      Buatlah Form Input

a.       Form Input Pendaftaran CPNS (Untuk NPM Ganjil)

·         Dengan struktur table sebagai berikut :

No	Field	Type	Panjang/Nilai	Index
1.	NIK	INT	18	Primary Key
2.	Nama	Varchar	50	-
3.	TTL	Varchar	30	-
4.	Jenkel	Enum	‘values’,’values’	-
5.	Jurusan	Enum	‘values’,’values’	-
6.	No_telp	Varchar	15	-
7.	Alamat	Varchar	100	-
8.	Foto	Varchar	50000	-

b.      Form Input Data pengiriman barang(Untuk NPM Genap)

·         Dengan struktur table sebagai berikut :

No	Field	Type	Panjang/Nilai	Index
1.	Kode_transaksi	INT	8	Primary Key
2.	nama_pengirim	Varchar	50	-
3.	Jenis_Brg	Varchar	30	-
4.	berat	Varchar	12	-
5.	biaya	Enum	‘values’,’values’	-
6.	alamat_pengirim	Varchar	15	-
7.	tujuan	Varchar	100	-
8.	Gambar	Varchar	50000	-

2.      Buatlah tampilan Hasil Input  berupa Table.

3.      Lampirkan file berupa Folder yang di dalamnya berupa file .PHP dan .SQL(database) didalam CD/DVD.

4.      Dikumpulkan paling lambat hari Sabtu, 02 Februari 2019 pukul : 12.00 WIB dengan membawa kartu Ujian Akhir Semeste (UAS).

Soal Uas Kamis

Mata Kuliah                : Pemrograman Web 2

Dosen Pengampu        : Haliq, S.Kom., M.T.I

1.      Buatlah Form Input

a.       Form Input Pendaftaran Mahasiswa Baru (Untuk NPM Ganjil)

·         Dengan struktur table sebagai berikut :

No	Field	Type	Panjang/Nilai	Index
1.	NPM	INT	8	Primary Key
2.	Nama_MHS	Varchar	50	-
3.	TTL	Varchar	30	-
4.	Jenkel	Enum	‘values’,’values’	-
5.	Jurusan	Enum	‘values’,’values’	-
6.	No_telp	Varchar	15	-
7.	Alamat	Varchar	100	-
8.	Foto	Varchar	50000	-

b.      Form Input Data Barang (Untuk NPM Genap)

·         Dengan struktur table sebagai berikut :

No	Field	Type	Panjang/Nilai	Index
1.	Kode_Barang	INT	8	Primary Key
2.	Nama_BRG	Varchar	50	-
3.	Jenis_Brg	Varchar	30	-
4.	Harga	Varchar	12	-
5.	Satuan	Enum	‘values’,’values’	-
6.	Jumlah	Varchar	15	-
7.	Stok	Varchar	100	-
8.	Gambar	Varchar	50000	-

2.      Buatlah tampilan Hasil Input  berupa Table.

3.      Lampirkan file berupa Folder yang di dalamnya berupa file .PHP dan .SQL(database) didalam CD/DVD.

4.      Dikumpulkan paling lambat hari Jumat, 01 Februari 2019 pukul : 14.30 WIB dengan membawa kartu Ujian Akhir Semeste (UAS).

UAS Desain Web 2 TI Siang

1.      Buatlah Form Input

a. Form Input Pendaftaran Mahasiswa Baru (Untuk NPM Ganjil)

b. Form Input Data Barang (Untuk NPM Genap)

2.      Buatlah tampilan Hasil Input  berupa Table.

3.      Lampirkan file berupa Folder yang di dalamnya berupa file .PHP dan .SQL(database) didalam CD/DVD.

4.      Dikumpulkan paling lambat hari Kamis, 31 Januari 2019 pukul : 14.30 WIB dengan membawa kartu Ujian Akhir Semeste (UAS).