본문으로 바로가기

장고를 활용한 웹사이트 만들기(1)

category Data Science/Python 2016.05.11 01:12

Django 설치에 앞서

Django를 설치하려면 Python이 먼저 설치되어 있어야 합니다.
Python이 설치되어있지 않은 경우 먼저 Python 설치를 보고 python을 설치해주세요.

윈도우 - powershell에서

> pip

유닉스/리눅스 - 터미널에서

$ pip

을 입력했을 때 에러가 나지 않으면 python이 설치된 상태입니다.

Django 설치

플랫폼에 따라서 Django를 설치하는 방법이 다릅니다.

윈도우 - powershell에서

> pip install django

유닉스/리눅스 - 터미널에서

$ pip install django

강의는 python3을 기준으로 진행되므로, python 2.x가 기본으로 설정된 경우(python -V 명령으로 확인 가능)는 pip대신 pip3으로 설치해주세요

Django 프로젝트 만들기

  1. Django 프로젝트 생성
    • 프로젝트를 만들고자 하는 폴더로 이동
    • django-admin startproject <프로젝트이름>
  2. Django 서버 실행
    • 앞에서 생성했던 <프로젝트이름> 디렉토리로 이동
    • python manage.py runserver
  3. Django 서버 접속
    • 웹브라우저(IE, chrome, firefox, safari, opera 등) 실행
    • 주소창에 127.0.0.1:8000 또는 localhost:8000 입력 -> It Worked! 화면이 나오면 성공
  4. Django 서버 중단하기
    • Ctrl+C

? 127.0.0.1은 내 컴퓨터 localhost를 의미하고, 8000은 8000번 포트를 의미합니다.

hello world 출력하기

이 강의에서는 helloworld를 출력하는 app을 만듭니다.

  1. app 만들기
    • 프로젝트 폴더로 이동
    • python manage.py startapp <앱이름>
    • ls 명령어를 치면 <앱이름>이라는 디렉토리가 생성되어 있음
  2. hello world를 출력하는 index 함수 만들기
    • 앞에서 생성한 <앱이름> 폴더로 이동
    • views.py(\프로젝트이름\앱이름\views.py) 수정 - 페이지 요청에 대해 "hello world"라는 httpResponse
  3. 앱에 접근할 조건을 지정하는 함수 만들기
    • \프로젝트명\프로젝트명\urls.py에 urlpatterns 수정
  4. 앞서 생성한 index 함수를 실행할 조건을 지정하는 함수 만들기
    • 앞서 생성한 <앱이름> 폴더로 이동
    • urls.py(\프로젝트이름\앱이름\urls.py) 파일 생성
    • urls.py에 urlpatterns로 index함수를 지정

?
* app - 웹사이트를 기능별로 분류해놓은 단위
* urlpatterns - 서버에 요청이 들어온 경우, 담당자를 지정하는 역할. url(주소, 주소에 접속하면 실행될 명령어)
* include - 앱 접속을 위해 씁니다.

#C\Code\mysite\elections\views.py
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello world")
#C\Code\mysite\mysite\urls.py

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

urlpatterns = [
    url(r'^', include('elections.urls')), #localhost:8000으로 요청이 들어오면 elections.urls로 전달
    url(r'^admin/', include(admin.site.urls)), #app 접속을 위해 include를 씁니다.
]
#C\Code\mysite\elections\urls.py
from django.conf.urls import url
from . import views #.은 현재 폴더(elections)를 의미합니다.

urlpatterns = [
    url(r'^$', views.index), #위의 urls.py와는 달리 include가 없습니다.
]

app과 관련된 정보를 저장할 model

  • 모델클래스는 앱 안의 models.py에 정의합니다.
  • 모델 class는 models.Model을 상속받아야 합니다.
  • 모델 class안의 멤버 변수의 field에 대한 정보는 Field types를 참고해주세요

? django에서 보통 model이름은 대문자로 시작하고, 단수형으로 씁니다.


# C:\Code\mysite\elections\models.py

class Candidate(models.Model):
    name = models.CharField(max_length=10)
    introduction = models.TextField()
    area = models.CharField(max_length=15)
    p


DB를 쓰는 이유 : 프로그램은 종료되는 순간 memory상에서 사라지므로, 계속 데이터를 보존하기 위해 DB를 사용

