3. Membuat Form Login dan Registrasi dengan Syncfusion di Angular 12

 

    Hai sobat musafir, kali ini saya akan share bagaimana caranya membuat form login dan registrasi dengan menggunakan syncfusion di angular. Pada postingan sebelumnya saya sudah share bagaimana Menambah Component dan Mengatur Routing di Angular . Silahkan yang belum mengikuti langsung saja simak dan ikuti, karena tutorial ini saling berkaitan.

Cara Membuat Form Login

    Sebelum membuat form login, ada beberapa tools yang harus di install dulu dari syncfusion. Diantaranya adalah tools layout, button dan inputs. Untuk penjelasan dokumentasinya kalian bisa kunjungi web resminya syncfusion untuk angular di sini. Oke langsung saja kita lakukan step by step.

1. Install Layout, Button dan Inputs dari Syncfusion

    Cara installnya adalah lewat terminal atau command promp. sebelumnya kalian harus masuk ke folder aplikasi kalian dulu. Pada tutorial ini nama aplikasinya adalah project-angular1. Silahkan pastekan kode-kode ini di terminal kalian:

npm install @syncfusion/ej2-layouts --save
npm install @syncfusion/ej2-angular-buttons --save
npm install @syncfusion/ej2-angular-inputs --save

Setelah selesai proses downloadnya, silahkan kalian pastekan import CSS dibawah ini ke dalam file styles.scss :

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; 

@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

import CSS diatas berguna untuk memanggil style pada class yang sudah di buat oleh syncfusion. Berguna untuk mempermudah kita dalam menghias tampilan html nya.

2. Import Module ke app.module.ts

    Setelah selesai proses installnya, kita harus import tools nya ke dalam file app.module.ts. untuk tampilanya jadi seperti ini :

Fokus pada kotak merah. Jadi kalian harus mengimport module tersebut pada app.module.ts agar tools button,inputs,layout bisa di pakai di file login.

3. Membuat Source Code di file login.component.html

    Sekarang giliran kita membuat form nya di login.component.html. Silahkan pastekan kode di bawah ini :

<div tabindex="0" class="e-card" id="basic" 

style="width:30%; margin: 250px auto; margin-top: 120px;">

    <div class="e-card-header" 

        style="background-color: cyan; width:100%; 

        text-align: center; font-weight: bold;">

        <div class="e-card-header-caption">

            <div class="e-card-title">LOGIN</div>

        </div>

    </div>

    <div class="e-card-content">

        <label>Username</label><br>

        <input class="e-input" floatLabelType="Auto" 

        placeholder="Username" type="text" 

        [(ngModel)]="username" ngDefaultControl><br><br>

        <label>Password</label><br>

        <input class="e-input" floatLabelType="Auto" 

        placeholder="Password" type="password" 

        [(ngModel)]="password" ngDefaultControl><br><br>

        <button ejs-button cssClass="e-success" routerLink="/registrasi">

            Create Account</button>

        <button ejs-button cssClass="e-info" style="float:right;">

            Login</button>

    </div>

</div>

Kode di atas untuk menampilkan form login ke dalam browser.

4. Mendefinisikan ngModel di file login.component.ts

    Setelah membuat form nya, kita harus mendefinisikan ngModel nya di dalam file login.component.ts agar dapat di panggil di file html nya. tampilanya seperti dibawah ini :

Cara Membuat Form Registrasi

    Karena kita sudah melakukan instalasi tools button dan lain-lain, maka kita tinggal membuat formnya saja.

1. Membuat Source Code Form Registrasi di file registrasi.component.html

    Silahkan pastekan kode dibawah ini pada file registrasi.component.html:

<div tabindex="0" class="e-card" id="basic" 

style="width:30%; margin: 250px auto; margin-top: 120px;">

    <div class="e-card-header" 

    style="background-color: cyan; width:100%; 

    text-align: center; font-weight: bold;">

        <div class="e-card-header-caption">

            <div class="e-card-title">REGISTRASI</div>

        </div>

    </div>

    <div class="e-card-content">

        <label>Nama</label><br>

        <input class="e-input" floatLabelType="Auto" 

        placeholder="Nama Lengkap" type="text" 

        [(ngModel)]="nama" ngDefaultControl><br><br>

        <label>Alamat</label><br>

        <input class="e-input" floatLabelType="Auto" 

        placeholder="alamat" type="text" 

        [(ngModel)]="alamat" ngDefaultControl><br><br>

        <label>Username</label><br>

        <input class="e-input" floatLabelType="Auto" 

        placeholder="Username" type="text" 

        [(ngModel)]="username" ngDefaultControl><br><br>

        <label>Password</label><br>

        <input class="e-input" floatLabelType="Auto" 

        placeholder="Password" type="password" 

        [(ngModel)]="password" ngDefaultControl><br><br>

        <button ejs-button cssClass="e-success" routerLink="/login">Sign In</button>

        <button ejs-button cssClass="e-info" style="float:right;">Register</button>

    </div>

</div>

2. Mendefinisikan ngModel ke dalam file registrasi.component.ts

    Jangan lupa untuk mendefinisikan ngModel ke dalam file registrasi.component.ts agar tidak error. tampilanya seperti dibawah ini :

Jika sudah, simpan semua perubahan source code nya. kemudian jalankan di browser dengan url localhost:4200/login. jika berhasil maka tampilanya akan seperti ini :

Untuk tampilan registrasi akan jadi seperti ini :

Oke, untuk tutorial kali ini sampai disini dulu. Tunggu tutorial berikutnya yaa...

#angular #login #registrasi #syncfusion