Full Stack Thymeleaf + Spring Boot + MongoDB
เรื่องนี้ตามหัวข้อเลยครับ ขอบอกก่อนเลยครับว่าการทำ Full Stack ใน Spring Boot นี้เป็นอะไรที่สะดวกมากสำหรับการทำweb applicationในตอนนี้ผมก็จะมาทำ Full Stack แบบเป็นการบันทึกข้อมูล และแสดงข้อมูล Customer ก่อนอื่นผมจะถือว่าผู้อ่านติดตั้ง MongoDB แล้วนะครับแล้วเรามาเริ่มเลยดีกว่า
ขั้นตอนมีดังนี้
- เข้า NetBeans
- File > new project > java with maven > spring boot basic project > set name
- เมื่อได้ file project แล้ว ก็ ไปที่ pom.xml เพิ่ม dependencies ตามนี้เลย
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
4. เริ่มเขียน Code เลย แต่ก่อนอื่นเราต้องเข้าใจโครงสร้างของ Project ก่อนดังรูป(เป็นรูปที่ดูง่ายสุดที่หามาแล้ว เปลี่ยนจาก JSP เป็น Thymeleaf และ DAOImplเราไม่สร้าง เพราะใช้ส่วนของ ServiceImplแทน )

4.1 เริ่มที่ออกแบบข้อมูลก่อน ว่าจะมีอะไรบ้าง สร้างไฟล์ Customer.java ขึ้นมา
@Data
public class Customer {
@Id
private String id;
private String firstName;
private String lastName;
private Integer age;
@Email
private String email;
void setId(String id) {
throw new UnsupportedOperationException(“Not supported”);
}
}
4.2 สร้าง CustomerRepository.java ซึ่งอยู่ในส่วนของ DAO
public interface CustomerRepository extends MongoRepository<Customer, String> {
List<Customer> findByFirstName(String firstName);
public Optional<Customer> findById(int theId);
public List<Customer> findAllByOrderByLastNameAsc();
public void deleteById(int theId);
}
4.3 ในส่วนของ Service จะมี 2 ไฟล์ คือ interface และ class ที่ implements มาจาก interface ก่อนอื่นสร้างไฟล์ interface ก่อน ชื่อ CustomerService.java
public interface CustomerService {
public List<Customer> findAll();
public void save(Customer theCustomer);
}
แล้วสร้างไฟล์ CustomerServiceImpl.java
@Service
public class CustomerServiceImpl implements CustomerService {
private final CustomerRepository customerRepository;
@Autowired
public CustomerServiceImpl(CustomerRepository theCustomerRepository) {
customerRepository = theCustomerRepository;
}
@Override
public List<Customer> findAll() {
return customerRepository.findAllByOrderByLastNameAsc();
}
@Override
public void save(Customer theCustomer) {
customerRepository.save(theCustomer);
}
}
4.4 สร้าง CustomerController.java อยู่ในส่วนของ controller
@Controller
@RequestMapping(“/customer”)
public class CustomerController {
private CustomerService customerService;
public CustomerController(CustomerService theCustomerService) {
customerService = theCustomerService;
}
@GetMapping(“/list”)
public String listCustomer(Model theModel) {
List<Customer> theCustomer = customerService.findAll();
theModel.addAttribute(“customers”, theCustomer);
return “customer/list-customers”;
}
@GetMapping(“/showFormForAdd”)
public String showFormForAdd(Model theModel) {
Customer theCustomer = new Customer();
theModel.addAttribute(“customer”, theCustomer);
return “customer/customer-form”;
}
@PostMapping(“/save”)
public String saveCustomer(@ModelAttribute(“customer”) Customer theCustomer) {
customerService.save(theCustomer);
return “redirect:/customer/list”;
}
}
ในส่วนของ Backend เสร็จแล้วต่อไปเป็นส่วนของ Frontend ซึ่งเราใช้ Thymeleaf
5. เข้าไปที่ resources > template แล้วสร้าง folder ชื่อ customer แล้วสร้างไฟล์ list-customer.html เพื่อแสดงข้อมูลจากฐานข้อมูล

ต่อไปก็สร้าง ไฟล์ customer-form.html เพื่อใช้เพิ่มข้อมูลเข้าไป

จะเห็นได้ว่าการทำ Full Stack โดยใช้ Spring Boot ค่อนข้างสะดวก เพราะมีเครื่องมือให้ใช้เยอะมาก ในตอนนี้ก็จบเท่านี้ครับ หวังว่าจะเอาไปต่อยอดกันได้ครับฮ่าๆๆๆ