2023.07.18 - [Flask] - Flask 이용한 웹사이트 제작기 (4) - auth view code 작성
Flask 이용한 웹사이트 제작기 (4) - auth view code 작성
2023.07.16 - [Flask] - Flask 이용한 웹사이트 제작기 (3) - DB 연결 Flask 이용한 웹사이트 제작기 (3) - DB 연결 2023.07.15 - [Flask] - Flask 이용한 웹사이트 제작기 (2) - 폴더 구조/ hello world 띄우기 Flask 이용한
donot-simsim.tistory.com
https://flask.palletsprojects.com/en/2.3.x/tutorial/templates/
이 부분을 진행한다.
안에서 돌아가는 코드를 아무리 잘 만들었다고 해도, 사용자들은 그것을 잘 알아주지 않는다. 결국은 눈에 보이는 것이 중요할 뿐. 이 장에서는 template을 만들고, 그것을 어떻게 보여주는지 학습한다.
참고로 flask에서는 jinja라는 template library를 사용한다고 한다... 뭐고 이건 또.
python 이랑 상당히 비슷하다니, 한번 코드 보면서 생각해보자.
- The Base Layout
먼저 flaskr 폴더 안에 templates/base.html 파일을 생성한 후 진행한다.
// flaskr/templates/base.html
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<nav>
<h1>Flaskr</h1>
<ul>
{% if g.user %}
<li><span>{{ g.user['username'] }}</span>
<li><a href="{{ url_for('auth.logout') }}">Log Out</a>
{% else %}
<li><a href="{{ url_for('auth.register') }}">Register</a>
<li><a href="{{ url_for('auth.login') }}">Log In</a>
{% endif %}
</ul>
</nav>
<section class="content">
<header>
{% block header %}{% endblock %}
</header>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
{% block content %}{% endblock %}
</section>
자주 보던 html 형식과는 다른 것 같다... 이게 jinja인 듯 하다.
위에서 생략한 jinja에 대한 설명을 몇 개 가져오자.
- {{, }} 안에 있는 모든 것들은 표현식이 된다.
- {%, %} 안에 있는 것들은 if, for과 같이 flow statement를 나타낸다.
이 두 가지를 읽은 후 위의 html을 다시 보면 어느 정도 보이는 듯 하다.
추가로, g라는 전역 변수와 url_for 이라는 함수는 여기서 바로 사용 가능하고, 이 template은 계속 루프를 돌며 get_flashed_message를 호출하고 있으므로, 코드 상에서 flash() 를 부르면 바로 메시지를 띄울 수 있다.
또 {% block title %} , {% block header %} , {% block content %} 는 다른 템플릿에서 오버라이딩 된다. 즉, 다른 html을 끼워 넣을 수 있다, 정도로 받아들이면 되지 않을까?
- Register
// flaskr/templates/auth/register.html
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Register{% endblock %}</h1>
{% endblock %}
{% block content %}
<form method="post">
<label for="username">Username</label>
<input name="username" id="username" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<input type="submit" value="Register">
</form>
{% endblock %}
먼저 {% extends 'base.html' %} 를 통하여, 상위의 block 안에 들어갈 수 있도록 명시해 주었다. 이러면 base_template에서 이 html을 불러서 볼 수 있을 것이다.
또, 밑에 보면 {% block header %} 안에 {% block title %} 을 배치했는데, 이렇게 하면 제목 블록을 설정한 다음 제목 블록의 값을 헤더 블록으로 출력하여 창과 페이지가 두 번 쓰지 않고 동일한 제목을 공유할 수 있다고 한다.
밑에는 input 태그가 나오는데, 이거는 자동으로 validation 검사를 해 준다고 한다. input 태그 뒤에 required가 붙어있는 걸 보니, password / username에 어떠한 데이터가 반드시 들어가야 하나보다.
- Log in
위와 비슷하게, register 하는 창 말고 login 하는 창을 만들었다.
// flaskr/templates/auth/login.html
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Log In{% endblock %}</h1>
{% endblock %}
{% block content %}
<form method="post">
<label for="username">Username</label>
<input name="username" id="username" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<input type="submit" value="Log In">
</form>
{% endblock %}
- Register a User
이렇게까지 완성한 뒤, 다시 터미널 창을 연다.
가상환경을 다시 켜 준 다음
flask run을 실행해 준 다음, 우리가 만든 페이지인
http://127.0.0.1:5000/auth/register
에 들어가 주자.
이런 식으로, 우리가 만든 flask app이 나오게 된다!!
2023.07.22 - [Flask] - Flask 이용한 웹사이트 제작기 (6) - static file 추가
Flask 이용한 웹사이트 제작기 (6) - static file 추가
2023.07.21 - [Flask] - Flask 이용한 웹사이트 제작기 (5) - 기본 template 구현 Flask 이용한 웹사이트 제작기 (5) - 기본 template 구현 2023.07.18 - [Flask] - Flask 이용한 웹사이트 제작기 (4) - auth view code 작성 Flask
donot-simsim.tistory.com
'Flask' 카테고리의 다른 글
| Flask 이용한 웹사이트 제작기 (7) - blog blueprint 추가 (0) | 2023.07.23 |
|---|---|
| Flask 이용한 웹사이트 제작기 (6) - static file 추가 (0) | 2023.07.22 |
| Flask 이용한 웹사이트 제작기 (4) - auth view code 작성 (0) | 2023.07.18 |
| Flask 이용한 웹사이트 제작기 (3) - DB 연결 (0) | 2023.07.16 |
| Flask 이용한 웹사이트 제작기 (2) - 폴더 구조/ hello world 띄우기 (0) | 2023.07.15 |