1주차 과제
1. 로그인 페이지 만들기
2. CSS 적용하기
- HTML, CSS, php로 대략적인 틀만 구현해놓은 상태
- 자바스크립트와 DB는 사용하지 않아서 별다른 기능은 없음!
[login_form.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="login.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
/>
<title>로그인</title>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form method="post" action="login_proc.php" id="login-form">
<div class="login_input">
<input type="text" name="id" placeholder="ID" />
<input type="password" name="passwd" placeholder="PASSWORD" />
</div>
<div class="submit_button">
<input type="submit" value="Login" />
</div>
</form>
</div>
</body>
</html>
[login.css]
/* Styling the container */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 400px;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
font-family: "Roboto", sans-serif; /* Apply Roboto font */
}
/* Styling the login form */
#login-form {
display: inline-block;
text-align: left;
}
/* Styling the heading */
h2 {
font-size: 35px;
margin-bottom: 20px;
margin-top: 10px;
}
/* Styling the input fields and submit button */
.login_input input {
border: 2px solid lightgrey;
border-radius: 40px;
outline: none;
width: 98%;
height: 30px;
text-indent: 7px;
margin-bottom: 8px;
}
/* Styling the submit button */
.submit_button input[type="submit"] {
width: 100%;
padding: 10px;
background-color: black;
color: #fff;
border: 1px solid #dbdbdb;
border-radius: 40px;
outline: none;
font-size: 14px;
box-sizing: border-box; /* 추가: 박스 모델에 패딩과 테두리 포함 */
}
/* Hover effect for the submit button */
.submit_button input[type="submit"]:hover {
background-color: #0056b3;
}
구현된 화면
[login_proc.php]
id에 admin, 비밀번호에 admin1234 입력 시 로그인되도록 처리
<?php
$id = $_POST['id'];
$pw = $_POST['passwd'];
if($id == 'admin' && $pw == 'admin1234')
{
echo "<script>alert(\"환영합니다.\")</script>";
}
else
{
echo "<script>alert(\"다시 시도해주세요.\")</script>";
}
?>
1주차 과제인데 2주차 수업 한시간 전에 블로그 개설해서 올리기...ㅎㅎ
다른 모의해킹 프로젝트 핑계로 바쁘다고 미뤘는데 솔직히 사실 과제할 시간까지 없었던건 아니었음 그냥 내가 게을렀을 뿐,,,
컴공에서 웹페이지 만들기 강의 들었던 기억을 붙잡아 어찌저찌 완성은 했으나 서치가 대부분이였으니 앞으로 스터디를 따라가려면 확실하게 개념을 잡아야할거 같당
'웹 모의해킹 스터디 > 웹 개발 (PHP | MySQL)' 카테고리의 다른 글
| [php/mysql] 게시판 글 작성 구현하기 (3) | 2023.11.21 |
|---|---|
| [php/mysql] 게시판 리스트 구현하기 (메인 페이지) (0) | 2023.11.21 |
| [php / mysql] 세션(session)을 이용한 로그인 / 로그아웃 구현 (0) | 2023.11.17 |
| [3주차] [php / mysql] 4가지 로그인 과정 구현 (0) | 2023.11.15 |
| [php / mysql] 로그인 / 회원가입 페이지 만들기 (3) | 2023.11.13 |
