สิ่งที่เราต้องการคืออยากให้ข้อมูลเก็บลงใน database และนำมาแสดงบนหน้า html

 อย่างแรกที่ต้องทำ หนีไม่พ้นสร้าง Model แน่นอน

Django Model

สร้าง model ใน kitten/models.py

from __future__ import unicode_literals

from django.db import models

class Kitten_image(models.Model):

   image_name = models.CharField(max_length=100)

    width = models.CharField(max_length=10)

    height = models.CharField(max_length=10)

เมื่อเราสร้าง model ของตัวเองแล้ว สิ่งที่เราต้องทำคือ add model ไปยัง database

กรณีเช่น ถ้ามีการเปลี่ยนแปลงกับ model อย่างที่เราได้สร้างขึ้นมาตะกี้

(venv) ➜  django_project $ python manage.py makemigrations kitten

Django ก็จะรู้แล้วและเตรียม migration file ให้ เพื่อให้เรา migrate ลง database ต่อ

(venv) ➜  django_project $ python manage.py migrate kitten

—–

Django Admin

model Kitten_image() ที่เราได้สร้าง สามารถจัดการได้ผ่าน Django admin

from django.contrib import admin

from .models import Kitten_image

admin.site.register(Kitten_image)

เพื่อให้ model ปรากฏลงใน admin page

และเมื่อเรา runserver ขึ้นมาอีกครั้งผ่าน http://127.0.0.1:8000/admin/

แสดงถึงว่าเราต้องสร้าง superuser ขึ้นมาก่อน กำหนดให้ password ต้องมีอย่างต่ำ 8 characters

(venv) ➜  django_project $ python manage.py createsuperuser

Username: admin

Email address: admin@admin.com

Password:

Password (again):

Superuser created successfully.

เมื่อ login ได้ก็จะได้หน้าดังกล่าว

---

Make it dynamic

 

เมื่อเรามี models เรียบร้อย เหลือแค่จะให้มาแสดงที่ html อย่างไร คำตอบคือ views นั่นเอง views จะเป็นคนเชื่อมระหว่าง models กับ template

kitten/views.py

from .models import Kitten_image

title = str(datetime.now())
url = “http://placekitten.com/g/” + form.cleaned_data[‘input_width’] + “/” + form.cleaned_data[‘input_height’]
kitten = requests.get(url)
f = open( title + “.png”, “w”)
f.write(kitten.content)
f.close

ก่อนหน้านี้เราได้ hardcode โดยให้ข้อมูลที่ได้มาเก็บลงในไฟล์ชื่อ kittens.png แต่คราวนี้เราอยากได้รูปหลายๆรูป จึงได้ตั้งชื่อรูปภาพใหม่เป็นเวลาขณะนั้นแทน

และอย่าลืม import datetime เข้ามาด้วย

from datetime import datetime

สร้าง object มา instantiate เพื่อเก็บค่า instance method ลง database

obj = Kitten_image()
obj.image_name = title + “.png”
obj.width = form.cleaned_data[‘input_width’]
obj.height = form.cleaned_data[‘input_height’]
obj.save()

หลังจากที่เซฟข้อมูลต่างๆลง database แล้ว ทำให้เราได้ object ของแต่ละภาพออกมา จึงใช้  all_image มารับ object ทั้งหมด เพื่อนำมาแสดงรูปโดยผ่านจากชื่อรูปภาพ

all_image = Kitten_image.objects.all()

 

สิ่งสุดท้ายแล้วคือ เราต้องการที่จะแสดงรูปภาพออกมาแถวละ 4 รูป โดยจะส่ง n ไปยัง html ด้วยวิธี safe filter เพื่อให้ไม่ให้html escape ตัว string เหล่านี้

x = ""
for index in range(len(all_image)):
  if index % 4 == 0:
    x += '
<div class="row">' + '
<div class="col-xs-6 col-sm-3"><img src="' + settings.STATIC_URL + all_image[index].image_name + '"></div>
'
  elif index % 4 == 2:
    x += '&lt;div class="col-xs-6 col-sm-3"&gt;&lt;img src="' + settings.STATIC_URL + all_image[index].image_name + '"&gt;&lt;/div&gt;'+ '&lt;/div&gt;'
  else:
    x += '&lt;div class="col-xs-6 col-sm-3"&gt;&lt;img src="' + settings.STATIC_URL + all_image[index].image_name + '"&gt;&lt;/div&gt;'
    x += '&lt;/div&gt;'

print form.errors
return render(request, 'kitten_home.html', {'kitten_image': all_image, 'n' : x})

 

kitten/kitten_home.html

{{ n | safe }}

(https://docs.djangoproject.com/en/dev/ref/templates/builtins/#safe)

 views โดยรวม

from django.shortcuts import render
from django.conf import settings
from .forms import KittenForm
from .models import Kitten_image
from datetime import datetime
import requests
def kitten_home(request):
  if request.method == 'POST':
    form = KittenForm(request.POST)

    if form.is_valid():

      title = str(datetime.now())
      url = "http://placekitten.com/g/" + form.cleaned_data['input_width'] + "/" + form.cleaned_data['input_height']
      kitten = requests.get(url)
      f = open( title + ".png", "w")
      f.write(kitten.content)
      f.close

      obj = Kitten_image()
      obj.image_name = title + ".png"
      obj.width = form.cleaned_data['input_width']
      obj.height = form.cleaned_data['input_height']
      obj.save()

  else:
    form = KittenForm()

all_image = Kitten_image.objects.all()

x = ""
for index in range(len(all_image)):
  if index % 4 == 0:
    x += '
<div class="row">'+'
<div class="col-xs-6 col-sm-3"><img src="' + settings.STATIC_URL + all_image[index].image_name + '"></div>
'
  elif index % 4 == 2:
    x += '
<div class="col-xs-6 col-sm-3"><img src="' + settings.STATIC_URL + all_image[index].image_name + '"></div>
'+ '</div>
'
  else:
    x += '
<div class="col-xs-6 col-sm-3"><img src="' + settings.STATIC_URL + all_image[index].image_name + '"></div>
'
    x += '</div>
'
return render(request, 'kitten_home.html', {'kitten_image': all_image, 'n' : x})
<p class="p1">

เท่านี้ก็จะได้ฝูงแมวเหมียวเต็มไปหมดแล้ว @_@