Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 6: Responsive Layout menggunakan Flexbox)

Modul 6: Responsive Layout menggunakan Flexbox

Flexible Box Model
Flex Container
Flex Grow
Flex Direction
Flexible Basis
Membuat Layout Kalkulator : Membuat Struktur HTML kalkulator
Menerapkan Flexbox pada Halaman Kalkulator
Mempercantik tampilan kalkulator
Responsibilitas pada Tampilan Mobile

Responsive Layout menggunakan Flexbox

Sampai tahap ini kita sudah memahami dua pilar yang dalam membentuk sebuah website, yakni HTML dan CSS, dengan membuat sebuah halaman website sederhana dalam menampilkan informasi mengenai kota Bandung.

Dalam pengembangannya kita sudah memahami perbedaan block element dan inline element. Kita juga sudah terapkan konsep semantic HTML sehingga kerangka HTML yang dibuat, sesuai dengan fungsi elemennya.

Lalu kita juga sudah memahami bagaimana cara kerja CSS dalam mendekorasi elemen HTML, menetapkan sebuah selector, membangun layout dengan menggunakan float, dan mengetahui prinsip pendekatan layout yang responsif dengan teknik media query.

Selanjutnya kita akan belajar mengenai pilar ketiga dalam pengembangan website, yaitu JavaScript. Dalam mempelajarinya kita akan coba menyelesaikan sebuah studi kasus, yakni membuat kalkulator berbasis website. Targetnya pada akhir kelas ini kita dapat membangun kalkulator sederhana yang tampak gambar di bawah ini:

Menarik bukan? Tentunya sebelum kita membahas JavaScript lebih jauh, kita akan belajar bagaimana cara membuat layout kalkulator.

Dalam proses pembuatanya, kita akan mencoba teknik baru dalam penyusunan layout, yakni menggunakan Flexbox. Teknik ini hadir pada CSS3 dan menjadi salah satu pendekatan populer dalam penyusunan layout yang responsif. Nantinya kalkulator yang kita kembangkan ini dapat digunakan dengan baik pada mobile device.

1. Flexible Box Model

Jadi apa sebenarnya itu flexbox atau flexible box model? Pada dasarnya flexbox merupakan mode layout yang mudah dan praktis untuk mengatur elemen dengan menggunakan sebuah container.

Sebelumnya kita sudah menggunakan teknik float dalam penyusunan layout. Float memang cukup mudah dipahami tetapi tak cukup praktis untuk digunakan. Passalnya, kita memerlukan pengukuran dimensi yang tepat agar elemen berada posisi yang diinginkan.

Dengan Flexbox kita dapat mengatur ukuran secara otomatis dan mampu beradaptasi dengan ukuran container-nya. Dengan kemampuan flexibelnya, tampilan layout yang disusun menggunakan flexbox menjadi mobile-friendly. Selain itu, flexbox dapat dikombinasikan dengan media query, sehingga ia dapat lebih optimal lagi digunakan pada peranti mobile.

Berikut beberapa konsep dari flexbox yang perlu kita ketahui:

Dapat mengubah ukuran dimensi elemen dengan menyesuaikan ukuran yang cocok bagi ruang kosong yang ada pada container-nya.
Flexbox is directional agnostic. ini berbeda dengan konsep block model di mana elemen selalu ditampilkan secara vertikal dengan membuat baris baru. Ini berbeda pula dengan konsep inline model di mana elemen selalu ditampilkan secara horizontal. Dengan flexbox kita dapat melakukan kedua hal tersebut dengan mudah.
Dibuat untuk menyusun layout yang mobile friendly.

2. Flex Container

Flex container merupakan sebuah elemen yang menampung beberapa flex item. Karena Parent-child merupakan relasi yang wajib ada dalam penerapan flexbox, maka setiap flex item harus merupakan anak / child dari flex container.

Secara default deretan flex-item pada container ditampilkan secara horizontal. Ketika menggunakan flex, kita tidak perlu mengatur dimensi dari tiap flex item secara manual untuk mengisi ruang kosong pada container. Sebelum ada flexbox, hal ini jadi kendala umum. Alih-alih, kita harus melakukan perhitungan yang tepat agar tak terjadi overflow pada layout yang ditampilkan.

