Title:
스타트업을 위한 웹 개발 기초/교재
|
edited by
Youngrok Pak
at
12 years, 3 months ago.
<h2>개요</h2>
<p><a href="http://minishop.ecolemo.com">예제</a>와 같은 미니 쇼핑몰을 개발해본다. Django Admin을 통해서 쇼핑몰 컨텐츠를 등록하면, 웹페이지에서 컨텐츠를 전시하고, 사용자가 구매하고, 댓글을 달 수 있게 한다.</p>
<h3>기능 목록</h3>
<ul>
<li>회원가입 / 로그인</li>
<li>상품 목록 보기</li>
<li>상품 상세 내역 보기</li>
<li>구매하기</li>
<li>구매내역 보기</li>
<li>댓글</li>
</ul>
<h3>학습하게 되는 기술</h3>
<ul>
<li>HTML / CSS 기초</li>
<li>Python 기초</li>
<li>Django 사용법</li>
<li>Bootstrap 활용</li>
<li>버전 관리</li>
</ul>
<h2>1단계 : 개발환경 준비에서 Hello World까지</h2>
<h3>개발 보조도구 설치</h3>
<ul>
<li><a href="http://www.sublimetext.com/">Sublime Text</a></li>
<li><a href="http://www.mozilla.org/ko/firefox/new/">Firefox</a></li>
<li><a href="http://brew.sh/">Homebrew</a></li>
<li><a href="http://gitx.laullon.com/">GitX</a></li>
</ul>
<h3>파이썬 & Django</h3>
<pre>
sudo easy_install pip
sudo pip install ipython readline
sudo pip install django
</pre>
<h3>작업할 디렉토리</h3>
<pre>
mkdir workspace
cd workspce
</pre>
<h3>Django 프로젝트 시작하기</h3>
<pre>
django-admin.py startproject minishop
cd minishop
chmod +x manage.py
./manage.py startapp shopping
./manage.py runserver
</pre>
<p><a href="http://www.mozilla.org/ko/firefox/new/">http://localhost:8000</a> 접속</p>
<h3>IPython 갖고 놀기</h3>
<pre>
./manage.py shell
</pre>
<p>파이썬 모듈 찾기</p>
<pre>
>>> import dja[tab]
>>> import django.[tab]
>>> import django.short[tab]
</pre>
<h3>Hello World 텍스트로 응답하기</h3>
<p>urls.py</p>
<pre>
urlpatterns = patterns('',
url(r'^$', 'shopping.views.index'),
)
</pre>
<p>views.py</p>
<pre>
def index(request):
return HttpResponse('Hello World')
</pre>
<h3>Hello World HTML 템플릿으로 응답하기</h3>
<p>views.py</p>
<pre>
def index(request):
return render_to_response('index.html', locals())
</pre>
<p>settings.py</p>
<pre>
INSTALLED_APPS = (
'shopping',
</pre>
<p>templates/index.html</p>
<pre>
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
</pre>
<h2>2단계 : 화면 구성하기</h2>
<h3>HTML 기초</h3>
<ul>
<li>h1~h6</li>
<li>a</li>
<li>p</li>
<li>div</li>
<li>table</li>
<li>ul, ol, li</li>
</ul>
<p><a href="https://github.com/youngrok/minishop/commit/d72f9a6b57c431702cc3d485bc292a96c947d608">https://github.com/youngrok/minishop/commit/d72f9a6b57c431702cc3d485bc292a96c947d608</a></p>
<h3>CSS 기초</h3>
<ul>
<li>font, color</li>
<li>inline/block element</li>
<li>content flows, float</li>
<li>box model</li>
<li>css file, style tag</li>
</ul>
<p><a href="https://github.com/youngrok/minishop/commit/f9bd78f2beb3b11809d38aa4b053390dffe1c8ed">https://github.com/youngrok/minishop/commit/f9bd78f2beb3b11809d38aa4b053390dffe1c8ed</a></p>
<ul>
<li><a href="http://getbootstrap.com/">bootstrap</a></li>
</ul>
<p><a href="https://github.com/youngrok/minishop/commit/7cdb60b5255fb2e8d63b2c5fc7253cc6ace9fd46">https://github.com/youngrok/minishop/commit/7cdb60b5255fb2e8d63b2c5fc7253cc6ace9fd46</a></p>
<h3>The Fancy UI 따라하기</h3>
<p><a href="https://github.com/youngrok/minishop/commit/df7b2afda7d0de9083ffcd911e9d5db6c171aca2">https://github.com/youngrok/minishop/commit/df7b2afda7d0de9083ffcd911e9d5db6c171aca2</a></p>
<ul>
<li>네비게이션 바</li>
<li>상품 사진</li>
<li>상품 이름</li>
<li>grid 배열</li>
</ul>
<h2>3단계 : 데이터 다루기</h2>
<h3>상품 데이터 설계</h3>
<pre>
class Product(models.Model):
name = models.CharField(max_length=200)
image = models.URLField()
price = models.IntegerField()
description = models.TextField()
</pre>
<h3>sqlite3 데이터베이스</h3>
<pre>
./manage.py syncdb
./manage.py dbshell
>>> .tables
>>> .schema shopping_product
</pre>
<h3>상품 데이터 입력해보기</h3>
<pre>
./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;
</pre>
<h3>Django admin</h3>
<p><a href="https://github.com/youngrok/minishop/commit/5e4400764d725ec71d283327916cd1b2a0fee4c7">https://github.com/youngrok/minishop/commit/5e4400764d725ec71d283327916cd1b2a0fee4c7</a></p>
<h3>상품 실제 데이터 보여주기</h3>
<p><a href="https://github.com/youngrok/minishop/commit/17e911916bacc828714debdeaad1e072176fec2a">https://github.com/youngrok/minishop/commit/17e911916bacc828714debdeaad1e072176fec2a</a></p>
<ul>
<li>views.py에서 상품 목록 가져오기</li>
<li><a href="https://docs.djangoproject.com/en/1.5/topics/templates/">Django Template</a></li>
<li>index.html에서 가짜 데이터 대신 실제 데이터 보여주기</li>
</ul>
<h3>상품 상세화면</h3>
<p><a href="https://github.com/youngrok/minishop/commit/32ff32a5d602890a11580c266d9214378e2d9f91">https://github.com/youngrok/minishop/commit/32ff32a5d602890a11580c266d9214378e2d9f91</a></p>
<ul>
<li>상세화면 URL 등록: 정규식으로 상품 번호 받기</li>
<li>상품번호로 상품 정보 가져오기</li>
<li>상품 사진, 이름, 설명 보여주기</li>
<li>구매 버튼</li>
</ul>
<h3>템플릿의 중복된 코드</h3>
<p><a href="https://github.com/youngrok/minishop/commit/3aa2ae288e4044b8c2da0d4ab7b3c10a7adc96ca">https://github.com/youngrok/minishop/commit/3aa2ae288e4044b8c2da0d4ab7b3c10a7adc96ca</a></p>
<ul>
<li>django template의 상속 기능</li>
<li>레이아웃 페이지 선언</li>
<li>index.html, show.html에도 적용</li>
</ul>
<h3>로그인 페이지</h3>
<ul>
<li>구매 기능 버튼(Favorite 버튼) URL 등록</li>
<li>views.py에 favorite 등록. 간단하게 'Favorite'이라고 출력</li>
<li><a href="https://docs.djangoproject.com/en/1.5/topics/auth/default/#django.contrib.auth.decorators.login_required">@login_required</a></li>
<li>Favorite 기능을 실행하려면 사용자가 로그인되어 있어야 한다. 로그인이 안되어 있으면 로그인 페이지로 보낸다.</li>
<li>로그인 페이지는 username과 password를 받는다. 계정이 없을 경우 가입할 수 있도록 가입 버튼도 만든다.</li>
</ul>
<h3>로그인 처리</h3>
<ul>
<li>로그인이 완료되면 원래 수행하려던 기능으로 돌아간다.</li>
<li>로그인 여부를 우상단에 표시한다.</li>
<li>로그아웃</li>
</ul>
<h3>구매</h3>
<ul>
<li>구매 데이터 저장</li>
<li>구매 목록 보여주기</li>
</ul>
<h3>댓글</h3>
<ul>
<li>댓글 입력 UI</li>
<li>댓글 저장</li>
<li>댓글 보여주기</li>
</ul>
<h2>4단계 : Deployment & 버전관리</h2>
<h3>Heroku</h3>
WikiNamu