TUTORIAL MEMBUAT HALAMAN UTAMA ONLINE SHOP SEDERHANA DENGAN MENGGUNAKAN BOOTSTRAP 4

Assalamuala’ikum Wr,Wb.

Hallo semuanya apa kabar? Sudah lama gak posting hehe... sebelumnya saya sudah posting membaha tentang Java Neatbeans dan LWJGLnya :D. Dan kali ini saya akan posting soal website dengan menggunakan bootsraop.Apa itu Bootstrap? Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap juga merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer yang digunakan untuk mengembangkan sebuah website yang responsive. Sehingga halaman website nantinya dapat menyesuaikan sesuai dengan ukuran monitor device (desktop, tablet, ponsel ) yang digunakan pengguna disaat mengakses website website dari browser. Bootsrap telah menyediakan kumpulan komponen class interface dasar yang telah dirancang sedemikian rupa untuk menciptakan sebuah tampilan yang menarik dan ringan. Nah kali ini saya akan membuat tutorial yang sederhana dengan bootstrap yaitu “ Tutorial Membuat Halaman Utama Online Shop dengan Menggunakan Bootstrap 4”.

Jangan terburu-buru yah, sebelum membuatnya kalian harus mempunya bahan yang dibutuhkan dalam pembuatannya yaitu:

- Web server Appserv atau XAMPP

- Untuk Text Editor : Sublime Text 3 atau Notepad ++

- Browser Mozilla, Chrome atau Opera

- Bootstrap 4. Unduh Disini

Setelah semuanya sudah siap, yuk ikutin langkah-langkah berikut:

1. Jika kalian menggunakan XAMPP, jalan kan terlebih dahalu xampp control panel. Seperti gambar dibawah ini.

2. Lalu copykan Bootstrap 4 dan simpan di dalam folder, jika di AppServ seperti dibawah ini:

Jika di Xampp seperti dibawah ini:

3. Buka Text Editor yang kalian punya, dan ketik sintax dasar HTML seperti gambar di bawah ini:

4. Buka bahan Bootsrap offline >> getting-started_introduction. Nanti akan muncul seperti ini:

5. Ketik dibawah untuk menggabungkan bootstrap ke sintax yang akan kita buat nanti:

6. Sekarang kita mulai dengan membuat navbar telebih dahulu,copy sintak dibawah ini dari bootstrap 4:

Lalu simpan di bagian body seperti dibawah ini:

7. Lalu copy juga sintax dibawah ini untuk nama dinavbar dan search:

Lalu simpan di bagian perintah ke 6, cek lagi dan samakan karena ada yang diubah:

8. Sekarang buat navbar menunya copy sintax di bawah ini:

Lalu simpan di seperti gambar dibawah:

9. Lalu buat Dropdown bagian kategori copykan sintax dibawah ini:

Kemudian simpan di salah satu menu navbar seperti dibawah ini:

10. Setelah navbar, akan membuat halaman tengah nya dengan mencopy sintax jumbotron dibawah ini:

Terus simpan di setelah navbar, cek kembali sintaxnya karena ada yang ditambahkan:

11. Kemudian kalian membuat card atau list barang dengan mengunakan card supaya lebih menarik, copy sintaxnya di bootstrap:

Letak kan di dalam jumbotron, lihat kembali ada sintax yang di kurangi atau di tambahkan:

12. Jika kalian ada yang eror atau bingung bisa lihat sintax full dibawah ini:

13. Jangan lupa Gambar-gambarnya copykan ke folder olshop nya agar gambarnya bisa muncul sesuai yang di copykan di sintax. Setelah selesai save sintaxnya dan simpan di folder yang pas awal tutorial pembuatan, jika di Appserv seperti dibawah ini: