ECサイト

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
https://www.agile-software.site/2021/04/29/django%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc/

モデルを作成

from django.db import models


class Profile(models.Model):
    title = models.CharField('タイトル', max_length=100, null=True, blank=True)
    subtitle = models.CharField('サブタイトル', max_length=100, null=True, blank=True)
    name = models.CharField('名前', max_length=100)
    job = models.TextField('仕事')
    introduction = models.TextField('自己紹介')
    github = models.CharField('github', max_length=100, null=True, blank=True)
    twitter = models.CharField('twitter', max_length=100, null=True, blank=True)
    linkedin = models.CharField('linkedin', max_length=100, null=True, blank=True)
    facebook = models.CharField('facebook', max_length=100, null=True, blank=True)
    instagram = models.CharField('instagram', max_length=100, null=True, blank=True)
    topimage = models.ImageField(upload_to='images', verbose_name='トップ画像')
    subimage = models.ImageField(upload_to='images', verbose_name='サブ画像')

    def __str__(self):
        return self.name

フィールドについては以下のブログを参照してください。

profileを追加するときにnull=True, blank=Trueとしておくことで入力をしていない欄があってもprofileを作成することができるということです。その場合にはデータベースのフィールドにはnullが保存されます。

title = models.CharField('タイトル', max_length=100, null=True, blank=True)

https://www.agile-software.site/2021/04/17/django%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89/

管理画面でデータ登録

from django.contrib import admin
from .models import Profile

admin.site.register(Profile)

トップページのURLを作成

setting.pyのINSTALLED_APPSのdjango.contribからadminをインポート
django.urls

urlpatternsにおけるpath(‘admin/’, admin.site.urls)はhttp://127.0.0.1:8000/admin/にアクセスすると管理画面であるadmin.site.urlsを返す（ブラウザに表示する）し、
path(”, include(‘foodie.urls’))はhttp://127.0.0.1:8000/にアクセスするとinclude()関数を使ってfoodieのurls.pyファイルを読み込むようにしています。

django.contrib
django.urls
django.conf.urls.static
django.conf

if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

DEBUG=Trueの場合、MEDIA_ROOTに存在するファイルをMEDIA_URL(https://<サーバ名>/media/xx/<ファイル名>)にアクセスすることでMEDIA_ROOTに設定したフォルダ配下にあるファイルの一覧をWEB画面に表示させることができます。(settings.pyで設定したMEDIA_URL,MEDIA_ROOTを使えるようにする)

from django.contrib import admin
from django.urls import path, include

from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

トップページのURLを作成

from django.urls import path
from app import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
]

ビューを作成

djangoのshortcutsから renderをインポートします。
modelsからProfileのクラスをインポートします。

from django.views.generic import View
from django.shortcuts import render
from .models import Profile


class IndexView(View):
    def get(self, request, *args, **kwargs):
        profile_data = Profile.objects.all()
        if profile_data.exists():
            profile_data = profile_data.order_by("-id")[0]
        return render(request, 'app/index.html', {
            'profile_data': profile_data,
        })

テンプレート

staticフォルダーのcssフォルダーのstyle.cssを適用させます。{% static ‘css/style.css’ %}
タイトルはタイトルタグで囲みます。<title>Portfolio</title>
アイコンを使用するためにfontawesomeとbootstrapの

<body>タグにはnavクラス、main、footer、動的に変わるものを記述します。
navクラス内にはcontainerクラスがあり、その中にnavbar-brand、navbar-navがあります。navbar-brandではアイコンの設定。navbar-navではHOMEやABOUTなどの項目を設定しています。

            <a class="navbar-brand" href="/">
                <img src="{% static 'img/logo.svg' %}" width="80" height="80">
            </a>

コピーライトは<small>タグで囲みます。
フッタークラスはpy-4 bg-dark text-center

{% load static %}

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <title>Portfolio</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img src="{% static 'img/logo.svg' %}" width="80" height="80">
            </a>
            <ul class="navbar-nav">
                <li class="nav-item mr-3">
                    <a class="nav-link nav-color" href="/">HOME</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link nav-color" href="">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-color" href="">CONTACT</a>
                </li>
            </ul>
        </div>
    </nav>

    <main>
        <div class="container">
            {% block content %}
            {% endblock %}
        </div>   
    </main>

    <footer class="py-4 bg-dark text-center">
        <small class="text-white">© 2021 perpetualchoja</small>
    </footer>

    {% block extra_js %}
    {% endblock %}
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*トップページの背景を設定*/
body {
    background: #ffffff;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}