สืบเนื่องจาก โพสนี้
เราต้องการที่สร้างโปรแกรมใส่ 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’, {})
แต่สิ่งที่เกิดขึ้นคือ
ไม่มีไฟล์ 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/)
![[Python] Django project: 03 Make it dynamic | mesodiar Avatar](https://mesodiar.com/wp-content/uploads/2024/03/cropped-279889319_100367276011470_5586276560094552666_n-1.png?w=40){kind=avatar}
Burasakorn Sabyeying (Mils) 
Leave a reply to [Python] Django project: 03 Make it dynamic | mesodiar Cancel reply