สร้างหน้า Admin ด้วย Angular Material (Angular Material Admin)

สร้างหน้า admin web angular แบบจับมือทำ

เชื่อว่าเว็บหลายๆเว็บ จำเป็นจะต้องมีหน้าแอดมิน เพื่อที่จะใช้ในการจัดการในส่วนต่างๆของระบบ และหากใครกำลังทำเว็บของ Angular อยู่ในตอนนี้… อยากทำหน้าแอดมิน แต่ไม่รู้จะเริ่มยังไง หากหลงเข้ามาอ่านบทความนี้แล้ว รับรองว่ากลับออกไปแบบมีหน้าแอดมินเหมือนรูปข้างล่างติดมือไปอย่างแน่นอน

ขั้นตอนการสร้างหน้า Admin ด้วยAngular Material

1. สิ่งที่ต้องมี
2. สร้าง Project Angular
3. Install Package ที่จำเป็นต้องใช้ใน Project
4. วางโครงสร้าง web
5. แต่งเว็บให้สวยด้วย Material
6. เพิ่ม Action ให้กับปุ่มกด
7. เสร็จเรียบร้อย

ขั้นตอนทุกอย่างในบทความนี้อ้างอิงมาจาก Angular 8 Admin Dashboard Panel from scratch using Angular Material, highcharts and flex-layout หากสงสัยสามารถเข้าชมเพิ่มเติมได้ครับ

1. สิ่งที่ต้องมี

• Node js LTS
  หากยังไม่มีสามารถ Download ได้ที่ https://nodejs.org/en/download
  — ถ้าติดตั้งเรียบร้อยแล้ว สามารถใช้คำสั่ง node -v เพื่อเช็ค version ของ node
• Angular CLI
  หากยังไม่มีใช้คำสั่งนี้ใน cmd ได้เลย npm install -g @angular/cli หรือ yarn global add @angular/cli
  — หากติดตั้งเรียบร้อยแล้ว สามารถใช้คำสั่ง ng version เพื่อเช็ค version ของ Angular CLI

รูปภาพที่ 1 : ตัวอย่างการเช็ค version ของ angular

เช็คให้เรียบร้อยก่อนนะครับ

2. สร้าง Project Angular

1. ไปยัง Directory ที่ต้องการจะเก็บ Project ไว้ จากนั้นให้เปิด Terminal เพื่อเตรียมพร้อมสร้างโปรเจ็กต์

2. สร้าง Project angular ที่มีชื่อว่า dashboard โดยใช้คำสั่ง

ng new dashboard #คำสั่งสร้าง Project angular ชื่อ dashboard

รูปภาพที่ 1 : สร้างโปรเจ็กต์ Angular

3. หลังจากที่ new โปรเจ็กต์เสร็จจะขึ้นให้เรา Config Git ให้ Config Git ให้เรียบร้อย

git config — global user.email “you@example.com”
git config — global user.name “Your Name” 

รูปภาพที่ 2 : ตัวอย่าง Config git

4. เข้าไปใน folder โปรเจ็กต์ที่เราสร้างขึ้นมา cd dashboard

5. ถึงตอนนี้เราก็มี web angular แล้วเรียบร้อย สามารถ run เว็บของเราได้โดย

ng serve #คำสั่ง run project angular
*** เว็บจะอยู่ที่ http://localhost:4200/ ***

รูปภาพที่ 3: ตัวอย่างการ run server ครั้งแรก

3. Install Package ที่จำเป็นต้องใช้ใน Project

1. Install material package โดยใช้คำสั่ง

ng add @angular/material #คำสั่งเพิ่มmaterial packageในproject

หลังจากรันคำสั่ง ng add @angular/material แล้ว จะมีคำถามขึ้นมาให้เราเลือก Custom theme ตามใจชอบ ในตัวอย่างขอเลือก Indigo/Pink ละกันครับ
จากนั้น ให้พิมพ์ Y แล้วกด Enter แล้วพิมพ์ Y แล้วกด Enter อีกครั้ง

รูปภาพที่ 2 : install package material

2. Install flex-layout package และ cdk package โดยใช้คำสั่ง

npm i @angular/flex-layout @angular/cdk --save 
#คำสั่งเพิ่มflex-layout packageและcdk packageใน project

4. วางโครงสร้าง Web

สร้าง component และ module

1. สร้าง dashboard component, default component และ default module ก่อนโดยใช้คำสั่ง

ng g c modules/dashboard #คำสั่งสร้าง dashbord component
ng g c layouts/default #คำสั่งสร้าง default component
ng g m layouts/default #คำสั่งสร้าง default module

รูปภาพที่ 1 : Directory file 1

2. ย้าย DefaultComponent และ DashboardComponent จาก app.module.ts ไปประกาศไว้ที่ default.module.ts

3. Import DefaultModule มาไว้ในไฟล์ app.module.ts

4. เพิ่ม Routes ในไฟล์ app-routing.module.ts

5. ลบทุกอย่างใน app.component.html เหลือไว้แค่ <router-outlet> </router-outlet>

ถ้ามาถึงขั้นตอนนี้แล้วจะได้หน้าตา web แบบนี้นะครับ

6. แก้ไฟล์ default.component.html เหลือไว้แค่ <router-outlet> </router-outlet>

7. import Router Module ในไฟล์ default.module.ts

ถ้ามาถึงขั้นตอนนี้แล้วจะได้หน้าตา web แบบนี้นะครับ

เพิ่มหน้า Posts

1. สร้าง posts component โดยใช้คำสั่งต่อไปนี้

ng g c modules/posts #คำสั่งสร้าง posts component

2. ย้าย PostsComponent ที่ประกาศในไฟล์ app.module.ts ไปประกาศไว้ที่ไฟล์ default.module.ts แทน

3. เพิ่ม path ในไฟล์ app-routing.module.ts

สร้างหน้า posts เรียบร้อยแล้ว

สร้าง Header, Footer, Sidebar และ Shared module

1. ใช้คำสั่งต่อไปนี้ เพื่อสร้าง component ของ Header, Footer, Sidebar และ สร้าง shared module เพื่อจะแชร์ footer, header, sidebar ให้กับ component อื่นๆใช้ จากเดิมแทนที่จะต้อง import มาทีละ component เพียงแค่ import SharedModule มาแค่ตัวเดียวก็มาทั้งหมดเลย

ng g c shared/components/header #คำสั่งสร้าง header component
ng g c shared/components/footer #คำสั่งสร้าง footer component
ng g c shared/components/sidebar #คำสั่งสร้าง sidebar component
ng g m shared #คำสั่งสร้าง shared module

2. ลบ HeaderComponent, FooterComponent, SidebarComponent ที่อยู่ในไฟล์ app.module.ts ออก

3. ประกาศ HeaderComponent, FooterComponent, SidebarComponent และ exports HeaderComponent, FooterComponent, SidebarComponent ในไฟล์ shared.module.ts ดังตัวอย่าง

4. Import SharedModule ในไฟล์ default.module.ts

...
import { SharedModule } from 'src/app/shared/shared.module';
...
 imports: [
 ...
 SharedModule
 ...
 ]

5. เรียกใช้สิ่งที่เรา import มา ในไฟล์ default.component.html ดังตัวอย่าง

พอถึงขั้นตอนนี้แล้วหน้าเว็บเราจะเป็นแบบนี้ครับ

แต่งเว็บให้สวยด้วย Material

Default component

1. แก้ไขไฟล์ default.component.html ให้เป็นดังตัวอย่าง

2. Import MatSidenavModule ในไฟล์ default.component.html

...
import { MatSidenavModule } from '@angular/material/sidenav';
...
 imports: [
...
    MatSidenavModule
 ]

3. แก้ไขไฟล์ default.component.scss ให้เป็นดังตัวอย่าง

พอถึงขั้นตอนนี้จะได้เว็บแบบนี้แล้วว

Footer components

1. Import MatDividerModule ในไฟล์ shared.module.ts

...
import { MatDividerModule } from '@angular/material/divider';
...
 imports: [
...
  MatDividerModule
 ]
...

2. แก้ไฟล์ footer.component.html ให้เป็นดังตัวอย่าง

<mat-divider></mat-divider>
<footer>
  &copy; All rights reserved 2020
</footer>

3. แก้ไฟล์ footer.component.scss ให้เป็นดังตัวอย่าง

footer {
  padding: 20px;
}

Header components

1. Import MatToolbarModule, MatIconModule, MatButtonModule, FlexLayoutModule, MatMenuModule ในไฟล์ shared.module.ts

...
import { MatDividerModule } from '@angular/material/divider';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatMenuModule } from '@angular/material/menu';
...
 imports: [
  CommonModule,
  MatDividerModule,
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  FlexLayoutModule,
  MatMenuModule
 ]
...

2. แก้ไขไฟล์ header.component.html ให้เป็นดังตัวอย่าง

3. แก้ไขไฟล์ header.component.scss ให้เป็นดังตัวอย่าง

ul li {
   list-style: none;
}

พอมาถึงขั้นตอนนี้เราก็ใกล้ความจริงเข้ามาแล้ว

Sidebar components

1. import MatListModule ในไฟล์ shared.module.ts

...
import { MatListModule } from '@angular/material/list';
...
 imports: [
  ...
  MatListModule
 ]
...

2. แก้ไฟล์ sidebar.component.html ให้เป็นดังตัวอย่าง

3. แก้ไฟล์ sidebar.component.css ให้เป็นดังตัวอย่าง

ใกล้ความจริงเข้ามาแล้ว

Dashboard component

1 . Import FlexLayoutModule และ MatButtonModule ในไฟล์ default.module.ts

...
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule } from '@angular/material/button';
 imports: [
  ...
  FlexLayoutModule
  MatButtonModule
 ]
...

2. แก้ไขไฟล์ dashboard.component.html ให้เป็นดังตัวอย่าง

6. เพิ่ม Action ให้กับปุ่มกด

เพิ่ม Router ให้กับปุ่ม Dashboard และ Posts

1. Import RouterModule ในไฟล์ shared.module.ts

...
import { RouterModule } from '@angular/router';
...
 imports: [
  ...
  RouterModule
 ]
...

เพียงเท่านี้ก็จะสามารถกดปุ่ม Dashboard และปุ่ม Posts เพื่อเปลี่ยนหน้าได้แล้ว

ต่อไปก็ทำให้ปุ่มเมนูใช้งานได้

1. สร้างตัวแปล sideBarOpen ไว้ในไฟล์ default.component.ts

sideBarOpen = false;

2. ทำ tag mat-drawer ในไฟล์ default.component.html ให้รับค่าจาก component ได้

<mat-drawer mode="side" [opened] = "sideBarOpen">

ถึงตอนนี้ SideBar ก็จะปิดไป แต่ไม่ต้องตกใจมาทำให้มันเปิดได้ต่อกันเลย

4. เพิ่ม event ให้กับปุ่ม menu ในหน้า header.component.html

<button mat-icon-button (click)="toggleSideBar()">
  <mat-icon>menu</mat-icon>
</button>

5. แก้ไขไฟล์ header.component.ts ให้เป็นดังตัวอย่าง

6. เพิ่ม function sideBarToggler ในไฟล์ default.component.ts

...  
 sideBarToggler() {
  this.sideBarOpen = !this.sideBarOpen;
 }
...

7. แก้ไขไฟล์ default.component.html ให้เป็นดังตัวอย่าง

7. เรียบร้อย ได้หน้าเว็บแอดมินแล้ว

ถึงตอนนี้หวังว่าทุกคนที่ทำตามมาเรื่อย ๆ คงจะเข้าใจ และเรียนรู้

• โครงสร้างและองค์ประกอบต่างๆของ angular
• เข้าใจการทำงานของ angular
• เข้าใจการสร้าง component การ set route
• การใช้ angular material
• การใช้งาน module ต่างๆ
• การส่งค่าใน component

และคงจะได้หน้า Admin ที่สวยงามและเรียบง่ายกันแล้วเรียบร้อย หวังว่าบทความนี้จะเป็นประโยชน์สำหรับคนที่เข้ามาอ่านนะครับ

Source code

akkaradet13/AngularMaterialAdmin