4주차 (31-43)

from django.urls import reverse_lazy from django.views.generic import CreateView from profileApp.forms import ProfileCreationForm from profileApp.models import Profile class ProfileCreateView(CreateView): model = Profile context_object_name = 'target_profile' form_class = ProfileCreationForm success_url = reverse_lazy('accountApp:hello_world') template_name = 'profileApp/create.html' def form_valid(self, form): temp_profile = form.save(commit=False) temp_profile.user = self.request.user temp_profile.save() return super().form_valid(form)

{% extends 'base.html' %} {% load bootstrap4 %} {% block content %} <div style="text-align: center; max-width: 500px; margin: 4rem auto"> <div class="mb-4"> <h4>Profile Create</h4> </div> <form action="{% url 'profileApp:create' %}" method="post" enctype="multipart/form-data"> {% csrf_token %} {% bootstrap_form form %} <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3"> </form> </div> {% endblock %}

{% extends 'base.html' %} {% block content %} <div> <div style="text-align: center; max-width: 500px; margin: 4rem auto;"> <p> {{ target_user.date_joined }} </p> <!-- 유저의 프로필이 있는 경우를 추가한다. --> {% if target_user.profile %} <h2 style="font-family: 'NanumPen'"> {{ target_user.profile.nickname }} </h2> <!-- 없을 경우, 프로필 생성으로 넘어가도록 한다. --> {% else %} <a href="{% url 'profileApp:create' %}"> <h2 style="font-family: 'NanumPen'"> Create Profile </h2> </a> {% endif %} {% if target_user == user %} {% endif %} </div> </div> {% endblock %}

from django.urls import reverse_lazy from profileApp.forms import ProfileCreationForm from profileApp.models import Profile from django.utils.decorators import method_decorator from django.views.generic import CreateView, UpdateView from pragmatic.decorators import profile_ownership_required class ProfileCreateView(CreateView): # ProfileUpdateView를 추가한다. (Decorator 사용) @method_decorator(profile_ownership_required, 'get') @method_decorator(profile_ownership_required, 'post') class ProfileUpdateView(UpdateView): model = Profile context_object_name = 'target_profile' form_class = ProfileCreationForm success_url = reverse_lazy('accountApp:hello_world') template_name = 'profileApp/update.html'

