정보과학융합탐구

로그인 페이지

yalu 2023. 7. 4. 11:07 
<!DOCTYPE html>

<html>



<head>

    <title>로그인 페이지</title>

    <script>

        function loginUser() {

            var username = document.getElementById("username").value;

            var password = document.getElementById("password").value;



            var users = [

                {

                    "username": "admin",

                    "password": "password"

                },

                {

                    "username": "user1",

                    "password": "12345"

                }

            ];



            var loggedInUser = users.find(function(user) {

                return user.username === username && user.password === password;

            });



            if (loggedInUser) {

                alert("로그인 성공!");

            } else {

                alert("사용자 이름 또는 비밀번호가 잘못되었습니다.");

            }

        }

    </script>

</head>



<body>

    <h1>로그인</h1>

    <label for="username">사용자 이름:</label>

    <input type="text" id="username" name="username" required><br><br>

    <label for="password">비밀번호:</label>

    <input type="password" id="password" name="password" required><br><br>

    <button onclick="loginUser()">로그인</button>

</body>



</html>

실행화면




개요

사용자로부터 사용자 이름과 비밀번호를 입력받아 회원 정보와 일치하는지 검증하고, 로그인 결과를 알림으로 출력한다.

 

구현 방법

index.html 파일은 로그인 페이지의 구성 요소를 정의한다. 페이지의 제목, 입력 필드, 로그인 버튼 등을 포함하고 사용자가 "로그인" 버튼을 클릭하면 JavaScript 함수가 실행되어 로그인 과정이 진행된다.

 

스크립트 설명

index.html 파일 내부에 작성된 JavaScript 코드는 다음과 같은 역할을 수행하는데, 

loginUser() 함수는 사용자가 입력한 사용자 이름과 비밀번호를 가져온다.

users 배열에는 회원 정보가 포함되어 있습니다. 각 회원은 사용자 이름과 비밀번호를 가지고 있다.

users.find() 메서드를 사용하여 입력된 사용자 이름과 비밀번호가 회원 정보와 일치하는지 검증한다.

로그인 결과에 따라 알림 창이 표시됩니다. 회원 정보와 일치하는 경우 "로그인 성공!"이라는 메시지가 나타나고, 일치하지 않는 경우 "사용자 이름 또는 비밀번호가 잘못되었습니다."라는 메시지가 나타난다.

 

사용 방법

웹 페이지를 열면 로그인 페이지가 표시된다.

사용자는 사용자 이름과 비밀번호를 입력하고 "로그인" 버튼을 클릭한다.

입력된 사용자 이름과 비밀번호가 회원 정보와 일치하는지 확인한다.

일치하는 경우 "로그인 성공!"이라는 알림 창이 표시되고,

일치하지 않는 경우 "사용자 이름 또는 비밀번호가 잘못되었습니다."라는 알림 창이 표시된다.

 

회원 정보 관리

현재 이 웹 페이지에서는 사용자 정보를 JavaScript 코드 내부에 하드코딩하여 관리하고 있다. 만약 실제로 사용자 정보를 저장하고 관리해야 한다면, 서버와 데이터베이스를 사용하여 회원 정보를 관리해야 할것이다. 이는 보다 안전하고 확장 가능한 방법으로 데이터 정규화와 같은 여러 방법도 있다. (사실 다른 파일에 옮겼다가 실패했서요)

 

결론

이 웹 페이지는 사용자의 로그인 정보를 검증하여 로그인 결과를 알려주는 간단한 로그인 기능이 구현된 웹 페이지로 사용자 이름과 비밀번호를 입력하고 "로그인" 버튼을 클릭하여 로그인을 시도할 수 있습니다. 코드는 HTML과 JavaScript로 구성되어 있으며, JavaScript를 사용하여 회원 정보를 검증하고 알림 창을 표시합니다. 추가적인 보안 및 확장을 위해서는 서버와 데이터베이스를 사용하여 회원 정보를 관리하는 방식으로 개선할 수 있습니다.