스타트업을 위한 웹 개발 기초/교재

개요

예제와 같은 미니 쇼핑몰을 개발해본다. Django Admin을 통해서 쇼핑몰 컨텐츠를 등록하면, 웹페이지에서 컨텐츠를 전시하고, 사용자가 구매하고, 댓글을 달 수 있게 한다.

기능 목록

학습하게 되는 기술

1단계 : 개발환경 준비에서 Hello World까지

개발 보조도구 설치

커맨드라인 열기

윈도우는 시작 메뉴에서 cmd 실행

맥은 응용프로그램 -> 유틸리티 -> 터미널 실행, 혹은 스포트라이트에서 터미널 검색해서 실행

파이썬 & Django

맥 파이썬 설치

파이썬은 이미 설치되어 있음.

윈도우 파이썬 설치

http://python.org/에서 Python 2.7.5 Windows Installer 다운로드, 설치

커맨드라인에서 다음 명령 실행하면 python을 바로 실행할 수 있다.

setx PATH "%PATH%;C:\Python27;C:\Python27\Scripts"

Django 및 ipython 설치

sudo easy_install pip
sudo pip install ipython readline
sudo pip install django

작업할 디렉토리

mkdir workspace
cd workspce

Django 프로젝트 시작하기

윈도우는 ./manage.py 실행할 때 ./ 생략

django-admin.py startproject minishop
cd minishop
chmod +x manage.py
./manage.py startapp shopping
./manage.py runserver

http://localhost:8000 접속

IPython 갖고 놀기

./manage.py shell

파이썬 모듈 찾기

>>> import dja[tab]
>>> import django.[tab]
>>> import django.short[tab]

Hello World 텍스트로 응답하기

urls.py

urlpatterns = patterns('',
    url(r'^$', 'shopping.views.index'),
)

views.py

def index(request):
    return HttpResponse('Hello World')

Hello World HTML 템플릿으로 응답하기

views.py

def index(request):
    return render_to_response('index.html', locals())

settings.py

INSTALLED_APPS = (
    'shopping',

templates/index.html

<html>
<head>
</head>
<body>
Hello World
</body>
</html>

2단계 : 화면 구성하기

HTML 기초

https://github.com/youngrok/minishop/commit/d72f9a6b57c431702cc3d485bc292a96c947d608

CSS 기초

https://github.com/youngrok/minishop/commit/f9bd78f2beb3b11809d38aa4b053390dffe1c8ed

https://github.com/youngrok/minishop/commit/7cdb60b5255fb2e8d63b2c5fc7253cc6ace9fd46

The Fancy UI 따라하기

https://github.com/youngrok/minishop/commit/df7b2afda7d0de9083ffcd911e9d5db6c171aca2

3단계 : 데이터 다루기

상품 데이터 설계

class Product(models.Model):
    name = models.CharField(max_length=200)
    image = models.URLField()
    price = models.IntegerField()
    description = models.TextField()

sqlite3 데이터베이스

./manage.py syncdb
./manage.py dbshell

>>> .tables
>>> .schema shopping_product

상품 데이터 입력해보기

./manage.py shell

>>> from shopping.models import Product
>>> Product
>>> Product.objects.all()
>>> Product.objects.create(name='Black Playing Cards by Alexander Wang', image='http://cf1.thefancy.com/310/20120214/289415035_d6469f2993ad.jpg', price=65)
>>> Product.objects.all()

./manage.py dbshell

>>> select * from shopping_product;

Django admin

https://github.com/youngrok/minishop/commit/5e4400764d725ec71d283327916cd1b2a0fee4c7

Django admin 접속

상품 실제 데이터 보여주기

https://github.com/youngrok/minishop/commit/17e911916bacc828714debdeaad1e072176fec2a

상품 상세화면

https://github.com/youngrok/minishop/commit/32ff32a5d602890a11580c266d9214378e2d9f91

템플릿의 중복된 코드

https://github.com/youngrok/minishop/commit/3aa2ae288e4044b8c2da0d4ab7b3c10a7adc96ca

로그인

https://github.com/youngrok/minishop/commit/d42cc7f577ffb0d23596230099fde6a84c0810e7

구매

구매 데이터 설계

class Favorite(models.Model):
    user = models.ForeignKey(User)
    product = models.ForeignKey(Product)
    created = models.DateTimeField(auto_now_add=True)

데이터베이스 싱크

./manage.py syncdb

views.py의 favorite에서 구매 데이터 저장

https://github.com/youngrok/minishop/commit/80fb41f087c30579499e4b2811a0ece09827430c

확인해보기

./manage.py shell

>>> from shopping.models import *
>>> f = Favorite.objects.all()
>>> f
>>> f.product.name

구매 목록 보여주기

https://github.com/youngrok/minishop/commit/8fcc932f5404292259199ece9edfa63da3bd18ff

댓글

https://github.com/youngrok/minishop/commit/c4b870ecd0ce81a4d08eca105b4746313c30c84c

4단계 : Deployment & 버전관리

Git 설치

brew install git

Heroku