사이트제작/사이트제작 공부하기

로그인 페이지 기능 구현 ( 사이트 제작 2)

잡사전집사 2021. 1. 7. 18:53
반응형

이번 장에서는 로그인 페이지를 구현하는 방법에 대해서 알아보도록 할게요~~

 

그전에 이번에 제작하는 페이지는 자신의 애인에게 선물하는 페이지이기 때문에 회원가입, 데이터 베이스를 사용하지 않고 로그인 페이지 기능 구현하도록 하겠습니다!

 


1. PHP는 무엇일까?

PHP는 서버 측에서 실행되는 프로그래밍 언어입니다. HTML 프로그래밍 언어를 프로그래밍적으로 생성을 해주며, 데이터 베이스와 상호작용을 하여 데이터를 저장하고, 표현 가능합니다. PHP는 웹을 위해서 만들어졌으며, 많은 기능들을 구현할 수 있게 도와주는 언어입니다. 

 


2. 어떤 기능을 구현할 것인가?

 

본 사이트에서는 이름과 비밀번호를 치면 퀴즈가 시작되는 형식의 사이트를 제작할 것입니다. 

아래 코드를 보면서 설명드리도록 하겠습니다~

 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
    <body>
    <?php
	$name = $_GET["name"];
	$password = $_GET["password"];
	if($name == "이름(입력)"){
		if($password == "비밀번호(입력)"){
			echo ("<script>location.href='home/home.html';</script>");
		}else {
			echo ("<script>alert('이름과 비밀번호를 다시 확인해주세요');</script>");
			echo ("<script>location.href='index.html';</script>");
		}
	} else {
	echo ("<script>alert('이름과 비밀번호를 다시 확인해주세요');</script>");
	echo ("<script>location.href='index.html';</script>");
	}
	?>
    </body>
</html>    

 코드를 보시면 name변수에 GET함수를 사용하여 입력을 해준 뒤 if문을 이용하여 자심이 입력한 이름이 동일하다면 비밀번호를 확인 입력받은 비밀번호가 설정해 놓은 비밀번호와 동일한 경우 다음 페이지로 넘어가도록 설정해 주었습니다.  위 코드를 보시면 script언어에서 alert함수를 이용하여 메시지를 출력한 후 다시 로그인 사이트로 돌아가도록 설정된 것을 볼 수 있습니다. 

 


3. 결과 화면

먼저 1장에서 만든 페이지 화면에서 입력을 하면서 결과하면을 보여드리도록 하겠습니다~

 

1. 페이지 로그인 화면

로그인 사이트 화면

2. 이름 입력만 했을 경우

이름 입력 했을 경우
오류 발생

위 그림처럼 비밀번호가 입력되지 않았기 때문에 오류 화면이 나타나는 것을 볼 수 있습니다. 

 

3. 이름과 비밀번호가 일치한 경우

이름과 비밀번호를 입력한 경우

위 그림은 이름과 비밀번호가 입력된 상황입니다~~

 

로그인 성공 후 페이지

로그인이 성공하면 퀴즈를 시작하는 페이지가 시작되게 됩니다~ 

 


위 에서 페이지를 만들고 기능을 구현하는 것을 알아 보았습니다~~ 

 

사이트를 제작할 때 HTML, CSS, PHP, 등등 여러 언어들이 필요하기 때문에 처음부터 쉬운 작업은 아니지만 못하는 작업은 아니에요~~ 꾸준히 찾으면서 하다보면 조금씩 자신이 원하는 사이트를 만들고 있는 모습을 볼 수 있을 거에요~~ 

 

궁금하신 점은 댓글 달아주시면 답 달아드리도록 할게요~~

 

*위 HTML, CSS 코드가 필요하신 분들 댓글달아주세요~

반응형