3은로그

JS 로그인 기능 본문

HTML CSS JS

JS 로그인 기능

3은 2022. 11. 21. 02:40
728x90

로그인 기능 구현

 

 

function login() {
            if($('#id').val() != '' && $('#password').val() != ''){
                $('#login_form').submit();
            }
            else {
                alert("빈칸을 입력하세요");
            }
        }

 

1. sign in 버튼을 누르면 login 함수 실행

(주의할점 - input 태그에서는 onClick() 함수가 잘 실행되는데 button 에서는 onClick() 실행 안됨)

2. login() 함수에서 폼에 아이디 비밀번호가 다 입력되었는지 확인하고 form을 submit 한다. 하나라도 빈칸이 있으면 빈칸을 입력하라는 alert가 뜬다.

3. submit이 되면 form 태그 안에 action = "login.do" 코드로 인해 logion.do로 이동.

.do는 class.properties에서 login.do를 찾는다.

 

class.properties

이기 때문에 LoginAction으로 간다.

4. LoginAction에 가면

LoginAction

이러한 코드가 있다. 

폼에서 받아온 id와 password를 String 변수에 저장한다.

UserDAO 인스턴스를 가져와서 getUSer라는 함수를 통해 id에 따른 유저 정보를 받아온다.

if 문안에서 아이디와 비밀번호가 일치하는지 확인한다.

 

 

login.jsp

전체코드

 

<%@ page import="handler.dao.UserDAO" %><%--
  Created by IntelliJ IDEA.
  User: ssky6
  Date: 2022-11-20
  Time: 오전 2:36
  To change this template use File | Settings | File Templates.
--%>

<!doctype html>
<%@ page contentType="text/html; charset=utf-8" %>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>

    <script>
        function login() {
            if($('#id').val() != '' && $('#password').val() != ''){
                $('#login_form').submit();
            }
            else {
                alert("빈칸을 입력하세요");
            }
        }

    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, 그리고 Bootstrap 기여자들">
    <meta name="generator" content="Hugo 0.104.2">
    <title>Signin Template · Bootstrap v5.2</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
    <link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
    <link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
    <meta name="theme-color" content="#712cf9">


    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .b-example-divider {
            height: 3rem;
            background-color: rgba(0, 0, 0, .1);
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
        }

        .b-example-vr {
            flex-shrink: 0;
            width: 1.5rem;
            height: 100vh;
        }

        .bi {
            vertical-align: -.125em;
            fill: currentColor;
        }

        .nav-scroller {
            position: relative;
            z-index: 2;
            height: 2.75rem;
            overflow-y: hidden;
        }

        .nav-scroller .nav {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
            margin-top: -1px;
            overflow-x: auto;
            text-align: center;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            max-width: 330px;
            padding: 15px;
        }

        .form-signin .form-floating:focus-within {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>


    <!-- Custom styles for this template -->

    <script>

    </script>
</head>
<body class="text-center">

<main class="form-signin w-100 m-auto">
    <form method="post" name = "loginForm" action="login.do" id = "login_form">
        <img class="mb-4" src="/img/login_cat.png" alt="" width="150" height="150">
        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

        <div class="form-floating">
            <input type="text" class="form-control" id="id" name="id">
            <label for="id">ID</label>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="password" name = "password">
            <label for="password">Password</label>
        </div>

        <div class="checkbox mb-3">
            <%--<label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>--%>
        </div>
        <input class="w-100 btn btn-lg btn-secondary" type = "button" value="Sign in" onclick="login()">
      <%--  <button class="w-100 btn btn-lg btn-primary" onclick="login()">Sign in</button>--%>
        <p class="mt-5 mb-3 text-muted">&copy;</p>
    </form>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

</body>
</html>

 

 

#아주 기본적인 로그인 기능만 설명 세션이나 유효성 검사는 앞으로 할 예정이다. 

'HTML CSS JS' 카테고리의 다른 글

지능웹 프로젝트 - 고양이 분양 폼 만들고 DB 연결  (0) 2022.11.22
웹프로젝트 기본세팅  (0) 2022.11.21
'HTML CSS JS' Related Articles more