Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Oct 5th, 2017

Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)

Category : Tutorials | Posted by G-admin at at October 5th, 2017 06:21 am
6034 | 4

Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jelek halo juga deh… Setelah beribu-ribu menit dan detik berlalu, jam demi jam telah kita lewati, dari pagi hari sampai sore hari, akhirnya… sampai pada waktunya kita untuk berbuka puasa…?? 😐

Untuk para pembaca setia Gaswad, kali ini penulis ingin melanjutkan tutorial bagaimana cara membuat web responsif dengan menggunakan Bootstrap. Bagi kalian yang belum mengikuti tutorial sebelumnya silahkan merujuk ke link berikut :

Jadi bagi kalian yang belum membaca dan memahami tutorial di atas, maka penulis sarankan untuk membacanya terlebih dahulu agar kalian tidak bingung dan mengerti bagaimana cara kerja Bootstrap, karena pada artikel ini kita akan berkutat dengan class-class Bootstrap.

Bagi kalian yang belum men-download source code web statik silahkan download dari artikel berikut :

 

2. Menggunakan Bootstrap

Disini kita tetap menggunakan layout template yang sama dengan layout web statik sebelumnya, untuk menyegarkan kalian kembali, berikut adalah rancangan layout yang akan kita konversi menjadi web responsif dengan bantuan Bootstrap.

Dan berikut adalah tampilan web statik setelah selesai di buat :

Untuk tahap selanjutnya silahkan kalian ikuti langkah-langkah berikut :

  • Monitor (992px – 1199px)
  1. Silahkan kalian extract file *.ZIP dari file source code yang sudah kalian download sebelumnya lalu Edit file ‘index.html‘ yang ada di dalamnya.
  2. Jika kalian lihat pada layout di atas terdapat 3 section, yaitu section Header, Main Body, dan Footer, silahkan kalian tambahkan classrow‘ pada tiap elemen HTML dari ketiga section tersebut.
    <header class="row">
    <main class="row">
    <footer class="row">

    Jangan lupa untuk menambahkan juga classcontainer‘ ke dalam elemen <body>, classcontainer‘ ini sangat di butuhkan oleh Bootstrap karena berfungsi sebagai pembungkus dari class-class Bootstrap yang ada di dalamnya.

    <body class="container">
  3. Asumsi penulis saat ini kalian menggunakan layar Monitor, jadi silahkan gunakan class Bootstrap untuk tipe layar Monitor, yaitu ‘col-md-*‘, tambahkan class tersebut ke dalam sub-sub elemen yang ada pada ketiga section di atas.
    <!--HEADER SECTION-->
    <header class="row">
      <div class="logo col-md-12">
        ~~~
      </div>
      <div class="navigasi col-md-12">
        ~~~
      </div>
    </header>
    
    <!--MAIN BODY SECTION-->
    <main class="row">
      <div class="konten col-md-9">
        ~~~
      </div>
      <div class="sidebar col-md-3">
        ~~~
      </div>
    </main>
    
    <!--FOOTER SECTION-->
    <footer class="row">
      <div class="footer col-md-12">
        ~~~
      </div>
    </footer>

    Bagi kalian yang bingung kenapa penulis menggunakan classcol-md-*‘, silahkan kalian baca kembali tutorial yang pertama.

    • Handphone, menggunakan class β€˜col-xs-1β€˜ s/d β€˜col-xs-12β€˜
    • Tablet, menggunakan class β€˜col-sm-1β€˜ s/d β€˜col-sm-12β€˜
    • Monitor, menggunakan class β€˜col-md-1β€˜ s/d β€˜col-md-12β€˜
    • Monitor HD, menggunakan class β€˜col-lg-1β€˜ s/d β€˜col-lg-12β€˜
  4. Jika sudah, selanjutnya silahkan kalian buka file ‘layout.css‘, hapus semua kode CSS yang ada di dalamnya lalu ganti dengan kode CSS berikut :
    .logo, .navigasi, .konten, .sidebar, .footer {
      margin-bottom:15px;
      padding:15px;
    }
    
    .logo {
      background: #99D9EA;
      text-align: center;
      color: #fff;
    }
    
    .navigasi{
      background: #99D9EA;
      text-align: center;
    }
    
    .konten{
      background: #EFE4B0;
    }
    
    .sidebar{
      background: #FD7E00;
    }
    
    .footer{
      background: #C3C3C3;
      text-align: center;
    }
    
    .navigasi ul{
      padding: 0;
      list-style: none;
      display: inline-block;
      margin: 0;
    }
    
    .navigasi li{
      float: left;
      margin: 0 10px;
    }

    Perbedaan kode CSS di atas dengan yang sebelumnya yaitu lebih terletak pada pengaturan lebar tiap-tiap class yang mewakili elemen-elemen HTML di dalamnya. Pada Bootstrap, lebar elemen HTML sudah di sesuaikan secara otomatis semenjak kalian memasukan classcol-xs-*‘, ‘col-sm-*‘, ‘col-md-*‘ dan ‘col-lg-*‘ ke dalam elemen HTML, jadi kalian tidak perlu lagi mengeset lebar tiap-tiap elemen dengan menggunakan CSS seperti pada sebelumnya.

  5. Selesai.