모델을 DB에 저장하기 위한 준비 과정

  • mysite/settings.py - INSTALLED_APPS 리스트에 elections(앱이름) 추가
  • mysite 폴더로 이동 후 python manage.py makemigrations 입력
  • python manage.py migrate로 DB에 공간 만들기
#C\Code\mysite\mysite\settings.py
...
INSTALLED_APPS = [
    ...,
    'elections' #추가
]
...

admin으로 접속

  1. admin 사용자 만들기
    • 프로젝트 폴더로 이동
    • python manage.py createsuperuser 실행
    • 유저 이름과 email, password 설정
  2. 서버 실행
    • python manage.py runserver
  3. admin으로 접속
    • 브라우저에서 admin:localhost:8000/admin으로 접속
    • 1에서 만든 사용자로 접속

Candidate 등록

  1. app폴더의 admin.py에 model에서 정의한 Candidate를 regist
  2. 브라우저를 새로고침 하면 Candidate가 반영됩니다.
  3. Candidate - ADD CANDIDATE - 내용을 추가하고 SAVE -> object가 추가됩니다.
#C\Code\mysite\elections\admin.py
from django.contrib import admin
from .models import Candidate

admin.site.register(Candidate)

object를 구분하는 방법

  • python에서는 object를 표현하는 문자열을 정의할 때는 __str__메소드를 오버라이딩합니다. 예를 들어 위에서 등록한 Candidate의 이름으로 object를 표현하고 싶은 경우,
#C\Code\mysite\elections\models.py
from django.db import models

class Candidate(models.Model):
    ...
    def __str__(self):
        return self.name #object를 출력하면 name이 보입니다.

로 수정한 후, 브라우저를 새로고침 하면 후보자 이름이 보입니다.

DB에 모델이 저장된 구조

Candidate 테이블에서 각 데이터 필드는 column(열)으로, 각 Candidate의 정보는 row(행)으로 저장되어 있습니다.

데이터에 접근하는 방법

Candidate 테이블에 등록한 정보를 보기 위해서는

#C\Code\mysite\elections\views.py
...
from .models import Candidate #models에 정의된 Candidate를 import 

def index(request):
    candidates = Candidate.objects.all() #Candidate에 있는 모든 객체를 불러옵니다
    str = "" #마지막에 return해 줄 문자열입니다.
    for candidate in candidates:
        str += "{}기호 {}번 ({})<BR>".format(candidate.name, candidate.party_number, candidate.area) #<BR>은 html에서 
다음 줄로 이동하기 위해 쓰입니다.

str += candidate.introduction + "<P>" #<P>는 html에서 단락을 바꾸기 위해 쓰입니다. return HttpResponse(str)

SHELL - 직접 DB에 요청을 하는 다른 방법

shell 실행 방법

운영체제에 따라

  • windows - powershell에서
  • unix/linux - 터미널에서
  1. manage.py가 있는 폴더로 이동 후
  2. python manage.py shell

DB에 요청하기

1. 기본 - 사용할 모델 클래스 import

>>> from elections.models import Candidate

2. 모든 객체 불러오기 - all()

>>> Candidate.object.all()

3. 새 객체 생성하고 저장하기 - Model.save()

>>> new_candidate = Candidate(name = "루비오") #생성만 한 상태. 아직 저장되지 않음
>>> new_candidate.save() #new_candidate가 DB에 저장됨

4. 특정 조건을 만족하는 객체 불러오기 - filter()

>>> no1 = Candidate.object.filter(party_number = 1) #party_number = 1인 객체를 리스트 형태로 return
>>> no1[0].party_number #리스트 형태이기 때문에 index로 접근
>>> no1[0].name

이번 동영상에서 쓰인 script 전체

>>> from elections.models import Candidate
>>> Candidate.object.all()
[<Candidate: 힐러리>, <Candidate: 트럼프>]
>>> new_candidate = Candidate(name = "루비오")
>>> Candidate.object.all() #아직 "루비오"가 DB에 저장되지 않음.
[<Candidate: 힐러리>, <Candidate: 트럼프>]
>>> new_candidate.save() # 이제 "루비오"가 DB에 저장되었습니다
>>> Candidate.object.all()
[<Candidate: 힐러리>, <Candidate: 트럼프>, <Candidate: 루비오>]
>>> no1 = Candidate.object.filter(party_number = 1)
>>> no1
[<Candidate: 힐러리>]
>>> no1[0].party_number
1
>>> no1[0].name
'힐러리'
>>> no1[0].introduction
'미국 최초의 여자 대통령이 되겠습니다.'


