Issue List and Git

Day 1 - ชั่วโมงที่ 4: เพิ่ม Issue List และบันทึกงานด้วย Git

เป้าหมายของชั่วโมงนี้

หลังจบชั่วโมงที่สี่ ผู้เรียนควรสามารถ:

1. เพิ่มรายการปัญหาแบบ Static ต่อจาก Form เดิมได้
2. ใช้ HTML Table แสดงข้อมูลหลายรายการได้
3. ทำให้ Table ใช้งานบนหน้าจอเล็กได้
4. สร้าง Status Badge ที่สื่อความหมายด้วยข้อความและสีได้
5. เข้าใจความแตกต่างระหว่าง Git และ GitHub
6. Commit และ Push งาน Day 1 ขึ้น GitHub ได้

ไฟล์ที่ใช้ในชั่วโมงนี้

index.html
style.css

คำสั่ง Git ให้รันใน Terminal ที่เปิดอยู่ใน Project Folder

โครงสร้างเวลา 60 นาที

Slide 1: จาก Form ไปสู่รายการปัญหา

ตอนนี้หน้าเว็บของเรามี:

• Header แสดงชื่อระบบ
• Form สำหรับกรอกข้อมูลปัญหา
• CSS ที่รองรับหน้าจอเล็กและหน้าจอกว้าง
• Footer แสดงข้อมูลส่วนท้าย

Hour นี้เราจะเพิ่ม Issue List ต่อจาก Form เพื่อให้เห็นตัวอย่างปัญหาที่เข้าสู่ระบบ แล้วบันทึกงาน Day 1 ด้วย Git

Slide 2: ตอนนี้ยังเป็น Static Prototype

เมื่อกด Submit ตอนนี้ ข้อมูลยังไม่ถูกเพิ่มลงในรายการ เพราะเรายังไม่มี JavaScript, Backend และ Database

Issue List ที่กำลังจะสร้างจึงใช้ข้อมูลตัวอย่างที่เขียนไว้ใน HTML โดยตรง เพื่อเตรียมหน้าตาก่อนเชื่อมข้อมูลจริงในวันถัดไป

Slide 3: เพิ่ม Section สำหรับ Issue List

แต่ละแถวจะแสดงรหัส หัวข้อ ผู้แจ้ง และสถานะ เพื่อให้เปรียบเทียบหลายรายการได้ง่าย

+<section class="issue-list" aria-labelledby="issue-list-title">+  <h2 id="issue-list-title">รายการปัญหาล่าสุด</h2>+  <p>ตัวอย่างรายการปัญหาที่ถูกแจ้งเข้ามาในระบบ</p>  +  <div class="table-wrapper">+    <!-- เพิ่ม table ตรงนี้ -->+  </div>+</section>

aria-labelledby เชื่อม Section กับหัวข้อ issue-list-title ทำให้เครื่องมือช่วยการเข้าถึงรู้ว่า Section นี้เกี่ยวกับอะไร

Slide 4: สร้าง Table รายการแรก

+<table>+  <thead>+    <tr>+      <th>รหัส</th>+      <th>หัวข้อ</th>+      <th>ผู้แจ้ง</th>+      <th>สถานะ</th>+    </tr>+  </thead>+  <tbody>+    <tr>+      <td>#001</td>+      <td>Login เข้าระบบไม่ได้</td>+      <td>Anan</td>+      <td><span class="status status-open">OPEN</span></td>+    </tr>+  </tbody>+</table>

thead เก็บหัวตาราง ส่วน tbody เก็บข้อมูล โดยหนึ่ง tr คือหนึ่งแถว และแต่ละช่องใช้ th หรือ td

Slide 5: เพิ่มข้อมูลตัวอย่างให้ครบสามสถานะ

แถว #001 ยังอยู่เหมือนเดิม เพิ่มเฉพาะ Mock Data อีกสองแถว:

+<tr>+  <td>#002</td>+  <td>ส่งแบบฟอร์มไม่ได้</td>+  <td>Mali</td>+  <td><span class="status status-progress">IN_PROGRESS</span></td>+</tr>+<tr>+  <td>#003</td>+  <td>ขอสิทธิ์เข้า Dashboard</td>+  <td>Kanda</td>+  <td><span class="status status-done">DONE</span></td>+</tr>

ข้อมูลทั้งสามแถวเป็น Mock Data จึงแก้ได้ใน Code เท่านั้น และจะย้ายไปเป็นข้อมูล TypeScript ใน Day 2 ก่อนเชื่อม Database ใน Day 4

Slide 6: เตรียมพื้นที่ให้ Table บนทุกขนาดจอ

+.issue-list {+  margin-top: 24px;+}+ +.table-wrapper {+  margin-top: 16px;+  overflow-x: auto;+}

.issue-list เพิ่มระยะจาก Form โดยไม่เปลี่ยน Layout ของ main จึงไม่ดันความกว้างของ Table บนหน้าจอเล็ก

overflow-x: auto เปิด Scroll แนวนอนเฉพาะ Wrapper เมื่อ Table กว้างกว่าพื้นที่ ทำให้หน้าเว็บทั้งหน้าไม่ล้นออกด้านข้าง