Bagaimana? Mudah bukan?? Tapi jangan senang dulu, pembuatan web responsif belum sepenuhnya selesai, langkah-langkah di atas hanya untuk tipe layar Monitor.

Selanjutnya kita lakukan penyesuaian untuk layar tipe Tablet dan Handphone, silahkan kalian ikuti langkah-langkah berikut :

  • Tablet (768px -991px)
    Sama seperti langkah sebelumnya, untuk layar tipe Tablet silahkan kalian gunakan class ‘col-sm-*‘ ke dalam sub-sub elemen yang ada pada ketiga section di atas.

    <!--HEADER SECTION-->
    <header class="row">
      <div class="logo col-md-12 col-sm-12">
        ~~~
      </div>
      <div class="navigasi col-md-12 col-sm-12">
        ~~~
      </div>
    </header>
    
    <!--MAIN BODY SECTION-->
    <main class="row">
      <div class="konten col-md-9 col-sm-6">
        ~~~
      </div>
      <div class="sidebar col-md-3 col-sm-6">
        ~~~
      </div>
    </main>
    
    <!--FOOTER SECTION-->
    <footer class="row">
      <div class="footer col-md-12 col-sm-12">
        ~~~
      </div>
    </footer>
  • Handphone (320px – 767px)
    Sedangkan untuk tipe layar Handphone silahkan kalian menggunakan class ‘col-xs-*‘, lalu seperti biasa tambahkan ke dalam sub-sub elemen yang ada pada ketiga section di atas.

    <!--HEADER SECTION-->
    <header class="row">
      <div class="logo col-md-12 col-sm-12 col-xs-12">
        ~~~
      </div>
      <div class="navigasi col-md-12 col-sm-12 col-xs-12">
        ~~~
      </div>
    </header>
    
    <!--MAIN BODY SECTION-->
    <main class="row">
      <div class="konten col-md-9 col-sm-6 col-xs-12">
        ~~~
      </div>
      <div class="sidebar col-md-3 col-sm-6 col-xs-12">
        ~~~
      </div>
    </main>
    
    <!--FOOTER SECTION-->
    <footer class="row">
      <div class="footer col-md-12 col-sm-12 col-xs-12">
        ~~~
      </div>
    </footer>

Jika kita tinjau lagi, maka untuk tipe layar Monitor, Tablet dan Handphone berdasarkan class-class Bootstrap yang sudah kita masukan maka akan di dapat tampilan layout sebagai berikut.

Monitor :

Untuk Monitor layoutnya tidak berbeda dengan layout di atas, karena acuannya memang ke layout ini.

Tablet :

Handphone :

3. Testing

Untuk pembuatan web responsif sudah selesai, saat ini web statis sudah mendukung Mobile Version dengan penambahan beberapa class-class Bootstrap. Pada langkah di atas penulis tidak menambahkan class ‘col-lg-*‘ untuk tipe Monitor HD karena dari pengalaman di lapangan penggunaan class ‘col-md-*‘ (Monitor) sudah cukup dapat meng-handle untuk tipe layar Monitor HD, namun jika kalian ingin tetap menambahkan classΒ ‘col-lg-*‘ ke dalam elemen HTML di atas untuk tipe layar Monitor HD itupun tidak masalah.

Langkah terakhir, untuk melakukan pengetesan apakah web tersebut sudah benar-benar responsif atau belum silahkan kalian buka file ‘index.html‘ di browser kalian, lalu ikuti langkah-langkah berikut.

  • Mozilla Firefox & Google Chrome
    • Tekan kombinasi tombol pada keyboard (CTRL+SHIFt+M) untuk menampilkan halaman dalam mode Responsive Design Mode.
    • Pada saat kalian berhasil masuk ke mode Responsive Design Mode, di sini kalian dapat memilih tipe-tipe layar berdasarkan jenis Gadget-nya, seperti iPhone 6, Laptop, Google Nexus, dll.
    • Untuk keluar dari mode Responsive Design Mode silahkan tekan kembali kombinasi tombol keyboard (CTRL+SHIFt+M).

