Windows10環境、cursorエディターを使用して、プログラミングチュートリアルさんの動画を勉強しました。
チュートリアル動画を勉強しながらメモをとったものを投稿しました。
忘備録メモです。
--
参考:
【Django入門】自作で簡単なブログを作ってDjangoの1歩を踏み出してみよう ~Djangoチュートリアル~
https://youtu.be/O037g3NOoXY?si=QyhxmLOwsNV2v9az
【Pythonプログラミング入門】Windows PCにPythonをインストールして動かす!
https://www.youtube.com/watch?v=XhbRqItkIYI
Python、Django環境開発
Pythonをインストール
ターミナルから好きなフォルダへ移動
pip install virtualenv コマンドうつ
インストール終わったら
virtualenv my-fisrt-blog-youtube コマンドうつ
仮想環境ができる
作ったフォルダに入る(今回はmy-fisrt-blog-youtube
source Scripts/activate
source
※なぜか怒られた。下記でかいけつ
https://chem-fac.com/venv/
.\Scripts\activate
仮想環境に入れたら、Djangoをインストールする
pip install django
ここで、きちんと入っているのかを確認
pip freeze
下記が入ってたら、Djangoコマンドが打てる様になる
asgiref==3.7.2
Django==5.0.2
sqlparse==0.4.4
tzdata==2023.4
Djangoコマンド最初のプロジェクトを作る
django-admin startproject microblog(最後の文字列は任意
作ったmicroblogに入っていきます
cd microblog
lsで中身を確認。manage.pyがあるか見る。あれば次
アプリケーション作っていきます。
python manage.py startapp blog
ここまで作ったら、任意のエディターを開く。
code . VSコードを開くコマンド
開いたエディターからターミナルを開く
サーバーが立ち上がるか確認
python manage.py runserver
※間違えて閉じてしまったらハマった
またmy-fisrt-blog-youtubeから、
PowerShell Get-ExecutionPolicyして
仮サーバーの立ち上げてkら、microblogに移動してrunserverで立ち上がった
セッティング
microblog/settings.pyのINSTALLED_APPS に"blog"を追加する
タイムゾーンをアジアに変更
TIME_ZONE = 'UTC'→TIME_ZONE = 'Asia/Tokyo'
LANGUAGE_CODE = 'en-us'→LANGUAGE_CODE = 'ja'
blog/templates/フォルダを追加。ここにhtmlファイルなどを置いていく
blog/urls.py path('admin/', admin.site.urls),ルートディレクトリ
path("", frontpage),””とは何もパスを指定しませんよということ、frontpageを記入sると指定しなければフロントに飛んでねという指示になる
blogの中にfrontpageないといけないため、blog/templates/blog/frontpage.html に移動する
ここまでで、サイトを更新するとhtmlの内容が表示される
次はmodels.pyからデータベース設定に
models.pyに書いていく。書くだけだとデータベースが使えない。
データベースにつなげるコマンドを打つ必要がある
一度ターミナルをctrl c で切ってから
20:53
python manage.py makemigrations これでmanage.pyとデータベースを混じり合わせることができる
これをすると、blogフォルダの中に、migrationsフォルダが作成される。その中の0001_initial.py
どのような形式でmigrationsされたのかの内容を書いているか履歴を残すファイルになっている
migrationsコマンドを打つたびにここに履歴として残るようになっている。あまり意識しなくてもいいファイル
ただ毎グレードする前にかならず毎グレードする必要があるので覚えておく必要があります。
python manage.py migrate
これで連携させる
これで先程書いた設定を使えるようになるということです
ではどのような内容を入れていくのか 例たいとるとか本文とか
このデータベース、SQL分を書かずに入れられるかというと
管理画面を使ってデータを入れていく
管理画面とはurls.pyにあるadmin ここにアクセス必要がある
アクセスするにはユーザーを設定する必要がある
python manage.py createsuperuser
これでアクセスするターンになって、ユーザー(admin)→メールアドレス(空ok)→パスワード
パスワードは本来は難しくする必要があるが今は「a」とか簡単でいい。これでいいのか聞かれるから「y」で
このあとは以前のコマンドでサーバーを立ち上げる
仮サーバーを立ち上げたら、サイトを表示して、URLの後ろに/adminを入力してアクセスすると、管理画面に飛べます
先ほど設定したユーザー名とパスワードでログインする
現状だと、models.pyで設定したclass Post(models.Model):が使えない それはなぜか?それは登録する必要があります
管理のことなのでadmin.pyを見ます。ここで登録する必要があります。登録するとはmodels.pyと連携するということです
registerという関数を書いてpostを入れる admin.site.register(Post)
ですが呼び出していないから呼び出していきましょう from .models import Post
それから、サイトに戻って更新するとpostという項目が表示される
postをクリックして入る色々入力できるようになる
25:46
htmlを
bulma cssフレームワークcss最初から用意されたcssフレームワーク
{% block content %} {% endblock %}この間に入力したコンテンツが雛形状態で組み込むことができる
これをbase.htmlに書いて、front.htmlに表示させる。front.html中でここだけ変えたいとかだったら、ここに書く endblockまで
どうやってデータベースから火っぱてきてviews.pyに持ってきてhtmlを表示することができるのか
models.py→views.pyやり方
views.pyにfrom .models import Postを記載、def frontpage(request):の中に、posts = Post.objects.all()と書くと、すべてのPostデータを取ってこれる。その記述をpostsの変数に代入した
return render(request, "blog/frontpage.html")の第③引数に,{"posts":posts}を入れる→return render(request, "blog/frontpage.html" ,{"posts":posts}) render関数の中でpostsの名前でpostsデータを渡す
これでmodels.pyのデータがviews.pyに帰ってきて、htmlと連携して 、サーバーに返すことができる
htmlではどの様に書いておけばいいのか?
frontpage.htmlに
{% for post in posts %}を追加。for文でposts(さっき決めたやつ)という全データをpostというデータで取り出していきます。
{{post.title}}と記述してサイトを更新すると、ブログタイトルを取ってきます。
{{post.posted_date}}とすると、日付、時間データ
{{post.intro}}とすると、イントロ部分
ブログで保存した内容を全て取ってくるようになります。
次は各記事の詳細ページに飛べるようにします。
uris.pyのurlpatterns = [中にこれを追加
path("slug:slug/")この書き方で詳細ページをわけることができるようになる
スラグでデータベースに保存したやつ。今回ではpost-1とかpost-2
path("slug:slug/", post_detail, name="post_detail")
修正して、次にこれもfrom blog.views import frontpage ,post_detailここに追加しておく
次にviews.pyにパーツを書いていきます
def post_detail(request, slug): post_detailにRequest関数を呼び出し、第②引数にslugを渡す
return(request, "blog/post_detail.html")#このpost_detailが呼ばれたらblog/post_detail.htmlを返す
blog/post_detail.htmlを作ります。
FrontPage.htmlのソースをコピってきて、forは消して
views.pyの中のdef post_detail(request, slug):にpost = Post.objects.get(slug=slug)を追加
get関数を使ってget(slug=slug)slugが例えばpost-1とpost-1が照合してイコールであれば、postに渡して、post_detailに
return(今回はこれをblog/post_detail.html)返す
return render(request, "blog/post_detail.html", {"post":post})#ここのところ{"post":post}ポストの名前でポストを渡してあげる。render関数忘れてた
一覧にボタンを追加する方法
FrontPage.htmlにもっと読むを追加
この'post_detail'はurls.pyで指定したpath("slug:slug/", post_detail, name="post_detail")のname属性を指定
post.slug はポスト内容スラグに設定したということ
44:07
次は詳細記事コメントを送信できるフォームを追加する方法
ここは後日書こうと思います。多分…