웹사이트 검색

Django Framework를 사용하여 모바일 친화적인 웹 애플리케이션을 만드는 방법 - 3부

“이 문서는 Django 최신 버전으로 수정 및 업데이트되었습니다 - 2016년 5월 ”

이 시리즈의 1부에서는 가상 환경에서 Django를 설치하고 구성하는 방법을 배웠으며 첫 번째 프로젝트의 뼈대를 만들었습니다.

그런 다음 파트 2에서 게시물 개체에 대한 애플리케이션과 모델을 만들었고 나중에 데이터베이스로 마이그레이션했습니다. 마지막으로 새로 생성된 애플리케이션을 Django 관리 사용자 인터페이스에 통합하는 방법을 보여주었습니다.

이 문서는 Django 시리즈의 일부입니다.

가상 환경으로 Django 웹 프레임워크 설치 및 구성 – 1부

Python 기본 사항 검토 및 Django를 사용하여 첫 번째 웹 애플리케이션 만들기 – 2부

이 마지막 가이드에서는 UI를 사용하여 애플리케이션에 액세스하는 방법과 모든 종류의 장치에서 모바일 친화적으로 만드는 방법에 대해 설명합니다. 이제 시작하겠습니다.

Django 관리 인터페이스를 통해 객체 생성

Post 유형의 객체를 생성하기 위해(이 시리즈의 2부에서 정의한 모델임을 기억하세요) Django 관리 인터페이스를 사용합니다.

외부 myfirstdjangoproject 디렉터리에서 다음 명령을 실행하여 Django 내장 웹 서버가 포트 8000(또는 선택한 다른 포트)에서 실행되고 있는지 확인하세요.


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

이제 웹 브라우저를 열고 http://ip-address:8000/admin을 가리킨 다음 이전 기사에서 설정한 자격 증명을 사용하여 로그인하고 게시물 작성을 시작합니다(다시 말하지만, Post 유형의 개체를 생성하고 관련 데이터를 기본 데이터베이스에 삽입합니다.

이 과정을 2~3회 반복하세요.

몇 개의 게시물을 생성한 후 웹 브라우저를 사용하여 게시물을 표시하려면 무엇을 해야 하는지 살펴보겠습니다.

우리의 초기 견해

첫 번째 보기(~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py)는 모든 Post 개체를 필터링하고 whenPublished 값이 있는 개체를 반환하는 일을 담당합니다. 은 whenPublished 내림차순으로 정렬된 현재 날짜 및 시간(whenPublished__lte=timezone.now())보다 작거나 같습니다. 이는 ' 최신순'.

이러한 개체는 편리하게 post라는 이름의 변수에 저장되고 다음 섹션에서 볼 수 있듯이 HTML에 삽입되도록 반환(allposts로 식별됨)됩니다.


from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
        posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
        return render(request, 'myblog/posts.html', {'allposts': posts})

마지막으로 위의 whenPublished__lte에 있는 이중 밑줄은 데이터베이스 필드 (whenPublished)를 필터 또는 작업(lte=less than)에서 분리하는 데 사용됩니다. 또는 같음).

초기 보기를 정의한 후에는 관련 템플릿에 대해 작업해 보겠습니다.

첫 번째 프로젝트를 위한 템플릿 만들기

이전 섹션에 제공된 지시문과 경로에 따라 초기 템플릿을 myblog/templates/myblog에 저장합니다. 즉, templates라는 디렉터리와 myblog라는 하위 디렉터리를 만들어야 합니다.


cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog

posts.html 템플릿을 호출하고 여기에 다음 코드를 삽입합니다. jQuery, Bootstrap, FontAwesome 및 Google 글꼴에 대한 온라인 참조가 추가되고 있음을 알 수 있습니다.

또한 HTML 내부의 중괄호 안에 Python 코드를 포함했습니다. Post 유형의 모든 개체에 대해 제목, 게시 날짜, 작성자, 마지막으로 텍스트가 표시됩니다. 마지막으로 빨간색으로 myblog/views.py를 통해 반환된 개체에 대한 참조를 만드는 것을 볼 수 있습니다.

좋습니다. posts.html 파일은 다음과 같습니다.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
    <style>
      .title {
        font-family: 'Indie Flower', serif;
        font-size: 30px;
        color: #1E90FF;
      }
      h1 {
        font-family: 'Pacifico', serif;
        font-size: 45px;
        color: #1E90FF;
      }
    </style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
    <div>
        <div class="title">{{ post.title }}</div>
        <strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
        <p>{{ post.text|linebreaks }}</p>
    </div>
{% endfor %}
</div>
</body>
</html>

위의 템플릿에서 줄 바꿈 필터는 일반 텍스트의 줄 바꿈을 상응하는 HTML(
 또는

)로 바꾸는 데 사용됩니다. ) 단락 구분을 사용하여 각 게시물의 형식을 적절하게 지정합니다.

