W3_H3_회원가입 기능 구현(1)

엘·2023년 4월 19일

노말틱 취업스터디

목록 보기

11/16

💻 계정 생성 기능 구현 과정

1. 회원가입 페이지 만들기

회원가입 페이지 html 만들기
등록할 정보 : 이메일, 이름, 아이디, 비밀번호, 비밀번호 확인, 출생연도, 전화번호, 주소

login.html 파일을 수정해서 "FIRST TO HERE" 버튼을 누르면 account.html 페이지로 오도록 수정한다.

2. 로그인 페이지 수정하기

등록된 ID 값과 PSW가 해당 DB에 있다면 메인 화면으로 넘어가고, 그렇지 않으면 에러 메시지를 출력한다.

3. ID 중복 검사 기능

회원가입 페이지에서 ID 확인 버튼을 생성하고, 버튼을 눌렀을 시 회원DB에서 입력된 ID 값과 일치하는 값이 있는지 확인한다. 만약 일치하는 값이 있다면 해당 ID는 사용불가라고 뜨고, 'submit' 버튼이 비활성화 된다. 일치하는 값이 없다면 해당 ID는 정상적으로 사용이 가능하고, alert 메시지로 '계정이 생성되었습니다!'라는 문구와 로그인 화면으로 넘어간다.

✍🏻 회원가입 페이지 만들기

- 회원가입 페이지 html 만들기

등록할 정보 : 이메일, 이름, 아이디, 비밀번호, 비밀번호 확인, 출생연도, 전화번호

회원가입 페이지 html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EL'S_HACKING_PLAYGROUND</title>
    <link rel="stylesheet" href="accout.css">
</head>

<body>
    <header>
        <div id="header">
            <h1 class="title">
                <p>MAKE YOUR OWN ACCOUNT!</p>
            </h1>
        </div>
    </header>

    <div class="loginbox">
        <form action="" method="post">
            <fieldset>
                <legend>LOGIN</legend>
            
                <label for="email">E-MAIL: </label>
                <tr>
                    <td><input type="text" id="email" placeholder="email_id" maxlength="18" required></td> @
                    <td>
                        <select class="select" title="CHOOSE YOUR E-MAIL DOMAIN" onclick="setEmailDomain(this.value);return false;">
                            <option value="">-SELECT-</option>
                            <option value="naver.com">naver.com</option>
                            <option value="gmail.com">gmail.com</option>
                            <option value="hanmail.net">hanmail.net</option>
                            <option value="hotmail.com">hotmail.com</option>
                            <option value="korea.com">korea.com</option>
                            <option value="nate.com">nate.com</option>
                            <option value="yahoo.com">yahoo.com</option>
                        </select>
                    </td>
                </tr>

                <label for="name">NAME : </label>
                <input type="text" maxlength="10" placeholder="name" name="name" id="name" required>

                <label for="id">ID : </label>
                <input type="text" name="id" id="id" maxlength="15" placeholder="id" required>

                <label for="password">PASSWORD : </label>
                <input type="password" name="password" id="password" placeholder="password" maxlength="25" required>
                <label for="password_confirm">CHECK YOUR PASSWORD :</label>
                <input type="password" name="password_confirm"  placeholder="confirm your password" id="password_confirm" maxlength="25" required>

                <label for="phone">PHONE NUMBER : </label>
                <p style="color:#882828">INPUT YOUR PHONE NUMBER WITHOUT HYPUN("-")</p>
                <input type="tel" id="phone" placeholder="01012345678" maxlength="11" required>

                <label for="birthyear">BIRTH : </label>
                <tr>
                    <td><input type="number" id="birthyear" name="date" placeholder="date" maxlength="2" oninput="maxLengthCheck(this)" required></td>
                    <td><input type="number" id="birthyear1" placeholder="month" maxlength="2" oninput="maxLengthCheck(this)" required></td>
                    <td><input type="number" id="birthyear1" placeholder="year" maxlength="4" oninput="maxLengthCheck(this)" required></td>
                </tr>

                <button type="submit">MAKE ACCOUNT</button>
            </fieldset>
        </form>
    </div>

    <script type="text/javascript">
        <!--최대 입력 숫자값-->
        function maxLengthCheck(object){
          if (object.value.length > object.maxLength){
            object.value = object.value.slice(0, object.maxLength);
          }    
        }
    </script>
</body>

</html>

</html>

회원가입 페이지 css

회원가입 페이지 CSS 파일은 코드가 너무 길어서 아래의 깃허브 폴더를 참조하기 바란다.

https://github.com/MINGDDING/HACKING_PLAYGROUND

처음에 등록 정보 부분에 주소도 넣어 kakao에서 제공하는 우편번호 서비스도 넣어볼까 하다가 내가 만든 페이지가 전부 영어로 작성되어 있기도 하고, 웹 페이지를 서버에 등록하여야 API 구동이 된다고 해서 다음 기회로 미루도록 했다.

kakao 에서 제공하는 api 서비스 :
https://postcode.map.daum.net/guide#usage

- 회원가입 페이지 html 완성 화면

- "FIRST TO HERE" 버튼 수정

: login.html 파일을 수정해서 "FIRST TO HERE" 버튼을 누르면 account.html 페이지로 오도록 수정한다.

// form 태그 위치 수정
<form action="login.php" method="POST" name="loginForm">
	<button type="submit" name="loginBtn">SUBMIT</button>
</form>

// href에 계정 생성 html 파일 경로 추가
<ul>
	<li><a href="account.html" style="color:#C65151">FIRST TO HERE?</a></li>
	<li><a href="#" style="color:#692020">FORGOT THE PASSWORD</a></li>
</ul>

🤍 참조

로그인 화면 마크업 화면 구성
https://blog.naver.com/PostView.naver?blogId=rn8958&logNo=222488418220

HTML 테이블 생성
https://artiroom.tistory.com/entry/HTML-%EA%B8%B0%EC%B4%88-%ED%85%8C%EC%9D%B4%EB%B8%94%EC%9D%98-trtdth%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%86%8D%EC%84%B1-align-valign-19%EB%B2%88%EC%A7%B8

HTML 이메일 형식
https://chobopark.tistory.com/125

number 최댓값 지정
https://milkye.tistory.com/265