เริ่มต้นกับ 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

ผลลัพธ์ที่หน้าจอ

image 2

รับข้อมูลจาก 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

image 3

image 4

mysql> select * from patients;
+-----------------+------------+-----------+
| hospital_number | first_name | last_name |
+-----------------+------------+-----------+
|               1 | you        | youyoo    |
+-----------------+------------+-----------+
1 row in set (0.00 sec)

จบเนื้อหาในวันนี้ หวังว่าผู้อ่านจะได้ความรู้การเขียนคำสั่งรับข้อมูลจาก form แบบง่ายๆ ไปนะครับ อย่าเพิ่งเบื่อกันไปก่อนนะครับ บทความต่างๆ ยังอยู่ในขั้นเริ่มต้นจึงเน้นง่ายๆ ต่อไปเราจะปรับกันให้เป็น real world application มากขึ้นครับ

ขอบคุณครับ

download source code

https://github.com/codesanook/spring-clinic