1달차 1주차 과제는 다음 3가지와 같다.
- 복습 (웹 서버 이해)
- 간이 로그인 페이지 만들기 (DB연결 X)
- 로그인 페이지 이쁘게 만들기
1번 복습 내용은 "스터디 정리" 카테고리에 기록해두었다.
따라서 여기서는 로그인 페이지에 관한 과제 내용을 기록하고자 한다.
1. 로그인 화면 페이지
로그인 페이지라 함은 아이디와 비밀번호를 입력하는 부분과 로그인 버튼이 있어야 한다.
이 부분에 대한 핵심 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<script>
function submit() {
document.login.submit();
}
</script>
</head>
<body>
<form name="login" method="post" action="login_proc.php">
<input name="id" placeholder="아이디">
<input type="password" name="pw" placeholder="비밀번호">
<button type="button" onclick="submit()">로그인</button>
</form>
</body>
</html>- '아이디' 와 '비밀번호'를 입력하는 칸을 위해 input 태그로 텍스트 박스를 생성하였다.
- 입력한 내용은 중요한 정보를 담고 있으므로, post 방식으로 전달하도록 하였다.
- action 속성을 통해 입력된 정보가 로그인 처리 페이지로 전달되도록 하였다.
| 실행결과 |
|---|
 |
| 로그인에 필요한 최소한의 요소들이 생성되었다. |
2. 로그인 처리 페이지
로그인 페이지를 통해 전달된 정보를 바탕으로, 식별하여 로그인 처리를 해주는 페이지이다.
핵심 코드는 다음과 같다.
<?php
$id = $_POST['id'];
$pass = $_POST['pw'];
if ($id == "admin" && $pass == "admin1234")
echo "<script>location.href='index.php';</script>";
else {
echo "<script>
window.alert('잘못된 계정')
history.go(-1)
</script>";
}
?>- POST방식으로 전달된 아이디와 비밀번호를 각각 변수 $id, $pass 에 대입한다.
- 로그인 정보가 admin과 일치한다면 index 페이지로 이동된다.
- 로그인 정보가 admin과 다르다면 '잘못된 계정' 이라는 팝업을 띄우고, 다시 로그인 페이지로 이동시킨다
| 실행결과 | 로그인 페이지에 정보 입력 | 로그인 처리 결과 |
|---|---|---|
| 로그인 성공 |  |  |
| 로그인 실패 |  |  |
3. 로그인 페이지에 CSS 적용
위에서 만들었던 로그인 페이지는 기능적으로는 정삭 동작하지만, 밋밋한 티가 많이 난다.
따라서 앞선 페이지에 CSS를 적용하여 좀더 보기 좋게 만들어 주고자 한다.
'넥슨' 의 로그인 화면을 참고하였고, CSS를 통해 구성을 비슷하게 만들어 주었다.
| 넥슨 로그인 페이지 | CSS적용 로그인 페이지 |
|---|---|
 |  |
최대한 이쁘게(?) 만들어 보고자 하였다.
CSS는 대부분 위치 지정, 폰트 혹은 색상에 관한 것이라 로그인 버튼 하나만 아래에 코드로 나타내었다.
#button {
position: absolute;
left: 403px; top: 208px;
text-align: center;
width: 350px; height: 30px;
background: linear-gradient(45deg, skyblue,pink);
}