Ep03 : 블로그 웹 애플리케이션 개발(0) - 프로젝트 생성, 패키지 설치, 기본 작업

TGoddessana commented 2 years ago

Ep03에서는 본격적으로 블로그 웹 애플리케이션을 개발합니다.

https://youtu.be/GQcM8wdduLI (참고만 해주세요)
https://gdsanadev.com/14447 (위의 동영상 강좌를 기반으로 하여 블로그에 정리해둔 것입니다. 위의 동영상에 나온 것과는 템플릿을 다르게 하고, 여러 가지 페이지를 추가로 만들 것이므로, 블로그를 보고 따라하시는 것을 추천합니다.)
위의 블로그 링크에서는 맨 처음에 파이참을 이용한 프로젝트 생성을 하는데, vscode도 별반 다르지 않습니다! 다만 꼭! 가상 환경이 활성화되어 있는지를 체크해 주세요!
실습을 진행하며 추가로 알게 된 부분이 있다면 그것도 정리해 두면 좋습니다.

(과제1) 결론적으로, 위의 실습을 마치고 나면 아래의 화면이 보여야 합니다. 애플리케이션을 실행하고, 아래와 같은 창이 나오도록 코드를 작성하여 스크린샷과 만드는 과정을 블로그에 정리한 후 링크를 제출해 주세요. 블로그에서 정적 파일을 다루는 방법을 설명했으므로, 이미지를 화면에 띄우는 것은 어려운 일이 아닐 것입니다. 디자인이나 이미지 등은 마음껏 바꾸어도 됩니다.

위의 과정을 수행하며 1. '블루프린트', 2. 'jinja 템플릿 엔진', 3. render_template() 라는 단어를 들을 수 있을 것입니다. 특히, 마지막 render_template() 사용 시에 context 로 값이 전달되는 부분은 특히나 나중에 데이터베이스에서 원하는 정보들을 뿌려줄 때에 모르면 안 되는 부분입니다. 1번 항목, 2번 항복, 3번 항목에 대해서 이해한 바를 꼭 정리해 주세요!

/blog/ 일 때:

/blog/about 일 때:

/blog/categories-list 일 때:

/blog/contact 일 때:

/auth/sign-up 일 때:

/auth/login 일 때:

로그인, 회원가입 폼 코드를 첨부해 두겠습니다.

{% extends 'base.html' %}

{% block title %}Login{% endblock %}

{% block header %}
    <header class="masthead" style="background-image: url('{{ url_for('static', filename='assets/img/login-bg.jpg') }}')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="site-heading">
                        <h1>Login</h1>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endblock %}

{% block content %}

    <!-- Main Content-->
    <main class="mb-4">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="my-5">
                        <form id="contactForm" method="POST">
                            <div class="form-floating">
                                <input class="form-control" id="email" type="text" placeholder="Enter your email..." name="email"
                                       data-sb-validations="required"/>
                                <label for="email">Email</label>
                                <div class="invalid-feedback" data-sb-feedback="email:required">A Email is required.</div>
                            </div>
                            <div class="form-floating">
                                <input class="form-control" id="password" type="password" placeholder="Enter your password..." name="password"
                                       data-sb-validations="required,email"/>
                                <label for="password">Password</label>
                                <div class="invalid-feedback" data-sb-feedback="password:required">An password is required.
                                </div>
                                <div class="invalid-feedback" data-sb-feedback="password:required">Email is not valid.</div>
                            </div>
                            <br/>
                            <!-- Submit success message-->
                            <!---->
                            <!-- This is what your users will see when the form-->
                            <!-- has successfully submitted-->
{#                            <div class="d-none" id="submitSuccessMessage">#}
{#                                <div class="text-center mb-3">#}
{#                                    <div class="fw-bolder">Form submission successful!</div>#}
{#                                    To activate this form, sign up at#}
{#                                    <br/>#}
{#                                    <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>#}
{#                                </div>#}
{#                            </div>#}
                            <!-- Submit error message-->
                            <!---->
                            <!-- This is what your users will see when there is-->
                            <!-- an error submitting the form-->
{#                            <div class="d-none" id="submitErrorMessage">#}
{#                                <div class="text-center text-danger mb-3">Error sending message!</div>#}
{#                            </div>#}
                            <!-- Submit Button-->
                            <button class="btn btn-primary text-uppercase" id="submitButton" type="submit">
                                LOGIN
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

{% endblock %}

회원가입 코드

{% extends 'base.html' %}

{% block title %}Signup{% endblock %}

{% block header %}
    <header class="masthead" style="background-image: url('{{ url_for('static', filename='assets/img/signup-bg.jpg') }}')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="site-heading">
                        <h1>Sign Up</h1>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endblock %}

{% block content %}

    <!-- Main Content-->
    <main class="mb-4">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="my-5">
                        <form id="contactForm" method="POST">
                            <div class="form-floating">
                                <input class="form-control" id="email" type="text" placeholder="Enter your email..." name="email"
                                       data-sb-validations="required"/>
                                <label for="email">Email</label>
                                <div class="invalid-feedback" data-sb-feedback="email:required">A Email is required.
                                </div>
                            </div>
                            <div class="form-floating">
                                <input class="form-control" id="username" type="text" placeholder="Enter username..." name="username"
                                       data-sb-validations="required"/>
                                <label for="email">Username</label>
                                <div class="invalid-feedback" data-sb-feedback="username:required">A Username is
                                    required.
                                </div>
                            </div>
                            <div class="form-floating">
                                <input class="form-control" id="password1" type="password" name="password1" name="password1"
                                       placeholder="Enter your password..."
                                       data-sb-validations="required,email"/>
                                <label for="password1">Password</label>
                                <div class="invalid-feedback" data-sb-feedback="password:required">An password is
                                    required.
                                </div>
                                <div class="invalid-feedback" data-sb-feedback="password:required">Password is not valid.
                                </div>
                            </div>
                            <div class="form-floating">
                                <input class="form-control" id="password2" type="password" name="password2" name="password2"
                                       placeholder="Enter your password..."
                                       data-sb-validations="required,email"/>
                                <label for="password2">Password Again</label>
                                <div class="invalid-feedback" data-sb-feedback="password:required">Enter your password again!
                                </div>
                                <div class="invalid-feedback" data-sb-feedback="password:required">Password again is not valid.
                                </div>
                            </div>
                            <br/>
                            <!-- Submit success message-->
                            <!---->
                            <!-- This is what your users will see when the form-->
                            <!-- has successfully submitted-->
                            {#                            <div class="d-none" id="submitSuccessMessage">#}
                            {#                                <div class="text-center mb-3">#}
                            {#                                    <div class="fw-bolder">Form submission successful!</div>#}
                            {#                                    To activate this form, sign up at#}
                            {#                                    <br/>#}
                            {#                                    <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>#}
                            {#                                </div>#}
                            {#                            </div>#}
                            <!-- Submit error message-->
                            <!---->
                            <!-- This is what your users will see when there is-->
                            <!-- an error submitting the form-->
                            {#                            <div class="d-none" id="submitErrorMessage">#}
                            {#                                <div class="text-center text-danger mb-3">Error sending message!</div>#}
                            {#                            </div>#}
                            <!-- Submit Button-->
                            <button class="btn btn-primary text-uppercase" id="submitButton" type="submit">
                                Sign Up
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

{% endblock %}