[SPRING] ลองต่อฐานข้อมูลกันหน่อย

จาก Blog ที่แล้วไปลองใช้ Thymeleaf ไปแล้วกับการแสดงผลให้สวยงานครับ แต่อันนั้นข้อมูลที่ได้เกิดจากการ Mock จากชั้น Service ครับ สำหรับ Blog ตอนนี้มีเป้าหมาย

  • CRUD ได้
  • ต่อ Database ได้ โดยในที่นี้ผมใช้ MySQL ครับ

สิ่งที่ต้องเตรียม

  • ต่อ Database ต้องมีการเพิ่ม Dependency เพิ่มครับ
    • JPA / Hibernate
    • MySQL – เรื่อง Version ยังไงต้องตรวจดูด้วยนะครับ

มาลุยกันเลยครับ

  • ถ้าเพิ่มข้อมูลเกี่ยวกับ Person ก็ต้องมีหน้าจอ 2 จอ
    • หน้าจอ Main
    • หน้าจอสำหรับ List รายการ
    • หน้าจอสำหรับจัดการข้อมูล Person ครับ
    • หน้าจอดู Owner ครับ (เอามาจาก Blog ตอนก่อน 55)
  • แก้ไขไฟล์  application.properties  สำหรับการเชื่อมต่อฐานข้อมูล persondb ครับ

    • spring.datasource.driverClassName อันนี้ก็ใช้ของ MySQL ครับ
    • spring.jpa.database-platform  ก็เช่นกันครับ กำหนดให้ถูกนะครับ ถ้าลืม อาจจะเจอ Exception แบบนี้

      org.hibernate.HibernateException: Access to DialectResolutionInfo cannot be null when ‘hibernate.dialect’ not set

    • createDatabaseIfNotExist=true  สำหรับ เอาไว้กำหนดว่า ถ้าไม่เจอ Database ก็ให้สร้างใหม่เลยครับ
    • ตอน Run อย่าลืม เปิด Service ของ MySQL ตาม Config ที่กำหนดไว้นะครับ ไม่งั้นจะเจอ Error

      com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

  • อย่าลืมไปเอา  exclude = {DataSourceAutoConfiguration.class}  ออกจาก  @SpringBootApplication  ที่ไฟล์ [ชื่อ Project]Application.java  ด้วยนะครับ เดี๋ยวจะต่อ DB ไม่ได้เอา บางที่ Spring Intializer มัน Generate มาให้ครับ
  • แก้ไข Entity ครับ ให้เหมาะกับ Table ครับ โดยผมเพิ่ม Column Id เข้าไปครับ และใส่ Annotation ของ Hibernate เข้าไป ซึ่งมีทั้งพวก Validate ข้อมูล และระบุ Column ครับ
  • เพิ่มชั้น Repositories เข้ามาครับ โดยตัวนี้จะช่วยให้การติดต่อฐานข้อมูลง่ายขึ้นครับ
    • สร้าง Folder Repositories ครับ
    • สร้างไฟล์  PersonRepository.java  ครับ โดยผมใช้ JPARepository ครับ เนื่องจาก Feature เยอะว่าครับ ถ้าลอง Search หลายๆเว็บจะใช้ CrudRepository ครับ JPARepository  มาจาก CrudRepository, PagingAndSortingRepository, QueryByExampleExecutor และ Repository ครับ
    • มาดูไฟล์  PersonRepository.java  สมบูรณ์ครับ เนื่องจากไม่มี Cusotmize อะไรเลย ยุ่งกับ Table 1 ต่อ 1 ครับ
  • แก้ไข Service  โดยหลักจะเป็นการเตรียม Method สำหรับ List รายการ / เพิ่ม / ลบ / แก้ไข / เรียกดูข้อมูล ครับ แต่ในส่วนของ Service อันนี้ผมจะแยกเป็น Interface กับ Implement ครับ
    • Interface กำหนด Spec ที่ไฟล์  PersonService.java ครับ
    • Implement ใส่การทำงานจริงครับ ที่ไฟล์  PersonServiceImpl.java ครับ
  • แก้ไข Controller โดยต้องเพิ่ม 2 ไฟล์
    • ไฟล์  IndexController.java  เอาไว้จัดการกับทุก Request ที่เข้ามาครับ โดยใช้งานคู่กับ ไฟล์  index.html  ครับ
    • ไฟล์  PersonController.java เอาไว้จัดการกับทุก Request ที่เกี่ยวกับ [basepath]/persons (หน้า List) และ  [basepath]/person  ครับ
  • หลังจากได้ Controller แล้วมาดูหน้าจอ View ครับ (อันนี้สำหรับผมแล้วเสียเวลาไปวันเต็มๆเลย)
    • สำหรับ Default Path ของ Thymeleaf จะถูก Map พวกไฟล์ View และผองเพื่อน (พวก CSS – ผมใช้ Bootstrap 4, /JS/ Image) ไว้ที่  [CLASS PATH]/resources/static/ ครับ โดยมีโครงสร้างคร่าวๆ ดังนี้
    • สำหรับ View มีข้อควรระวังของ Thymeleaf
      • การอ้างอิงไฟล์  CSS ใน Tag  <link>  ให้มีการระบุ Path ผ่าน  th:href="@{/css/bootstrap.min.css}"  ครับ โดยมันจะไปอ้างอิงตาม Default Path ของ Thymeleaf ครับ
      • การอ้างอิงไฟล์ JS ใน Tag  <script>  ให้มีการระบุ Path ผ่าน  th:src="@{/js/bootstrap.min.js}"  ครับ โดยมันจะไปอ้างอิงตาม Default Path ของ Thymeleaf ครับ
      • สำหรับการ Include ไฟล์อื่นเข้าไป อย่างเช่น ผมต้องการ Include ไฟล์  header.html  เข้าไปครับ โดยใช้  <th:block th:include=  ครับ
    • ตัวอย่าง Code ของแต่ละไฟล์ เอาแค่บางส่วนนะครับ เดี๋ยว Blog จะยาวไป
      • ไฟล์  index.html  ครับ
      • ไฟล์ persons.html ครับ แสดงรายการของ Person ทั้งหมดครับ
      • ไฟล์  editPerson.html  ครับ สำหรับ New / Edit Person ครับ

ทดสอบกันครับ

  • เข้าเว็บเล่นกันครับ ผ่าน  http://localhost:8080  ครับ
  • ลองสร้าง Person
  • เข้ามาดูหน้า List Person
  • View รายการ 1 รายการ

Code ที่เสร็จแล้ว

  • Download ไปลองเล่นกันได้ครับ

สำหรับ Blog ตอนแรกคิดว่าใช้เวลาทำ 2 ชั่วโมง แต่ติดปัญหาด้าน UI จนยาวมาวันครึ่งแทนครับ ใน Blog ตอนนี้ ผมคง Focus เรื่องขา Views (UI) เพราะยังได้กลิ่นของ Code ที่ซ้ำอยู่ครับ และยังขาดในส่วนของการ Validate ข้อมูลครับ