pragmatic/settings.py

INSTALLED_APPS = [
...
'projectapp',
]

pragmatic/urls.py

urlpatterns = [
...
path('projects/', include('projectapp.urls')),
]

projectapp/urls.py 생성 - 우리가 설정할 view 에 대한 라우팅

from django.urls import path

from projectapp.views import ProjectListView, ProjectCreateView, ProjectDetailView

app_name = 'projectapp'

urlpatterns = [
path('list/', ProjectListView.as_view(), name='list'),

path('create/', ProjectCreateView.as_view(), name='create'),
path('detail/<int:pk>', ProjectDetailView.as_view(), name='detail'),

]

모델

from django.db import models

class Project(models.Model):
image = models.ImageField(upload_to='project/', null=True)
title = models.CharField(max_length=20, null=False)
description = models.CharField(max_length=200, null=True)

created_at = models.DateTimeField(auto_now=True)

form

from django.forms import ModelForm

from projectapp.models import Project

class ProjectCreationForm(ModelForm):
class Meta:
model = Project
fields = ['image', 'title', 'description'] # ModelForm 을 기반으로 3가지를 입력으로 받는다

마이그레이션

python manage.py makemigration
python manage.py migrate

view

from django.shortcuts import render
from django.urls import reverse
from django.views.generic import CreateView, DetailView, ListView

from projectapp.forms import ProjectCreationForm
from projectapp.models import Project

Create your views here.

@method_decorator(login_required, 'get')
@method_decorator(login_required, 'post')
class ProjectCreateView(CreateView):
model = Project
form_class = ProjectCreationForm
template_name = 'projectapp/create.html'

def get_success_url(self):
    return reverse('projectapp:detail', kwargs={'pk': self.object.pk})

class ProjectDetailView(DetailView):
model = Project
context_object_name = 'target_project'
template_name = 'projectapp/detail.html'

class ProjectListView(ListView):
model = Project
context_object_name = 'project_list'
template_name = 'projectapp/list.html'
paginate_by = 25

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}

{% endblock %}

{% extends 'base.html' %}

{% block content %}

{{ target_project.title }}

{{ target_project.description}}

{% endblock %}

{% extends 'base.html' %}
{% load static %}

{% block content %}

{% if project_list %}
<div class="container">
    {% for project in project_list %}
    <a href=" {% url 'projectapp:detail' pk=project.pk %}">
        {% include 'snippets/card_project.html' with project=project %}
    </a>
    {% endfor %}
</div>
<script src="{% static 'js/magicgrid.js' %}"></script> <!--js 를 컨테이너 내부로 이동시키기-->
{% else %}
<div class="text-center">
    <h1>No Projects YET! </h1>
</div>
{% endif %}

{% include 'snippets/pagination.html' with page_obj=page_obj %}

<div style="text-align: center;">
    <a href="{% url 'projectapp:create' %}" class="btn btn-dark rounded-pill mt-3 mb-3 px-3">
        Create Project
    </a>
</div>

{% endblock %}

{{ project.title | truncatechars:8 }}

/base.css/

.pragmatic_logo {
margin-top: 1rem;
font-family: 'Lobster', cursive;
}

.pragmatic_footer_button {
font-size: .10rem;
}

.pragmatic_footer{
text-align:center;
margin-top: 2rem;
}

.pragmatic_header {
text-align:center;
margin: 2rem 0;
}

@media screen and (max-width:500px) {
html {
font-size: 13px;
}
}

a {
color: black;
}

a:hover {
color: black;
text-decoration: none;
}

.pragmatic_header_nav {
margin: 0 0.5rem;
}

.pragmatic_header_navbar {
margin: 1rem 0;
}