Untuk membuat sebuah flex container kita gunakan properti display dengan nilai flex. Dengan demikian seluruh anak dari container tersebut akan menjadi flex item. Berikut contoh penerapan flexbox untuk membuat tampilan seperti gambar di atas:

<!doctype html>
<html lang="en">
<head>
   <style>
       .container {
           display: flex;

           /* Properti lainnya */
           width: 800px;
           height: 250px;
           background-color: #11C5C6;
           border: 2px solid black;
           padding: 20px;
           border-radius: 10px;
           margin: 0 auto;
       }
       .box {
           flex-grow: 1;

           /* properti lainnya */
           background-color: #FBDD1C;
           margin: 5px;
           border: 2px solid black;
           border-radius: 10px;
       }
   </style>
</head>
<body>
<div class="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>
</body>
</html>

Output dari kode di atas adalah:

3. Flex Grow

Bisa kita lihat seluruh box di dalam container dapat menyesuaikan ukurannya sesuai ruang kosong yang ada pada container. Pada box, kita tidak menetapkan nilai dimensi seperti width dan height. Kita cukup menggunakan satu properti yakni flex-grow: 1;.

Properti flex-grow ini digunakan untuk memberitahu berapa banyak ukuran yang harus ditetapkan oleh flex-item. Nilai dari properti ini bukan nilai dari dimensi asli pada flex item, melainkan nilai yang relatif terhadap ruang kosong pada flex container.

Jika kita menetapkan nilai yang sama pada seluruh flex item, maka dimensi dari tiap flex item akan sama rata dan memenuhi ruang kosong yang ada pada container. Namun jika kita memberikan nilai yang berbeda dari salah satu itemnya, contohnya nilai yang lebih besar, maka flex item tersebut akan mencakup ukuran yang lebih besar. Flex item yang lain akan menyusut menyesuaikan agar tetap masuk pada ruang flex container. Contohnya seperti berikut:

<!doctype html>
<html lang="en">
<head>
   <style>
       .container {
           display: flex;

           /* Properti lainnya */
           width: 800px;
           height: 250px;
           background-color: #11C5C6;
           border: 2px solid black;
           padding: 20px;
           border-radius: 10px;
           margin: 0 auto;
       }
       .box {
           /* properti lainnya */
           background-color: #FBDD1C;
           margin: 5px;
           border: 2px solid black;
           border-radius: 10px;
       }

       .first {
           flex-grow: 1;
       }
       .second {
           flex-grow: 2;
       }

       .third {
           flex-grow: 1;
       }
   </style>
</head>
<body>
<div class="container">
   <div class="box first"></div>
   <div class="box second"></div>
   <div class="box third"></div>
</div>
</body>
</html>

Output dari kode di atas adalah:

Cara kerja flex-grow mirip seperti potongan kue. Ruang kosong pada elemen akan dibagi-bagi sesuai besaran nilainya. Contoh di atas memberi kita gambaran seperti sebuah kue dengan luas total 4, kemudian kue tersebut dipotong menjadi 3 potong. Potongan yang tengah mendapatkan 2 bagian dan potongan yang lainnya masing - masing mendapatkan 1 bagian. Maka potongan yang tengah akan lebih besar dari potongan yang lain.

Betapa fleksibelnya bukan? Yang harus kita ingat, ketika kita mengubah ukuran dari suatu flex item, maka flex item yang lain pun akan terpengaruh.

4. Flex Direction

Seperti yang sudah kita ketahui sebelumnya, Flexbox merupakan directional agnostic, di mana kita dapat mengubah arah flex-item ditempatkan pada container. Secara default deretan flex-item ditampilkan secara horizontal, namun kita dapat mengubahnya dengan menetapkan properti flex-direction pada container-nya.

