Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular 2+
Code

Cara Membangun UI Login Dengan Angular dan Material Design

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Tutorial ini akan menunjukkan kepada Anda bagaimana membangun UI login dan pendaftaran yang cantik dengan Bahan Angular. Kita akan melihat berbagai komponen Material design dan bagaimana itu dapat digunakan untuk menghasilkan aplikasi yang terlihat profesional. Kode lengkap untuk tutorial ini dapat ditemukan di repo GitHub kita.

Persiapan

Kita akan mulai dengan membuat aplikasi Angular. Semoga Anda sudah memiliki Node.js dan CLI Angular yang terpasang di lingkungan kerja Anda.

Gunakan perintah berikut untuk membuat sebuah aplikasi Angular yang baru.

Perintah ini membuat semua file yang diperlukan untuk bootstrap aplikasi Angular. Langkah selanjutnya adalah menambahkan Angular Material di aplikasi Anda.

Membuat komponen menggunakan Angular CLI

Komponen dalam Angular adalah building block aplikasi. Meskipun Anda dapat secara manual membuat komponen, CLI Angular membuatnya sangat mudah untuk secara otomatis menghasilkan komponen yang berisi semua kode starter yang diperlukan. Untuk menghasilkan komponen dalam CLI Angular, Anda cukup menjalankan perintah berikut:

Aplikasi kita akan memiliki komponen-komponen berikut:

  • Registration component
  • Login Component

Mari kita menghasilkan komponen-komponen itu sekarang.

Menambahkan tema

Keindahan Angular Material adalah bahwa ia dilengkapi dengan tema yang dibuat sebelumnya, sehingga Anda dapat dengan mudah mem-bootstrap tampilan dan nuansa aplikasi Anda hanya dengan memasukkan beberapa cuplikan kode sederhana ke aplikasi Anda. Untuk menambahkan tema, cukup impor ke style.css.

UI Building

Kita ingin UI kita menampilkan bar navigasi dengan tautan untuk registration dan login. Jadi kita akan membuat bar navigasi dengan dua tombol yang tertaut ke komponen aplikasi.

Untuk membuat toolbar dan tombol, Anda menggunakan <mat-toolbar> dan <mat-button> komponen.

Lanjutkan dan tambahkan kode HTML untuk UI di src/app/app.component.html. Perhatikan bahwa kita juga menambahkan tautan ke rute.

Selanjutnya, kita akan menambahkan beberapa styling UI kita. Buka app.component.css dan menambahkan style CSS berikut.

Mengimpor Angular Material komponen

Anda juga perlu mengimpor modul dari @angular/material. Anda dapat memilih untuk mengimpornya dari modul utama atau membuat modul terpisah yang akan berisi semua modul desain Material. Karena kita akan bekerja dengan banyak modul ini ketika membuat sisa UI, kita akan membuat modul terpisah untuk semua komponen. Lanjutkan dan buat file baru src/app/material.module.ts.

Tambahkan modul untuk <mat-toolbar></mat-toolbar-row> dan <mat-button> component dalam file seperti dibawah.

Kemudian, dari komponen lain dalam kode kita, kita hanya perlu menyertakan modul yang baru saja kita buat — app/app.module.ts — seperti yang ditunjukkan di bawah ini.

Berikan perintah ng serve untuk menguji aplikasi Anda, dan Anda akan melihat area navigasi yang tampak bagus dengan tautan Register dan Login.

navigation area with Register and Login links

Mengaktifkan Routing

Routing memungkinkan pengguna untuk bernavigasi di antara halaman yang berbeda. Untuk mengaktifkan routing di aplikasi kita, pertama-tama kita akan menentukan konfigurasi routing. Untuk melakukan itu, tambahkan kode berikut ke app.module.ts.

Langkah selanjutnya adalah menambahkan elemen <router-outlet></router-outlet> yang memungkinkan Angular Router untuk mengetahui di mana menempatkan routed component. File app.component.html seharusnya sekarang terlihat seperti ini:

Kita telah menempatkan router outlet sehingga komponen akan merender di bawah bar navigasi.

UI Registrasi

Di bagian ini, kita terutama akan menggunakan tata letak dan komponen form control. UI ini akan menampilkan komponen Material Design ini:

  • card component (<mat-card>) — sebuah wadah konten untuk text, photo, dan action dalam konteks subyek
  • component label (<mat-label>)-digunakan untuk menetapkan label untuk form field
  • masukan komponen (<input matInput>)— menentukan dalam bidang input
  • komponen form field (<mat-form-field>) - membungkus beberapa komponen Angular untuk membuat form field
  • komponen checkbox (<mat-checkbox>) - checkbox asli dengan styling Material Design yang disempurnakan
  • komponen date picker (<mat-datepicker>)-enhanced date picker

Tapi pertama-tama, mari kita impor itu dalam src/app/material.ts.

Kita akan mulai dengan <mat-card>, yang akan berisi semua konten di registration UI. Buka registrasi-component.component.html dan tambahkan kode berikut.

Selanjutnya, kita akan menambahkan form HTML di dalam bagian konten yang akan berisi semua form field kita.

Selanjutnya, kita akan menambahkan form untuk nama depan, nama belakang, alamat, email, dan kata sandi. Kita akan menggunakan <mat-label> untuk membuat label dan <input matInput /> untuk membuat kolom input.

Selanjutnya, kita akan menambahkan checkbox untuk jenis kelamin dan pemilih tanggal untuk tanggal lahir. Kita akan menggunakan <mat-checkbox> dan <mat-datepicker> yang telah meningkatkan styling dan animasi Design Material.

Bit terakhir akan menjadi tombol setelah </mat-card-content>  untuk mengirimkan informasi pengguna.

Styling Form

Mari letakkan beberapa styling pada form kita untuk membuatnya lebih rapi. Buka create-account.component.css dan tambahkan style CSS berikut.

Registration UI akan terlihat seperti ini:

Registration UI layout

Building UI untuk komponen Login

Login UI akan memiliki komponen-komponen berikut:

  • komponen card (<mat-card>) - wadah konten untuk text, photo, dan action dalam konteks single subject
  • masukan komponen (<input matInput>) — menetapkan sebuah field input

Sama seperti yang kita lakukan untuk registration UI, kita akan memiliki komponen card Material untuk menyimpan form login.

Kode HTML untuk halaman Login ditampilkan, yang berisi dua input untuk kredensial email dan password.

UI yang selesai akan terlihat seperti ini:

Finished login UI

Kesimpulan

Tutorial ini telah mencakup sebagian besar komponen Angular Material yang diperlukan untuk membuat UI berfungsi penuh. Seperti yang Anda lihat, Angular Material sangat mudah digunakan karena semua komponen memiliki style yang telah ditentukan. Ini berarti Anda dapat dengan cepat membuat UI yang indah. Selain itu, dokumentasi Angular Material menyediakan banyak contoh dan mudah diikuti.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.