Membuat Homepage Web atau Aplikasi dengan Boostrap | Anak Pantai

Membuat Homepage Web atau Aplikasi dengan Boostrap

Di artikel sebelumnya, saya pernah mengulas tentang starter tempalte Bootstrap. Di artikel ini kita akan mencoba membuat sebuah desain homepage menggunkan seluruh komponen yang disediakan Boostrap. Contoh desain homepage yang akan dihasilkan lebih berfokus pada small device dan membahas mengenai toko online yang menjual makanan.

Sebelum memulai, beberapa prasyarat berikut ini perlu disediakan:
#1 Link gambar untuk header atau logo toko
#2 Link beberapa ikon untuk menu makanan
#3 Link bebrapa gambar iklan makanan
#4 Link beberapa gambar makanan
#5 Link top arrow icon


Setelah semuanya disiapkan, mari kita mulai dengan membuka teks editor. Terserah mau pakai apa, sebagai contoh saya akan menggunakan Sublime Text 3.

Kopi script html di bawah ini dan tempatkan ke text editor kalian. Script ini merupakan starter template yang disediakan oleh Bootstrap. Penjelasan mengenai starter template Bootstarp bisa Anda lihat di artikel sebelumnya atau pergi ke situs resmi Bootstrap.



#1 Membuat Header

Setelah berhasil dikopi, hapus heading1 (h1) yang ada di dalam tag body. Kemudian, tempatkan script di bawah ini di dalam tag body. Script ini digunakan untuk membuat header atau logo toko online Anda. Replace hypertext reference (href) yang ada dengan url gambar/logo toko Anda.



Selanjutnya, untuk mengatur agar tampilan logonya responsif, kopi script css di bawah ini dan tempatkan di dalam tag head. Persisnya sebelum penutup tag head.
Note: script css (internal css) ditempatkan di dalam tag dan tag style tersebut ditempatkan di dalam tag head seperti arahan di atas.



#2 Membuat Carousel

Setelah header selesai dibuat, selanjutnya kita akan membuat carousel atau slide show. Kopi script html di bawah ini dan tempatkan di bawah script header di dalam tag body.


Note: ubah url gambar yang ada dalam href dengan url gambar yang telah Anda sediakan. Pastikan gambar yang disediakan memiliki ukuran yang sama karena akan berpengaruh ketika carousel berpindah ke gambar lain.

Setelah script html-nya siap, kopi script css di bawah ini dan tempatkan di bawah script css header di dalam tag style.



#3 Membuat Alert

Selanjutnya, kita akan membuat tambahan alert. Ini optional saja, Anda dapat menggunakan cara lain untuk menampilkan tulisan sebagaimana yang ditampilkan dalam script alert ini.

Kopi script html untuk alert di bawah ini dan tempatkan di bawah script carousel atau slide show di dalam tag body.



Jangan lupa untuk menempatkan script css untuk mengatur alert yang tersedia di bawah ini di dalam tag style setelah cript css carousel.



#4 Membuat Menu

Selanjutnya, kita akan membuat menu layanan yang tersedia dalam toko online kita. Sebagai contoh, di dalam toko online yang saya siapkan ini memiliki layanan makanan, minuman, dan coffe. Dengan demikian, saya akan membuat 3 buah menu yang mana ketika menu tersebut diklik akan menuju ke halaman yang berisi seluruh item dalam layanan itu.

Kopi script di bawah ini dan tempatkan di dalam tag body tepat di bawah script alert.



Untuk mengatur tampilan cript html menu layanan di atas, kopi script css di bawah ini dan tempatkan di dalam tag style tepat di bawah script css alert.



#5 Membuat Item Produk

Langkah selanjutnya adalah membuat item produk atau makanan yang akan dijual. Pada tahap ini, kita akan menampilkan jenis-jenis makanan yang dijual di toko online kita.
Untuk membuatnya, kopi script di bawah ini dan tempatkan di bawah script menu layanan di dalam tag body.



Jangan lupa untuk mengatur tampilan dari script di atas dengan menempatkan script di bawah ini di dalam tag style di bawah script menu layanan.



#6 Membuat Form Pemesanan

Selanjutnya, kita akan membuat form pemesana dengan menggunakan modal. Pada tahap ini, kita akan mengaktifkan button pesan di setiap makanan agar ketika diklik akan megarah ke tab form pemesanan. Anda juga dapat mengatur script ini agar di arahkan ke tab detail produk atau makanan.



Untuk mengatur tampilan modal, gunakan script css di bawah ini dan tempatkan di dalam tag style di bawah script jenis makanan.



Agar modal yang dibuat bisa diproses, gunakan script js di bawah ini dan tempatkan di atas tag penutup body atau di bawah tag script. Buat sebuah tag script baru dan tempatkan script tersebut di dalamnya.



#7 Membuat Back Top Button

Langkah terakhir, kita akan membuat back to top button di sudut bawah sebelah kanan screen.

Gunakan script di bawah ini dan pastekan di dalam tag body. Anda bisa menempatkannya di atas script header atau di bawah script form pemesanan.



Gunakan script css di bawah ini untuk mengatur tampilan button tersebut.



Selain css, gunakan juga script js berikut ini agar button yang dibuat dapat berfungsi dengan baik di setiap search engine dan device.



Untuk mengatur padding container, gunakan scrip css di bawah ini dan tempatkan di dalam tag style.



Jika ada yang kurang jelas, silakan manfaatkan kolom komentar.

============
Author:
ariesrutung95

Referensi:

2 komentar

gan, semua script dan css dan js sudah masuk semua tanpa error, tapi tampilannya masih besar semua gan, kira-kira apa ya gan.. saya pakai CoffeeCup free HTML editor.. jadi bisa melihat preview langsung tanpa membuka browser... bagaimana cara mengecilkan gambar, ini saya belum merubah gambar, saya masih copy script dan cs dari sini semua belum diedit tapi ternyata besar semua baik di hp atau browser... mungkin ada script yg kurang gan, mohon dibantu

Reply

Coba perhatikan lagi css untuk layanan Gan. Itu pembagiannya diambil dari ukuran total lebar halaman dibagi dengan jumlah menu yang dibuat. Jadi total lebar page pasti 100%, kemudian dibagi dengan jumlah menu yakni 3. Hasilnya adalah 33.3%. Tapi karena saya set margin di kiri dan kanan, jadi ukuran 33.3% itu dikurangi ukuran margin. Makannya di css saya set 31%.

Reply

Post a Comment

Jangan lupa tinggalkan komentar. Kritiklah sesuka Anda!

TERIMA KASIH ATAS KUNJUNGANNYA