from django.urls import path from profileApp.views import ProfileCreateView, ProfileUpdateView app_name = 'profileApp' urlpatterns = [ path('create/', ProfileCreateView.as_view(), name='create'), # update 경로를 추가한다. 이때 유저의 pk를 토큰으로 받는다. path('update/<int:pk>', ProfileUpdateView.as_view(), name='update'), ]

from django.urls import path from profileApp.views import ProfileCreateView, ProfileUpdateView app_name = 'profileApp' urlpatterns = [ path('create/', ProfileCreateView.as_view(), name='create'), # update 경로를 추가한다. 이때 유저의 pk를 토큰으로 받는다. path('update/<int:pk>', ProfileUpdateView.as_view(), name='update'), ]

{% extends 'base.html' %} {% load bootstrap4 %} {% block content %} <div style="text-align: center; max-width: 500px; margin: 4rem auto"> <div class="mb-4"> <h4>Update Profile</h4> </div> <form action="{% url 'profileApp:update' pk=target_profile.pk %}" method="post" enctype="multipart/form-data"> {% csrf_token %} {% bootstrap_form form %} <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3"> </form> </div> {% endblock %}

{% extends 'base.html' %} {% block content %} <div> <div style="text-align: center; max-width: 500px; margin: 4rem auto;"> <p> {{ target_user.date_joined }} </p> <!-- 이미지를 넣기 위해 img 태그를 추가한다. --> <img src="{{ target_user.profile.image.url }}" alt="" style="height: 12rem; width: 12rem; border-radius: 20rem; margin-bottom: 2rem;"> {% if target_user.profile %} {% else %} {% endif %} {% if target_user == user %} {% endif %} </div> </div> {% endblock %}

from django.contrib.auth.models import User from django.http import HttpResponseForbidden from profileApp.models import Profile def profile_ownership_required(func): def decorated(request, *args, **kwargs): profile = Profile.objects.get(pk=kwargs['pk']) if not profile.user == request.user: return HttpResponseForbidden() return func(request, *args, **kwargs) return decorated

from django.urls import reverse_lazy, reverse from django.utils.decorators import method_decorator from django.views.generic import CreateView, UpdateView from profileApp.forms import ProfileCreationForm from profileApp.models import Profile from profileApp.decorators import profile_ownership_required class ProfileCreateView(CreateView): model = Profile context_object_name = 'target_profile' form_class = ProfileCreationForm template_name = 'profileApp/create.html' def form_valid(self, form): temp_profile = form.save(commit=False) temp_profile.user = self.requpytest.user temp_profile.save() return super().form_valid(form) def get_success_url(self): return reverse('accountApp:detail', kwargs={'pk' : self.object.user.pk}) @method_decorator(profile_ownership_required, 'get') @method_decorator(profile_ownership_required, 'post') class ProfileUpdateView(UpdateView): model = Profile context_object_name = 'target_profile' form_class = ProfileCreationForm template_name = 'profileApp/update.html' def get_success_url(self): return reverse('accountApp:detail', kwargs={'pk' : self.object.user.pk})

{% extends 'base.html' %} {% block content %} <div> <div style="text-align: center; max-width: 500px; margin: 4rem auto;"> {% if target_user.profile %} <img src="{{ target_user.profile.image.url }}" alt="" style="height: 12rem; width: 12rem; border-radius: 20rem; margin-bottom: 2rem;"> <h2 style="font-family: 'NanumPen'"> {{ target_user.profile.nickname }} {% if target_user == user %}} <a href="{% url 'profileApp:update' pk=target_user.profile.pk %}"> edit </a> {% endif %} </h2> <h5 style="margin-bottom: 3rem;"> {{ target_user.profile.message }} </h5> {% else %} {% if target_user.profile.message %} <a href="{% url 'profileApp:create' %}"> <h2 style="font-family: 'NanumPen'"> Create Profile </h2> </a> {% else %} <h2> 닉네임 미설정 </h2> {% endif %} {% endif %} {% if target_user == user %} <a href="{% url 'accountApp:update' pk=user.pk %}"> <p> Change Info </p> </a> <a href="{% url 'accountApp:delete' pk=user.pk %}"> <p> Quit </p> </a> {% endif %} </div> </div> {% endblock %}

from django.contrib.auth.views import LoginView, LogoutView from django.urls import path from accountApp.views import hello_world, AccountCreateView, AccountDetailView, AccountUpdateView from accountApp.views import AccountDeleteView app_name = "accountApp" urlpatterns = [ path('hello_world/', hello_world, name='hello_world'), path('login/', LoginView.as_view(template_name='accountApp/login.html'), name='login'), path('logout/', LogoutView.as_view(), name='logout'), path('create/', AccountCreateView.as_view(), name='create'), path('detail/<int:pk>', AccountDetailView.as_view(), name='detail'), path('update/<int:pk>', AccountUpdateView.as_view(), name='update'), path('delete/<int:pk>', AccountDeleteView.as_view(), name='delete'), ]

from django.urls import path from django.views.generic import TemplateView urlpatterns = [ path('list/', TemplateView.as_view(template_name='articleApp/list.html'), name='list'), ]

{% extends 'base.html' %} {% load static %} {% block content %} <style> .container div { width: 250px; background-color: antiquewhite; display: flex; justify-content: center; align-items: center; border-radius: 1rem; } <!-- 추가 변경함 --> .container img { width: 100%; border-radius: 1rem; } </style> <!-- 추가 변경함 --> <div class="container"> <div class="item1"> <img src="https://picsum.photos/200/300" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/410" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/500" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/100" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/300" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/300" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/320" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/298" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/100" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/425" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/344" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/122" alt=""> </div> <div class="item1"> <img src="https://picsum.photos/200/398" alt=""> </div> </div> <!-- 추가 변경함 --> <script src="{% static 'js/magicgrid.js' %}"> </script> {% endblock %}

'use strict'; /** * @author emmanuelolaojo * @since 11/11/18 */ /** * Validates the configuration object. * * @param config - configuration object */ var checkParams = function (config) { var DEFAULT_GUTTER = 25; var booleanProps = ["useTransform", "center"]; if (!config) { throw new Error("No config object has been provided."); } for(var prop of booleanProps){ if(typeof config[prop] !== "boolean"){ config[prop] = true; } } if(typeof config.gutter !== "number"){ config.gutter = DEFAULT_GUTTER; } if (!config.container) { error("container"); } if (!config.items && !config.static) { error("items or static"); } }; /** * Handles invalid configuration object * errors. * * @param prop - a property with a missing value */ var error = function (prop) { throw new Error(("Missing property '" + prop + "' in MagicGrid config")); }; /** * Finds the shortest column in * a column list. * * @param cols - list of columns * * @return shortest column */ var getMin = function (cols) { var min = cols[0]; for (var col of cols) { if (col.height < min.height) { min = col; } } return min; }; /** * @author emmanuelolaojo * @since 11/10/18 * * The MagicGrid class is an * implementation of a flexible * grid layout. */ var MagicGrid = function MagicGrid (config) { checkParams(config); if (config.container instanceof HTMLElement) { this.container = config.container; this.containerClass = config.container.className; } else { this.containerClass = config.container; this.container = document.querySelector(config.container); } this.static = config.static || false; this.size = config.items; this.gutter = config.gutter; this.maxColumns = config.maxColumns || false; this.useMin = config.useMin || false; this.useTransform = config.useTransform; this.animate = config.animate || false; this.center = config.center; this.styledItems = new Set(); }; /** * Initializes styles * * @private */ MagicGrid.prototype.initStyles = function initStyles () { if (!this.ready()) { return; } this.container.style.position = "relative"; var items = this.items(); for (var i = 0; i < items.length; i++) { if (this.styledItems.has(items[i])) { continue; } var style = items[i].style; style.position = "absolute"; if (this.animate) { style.transition = (this.useTransform ? "transform" : "top, left") + " 0.2s ease"; } this.styledItems.add(items[i]); } }; /** * Gets a collection of all items in a grid. * * @return {HTMLCollection} * @private */ MagicGrid.prototype.items = function items () { return this.container.children; }; /** * Calculates the width of a column. * * @return width of a column in the grid * @private */ MagicGrid.prototype.colWidth = function colWidth () { return this.items()[0].getBoundingClientRect().width + this.gutter; }; /** * Initializes an array of empty columns * and calculates the leftover whitespace. * * @return {{cols: Array, wSpace: number}} * @private */ MagicGrid.prototype.setup = function setup () { var width = this.container.getBoundingClientRect().width; var colWidth = this.colWidth(); var numCols = Math.floor(width/colWidth) || 1; var cols = []; if (this.maxColumns && numCols > this.maxColumns) { numCols = this.maxColumns; } for (var i = 0; i < numCols; i++) { cols[i] = {height: 0, index: i}; } var wSpace = width - numCols * colWidth + this.gutter; return {cols: cols, wSpace: wSpace}; }; /** * Gets the next available column. * * @param cols list of columns * @param i index of dom element * * @return {*} next available column * @private */ MagicGrid.prototype.nextCol = function nextCol (cols, i) { if (this.useMin) { return getMin(cols); } return cols[i % cols.length]; }; /** * Positions each item in the grid, based * on their corresponding column's height * and index then stretches the container to * the height of the grid. */ MagicGrid.prototype.positionItems = function positionItems () { var ref = this.setup(); var cols = ref.cols; var wSpace = ref.wSpace; var maxHeight = 0; var colWidth = this.colWidth(); var items = this.items(); wSpace = this.center ? Math.floor(wSpace / 2) : 0; this.initStyles(); for (var i = 0; i < items.length; i++) { var col = this.nextCol(cols, i); var item = items[i]; var topGutter = col.height ? this.gutter : 0; var left = col.index * colWidth + wSpace + "px"; var top = col.height + topGutter + "px"; if(this.useTransform){ item.style.transform = "translate(" + left + ", " + top + ")"; } else{ item.style.top = top; item.style.left = left; } col.height += item.getBoundingClientRect().height + topGutter; if(col.height > maxHeight){ maxHeight = col.height; } } this.container.style.height = maxHeight + this.gutter + "px"; }; /** * Checks if every item has been loaded * in the dom. * * @return {Boolean} true if every item is present */ MagicGrid.prototype.ready = function ready () { if (this.static) { return true; } return this.items().length >= this.size; }; /** * Periodically checks that all items * have been loaded in the dom. Calls * this.listen() once all the items are * present. * * @private */ MagicGrid.prototype.getReady = function getReady () { var this$1 = this; var interval = setInterval(function () { this$1.container = document.querySelector(this$1.containerClass); if (this$1.ready()) { clearInterval(interval); this$1.listen(); } }, 100); }; /** * Positions all the items and * repositions them whenever the * window size changes. */ MagicGrid.prototype.listen = function listen () { var this$1 = this; if (this.ready()) { var timeout; window.addEventListener("resize", function () { if (!timeout){ timeout = setTimeout(function () { this$1.positionItems(); timeout = null; }, 200); } }); this.positionItems(); } else { this.getReady(); } }; let magicGrid = new MagicGrid({ container: '.container', animate: true, gutter: 30, static: true, useMin: true }); magicGrid.listen(); // java 추가 var masonrys = document.getElementByTagName("img"); for (let i = 0; i < masonrys.length; i++){ masonrys[i].addEventListener('load', function (){ magicGrid.positionItems(); }, false); }

class ArticleListView(ListView): model = Article context_object_name = 'article_list' template_name = 'articleApp/list.html' paginate_by = 3

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

</style> <!-- #3.--> {% if article_list %} <div class="container"> {% for article in article_list %} <a href="{% url 'articleApp:detail' pk=article.pk %}"> {% include 'snippets/card.html' with article=article %} </a> {% endfor %} </div> <script src="{% static 'js/magicgrid.js' %}"> </script> {% else %} <div class="text-center"> <h1>No Articles YET!</h1> </div> {% endif %} {% include 'snippets/pagination.html' with page_obj=page_obj %} <div style="text-align: center"> <a href="{% url 'articleApp:create' %}" class="btn btn-dark rounded-pill col-3 mt-3"> Create Article </a> </div> {% endblock %}

<div> <img src="{{ article.image.url }}" alt=""> </div>

<div style="text-align: center; margin: 1rem 0;"> {% if page_obj.has_previous %} <a href="{% url 'articleApp:list' %}?page={{ page_obj.previous_page_number }}" class="btn btn-secondary rounded-pill"> {{ page_obj.previous_page_number }} </a> {% endif %} <a href="{% url 'articleApp:list' %}?page={{ page_obj.number }}" class = "btn btn-secondary rounded-pill active"> {{ page_obj.number }} </a> {% if page_obj.has_next %} <a href="{% url 'articleApp:list' %}?page={{ page_obj.next_page_number }}" class="btn btn-secondary rounded-pill"> {{ page_obj.next_page_number }} </a> {% endif %} </div>