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
- https://getbootstrap.com/docs/4.5/examples/cover/
- https://getbootstrap.com/docs/4.5/examples/sign-in/
모바일에서도 깔끔하게 출력해주기 위해 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 |