เริ่มต้นกับ Spring Boot part 7 รับข้อมูลจาก HTML form เก็บลง database
ในบทความนี้ เราจะสร้าง HTML form เก็บข้อมูลผู้ป่วย และบันทึกลง database
โดยสิ่งที่เราจะเรียนรู้กันในวันนี้ มีดังต่อไปนี้
- สร้าง HTML form กรอกข้อมูลผู้ป่วย
- รับข้อมูลจาก form และบันทึกข้อมูลลง database
- ดึงข้อมูลจาก database มาแสดงใน HTML view
มาเริ่มกันเลยครับ
บันทึกข้อมูลลง database
สร้าง HTML form กรอกข้อมูลผู้ป่วย
สร้าง HTML file ชื่อ create.html ใน folder templates/patient แก้ไขข้อมูลเป็นดังนี้
\src\main\resources\templates\patient\create.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>create new patient</title>
</head>
<body>
<form method="post" action="/patient/create">
<fieldset>
<legend>patient</legend>
first name:<br/>
<input type="text" name="firstName">
<br>
last name:<br/>
<input type="text" name="lastName"> <br/> <br/>
<input type="submit" value="create"/>
</fieldset>
</form>
</body>
</html>
สร้าง controller ใหม่ชื่อว่า PatientController ไว้ใน package com.codesanook.springclinic.webcontroller แล้วแก้ไขข้อมูลดังนี้
\src\main\java\com\codesanook\springclinic\webcontroller\PatientController.java
package com.codesanook.springclinic.webcontroller;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Isolation;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping("/patient")
@Transactional(readOnly = false, rollbackFor = Exception.class,
isolation = Isolation.READ_COMMITTED)
public class PatientController {
@RequestMapping(value = "/create", method = RequestMethod.GET)
public String create() {
return "patient/create";
}
}
PatientController จะรับการทำงาน แบบ HTTP GET Request เมื่อเราเปิด web browser แล้วไปที่ URL /patient/create create method ก็จะ return HTML from ที่เราได้สร้างไว้แสดงผลใน web browser
ทดสอบการทำงานของ web application
ไปที่ Gradle window double click bootRun รอจน web application startup เรียบร้อยแล้ว เปิด URL /patient/create ด้วย web browser
ผลลัพธ์ที่หน้าจอ
รับข้อมูลจาก form และบันทึกข้อมูลลง database
หลักการทำงานของการบันทึกข้อมูลใน Spring Boot จะเป็นดังนี้
กรอกข้อมูลใน form > ข้อมูลถูกเก็บเข้าใน Java class > Java class นี้ถูกส่งเข้าไปเป็น parameter ของ method ใน controller > เราใช้ parameter object เก็บข้อมูลลง database
เมื่อ flow การบันทึกข้อมูลเป็นดังนี้ ดังนั้นเราต้องปรับ method ใน PatientController เป็นดังนี้
\src\main\java\com\codesanook\springclinic\webcontroller\PatientController.java
package com.codesanook.springclinic.webcontroller;
import com.codesanook.springclinic.model.Patient;
import com.codesanook.springclinic.repository.PatientRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Isolation;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping("/patient")
@Transactional(readOnly = false, rollbackFor = Exception.class,
isolation = Isolation.READ_COMMITTED)
public class PatientController {
private PatientRepository patientRepository;
@Autowired
public PatientController(PatientRepository patientRepository) {
this.patientRepository = patientRepository;
}
@RequestMapping(value = "/create", method = RequestMethod.GET)
public String create() {
return "patient/create";
}
@RequestMapping(value = "/create", method = RequestMethod.POST)
public String create(Patient patient) {
patientRepository.add(patient);
return "patient/created";
}
}
อธิบายการทำงาน
- เราได้สร้าง public String create(Patient patient) ที่รับค่าจาก HTTP POST request parameter patient object รับค่ามาจาก HTML form
- ค่า attribute name ของ input ต่างๆ ต้องตรงกับ field ต่างๆ ของ Patient เพื่อทำให้ Spring Boot นำค่าจาก form ไปเก็บใน object ของ class Patient ได้ถูกต้อง
- เนื่องจาก Patient class เป็น entity class อยู่แล้ว ดังนั้นเราสามารถบันทึกค่าลง database ได้ทันที ผ่านทาง patientRepository
- patientRepository ถูก assign ค่าหรือ inject ผ่านทาง constructor ด้วย @Autowired annotation
- เมื่อข้อมูลถูกเก็บลง database เรียบร้อย เราแสดงข้อความในหน้า HTML patient/patient-created.html ตอนระบุถึงหน้า HTML ใน method เราไม่ต้องระบุ file extension .html
ต่อมาให้เราสร้าง HTML file patient-created.html แสดงข้อความว่าได้สร้าง Patient ใหม่เรียบร้อยแล้ว แก้ไข patient-created.html เป็นดังนี้
\src\main\resources\templates\patient\patient-created.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>patient created</title>
</head>
<body>
patient created
</body>
</html>
ทดสอบการทำงาน web application
- run web application ด้วย bootRun
- เปิด URL http://localhost:8080/patient/create
- กรอกข้อมูลชื่อ นามสกุลผู้ป่วย แล้วกดปุ่ม create
- เมื่อตรวจสอบใน database ก็จะมีข้อมูลที่เราได้กรอกไว้ใน form
mysql> select * from patients;
+-----------------+------------+-----------+
| hospital_number | first_name | last_name |
+-----------------+------------+-----------+
| 1 | you | youyoo |
+-----------------+------------+-----------+
1 row in set (0.00 sec)
จบเนื้อหาในวันนี้ หวังว่าผู้อ่านจะได้ความรู้การเขียนคำสั่งรับข้อมูลจาก form แบบง่ายๆ ไปนะครับ อย่าเพิ่งเบื่อกันไปก่อนนะครับ บทความต่างๆ ยังอยู่ในขั้นเริ่มต้นจึงเน้นง่ายๆ ต่อไปเราจะปรับกันให้เป็น real world application มากขึ้นครับ
ขอบคุณครับ