대안언어축제2006 BoF 세션

개괄적 설명은 http://altlang.org/fest/EnglishStudyWithDjango

발표당일 공개할 내용들을 이곳에 정리

TableOfContents

개요

고전적인 DB기반 웹어플리케이션 만들기

1. 데이터베이스 설계
2. create db, create table
3. list, detail, insert, update, delete programming
4. mixed code with HTML design

Django에서는

1. Model
2. URL
3. View
4. Template

Django 의 주요 특징

1. Object-relational mapper, Dynamic database access API
2. Automatic admin interface
3. Elegant URL design
4. Powerful, extensible and designer-friendly template language to separate design, content and python code.
5. Cache system
6. Internationalization

실습 참고사항

전체 실습 단계별로 모두 버전관리가 되어 있습니다. 버전관리는 [http://biohackers.net/wiki/Mercurial Mercurial]을 이용합니다. 실습 방법은 다음 세가지중 하나를 선택하셔서 하시면 됩니다.

1. 직접 코드를 작성하면서 따라간다.
2. Mercurial 을 설치하고, revision별로 업데이트 받으면서 따라간다.
3. 첨부된 eswd-XX.zip 파일을 그때그때 압축해제/복사 하여 따라간다.

첨부된 파일의 사용방법은 압축을 해제하면, eswd-XX 디렉토리가 생성됩니다. 그 디렉토리 하위의 모든 내용들을 작업하고 있는 디렉토리(c:/work/altlang )에 복사하시면 됩니다.

Mercurial server URLs

1. http://biohackers.net/hg/eswd

2. http://192.168.1.xx (BoF 당시 발표자 PC)

Mercurial 사용법

C:\work>mkdir hg
C:\work\hg>mkdir altlang
C:\work\hg\altlang>hg init
C:\work\hg\altlang>hg pull http://biohackers.net/hg/eswd
C:\work\hg\altlang>hg revert -r 0
C:\work\hg\altlang>hg revert -r 1

실습 진행

프로젝트, 사이트 생성

altlang 프로젝트(사이트)생성

C:\work>django-admin.py startproject altlang
C:\work>cd altlang
C:\work\altlang>dir /b
manage.py
settings.py
urls.py
__init__.py

eswd 어플리케이션생성

C:\work\altlang>django-admin.py startapp eswd
C:\work\altlang>dir /b eswd
models.py
views.py
__init__.py

Database 연결확인 (Sqlite DB와 Django와 동기화)

C:\work\altlang>manage.py syncdb
 ...
django.core.exceptions.ImproperlyConfiguorange: You haven't set the DATABASE_ENGINE setting yet.
 ...

데이터베이스 설정

--- a/settings.py       Wed Aug 30 16:14:44 2006 +0900
+++ b/settings.py       Wed Aug 30 16:17:17 2006 +0900

-DATABASE_ENGINE = ''
-DATABASE_NAME = ''
+DATABASE_ENGINE = 'sqlite3'
+DATABASE_NAME = r'c:\work\altlang\gmp.db'

@@ -74,4 +74,6 @@ INSTALLED_APPS = (
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.sites',
+    'django.contrib.admin', # for Admin interface
+    'eswd', # Out English Study With Django App.
 )

Django 기본 DB 생성

C:\work\altlang>manage.py syncdb

관리자 인터페이스 URL 설정

--- a/urls.py   Wed Aug 30 16:21:50 2006 +0900
+++ b/urls.py   Wed Aug 30 16:35:30 2006 +0900
-#     (r'^admin/', include('django.contrib.admin.urls')),
+    (r'^admin/', include('django.contrib.admin.urls')),

그리고, http://localhost/admin/ 에서 관리자 인터페이스 확인

모델링에서 동작확인까지

작성하고자 하는 영어받아쓰기 웹어플리케이션을 위해, GMP 홈페이지 (http://www.kbs.co.kr/radio/coolfm/gmp/study/bbw/index.html )에서 뉴스 구조 확인

기본적인 모델링 eswd/models.py

   1 class News(models.Model):
   2     pub_date = models.DateField()
   3     content = models.TextField(maxlength=1000)
   4     translation = models.TextField(maxlength=1000)
   5     mp3_url = models.URLField()

syncdb 후 admin 페이지에서 확인. 모델의 기본 출력은 str 을 추가함으로써 바뀌여진다.

웹어플리케이션의 기본구조는 뉴스목록(news_list) 페이지와 뉴스상세(news_detail) 페이지이다. 우선, urls.py 에 news_list 를 보여줄 URL 추가한다.

news_list URL이 요청되었을 때 보여질 view를 eswd/views.py 에 view 추가한다.

HTML 템플릿 적용을 위해 template를 만든다. mkdir eswd/templates 후에, eswd/templates/news_list.html 템플릿 추가

이제 모델의 내용을 보여줘야 한다. 쉘에서 모델객체의 동작 확인

C:\work\altlang>manage.py shell
>>> from eswd.models import News
>>> News.objects.all()
[<News: news on 2006-05-19>, <News: news on 2006-05-24>]
>>> n = News.objects.get(id=1)
>>> n
<News: news on 2006-05-19>
>>> n.pub_date
datetime.date(2006, 5, 19)
>>> n.content
'The US moved today to restore full diplomatic relations with Libya. The two countries have not had formal ties since 1980.'
>>> n.mp3_url
'http://cgi.kbs.co.kr/bbs/ezboard.cgi?db=2Fgmpops5&action=down&dbf=1408&downfile=friday-re.mp3&/friday-re.mp3'

위의 방법처럼, 뷰에 모델을 추가한다. 그리고, 화면에 출력되는가 확인한다.

이번에는 뉴스상세(news_detail)를 구현한다. 뉴스목록에서 곧바로 링크를 만들고, 뷰와 연결한다. news_detail 뷰를 생성한다.

news_detail 템플릿에 HTML embed 테그를 이용하여, MP3 파일을 연결한다.

news_detail 템플릿에 content, translation을 추가한다.

difflib, Ajax를 이용한 받아쓰기 체크

아무래도, 받아쓰기인데, 답이 화면에 나와있으면 곤란하다. 자바스크립트로 content, translation 을 숨기고, toggle로 볼 수 있도록 한다.

news_detail 템플릿에 받아쓰기를 위한 폼, textarea를 추가한다.

받아쓰기가 맞는지 체크하는 기능은 difflib, Ajax를 이용하기로 하자.

체크를 위한 자바스크립트 추가

function show_check_result() {
    if (req.readyState == 4)
        document.getElementById('check_result').innerHTML = req.responseText;
}

function check_dictation(check_url, answer_textarea) {
    answer = document.getElementById(answer_textarea);
    answer = escape(answer.value);

    try {
        req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) {
            req = false;
        }
    }
    if (!req && typeof XMLHttpRequest != 'undefined')
        req = new XMLHttpRequest();

    req.open("POST", check_url, true);
    req.onreadystatechange = show_check_result;
    req.send('answer=' + answer);
}

Ajax 기능이 제대로 동작하는가 확인한다. 체크버튼을 클릭했을때 textarea의 내용을 그대로 출력하기

difflib 을 이용하여, 실제 체크기능을 구현한다.

여기까지 하고 휴식시간을 갖는다. 못 따라온 사람들을 위한 특훈

Expression 모델의 추가

각 뉴스별 주요 표현들을 같이 보여주면 좋겠다. 뉴스하나당 여러개의 Expression이 존재한다. 관계형데이터베이스 one to many 구조. 외부키 기능을 이용하여 Expression 모델을 구현한다.

   1 class Expression(models.Model):
   2     word = models.CharField(maxlength=30, core=True)
   3     meaning = models.CharField(maxlength=30)
   4     news = models.ForeignKey(News, edit_inline=models.TABULAR)
   5 
   6     class Admin: pass
   7 
   8     def __str__(self):
   9         return "%s: %s" % (self.word, self.meaning)

syncdb 후, admin에서 직접 입력한다. 외부키로 연결된 데이터는 연결하는 모델, 연결되는 모델에서 모두 입력이 가능하다.

news_detail template에 추가한 모델을 보여준다.

웹디자인 적용

지금까지 어느정도 기본 기능들이 구현된 듯 하다. 화면 및 주메뉴 부분을 체계화해서 보여주자. 일단 웹어플리케이션의 주 메뉴는 다음 세가지.

• news list
• news random
• 로그인

기본적인 화면 구성과 메뉴를 보여주는 base.html 작성. 그리고, extends와 block 기능을 이용하여, 모든 템플릿에 적용

랜덤 출력 메뉴를 만든김에 랜덤 출력기능 추가한다. View에서 해당 기능을 구현한다. ( HttpResponseorangeirect를 쓰는 것이 좋다.)

로그인 기능 구현

사용자별로 기록표를 만들고 싶다. 그러자니, 로그인 기능이 필요하다. URL에 login/logout 을 추가하고, 기본적으로 로그인에 사용되는 템플릿 login.html 을 추가한다.

메인메뉴는 로그인상태에 따라 메뉴항목을 바꾸어 표시한다. 로그인되었을 때는 logout 메뉴를. 로그아웃상태에서는 login 메뉴를 보여준다.

user를 템플릿에서 이용하기 위해서는 RequestContext로 context를 수정해야 한다.

개인별 기록표

이제 개인별 기록을 만들어보자. 기록방법은 "check"버튼을 클릭했을 때 그 정보를 남기는 것으로 한다.

Record 모델을 만든다.

   1 class Record(models.Model):
   2     user = models.ForeignKey(User)
   3     news = models.ForeignKey(News)
   4     answer = models.TextField(maxlength=1000)
   5     is_correct = models.BooleanField()
   6 
   7     class Admin: pass
   8 
   9     def correct_mark(self):
  10         return self.is_correct and 'O' or 'X'

syncdb 로 테이블을 생성하고, 실제 체크했을때 Record 생성하는 기능을 view에 추가한다. 체크했을때 제대로 Record가 생성되는지 관리자화면에서 확인해본다.

개인별 레코드를 보여주는 기능을 만든다. 로그인 된 상태일 때, 개인별 레코드를 보여주는 메뉴 링크를 추가한다. 그리고, 뉴스별로 groupby 하여 보여준다. groupby 는 템플릿 기능중에 regroup을 이용한다.

자, 이로서 로그인/아웃 기능도 동작하고, 개인별 기록까지도 보여주는 영어뉴스 받아쓰기 사이트가 완성되었다.

기타 정보

서비스를 위해 추가로 해야할 일들

1. 데이터 입력 스크립트
2. mod_python 등을 이용한 서비스

http://biohackers.net/wiki/EnglishStudyWithDjango 에서 프로젝트가 계속 진행됩니다. 같이 참여하고 싶은 분들의 참가를 환영합니다.

에필로그

청중들로 부터, 추가로 구현했으면 하는 아이디어를 접수 받는다. 쉽게 시연 가능한 것이라면, 그자리에서 바로 구현하여 보여주고, 그렇지 않은 경우, 해결방법을 제시한다.

코멘트

(코멘트를 남겨주세요)