Spring boot ตอนที่ 2 – Hello world

spring-boot-logo

เพื่อให้คุ้นชินกับเครื่องมือ Hello world จึงเป็นโปรแกรมที่แรกที่ควรทำได้ และในบทนี้จะพาทำ Test เบื้องต้นซึ่งเป็นสิ่งที่สำคัญแต่โปรแกรมเมอร์ไม่ค่อยทำกัน ขอพูดไว้ตรงนี้เลยว่า “ทำ tests เถอะครับ จะได้ไม่เป็นภาระของลูกหลาน” ซึ่งถ้าทำจนเป็นนิสัยมันจะช่วยเพิ่มคุณค่าให้ตัวคุณเองเป็นโปรแกรมเมอร์ที่มีคุณภาพด้วย (เนื่องจากในบทนี้มีแค่แสดงข้อความ Hello อาจจะทำให้ไม่เห็นภาพว่าการทำ Test แบบ Integration Test กับ Unit Test ต่างกันอย่างไร ซึ่งผมจะอธิบายในบทถัดๆ ไป เมื่อเริ่มมี Logic มากขึ้น)

updated
รวมลิงก์ของทุกตอนครับ

จากตอนที่แล้วเราเตรียมเครื่องมือไว้พร้อมหล่ะ แต่มีเรื่องหนึ่งที่ยังไม่ได้กล่าวถึงคือการตั้งค่า UTF-8 เพื่อให้รองรับภาษาไทยได้ ให้ไปที่เมนู Window -> Preferences แล้วพิมพ์คำว่า jsp จากนั้นเปลี่ยน Encoding เป็น UTF-8 แค่นี้ jsp ก็แสดงผลภาษาไทยได้โดยที่เราไม่ต้องไปแก้เองเวลาสร้าง jsp ใหม่

0-set-utf8

คราวนี้มาดู Structure ที่เราต้องทำความเข้าใจก่อนว่ามีอะไรบ้าง

1-structure

ซึ่ง Structure นี้เป็นของ Maven กำหนดไว้ให้

  • src/main/java เป็นที่เก็บ source code ปกติ
  • src/main/resources เป็นที่เก็บ static file พวก css, javascript หรือพวกรูปต่างๆ ในนี้จะมีไฟล์ที่เป็นหัวใจหลักของ spring boot อยู่ชื่อ application.properties ซึ่งจะค่อยๆ อธิบายเมื่อถึงเวลา
  • src/test/java เป็นที่เก็บ source code สำหรับการทำ Test ต่างๆ
  • src/main/webapp เอาไว้เก็บ jsp

เริ่มโค้ด

  1. เปิดไฟล์ application.properties และเขียนโค้ด เพื่อระบุที่เก็บ jsp ดังนี้


    security.basic.enabled=false

    spring.mvc.view.prefix=/WEB-INF/views/
    spring.mvc.view.suffix=.jsp

    security.basic.enabled คือการปิดไม่ให้ login เมื่อเข้าใช้งาน โดย spring boot จะมี default username/password ไว้ให้ตอน start ซึ่งผมไม่ได้ใช้งาน ก็เลยปิดไป

  2. สร้างโฟลเดอร์ใหม่ตามที่กำหนดไว้ในข้อที่แล้ว คือ src/main/webapp/WEB-INF/views
    3-views
  3. สร้าง jsp ชื่อ hello.jsp เก็บไว้ในโฟลเดอร์ views และเขียนโค้ดดังนี้

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    Hello ${ name }
    </body>
    </html>
    

    เป็นการแสดงข้อความ Hello และดึงค่า name มาจาก server

  4. สร้าง Controller ที่รับค่า name เพื่อนำไปแสดงผลบนหน้าเว็บ หน้าตาดังนี้

    package com.magicalcyber.myfacebook.web.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    
    @Controller
    public class HelloController {
    
    	@GetMapping("/hello")
    	String hello(@RequestParam(name = "name", required = false, defaultValue = "World") String name, Model model) {
    		model.addAttribute("name", name);
    		return "hello";
    	}
    }
    
    
  5. Start spring boot แล้วดู log ว่ามี controller ของเราโผล่มาหรือไม่

    4-controller

  6. จากนั้นเปิด browser แล้วเข้า http://localhost:8080/hello ก็จะปรากฏหน้าจอดังนี้

    5-hello-world

    หากระบุ name ก็ส่ง parameter name ดังนี้ http://localhost:8080/hello?name=MagicKiat

    6-hello-name

Tests

เขียน Test โดยผมใช้การตั้งชื่อ method ตาม standard นี้นะครับ ถ้าเห็นชื่อ method แล้วขัดใจ ก็ทำใจได้เลยครับ http://osherove.com/blog/2005/4/3/naming-standards-for-unit-tests.html

อย่าลืมเก็บไว้ใน src/test/java นะครับ


package com.magicalcyber.myfacebook.web.controller;

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

import org.hamcrest.Matchers;
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;

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

	@Autowired
	private MockMvc mockMvc;

	@Test
	public void hello_withoutName_mustDefaultWorld() throws Exception {
		mockMvc.perform(MockMvcRequestBuilders.get("/hello").accept(MediaType.TEXT_HTML))
			.andExpect(status().isOk())
			.andExpect(model().attribute("name", Matchers.equalTo("World")));
	}

	@Test
	public void hello_withName_mustEqualsParameter() throws Exception {
		String name = "MagicKiat";

		mockMvc.perform(MockMvcRequestBuilders.get("/hello?name=" + name).accept(MediaType.TEXT_HTML))
				.andExpect(status().isOk())
				.andExpect(model().attribute("name", Matchers.equalTo(name)));

	}
}

คลิกขวาที่คลาสแล้วเลือก Run As - JUnit Test

7-unit-test

ผ่านฉลุยทั้งสองเคส หากไม่ผ่านก็ทิ้ง comment ไว้ด้านล่างได้เลยครับ แล้วพบกันใหม่ในตอนถัดไปครับ

Advertisements

10 thoughts on “Spring boot ตอนที่ 2 – Hello world

    1. ตรงส่วนใหนครับผม เผื่อผมเบลอแล้วลงไม่ครบ ถ้าตาม step ผมสรุปประมาณนี้ครับ
      1 – ตั้งค่า config ว่าจะเก็บ view ไว้ที่ใหน
      2 – สร้างโฟลเดอร์ตามที่ config ไว้
      3 – สร้าง view แรกชื่อ hello.jsp แล้วเก็บไว้ที่โฟลเดอร์ข้อ 2

      ซึ่งตามความตั้งใจของผมก็ยังครบ step อยู่ครับ

    2. ผม review แล้วก็ update บทความเพิ่มแล้วครับ ขาดตกช่วงใหนแจ้งผมเพิ่มเติมได้นะครับ
      ขอบคุณคับผม

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s