สร้าง UI บัตรประชาชนด้วย HTML, CSS, และ Angular

บทความนี้ผมจะพามาสร้าง UI บัตรประชาชน ที่แสดงผลข้อมูลคราวๆ ใช้โครงสร้าง HTML, การออกแบบด้วย CSS, และการจัดการข้อมูลด้วย Angular(เอาไปปรับใช้กับ JS ก็ได้)

1. โครงสร้าง HTML

HTML นี้ประกอบด้วยโครงสร้างบัตรประชาชน พร้อมภาพพื้นหลังและข้อมูลต่างๆ เช่น หมายเลขบัตร, ชื่อ-นามสกุล, ที่อยู่ และวันเกิด โหลดรูป ปปช ที่นี่

<div class="row">
  <div class="col-6">
    <div class="card bg">
      <div class="id-card-container">
        <div class="position-relative">
          <!-- รูปพื้นหลังบัตรประชาชน -->
          <img src="/assets/images/id_card.png" class="id-card-image" data-testid="idCardImage" width="100%"
            height="100%" />
          <!-- หมายเลขบัตร -->
          <div class="position-absolute id-card-no">
            {{ customer.idCardNo }}
          </div>
          <!-- ชื่อ-นามสกุลภาษาไทย -->
          <div class="position-absolute id-card-name">
            {{ customer.titleName }} {{ customer.firstName }}
            {{ customer.lastName }}
          </div>
          <!-- ชื่อภาษาอังกฤษ -->
          <div class="position-absolute id-card-name-en">
            {{ customer.firstNameEn }}
          </div>
          <!-- นามสกุลภาษาอังกฤษ -->
          <div class="position-absolute id-card-lastname-en">
            {{ customer.lastNameEn }}
          </div>
          <!-- วันเกิด -->
          <div class="position-absolute id-card-birthdate">
            {{ customer.birthdate }}
          </div>
          <div class="position-absolute id-card-birthdate-en">
            {{ customer.birthdate }}
          </div>
          <!-- สัญชาติ -->
          <div class="position-absolute id-card-citizenship">xxxx</div>
          <!-- ที่อยู่ -->
          <div class="position-absolute id-card-address">
            {{ customer.homeNo }} {{ customer.moo }}
            {{ customer.soi ? "ซอย" + customer.soi : "" }}
            {{ customer.street ? "ถนน" + customer.street : "" }}
            {{ customer.tumbol }} {{ customer.amphur }}
            {{ customer.province }}
          </div>
          <!-- รูปเล็ก (สำหรับการอ่านบัตร) -->
          <img [src]="'https://www.boychawin.com/images/og-image.png'" class="position-absolute image-read-card"
            width="20%" height="40%" />
        </div>
      </div>
    </div>
  </div>
</div>

2. การออกแบบด้วย CSS

CSS ที่ใช้ในบทความนี้ออกแบบให้บัตรประชาชนดูสมจริงและใช้งานได้ทุกหน้าจอเอาไปปรับแต่งเพิ่มเติมกันนะครับ

/* การตั้งค่าโครงสร้างหลัก */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

/* การจัดตำแหน่งของข้อมูล */
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

/* การออกแบบส่วนของบัตรประชาชน */
.id-card-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.id-card-image {
    object-fit: contain;
}

/* ฟอนต์สำหรับข้อมูล */
.id-card-no,
.id-card-name {
    font-size: 2vw;
}

.id-card-name-en,
.id-card-lastname-en,
.id-card-birthdate,
.id-card-birthdate-en,
.id-card-citizenship {
    font-size: 1.25vw;
}

/* การจัดตำแหน่งข้อมูล */
.id-card-no {
    top: 10%;
    left: 46%;
}

.id-card-name {
    top: 20%;
    left: 32%;
}

.id-card-name-en {
    top: 29%;
    left: 42%;
}

.id-card-lastname-en {
    top: 36%;
    left: 46%;
}

.id-card-birthdate {
    top: 42%;
    left: 47%;
}

.id-card-birthdate-en {
    top: 49%;
    left: 52%;
}

.id-card-citizenship {
    top: 56%;
    left: 45%;
}

.id-card-address {
    font-size: 1.5vw;
    bottom: 21%;
    left: 22%;
    width: 50%;
}

/* การออกแบบรูปเล็ก */
.image-read-card {
    bottom: 16px;
    right: 3%;
}

/* การตั้งค่าการ์ด */
.card {
    border: none;
}

3. การสร้าง Interface ใน TypeScript

เพื่อจัดการข้อมูลผู้ใช้ เราจะใช้ interface เพื่อกำหนดโครงสร้างของข้อมูล:

export interface ICustomer {
  idCardNo: string;
  titleName: string;
  firstName: string;
  firstNameEn: string;
  lastName: string;
  lastNameEn: string;
  birthdate: string;
  homeNo: string;
  moo: string;
  soi: string;
  street: string;
  tumbol: string;
  amphur: string;
  province: string;
}

4. ตัวอย่างการดึงข้อมูลผ่าน Angular Component

ข้อมูลที่เราต้องการแสดงจะถูกจัดการผ่าน Angular Component

import { Component } from '@angular/core';
import { ICustomer } from './customer.interface';

@Component({
  selector: 'app-id-card',
  templateUrl: './id-card.component.html',
  styleUrls: ['./id-card.component.css']
})
export class IdCardComponent {
  customer: ICustomer = {
    idCardNo: "1234567890123",
    titleName: "นาย",
    firstName: "สมชาย",
    firstNameEn: "Somchai",
    lastName: "ใจดี",
    lastNameEn: "Jai Dee",
    birthdate: "01/01/1990",
    homeNo: "123",
    moo: "5",
    soi: "สุขใจ",
    street: "พหลโยธิน",
    tumbol: "ลาดพร้าว",
    amphur: "บางกะปิ",
    province: "กรุงเทพมหานคร"
  };
}

สรุป

บทความนี้อธิบายขั้นตอนการสร้าง UI บัตรประชาชน ตั้งแต่การใช้ HTML สำหรับโครงสร้าง, CSS สำหรับการจัดตำแหน่งและออกแบบ, ไปจนถึงการใช้ TypeScript และ Angular สำหรับดึงข้อมูลลูกค้าและแสดงผล เหมาะสำหรับนักพัฒนาที่ต้องการสร้าง UI ที่สมจริง ปรับแต่งได้ง่าย และสามารถใช้งานร่วมกับระบบได้