ساخت رابط کاربری Login با انگولار (Angular) و متریال دیزاین – به زبان ساده

۴۰۰ بازدید

آخرین به‌روزرسانی: ۱۱ شهریور ۱۴۰۲

زمان مطالعه: ۶ دقیقه

ساخت رابط کاربری Login با انگولار (Angular) و متریال دیزاین – به زبان ساده

در این راهنما شیوه ساخت یک رابط کاربری زیبا برای فرم ثبت نام ورود با استفاده از Angular Material را آموزش می‌دهیم. در این راهنما اجزای مختلف طراحی متریال و شیوه استفاده از آن‌ها برای ساخت اپلیکیشن‌های با ظاهر حرفه‌ای را بررسی می‌کنیم. کد کامل این راهنما را می‌توانید در این ریپو گیت‌هاب ملاحظه کنید.

فهرست مطالب این نوشته

سرآغاز

ساخت UI

UI ثبت نام

ساخت UI برای کامپوننت Login

جمع‌بندی

سرآغاز

در ابتدا اقدام به ایجاد یک اپلیکیشن آنگولار می‌کنیم. اما قبل از آن باید Node.js و Angular CLI در محیط کاری شما نصب شده باشند.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

با استفاده از دستور زیر می‌توانید یک اپلیکیشن انگولار ایجاد کنید.

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

دستور فوق همه فایل‌های مورد نیاز برای بوت‌استرپ کردن یک اپلیکیشن انگولار را ایجاد می‌کند. در مرحله بعد انگولار متریال را به اپلیکیشن خود اضافه می‌کنیم:

cd responsive-angular-material/
 
#install angular material 
ng add @angular/material

ایجاد کامپوننت‌ها با استفاده از Angular CLI

منظور از کامپوننت در انگولار، اجزای تشکیل‌دهنده اپلیکیشن هستند.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

با این که می‌توان این کامپوننت‌ها را به صورت دستی نیز ایجاد کرد؛ اما Angular CLI در یک فرایند بسیار ساده و به طور خودکار کامپوننت‌هایی که شامل همه کدهای آغازین مورد نیاز هستند را ایجاد می‌کند. برای ایجاد یک کامپوننت در Angular CLI کافی است دستور زیر را اجرا کنید:

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

اپلیکیشن ما کامپوننت‌های زیر را دارد:

کامپوننت Registration
کامپوننت Login

اینک می‌توانیم این کامپوننت‌ها را ایجاد کنیم.

#registration component
ng g component RegistrationComponent
 
#login component
ng g component LoginComponent

افزودن قالب

زیبایی کار با انگولار متریال این است که می‌توان از قالب‌های پیش‌ساخته بهره گرفت و از این رو می‌توان به سادگی ظاهر و حس و حال اپلیکیشن را با استفاده از قرار دادن چند قطعه کد ساده در کد اپلیکیشن تعیین نمود. برای افزودن یک قالب کافی است فایل style.css را ایمپورت کنید:

/*style.css*/
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

ساخت UI

ما می‌خواهیم که رابط کاربری (UI) ما دارای یک نوار ناوبری به همراه پیوندهایی برای ثبت نام و ورود به اپلیکیشن باشد. بنابراین یک نوار ناوبری با دو دکمه ایجاد می‌کنیم که به کامپوننت‌های مربوطه لینک شده‌اند. برای ایجاد نوار ابزار و دکمه‌ها باید به ترتیب از کامپوننت‌های <mat-toolbar> و <mat-button> استفاده کنیم.

فیلم آموزش پروژه محور اچ تی ام ال و سی اس اس HTML و CSS در فرادرس

کلیک کنید

در ادامه کد HTML را برای UI در فایل src/app/app.component.html قرار می‌دهیم. توجه کنید که لینک‌ها را به نیز برای دسترسی به آن بخش‌ها اضافه کرده‌ایم.

<!--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>

سپس برخی گزینه‌های سبک‌بندی را به UI اضافه می‌کنیم فایل app.component.css را باز کنید و استایل‌های CSS زیر را اضافه کنید:

.spacer {
  flex: 1 1 auto;
}

ایمپورت کردن کامپوننت‌های انگولار متریال

همچنین باید ماژول‌هایی را از angular/material@ ایمپورت کنیم. می‌توان آن‌ها را از ماژول اصلی نیز ایمپورت کرد یا این که یک ماژول جداگانه ساخت که همه ماژول‌های طراحی متریال را شامل شود. از آنجا که در ادامه ساخت UI با ماژول‌های زیادی سروکار خواهیم داشت، یک ماژول جداگانه برای همه کامپوننت‌ها می‌سازیم. در ادامه یک فایل به نام src/app/material.module.ts ایجاد می‌کنیم.

فیلم آموزش پروژه محور بوت استرپ برای طراحی سایت – متریال دیزاین Material Design در Bootstrap در فرادرس

کلیک کنید

ماژول‌هایی برای کامپوننت‌های <mat-toolbar>, </mat-toolbar-row>, و <mat-button> در فایل به صورت زیر اضافه می‌کنیم:

import { NgModule } from  '@angular/core';
 
import {MatButtonModule,MatToolbarModule} from  '@angular/material';
 
 
@NgModule({
imports: [MatButtonModule,MatToolbarModule],
exports: [MatButtonModule,MatToolbarModule],
 
})
 
export  class  MyMaterialModule { }

سپس در کامپوننت‌های دیگر در کد خودمان تنها کافی است ماژولی که اینک ایجاد کردیم، یعنی app/app.module.ts را ایمپورت کنیم:

// app/app.module.ts
import { MyMaterialModule } from  './material.module';
 
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,
 
  ],
})

دستور ng serve را اجرا کنید تا اپلیکیشن تست شود. در این مرحله می‌بینید که ناحیه ناوبری با لینک‌های registration و login ظاهر می‌شود.

فعال‌سازی مسیریابی

مسیریابی به کاربران اجازه می‌دهد که بین صفحه‌های مختلف حرکت کنند. برای فعال‌سازی مسیریابی در اپلیکیشن ابتدا باید پیکربندی مسیریابی را تعریف کنیم. بدین منظور کد زیر را به 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 },
       
     
    ]),
 
  ],

در مرحله بعدی یک عنصر <router-outlet></router-outlet> اضافه می‌کنیم که به مسیریاب انگولار اجازه می‌دهد تا کامپوننت‌های مسیریابی شده را در جای خود قرار دهد. در این صورت فایل app.component.html باید مانند زیر باشد:

<!--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>

بدین ترتیب مسیریاب را چنان تعیین کردیم که کامپوننت‌ها زیر نوار ناوبری رندر شوند.

UI ثبت نام

در این بخش به طور عمده از کامپوننت‌های layout و form comtrol استفاده می‌کنیم. این UI موارد استفاده از کامپوننت‌های زیر را به نمایش می‌گذارد:

کامپوننتت کارت (<mat-card>) – یک محفظه محتوا برای متن، تصویر و اقدام در چارچوب یک موضوع منفرد است.
کامپوننت برچسب (<mat-label>) – برای تعیین برچسب فیلدهای مختلف فرم استفاده می‌شود.
کامپوننت ورودی (<input matInput>) – برای یک فیلد ورودی استفاده می‌شود.
کامپوننت فیلد فرم (<mat-form-field>) چند کامپوننت انگولار جمع می‌کند تا یک فیلد فرم تشکیل دهد.
کامپوننت چک باکس (<mat-checkbox>) – یک کادر انتخاب با استایل بهبود یافته متریال دیزاین ارائه می‌کند.
کامپوننت انتخاب تاریخ (<mat-datepicker>) – یک فیلد انتخاب تاریخ بهبود یافته است.

اما ابتدا باید فایل 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 { }

کار خود را با <mat-card> آغاز می‌کنیم که شامل همه محتوای UI بخش ثبت نام است. فایل registration-component.component.html را باز کنید و کد زیر را اضافه نمایید:

<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>

سپس یک فرم HTML درون بخش محتوا اضافه می‌کنیم که شامل همه فیلدهای فرم خواهد بود:

<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>

در ادامه فیلدهایی را برای نام، نام خانوادگی، آدرس، ایمیل و رمز عبور اضافه می‌کنیم. از <mat-label> برای ایجاد برچسب‌ها و از <input matInput /> برای ایجاد فیلدهای ورودی استفاده کرده‌ایم.

<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>

سپس یک چک باکس برای جنسیت و یک فیلد انتخاب تاریخ برای تعیین تاریخ تولد اضافه می‌کنیم. از <mat-checkbox> و <mat-datepicker> استفاده خواهیم کرد که از عناصر متریال بهبود یافته و انیمیشن استفاده می‌کنند:

<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>

در آخر یک دکمه پس از </mat-card-content> قرار می‌دهیم تا اطلاعات کاربری تحویل داده شود:

1<mat-card-content>
2  <form class="my-form">
3     <!--FORM FIELDS-->
4  </form>
5</mat-card-content>
6<mat-card-actions>
7  <button mat-raised-button (click)="register()" color="primary">REGISTER</button>
8</mat-card-actions>

استایل دادن به فرم

در ادامه برخی گزینه‌های سبک‌بندی به فرم خود اضافه می‌کنیم تا ظاهری جذاب‌تر داشته باشد. فایل create-account.component.css را باز کنید و استایل‌های CSS زیر را اضافه کنید:

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

اینک UI بخش ثبت نام مانند زیر است:

UI بخش Login دارای کامپوننت‌های زیر است:

کامپوننت کارت (<mat-card>) – یک محفظه محتوا برای متن، تصاویر و اقدام‌های مختلف در چارچوب یک موضوع منفرد
کامپوننت ورودی (<input matInput>) – یک فیلد ورود داده را ایجاد می‌کند.

همان‌طور که در مورد UI ثبت نام عمل کردیم در این بخش نیز از کامپوننت‌های متریال برای طراحی فرم ثبت نام استفاده می‌کنیم. کد HTML برای Login در ادامه ارائه شده است که شامل دو فیلد ورودی برای ایمیل و رمز عبور است.

<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 نهایی مانند زیر خواهد بود:

جمع‌بندی

در این راهنما اغلب کامپوننت‌های انگولار متریال که برای ایجاد یک UI کاملاً اجرایی استفاده می‌شود را بررسی کردیم. همان‌طور که مشاهده کردید استفاده از انگولار متریال بسیار آسان است، زیرا کامپوننت‌ها همگی استایل‌های از پیش تعریف شده‌ای دارند. این بدان معنی است که می‌توانید به سرعت UI های زیبایی بسازید. به علاوه مستندات انگولار متریال نمونه‌های بسیاری ارائه کرده‌اند که به راحتی می‌توانید از آن‌ها کمک بگیرید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این نوشته مورد توجه شما قرار گرفته است، پیشنهاد می‌کنیم موارد زیر را نیز ملاحظه کنید:

بر اساس رای ۰ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

tutsplus

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.