TITEDIOS 편한 코딩

Flask로 웹개발: #10 레이아웃 - login.html 작성 본문

Flask 웹 서버 만들기

Flask로 웹개발: #10 레이아웃 - login.html 작성

TitediosKW 2024. 7. 29. 19:00
반응형



Flask로 만든 미니 쇼핑몰에 로그인 기능을 추가하면 사용자 인증과 세션 관리를 통해 사용자 맞춤형 서비스를 제공할 수 있습니다. 로그인 기능 추가를 위한 요구사항에 대해 정리하는 것은 이전 포스팅에서 수행했습니다. 이번 포스팅에서는 정리했던 기능을 실제로 구현하기 위해 레이아웃을 먼저 작성해 봅니다.

1. base.html 작성

base.html은 모든 페이지에 공통으로 적용되는 레이아웃을 정의합니다. 여기에서는 네비게이션 바와 컨테이너를 설정하고, 로그인 상태에 따라 표시되는 항목을 조절합니다.

그리고 전에 만들었던 Home 버튼과 Cart 버튼도 정렬을 해주겠습니다. 일반적인 쇼핑몰에서는 Home 버튼은 왼쪽에 Cart는 오른쪽에 있습니다. 따라서, 저희도 그와 같이 정렬을 해주도록 하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini E-commerce</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <nav>
        <!-- 왼쪽에 Home 버튼 위치 -->
        <div class="nav-left">
            <a href="{{ url_for('index') }}">Home</a>
        </div>
        <!-- 오른쪽에 Cart와 Login 버튼 위치 -->
        <div class="nav-right">
            <a href="{{ url_for('cart') }}">Cart ({{ session.get('cart', [])|length }})</a>
            {% if 'user' in session %}
                <span>Welcome, {{ session['user'] }}</span>
                <a href="{{ url_for('logout') }}">Logout</a>
            {% else %}
                <a href="{{ url_for('login') }}">Login</a>
            {% endif %}
        </div>
    </nav>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

2. login.html 작성

login.html은 사용자가 로그인 정보를 입력할 수 있는 페이지입니다. Index 페이지에서 Login 버튼을 누르면 보이는 화면입니다. login.html은 저희가 아직 생성하지 않은 파일입니다. 아래 파일 구조처럼 login.html 파일을 하나 생성해 주세요.

flask_ecommerce
├── ...
└── templates
    ├── base.html
    ├── cart.html
    ├── index.html
    ├── login.html
    └── product.html


이후 아래 html 코드를 작성하시면 됩니다.

{% extends "base.html" %}

{% block content %}
<div class="login-container"> <!-- 1 -->
    <h2>Login</h2> <!-- 2 -->
    <form method="POST" action="{{ url_for('login') }}"> <!-- 3 -->
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required> <!-- 4 -->
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit">Login</button>
    </form>
</div>
{% endblock %}


간단하게 코드 설명 하도록 하겠습니다.

  1. <div class="login-container">: div 태그로 로그인 폼을 감싸 login-container 클래스를 사용하여 스타일을 적용할 수 있습니다.
  2. <h2>Login</h2>: h2 태그로 로그인 폼의 제목을 정의합니다.
  3. <form method="POST" action="{{ url_for('login') }}">: form 태그로 로그인 폼을 정의하며, method="POST"와 action="{{ url_for('login') }}" 속성으로 폼 데이터를 전송하는 방식을 설정합니다:
    1) method="POST": 폼 데이터를 서버로 전송할 때 POST 메소드를 사용합니다.
    2) action="{{ url_for('login') }}": 폼 데이터를 처리할 Flask의 login 라우트를 지정합니다.
  4. <input type="email" id="email" name="email" required>: input 태그로 사용자에게 정보를 받는 기능을 수행합니다. type을 정의하여 email 형식을 자동으로 내부에서 검사하도록 합니다. required 옵션을 통해 반드시 입력해야하는 정보로 지정합니다.

3. 스타일 설정

styles.css 파일에 간단한 스타일을 추가합니다. 로그인 기능을 추가하는 김에 디자인적 요소도 추가해 보도록하겠습니다. 약간의 색상 조정 등만 하는 정도기 때문에 너무 걱정하지 않으셔도 됩니다. 스타일에 대한 설명은 하지 않도록 하겠습니다. 아마 슬쩍 보시면 어느정도 이해가 가실 것입니다. html/css 강의 기회가 있다면 깊이 설명하도록 하겠습니다.

body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

nav {
    background-color: #f8f8f8;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #007BFF;
}

nav a:hover {
    text-decoration: underline;
}

.nav-left a {
    margin-right: 20px;
}

.nav-right {
    display: flex;
    align-items: center;
}

.nav-right a, .nav-right span {
    margin-left: 10px;
}


.container {
    max-width: 800px;
    margin: 0 auto;
}

.login-container {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}


스타일까지 적용하셨다면 여러분은 아래 그림처럼 로그인 화면을 구현하신 것입니다. 다만, 아직 여러분은 확인하실 수 없는 화면입니다. app.py를 구현한 이후 확인이 가능하십니다.

결론

이제 Flask 미니 쇼핑몰 프로젝트에 로그인 기능이 추가되었습니다. base.html과 login.html을 작성하고,쇼핑몰에 대한 사용자 경험을 더 향상시키기 위해 심미적 요인(색상 등)을 추가하였습니다. 하지만, 아직 로그인 기능이 동작하는 것은 아닙니다. 심지어 로그인 버튼을 누른다면 에러가 발생할 수도 있습니다. 에러를 마주치는 것을 너무 두려워하진 마세요. ㅎㅎㅎ 아직 app.py를 구현하지 않아 발생하는 에러일 뿐입니다. 레이아웃 작업을 마무리하였으니 다음 포스팅에서는 app.py를 작성하도록 하겠습니다.

감사합니다!

반응형

'Flask 웹 서버 만들기' 카테고리의 다른 글

Flask로 웹개발: #12 기능 구현 - 회원 가입, 탈퇴, 로그인, 로그아웃  (0) 2024.07.31
Flask로 웹개발: #11 레이아웃 - 회원 가입/탈퇴  (0) 2024.07.30
Flask로 웹개발: #9 어? 이게 빠졌는데요? - 추가 기능 개발 요청  (0) 2024.07.26
Flask로 웹개발: #8 미니 쇼핑몰 배포 - 배포 및 테스트  (0) 2024.07.25
Flask로 웹개발: #7 구현 - 기능 개발  (1) 2024.07.24
'Flask 웹 서버 만들기' Related Articles more