로그인 플로우

실습 - 로그인/회원가입 과정 플로우

메인 → 로그인 → 로그인확인 → 메인

메인 → 회원가입 → 회원가입확인 → 메인

이와 같은 과정을 플로우라고 한다.

하나의 작업과정에서 흐름에 따라 페이지가 이동하는 것을 이해하는게 중요하다.

<코드>

index.html : 초기 페이지

<html>
    <head>
        <title>index</title>
    </head>
    <body>
        <table align="center" width="100%">
            <tr align="center">
                <td height="50px">안녕하세요.</td>
            </tr>
            <tr align="center">
                <td height="50px"><a href="login.html"><input type="button" value="로그인"></a></td>
            </tr>
            <tr align="center">
                <td height="50px"><a href="join.html"><input type="button" value="회원가입"></a></td>
            </tr>
        </table>
    </body>
</html>

button 태그에 a(링크)태그를 씌워 특정 페이지로 이동하도록 했습니다.
로그인 버튼을 누르면, 'login.html' 로 이동합니다.
회원가입 버튼을 누르면 'join.html' 로 이동합니다.

<html>
    <head>
        <title>로그인 폼</title>
    </head>
    <body>
        <form action="logok.html" method="post">
            <table width="30%" align="center">
                <tr align="center">
                    <td>id:</td>
                    <td><input type="text" name="id" placeholder="로그인 아이디"></td>
                </tr>
                <tr align="center">
                    <td>pw:</td>
                    <td><input type="password" name="pw" placeholder="로그인 패스워드"></td>
                </tr>
                <tr align="center">
                    <td colspan="2"><input type="submit" value="로그인"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

로그인 버튼을 누르면 'logok.html' 로 이동합니다.

logok.html : 로그인 확인 페이지

<html>
    <head>
        <title>logok</title>
    </head>
    <body>
        <table align="center" width="100%">
            <tr align="center">
                <td height="50px">로그인 하신것을 확인합니다.</td>
            </tr>
            <tr align="center">
                <td height="50px"><a href="index.html"><input type="button" value="메인으로"></a></td>
            </tr>
        </table>
    </body>
</html>

메인으로 버튼을 누르면 'index.html' 로 이동합니다.