다음으로, 애플리케이션의 URL과 데이터를 반환하는 해당 뷰 간의 매핑을 설정해야 합니다. 이렇게 하려면 myblog 내에 다음 내용이 포함된 urls.py라는 파일을 만드세요.


from django.conf.urls import url
from . import views
urlpatterns = [
    url(r'^$', views.posts, name='posts'),
]

r'^$'에 대해서는 좀 더 설명이 필요합니다. 선행 r은 Django에게 작은따옴표 안의 문자열을 정규식으로 처리하도록 지시합니다.

특히 r'^$'는 빈 문자열을 나타내므로 브라우저가 http://ip-address:8000(다른 것은 없음)을 가리키면 views.py(이전 섹션 참조) 내의 posts 변수에 의해 반환된 데이터는 홈페이지에 표시됩니다.

마지막으로 블로그 애플리케이션의 urls.py 파일(~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py)을 기본 프로젝트의 urls.py(~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):


from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'', include('myblog.urls')),
]

그런 다음 웹 서버를 시작하겠습니다.


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

이제 이전에 생성한 게시물 목록을 볼 수 있습니다.

Bootstrap 덕분에 더 작은 장치에서도 뛰어난 시각화를 얻을 수 있습니다.

합산

이제 이 문서와 이 시리즈 전체에서 다룬 개념을 검토해 보겠습니다.

1. 각 모델은 개체를 정의하고 데이터베이스 테이블에 매핑되며, 해당 필드의 필드는 해당 개체의 속성에 매핑됩니다. 반면에 템플릿은 뷰에서 반환된 데이터가 표시되는 사용자 인터페이스를 정의합니다.

요약이라는 필드를 게시물 개체에 추가하여 모델을 수정한다고 가정해 보겠습니다. 여기에 각 게시물에 대한 선택적 간략한 설명이 저장됩니다. myblog/models.py에 다음 줄을 추가해 보겠습니다.

summary = models.CharField(max_length=350, blank=True, null=True)

이전 기사에서 배운 것처럼 변경 사항을 데이터베이스로 마이그레이션해야 합니다.


python manage.py makemigrations myblog
python manage.py migrate myblog

그런 다음 관리 인터페이스를 사용하여 게시물을 편집하고 각 게시물에 간략한 요약을 추가하세요. 마지막으로 템플릿(posts.html)에서 다음 줄을 바꿉니다.

<p>{{ post.text|linebreaks }}</p>

~와 함께

<p>{{ post.summary }}</p>

변경 사항을 보려면 홈페이지를 새로 고치세요.

2. 보기 함수는 HTTP 요청을 받아 HTTP 응답을 반환합니다. 이 문서에서는 views.py의 def post(request)가 기본 데이터베이스를 호출하여 모든 게시물을 검색합니다. 제목에 ansible이라는 단어가 포함된 모든 게시물을 검색하려면 교체해야 합니다.

posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')

~와 함께

posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')

웹 애플리케이션의 애플리케이션 로직에서 사용자 인터페이스를 분리함으로써 Django는 앱 유지 관리 및 에스컬레이션 작업을 용이하게 합니다.

3. 이 시리즈에 제공된 지침을 따랐다면 프로젝트 구조는 다음과 같아야 합니다.


myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0001_initial.pyc
│   │   ├── __init__.py
│   │   └── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── templates
│   │   └── myblog
│   │       └── posts.html
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── views.py
│   └── views.pyc
└── myfirstdjangoproject
    ├── __init__.py
    ├── __init__.pyc
    ├── settings.py
    ├── settings.pyc
    ├── urls.py
    ├── urls.pyc
    ├── wsgi.py
    └── wsgi.pyc

위 목록이 브라우저에 올바르게 표시되지 않는 경우 다음 명령 출력의 스크린샷은 다음과 같습니다.


tree myfirstdjangoenv/myfirstdjangoproject

요약

비록 이 모든 개념이 처음에는 약간 겁이 날 수도 있지만, Django는 그것에 익숙해지기 위해 필요한 모든 노력을 기울일 가치가 충분히 있다고 확신합니다.

이 뛰어난 웹 프레임워크를 소개하기 위해 이 시리즈에서 사용한 예가 귀하가 더 많은 것을 배우도록 동기를 부여하기를 바랍니다. 그렇다면, 공식 Django 문서(지속적으로 최신 상태로 유지됨)가 시작하기에 가장 좋은 곳입니다.

Django에는 우리가 일련의 기사에서 적절하게 다룰 수 있는 것보다 훨씬 더 많은 것이 있다는 것을 확신할 수 있으므로 자유롭게 탐색하고 실습을 통해 배우십시오!

아래 양식을 사용하여 질문이나 제안 사항이 있으면 언제든지 메모를 남겨주세요.