Chatri Ngambenchawong

ยอมรับเลยครับ ว่าปีนี้น่าจะเป็นปีที่โทรมที่สุด เพราะ ทำงาน จันทร์ – เสาร์ เช้างาน 8 โมง กว่าจะเลิกงานได้ก็ปาไปเกือบๆ 3 ทุ่ม – 4 ทุ่มแล้ว เวลานั้นสมงสมองล้าไปหมดครับ เลยวาง Thesis มาทำในช่วงวันอาทิตย์เป็นหลักครับ ส่วนวันทำงานปกติถ้าเลือก 3 ทุ่ม ก็ไปวิ่ง วิ่งคนเดียวในวงเวียนใหญ่ 555 (เวลานี้ปกติคนจะกลับไปหมดแล้วครับ) อย่างที่บอกไปครับ

ปีนี้เน้นสุขภาพครับ แต่งานโคตรเยอะครับ

และก็หวังว่าหลังจากเดือนกันยายนไป งานจะเริ่มดีขึ้นครับ เพราะ มีคนเข้ามาช่วย Support มากขึ้นแล้วครับ หลังจากการวางแผนการจัดการ Resource ที่ผิดพลาดในโครงการก่อนจน Resource ที่มีทำงานซ้ำซ้อนไปหมดครับ เรียน SE มาวิชา PM เออมันสำคัญจริงๆนะ แม้ว่าเราจะไม่ได้จัดการ Resource แต่เป็นกลไกไกลให้โครงการเดินต่อไปได้ควรรู้และเข้าใจครับ //บ่นมามากพอและ 555

