Cara Membuat Tampilan Online Shop dengan Menggunakan Bootstrap


Cara Membuat Tampilan Online Shop dengan Menggunakan Bootstrap
Assalamualaikum Wr.Wb......
               Kawan kawan programer junior, saya akan berbagi ilmu tentang cara membuat halaman Web untuk Online Shop dengan menggunakan Bootstrap. Mengapa harus menggunakan Bootstrap ? karena dengan menggunakan Bootstrap kita akan lebih mudah membangun tampilan (halaman) Web, jadi kita hanya perlu memanggil saja fungsi CSS yang sudah ada pada Bootstrap tersebut. Ok langsung saja kita mulai, inilah langkah langkah membuat halaman web untuk Online Shop dengan menggunakan Bootstrap. Mohon disimak yaa ! 

  1. Jika anda belum mempunyai Bootstrap versi ofline maka harus mendownload Bootstrapnya terlebih dahulu 
  2. Buat folder baru dengan nama “OnlineShop” di Local Disk C > AppServ > www (untuk pengguna appserv). Untuk pengguna xamapp maka buat folder baru dengan nama “OnlineShop” di Local Disk C > htdocs. Lalu simpan
  3. Buat lagi folder baru dengan nama “tempalte” di folder “OnlineShop”
  4. Copykan file Zip Bootstrap yang telah selesai di download tadi di folder “template” 
  5.  Extact file zip tersebut dengan cara klik kanan > extract here > klik > tunggu hingga paroses extract selesai. Perhatikan gambar berikut !




     6. Setelah extract selesai maka pastikan muncul folder baru dengan nama 
          “Bootstrap-4-Offline Docs-master”. Perhatikan gambar berikut !
     7. Jika folder “Bootstrap-4-Offline-Docs-master” telah muncul maka extract file telah berhasil.
         Kemudian kita buat file html baru dengan nama “index.html” pastikan berada dalam folder    
         “OnlineShop”.  Lalu simpan


     8. Kemudian kita buat file html baru dengan nama “index.html” pastikan berada dalam folder 
         “OnlineShop”. Lalu simpan
     9. Mari kita buat coding nya dengan menggunakan text editor (yang anda gunakan). 
     10. Perhatikan gambar berikut, fungsinya unuk memanggil atau memasukan file CSS dan Javascript 
          Bootstrap yang tadi telah di extract


  1. 1.    Tambahkan juga coding berikut agar memperindah backgroud dengan mengunakan gambar unik dan menarik   
    12. Panggil class-class pada bootstrap dan coding untuk menambahkan menu pada tampilan atas halaman web



    13. Coding untuk menambahkan button pencarian

    14. Selanjutnya tambahkan coding sebagai berikut untuk menambahkan menu “produk terbaru” dan “tinjau semua”
     

    15. Lalu kita akan menyisipkan gambar pada tampilan web OnlineShop, maka tambahkan kode sebagai berikut, sebelum menambahkan kode, pilihlah beberapa gambar yang sesui dengan tema online shop lalu simpan gambar yang akan kita sisipkan pada tampilan tersebut, di folder  bootstrap dan beri nama gambar tersebut (foto1, foto2, foto3, foto4 dst)
     

    16. Inilah coding keseluruhan dari OnlineShop
     

     


    17. Maka setelah semua codingnya dibuat, jalankan di browser lalu ketikkan alamat berikut “http://localhost/OnlineShop/index.html” akan tampil halaman web Online Shop sebagai berikut. Perhatikan gambar !


                    Sekian tutorial membuat halaman web Online Shop dengan menggunakan Bootstrap, Terimakasih telah menyimak semoga bermanfaat. Wassalamualaikum Wr.Wb



     









Komentar

Posting Komentar

Postingan populer dari blog ini

Tutorial Membuat Rumah Sederhana Pada Neatbeans IDE 8.1

Gambar
Tutorial Membuat  RUMAH SEDERHANA Pada Neatbeans IDE 8.1 Disini saya akan berbagi ilmu tentang langkah langkah membuat Rumah Sederhana pada Netbeans IDE 8.1  menggunakan LWJGL yaitu sebagai berikut, mari kita lihat source kode nya ! 1. Buka aplikasi Neatbeans IDE 8.1  2. Lalu kita membuat class nya terlebih dahulu, dengan cara double klik pada project kita, lalu muncul Source Packages, kemudian double klik lagi pada Source Packages, maka akan muncul folder display_axample_rplb, setelah itu klik kanan pada folder display_axample_rplb, lalu klik new + pilih java class. Seperti tampilan berikut ; 3. Setelah itu ubahlah nama file java class nya menjadi Rumah 4.  Setelah nama file tersebut di ubah maka klik finish pada button yang paling bawah 5.  Setelah button finish di klik, maka akan tampil layar utama untuk memasukkan source kode membuat rumah sederhana 6.  Selanjutnya kita masukkan source kode yang berfu...
Baca selengkapnya

Penerapan Grafika Komputer

Gambar
PENERAPAN GRAFIKA KOMPUTER Grafik komputer merupakan salah satu ilmu yang dipelajari di teknik informatika dan ilmu komputer. Aplikasi grafik komputer ini sangat sering dijumpai dalam kehidupan sehari-hari. Untuk itu pemilihan software yang tepat akan sangat membantu menciptakan bentuk-bentuk objek dengan realisme nyata. Borland C++ Builder Prefessional merupakan salah satu bahasa pemrograman yang menyediakan tool-tool dan fungsi-fungsi untuk pembuatan aplikasi grafik. Ada lagi fasilitas-fasilitas GDI (Grafical Device Interface) yang dipunyai oleh Borland C++ Builder ini akan sangat memudahkan penggunanya dalam menciptakan aplikasi grafik. Borland C++ Builder menyediakan beberapa algoritma untuk mempresentasikan objek agar terlihat lebih nyata. Adapun perbedaan grafik komputer dan pengolahan citra. Grafik komputer adalah ilmu yang mempelajari tentang suatu objek gambar. Sedangkan pengolahan citra adalah mengolah sebuah citra lama sehingga menjadi citra baru. Penerapan...
Baca selengkapnya