1. 서버 실행 - python manage.py runserver

2. 브라우저에서 localhost:8000으로 접속

3. HTML 소스보기

  1. windows

    • Internet Explore :
      1. 마우스 우클릭 - 소스보기
      2. Ctrl + U
    • Chrome :
      1. 마우스 우클릭 - 페이지 소스보기
      2. 상단 메뉴바에 보기 - 소스 또는
      3. Ctrl+U
    • Firefox :
      1. 마우스 우클릭 - 페이지 소스
      2. Ctrl + U
  2. OS X

    • Safari : [Safari - 환경설정 - 고급 - 하단의 메뉴 막대에서 개발자용 메뉴 보기 체크] 필수
      1. 마우스 우클릭 - 페이지 소스보기
      2. Command + Option + I
    • Chrome :
      1. 마우스 우클릭 - 페이지 소스보기
      2. 상단 메뉴바에 보기 - 개발자 정보 - 소스 보기
      3. Command + Option + U
    • Firefox :
      1. 마우스 우클릭 - 페이지 소스
      2. Command + U

4. 템플릿 추가하기

  1. 앱(elecetions) 폴더 아래에 templates 폴더 생성 (C\Code\mysite\elections\template)
  2. templates 폴더 아래 elecetions 폴더 생성(C\Code\mysite\elections\template\elections)
  3. elecetions 폴더 아래 index.html 파일 생성 (C\Code\mysite\elections\template\elections\index.html)
  4. index.html 과 views.py 수정


<!-- C\Code\mysite\elections\template\elections\index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>선거 후보</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <table class="table table-striped">
        <thead>
        <tr>
            <td><B>이름</B></td>
            <td><B>소개</B></td>
            <td><B>출마지역</B></td>
            <td><B>기호</B></td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>가후보</td>
            <td>후보입니다.</td>
            <td>우리나라</td>
            <td>기호1번</td>
        </tr>
        <tr>
            <td>나후보</td>
            <td>후보입니다.</td>
            <td>우리나라</td>
            <td>기호2번</td>
        </tr>
        <tbody>
    </table>
</body>
# C\Code\mysite\elections\views.py

from django.shortcuts import render
from django.http import HttpResponse

from .models import Candidate

def index(request):
    candidates = Candidate.objects.all()
    return render(request, 'elections/index.html')

브라우저를 새로고침 하면 수정이 반영됩니다.

이전 강의 - 템플릿으로 html 불러오기에서는 후보에 대한 정보를 정적으로 보여줬습니다.

이 강의에서는 DB에 있는 정보를 html html로 전달해 후보에 대한 정보를 동적으로 보이는 방법을 설명합니다.

1. views.py에서 DB에 있는 후보 정보를 html에 전달

# C\Code\mysite\elections\views.py

from django.shortcuts import render
from django.http import HttpResponse

from .models import Candidate

def index(request):
    candidates = Candidate.objects.all()
    context = {'candidates' : candidates} #context에 모든 후보에 대한 정보를 저장
    return render(request, 'elections/index.html', context) # context로 html에 모든 후보에 대한 정보를 전달

2. indedx.html에서는 반복문을 돌며 전달받은 후보 정보를 보여줍니다

<!-- C\Code\mysite\elections\template\elections\index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>선거 후보</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <table class="table table-striped">
        <thead>
        <tr>
            <td><B>이름</B></td>
            <td><B>소개</B></td>
            <td><B>출마지역</B></td>
            <td><B>기호</B></td>
        </tr>
        </thead>
        <!-- 이 부분이 바뀌었습니다 -->
        <tbody>
        {% for candidate in candidates %}
        <tr>
            <td> {{ candidate.name }} </td>
            <td> {{ candidate.introduction }} </td>
            <td> {{ candidate.area }} </td>
            <td>기호 {{ candidate.party_number }} 번</td>
        </tr>
        {% endfor %}
        <!-- 여기까지 -->
        <tbody>
    </table>
</body>



댓글을 달아 주세요