웹 MVC개발
웹기능 추가하기
- 홈화면 추가
- 등록
- 조회
웹 기능을 만들기 위해 먼저 홈화면을 만든다.
회원등록과 조회를 웹페이지상 버튼과 사용자 입력을 이용해 진행할 수 있도록 만들어보자.
Home화면 제작
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> <!-- /container -->
</body>
</html>회원가입 버튼을 눌렀을 경우 localhost:8080/members/new로 이동되며,
회원 목록 버튼은 localhost:8080/members로 이동된다.
Controller package하위에 홈 페이지를 조작하는 기능을 만들기위해 다음과 같이 HomeController를 만든다.
메인 페이지로 지정하기 위해 경로는 "/"로 설정해준다.
HomeController
package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/") //사이트 첫 접속 url
public String home(){
return "home";//home.html 요청
}
}
완료하면, 다음과 같이 localhost:8080으로 접속했을 때, 다음과 같은 화면이 뜬다.
자세한 설명은 다음 게시글을 참고하도록 한다.
2021.08.31 - [Backend/SpringBoot] - [Spring]정적, 동적 페이지 동작원리
[Spring]정적, 동적 페이지 동작원리
Welcome page(정적 페이지 동작) src>main>resources>static(정적페이지) 아래에 index.html 을 제작해주면 localhost:8080으로 접속했을 때 뜨는 에러페이지를 일반적인 페이지로 재단할 수 있다. index.html
iagreebut.tistory.com
여기서 welcome page를 만들었는데, localhost:8080으로 접속시 웰컴페이지가 아닌 home.html이 뜨는 이유는?
정적페이지인 welcomepage 를 찾아보기 전 Controller에서 return해준 home을 기반으로 mapping된 home.html이 있는지 먼저 확인한 후 , 없는 경우에만 정적 템플릿을 검색하기 때문이다.
회원가입기능
회원가입 기능을 구현하기 위해, 먼저 "회원 가입" 버튼을 눌렀을 때,
회원 정보(아이디, 비밀번호, 개인정보 등을 입력하는 창)으로 넘어가져 정보를 입력받도록한다.
하지만 우리는 간단하게 "name"만 입력받기로 했음을 기억하자.
회원가입 창 만들기
회원가입 정보입력 창을 만들기 전에, 회원과 관련된 template을 모아두기 위해 template하위에 members 디렉토리를 만든다.
그 후, 내부에 createMemberForm.html이라는 회원 정보 입력 창을 만든다.
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> <!-- /container -->
</body>
</html>form태그를 이용해 정보를 입력받았다.
MemberController
package hello.hellospring.controller;
import hello.hellospring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MemberController {
//생략
@GetMapping("/members/new") //membrers/new로 접근했을 때 실행되도록
public String createForm(){
return "members/createMemberForm";
}
}먼저 Member와 관련된 기능이므로 memberContoller에 작성해준다.
"회원 정보"를 클릭하면 members/new로 이동되도록 html코드를 작성했으므로, 해당 url로 이동되면 실행되도록 GetMapping을 이용해준다.
회원 정보를 입력받는 창으로 이동시키기 위해 아까 만들어뒀던 html파일로 return한다.
이제 회원 가입 버튼을 누르면 이 창으로 이동되는 것 까지 완료되었다.
이제 입력을 받고 등록을 누르면, 실제로 등록되도록 만들어보자.
회원가입 "등록"버튼 기능부여
회원 생성 폼에서 값을 입력받고 저장하기위해서는 객체가 필요하기 때문에, 회원 생성폼에서 입력받은 값들을 저장해둘 객체를 생성한다.
MemberForm
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
위에 만들어둔 MemberForm을 매개변수로 입력받아, 그 정보를 이용해 join함수를 이용해 레포지토리에 저장하도록 함수를 호출한다.
@Controller
public class MemberController {
//생략
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member); //회원가입 db접근기능을 구현햇던
return "redirect:/"; //완료되면 홈 화면으로 이동되도록
}
}@PostMapping("/members/new")는 <form>태그의 post방식을 이용해 넘어온 값을 매개변수로 넘겨주는 역할을 한다.
즉, PostMapping내에 적힌 url로 post방식을 이용해 값을 넘긴다.
또한, <input>태그 내 name="xxx" 여기에 적힌 것이 서버로 넘어갈 때 키가 되는데,
createMemberForm.html에서 값을 입력하는 name을 name이라고 설정해두었으므로, form.getName()을 이용하여 사용자가 입력한 값에 접근할 수 있다.
<참고>
GET방식
url로 적혀있을 때, (주로 조회에 많이 사용)
POST방식
데이터를 폼에 넣어서 전달할 때, 이걸로 인해 매개변수로 값이 들어오게됨
이제 버튼에 기능이 부여되었다.
하지만, 조회기능을 만들어야 가입이 제대로 완료되었는지 눈으로 확인할 수 있다. (사실 이미 join 함수등에 대한 테스트를 전부 마쳤기 때문에 정상적으로 작동함을 확신할 수 있긴 하다)
회원조회
회원 목록을 눌렀을 때, 회원이 조회되도록 코딩해본다.
MemberController
@Controller
public class MemberController {
//생략
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();//전체 멤버를 가져옴
model.addAttribute("members", members); //html에서 정보를 사용할 수 있도록
return "members/memberList";
}
}회원 조회 버튼을 누르면 /members로 이동되며, Mapping된 다음 메소드가 실행된다.
작성해둔 findMembers메소드를 이용해 전체 저장된 회원을 불러와 List에 담고,
html이 이 변수를 이용할 수 있도록 model을 이용한다.
이를 화면으로 출력해볼 수 있도록, memberList라는 html로 이동될 수 있도록 return한다.
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>th:each는 timeLeaf문법으로, for문과 같이 전체를 순회한다.
이제 직접 확인해보면,
여러명을 등록했을 경우도 전부 보여주는 것을 확인할 수 있다.
이 데이터는 메모리에 저장해뒀기 때문에, 서버를 종료시킨 후 다시 실행하면 사라진다.
따라서, 실제로는 이런 데이터를 파일이나 데이터베이스에 저장해 두어야만 한다.
참고)
join함수에서 중복이름은 가입이 안되도록 막았기 때문에, 중복가입시 에러창이 뜬다.
보통은 에러가 났을 때 에러페이지를 만들어주지만, 여기서는 만들지 않았기 때문에 에러창이 뜨고 실제로 저장되지 않으므로
중복체크 후 저장이 안되도록 막아진 것은 확인해 볼 수있다.
'Backend > Spring' 카테고리의 다른 글
| [Spring] 데이터베이스 접근 기술(Jdbc) (0) | 2021.09.14 |
|---|---|
| [Spring] DB설치(h2 데이터베이스) (0) | 2021.09.14 |
| [Spring] Spring Bean2 (0) | 2021.09.10 |
| [Spring] Spring Bean1 (0) | 2021.09.10 |
| [Spring] 회원관리 예제 - 3) 회원 서비스 (0) | 2021.09.07 |
