Tutorial Membuat halaman Online shop sederhana menggunakan Bootstrap

..

Tutorial Membuat halaman Online shop menggunakan Bootstrap

Assalamualaikum...

Sore guys... kali ini admin akan membuat contoh tutorial tampilan 'online shop' sederhana menggunakan bootstrap...

Silahkan disimak..

TUTORIAL MEMBUAT TAMPILAN ONLINE SHOP

DENGAN BOOTSTRAP

1. Buat folder di htdocs anda (jika menggunakan xampp), jika menggunakan appserv buat folder di     appservàwww, dengan nama ‘tutor’.
2. Di dalam folder tutor kita buat folder baru dengan nama ‘template’.
3. Pindahkan file zip bootstrap pada folder template
4. Extract file zip tersebut, klik kanan pada file zipàextract here.

     5.      Setelah di extract akan terdapat sub folder bernama css dan js. 
     6.      Kita telah berhasil meginstal boostrap pada komputer kita. 
     7.      Kemudian kita buat file html baru dengan nama ‘pertama.html’ pastikan file pertama.html berada 
           satu  folder dengan folder template (simpan di folder tutor). 
     8.      Ketikan kode standar HTML terlebih dahulu, sebagai berikut

     9.      Tampilannya sebagai berikut(Jalankan program dengan menulis alamat localhost/tutor/pertama.html di browser)

     10.  Lalu kita include atau masukan file CSS dan Javascript Bootstrap yang sudah kita extract tadi, tambahkan kode berikut

      11. Hasilnya adalah seperti ini

 

1          12.  Selanjutnya kita akan menyisipkan gambar pada tampilan. Tambahkan kode sebagai berikut,  sebelum kita menambahkan kode, simpan gambar yang akan kita sisipkan pada tampilan di folder tutor. (foto diberi nama : foto1, foto2, foto3, foto4)

1           13.   Maka tampilannya akan menjadi seperti ini

Kurang lebih seperti itulah tutorial contoh tampilan online shop yang admin buat, mohon maaf apabila ada kesalahan ataupun kekurangan, karena admin juga masih dalam proses belajar.

Wassalamualaikum...

Lia Karmila

@liakarmila020