Slide 7: ทำให้ Table อ่านง่าย

+table {+  width: 100%;+  min-width: 680px;+  border-collapse: collapse;+}+ +th,+td {+  border-bottom: 1px solid #e5e7eb;+  padding: 12px;+  text-align: left;+}+ +th {+  background: #f8fafc;+  color: #475569;+  font-size: 14px;+}

• min-width: 680px กัน Column ถูกบีบจนอ่านยาก
• border-collapse รวมเส้นขอบที่ติดกันให้เป็นเส้นเดียว

Slide 8: สร้าง Status Badge สามสถานะ

จาก HTML ใน Table:

<span class="status status-open">OPEN</span>

• status คือ Style พื้นฐานที่ใช้ร่วมกันทุกสถานะ
• status-open คือสีเฉพาะของสถานะ OPEN

เพิ่ม Style พื้นฐานต่อใน style.css

+.status {+  display: inline-block;+  border-radius: 999px;+  padding: 4px 10px;+  font-size: 12px;+  font-weight: 700;+}+ +.status-open {+  background: #fee2e2;+  color: #991b1b;+}+ +.status-progress {+  background: #fef3c7;+  color: #92400e;+}+ +.status-done {+  background: #dcfce7;+  color: #166534;+}

status คือ Style ที่ใช้ร่วมกัน ส่วน Class ที่สองกำหนดสีเฉพาะสถานะ สีช่วยให้มองหาได้เร็ว แต่ยังต้องมีข้อความ OPEN, IN_PROGRESS และ DONE เพราะผู้ใช้บางคนอาจแยกสีได้ยาก

Slide 9: ตรวจ Static Prototype ให้ครบ

เปิด index.html แล้วตรวจผลลัพธ์:

• Form และ Issue List อยู่คนละ Section
• Table แสดง Mock Data ครบ 3 รายการ
• Badge แต่ละสถานะมีทั้งสีและข้อความ
• บนจอเล็ก Table เลื่อนแนวนอนได้ แต่หน้าเว็บไม่ล้น
• Header, Form, Issue List และ Footer มีระยะห่างสม่ำเสมอ
• เมื่อกด Submit ข้อมูลยังไม่เพิ่มใน Table ซึ่งเป็นพฤติกรรมที่ถูกต้องในตอนนี้

เมื่อหน้าตาพร้อมแล้ว ขั้นตอนต่อไปคือบันทึก Source Code ด้วย Git

Slide 10: Git และ GitHub ต่างกันอย่างไร

Git ใช้งานบนเครื่องได้โดยไม่ต้องมี GitHub แต่เราจะใช้ทั้งสองอย่างเพื่อเก็บงานไว้บนเครื่องและ Online

Slide 11: Workflow ที่ใช้บันทึกงาน

แก้ไฟล์
   ↓
git status       ตรวจว่ามีไฟล์ใดเปลี่ยน
   ↓
git add .        เลือกการเปลี่ยนแปลงสำหรับ Commit
   ↓
git commit       บันทึกการเปลี่ยนแปลง
   ↓
git push         ส่ง Commit ขึ้น GitHub

git add ยังไม่ใช่การบันทึกถาวร ขั้นตอนที่สร้างจุดบันทึกจริงคือ git commit

Slide 12: เริ่มให้ Git ติดตาม Project

git init
git status

• git init สร้าง Git Repository ใน Folder ปัจจุบัน โดยใช้เพียงครั้งแรก
• git status แสดงสถานะของไฟล์และใช้ตรวจว่าเราเปิด Terminal ถูก Folder หรือไม่

หาก Project นี้เป็น Git Repository อยู่แล้ว ไม่ต้องรัน git init ซ้ำ

Slide 13: สร้าง Commit แรก

git add .
git status
git commit -m "Create Day 1 static issue page"

• . หมายถึงไฟล์ทั้งหมดภายใน Folder ปัจจุบัน
• git status รอบที่สองช่วยตรวจไฟล์ก่อน Commit
• ข้อความหลัง -m อธิบายสั้น ๆ ว่า Commit นี้สร้างอะไร

ตรวจ Commit ที่เพิ่งสร้างด้วย:

git log --oneline

Slide 14: เชื่อมและ Push งานขึ้น GitHub

git branch -M main
git remote add origin https://github.com/username/repository-name.git
git push -u origin main

• git branch -M main ตั้งชื่อ Branch หลักเป็น main
• git remote add origin เชื่อม Project บนเครื่องกับ Repository บน GitHub
• git push -u origin main ส่ง Commit ขึ้น GitHub และจำปลายทางสำหรับการ Push ครั้งถัดไป

Slide 15: ตรวจผลงาน Day 1

เปิดหน้า Repository บน GitHub แล้วตรวจว่าเห็น:

• index.html
• style.css
• Commit message Create Day 1 static issue page

ตรวจการเชื่อมต่อจาก Terminal ได้ด้วย:

git status
git remote -v

Day 1 เราสร้าง Static Prototype ที่มี Form, Issue List, Responsive CSS และประวัติ Source Code แล้ว

Day 2 เราจะสร้าง Next.js Project และย้ายหน้า Static นี้ไปเป็น app/page.tsx กับ app/globals.css