[Zero-base] 6-8. 회원가입 입력폼 HTML작성과 서버 전송

Lomo 2022. 2. 15. 21:21

2022. 2. 15. 21:21

package com.zerobase.fastlms.member;

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

@Controller
public class MemberController {

    @GetMapping("/member/register")
    public String register() {

        return "member/register";
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
</head>
<body>
    <h1>회원가입</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
</head>
<body>
    <h1>회원가입</h1>

    <!-- ID(이메일), 이름, 전화번호, 비밀번호 -->
    <form>
        <div>
            <input name="userId"/>
        </div>
        <div>
            <input name="userName"/>
        </div>
        <div>
            <input name="password"/>
        </div>
        <div>
            <input name="phone"/>
        </div>
        <div>
            <button>회원 가입 하기</button>
        </div>
    </form>

</body>
</html>

http://localhost:8080/member/register?userId=111&userName=222&password=333&phone=444

<form method="post">

기본값: <form method="get">

에러 발생

package com.zerobase.fastlms.member;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MemberController {

    //@GetMapping("/member/register")
    @RequestMapping(value = "/member/register", method = {RequestMethod.GET, RequestMethod.POST})
    public String register() {

        return "member/register";
    }

    @RequestMapping("/member/register")

에러 발생되지 않음

@Controller
public class MemberController {

    @RequestMapping(value ="/member/register", method = RequestMethod.GET)
    public String register() {

        System.out.println("request get!!!!!");

        return "member/register";
    }

    @RequestMapping(value = "/member/register", method = RequestMethod.POST)
    public String registerSubmit() {

        System.out.println("request post!!!!!");

        return "member/register";
    }
}

request get!!!!!

값 입력 후 버튼 클릭

request post!!!!!

새로고침 클릭

request get!!!!!

package com.zerobase.fastlms.member;

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

@Controller
public class MemberController {
    
    @GetMapping("/member/register")
    public String register() {

        return "member/register";
    }
    
    @PostMapping("/member/register")
    public String registerSubmit() {
    
        return "member/register";
    }
}

<body>
    <h1>회원가입</h1>

    <!-- ID(이메일), 이름, 전화번호, 비밀번호 -->
    <form method="post">
        <div>
            <input name="userId" placeholder="ID(이메일) 입력"/>
        </div>
        <div>
            <input name="userName" placeholder="이름 입력"/>
        </div>
        <div>
            <input name="password" placeholder="비밀번호 입력"/>
        </div>
        <div>
            <input name="phone" placeholder="전화번호 입력"/>
        </div>
        <div>
            <button>회원 가입 하기</button>
        </div>
    </form>

</body>

'placeholder'가 적용된 모습
포커싱하고 내용을 입력하면 사라짐

required: 값을 입력하지 않으면 "post" 전송되지 않음

<body>
    <h1>회원가입</h1>

    <!-- ID(이메일), 이름, 전화번호, 비밀번호 -->
    <form method="post">
        <div>
            <input name="userId"
                   placeholder="ID(이메일) 입력" required />
        </div>
        <div>
            <input name="userName" placeholder="이름 입력" required />
        </div>
        <div>
            <input name="password" placeholder="비밀번호 입력" required />
        </div>
        <div>
            <input name="phone" placeholder="전화번호 입력" required />
        </div>
        <div>
            <button>회원 가입 하기</button>
        </div>
    </form>

</body>

Notice: 이 입력란을 작성하세요.

<!-- ID(이메일), 이름, 전화번호, 비밀번호 -->
<form method="post">
    <div>
        <input type="email"
               name="userId"
               placeholder="ID(이메일) 입력" required />
    </div>
    <div>
        <input type="text"
               name="userName"
               placeholder="이름 입력" required />
    </div>
    <div>
        <input type="password"
               name="password"
               placeholder="비밀번호 입력" required />
    </div>
    <div>
        <input type="tel"
               name="phone"
               placeholder="전화번호 입력" required />
    </div>
    <div>
        <button>회원 가입 하기</button>
    </div>
</form>

type="email": 형식이 맞지 않은 경우 알려줌

type="password": 입력값을 화면에 보여주지 않음

type="tel": 모바일에서 숫자패드로 보여줌

package com.zerobase.fastlms.member;

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

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Controller
public class MemberController {

    @GetMapping("/member/register")
    public String register() {

        return "member/register";
    }

    @PostMapping("/member/register")
    public String registerSubmit(HttpServletRequest request,
                                 HttpServletResponse response) {

        String userId = request.getParameter("userId");
        String userName = request.getParameter("userName");
        String password = request.getParameter("password");
        String phone = request.getParameter("phone");

        System.out.println("userId:" + userId);
        System.out.println("userName:" + userName);
        System.out.println("password:" + password);
        System.out.println("phone:" + phone);

        return "member/register";
    }
}

Getter and Setter

import lombok.Data;

import lombok.ToString;

@PostMapping("/member/register")
public String registerSubmit(HttpServletRequest request,
                             HttpServletResponse response,
                             MemberInput parameter) {

    System.out.println(parameter.toString());

    return "member/register";
}

MemberInput(userId=81scramble@gmail.com, userName=박지상, password=1234, phone=010-1234-5678)

저작자표시 비영리 동일조건

'cs > java-spring-boot' 카테고리의 다른 글

[Zero-base] 6-10. JavaMailSender를 통한 메일 전송 설정 및 메일 전송 테스트 (Gmail) (0)	2022.02.16
[Zero-base] 6-9. 회원가입 POST SUBMIT된 내용 JPA를 통한 DB저장 (0)	2022.02.16
[Zero-base] 6-7. 메인 페이지 작성 및 메뉴 링크 작성 (0)	2022.02.15
[Zero-base] 6-6. Thymeleaf를 통한 View페이지 매핑 (서버사이트 자바 템플릿 엔진) (0)	2022.02.15
[Zero-base] 6-5. Git Clone과 Response객체를 이용한 HTML작성 (0)	2022.02.15

쌍스러운 쌍로그

[Zero-base] 6-8. 회원가입 입력폼 HTML작성과 서버 전송

'cs > java-spring-boot' 카테고리의 다른 글

+ Recent posts

티스토리툴바