Selesai! Sebenarnya masih banyak lagi fitur-fitur Bootstrap yang belum sempat penulis tulis di artikel ini seperti penggunaan Modals, Carousel, Button, Alert, Form, Label, dsb., mungkin di lain kesempatan akan penulis bahas fitur-fitur tersebut. Selamat mencoba…

Source code :

Download source code

Share social media :



Your response about this article :


4 responses to “Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)”

  1. ahmad says:

    bisa tidak yaa posisi sidebar di mobile berada diatas logo, kalo desktop disamping

    • Bisa banget gan, tapi agak ribet ngatur-nya pakai CSS. Jadi saran ane kalo mau gampangnya mending agan bikin 2 sidebar, sidebar1 hanya tampil kalau di mode mobile/responsive (yg di atas logo), sedangkan sidebar2 hanya tampil di mode desktop/normal, di mode mobile/responsive dy ke hidden, caranya tinggal nambahin class ‘visible-XXXX’ ke dalam div.

      Kalo agan pake Bootstrap 3.x ky reverensi di turorial ini coba ngerujuk ke link di bawah gan,
      https://getbootstrap.com/docs/3.3/css/#responsive-utilities

  2. vinyl lantai says:

    maksudbya kode css bawaan worpress kita ganti semuanya dengan kode di atas ya gan, terus penempatanya bagaimana apakah semuanya satu tempat atau beda-beda ?

    • Waduh, telat reply udah expired belom yah?? Hehe… Kalo agan pake WordPress dan sedang develop template WordPress buat di jadiin template Mobile Version seperti di atas, baiknya kode css jangan di jadiin satu gan, agan pasti kesusahan nanti pas developnya. Penempatannya sendiri sebenarnya bebas, yang penting pas agan manggil file2 CSS tersebut di dalam tag harus sesuai path direktorinya.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Posts

Tutorial : Belajar Menggunakan Laravel – Part 5 (Form Input Data)
Tutorial : Belajar Menggunakan Laravel – Part 5 (Form Input Data)
Category : Laravel, Tutorials | November 1st, 2018
1523 | 0

