前回からの続き。
下記のDjangoチュートリアルでやったことの続きを書いて行きます。
Django Girls Tutorial
今回はurlsからのやったことメモをだらだらと。
urlsの設定 ---------------------------------------------------------------------
mysite/urls.pyを編集(このurlsには各アプリをインポートするだけにして簡潔にする)
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include('blog.urls')),
]
blog/urls.pyを作成編集(blog/view.pyに記述がないのでこの時点ではサーバーが起動しなくなる)
from django.conf.urls import include, url
from . import views
urlpatterns = [
url(r'^$', views.post_list),
]
blog/views.pyの編集
$ vi blog/views.py
def post_list(request):
return render(request, 'blog/post_list.html', {})
テンプレート作成(HTMLファイル)
$ vi blog/templates/blog/post_list.html
<html>
<head>
<title>Django Girls blog</title>
</head>
<body>
<div>
<h1><a href="">Django Girls Blog</a></h1>
</div>
<div>
<p>published: 14.06.2014, 12:14</p>
<h2><a href="">My first post</a></h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<div>
<p>published: 14.06.2014, 12:14</p>
<h2><a href="">My second post</a></h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
</div>
</body>
</html>
サーバを起動して表示を確認
$ python manage.py runserver 192.168.55.2:8000
herokuへ再デプロイ
$ git status # ファイルの更新状態確認
$ git add -A . # 全変更をgitに追加
$ git status
$ git commit -m "Changed the HTML for the site." # commit
$ git push heroku master # herokuへ再デプロイ
クエリセット(Django ORM)
シェル起動
$ python manage.py shell
# Post全データ取得
from blog.models import Post
Post.objects.all()
# Postデータ追加(Postするユーザ情報を取得してから)
from django.contrib.auth.models import User
User.objects.all()
me = User.objects.get(username='admin')
Post.objects.create(author = me, title = 'Sample title', text = 'Test')
# Postデータの絞り込み取得
Post.objects.filter(author=me)
Post.objects.filter(title__contains='title')
# 公開しているPostデータの絞り込み取得
from django.utils import timezone
Post.objects.filter(published_date__lte=timezone.now())
# Postデータの公開フラグ変更
post = Post.objects.get(id=1)
post.publish()
Post.objects.filter(published_date__lte=timezone.now())
# 並び替え
Post.objects.order_by('created_date')
Post.objects.order_by('-created_date')
exit()
モデル→ビュー→テンプレート(HTML)
どのモデルのデータをどのテンプレートに表示させるかビューに記述
ビューの内容を編集
$ vi blog/views.py
from django.shortcuts import render
from django.utils import timezone
from .models import Post
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
return render(request, 'blog/post_list.html', {'posts': posts})
モデルから取得したデータをテンプレートに表示
$ vi blog/templates/blog/post_list.html
<html>
<head>
<title>Django Girls blog</title>
</head>
<body>
<div>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</body>
</html>
再デプロイ
herokuへ再デプロイ
$ git status # ファイルの更新状態確認
$ git add -A . # 全変更をgitに追加
$ git status
$ git commit -m "Added views to create/edit blog post inside the site." # commit
$ git push heroku master # herokuへ再デプロイ
見た目をよくする
Bootstrapの導入
blog/templates/blog/post_list.htmlの<head>に以下を追加
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
静的ファイルの設定
djangogirls/staticディレクトリ追加
mysite/settings.pyに以下を追加
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
htmlファイルとcssの更新
$ vi static/css/blog.css
h1 a {
color: #FCA205;
font-family: 'Lobster';
}
body {
padding-left: 15px;
}
.page-header {
background-color: #ff9400;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
}
.date {
float: right;
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h1 a, .post h1 a:visited {
color: #000000;
}
$ vi blog/templates/blog/post_list.html
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<meta charset="UTF-8">
<title>Django Blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/boots
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/boots
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ex
</head>
<body>
<div class="page-header">
<h1><a href="/">Django Blog</a></h1>
</div>
{% for post in posts %}
<div class="content container">
<div class="row">
<div class="col-md-8">
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</body>
</html>
ほぼコーディングなしで、
ブログっぽいのができちゃいました。
チュートリアルはもう少し続きますが、
メモが・・ここまでしか残っていなかった・・。
気が向いたら続きをやりたいと思います。
ぜひ、上にリンクを張っているので、やってみることをおすすめします。
コマンドラインの説明などもあって、初心者に優しいチュートリアルです。
中途半端ですが、
以上です。
0 件のコメント:
コメントを投稿