วันที่ 9 เดือน 9 หลังจากรอบมานาน ก็โดนโปรไปครับ 555 โดยได้มาหลายอย่างเลย เช่น เมาส์ Ergonomic (เดี๋ยวจะมา Review นะครับ / หูฟัง Sony และ Mi Band 3 ครับ โดยที่สั่ง Mi Band 3 เพราะ อยากจะเอามาช่วยนับก้าวเดิน ดูการนอนแบบคร่าวๆ และจับอัตราการเต้นของหัวใจเมื่อวิ่งครับ เมื่อได้ของมาแล้วมาลองแกะกันครับ

สำหรับ Mi Band3 เมื่อแกะกล่องพบของ ดังนี้ครับ

This slideshow requires JavaScript.

ตัว Mi Band3
สายรัดข้อมือ
สายชาร์จครับ

ถ้าจะใช้งานจริงจังต้องมีลง App Mi Fit ด้วยนะครับ และต้องสร้างบัญชี Mi Account ด้วย ซึ่งก็สมัครได้หลายช่องทาง (ผมใช้ Facebook Login ครับ แต่จัดสิทิธิ์บางอย่างไม่ให้ Xiaomi ได้ครับ)

การเชื่อมต่อครั้งแรกต้องเปิด Bluetooth เพื่อ เชื่อมต่อครับ (ส่วนครั้งหลังๆมันจะเปิดอัตโนมัติ เมื่อเราเปิด App Mi Fit เพื่อ Sync ข้อมูลครับ)
ใช้ร่วมกันหูฟัง Bluetooth ของผมใช้ร่วมกับ Sony ก็ไม่มีปัญหาครับ
ลองเชื่อมกับ App วิ่งอย่าง Nike+ Run Club ก็ไม่มีปัญหาอะไรนะครับ ส่วนวิธีการเชื่อมขอแยกเป็นอีก Blog ครับ
ลองใช้ให้มันจับเวลานอน ผมว่ามันก็จับได้แม่นอยู่นะ ระบบมันบอกเลยว่านอนน้อยมากก และนอนหลับไม่สนิทด้วย ซึ่งก็น่าจะจริง งานค้างคาใจมากครับ

เดี๋ยวลองใช้ไปจนถึงสิ้นปีน่าจะได้เขียนอีกทีใน Blog “Year in Review” ครับ

Spring / Spring Boot

[SPRING] ตรวจสอบข้อมูลก่อน Save ด้วย hibernate validator ครับ

Posted on September 14, 2018August 5, 2018by Adminping

หลังจาก Blog ตอนที่แล้วผมได้ลองทำ CRUD โดยใช้ Spring Boot ในเรื่องการการจัดการข้อมูล Person ไปแล้วนะครับ แต่ Blog ตอนล่าสุดของผมยังทิ้งท้ายอยู่นะครับ ว่ามันควรจะมีเรื่องของการ Validate ข้อมูลครับ คราวนี้ ผมเขียนตัว Validate ให้มันสมบูรณ์ครับ ซึ่ง Package ที่ผมใช้ hibernate validator ซึ่งเข้าตัวนี้มันเข้ามากับตอนที่เราใส่ Dependency Spring JPA แล้วครับ มาทำเลยดีกว่า

สิ่งที่ต้องมี

สร้างเว็บของตัวเองที่มี CRUD กันก่อนครับ
หรือ ของผมใช้จาก Blog ตอนที่แล้วครับ

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

ชั้น Entity ที่เก็บ POJO Class – ตัว Data Class ของเราแหละครับ เตรียม Annotation ที่เกี่ยวกับการ Validate ข้อมูลครับ อย่างตอนนี้ผมใช้ตัว @NotNull กับ @Size ครับ

@Entity
public class Person
{
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Integer id;

    @NotNull
    @Size(min=3, max=30)	
    private String Firstname;

    @NotNull
    @Size(min=3, max=50)	
    private String Lastname;
   
    //มีพวก setter กับ getter อันนี้จะขอละไว้ครับ
}

@Entity

public class Person

{

@Id

@GeneratedValue(strategy = GenerationType.AUTO)

private Integer id;

@NotNull

@Size(min=3, max=30)

private String Firstname;

@NotNull

@Size(min=3, max=50)

private String Lastname;

//มีพวก setter กับ getter อันนี้จะขอละไว้ครับ

}

ชั้น Controller สำหรับ Parameter ต้องการ Validate ข้อมูลนั้น

ใช้ Annotation @Valid ที่อยู่ใน Pacakge javax.validation เติมนำหน้า Parameter ของ Function ครับ
เพิ่ม BindingResult สำหรับเก็บผลการ Validate ไว้ครับ โดยเก็บไว้ในตัวแปรชื่อ result
จากนั้นเติมเงื่อนไขดักการ Validate ข้อมูลครับ โดยใช้ result.hasErrors() ครับ

Java
if(result.hasErrors()) { //ถ้ามี Error ไม่ยอมให้ Save ต่อ return "person/editPerson"; }
1
2
3
4
if(result.hasErrors()) {
//ถ้ามี Error ไม่ยอมให้ Save ต่อ
return "person/editPerson";
}

มาดู Code สมบูรณ์ของ Method savePerson() ครับ

@RequestMapping(value = "person", method = RequestMethod.POST)
public String savePerson(@Valid Person person, BindingResult result) {
   //ดัก Error ไว้ก่อน Insert
   if(result.hasErrors()) {
      return "person/editPerson";
   }
   personService.savePerson(person);
   return "redirect:/persons";
}

@RequestMapping(value = "person", method = RequestMethod.POST)

public String savePerson(@Valid Person person, BindingResult result) {

//ดัก Error ไว้ก่อน Insert

if(result.hasErrors()) {

return "person/editPerson";

}

personService.savePerson(person);

return "redirect:/persons";

}

ชั้น View อันนี้ตัว Thymeleaf ได้มีตัวช่วยแล้วครับ โดยถ้ามี Error มันถูก Inject เข้ามาในตัวแปร #fields ครับ

แสดง Error โดยดูจาก Property hasErrors('ชื่อ Property ใน Enrity[POJO Class]) เช่น ${#fields.hasErrors('Firstname') ครับ เวลาใช้งานก็ดัก Error ที่ส่งมาจาก Controller ผ่าน th:if แล้วค่อยแสดงผลครับ Code ตามนี้ครับ

<div class="form-group">
   <label class="col-sm-2 control-label">Firstname:</label>
   <div class="col-sm-10">
      <input type="text" class="form-control" th:field="*{Firstname}"/>
      <label th:if="${#fields.hasErrors('Firstname')}" th:class="'error'">Firstname Error</label>
   </div>
</div>

<label class="col-sm-2 control-label">Firstname:</label>

<label th:if="${#fields.hasErrors('Firstname')}" th:class="'error'">Firstname Error</label>

</div>

มาดู Code ที่ผมได้แก้ไขในไฟล์ editPerson.html ครับ ใช้ได้ทั้ง Model New / Edit ครับ

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
      layout:decorator="layouts/mainLayout">

<head>
    <title>Layout</title>
</head>
<body>
    <div layout:fragment="content">
        <h2>Person Details</h2>
        <div>
            <form class="form-horizontal" th:object="${person}" th:action="@{/person}" method="post">
                <input type="hidden" th:field="*{id}"/>
                <!-- <input type="hidden" th:field="*{version}"/> -->
                <div class="form-group">
                    <label class="col-sm-2 control-label">Firstname:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" th:field="*{Firstname}"/>
                        <label th:if="${#fields.hasErrors('Firstname')}" th:class="'error'">Firstname Error</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Lastname:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" th:field="*{Lastname}"/>
                        <label th:if="${#fields.hasErrors('Lastname')}" th:class="'error'">Lastname Error</label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

layout:decorator="layouts/mainLayout">

<head>

<title>Layout</title>

</head>

<body>

<h2>Person Details</h2>

<div>

<label class="col-sm-2 control-label">Firstname:</label>

<label th:if="${#fields.hasErrors('Firstname')}" th:class="'error'">Firstname Error</label>

</div>

<label class="col-sm-2 control-label">Lastname:</label>

<label th:if="${#fields.hasErrors('Lastname')}" th:class="'error'">Lastname Error</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

</div>

</body>

</html>

ลองมาทดสอบกันดูครับ

เมื่อมี Error ระบบแสดง Message ดังนี้ครับ

สำหรับ Blog หน้า ผมคงลอง Custom Error Message ดูครับ 😀 แต่ถึงแม้ว่าชั้น Entiry และ Controller มีกลไกในการดัก Validate ข้อมูลแล้ว แต่ฝั่ง Front-End ต้องดักด้วยนะครับ

[SPRING] มาใช้จัด Layout ให้กับ UI (Thymeleaf) ครับ

Posted on September 9, 2018July 30, 2018by Adminping

จาก Blog ตอนที่ที่ได้สร้างเว็บที่มี CRUD ต่อกับฐานข้อมูลแล้ว แต่ยังพบปัญหาว่ามันยังมี Code ที่ซ้ำซ้อนในส่วนของ UI เช่น

ไฟล์ index.html ครับ
และไฟล์ editPerson.html เป็นต้น

พระเอกที่จะมาช่วยเราในครั้งนี้ คือ thymeleaf-layout-dialect

ถ้าใครเคยเรียน Design Pattern มาสิ่งที่ thymeleaf ทำ คือ View แต่ละอันทำหน้าที่ของตัวเองพอ แสดง Content ในส่วนที่รับผิดชอบ ส่วนการจัดการพวกเมนู และอื่นๆ จะถูกเพิ่มความสามารถ(Declorate) เข้าไปจากตัว Layout ครับ
ตัว Design Pattern ที่ผมหมายถึง คือ Decorator pattern ครับ

มาดูโจทย์กันก่อน

เว็บจาก Blog ตอนที่แล้วครับ ที่ผมชี้จุดไปว่าเห้ยมันมี Code ซ้ำ
ผมแยก 2 ส่วนนะครับ Header, Content และเพิ่ม Footer ตามรูปครับ

สิ่งที่ต้องมี

เว็บตัวอย่างแหละ ปกติผมจะอ้างอิงจาก Blog ตอนก่อน แต่จะสร้างใหม่ก็ได้นะ
ตรวจสอบ Dependency ให้ดีต้องมี
- thymeleaf
  
  Default
  <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
  1
  2
  3
  4
  <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>
- thymeleaf-layout-dialect
  
  Default
  <dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> </dependency>
  1
  2
  3
  4
  <dependency>
  <groupId>nz.net.ultraq.thymeleaf</groupId>
  <artifactId>thymeleaf-layout-dialect</artifactId>
  </dependency>

Let’s Refactoring

สร้างโพลเดอร์ layouts ใน ก่อนครับ วางโครงสร้างไว้ก่อน เช่น แยก Layout ของหน้าจอ User กับ Admin ครับ

สร้างไฟล์ในโพลเดอร์ layouts ชื่อ mainLayout.html ครับ

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head th:replace="fragments/header :: header">
<title>Header</title>
</head>

<body>
  <div class="container" id="mainContent">
    <div layout:fragment="content"></div>
  </div>

  <div th:replace="fragments/footer :: footer"></div>

</body>

</html>

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"

xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<title>Header</title>

</head>

<body>

</div>

</body>

</html>

สังเกตุดีๆครับ ว่าในแท๊ก <html> ต้องมีการอ้างถึง xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" ครับ เพื่อให้ Engine ของ Thymeleaf รู้ครับ
ตรงแท๊ก <head> มีกำหนด header ไว้ครับ โดยจะอ้างอิงไฟล์ใน fragments/header ครับ
ส่วนแท๊ก <div layout:fragment="content"> เป็นช่องว่างๆครับ เอาไว้นำ html จากหน้าจออื่นๆ เช่น มาเสียบแทนครับ
ตรงแท๊ก <div> มีกำหนด footer ไว้ครับ โดยจะอ้างอิงไฟล์ใน fragments/footer ครับ

โครงสร้าง ณ ตอนนี้ครับ

resources
-> static 
   -> css - พวก CSS จะเก็บในนี้
      -> bootstrap.xxx.css ใส่ไฟล์เกี่ยวกับ bootstrap      
      -> person.css
   -> js - พวก javascript จะเก็บไว้ในนี้   
      -> bootstrap.xxx.js ใส่ไฟล์เกี่ยวกับ bootstrap
-> templates
   -> fragments 
      -> header.html 
      -> footer.hmtl
   -> layouts
      -> mainLayout.html (เพิ่มเข้ามาใหม่)
   -> person
      -> persons.html
      -> editPerson.html
      -> viewPerson.html
   -> owner.html
-> index.html

resources

-> static

-> css - พวก CSS จะเก็บในนี้

-> bootstrap.xxx.css ใส่ไฟล์เกี่ยวกับ bootstrap

-> person.css

-> js - พวก javascript จะเก็บไว้ในนี้

-> bootstrap.xxx.js ใส่ไฟล์เกี่ยวกับ bootstrap

-> templates

-> fragments

-> header.html

-> footer.hmtl

-> layouts

-> mainLayout.html (เพิ่มเข้ามาใหม่)

-> person

-> persons.html

-> editPerson.html

-> viewPerson.html

-> owner.html

-> index.html

มาแก้ไขไฟล์อื่นๆครับ ยกตัวอย่างเฉพาะของ
- header อันนี้มีการเพิ่ม th:fragment="header" เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์ mainLayout.html ครับ ในส่วน header
- footer อันนี้มีการเพิ่ม th:fragment="footer" เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์ mainLayout.html ครับ ในส่วน footer
- editPerson มีการเพิ่ม layout:fragment="content" เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์ mainLayout.html ครับ ในส่วน content

ไฟล์ที่ทำเสร็จแล้วครับ

สามารถ Download ไปทดสองได้เลย ^__^

นายแว่นสตอรี่

[CUCARUN2018] กลิ้งมินิมาราธอนครั้งที่ 2

Posted on September 9, 2018September 15, 2018by Adminping

หลังจากลองวิ่งครั้งแรกที่งาน Globe-Athon 2016 จนขาชาไป รุ่งขึ้นนี่พักยาวแล้ว หลังจากตอนนั้นผมก็เว้นการวิ่งไป เพิ่งกลับมาวิ่งอีกทีตอนต้นปี 2018 ครับ วิ่งตามหมอสั่ง 5555 โดยผมวิ่งๆแถววางเวียนใหญ่ แถวสวนลุม 3-5 km ครับ มาที่งานวันนั้นกันดีกว่าครับ สำหรับงานนี้ผมเพิ่งรู้ว่ามีนะ เหมือนการประชาสัมพันธ์จะไม่ค่อยมี หรือปากต่อปากกันในวงศิษย์เก่า ศิษย์ปัจจุบันครับ โดยงาน CUCARun เป็นงานวิ่งของภาควิชาวิศวกรรมคอมพิวเตอร์ จุฬาลงกรณ์มหาวิทยาลัยครับ เราเป็นเด็ก ป โท เลยขอไปร่วมแจมด้วยครับ โดยมีผมได้สรุปงานมาเป็นข้อๆ ตามในผมดังนี้

มารับเสื้อครับ เลืกงานก็วิ่งมาเลยครับ มาถึงที่ Stadium One ประมาณ 18.25 ครับ
This slideshow requires JavaScript.
งานนี้เป็นงานวิ่งที่ผมว่าแปลกมาก มันเริ่มวิ่งตี 5 หลายคนน่าจะตื่นไม่ทันเลยครับ ผมเองถ้าไม่ได้น้องไม่ได้ไปส่งไม่น่าจะตื่นทันครับ แต่เข้าใจว่าที่ต้องการเลื่อนมาให้เร็วขึ้นจากกำหนดการเดิม คือ 6 โมง เพราะ ไม่อยากให้ชนกับการซ้อมรับปริญญาครับ แต่มีข้อดีอีกอย่าง คือ วิ่งตอนเช้าไม่ค่อยมีรถ ควันน้อยมาก และได้เห็นภาพของกรุงเทพไปอีกมุมนึงครับ
This slideshow requires JavaScript.
ทางเดินในอุทยาน 100 ปี อยากให้เปิดไฟที่พื้นให้สว่างครับ – เพราะนักวิ่งหลายท่านวิ่งสะดุดไฟเตี้ยๆเหล่านี้ครับ
บางช่วงของเล่นทางวิ่ง อย่างในช่วงถนนวิทยุมืดมากครับ จุดสุดท้ายตัดสินใจเดิน และเปิดไฟมือถือประกอบด้วย
อีกนิดเดวววว สู้ๆต่อไปปปปปปปปปปปปป
น้ำในช่วงกิโลเมตรที่ 8 แก้วหมดครับ
ตอนช่วงกิโลเมตรที่ 9 เป็นไปได้ ไม่อยากให้วิ่งขึ้นสะพานลอยครับ ดูสภาพนักวิ่งหลายท่านแล้ว ขาไม่น่าจะไหวแล้ว น่าจะลงอุโมงแทนนะครับ เพราะ ความชันน่า และจำนวนชั้นน่าจะน้อยกว่าครับ
จบแล้วครับ เวลาที่ทำได้ดีกว่างาน Globe-Athon 2016 ครับ อิอิ
ของกินตอนจบงานครับ อร่อยมากครับ วิ่งมาเหนื่อยๆได้น้ำดื่มเย็นๆ กล้วยหอม และข้าวเหนียวหมูฝอย พร้อมที่จะไปเรียนต่อช่วงเช้าครับ
เหรียญที่ได้ครับ สมกับเป็นภาคคอมฯ ครับ 3.5 Floppy A ครับ เก็บทุกอย่างไว้ในความทรงจำครับ

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

Posted on September 6, 2018August 5, 2018by Adminping

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

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

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

ต่อ Database ต้องมีการเพิ่ม Dependency เพิ่มครับ
- JPA / Hibernate
  
  Default
  <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency>
  1
  2
  3
  4
  <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
  </dependency>
- MySQL – เรื่อง Version ยังไงต้องตรวจดูด้วยนะครับ
  
  Default
  <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.6</version> </dependency>
  1
  2
  3
  4
  5
  <dependency>
     <groupId>mysql</groupId>
     <artifactId>mysql-connector-java</artifactId>
     <version>5.1.6</version>
  </dependency>

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

ถ้าเพิ่มข้อมูลเกี่ยวกับ Person ก็ต้องมีหน้าจอ 2 จอ
- หน้าจอ Main
- หน้าจอสำหรับ List รายการ
- หน้าจอสำหรับจัดการข้อมูล Person ครับ
- หน้าจอดู Owner ครับ (เอามาจาก Blog ตอนก่อน 55)

แก้ไขไฟล์ application.properties สำหรับการเชื่อมต่อฐานข้อมูล persondb ครับ

#Database
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost/persondb?createDatabaseIfNotExist=true
spring.datasource.username=root
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.properties.hibernate.generate_statistics=true
spring.jpa.hibernate.ddl-auto=update

#Database

spring.datasource.driverClassName=com.mysql.jdbc.Driver

spring.datasource.url=jdbc:mysql://localhost/persondb?createDatabaseIfNotExist=true

spring.datasource.username=root

spring.datasource.password=

spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect

spring.jpa.properties.hibernate.generate_statistics=true

spring.jpa.hibernate.ddl-auto=update

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 ครับ

         Repository
             |
             V
       CrudRepository
    	     |
    	     V
PagingAndSortingRepository     QueryByExampleExecutor
    			         | 	   |
    			         V 	   V
		                      JpaRepository

Repository

CrudRepository

PagingAndSortingRepository QueryByExampleExecutor

| |

V V

JpaRepository

มาดูไฟล์ PersonRepository.java สมบูรณ์ครับ เนื่องจากไม่มี Cusotmize อะไรเลย ยุ่งกับ Table 1 ต่อ 1 ครับ

package com.cu.thesis.WeMuBPMN.repository;

import com.cu.thesis.WeMuBPMN.entity.Person;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface PersonRepository extends JpaRepository<Person, Integer>
{

}

package com.cu.thesis.WeMuBPMN.repository;

import com.cu.thesis.WeMuBPMN.entity.Person;

import org.springframework.data.jpa.repository.JpaRepository;

import org.springframework.stereotype.Repository;

@Repository

public interface PersonRepository extends JpaRepository<Person, Integer>

{

}

แก้ไข Service โดยหลักจะเป็นการเตรียม Method สำหรับ List รายการ / เพิ่ม / ลบ / แก้ไข / เรียกดูข้อมูล ครับ แต่ในส่วนของ Service อันนี้ผมจะแยกเป็น Interface กับ Implement ครับ

Interface กำหนด Spec ที่ไฟล์ PersonService.java ครับ

package com.cu.thesis.WeMuBPMN.service
import com.cu.thesis.WeMuBPMN.entity.Person;

public interface PersonService
{
   Person viewOwner();
   Iterable<Person> listAllPersons();
   Person getPersonById(Integer id);
   Person savePerson(Person product);
   void deletePerson(Integer id);
}

package com.cu.thesis.WeMuBPMN.service

import com.cu.thesis.WeMuBPMN.entity.Person;

public interface PersonService

{

Person viewOwner();

Iterable<Person> listAllPersons();

Person getPersonById(Integer id);

Person savePerson(Person product);

void deletePerson(Integer id);

}

Implement ใส่การทำงานจริงครับ ที่ไฟล์ PersonServiceImpl.java ครับ

package com.cu.thesis.WeMuBPMN.service;

import com.cu.thesis.WeMuBPMN.entity.Person;
import com.cu.thesis.WeMuBPMN.repository.PersonRepository;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class PersonServiceImpl implements PersonService
{
 
    private PersonRepository personRepository;

    @Autowired
    public void setPersonRepository(PersonRepository personRepository)
    {
        this.personRepository = personRepository;
    }

    @Override
    public Person viewOwner()
    {
        return new Person("Chatri", "Ngambenchawong");
    }

    @Override
    public Iterable<Person> listAllPersons() {
        return personRepository.findAll();
    }

    @Override
    public Person getPersonById(Integer id) {
        return personRepository.findById(id).get();
    }

    @Override
    public Person savePerson(Person product) {
        return personRepository.save(product);
    }

    @Override
    public void deletePerson(Integer id) {
        personRepository.deleteById(id);
    }
}

package com.cu.thesis.WeMuBPMN.service;

import com.cu.thesis.WeMuBPMN.entity.Person;

import com.cu.thesis.WeMuBPMN.repository.PersonRepository;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

@Service

public class PersonServiceImpl implements PersonService

{

private PersonRepository personRepository;

@Autowired

public void setPersonRepository(PersonRepository personRepository)

{

this.personRepository = personRepository;

}

@Override

public Person viewOwner()

{

return new Person("Chatri", "Ngambenchawong");

}

@Override

public Iterable<Person> listAllPersons() {

return personRepository.findAll();

}

@Override

public Person getPersonById(Integer id) {

return personRepository.findById(id).get();

}

@Override

public Person savePerson(Person product) {

return personRepository.save(product);

}

@Override

public void deletePerson(Integer id) {

personRepository.deleteById(id);

}

แก้ไข Controller โดยต้องเพิ่ม 2 ไฟล์

ไฟล์ IndexController.java เอาไว้จัดการกับทุก Request ที่เข้ามาครับ โดยใช้งานคู่กับ ไฟล์ index.html ครับ

package com.cu.thesis.WeMuBPMN.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController
{
    @RequestMapping(value = "/")
    public String index() {
        return "index";
    }
}

package com.cu.thesis.WeMuBPMN.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

public class IndexController

{

@RequestMapping(value = "/")

public String index() {

return "index";

}

ไฟล์ PersonController.java เอาไว้จัดการกับทุก Request ที่เกี่ยวกับ [basepath]/persons (หน้า List) และ [basepath]/person ครับ

package com.cu.thesis.WeMuBPMN.controller;

import com.cu.thesis.WeMuBPMN.entity.Person;
import com.cu.thesis.WeMuBPMN.service.PersonService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class PersonController
{
    @Autowired
    private PersonService personService;
    
    @GetMapping(value ="/person/owner")
    public String index(ModelMap model){
        Person person = personService.viewOwner();
        //person - parameter แรก ถูกเอาไปใช้ที่หน้า UI
        model.addAttribute("person",person);
        //บอกว่าไฟล์เราอยู่ที่ Folder person ไฟล์ index.html
        return "person/owner";
    }

    /**
     * List all products.
     *
     * @param model
     * @return
     */
    @RequestMapping(value = "/persons", method = RequestMethod.GET)
    public String listPerson(Model model) {
        model.addAttribute("persons", personService.listAllPersons());
        System.out.println("Returning persons:");
        return "person/persons";
    }

    /**
     * View a specific person by its id.
     *
     * @param id
     * @param model
     * @return
     */
    @RequestMapping(value = "person/{id}")
    public String showPerson(@PathVariable Integer id, Model model) {
        model.addAttribute("person", personService.getPersonById(id));
        return "person/viewPerson";
    }

    // Afficher le formulaire de modification du Product
    @RequestMapping(value = "person/edit/{id}")
    public String editPerson(@PathVariable Integer id, Model model) {
        model.addAttribute("person", personService.getPersonById(id));
        return "person/editPerson";
    }

    /**
     * New person.
     *
     * @param model
     * @return
     */
    @RequestMapping(value = "person/new")
    public String newPerson(Model model) {
        model.addAttribute("person", new Person());
        return "person/editPerson";
    }

    /**
     * Save person to database.
     *
     * @param person
     * @return
     */
    @RequestMapping(value = "person", method = RequestMethod.POST)
    public String savePerson(Person person) {
        personService.savePerson(person);
        return "redirect:/persons";
        //return "redirect:/person/" + person.getId();
    }

    /**
     * Delete person by its id.
     *
     * @param id
     * @return
     */
    @RequestMapping(value = "person/delete/{id}")
    public String deletePerson(@PathVariable Integer id) {
        personService.deletePerson(id);
        return "redirect:/persons";
    }
}

package com.cu.thesis.WeMuBPMN.controller;

import com.cu.thesis.WeMuBPMN.entity.Person;

import com.cu.thesis.WeMuBPMN.service.PersonService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

@Controller

public class PersonController

{

@Autowired

private PersonService personService;

@GetMapping(value ="/person/owner")

public String index(ModelMap model){

Person person = personService.viewOwner();

//person - parameter แรก ถูกเอาไปใช้ที่หน้า UI

model.addAttribute("person",person);

//บอกว่าไฟล์เราอยู่ที่ Folder person ไฟล์ index.html

return "person/owner";

}

/**

* List all products.

* @param model

* @return

@RequestMapping(value = "/persons", method = RequestMethod.GET)

public String listPerson(Model model) {

model.addAttribute("persons", personService.listAllPersons());

System.out.println("Returning persons:");

return "person/persons";

}

/**

* View a specific person by its id.

* @param id

* @param model

* @return

@RequestMapping(value = "person/{id}")

public String showPerson(@PathVariable Integer id, Model model) {

model.addAttribute("person", personService.getPersonById(id));

return "person/viewPerson";

}

// Afficher le formulaire de modification du Product

@RequestMapping(value = "person/edit/{id}")

public String editPerson(@PathVariable Integer id, Model model) {

model.addAttribute("person", personService.getPersonById(id));

return "person/editPerson";

}

/**

* New person.

* @param model

* @return

@RequestMapping(value = "person/new")

public String newPerson(Model model) {

model.addAttribute("person", new Person());

return "person/editPerson";

}

/**

* Save person to database.

* @param person

* @return

@RequestMapping(value = "person", method = RequestMethod.POST)

public String savePerson(Person person) {

personService.savePerson(person);

return "redirect:/persons";

//return "redirect:/person/" + person.getId();

}

/**

* Delete person by its id.

* @param id

* @return

@RequestMapping(value = "person/delete/{id}")

public String deletePerson(@PathVariable Integer id) {

personService.deletePerson(id);

return "redirect:/persons";

}

หลังจากได้ Controller แล้วมาดูหน้าจอ View ครับ (อันนี้สำหรับผมแล้วเสียเวลาไปวันเต็มๆเลย)

สำหรับ Default Path ของ Thymeleaf จะถูก Map พวกไฟล์ View และผองเพื่อน (พวก CSS – ผมใช้ Bootstrap 4, /JS/ Image) ไว้ที่ [CLASS PATH]/resources/static/ ครับ โดยมีโครงสร้างคร่าวๆ ดังนี้

resources
-> static 
   -> css - พวก CSS จะเก็บในนี้
      -> bootstrap.xxx.css ใส่ไฟล์เกี่ยวกับ bootstrap
      -> person.css ใช้คู่กับ owner.html ครับ
   -> js - พวก javascript จะเก็บไว้ในนี้
      -> bootstrap.xxx.js ใส่ไฟล์เกี่ยวกับ bootstrap
-> templates
   -> fragments - เอาไว้เก็บไฟล์ที่สามารถ Reuse ได้
      -> header.html - ในที่นี้ทำเป็นเมนูครับ
   -> person - เก็บไฟล์ที่ต้องใช้คู่กับ PersonController ทั้งหมดเลย โดยตอน Return ขึ้นต้นด้วยว่า person/ชื่อไฟล์
      -> persons.html สำหรับหน้าจอ List
      -> editPerson.html สำหรับ Model New/Edit
      -> viewPerson.html สำหรับ Model View
      -> owner.html
   -> index.html สำหรับหน้าจอ Main ครับ

resources

-> static

-> css - พวก CSS จะเก็บในนี้

-> bootstrap.xxx.css ใส่ไฟล์เกี่ยวกับ bootstrap

-> person.css ใช้คู่กับ owner.html ครับ

-> js - พวก javascript จะเก็บไว้ในนี้

-> bootstrap.xxx.js ใส่ไฟล์เกี่ยวกับ bootstrap

-> templates

-> fragments - เอาไว้เก็บไฟล์ที่สามารถ Reuse ได้

-> header.html - ในที่นี้ทำเป็นเมนูครับ

-> person - เก็บไฟล์ที่ต้องใช้คู่กับ PersonController ทั้งหมดเลย โดยตอน Return ขึ้นต้นด้วยว่า person/ชื่อไฟล์

-> persons.html สำหรับหน้าจอ List

-> editPerson.html สำหรับ Model New/Edit

-> viewPerson.html สำหรับ Model View

-> owner.html

-> index.html สำหรับหน้าจอ Main ครับ

สำหรับ View มีข้อควรระวังของ Thymeleaf
- การอ้างอิงไฟล์ CSS ใน Tag <link> ให้มีการระบุ Path ผ่าน th:href="@{/css/bootstrap.min.css}" ครับ โดยมันจะไปอ้างอิงตาม Default Path ของ Thymeleaf ครับ
  
  XHTML
  <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" href="../../static/css/bootstrap.min.css" media="screen"/>
  1
  <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" href="../../static/css/bootstrap.min.css" media="screen"/>
- การอ้างอิงไฟล์ JS ใน Tag <script> ให้มีการระบุ Path ผ่าน th:src="@{/js/bootstrap.min.js}" ครับ โดยมันจะไปอ้างอิงตาม Default Path ของ Thymeleaf ครับ
  
  XHTML
  <script th:src="@{/js/bootstrap.min.js}" src="../../js/bootstrap.min.js"></script>
  1
  <script th:src="@{/js/bootstrap.min.js}" src="../../js/bootstrap.min.js"></script>
- สำหรับการ Include ไฟล์อื่นเข้าไป อย่างเช่น ผมต้องการ Include ไฟล์ header.html เข้าไปครับ โดยใช้ <th:block th:include= ครับ
  
  XHTML
  <th:block th:include="fragments/header :: header"></th:block>
  1
  <th:block th:include="fragments/header :: header"></th:block>

ตัวอย่าง Code ของแต่ละไฟล์ เอาแค่บางส่วนนะครับ เดี๋ยว Blog จะยาวไป

ไฟล์ index.html ครับ

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Spring Boot Example</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" href="../../static/css/bootstrap.min.css"  media="screen"/>
    <script th:src="@{/js/bootstrap.min.js}" src="../../js/bootstrap.min.js"></script> 
    <th:block th:include="fragments/header :: header"></th:block>
</head>
<body>

<div class="container">

</div>
</body>
</html>

<!DOCTYPE html>

<html>

<title>Spring Boot Example</title>

<th:block th:include="fragments/header :: header"></th:block>

</head>

<body>

</div>

</body>

</html>

ไฟล์ persons.html ครับ แสดงรายการของ Person ทั้งหมดครับ

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">

    <title>Spring Boot Exemple</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" href="../../static/css/bootstrap.min.css"  media="screen"/>
    <script th:src="@{/js/bootstrap.min.js}" src="../../js/bootstrap.min.js"></script> 
    <th:block th:include="fragments/header :: header"></th:block>

</head>
<body>
    <div class="container">
        <div th:if="${not #lists.isEmpty(persons)}">
            <h2>Person List</h2>
            <table class="table table-striped">
                <tr>
                    <th>Id</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>View</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
                <tr th:each="person : ${persons}">
                    <td th:text="${person.id}"><a href="/person/${person.id}">Id</a></td>
                    <td th:text="${person.Firstname}">Product Id</td>
                    <td th:text="${person.Lastname}">descirption</td>
                    <td><a th:href="${ '/person/' + person.id}">View</a></td>
                    <td><a th:href="${'/person/edit/' + person.id}">Edit</a></td>
                    <td><a th:href="${'/person/delete/' + person.id}">Delete</a></td>
                </tr>
            </table>

        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<title>Spring Boot Exemple</title>

<th:block th:include="fragments/header :: header"></th:block>

</head>

<body>

<h2>Person List</h2>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Delete</th>

</tr>

<td th:text="${person.Firstname}">Product Id</td>

<td th:text="${person.Lastname}">descirption</td>

<td><a th:href="${'/person/delete/' + person.id}">Delete</a></td>

</tr>

</table>

</div>

</body>

</html>

ไฟล์ editPerson.html ครับ สำหรับ New / Edit Person ครับ

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <title>Spring Boot Example</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" href="../../static/css/bootstrap.min.css"  media="screen"/>
    <script th:src="@{/js/bootstrap.min.js}" src="../../js/bootstrap.min.js"></script> 
    <th:block th:include="fragments/header :: header"></th:block>
</head>
<body>
    <div class="container">
        <h2>Person Details</h2>
        <div>
            <form class="form-horizontal" th:object="${person}" th:action="@{/person}" method="post">
                <input type="hidden" th:field="*{id}"/>
                <!-- <input type="hidden" th:field="*{version}"/> -->
                <div class="form-group">
                    <label class="col-sm-2 control-label">Firstname:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" th:field="*{Firstname}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Lastname:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" th:field="*{Lastname}"/>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<title>Spring Boot Example</title>

<th:block th:include="fragments/header :: header"></th:block>

</head>

<body>

<h2>Person Details</h2>

<div>

<label class="col-sm-2 control-label">Firstname:</label>

</div>

<label class="col-sm-2 control-label">Lastname:</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

</div>

</body>

</html>

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

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

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

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

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

[SPRING] ทำความรู้จักกับ Thymeleaf

Posted on September 3, 2018July 30, 2018by Adminping

จาก Blog ตอนที่แล้วที่ได้ทดสอบ สวัสดีชาวโลก บน Spring Framework กันไปแล้วครับ แต่เว็บของเรามันไม่ได้มีหน้าตาอะไรเลย มีแต่ข้อความอย่างเดียวครับ วันนี้ผมจะมาเพิ่มหน้าจอในส่วนของ View นะครับ

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

งานจาก Blog ตอนก่อนครับ
ถ้าไม่มีสามารถเพิ่ม Dependency ลงในไฟล์ pom.xml ได้ครับ

Default
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
1
2
3
4
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
หรือจะใช้ Spring Initializr ก็ได้ครับ

รู้จักกับ Thymeleaf กันก่อนครับ

เป็น Template Engine โดยหลักเราเขียน View ด้วย HTML แหละครับ แต่มี Tag บาง Tag ช่วยให้จัดการกับข้อมูลได้ง่ายขึ้นครับ
ถ้าลองเปิดไฟล์ของ Thymeleaf โดยไม่ผ่าน Sping มันจะแสดงผลเหมือน HTML ทั่วๆไปครับ

มาทำกันเลย

มาดูที่โครงสร้างกันก่อนครับ

ตอนนี้เรามายุ่งกับไฟล์ application.properties ครับ เพื่อให้ Spring รู้จักว่า Thymeleaf เราอยู่ที่ไหนครับ

#Thymeleaf 
spring.mvc.view.prefix=/templates/  #อันนี้เป็นค่า Default อยู่แล้ว
spring.mvc.view.suffix=.html        #อันนี้เป็นค่า Default อยู่แล้ว

#Thymeleaf

spring.mvc.view.prefix=/templates/ #อันนี้เป็นค่า Default อยู่แล้ว

spring.mvc.view.suffix=.html #อันนี้เป็นค่า Default อยู่แล้ว

จากนั้นสร้างโพลเดอร์
- controller – เอาไว้จัดการกับ Flow ที่ได้มาจากหน้าจอ และเรียก Service ที่เกี่ยวข้องครับ
- service – จัดการกับ Busines Logic
- ต่อ Database – จัดการกับพวกข้อมูล Data Source ทั้งหลายครับ (ตอนนี้ยังไม่ได้ใช้ครับ) มี 2 Pattern ที่เป็นไปได้ครับ DAO / Repository ครับ
- entity – พวก Data Class จะทำเป็น POJO Class ครับ

ตอนนี้มาเพิ่ม Java Class กันครับ

สร้าง Person.java ในโพลเดอร์ Entity ครับ

package com.cu.thesis.WeMuBPMN.entity;

public class Person
{
    private String Fistname;
    private String Lastname;

    public Person(String pFirstname, String pLastname)
    {
        this.Fistname = pFirstname;
        this.Lastname = pLastname;
    }

    public void setFirstname(String pFirstname)
    {
        this.Fistname = pFirstname;
    }

    public String getFirstname()
    {
        return this.Fistname;
    }

    public void setLastname(String pLastname)
    {
        this.Lastname = pLastname;
    }

    public String getLastname()
    {
        return this.Lastname;
    }

    public String getFullname()
    {
        return this.getFirstname() + " " + this.getLastname();
    }
}

package com.cu.thesis.WeMuBPMN.entity;

public class Person

{

private String Fistname;

private String Lastname;

public Person(String pFirstname, String pLastname)

{

this.Fistname = pFirstname;

this.Lastname = pLastname;

}

public void setFirstname(String pFirstname)

{

this.Fistname = pFirstname;

}

public String getFirstname()

{

return this.Fistname;

}

public void setLastname(String pLastname)

{

this.Lastname = pLastname;

}

public String getLastname()

{

return this.Lastname;

}

public String getFullname()

{

return this.getFirstname() + " " + this.getLastname();

}

สร้าง PersonService.java ในโพลเดอร์ Service ครับ

package com.cu.thesis.WeMuBPMN.service;

import com.cu.thesis.WeMuBPMN.entity.Person;
import org.springframework.stereotype.Service;

@Service
public class PersonService
{
    public Person viewPerson()
    {
        return new Person("Chatri", "Ngambenchawong");
    }
}

package com.cu.thesis.WeMuBPMN.service;

import com.cu.thesis.WeMuBPMN.entity.Person;

import org.springframework.stereotype.Service;

@Service

public class PersonService

{

public Person viewPerson()

{

return new Person("Chatri", "Ngambenchawong");

}

สร้าง PersonController.java ในโพลเดอร์ Controller ครับ

package com.cu.thesis.WeMuBPMN.controller;

import com.cu.thesis.WeMuBPMN.entity.Person;
import com.cu.thesis.WeMuBPMN.service.PersonService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/person")
public class PersonController
{
    @Autowired
    private PersonService personService;
    
    @GetMapping("/")
    public String index(ModelMap model){
        Person person = personService.viewPerson();
        //person - parameter แรก ถูกเอาไปใช้ที่หน้า UI
        model.addAttribute("person",person);
        //บอกว่าไฟล์เราอยู่ที่ Folder person ไฟล์ index.html
        return "person/index";
    }
}

package com.cu.thesis.WeMuBPMN.controller;

import com.cu.thesis.WeMuBPMN.entity.Person;

import com.cu.thesis.WeMuBPMN.service.PersonService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

@RequestMapping("/person")

public class PersonController

{

@Autowired

private PersonService personService;

@GetMapping("/")

public String index(ModelMap model){

Person person = personService.viewPerson();

//person - parameter แรก ถูกเอาไปใช้ที่หน้า UI

model.addAttribute("person",person);

//บอกว่าไฟล์เราอยู่ที่ Folder person ไฟล์ index.html

return "person/index";

}

ในส่วนของ UI ต้องสร้างให้ล้อกับที่ Method index ใน กำหนดไว้ด้วยครับ คือ
- นั้นหมายความว่าต้องสร้าง View ที่ basePath src/main/resource/templates/ ต่อด้วยค่าที่ค่าที่ Return Method index person/index.html ในClass PersonController.java ครับ

มาดู Structure ได้ครับ

src
-> main
   -> java (ภาษาที่ใช้)
      -> com (Package#01)
	  -> cu (Package#02)
             -> thesis (Package#03)
                    -> WeMuBPMN (Project)
		       -> entity
                          Person.java
                       -> service
                          PersonService.java
                       -> controller
                          PersonController.java
   -> resource
      -> static
         -> css
	    person.css
      -> templates
	 -> person
            index.html  << ไฟล์ view สำหรับ person controller ครับ
      application.properties 
-> test
pom.xml << จัดการกับ Dependency ทั้งหลาย

src

-> main

-> java (ภาษาที่ใช้)

-> com (Package#01)

-> cu (Package#02)

-> thesis (Package#03)

-> WeMuBPMN (Project)

-> entity

Person.java

-> service

PersonService.java

-> controller

PersonController.java

-> resource

-> static

-> css

person.css

-> templates

-> person

index.html << ไฟล์ view สำหรับ person controller ครับ

application.properties

-> test

pom.xml << จัดการกับ Dependency ทั้งหลาย

หลังจากเข้าใจ Path ที่ต้องสร้าง View แล้ว มาสร้าง View ดีกว่า

ไฟล์ view index.html ใน templates/person/ ครับ

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Getting Started : Serving Web Content</title>
    <link rel="stylesheet" href="../css/person.css" />
</head>
<body>
    <div class="page-content">
        <h1 th:text="'Hello, ' + ${person.getFullname()} + '!'" />
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Getting Started : Serving Web Content</title>

</head>

<body>

</div>

</body>

</html>

ไฟล์ css person.css ใน static/css/ ครับ

body {
    background: #43cea2;
    background: -webkit-linear-gradient(to right, #185a9d, #43cea2); 
    background: linear-gradient(to right, #185a9d, #43cea2);
    color: #fff;
    text-align: center;
}

.page-content {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: 35%;
    bottom: 0;
}

h1 {
    font-size: 46px;
    margin-top: 10px;
    margin-bottom: 10px;
}

body {

background: #43cea2;

background: -webkit-linear-gradient(to right, #185a9d, #43cea2);

background: linear-gradient(to right, #185a9d, #43cea2);

color: #fff;

text-align: center;

}

.page-content {

position: absolute;

text-align: center;

left: 0;

right: 0;

top: 35%;

bottom: 0;

}

h1 {

font-size: 46px;

margin-top: 10px;

margin-bottom: 10px;

}

มา Run ด้วยคำสั่ง ./mvnw spring-boot:run เพื่อดูผลลัพธ์ผ่าน url http://localhost:8080/person/ ครับ
สำหรับ Source Code สามารถ Download ได้จากที่นี่ครับ ปล. ชื่อ package อาจจะตั้งแปลกนะ ตอนแรกตั้งใจว่าจะทำไปเลย แต่ไปๆมาๆของฝึกก่อนดีกว่า ^__^

Blog ตอนต่อไป ผมทำ CRUD แล้วครับ โดยมีการเล่นกับส่วนของ Data Source / Database ครับ

[SPRING] สวัสดีชาวโลก

Posted on August 31, 2018July 29, 2018by Adminping

หลังจาก Blog ตอนที่แล้ว ผมได้เขียนเกี่ยวกับเขียน Spring โดยใช้ VSCode ครับ ซึ่งจาก Blog ตอนก่อน ยังติดปัญหาอยู่ที่ว่าเว็บทำงานแล้ว แต่ไม่มีการแสดงผลอะไรทั้งนั้นเลย ซึ่งใน Blog ตอนนี้ผมจะมาทำ Hello world ครับ

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

งานที่ทำจาก Blog ตอนก่อนหน้าครับ
ถ้าไม่ได้เริ่มมาจาก Blog ผม ก็สามารถเพิ่ม Dependency ไปที่ไฟล์ pom.xml ดังนี้

Default
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency>
1
2
3
4
5
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-test</artifactId>
   <scope>test</scope>
</dependency>

ลุยยเลยครับ

มาดูโครงสร้างของ Project กันก่อนครับ

src
-> main
   -> java (ภาษาที่ใช้)
      -> com (Package#01)
	  -> cu (Package#02)
             -> thesis (Package#03)
                    -> WeMuBPMN (Project)
                       -> hello
                          HelloController.java (กำลังเพิ่ม)
   -> resource
      -> static << เอาไว้เก็บพวก CSS / Java 
      -> templates
      application.properties << ไฟล์นั้สำคัญนะ เดี๋ยว Config บางเรื่อง เช่น Database จะถูกเก็บไว้ที่นี่
-> test
   -> java (ภาษาที่ใช้)
      -> com (Package#01)
	  -> cu (Package#02)
             -> thesis (Package#03)
	        -> WeMuBPMN (Project)
                   -> hello
                      HelloControllerTest.java (กำลังเพิ่ม)
pom.xml << จัดการกับ Dependency ทั้งหลาย

src

-> main

-> java (ภาษาที่ใช้)

-> com (Package#01)

-> cu (Package#02)

-> thesis (Package#03)

-> WeMuBPMN (Project)

-> hello

HelloController.java (กำลังเพิ่ม)

-> resource

-> static << เอาไว้เก็บพวก CSS / Java

-> templates

application.properties << ไฟล์นั้สำคัญนะ เดี๋ยว Config บางเรื่อง เช่น Database จะถูกเก็บไว้ที่นี่

-> test

-> java (ภาษาที่ใช้)

-> com (Package#01)

-> cu (Package#02)

-> thesis (Package#03)

-> WeMuBPMN (Project)

-> hello

HelloControllerTest.java (กำลังเพิ่ม)

pom.xml << จัดการกับ Dependency ทั้งหลาย

สิ่งที่ผมเพิ่มเข้าไป คือ โพลเดอร์ hello ทั้งใน main และส่วนของ test ครับ
เพิ่มไฟล์ HelloController.java เข้าไปที่ Path /j่ava/main/com/cu/thesis/WeMuBPMN/hello/ ครับ
เริ่ม Code กันเลยครับ โดยผมต้องการว่า ถ้ามี Request เข้ามาที่ url http://localhost:8080/hello ให้ระบบแสดงคำว่า
สวัสดีชาวโลก

มาดูที่ Code กันครับ ซึ่งมีสิ่งที่ต้องสนใจ ดังนี้

package com.cu.thesis.WeMuBPMN.hello;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class helloController{
    @RequestMapping("/hello")
    public String index() {
        return "สวัสดีชาวโลก";
    }

}

package com.cu.thesis.WeMuBPMN.hello;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

@RestController

public class helloController{

@RequestMapping("/hello")

public String index() {

return "สวัสดีชาวโลก";

}

@RestController เป็นสิ่งที่ทำใหเ Class helloController เป็น WebService แล้วครับ
จากนั้นลองมาดูที่ Method Index ครับ สิ่งที่ผมทำ คือ ถ้ามี Request /hello มา ตัว @RequestMapping จะดักไว้ครับ เอาง่ายๆ ถ้ามีอะไร /hello เข้ามา Method Index ทำงานครับ

มาทดสอบผ่านหน้าเว็บกันครับ
บอกไปว่ามันเป็น WebService งั้นลองผ่าน Postman กันดีกว่า

และสุดท้าย ถ้าต้องการให้มันดูมีมูลค่า เรามาทำ Unit Test กันครับ

สร้างไฟล์ HelloControllerTest.java ตาม Path /j่ava/main/com/cu/thesis/WeMuBPMN/hello/ เลยครับ

จากนั้นเขียน Code ตามนี้เลยครับ โดยใช้ SpingMVCTest สำหรับช่วย Test ครับ

package com.cu.thesis.WeMuBPMN.hello;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.http.MediaType;
import org.springframework.test.context.junit4.SpringRunner;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
import static org.hamcrest.CoreMatchers.equalTo;

@RunWith(SpringRunner.class)
@SpringBootTest
@AutoConfigureMockMvc
public class HelloControllerTest {

    @Autowired
    private MockMvc mvc;

    @Test
    public void getHello() throws Exception {
        mvc.perform(MockMvcRequestBuilders.get("/hello").accept(MediaType.APPLICATION_JSON))
                .andExpect(status().isOk())
                .andExpect(content().string(equalTo("สวัสดีชาวโลก")));
    }
}

package com.cu.thesis.WeMuBPMN.hello;

import org.junit.Test;

import org.junit.runner.RunWith;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;

import org.springframework.boot.test.context.SpringBootTest;

import org.springframework.http.MediaType;

import org.springframework.test.context.junit4.SpringRunner;

import org.springframework.test.web.servlet.MockMvc;

import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;

import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;

import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;

import static org.hamcrest.CoreMatchers.equalTo;

@RunWith(SpringRunner.class)

@SpringBootTest

@AutoConfigureMockMvc

public class HelloControllerTest {

@Autowired

private MockMvc mvc;

@Test

public void getHello() throws Exception {

mvc.perform(MockMvcRequestBuilders.get("/hello").accept(MediaType.APPLICATION_JSON))

.andExpect(status().isOk())

.andExpect(content().string(equalTo("สวัสดีชาวโลก")));

}

@SpringBootTest เป็นตัวที่บอกว่าเราใช้ Framework การ Test ของ SpringBoot
@AutoConfigureMockMvc เป็นตัวบอกว่า MockMVC ใช้ค่าตั้งต้นครับ ไม่ต้องอ่าน Config จาก xml ที่ไหนอีก และตัวแปร mvc จะถูกยิง MockMVC Class เข้าไป เพราะได้กำหนด @Autowired ไว้ครับ
@Test เป็นตัวบอกว่า Method เป็น Test Case อันหนึ่งของเราครับ โดยใช้ตัว MVCMock เข้ามาช่วยในการดีงค่า และทดสอบผลลัพธ์ที่ได้ครับ โดยทำการดึงค่า
- Status = isOK (Http Response Code 200)
- Content มีค่าเท่ากับ “สวัสดีชาวโลก” ครับ

ลองมารัน Test ครับ สังเกตุดีว่าจะมีเครื่องหมายถูกสีเขียวด้วย
ถ้ามือบอนทำ Fail หละ ผลที่ได้จะเป็นไปตามนี้ครับ

Blog ตอนต่อไปจะเป็น สวัสดีชาวโลก แบบที่มี View แล้ว จะได้มีความสวยงาม ^__^

Java
...
- Spring / Spring Boot

[SPRING] ใช้ VSCode ในการเขียน Spring Boot กัน

Posted on August 28, 2018July 29, 2018by Adminping

มาลองใช้งาน Spring Boot โดยใช้ VSCode กันครับ สำหรับ Blog นี้ เนื่องจากหลายๆงานในปัจจุบันหันมาใช้ VSCode กันติดแล้ว เพราะมันเร็ว ง่าย และไม่ซับซ้อนครับ โดยวันนี้ผมลองมาฟื้นฟูทักษะ Java ด้วย หายไปกับ .Net Framework กับ Power Shell หลายปีครับ

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

ติดตั้ง JDK (Java Development Kit)
SET JAVA_HOME ครับ
ติดตั้ง VSCode

ลุยกันเลย

มาที่ VSCode เปิดมาแล้ว ให้ทำการติดตั้ง Java Extension Pack สำหรับ Extension นี้พัฒนาโดย Microsoft ครับ ซึ่ง Extension นี้ช่วยสำหรับ
- Java Code HintIntegrated Terminal
- Debugger
- Test Runner
- MAVEN Project
ลองสร้าง Project เริ่มต้นจากเว็บ Spring Initializr กันก่อนครับ
- ตัว Tools ตัวช่วยสร้างโครงสร้าง Project ให้เหมาะกับ MAVEN หรือ Grail ผมเลือก MAVEN ไปครับ
- ภาษาที่ใช้ ผมใช้ Java
- เลือกเวอร์ชันของ Sping Boot
- กำหนด Dependency ที่จำเป็น พิมพ์ได้เลยครับ ในที่นี้ผมเลือก Web / JPA (พวกจัดการ DB) ครับ
- กำหนดชื่อ Package ครับ
- ** ถ้ายังเห็นว่า Config ไม่เพียงพอ อยากกำหนดเองทั้งหมด สามารถกดที่ Swithch to the full version ได้ครับ

มาดูโครงสร้างข้างในกันครับ

src
-> main
   -> java (ภาษาที่ใช้)
      -> com (Package#01)
	  -> cu (Package#02)
             -> thesis (Package#03)
                    -> WeMuBPMN (Project)
   -> resource
      -> static << เอาไว้เก็บพวก CSS / JavaScript / View
      -> templates
      application.properties << ไฟล์นั้สำคัญนะ เดี๋ยว Config บางเรื่อง เช่น Database จะถูกเก็บไว้ที่นี่
-> test
   -> java (ภาษาที่ใช้)
      -> com (Package#01)
	  -> cu (Package#02)
             -> thesis (Package#03)
pom.xml << จัดการกับ Dependency ทั้งหลาย

src

-> main

-> java (ภาษาที่ใช้)

-> com (Package#01)

-> cu (Package#02)

-> thesis (Package#03)

-> WeMuBPMN (Project)

-> resource

-> static << เอาไว้เก็บพวก CSS / JavaScript / View

-> templates

application.properties << ไฟล์นั้สำคัญนะ เดี๋ยว Config บางเรื่อง เช่น Database จะถูกเก็บไว้ที่นี่

-> test

-> java (ภาษาที่ใช้)

-> com (Package#01)

-> cu (Package#02)

-> thesis (Package#03)

pom.xml << จัดการกับ Dependency ทั้งหลาย

เนื่องจากผมยังไม่ได้ Config พวก DataSource ที่ Class WeMuBpmnApplication ต้องแก้ไขก่อนครับ ไม่งั้นตอน Run ไปจะเกิด Error
Failed to auto-configure a DataSource: ….
- แก้ไขส่วนของ Anotation จาก @SpringBootApplication ครับ
- ไปเป็น @SpringBootApplication(exclude = {DataSourceAutoConfiguration.class}) ครับ ถ้าเติมแล้วจะเจอขีดแดงๆ มันจะให้ Reference ครับ
- สังเกตุดีๆครับ VSCode ช่วย Hint แล้วครับ ^__^
- เสร็จแล้วครับ
เข้าที่ VSCode ครับ ลอง Run ครับ ด้วยคำสั่ง ./mvnw spring-boot:run โดย Run จาก Integrated Terminal ถ้าไม่เจอ ให้ไปที่เมนู View > Integrated Terminal ครับ
ลองเข้า localhost:8080 ดูครับ
เจอแล้วอย่าตกใจครับ เพราะ เราเพิ่งเริ่มต้นเอง ยังไม่มีหน้าจอ หรือสั่งให้มัน Map Request อะไรเลย

Blog ตอนต่อไปจะลองพวก HelloWorld แล้วครับ ^__^

Docker

[DOCKER] สร้าง DockerFile ที่มี User ที่จำเป็นสำหรับ DB2 ครับ

Posted on August 26, 2018August 7, 2018by Adminping

สวัสดีครับ Blog ตอนนี้น่าจะเป็น Blog ที่เกี่ยวกับ Docker อันแรกมั้งๆ ปกติผมจะใช้ Virtual Machine ในการทำงานมากกว่าครับ โดยสำหรับผมได้เอา Docker Image ของ DB2 มาใช้งานครับ โดยจะเป็น Version 11 Fixed Pack 3 ซึ่งเมื่อผม pull ลงมาแล้ว ปรากฏว่าลองอ่าน Document แล้ว ตัว Docker Image มันมีแต่ user db2inst1 เป็นหลักครับ แต่ Database ที่ผมต้องการจะเอามาขึ้นในส่วนของ Application มันต้องการใช้ มี

username anoda password anoda
username intest1 password intest1

การแก้ไขมันมี 2 วิธีนะ

แบบที่ 1 : หลังจาก docker run ไปแล้ว เข้า terminal ของ container ด้วยคำสั่ง docker exec -it <CONTAINER_ID> bash เช่น docker exec -it 4484a421c205 bash ครับ
- แล้วเขียนคำสั่งเพิ่ม user กำหนด password ครับ
- วิธีนี้มีข้อเสีย คือ ถ้าต้องการสร้าง Container ใหม่ก็ต้องเข้าไปไล่ Run Script ให้

แบบที่ 2 : ทำ dockerfile ดีกว่า โดยผมทำ image file แยกออกมาอีกอันเลย เอาไว้ใช้งานในองค์กรครับ เอาไปฝากไว้ใน Nexus ก็ได้ครับ (ผมเลือกวิธีนี้นะครับ มาเริ่มกัน)

ก่อนอื่นสร้าง Folder ก่อนเลย
สร้าง dockerfile ขึ้นมา โดยเจ้าตัว Docker File มัน คือ ชุดคำสั่ง ที่เราใช้ในเพิ่มความสามารถไปครับ

จากโจทย์ที่ผมต้องการ ผมได้สร้าง dockerfile ตามนี้ครับ

FROM store/ibmcorp/db2_developer_c:11.1.3.3a-x86_64  
LABEL maintainer="Chatri Ngambenchawong"

RUN useradd -ms /bin/bash bonanza 
RUN echo "bonanza:bonanza" | chpasswd
RUN useradd -ms /bin/bash invest
RUN echo "invest:invest" | chpasswd

FROM store/ibmcorp/db2_developer_c:11.1.3.3a-x86_64

LABEL maintainer="Chatri Ngambenchawong"

RUN useradd -ms /bin/bash bonanza

RUN echo "bonanza:bonanza" | chpasswd

RUN useradd -ms /bin/bash invest

RUN echo "invest:invest" | chpasswd

มาดูในรายละเอียดครับ ของ dockerfile ครับ
- FROM ผมได้ Extend เพิ่มความสามารถมาจาก image เดิมของ DB2 ครับ
- LABEL ใส่อะไรก็ได้ เป็น infomation แต่ต้องอยู่ในรูปแบบ key:value
- RUN ใส่คำสั่งที่ต้องการ execute ครับ
ลองรันครับ ด้วยคำสั่ง docker build -t "invdb211:11fp3" . ครับ
- ของผมมีการเพิ่ม -t "invdb211:11fp3" เพื่อกำหนด Repository : Tag ให้เรียกใช้ง่ายๆครับ
- ส่วน . อันนี้หมายถึงว่า dockerfile ของผมมันอยู่ใน Folder ที่กำหนดแล้วครับ ถ้า dockerfile อีกที่ path อื่นก็ใช้ path ลงไปครับ

ระหว่าง ฺBuild มี Log แสดงให้เห็นครับ

Step 1/6 : FROM store/ibmcorp/db2_developer_c:11.1.3.3a-x86_64
 ---> 18585aea3e7b
Step 2/6 : LABEL maintainer="Chatri Ngambenchawong"
 ---> Running in 7c1bad3fa83b
Removing intermediate container 7c1bad3fa83b
 ---> a9fbe0b892fb
Step 3/6 : RUN useradd -ms /bin/bash bonanza
 ---> Running in 7bd11b257970
Removing intermediate container 7bd11b257970
 ---> 630236a8b302
Step 4/6 : RUN echo "bonanza:bonanza" | chpasswd
 ---> Running in d0f38091cb95
Removing intermediate container d0f38091cb95
 ---> d95994738b43
Step 5/6 : RUN useradd -ms /bin/bash invest
 ---> Running in 37e4e90c4cd4
Removing intermediate container 37e4e90c4cd4
 ---> a15e7ad12d96
Step 6/6 : RUN echo "invest:invest" | chpasswd
 ---> Running in 972788993cc8
Removing intermediate container 972788993cc8
 ---> 10bd4f9421d9
Successfully built 10bd4f9421d9
Successfully tagged invdb211:11fp3

Step 1/6 : FROM store/ibmcorp/db2_developer_c:11.1.3.3a-x86_64

---> 18585aea3e7b

Step 2/6 : LABEL maintainer="Chatri Ngambenchawong"

---> Running in 7c1bad3fa83b

Removing intermediate container 7c1bad3fa83b

---> a9fbe0b892fb

Step 3/6 : RUN useradd -ms /bin/bash bonanza

---> Running in 7bd11b257970

Removing intermediate container 7bd11b257970

---> 630236a8b302

Step 4/6 : RUN echo "bonanza:bonanza" | chpasswd

---> Running in d0f38091cb95

Removing intermediate container d0f38091cb95

---> d95994738b43

Step 5/6 : RUN useradd -ms /bin/bash invest

---> Running in 37e4e90c4cd4

Removing intermediate container 37e4e90c4cd4

---> a15e7ad12d96

Step 6/6 : RUN echo "invest:invest" | chpasswd

---> Running in 972788993cc8

Removing intermediate container 972788993cc8

---> 10bd4f9421d9

Successfully built 10bd4f9421d9

Successfully tagged invdb211:11fp3

บิ้วเสร็จลองมาดูว่ามี Image ที่พึ่งสร้างด้วยคำสั่ง docker images ครับ
ลองเอา Image มาสร้าง Container ด้วยคำสั่ง docker run --name ERPPROD --restart=always --privileged --ipc=host -p 50003:50000 --env-file /home/adminping/ERPPROD/ERPPROD.env_list -v /home/adminping/ERPPROD/:/database 10bd4f9421d9 ครับ
- --ipc=host -p 50003:50000 map Port Host = 50003 กับ Port ของ Container 50000
- --env-file ใส่ Config สำหรับ Initial Container ครับ
- -v /home/adminping/ERPPROD/:/database map Volume จาก Host ที่ Path /home/adminping/ERPPROD/ โดยใน Container จะรู้จักชื่อโพลเดอร์ /database
- 10bd4f9421d9 Id ของ Image ครับ
มองลองตรวจกันว่า user ที่ผมเพิ่มสร้างไปมีใน DB2 หรือป่าว โดยเข้าไปใน Docker Image ของ DB2 ด้วยคำสั่ง docker exec -it <CONTAINER_ID> bash เช่น docker exec -it 4484a421c205 bash ครับ จากนั้นลอง list user ด้วยคำสั่ง cut -d: -f1 /etc/passwd ครับ ผลลัพธืที่ได้ต้องมี User
- anoda
- intest1

สำหรับวิธีที่ 2 นั้นเห็นว่ามันมีความเป็น Automation มากขึ้นครับ และในตัว dockerfile จริงๆ เราสามารถเขียนให้มันไปอ่าน Backup DB ให้ Path ที่ Map ไว้ แล้วให้มัน Restore ต่อได้เลยก็ได้ครับ ^__^

Software Engineering Process and Improvement

[BPMN] แก้ปัญหา Stack Size is too large บน Camunda BPMN

Posted on August 26, 2018by Adminping

หลังจากลองตัว Camunda BPMN Engine มาสักพัก แล้วจะทดสอบอะไร อยากรู้ว่ามันมีค่าเท่าไหร่ ปกติเราทำพวก Instrument Test เพื่อแสดงให้เห็นว่ากิจกรรมที่สนใจ โดยผมเขียนคำสั่งประมาณนี้

out:println "========================================="
out:println "execution id " + execution.getProcessInstanceId();
out:println "loanAmt =" + execution.getVariable("loanAmt");
out:println "========================================="

out:println "========================================="

out:println "execution id " + execution.getProcessInstanceId();

out:println "loanAmt =" + execution.getVariable("loanAmt");

out:println "========================================="

เมื่อนำไป Run กับ BPMN Engine พบว่า Stack Size is too large ครับ

ปัญหา คือ อะไร

Operation ในการทำงานมันเยอะเกินไปครับ แทนที่จะให้มันต่อ String ในคำสั่ง ก็แก้ไขให้มันเตรียมข้อมูลอะไรให้เสร็จก่อนครับ

การแก้ไข แยกส่วนของเตรียมข้อมูลออกจากการแสดงผลครับ โดย Code ใน Scritp Task ที่ได้ เป็นดังนี้

def line1 = "execution id " + execution.getProcessInstanceId();
def line2 = "loanAmt =" + execution.getVariable("loanAmt");
out:println "========================================="
out:println line1;
out:println line2;
out:println "========================================="

def line1 = "execution id " + execution.getProcessInstanceId();

def line2 = "loanAmt =" + execution.getVariable("loanAmt");

out:println "========================================="

out:println line1;

out:println line2;

out:println "========================================="

ทดสอบอีกครั้งครับ

ได้ผลลัพธ์สวยงามครับ ^___^