Tutorial Material Design Form dengan Materialize CSS

Tutorial Material Design Form dengan Materialize CSS

Yoo.. selamat datang kembali di Code Pelajar. Kali ini saya akan berbagi tutorial menarik seputar material design. Sebelumnya juga saya menggunakan konsep material desain seperti pada template WP Mini, juga membuat Formulir Kontak WhatsApp yang bisa kalian temukan disini. Saya masih penasaran mempelajari css framework yang bernama Materialize CSS dan mengembangkannya. Jika sobat belum tahu apa itu Materialize CSS bisa klik tautan disini.


Oke pada kesempatan kali ini saya akan mengupas tutorial bagaimana membuat material design form? Yup mendesain form gaya material caranya mudah sekali, cukup menggunakan framework css Materialize (bagi yang belum tau framework klik disini). Framework ini di desain untuk membuat tampilan UI (User Interface) pada website menjadi gaya material design yang diciptakan oleh tim Google pada produk-produknya.


Nah pada tutorial kali ini ada 6 point yang akan saya bahas sampai formnya jadi yaitu


1. Persiapan Sebelum Tutorial

Sebelum masuk ke tutorial, saya harap sobat telah membaca dokumentasi tentang Layouting, Form, serta dokumentasi lainnya yang ada pada Materialize yang bisa sobat temukan disini. Jika sudah paham walau sedikit bisa coba langsung prakteknya. Untuk melakukan aksinya sobat bisa membuat di Codepen, ataupun langsung menggunakan plain text file dengan code editor itu terserah anda.


2. Menyiapkan Kerangka HTML / Boilerplate

Nah jika sudah paham pada poin pertama maka kita akan membuat kerangka htmlnya terlebih dahulu. kira-kira seperti ini:


<!DOCTYPE html>
<html>
 <head>
  <!-- Viewport untuk responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <!-- Material Icon -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- inline css -->
  <style type="text/css">
      
  </style>
 </head>

 <body>
  <div class="bg-flat"></div>

     <!-- main content -->
   
  <!--JavaScript at end of body for optimized loading-->
  <!-- jika kamu ingin menggunakan jQuery taruh script library-nya  diatas materialize --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </body>
</html>


Pada kerangka diatas sudah ditambahkan framework Materialize juga dengan javascriptnya. Kalau sobat ingin menggunakan jQuery, tinggal pasang saja pada templatenya (baca cara memasang jQuery disini). Untuk bagian kode dalam tag <head> biarkan saja dulu seperti itu. Begitupun dengan gaya huruf kita menggunakan huruf bawaan dari framework cssnya saja.


3. Mengaktifkan Fungsi JS pada Materialize CSS

Mungkin sama seperti framework kebanyakan, di Materialize juga kita perlu mengaktifkan fungsi javascriptnya. Tujuannya agar kode atau class bawaan yang membuat gaya material ini bisa bekerja seperti seharusnya. Jika tidak mengaktifkannya maka jangan heran kalau html yang dibuat tidak akan bekerja atau berbeda dengan yang ada di dokumentasinya.

Caranya cukup mudah kamu hanya menulis kode javascript Auto Init saja seperti ini sebelum tag penutup </body>


<script>
M.AutoInit();
<script>

Dengan Auto init ini akan otomatis merender semua fungsi js materialize sehingga fungsinya bisa berjalan dengan baik. Sebenarnya cara ini tidak dianjurkan karena ini sama saja dengan memanggil semua kode javascript dari file js frameworknya. Namun saya memakainya agar tidak ribet saja.


4. Membuat Material Form

Akhirnya kita ke tahap pembuatan, yang paling pertama kita buat dulu elemen div dengan class="container" seperti berikut


<div id='myForm' class='container' >

</div>

kelas container ini gunanya sebagai pembatas saja agar element tidak terlalu melebar kesamping jika kita zoom. untuk pemberian id itu supaya kita ingat saja kalau sekarang kita ini sedang buat form.


Selanjutnya kita masuk ketahap membuat elemen bagian dalam dan untuk ini kita akan menerapkan grid sistem pada materializenya seperti pada dokumentasi berikut ini. Kode yang harus kita tulis memiliki struktur seperti ini:


<form class="row">
    <div class="col s12"> <!-- karena akan dibuat 1 kolom saja cukup tambahkan s12 --> 
        <!-- gaya form kita buat kartu -->
        <span class="title">My Form Title</span>
        <div class="card">
            <div class="card-content">


            </div>
            <div class="card-action right-align">

            </div>
        </div>
    </div>
</form>

kita sudah membuat desain kartu materialnya mari kita coba lihat hasil jadinya seperti gambar dibawah ini.


Tutorial Material Design Form dengan Materialize CSS

