สร้างหน้า 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
เช็คให้เรียบร้อยก่อนนะครับ
2. สร้าง Project Angular
1. ไปยัง Directory ที่ต้องการจะเก็บ Project ไว้ จากนั้นให้เปิด Terminal เพื่อเตรียมพร้อมสร้างโปรเจ็กต์
2. สร้าง Project angular ที่มีชื่อว่า dashboard โดยใช้คำสั่ง
ng new dashboard #คำสั่งสร้าง Project angular ชื่อ dashboard
3. หลังจากที่ new โปรเจ็กต์เสร็จจะขึ้นให้เรา Config Git ให้ Config Git ให้เรียบร้อย
git config — global user.email “you@example.com”
git config — global user.name “Your Name”
4. เข้าไปใน folder โปรเจ็กต์ที่เราสร้างขึ้นมา cd dashboard
5. ถึงตอนนี้เราก็มี web angular แล้วเรียบร้อย สามารถ run เว็บของเราได้โดย
ng serve #คำสั่ง run project angular
*** เว็บจะอยู่ที่ http://localhost:4200/ ***
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 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
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
- แก้ไขไฟล์
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>
© 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 ที่สวยงามและเรียบง่ายกันแล้วเรียบร้อย หวังว่าบทความนี้จะเป็นประโยชน์สำหรับคนที่เข้ามาอ่านนะครับ