<!doctype html>
<html lang="en">
<head>
   <style>
       .container {
           display: flex;
           flex-direction: column;

           /* Properti lainnya */
           width: 800px;
           height: 250px;
           background-color: #11C5C6;
           border: 2px solid black;
           padding: 20px;
           border-radius: 10px;
           margin: 0 auto;
       }
       .box {
           /* properti lainnya */
           background-color: #FBDD1C;
           margin: 5px;
           border: 2px solid black;
           border-radius: 10px;
       }

       .first {
           flex-grow: 3;
       }
       .second {
           flex-grow: 2;
       }

       .third {
           flex-grow: 1;
       }
   </style>
</head>
<body>
<div class="container">
   <div class="box first"></div>
   <div class="box second"></div>
   <div class="box third"></div>
</div>
</body>
</html>

Output dari kode di atas adalah:

Ada empat nilai yang bisa digunakan untuk properti flex-direction, antara lain:

row : merupakan nilai default, di mana deretan flex-item pada container ditampilkan secara horizontal.
row-reverse : memiliki sifat yang sama seperti row, namun urutan flex item-nya ditukar.
column : Deretan flex-item pada container ditampilkan secara vertikal.
column-reverse : memiliki sifat yang sama seperti column, namun urutan flex item-nya ditukar.

Karena properti flex-direction ini, kita dapat membuat dua dimensional layout dengan menempatkan flex container di dalam flex container, dalam arti lain sebuah flex container dapat memiliki child berupa flex container lain.

<!doctype html>
<html lang="en">
<head>
   <style>
       .flex-column {
           display: flex;
           flex-direction: column;

           /* properti lainnya */
           width: 800px;
           height: 300px;
           padding: 20px;
           margin: 0 auto;
           border: 2px solid black;
           border-radius: 10px;
           background-color: #11C5C6;
       }

       .flex-row {
           display: flex;
           flex-direction: row;
           flex-grow: 1;

           /* properti lainnya */
           padding: 20px;
           margin: 5px;
           background-color: #FBDD1C;
           border: 2px solid black;
           border-radius: 10px;
       }

       .box {
           flex-grow: 1;

           /* properti lainnya */
           margin: 5px;
           border: 2px solid black;
           border-radius: 10px;
           background-color: #fe899a;
       }
   </style>
</head>
<body>
<div class="flex-column">
   <div class="flex-row">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
   </div>
   <div class="flex-row">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
   </div>
</div>
</body>
</html>

Output dari kode di atas adalah:

Hal ini yang akan kita gunakan nanti sebagai dasar dalam membangun layout kalkulator.

5. Flexible Basis

Selain menggunakan flex-grow, untuk menentukan ukuran flex item, kita bisa gunakan properti flex-basis. Properti ini mirip seperti width dalam menentukan dimensi box. Kita bisa menggunakan nilai satuan tetap seperti px, pt, pc, cm dll, atau kita juga bisa menggunakan satuan persentase %.

Flex-grow ini digunakan ketika kita ingin menetapkan ukuran awal pada sebuah flex-item. Alhasil, kita dapat mengatur ukuran dengan lebih leluasa. Flex-grow biasa digunakan ketika kita menerapkan nested flex-container dan terdapat perbedaan jumlah child pada container-nya. Untuk lebih mudah menggambarkannya, perhatikan contoh berikut:

<!doctype html>
<html lang="en">
<head>
   <style>
       * {
           box-sizing: border-box;
       }
       .container {
           width: 800px;
           border: 2px solid black;
           margin: 0 auto;
       }

       .flex-column {
           display: flex;
           flex-direction: column;
       }

       .flex-row {
           display: flex;
           flex-direction: row;
           flex-grow: 1;
       }

       .box {
           flex-grow: 1;
           background-color: cornflowerblue;
           border: 2px solid black;
           padding: 40px;
           text-align: center;
           color: white;
           font-size: 1.5em;
       }
   </style>
</head>
<body>
<div class="container">
   <div class="flex-column">
       <div class="flex-row">
           <div class="box">1</div>
           <div class="box">2</div>
           <div class="box">3</div>
           <div class="box">4</div>
       </div>
       <div class="flex-row">
           <div class="box">5</div>
           <div class="box">6</div>
           <div class="box">7</div>
       </div>
   </div>
</div>
</body>
</html>

Output dari kode di atas adalah:

Pada contoh di atas kita memiliki satu buah flex-container column yang di dalamnya terdapat dua buah flex-container row. Kemudian flex-container row yang pertama memiliki empat buah flex-item, dan yang kedua memiliki tiga buah flex-item.

Standarnya ketika kita menggunakan nilai flex-grow: 1 pada seluruh flex-item yang ada, maka tampilan akan seperti gambar di atas. Namun bagaimana jika kita ingin mengatur flex-item di row kedua dengan tampilan berbeda seperti di bawah ini?

Jika kita menggunakan flex-grow, mungkin kita dapat memberikan nilai flex-grow: 2 pada box ke tujuh.

....
<div class="box double">7</div>
...

.....
.double {
   flex-grow: 2;
}

Namun hasilnya akan tampak seperti ini:

Sebabya, properti flex-grow tidak menjamin elemen yang menerapkan nilai 2 akan lebih besar 2 kali lipat dari nilai 1.

Flex-grow akan mencari nilai yang sesuai yang dapat dibagi pada flex-items. Agak terdengar aneh, bukan? Nah, temukan artikel yang cukup menarik yang membahas permasalahan ini pada tautan berikut.

Sebenarnya bisa saja kita menggunakan flex-grow untuk mendapatkan hasil yang diinginkan namun kita harus mencari nilai yang pas secara manual. Ini tentunya akan memakan waktu lebih.

Pada kasus seperti ini, solusinya adalah menggunakan properti flex-basis. Dengan properti ini kita dapat asumsikan bahwa total ruang kosong pada flex-container adalah 100%. Jika dibagi rata terhadap empat buah flex-item, maka tiap itemnya harus memiliki nilai 25%.

<!doctype html>
<html lang="en">
<head>
   <style>
       * {
           box-sizing: border-box;
       }

       .container {
           width: 800px;
           border: 2px solid black;
           margin: 0 auto;
       }

       .flex-column {
           display: flex;
           flex-direction: column;
       }

       .flex-row {
           display: flex;
           flex-direction: row;
           flex-grow: 1;
       }

       .box {
           flex-basis: 25%;
           background-color: cornflowerblue;
           border: 2px solid black;
           padding: 40px;
           text-align: center;
           color: white;
           font-size: 1.5em;
       }
   </style>
</head>
<body>
<div class="container">
   <div class="flex-column">
       <div class="flex-row">
           <div class="box">1</div>
           <div class="box">2</div>
           <div class="box">3</div>
           <div class="box">4</div>
       </div>
       <div class="flex-row">
           <div class="box">5</div>
           <div class="box">6</div>
           <div class="box">7</div>
       </div>
   </div>
</div>
</body>
</html>

Output kode di atas adalah:

Maka seluruh flex-items akan memiliki ukuran yang sama. Tetapi pada flex-container baris kedua terdapat 25% ruang bebas, karena jumlah flex-itemnya hanya tiga. Kita bisa menggunakan ruang kosong tersebut untuk membuat box tujuh lebih besar dua kali lipat dengan menggunakan nilai flex-basis: 50%;

....
<div class="box double">7</div>
...

.....
.double {
   flex-basis: 50%;
}

6. Membuat Layout Kalkulator : Membuat Struktur HTML kalkulator

Setelah mengenal dasar penggunaan flexbox, mari sekarang kita terapkan apa yang sudah kita pelajari dengan membuat dasar layout kalkulator.

Membuat struktur HTML kalkulator

Mari kita membuat sebuah project baru dengan membuat folder baru dan beri nama folder sesuai keinginan atau pada contoh kali ini kita beri nama “WebCalculator”. Lalu buka folder tersebut menggunakan teks editor yang Anda miliki dan buat berkas HTML baru dengan nama “index.html”.

Tampilan project yang dibuka menggunakan Visual Studio Code

Setelah itu, buka berkas index.html dan tuliskan struktur dasar HTML, mulai dari elemen <html>, <head>, dan <body>.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

Jangan untuk lupa tambahkan elemen <title> di dalam <head>.

<!DOCTYPE html>
<html>

<head>
<title>Web Calculator</title>
</head>

<body></body>

</html>