Halo semua, kali ini penulis ingin melanjutkan tutorial cara Belajar Menggunakan Laravel, pada tutorial kali ini penulis ingin memberikan tutorial cara memasukan data ke dalam database yang mana salah satu bagian dari CRUD (Create, Read, Updata, Dele...

Continue reading
Syntax error or access violation: 1071 Specified key was too long
Syntax error or access violation: 1071 Specified key was too long
Category : Laravel, Tips & Tricks | October 18th, 2018
548 | 0

Bagi kalian pengguna Framework Laravel, terutama Laravel mulai dari versi 5.4 keatas pasti pernah mengalami pesan error berikut pada saat melakukan migrasi tabel dengan menggunakan perintah migrate : SQLSTATE[42000]: Syntax error or access violation:...

Continue reading
Tutorial : Belajar Menggunakan Laravel – Part 4 (Model & Konfigurasi Database)
Tutorial : Belajar Menggunakan Laravel – Part 4 (Model & Konfigurasi Database)
Category : Laravel, Tutorials | October 18th, 2018
929 | 0

Halo para pembaca Gaswad, menyambung artikel tutorial Belajar Menggunakan Laravel sebelumnya, kali ini kita akan membahas sedikit tentang pengenalan Model dan bagaimana melakukan Konfigurasi Database, namun pastikan kalian sudah membaca tutorial-tuto...

Continue reading
Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
Category : Laravel, Tutorials | October 9th, 2018
1481 | 0

Di artikel sebelumnya, kita sudah berhasil menampilkan output langsung dari halaman Controller (webController.php) namun hanya sebatas sebagai Debugger saja. Halaman Controller memang tidak di khususkan untuk di kostumisasi sebagai Front-End website,...

Continue reading
Tutorial : Belajar Menggunakan Laravel – Part 2 (Routing & Controller)
Tutorial : Belajar Menggunakan Laravel – Part 2 (Routing & Controller)
Category : Laravel, Tutorials | October 9th, 2018
1035 | 0

Pada artikel kali ini, kita akan belajar menggunakan Routing dan Controller dimana Routing dan Controller ini sudah pasti ada dan disediakan di setiap framework khususnya framework PHP. Sebelum kita melangkah terlalu jauh sampai tidak kelihatan, perl...

Continue reading
Tutorial : Belajar Menggunakan Laravel – Part 1 (Instalasi Laravel)
Tutorial : Belajar Menggunakan Laravel – Part 1 (Instalasi Laravel)
Category : Laravel, Tutorials | October 9th, 2018
1263 | 0

Halo para pembaca GaswadΒ yang setia menunggu artikel baru dari penulis (pede), setelah sekian lama tidak update-update karena di sibukan dengan pekerjaan kantor akhirnya hari ini, jam ini, menit ini dan detik ini, penulis berhasil menyempatkan diri ...

Continue reading
Perbedaan Localhost Dan Web Hosting
Perbedaan Localhost Dan Web Hosting
Category : Others | September 17th, 2018
1985 | 0

Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana suatu website bisa menampilkan konten-konten atau artikel seketika kita melakukan pencarian baik dengan menggunakan mesin pencari atau search engine seperti...

Continue reading
Membuat Efek Gradasi Warna Menggunakan CSS
Membuat Efek Gradasi Warna Menggunakan CSS
Category : Tutorials | September 4th, 2018
4199 | 2

Pada tutorial kali ini kita akan mencoba membuat gradasi warna, apa itu gradasi warna bisa kalian lihat contohnya pada gambar-gambar berikut : Yup, seperti yang sudah kalian lihat pada gambar-gambar tersebut dimana pada tiap gambar memiliki lebih dar...

Continue reading
Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
Category : Tips & Tricks | August 14th, 2018
1142 | 2

Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… Okey langsung saja, untuk artikel kali ini penulis ingin coba berbagi sedikit mengenai tips jika iklan adsense kamu ter-klik, mungkin lebih tepatnya ter-kl...

Continue reading
Tutorial : Cara Install Composer
Tutorial : Cara Install Composer
Category : Others | June 5th, 2018
1218 | 0

Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby (bundler) yang menyediakan format standar untuk mengelola dependensi PHP dan library-library yang diperlukan. Sumber : Wikipedia Jadi secara garis besar, d...

Continue reading
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Category : Tips & Tricks | November 13th, 2017
1438 | 0

Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tampilan bahwa domain kalian di blacklist atau di blokir oleh Google, alhasil tentunya website kalian tidak akan bisa di akses. Ada yang pernah ngalamin?? Bebe...

Continue reading
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Category : Tutorials | November 13th, 2017
2098 | 4

Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. Hehe… πŸ˜€ Ssetelah sekian lama ngga update akhirnya dapet kesempatan nyolong-nyolong waktu buat nge-update artikel Gaswad. Pada pembahasan artikel k...

Continue reading

Wordpress

  • Sep
    16
    2019
    Tutorial : Membuat Website Multi-Bahasa Dengan WordPress
    Selamat malam semua, pada tutorial kali ini kita akan coba membuat website dengan fitur Multi-B...
    Read more
  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • More articles
Tips & Tricks

  • May
    15
    2019
    Multiple Versi PHP di XAMPP??? Kenapa Tidak!
    Pada artikel kali ini penulis ingin berbagi tips bagaimana menjalankan multiple versi PHP di da...
    Read more
  • Nov
    02
    2018
    8 Tips Memilih Jasa Server Hosting Terbaik
    Pada artikel kali ini penulis ingin memberikan beberapa tips memilih server hosting terbaik. Ba...
    Read more
  • Oct
    18
    2018
    Syntax error or access violation: 1071 Specified key was too long
    Bagi kalian pengguna Framework Laravel, terutama Laravel mulai dari versi 5.4 keatas pasti pern...
    Read more
  • Aug
    14
    2018
    Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
    Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… ...
    Read more
  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • More articles
Tutorials

  • Sep
    16
    2019
    Tutorial : Membuat Website Multi-Bahasa Dengan WordPress
    Selamat malam semua, pada tutorial kali ini kita akan coba membuat website dengan fitur Multi-B...
    Read more
  • Jul
    18
    2019
    Tutorial : Integrasi Custom Media Gallery Dengan TinyMCE Dan Bootstrap
    Holllaa…! Apa kabar para calon-calon programer handal yang baik dan budiman! Semoga setel...
    Read more
  • Jul
    18
    2019
    Instalasi Text Editor WYSIWYG TinyMCE
    Sesuai pada judul artikel ini, beberapa kalian pasti masih ada yang belum mengenal apa itu Text...
    Read more
  • Apr
    30
    2019
    Tutorial : Belajar Menggunakan Laravel – Part 8 (Delete Data) END
    Artikel kali ini merupakan artikel terakhir tentang tutorial Belajar Menggunakan Laravel, pada ...
    Read more
  • Apr
    30
    2019
    Tutorial : Belajar Menggunakan Laravel – Part 7 (Update/Edit Data)
    (Curcol) Sempat hilang kabar sampai berbulan-bulan akhirnya penulis kembali lagi untuk melanjut...
    Read more
  • More articles
Others

  • Sep
    17
    2018
    Perbedaan Localhost Dan Web Hosting
    Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana s...
    Read more
  • Jun
    05
    2018
    Tutorial : Cara Install Composer
    Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby ...
    Read more
  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • More articles
Page generated in : 1037.29 ms