Karena backgroundnya masih sama-sama berwarna putih jadi akan kelihatan kurang terlihat material designnya. Nanti kita atur setelah kerangka sudah jadi. Nah selanjutnya kita membuat kerangka inputnya yang akan di isi dalam card-content. Kita akan membuat input berupa "NAMA", "WEBSITE", "EMAIL" JUGA "PESAN".


<form class="row">
    <!-- karena pada ukuran pc dan tablet akan di bagi 2 maka kita menambahkan kelas m6 dan l6 -->
    <div class="input-field col s12 m6 l6">
        <i class="material-icons prefix">person</i>
        <input type="text" name="nama" class="validate" />
        <label>Nama Lengkap</label>
    </div>

    <div class="input-field col s12 m6 l6">
        <i class="material-icons prefix">home</i>
        <input type="text" name="alamat" class="validate" />
        <label>Website</label>
    </div>

    <div class="input-field col s12">
        <i class="material-icons prefix">mail</i>
        <input type="email" name="email" class="validate" />
        <label>Email</label>
        <span class="text-helper" data-success="Oke" data-error="salah gan!">isi email dengan benar</span>
    </div>

    <div class="input-field col s12">
        <i class="material-icons prefix">chat</i>
        <textarea class="validate materialize-textarea"></textarea>
        <label>Pesan dan Komentar</label>
    </div>
</form>

Kita sudah selesai membuat inputan dalamnya, hasilnya akan seperti pada gambar ini:


Tutorial Material Design Form dengan Materialize CSS

Sudah hampir selesai nih inputannya, tinggal kita beri tombol saja. Buat seperti kode berikut dibawah di dalam card-actions:


<button class="btn waves-effect waves-light" type="submit" name="action">
 <i class="material-icons right">send</i>
    Submit
</button>

Tampilan yang dihasilkan akan seperti berikut ini.


Tutorial Material Design Form dengan Materialize CSS

Untuk catatan, di Materialize CSS juga berlaku antarmuka validasi dimana jika inputan salah maka akan ada tulisan dibawah inputannya seperti pada input email. Untuk menambahkannya cukup dengan memasukan kode "<span class='text-helper' data-success='{{ kata-kata jika data valid }}' data-error='{{ kata-kata jika data invalid }}'> {{ kata-kata pembantu jika diperlukan }} </span>" dibawah tag <label>.

5. Mengkustom dan memberinya gaya dengan CSS

Setelah kita membuat formnya kali ini kita mengaturnya dengan menggunakan css seperti mengatur jarak container juga judul form serta mempercantik tampilannya agar seperti material design. Saya sudah menyipkan CSS dibawah ini.


<style>
body {
 background:#f5f5f5;
}
.container {
 max-width:640px;
 margin-top:40px;
 margin-down:40px;
}
.bg-flat {
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 right: 0;
 height: 200px;
 background: #26a69a;
}
.title {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
}
</style>


Tada.... Desain Material Form sudah jadi, hasil akhirnya pun seperti ini:


Tutorial Material Design Form dengan Materialize CSS

Apabila kita mengetik dalam inputannya maka efeknya akan seperti ini:


Tutorial Material Design Form dengan Materialize CSS

6. Penutup

Material design adalah konsep desain yang sedang populernya untuk saat ini disamping flat design. Semenjak Google meluncurkan Android OS versi Lolipop. Konsep desain Material menyebar dan mulai ke website juga. Sehingga banyak sekali orang yang mempelajari konsep bagaimana cara membuatnya. Untuk official website tentang belajar material desain sendiri bisa sobat kunjungi situs Material.io disini. Selama perkembangan desainnya sampai sekarang, banyak juga bermunculan framework css yang membantu kita untuk mendapatkan desain material ini. Namun untuk sekarang paling unggul yakni Materialize.css, karena disamping mudah, juga sederhana cara penerapannya. Selain itu juga ada MUI CSS, Material Design Lite, Material Angular, dan Bootstrap juga memiliki versi material desainnya pada Material Bootstrap. Semua framework itu dipakai tergantung kebutuhan sobat saja.


Pada tutorial kali ini kita sudah bisa menerapkan konsep Form dengan Material Design yang dibantu Materialize CSS sebagai frameworknya. Sederhana sih tapi semoga saja dari tutorial kali ini, muncul ide-ide baru untuk membuat bagian lain dari website seperti template material design yang saya buat disini.


Itulah tutorial yang bisa saya berikan untuk sekarang, seperti biasa jika ada kesulitan ataupun pertanyaan lainnya bisa dengan berkomentar dibawah ini. Jangan lupa klik iklannya ya hehehe.. Tutorial anti mainstream cuma di Code Pelajar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel