COVID-19-REPORT . 01 - 기본 설정

코딩공부/COVID-19-REPORT

COVID-19-REPORT . 01 - 기본 설정

integerJI 2020. 8. 9. 16:21

COVID-19-REPORT (위치 기록 반응형 웹)

결과물

프로젝트 구조

app - 프로젝트의 메인 화면, 위치 기록을 관리한다.
project - 메인 프로젝트
user - 사이트를 이용할 회원을 관리한다.

project와 app 만들기

https://integer-ji.tistory.com/202

내가 쓰려고 만든 project / app 빨리만들기

디폴트 vscode에 폴더 불러오기 + bash 터미널 window >>> python -m venv myvenv mac >>> python3 -m venv myvenv mac은 python2가 기본으로 깔려있어 python3로 따로 설치 * 명령어 바꿧다면 python으로 해도..

integer-ji.tistory.com

modes.py

위치 기록을 관리할 app/modes.py입니다.

input_user - 위치를 기록한 user를 저장합니다.
input_report - 위치를 기록할 때의 추가 기록 사항입니다. default로는 "비어있음"이 입력됩니다.
input_date - 날짜를 기록합니다. 시간은 따로 timezone을 사용하지 않습니다. (유연한 filter을 사용하기 위해)
input_time - 시간을 기록합니다.
input_lat - 위도를 기록합니다. DecimalField를 사용하여 max_digits(허용되는 최대 숫자 크기)를 6으로 decimal_places(숫자와 함께 저장할 소수 자릿수)를 6자리까지 허용합니다.
input_lon - 경도를 기록합니다.

bootstrap sample, css

모바일에서도 깔끔하게 출력해주기 위해 bootstrap의 cover과 sign-in sample를 기본 틀로 사용하여 프로젝트를 진행합니다.

css는 크게 해당 sample들의 bootstrap.css, cover.css, signin.css 3개를 사용합니다.

bootstrap sample 적용하는 방법

https://integer-ji.tistory.com/204

django 부트스트랩 샘플 적용하기

django 부트스트랩 샘플 적용하기 부트스트랩 샘플을 적용해 보도록 하겠습니더 기본 셋팅 https://integer-ji.tistory.com/202 >> python -m venv myvenv mac >>> python3 -m venv myvenv mac은 python2가 기..

integer-ji.tistory.com

url 관리

# project/urls.py

from django.contrib import admin
from django.urls import path, include
import user.views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', user.views.signin, name='signin'),
    path('app/', include('app.urls')),
    path('user/', include('user.urls')),
]

project의 url입니다. 홈페이지의 메인 페이지는 signin 페이지입니다.

# app/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('index/', views.index, name='index'),
    path('list/', views.list, name='list'),
    path('report/', views.report, name='report'),
    path('getApi/', views.getApi, name='getApi'),
    path('apiTest/', views.apiTest, name='apiTest'),
    path('mapTest/', views.mapTest, name='mapTest'),
]

app/urls.py

apiTest와 mapTest는 test를 하기 위해 만들었으며 해당 프로젝트와는 관련이 없습니다.

# user/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('signup/', views.signup, name='signup'),
    path('signin/', views.signin, name='signin'),
    path('signout/', views.signout, name='signout'),
]

user/urls.py

url 관리하기

https://integer-ji.tistory.com/95

[django 실습] 게시판 만들기 - 템플릿 상속, url 관리하기

[django] python django 게시판 만들기 - 템플릿 상속 템플릿 상속을 이용해 중복 코드를 한 번에 관리해 준다. 추가적으로 url도 app별로 묶어 관리를 해준다. model, admin 설정 : https://integer-ji.tistory...

integer-ji.tistory.com

templates 상속

템플릿은 총 3개입니다. base.html, mainBase.html, signBase.html
base.html은 모든 html에서 사용할 공통 코드들입니다. bootstrap.css, title, favicon 등을 관리합니다.

{% load static %}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>COVID-19-REPORT</title>

    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    
        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>    

{% block content %}
{% endblock %}

mainBase.html은 main화면에서는 cover.css를 사용해야 하기 때문에 cover.css만 가져옵니다. 기존 base.html을 상속받아 그 아래에 다시 한번 block를 이용해 감싸줍니다.

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Custom styles for this template -->
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/cover/">
<!-- Custom styles for this template -->
<link href="{% static 'css/cover.css' %}" rel="stylesheet">
</head>
{% block maincontent %}
{% endblock %}
{% endblock %}

signBase.html main과 마찬가지로 signin.css만 가져옵니다.

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Custom styles for this template -->
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sign-in/">
<!-- Custom styles for this template -->
<link href="{% static 'css/signin.css' %}" rel="stylesheet">
</head>
{% block signcontent %}
{% endblock %}
{% endblock %}

templates 상속 두 번 하기

https://integer-ji.tistory.com/248

django template extends multiple / django 템플릿 상속 두번하기

완성되어가는 다음 프로젝트의 TIME catcher입니다. 소스를 짜면서 상단 navbar은 template을 상속받아 공통부분으로 쉽게 작업하였습니다. 하지만 좌측 side바도 똑같은 상속이 필요한 상황.. extends는 ��

integer-ji.tistory.com

저작자표시

'코딩공부 > COVID-19-REPORT' 카테고리의 다른 글

covid-19-report 현재까지 사용하며 수정해야할 점 (0)	2020.08.28
COVID-19-REPORT . 04 - 리스트 가져오기 (0)	2020.08.14
COVID-19-REPORT . 03 - 지도 API 호출, 위치 저장하기 (0)	2020.08.13
COVID-19-REPORT . 02 - 로그인, 회원가입 (0)	2020.08.11
COVID-19-REPORT . 00 - 프로젝트 소개 (0)	2020.08.09

현재글COVID-19-REPORT . 01 - 기본 설정

Today :
Yesterday :

정수의 코닥코닥