Assalamualaikum Wr. Wb
Selamat sore !!!
Pada kesempatan
kali ini saya akan membagikan sebuah project untuk kelas XI RPL SMK Dr. Wahidin
Sawahan Kabupaten Nganjuk,
Untuk materi tentang Aplikasi Inventaris di SMK Dr. Wahidin Kabupaten Nganjuk menggunakan
framework Bootraps, langkah yang dilakukan adalah sebagai berikut :
I.
STAGE
PERTAMA
a. Pengertian Bootraps
Bootstrap
adalah sebuah library framework CSS yang di buat khusus untuk bagian
pengembangan front-end website. bootstrap merupakan salah satu framework
HTML, CSS dan javascript yang paling populer di kalangan web
developer. pada saat ini hampir semua web developer telah menggunakan bootstrap
untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena
anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat
tombol, grid, navigasi dan lainnya.
Bootstrap
telah menyediakan kumpulan komponen class interface dasar yang telah di rancang
sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan.
selain komponen class interface, bootstrap juga memiliki fitur grid yang
berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan
sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri
keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap
yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS
sendiri.
Salah satu contoh website besar yang menggunakan framework
bootstrap adalah Twitter, tentu anda sudah familiar dengan twitter bukan ? yap,
interface twitter di bangun dengan menggunakan bootstrap. karena sebenarnya
bootstrap di kembangkan oleh developer twitter sendiri sehingga bootstrap
sering juga di sebut twitter bootstrap Bootstrap berisi kumpulan class yang
siap pakai. misalnya anda ingin membuat sebuah tombol dengan cepat dan tana
harus merancang dan mengetikkan syntax css untuk membuat sebuah tombol, maka
dengan bootstrap anda dapat membuatnya dengan sangat cepat, yaitu hanya dengan
menambahkan class btn dan menambahkan class btn tambahan.
b. Cara membuat form login dari bootstraps
1. Buka website https://getbootstrap.com/
Sehingga tampilan bias seperti diatas.
2.
Klik
menu example dan scrool ke bawah cari menu sign-in
Sehinggal
menjadi tampilan seperti dibawah ini
Nah,
untuk membuat tampilan login seperti diatas adalah dengan cara mengcopy seluruh
file html, css, java script dari halaman tersebut dengan cara :
a.
Klik
kanan pilih menu view page source
b.
Maka
akan menampilkan tampilan syntax seperti dibawah ini
Setelah
tampil seperti diatas, langkah selanjutnya adalah mengcopy seluruh syntax nya
dan paste di web editor(dalam hal ini bias menggunakan Sublim, Notepad++, atau
yang lainya).
Sebelum
masuk kita buat folder dulu yang digunakan untuk menyimpan program kita
nantinya di dengan struktur
C:/xampp/htdocs/kelompok_pajak
- Css
- Js
- Index.php
Setelah
itu baru proses copy ke web editor
c.
Disini
saya menggunakan web editor sublime, dengan cara buka sublime -> klik file ->
new file -> lalu paste syntax dari
web yang sudah dicopy tadi seperti gambar
d.
Simpan
file yang sudah dipaste tadi di folder yang sudah kita buat pada point b dengan
nama index.php.
e.
Setelah
selasai paste, selanjutnya adalah mencari syntax seperti dibawah ini
1.
<link
href="/docs/4.4/dist/css/bootstrap.min.css"
rel="stylesheet">
2.
<link
href="signin.css" rel="stylesheet">
Kalau sudah ketemu, klik kanan pada link
dan pilih open link new tab
Untuk point 1 simpan di folder css dengan
nama bootstrap.min.css
Untuk point 2 simpan di folder css
dengan nama signin.css
Lalu rubah syntax pada point 1 dan 2
sehingga seperti dibawah ini :
1.
<link
href="css/bootstrap.min.css" rel="stylesheet">
2.
<link
href="css/signin.css" rel="stylesheet">
Setelah itu, jalankan di web browser
dengan mengetikkan localhost/[nama_folder yang telah dibuat]; Contoh : localhost/program_xirpl
Maka
akan tampil seperti diatas.
T U G A S – 1
1.
Editlah
syntax yang disudah di paste tadi sehingga bias menjadi tampilan seperti
dibawah ini
2.
Langkah
pengumpulan Stage 1
ü semua siswa kelas XI RPL silahkan
mendaftar di https://classroom.google.com/
menggunakan email google masing-masing
ü Gabung ke Google Class
dengan kode ima33sv
ü Pengerjaan program kelompok
ü Pengumpulan masing-masing
siswa
ü Batas waktu
pengumpulan 6 Pebruari 2020 Pukul 23.59 WIB
Komentar
Posting Komentar