【Python初心者】Djangoで簡単なサイトを作ってみる【練習・勉強】

スポンサーリンク
man

困ってる人

Djangoで一体何が出来るんだろう

とりあえず、まずは基本としてフォルダの構成とかを知りたいな


こんにちは、ヨロと申します。

今回は「Python」のフレームワークでもある「Django」の基本を学ぶために簡単なホームページを作ってみます。

という事で、今回作るのはこれ。

今回の内容が理解出来るようになると、

  • ブラウザでHTMLを表示する方法
  • CSSとJavaScriptの読み込み方
  • 画像の貼り付け方
  • リンク(aタグ)の貼り付け方
  • これらが分かるようになるはず。


    スポンサーリンク

    Python初心者がDjangoで簡単なサイトを作ってみる:ファイルの準備

    まずはファイルの用意をする前に「Python」をダウンロードしておく。

    それからプロジェクトとアプリケーションを作成。

    「コマンドプロンプト」でも「Windows PowerShell」でも何でもいいですが、まずは開いて、

    「cd desktop」でデスクトップに移動

    「mkdir フォルダ名」 (今回はフォルダ名を「sample」に)

    「cd sample」で「sample」フォルダの中に移動

    「django-admin startproject プロジェクト名 .」 (今回はプロジェクト名を「myproject」に)

    そうすると、この時点でのプロジェクトファイル(myproject)の中身はこんな感じ。

    次にアプリケーションを作成。

    「python manage.py startapp アプリ名」 今回のアプリ名は「myapp」

    そうするとアプリ(myapp)のファイルの中身はこんな感じ。

    「myapp」の中に

    「urls.py」

    「templates」フォルダを作成し、中に「index.html」を置く。

    「static」フォルダを作成し、中に「css」「javascript」「images」の3つのフォルダを作成する。

    「python manage.py migrate」

    「python manage.py runserver」で、サーバーを動かす。

    「settings.py」のINSTALLED_APPSの項目内に内容を追加する

    「myproject/settings.py」「INSTALLED_APPS」の項目内に、

    'myapp' を追加。

    必要であれば、言語、タイムゾーン部分も変更。

    // 言語・タイムゾーン部分の変更
    
    LANGUAGE_CODE = 'ja'
    
    TIME_ZONE = 'Asia/Tokyo'

    myapp/views.py

    // myapp/views.py
    
    # Create your views here.
    from django.shortcuts import render
    
    def index(request):
        return render(request,'index.html')
    
    

    myproject/urls.py

    // myproject/urls.py
    
    from django.contrib import admin
    from django.urls import path, include
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', include('myapp.urls'))
    ]
    
    

    myapp/urls.py

    // myapp/urls.py
    
    from django.urls import path
    from . import views
    
    app_name='myapp'
    
    urlpatterns = [
        path('', views.index, name='index'),
    ]
    
    

    これらの意味合いは簡単に書くとこんな感じ。

    HTML, CSSファイルを用意

    HTMLの中には、

    // HTML
    
    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="style.css">
    
            <title>我が家の愛犬ポチの日記</title>
        </head>
    
        <body>
            <h1>我が家の愛犬ポチの日記</h1>
    
            <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>
    
            <p>可愛いわんちゃんがうちに来てくれました</p>
            <p>ポチの好きな食べ物</p>
            <p>ポチの嫌いな食べ物</p>
            <p>ポチが1才になりました</p>
        </body>
    
    </html>

    ファイル名を「index.html」で保存。

    CSSファイルを用意

    CSSファイルの中には、

    // CSS
    
    body {
    	text-align: center;
    }

    ファイル名を「style.css」で保存。

    スポンサーリンク

    【Python初心者】DjangoでHTML, CSS, 画像などをブラウザで表示する方法

    ここからは実際にブラウザでHTML, CSS, JavaScript, 画像などを表示してみます。

    ブラウザでHTMLファイルに書かれた内容を表示する

    「index.html」ファイルを「myproject/myapp/templates/index.html」に保存。

    ブラウザで画像を表示する方法

    今回は「inu.png」というものを使います。

    「sample\myproject\myapp\static\images\」の中に画像を保存。

    ファイルの読み込みが出来るように「settings.py」に追加。

    まずは、

    // settings.py
    
    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) の下に、
    
    STATIC_DIR = os.path.join(BASE_DIR,"static") を追加。

    次に、

    // settings.py
    
    STATIC_URL = '/static/'
    STATICFILES_DIRS =[
        STATIC_DIR,
    ]

    「static」フォルダはどこに置いてもOK。

    この状態で「http://127.0.0.1:8000/static/images/inu.png」にアクセスして画像が表示されていればOK。

    スポンサーリンク

    【Python】Djangoを使ってブラウザでトップページに画像を表示する方法

    ブラウザでトップページに画像を表示する場合は、

    // トップページに画像を表示する場合
    
    {% load staticfiles %}
    
    <img src="{% static "images/inu.png" %}" alt="">
    
    この2つ
    
    

    これらを「index.html」に追加。

    {% load staticfiles %}は「static」フォルダの中にあるファイルを読み込むために必要。

    そうすると、最終的にこんな感じ。

    // 画像を表示する場合のHTML部分
    
    <!DOCTYPE html>
    {% load staticfiles %}
    <html>
        <head>
            <link rel="stylesheet" href="style.css">
    
            <title>我が家の愛犬ポチの日記</title>
        </head>
    
        <body>
            <h1>我が家の愛犬ポチの日記</h1>
    
            <img src="{% static "images/inu.png" %}" alt="">
    
            <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>
    
            <p>可愛いわんちゃんがうちに来てくれました</p>
            <p>ポチの好きな食べ物</p>
            <p>ポチの嫌いな食べ物</p>
            <p>ポチが1才になりました</p>
        </body>
    
    </html>

    これで、トップページの画像が表示されるようになる。

    スポンサーリンク

    【Python】Djangoでスタイルシート(CSS), JavaScriptのファイルを読み込む方法

    まずはCSSファイルの保存先は、

    「myproject\myapp\static\css\style.css」

    ファイル名は「style.css」で保存。

    そして、保存したファイルを読み込む場合は「HTMLファイル」の、

    // CSSファイルの読み込み
    
    <link rel="stylesheet" href="style.css"> の部分を、
    
    <script src="{% static "css/style.css" %}"></script> と置き換え。

    そうすれば、body内の要素に中央寄せが適用される。

    // HTML
    
    <!DOCTYPE html>
    {% load staticfiles %}
    <html>
        <head>
            <link rel="stylesheet" href="{% static "css/style.css" %}"/>
     
            <title>我が家の愛犬ポチの日記</title>
        </head>
     
        <body>
            <h1>我が家の愛犬ポチの日記</h1>
     
            <img src="{% static "images/inu.png" %}" alt="">
     
            <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>
     
            <p>可愛いわんちゃんがうちに来てくれました</p>
            <p>ポチの好きな食べ物</p>
            <p>ポチの嫌いな食べ物</p>
            <p>ポチが1才になりました</p>
        </body>
     
    </html>

    ファイルが読み込まれない場合は{% load staticfiles %}に注意。

    JavaScriptを読み込む方法

    「JavaScript」も「CSS」と同じようにhead内にコードを書いて読み込む。

    // JavaScriptを読み込む
    
    <script src="{% static 'javascript/sample.js' %}"></script>

    ファイルの保存先は、

    「myproject\myapp\static\javascript\sample.js」

    リンクを貼る方法(aタグ部分) – index.html

    リンクを貼る際に必要なタグは、この2つ。

    {% load static %}
    {% url '{namespace}:{name}' %}

    その際には{namespace}{name}の設定が必要。

    {name}部分は「myapp\urls.py」に書く。

    myapp\views.py

    // myapp\views.py
    
    # Create your views here.
    from django.shortcuts import render # render関数
     
    def index(request): # index関数
        return render(request,'index.html') # index.htmlを返す
    
    def welcome(request): # welcome関数
    	return render(request, 'welcome.html') # welcome.htmlを返す
    
    def like(request): # like関数
        return render(request,'like.html') # like.htmlを返す
    
    def dislike(request): # dislike関数
        return render(request,'dislike.html') # dislike.htmlを返す
    
    def birthday(request): # birthday関数
        return render(request,'birthday.html') # birthday.htmlを返す

    myproject\urls.py

    「myproject\urls.py」はそのまま変更する必要なし。

    // myproject\urls.py
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', include('myapp.urls')), # index.htmlに来た場合
    ]

    myapp\urls.py

    // myapp\urls.py
    
    urlpatterns = [
        url(r'^$', views.index, name='index'),
        url(r'^welcome/$', views.welcome, name='welcome'),
        url(r'^like/$', views.like, name='like'),
        url(r'^dislike/$', views.dislike, name='dislike'),
        url(r'^birthday/$', views.birthday, name='birthday'),
    ]
    
    これらの意味合いとしては、
    
    ↓
    
    urlpatterns = [
    
    # index.htmlにアクセスが来た場合、views.pyのindex関数の処理をする。
        url(r'^$', views.index, name='index'),
    
    # welcome.htmlにアクセスが来た場合、views.pyの中のwelcome関数の処理をする。
        url(r'^welcome/$', views.welcome, name='welcome'),
    
    # like.htmlにアクセスが来た場合、views.pyの中のlike関数の処理をする。
        url(r'^like/$', views.like, name='like'),
    
    # dislike.htmlにアクセスが来た場合、views.pyの中のdislike関数の処理をする。
        url(r'^dislike/$', views.dislike, name='dislike'),
    
    # birthday.htmlにアクセスが来た場合、views.pyの中のbirthday関数の処理をする。
        url(r'^birthday/$', views.birthday, name='birthday'),
    ]
    
    

    index.html

    次にHTMLファイルにリンクを貼る方法で、その際には、

    {% url '{namespace}:{name}' %} を使う。

    そうすると、こんな感じ。

    // index.html
    
    <p><a href ="">可愛いわんちゃんがうちに来てくれました</a></p>
    <p><a href ="">ポチの好きな食べ物</a></p>
    <p><a href ="">ポチの嫌いな食べ物</a></p>
    <p><a href ="">ポチが1才になりました</a></p>
    
    この部分を、
    
    <p><a href="{namespace}:{name}">可愛いわんちゃんがうちに来てくれました</a></p>
    <p><a href="{namespace}:{name}">ポチの好きな食べ物</a></p>
    <p><a href="{namespace}:{name}">ポチの嫌いな食べ物</a></p>
    <p><a href="{namespace}:{name}">ポチが1才になりました</a></p>
    
    このように変える。
    

    今回の{namespace}部分は、

    「myapp\urls.py」「app_name=’myapp‘」この部分。

    {name}部分は「myapp\urls.py」「urlpatterns」の中に書かれた「name=’ここ‘」部分。

    すると、最終的に「index.html」部分はこんな感じ。

    // index.html
    
    <!DOCTYPE html>
    {% load static %}
    <html>
        <head>
            <link rel="stylesheet" href="{% static "css/style.css" %}"/>
    
            <title>我が家の愛犬ポチの日記</title>
        </head>
    
        <body>
    
            <h1>我が家の愛犬ポチの日記</h1>
    
            <img src="{% static "images/inu.png" %}" alt="表示できません">
    
            <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>
    
            <p><a href="{% url 'myapp:welcome' %}">可愛いわんちゃんがうちに来てくれました</a></p>
            <p><a href="{% url 'myapp:like' %}">ポチの好きな食べ物</a></p>
            <p><a href="{% url 'myapp:dislike' %}">ポチの嫌いな食べ物</a></p>
            <p><a href="{% url 'myapp:birthday' %}">ポチが1才になりました</a></p>
    
        </body>
    
    </html>
    
    

    ここまで出来れば、今回のような簡単なサイトの見た目でしたら、ひと通りは作れるようになるでしょう。

    コメント

    タイトルとURLをコピーしました