๐Ÿ–ฅ๏ธ Web Development Study/Back-End

[Back-end] ์Šคํ”„๋ง ์ž…๋ฌธ :: ํšŒ์› ๊ด€๋ฆฌ ์˜ˆ์ œ - ์›น MVC ๊ฐœ๋ฐœ

ibelieveinme 2025. 1. 29. 13:21
728x90

//ํšŒ์›๋“ฑ๋ก ๊ธฐ๋Šฅ ๋งŒ๋“ค๊ธฐ

 

controller > HomeController.java

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

@Controller
public class HomeController {
    @GetMapping("/")
    public String home(){
        return "home";
    }
}

localhost:8080/home

Spring ์„ ์‹คํ–‰์‹œํ‚ค๋ฉด GetMapping ์„ ๋จผ์ € ์ฐพ์•„์„œ ํ™”๋ฉด์„ ๋ณด์—ฌ์ค€๋‹ค. GetMapping ์ด ์—†์œผ๋ฉด ๊ทธ ๋•Œ static ํŒŒ์ผ์„ ์ฐพ์•„์„œ ๋ณด์—ฌ์ค€๋‹ค.

 

 

templates > home.html

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

<div class ="container">
    <div>
        <h1>Hello Spring</h1>
        <p>ํšŒ์› ๊ธฐ๋Šฅ</p>
        <p>
            <a href="/members/new">ํšŒ์› ๊ฐ€์ž…</a>
            <a href="/members">ํšŒ์› ๋ชฉ๋ก</a>
        </p>
    </div>
</div>

</body>
</html>

 

 

์‹คํ–‰ํ™”๋ฉด

 

controller > MemberController.java

import com.yoonsung.firstproject.domain.Member;
import com.yoonsung.firstproject.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class MemberController {
    private MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService){
        this.memberService = memberService;
    }

    @GetMapping("members/new")
    public String createForm(){
        return "members/createMemberForm";
    }

    @PostMapping("members/new")
    public String create(MemberForm form){
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);

        return "redirect:/";
    }
}

localhost:8080/members/new

 

templates > members > createMemberForm.html

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

<div class = "container">
    <form action="/members/new" method="post">
        <div class="form-group">
            <label for="name">์ด๋ฆ„</label>
            <input type="text" id="name" name="name" placeholder="์ด๋ฆ„์„ ์ž…๋ ฅํ•˜์„ธ์š”">
        </div>
        <button type="submit">๋“ฑ๋ก</button>
    </form>
</div>

</body>
</html>

/members/new ์— post ๋ฐฉ์‹์œผ๋กœ ๋„˜๊ฒจ์ง„๋‹ค.

(*post๋ฐฉ์‹: form ํ˜•ํƒœ๋กœ ๊ฐ’์„ ๋„˜๊ธธ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹)

 

name ์ด ๊ฐ’์„ ๋„˜๊ฒจ์ฃผ๋Š” key ๊ฐ€ ๋œ๋‹ค.

 

 

์‹คํ–‰ํ™”๋ฉด

 

 

//ํšŒ์› ์กฐํšŒ ๊ธฐ๋Šฅ

 

templates > members > memberList.html

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

<div class="container">
    <div>
        <table>
            <thead>
            <tr>
                <th>#</th>
                <th>์ด๋ฆ„</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="member : ${members}">
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
            </tr>
            </tbody>
        </table>
    </div>

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

foreach ์ฒ˜๋Ÿผ members ๋ฅผ ๋Œ๋ฉฐ member ์ •๋ณด๋ฅผ ํ•˜๋‚˜์”ฉ ์ถœ๋ ฅํ•œ๋‹ค.

 

 

์‹คํ–‰ํ™”๋ฉด

728x90