wisePocket

[Flask] Flask framework 미니프로젝트(project bucket) 03 (Frontend 기초 테스트 View 페이지 작성 및 모듈화) 본문

Python&Flask Tutorials, AWS EB/Flask_project_bucket

[Flask] Flask framework 미니프로젝트(project bucket) 03 (Frontend 기초 테스트 View 페이지 작성 및 모듈화)

ohnyong 2023. 7. 14. 19:32

개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성

CSS, JavaScript 모듈화(Static) 및 참조 링크 설정

 

1. HTML

경로 : (project_root)bucket/templates/index.html

Body는 Header / Content 로 구분

  • Header : 타이틀(title), 백그라운드 이미지
  • Content : 
    • input(#bucket) 텍스트 입력 박스 / 기록하기 버튼 onclick "save_bucket()" 함수 호출
    • div(#bucket-list)>li*n 형태로 에 추후 save_bucket() 함수의 결과가 1행씩 추가될 예정(이전 프로젝트까지 Footer로 표현했지만 사실상 Footer의 역할은 하지 않기 때문에 content로 포함시킴)
  • Footer : None
<!-- HTML Doctype선언문 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 인코딩 캐릭터셋 UTF-8지정 -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 부트스트랩 css 참조 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <!-- jquery 참조 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 부트스트랩 javascript 참조 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <!-- Google Font 참조 -->
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />
    <!-- JS 모듈화 참조 -->
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <!-- CSS 모듈화 참조 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <title>인생 버킷리스트</title>

</head>

<body>
    <!-- Header -->
    <div class="mypic">
        <h1>나의 버킷리스트</h1>
    </div>

    <!-- Content -->
    <div class="mybox">
        <div class="mybucket">
            <input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요" />
            <button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
        </div>
    </div>
    <div class="mybox" id="bucket-list">
        <li>
            <h2>✅ 호주에서 스카이다이빙 하기</h2>
        </li>
    </div>
    
    <!-- Footer -->
    <!-- NONE -->
</body>

</html>

2. CSS

  • (project_root)mars/static/css/style.css로 분리 모듈화
  • Google Fonts "Gowun Dodum" 글씨체 전체 적용
  • Image 배경 어둡게 적용, 높이 200px고정
  • Content부분인 .mybox에 하늘색 테두리 그림자 효과 적용
  • 버킷리스트 목록으로 나타날 li>h2태그에 줄로 구분될 수 있도록 line-through 적용
  • 기타 요소별 디자인은 index.html에 참조된 Bootstrap 테마 사용
* {
    font-family: "Gowun Dodum", sans-serif;
}

.mypic {
    width: 100%;
    height: 200px;

    background-image: linear-gradient(0deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)),
        url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
    background-position: center;
    background-size: cover;

    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mypic>h1 {
    font-size: 30px;
}

.mybox {
    width: 95%;
    max-width: 700px;
    padding: 20px;
    box-shadow: 0px 0px 10px 0px lightblue;
    margin: 20px auto;
}

.mybucket {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.mybucket>input {
    width: 70%;
}

.mybox>li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;
    min-height: 48px;
}

.mybox>li>h2 {
    max-width: 75%;
    font-size: 20px;
    font-weight: 500;
    margin-right: auto;
    margin-bottom: 0px;
}

.mybox>li>h2.done {
    text-decoration: line-through;
}

3. JavaScript

  • (project_root)bucket/static/js/script.js로 분리 모듈화
  • show_bucket() 함수는 $(document).ready()를 통해 View 페이지가 생성 될 때 바로 실행되며
  • localhost:5001/bucket URL로 GET 요청을 보낸다.
  • (->백엔드가 수신-> /bucket URL의 GET 요청을 응답하는 메서드가 실행되고 결과가 반환된다.)
  • 반환 받은 데이터를 json으로 변환시켜 알림창에 보여준다.
// [Read]
$(document).ready(function () {
    show_bucket();
});
function show_bucket() {
    fetch('/bucket').then(res => res.json()).then(data => {
        console.log(data)
        alert(data["msg"]);
    })
}

// [Create]
function save_bucket() {
    let formData = new FormData();
    formData.append("sample_give", "샘플데이터");

    fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
        alert(data["msg"]);
        window.location.reload();
    });
}

View 페이지 화면 상태(테스트용 하드 코딩 상태)

 

해당 프로젝트는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Flask_project_bucket

 

GitHub - yzpocket/Flask_project_bucket

Contribute to yzpocket/Flask_project_bucket development by creating an account on GitHub.

github.com

 

저작자표시 비영리 변경금지

'Python&Flask Tutorials, AWS EB > Flask_project_bucket' 카테고리의 다른 글

[Flask] Flask framework 미니프로젝트(project bucket) 05 (Backend 기초 테스트 POST 요청 및 응답)  (0) 2023.07.14
[Flask] Flask framework 미니프로젝트(project bucket) 04 (Backend 기초 테스트 GET 요청 및 응답)  (0) 2023.07.14
[Flask] Flask framework 미니프로젝트(project bucket) 02 (프레임워크 및 라이브러리 설치)  (0) 2023.07.14
[Flask] Flask framework 미니프로젝트(project bucket) 01 (초기 환경 구축)  (0) 2023.07.14
[Flask] Flask framework 미니프로젝트(project bucket) 00 (개요)  (0) 2023.07.14
'Python&Flask Tutorials, AWS EB/Flask_project_bucket' Related Articles more