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: หนึ่งรายการควรแสดงข้อมูลอะไร

ในหน้า List ผู้ใช้ต้องมองเห็นข้อมูลสำคัญได้อย่างรวดเร็ว:

เราจะใช้ Table เพราะแต่ละรายการมี Field ชุดเดียวกัน และผู้ใช้สามารถเปรียบเทียบหลายรายการได้ง่าย

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

แก้บางส่วน: วาง Code นี้ใน <main> ต่อจาก Section ของ Form และก่อน </main>

<section 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 5: สร้าง Table รายการแรก

แทน Comment <!-- เพิ่ม table ตรงนี้ --> ด้วย Code นี้:

<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 คือหัว Column และ td คือข้อมูลแต่ละช่อง

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

แก้บางส่วน: แทน <tbody>...</tbody> เดิมทั้งก้อน

<tbody>
  <tr>
    <td>#001</td>
    <td>Login เข้าระบบไม่ได้</td>
    <td>Anan</td>
    <td><span class="status status-open">OPEN</span></td>
  </tr>
  <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>
</tbody>

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

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

เพิ่มต่อใน style.css

section + section {
  margin-top: 24px;
}
 
.table-wrapper {
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
  overflow-x: auto;
}

• section + section เพิ่มช่องว่างให้ Section ที่อยู่ต่อจาก Section อื่น
• width และ max-width จำกัด Wrapper ไม่ให้กว้างเกินพื้นที่ของ Section
• overflow-x: auto ทำให้เลื่อน Table แนวนอนได้เมื่อ Table กว้างกว่าหน้าจอ

เมื่อ Table กว้างเกินพื้นที่ Scrollbar จะอยู่ใต้ Table เท่านั้น ส่วนทั้งหน้าเว็บจะไม่ขยายออกด้านข้าง

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

เพิ่มต่อใน style.css

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

• width: 100% ทำให้ Table กว้างเต็มพื้นที่ของ Wrapper เมื่อหน้าจอมีพื้นที่เพียงพอ
• min-width: 680px บอกว่า Table ห้ามแคบกว่า 680px เพื่อไม่ให้ข้อความในแต่ละ Column ถูกบีบจนอ่านยาก
• หากหน้าจอแคบกว่า 680px Table จะยังคงกว้าง 680px และ .table-wrapper จาก Slide ก่อนหน้าจะเป็นส่วนที่เลื่อนแนวนอน
• 680px เป็นขนาดเริ่มต้นที่ให้พื้นที่กับ Table สี่ Column ของเรา และสามารถปรับได้ตามจำนวนหรือความยาวของข้อมูล

border-collapse: collapse รวมเส้นขอบของ Cell ที่อยู่ติดกันให้เป็นเส้นเดียว ทำให้ Table ดูเรียบร้อยขึ้น

Slide 9: Status Badge ประกอบด้วยสอง Class

จาก 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;
}

border-radius: 999px ทำให้ขอบ Badge โค้งเป็นทรงแคปซูล โดยไม่ต้องคำนวณรัศมีตามความกว้างของข้อความ

Slide 10: กำหนดสีให้แต่ละสถานะ

เพิ่มต่อจาก .status ใน style.css

.status-open {
  background: #fee2e2;
  color: #991b1b;
}
 
.status-progress {
  background: #fef3c7;
  color: #92400e;
}
 
.status-done {
  background: #dcfce7;
  color: #166534;
}

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

Slide 11: ตรวจ 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 12: Git และ GitHub ต่างกันอย่างไร

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

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

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

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

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

เปิด Terminal ใน Folder ที่มี index.html และ style.css แล้วรัน:

git init
git status

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

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

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

เลือกไฟล์ทั้งหมดของ Project แล้วสร้างจุดบันทึก:

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

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

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

git log --oneline

Slide 16: Push งานขึ้น GitHub

สร้าง Repository ใหม่บน GitHub โดยยังไม่เพิ่ม README หรือไฟล์เริ่มต้น จากนั้นคัดลอก URL ของ Repository มาแทนที่ URL ตัวอย่าง:

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 17: ตรวจผลงาน 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