Cara Membangun UI Login Dengan Angular dan Material Design

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.

# create a new Angular project under the name responsive-angular-material
ng new registration-login-angular-material

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

cd responsive-angular-material/

#install angular material 
ng add @angular/material

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:

# MyComponent is the name of your component
ng g component MyComponent

Aplikasi kita akan memiliki komponen-komponen berikut:

Registration component
Login Component

Mari kita menghasilkan komponen-komponen itu sekarang.

#registration component
ng g component RegistrationComponent

#login component
ng g component LoginComponent

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.

/*style.css*/
@import "~@angular/material/prebuilt-themes/indigo-pink.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.

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary">
   <mat-toolbar-row>
     <!--  <span>HOME</span> -->
      <span><a href="/">HOME</a></span>
      <span class="spacer"></span>
      <a mat-button routerLink="/register">Register</a>
      <a mat-button routerLink="/login">Login</a>
   </mat-toolbar-row>
</mat-toolbar>

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

.spacer {
  flex: 1 1 auto;
}

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.

import { NgModule } from  '@angular/core';

import {MatButtonModule,MatToolbarModule} from  '@angular/material';


@NgModule({
imports: [MatButtonModule,MatToolbarModule],
exports: [MatButtonModule,MatToolbarModule],

})

export  class  MyMaterialModule { }

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.

// app/app.module.ts
import { MyMaterialModule } from  './material.module';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,

  ],
})

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.

import { RouterModule, Routes } from '@angular/router';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/', pathMatch: 'full' },
      { path: 'register', component: RegistrationComponentComponent },
      { path: 'login', component: LoginComponentComponent },
      
    
    ]),

  ],

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:

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary">
   <mat-toolbar-row>
     <!--  <span>HOME</span> -->
      <span><a href="/">HOME</a></span>
      <span class="spacer"></span>
      <a  mat-button  routerLink="/register">Register</a>
      <a  mat-button  routerLink="/login">Login</a>
   </mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>

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.

import { NgModule } from  '@angular/core';
import {MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatRadioModule,MatListModule,} from  '@angular/material';
import {MatDatepickerModule} from  '@angular/material/datepicker';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule,FormsModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,],

exports: [MatNativeDateModule,FormsModule,
MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,],

})

export  class  MyMaterialModule { }

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

<mat-toolbar>
   <span>Registration</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
       
     <!-- CONTENT HERE -->
       
   </mat-card-content>
   <mat-card-actions>
     <!-- REGISTER BUTTON -->
   </mat-card-actions>
</mat-card>

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

 <mat-toolbar>
  <span>Registration</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
      <form class="my-form">
        <!--FORM FIELDS HERE-->
      </form>
   </mat-card-content>
   <mat-card-actions>
      <!--REGISTER BUTTON HERE-->
   </mat-card-actions>
</mat-card>

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.

<mat-card-content>
  <form class="my-form">
     <mat-form-field class="full-width">
            <mat-label>First Name</mat-label>
            <input  matInput  placeholder="First name"  name="fname"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Last Name</mat-label>
            <input  matInput  placeholder="Last Name" name="lname"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Address</mat-label>
            <input  matInput  placeholder="Address" name="address"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Email</mat-label>
            <input  matInput  placeholder="Email" name="email">
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Password</mat-label>
            <input  matInput  placeholder="Password"  name="password">
         </mat-form-field>
  </form>
</mat-card-content>

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.

 <section class="example-section">
      <label class="example-margin">Gender:</label>
      <mat-radio-group [(ngModel)]="gender">
        <mat-radio-button class="example-margin" value="after">Male</mat-radio-button>
        <mat-radio-button class="example-margin" value="before">Female</mat-radio-button>
        <mat-radio-button class="example-margin" value="before">Other</mat-radio-button>
      </mat-radio-group>
    </section>

    <mat-form-field>
      <mat-label>Date of Birth</mat-label>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

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

<mat-card-content>
  <form class="my-form">
     <!--FORM FIELDS--> 
  </form>
</mat-card-content>
<mat-card-actions>
  <button mat-raised-button (click)="register()" color="primary">REGISTER</button>
</mat-card-actions>

Styling Form

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

.my-form{
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.full-width {
  width: 100%;
}

Registration UI akan terlihat seperti ini:

Building UI untuk komponen Login

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.

<mat-toolbar>
  <span>LOGIN</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
      <form class="my-form">
         <mat-form-field class="full-width">
            <mat-label>Email</mat-label>
            <input  matInput  placeholder="Email" name="email">
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Password</mat-label>
            <input  matInput  placeholder="Password" name="password">
         </mat-form-field>
      </form>
   </mat-card-content>
   <mat-card-actions>
      <button mat-raised-button (click)="login()" color="primary">LOGIN</button>
   </mat-card-actions>
</mat-card>

UI yang selesai akan terlihat seperti ini:

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.