Sesuai yang sudah kita pelajari untuk menggunakan flexbox, kita membutuhkan sebuah container, jadi pada elemen <body> buatlah sebuah column container. Di dalamnya terdapat empat buah row container dan di dalam masing masing row container terdapat empat buah item-flex. Maka tuliskan kode berikut di dalam elemen <body>:

<div class="flex-container-column">
       <div class="flex-container-row">
           <div class="button"></div>
           <div class="button"></div>
           <div class="button"></div>
           <div class="button"></div>
       </div>
       <div class="flex-container-row">
           <div class="button"></div>
           <div class="button"></div>
           <div class="button"></div>
           <div class="button"></div>
       </div>
       <div class="flex-container-row">
           <div class="button"></div>
           <div class="button"></div>
           <div class="button"></div>
           <div class="button"></div>
       </div>
       <div class="flex-container-row">
           <div class="button"></div>
           <div class="button"></div>
           <div class="button"></div>
           <div class="button"></div>
       </div>
</div>

Pada kode di atas, elemen column container kita berikan nilai class “flex-container-column”, tiap elemen row container kita berikan nilai class “flex-container-row” dan tiap flex item pada row container kita berikan nilai class “button”.

Kemudian setiap elemen .button, di dalamnya kita berikan teks yang digunakan untuk melabelkan tiap-tiap tombolnya. Tuliskan teks angka 0 hingga 9 beserta operator-operator yang akan digunakan pada kalkulator dengan urutan seperti ini:

<div class="flex-container-column">
       <div class="flex-container-row">
           <div class="button">7</div>
           <div class="button">8</div>
           <div class="button">9</div>
           <div class="button">+/-</div>
       </div>
       <div class="flex-container-row">
           <div class="button">4</div>
           <div class="button">5</div>
           <div class="button">6</div>
           <div class="button">-</div>
       </div>
       <div class="flex-container-row">
           <div class="button">1</div>
           <div class="button">2</div>
           <div class="button">3</div>
           <div class="button">+</div>
       </div>
       <div class="flex-container-row">
           <div class="button">CE</div>
           <div class="button">0</div>
           <div class="button">=</div>
           <div class="button"></div>
       </div>
</div>

Pada .flex-container-row terakhir, terdapat satu flex-item yang tidak diberikan nilai teks. Item tersebut memang tidak kita butuhkan sehingga kita bisa hapus elemen tersebut.

Jika kita perhatikan dari beberapa tombol di atas, ada yang berupa tombol angka, operator dan fungsi. Untuk tombol operator seperti tambah (+) dan kurang (-) berikan class tambahan dengan nilai “operator”.

.....
<div class="button operator">-</div>
.....
<div class="button operator">+</div>

Kemudian untuk tombol fungsi seperti negative (+/-), clear (CE), dan equals (=) berikan class tambahan dengan nilai sesuai dengan fungsinya tersebut.

....
<div class="button negative">+/-</div>
....
<div class="button clear">CE</div>
....
<div class="button equals">=</div>

Penamaan class yang spesifik seperti ini dibutuhkan untuk memudahkan kita mengambil nilai elemen nanti ketika menggunakan JavaScript, hal ini juga membantu kita untuk memudahkan penentuan selector untuk styling menggunakan CSS.

Sebuah kalkulator tentu tidak hanya terdiri dari tombol saja bukan? Tiap kalkulator pasti memiliki layar untuk menampilkan apa yang pengguna input dan menampilkan hasil kalkulasinya. Dengan begitu kita membutuhkan elemen lain yang berfungsi sebagai layar. Tambahkan elemen div baru tepat di bawah tag pembuka .flex-container-column dan beri atribut class dengan nilai “display”.

<div class="flex-container-column">
<div class="display"></div>
<div class="flex-container-row">
...........

Kemudian di dalam elemen .display tersebut tambahkan elemen <h1></h1> sebagai teks yang berfungsi untuk menampilkan angka pada layar tersebut.

<div class="display">
<h1 id="displayNumber">0</h1>
</div>

Sejauh ini struktur kode yang ada pada berkas index.html akan tampak seperti ini:

<!DOCTYPE html>
<html>

<head>
   <title>Web Calculator</title>
   <link rel="stylesheet" href="assets/style.css">
</head>

<body>
   <div class="flex-container-column">
       <div class="display">
           <h1 id="displayNumber">0</h1>
       </div>
       <div class="flex-container-row">
           <div class="button">7</div>
           <div class="button">8</div>
           <div class="button">9</div>
           <div class="button negative">+/-</div>
       </div>
       <div class="flex-container-row">
           <div class="button">4</div>
           <div class="button">5</div>
           <div class="button">6</div>
           <div class="button operator">-</div>
       </div>
       <div class="flex-container-row">
           <div class="button">1</div>
           <div class="button">2</div>
           <div class="button">3</div>
           <div class="button operator">+</div>
       </div>
       <div class="flex-container-row">
           <div class="button clear">CE</div>
           <div class="button">0</div>
           <div class="button equals">=</div>
       </div>
   </div>
</body>

</html>

Jika kita buka melalui browser, tampilan saat ini masih terlihat aneh.

Yups, hal tersebut wajar karena <div> tidak akan berpengaruh apa apa hingga kita memberikan styling pada elemen tersebut.

7. Menerapkan Flexbox pada Halaman Kalkulator

Setelah kita selesai membuat struktur HTML selanjutnya kita percantik elemen - elemen tersebut dengan styling.

Buatlah folder baru di dalam project WebCalculator dan berikan nama “assets”. Kemudian di dalam folder tersebut buatlah berkas css dan berikan nama “style.css”. Sehingga struktur project kita saat ini akan tampak seperti ini:

Struktur project WebCalculator

Sebelum memulai menuliskan styling pada CSS, jangan lupa untuk hubungkan berkas style.css sebagai stylesheet pada index.html. Tuliskan tag <link> berikut ini di dalam elemen <head>:

<link rel="stylesheet" href="assets/style.css">

Untuk memulai menuliskan styling, kita buka berkas style.css. Kita mulai dengan membuat seluruh elemen menerapkan nilai border-box pada properti box-sizing. Tuliskan rule berikut pada berkas style.css.

* {
   box-sizing: border-box;
}

Lalu kita tetapkan font family pada seluruh teks yang ada di dalam body dengan menggunakan sans-serif.

body {
   font-family: sans-serif;
}

Selanjutnya kita mulai terapkan flexbox pada .flex-container-column dengan memberikan nilai flex pada properti display. Jangan lupa tetapkan properti flex-direction: column dan properti pendukung lainnya. Sehingga styling .flex-container-column akan tampak seperti berikut:

.flex-container-column {
   display: flex;
   flex-direction: column;

   /* properti pendukung */
   max-width: 800px;
   margin: 0 auto;
   text-align: right;
}

Terapkan juga properti display: flex pada .flex-container-row. Namun kita tidak harus menerapkan flex-direction pada elemen ini, karena nilai row sudah menjadi default pada flex-container. Sehingga penulisan styling untuk .flex-container-row cukup dituliskan seperti berikut:

.flex-container-row {
   display: flex;
}

Mari kita lanjut atur styling untuk tombol kalkulatornya. Pada tiap .button kita akan beri nilai flex-basis sebesar 25% beserta properti pendukung lainnya sehingga tombol kalkulator akan memenuhi seluruh ruang kosong pada container. Tuliskan styling berikut untuk .button:

.button {
   flex-basis: 25%;
  
   /* properti pendukung */
   font-size: 1.5em;
   text-align: center;
   padding: 40px;
   border: 1px solid black;
   background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
   cursor: pointer;
}

Simpan berkas style.css dan coba buka index.html pada browser. Tampilan akan nampak seperti ini:

Sekarang sudah terlihat tampilan kalkulator pada umumnya, bukan? Tombol kalkulator akan memenuhi seluruh ruang kosong pada container terkecuali tombol yang terdapat pada flex-container-row terakhir karena jumlah button nya hanya tiga buah.

Agar kontainer terisi penuh, kita buat tombol equals (=) memiliki nilai flex-basis: 50% sehingga tombol tersebut memiliki besar 2 kali dibandingkan dengan tombol yang lainnya. Tambahkan nilai class “double” pada tombol tersebut.

<div class="button double">=</div>

Kemudian tetapkan nilai flex-basis: 50%; pada .double seperti berikut:

.double {
   flex-basis: 50%;
}

Sehingga sekarang tampilan button pada browser akan tampak seperti ini:

Sejauh ini kode yang terdapat pada style.css dan index.html akan tampak seperti berikut:

* {
   box-sizing: border-box;
}

body {
   font-family: sans-serif;
}

.flex-container-column {
   display: flex;
   /* properti pendukung */
   flex-direction: column;
   max-width: 800px;
   margin: 0 auto;
   text-align: right;
}

.flex-container-row {
   display: flex;
}

.button {
   flex-basis: 25%;
   /* properti pendukung */
   font-size: 1.5em;
   text-align: center;
   padding: 40px;
   border: 1px solid black;
   background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
   cursor: pointer;
}

.double {
   flex-basis: 50%;
}

<!DOCTYPE html>
<html>

<head>
   <title>Web Calculator</title>
   <link rel="stylesheet" href="assets/style.css">
</head>

<body>
   <div class="flex-container-column">
       <div class="display">
           <h1 id="displayNumber">0</h1>
       </div>
       <div class="flex-container-row">
           <div class="button">7</div>
           <div class="button">8</div>
           <div class="button">9</div>
           <div class="button negative">+/-</div>
       </div>
       <div class="flex-container-row">
           <div class="button">4</div>
           <div class="button">5</div>
           <div class="button">6</div>
           <div class="button operator">-</div>
       </div>
       <div class="flex-container-row">
           <div class="button">1</div>
           <div class="button">2</div>
           <div class="button">3</div>
           <div class="button operator">+</div>
       </div>
       <div class="flex-container-row">
           <div class="button clear">CE</div>
           <div class="button">0</div>
           <div class="button equals double">=</div>
       </div>
   </div>
</body>

</html>

8. Mempercantik tampilan kalkulator

Setelah selesai dengan penerapan flexbox untuk tombol kalkulator, selanjutnya kita akan mempercantik bagian lain pada kalkulator. Pada bagian kali ini sebenarnya Anda bisa bebas berekspresi dalam menerapkan styling. Anda bisa gunakan kemampuan seni Anda ditambah pengetahuan CSS yang sudah Anda kuasai.

Tapi jika Anda ingin membuat tampilan kalkulator tampak seperti yang sudah dicontohkan ini:

Anda bisa mengikuti langkah - langkah materi kali ini:

Yang pertama kita akan mempercantik display yang ada pada kalkulator dengan menambahkan background-color, padding, border, dan lain sebagainya. Untuk itu mari kita tetapkan styling pada .display dengan nilai - nilai properti sebagai berikut:

.display {
   color: white;
   width: 100%;
   padding: 10px 20px;
   background-color: #333333;
   border: 1px solid black;
   font-size: 2em;
}

Dengan begitu maka display akan tampak seperti ini:

Selanjutnya kita akan membuat tombol kalkulator yang merupakan sebuah operator, fungsi negative dan fungsi equals berwarna orange. Dengan begitu kita perlu menetapkan nilai background-color pada elemen yang memiliki class .operator, .negative, dan .equals.

.operator,
.negative,
.equals {
   background: orange;
}

Maka sekarang tombol tersebut akan tampak berwarna orange.

Lalu kita akan membuat efek card pada calculator agar kalkulator tampak seperti berada pada sebuah kartu yang terdapat bayangan pada tepiannya. Hal ini sudah pernah kita lakukan pada latihan project halaman profile, masih ingat kan?

Buatlah rule styling baru dengan selector .card, dan beri nilai properti seperti di bawah ini:

.card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   padding: 30px;
   margin-top: 20px;
}

Kemudian terapkan dengan menambahkan class card pada flex-container column.

<div class="flex-container-column card">

Sehingga sekarang kalkulator akan tampak seolah - olah berada di dalam kartu.

Terakhir, kita juga bisa tambahkan sebuah efek lain pada tombol dengan memanfaatkan pseudo-class :hover. Kita buat efek teks menjadi lebih tebal ketika kursor diarahkan pada salah satu tombol. Tambahkan rule dengan selector .botton:hover dengan nilai properties berikut.

