본문 바로가기
JAVA Spring

회원관리예제 웹MVC 개발

by ppirae 2022. 1. 23.

 

오늘은 회원관리 웹MVC와 스프링 DB접근기술에 대해 공부했다.

회원 웹 기능 - 홈 화면 추가

controller 패키지안에 HomeController 클래스를 만든다.

@Controller
public class HomeController {

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

home으로 return 하기 때문에 home.html 파일을 templates 패키지안에 만들어준다.

<!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> <!-- /container -->
</body>
</html>

실행후 localhost:8080에 들어가면 이런 창이 나오게된다.


MemberController에 이 코드를 추가한다.

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

templates패키지 안에 members 패키지를 만들고 그안에 createMemberFrom.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> <!-- /container -->
</body>
</html>

결과창에서는 회원 가입으로 들어가면 이름과 등록 버튼이 나온다.


회원 웹 기능 - 등록

controller 패키지안에 MemberForm이라는 클래스를 만든다.

public class MemberForm {
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    private String name;
}

MemberController에 이 코드를 추가한다.

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

    memberService.join(member);

    return "redirect:/";
}

redirect:/는 제출이 완료되면 홈화면으로 돌려보내는 것이다.

결과창에서는 회원가입으로 들어가서 이름을 등록하면 홈화면으로 돌아온다.

 

@GetMapping은 데이터를 조회할 때 사용하고, @PostMapping은 데이터를 전달하거나 등록할 때 사용한다.


회원 웹 기능 - 조회

MemberController에 코드를 추가한다.

@GetMapping("members/")
public String list(Model model) {
    List<Member> members = memberService.findMembers();
    model.addAttribute("members", members);
    return "members/memberList";
}

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> <!-- /container -->
</body>
</html>

 

 

결과창에서는 회원가입으로 들어가서 이름을 등록하고, 회원목록을 누르면

그동안 등록했던 이름들의 목록을 볼 수 있다.

메모리에 데이터가 저장되어 있기때문에 서버를 내렸다가 다시 열면 목록이 모두 지워진 것을 확인할 수 있다.

이 데이터들을 파일이나 데이터베이스에 저장해야하기 때문에

스프링 데이터베이스 엑세스 기능이 필요하다.


이 강의는 인프런 김영한님의 스프링 입문을 듣고 작성한 글입니다. 문제시 삭제하겠습니다.

https://inf.run/eoSJ

 

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런...

www.inflearn.com

 

댓글