[Python] Django Project: 02 Get image via API

kittens

สืบเนื่องจาก โพสนี้ 

เราต้องการที่สร้างโปรแกรมใส่ width และ height ที่ต้องการเพื่อให้แสดงรูปภาพแมวเหมียวขึ้นมา

จากคราวที่แล้ว เมื่อเซตอัพเสร็จ ก็ถึงเวลาที่จะสร้างโปรแกรมจริงๆจังๆสักที

Create own application inside project

(venv)   django_project$ python manage.py startapp kitten

แต่เราต้องบอก Django ว่าสร้าง application อะไรไป

เข้าไปใน mysite/settings.py

INSTALLED_APPS = [

    ‘django.contrib.admin’,

    ‘django.contrib.auth’,

    ‘django.contrib.contenttypes’,

    ‘django.contrib.sessions’,

    ‘django.contrib.messages’,

    ‘django.contrib.staticfiles’,

    ‘kitten’,

]

——

Manage URL

การที่ Django จะรู้ว่ามีหน้าไหนบ้างนั้น เราต้องระบุใน mysite/urls.py

from django.conf.urls import include, url

from django.contrib import admin

urlpatterns = [

    url(r’^admin/’, admin.site.urls),

    url(r”, include(‘kitten.urls’)),

]

Django ตามหา url ยังไง? คำตอบคือใช้สิ่งที่เรียกว่า Regex หรือ Regular Expression ซึ่งมันคือ search pattern

ตัวสำคัญๆ เช่น

  • ^  ตอนเริ่ม text
  • $  ตอนจบ text
  • \d  สำหรับ digit
  • + to indicate that the previous item should be repeated at least once
  • () to capture part of the pattern

เราเพิ่ม  url(r”, include(‘kitten.urls’)) มาเพื่อให้เวลาเรียก url ก็จะไปตามหา url ใน application kitten ก่อน เพื่อการจัดการที่เป็นระบบที่ง่ายขึ้น

ดังนั้นเราต้องสร้าง urls ของ application ของเรา

from django.conf.urls  import url

from . import views

urlpatterns = [

    url(r’^$’, views.kitten_home, name=’kitten_home’),

]

เพื่อให้หน้า http://127.0.0.1:8000/ จะแสดงหน้า homepage ของ application

โดยเราให้ views ไปเรียก kitten_home ไปยัง url ^$

kitten/views.py

from django.shortcuts import render

import requests

def kitten_home(request):

       return render(request, ‘kitten_home.html’, {})

แต่สิ่งที่เกิดขึ้นคือ

screen-shot-2559-12-26-at-10-12-35-am

ไม่มีไฟล์ kitten_home.html นั่นเพราะเรายังไม่มี template มาให้แสดงนี่เอง

——

Create Template

เราสร้าง directory ขึ้นมาใหม่ภายใน kitten ของเราเพื่อแยกพวกไฟล์ template ต่างหาก

โดยสิ่งที่เราสร้างคือ form รับขนาด width และ  height และเมื่อกดปุ่ม Get Image จะต้องได้รูปแมวเหมียวออกมา

template/kitten_home.html


{% load static %}

<html>
<head> <title> Kitten </title>
</head>
  <!-- Latest compiled and minified CSS -->
						<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
						<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
   <form class="form-inline" method="post">
      {% csrf_token %}
<div class="form-group">
     <label for="input_width">Width</label>
     <input name="input_width" type="text" class="form-control" id="input_width" placeholder="insert width"></div>
<div class="form-group">
     <label for="input_height">Height</label>
     <input name= "input_height" type="text" class="form-control" id="input_height" placeholder="insert height"></div>
<button type="submit" class="btn btn-default" value="OK">Get Image</button>
   </form>

   <img src="{% static '' %}{{ kitten_image }}"></div>
<div class="col-md-4"></div>
</div>
</body>
</html>

โดยการรับ input นั้น จะต้องตรวจสอบผ่าน forms.py ว่าต้องรับเป็น field type อะไร

kitten/forms.py

from django import forms

class KittenForm(forms.Form):

    input_width = forms.CharField(label=’input_width’, max_length=10)

    input_height = forms.CharField(label=’input_height’, max_length=10)

(https://docs.djangoproject.com/en/1.10/topics/forms/#forms-in-django)

kitten/views.py


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

       if form.is_valid():
         url = "http://placekitten.com/g/" + form.cleaned_data['input_width'] + "/" + form.cleaned_data['input_height']
         kitten = requests.get(url)
         f = open("kittens.png", "w")
         f.write(kitten.content)
         f.close
     else:
         form = KittenForm()
return render(request, 'kitten_home.html', {'kitten_image': "kittens.png"})

ครั้งแรกที่เข้า url นี้จะเป็น GET request จะเป็นการสร้าง form instance เปล่าๆ และในครั้งถัดไป เมื่อ submit ก็จะเป็นการ Post Request เข้าสู่ form instance

return render(request, ‘kitten_home.html’, {‘kitten_image’: “kittens.png”})

นั้นจะส่ง path ของรูปภาพที่เราสร้างไว้ กลับไป render ที่ template ใน ด้วยวิธี การจัดการกับ static files

ใน settings file จะมี STATICFILES_DIRS บอกถึง path ที่ให้ไปหา static files ที่ได้เก็บไว้

STATICFILES_DIRS = [
    os.path.join(BASE_DIR),
]

ทำให้เมื่อเราใส่ {% static ” %}{{ kitten_image }} เท่ากับการใส่  path ปัจจุบัน + ภาพไฟล์

ทำให้ template แสดงรูปภาพออกมาได้ตามนี้

{% load static %}
 <img src="{% static '' %}{{ kitten_image }}">

(https://docs.djangoproject.com/en/1.10/howto/static-files/)

Screen Shot 2559-12-27 at 9.13.25 AM.png

One thought on “[Python] Django Project: 02 Get image via API

  1. Pingback: [Python] Django project: 03 Make it dynamic | mesodiar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.