.button:hover {
   font-weight: bold;
}

Sekarang teks pada tombol akan menjadi tebal ketika terdapat kursor yang diarahkan.

Sejauh ini berikut kode yang ada pada index.html dan style.css:

<!DOCTYPE html>
<html>

<head>
   <title>Web Calculator</title>
   <link rel="stylesheet" href="assets/style.css">
</head>

<body>
   <div class="flex-container-column card">
       <div class="display">
           <h1 id="displayNumber">0</h1>
       </div>
       <div class="flex-container-row">
           <div class="button">7</div>
           <div class="button">8</div>
           <div class="button">9</div>
           <div class="button negative">+/-</div>
       </div>
       <div class="flex-container-row">
           <div class="button">4</div>
           <div class="button">5</div>
           <div class="button">6</div>
           <div class="button operator">-</div>
       </div>
       <div class="flex-container-row">
           <div class="button">1</div>
           <div class="button">2</div>
           <div class="button">3</div>
           <div class="button operator">+</div>
       </div>
       <div class="flex-container-row">
           <div class="button clear">CE</div>
           <div class="button">0</div>
           <div class="button equals double">=</div>
       </div>
   </div>
</body>

</html>

* {
   box-sizing: border-box;
}

body {
   font-family: sans-serif;
}

.flex-container-column {
   display: flex;
   /* properti pendukung */
   flex-direction: column;
   max-width: 800px;
   margin: 0 auto;
   text-align: right;
}

.flex-container-row {
   display: flex;
}

.button {
   flex-basis: 25%;
   /* properti pendukung */
   font-size: 1.5em;
   text-align: center;
   padding: 40px;
   border: 1px solid black;
   background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
   cursor: pointer;
}

.double {
   flex-basis: 50%;
}

.display {
   color: white;
   width: 100%;
   padding: 10px 20px;
   background-color: #333333;
   border: 1px solid black;
   font-size: 2em;
}

.operator,
.negative,
.equals {
   background: orange;
}

.card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   padding: 30px;
   margin-top: 20px;
}

.button:hover {
   font-weight: bold;
}

9. Responsibilitas pada Tampilan Mobile

Sejauh ini layout kalkulator yang kita buat sudah cukup baik, namun apakah sudah cukup baik juga ketika tampil pada device mobile? Untuk melihatnya, kita bisa coba dengan menggunakan Dev Tools pada browser kita.

Gambar di atas merupakan kalkulator yang kita buat di akses melalui device Google Pixel 2 XL. Tampilan kalkulator sudah responsif namun, teks tombol masih terlalu kecil tampilannya. Aspek aksesibilitas penggunanya, kurang.

Agar tampilan lebih optimal pada viewport mobile devices, pertama kita tambahkan meta tag viewport pada index.html agar tampilan dapat menyesuaikan dengan beberapa layar yang berbeda.

<head>
   <title>Web Calculator</title>
   <link rel="stylesheet" href="assets/style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Dengan begitu ukuran teks dan box dimension akan disesuaikan pada mobile devices. Namun tampilan tombol akan overflow karena padding pada tiap tombol yang kita tentukan terlalu besar.

Pada situasi ini kita dapat menggunakan @media query untuk menetapkan nilai padding yang pas ketika di akses pada mobile device. Tuliskan rule berikut pada styles.css:

@media screen and (max-width: 513px) {
   .button {
       padding: 10px;
   }
}

Sekarang tampilan tombol akan menerapkan nilai padding yang lebih kecil ketika diakses menggunakan ukuran layar dengan lebar di bawah 513px.

Sunday, September 20, 2020

Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 6: Responsive Layout menggunakan Flexbox)

Membuat struktur HTML kalkulator

No comments:

About

Formulir Kontak

Pages

Label

Ads By Google

Arsip Blog

Sunday, September 20, 2020

Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 6: Responsive Layout menggunakan Flexbox)

Membuat struktur HTML kalkulator

Related Posts

No comments:

About

Formulir Kontak

Pages

Label

Ads By Google

Arsip Blog