mesodiar

Having me on those pictures are the prove that I was there

Tag: python

[Python] Django project: 03 Make it dynamic

2016-12-27-180347-801168

สิ่งที่เราต้องการคืออยากให้ข้อมูลเก็บลงใน 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

Read More

[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

[code language=”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>

[/code]

โดยการรับ 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

[code language=”python”]

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"})

[/code]

ครั้งแรกที่เข้า 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

[Python] Django Project : 01 Setting up

Django คืออะไร ?

Django คือ open source web framework ตัวหนึ่งที่

1. ฟรี

2. เขียนด้วย Python

framework คืออะไร?

framework คือตัวช่วยในการสร้าง websites ที่ทำให้งานเราง่ายขึ้นและสะดวกขึ้น ตัวอย่างเข่น ระบบ authentication ( sign up, sign in, บลาๆ ), การจัดการ form บน website หรือแม้การโหลดไฟล์ก็ตาม

ทำให้ปัญหาเดิมๆที่เราต้องเผชิญเวลาสร้าง websites ใหม่ๆมีน้อยลงด้วยการใช้ของสำเร็จที่ django เขาสร้างมาเรียบร้อยแล้ว

Installation

  1. install python

install Homebrew  ลง package manager ก่อนเลย เพื่อลง Setuptools และ pip ให้เรา

$ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)

และลง python3

$ brew install python3

2. install virtualenv

สร้าง virtual environment สำหรับ project เรา

$ mkdir django_project

$ cd django_project

$ virtualenv venv 

(http://docs.python-guide.org/en/latest/dev/virtualenvs/)

คำสั่งนี้ virtualenv venv จะ สร้าง folder ใน current directory

และเราจะเลือกใช้ Python3 ในนี้  ด้วยคำสั่ง

virtualenv -p python3 venv

3. install Django

คราวนี้เมื่อเราได้ virtualenv สร้าง environment เรียบร้อยแล้ว เราก็มาลง Djangoกันได้เลย

แต่แน่นอน ก่อนอื่นต้องมั่นใจว่าเราได้ pip เวอร์ชั่นล่าสุดก่อน

$pip install –upgrade pip

$ pip install django

ถ้า django ถูกลงแล้ว จะต้องเห็น version

$ python -m django –version

เริ่มโปรเจคกัน

อย่าลืมว่าเราต้องรันทุกอย่างของโปรเจคนี้ใน virtualenv จึงต้อง activate กันก่อน

เข้าไปใน directory ที่แล้วต้องการแล้ว

source myvenv/bin/activate

ต่อด้วย

(venv)   django_project$  django-admin startproject mysite .

คำสั่งนี้จะ auto-generate โค้ดเพื่อสร้าง Django Project ให้แก่เรา

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        wsgi.py

# ต้องใช้ . ด้วย เพื่อบอก script ว่า install django ใน current directory นะ และทำให้ไฟล์ manage.py ก็จะมาอยู่ใน directory นี้ ซึ่งเป็นตัวสำคัญที่ต่อไปจะเป็นตัว start server ให้

# django-admin.py คือสคริปต์ที่จะสร้าง directory แล้ว file ให้เรา

# settings.py คือ configuration ของ website

แก้ Configuration เรื่อง Time zone กันก่อน

# เข้า mysite/settings.py ไป set เวลา timezone เซตที่ TIME_ZONE = ‘Asia/Bangkok

# ตรง debug = True

ALLOW_HOSTED = [’127.0.0.1’]

ตัว allowed_hosts เหมือนเป็นการระบุ whitelist ของ domain ว่า site ไหนปลอดภัยแก่การ respond ซึ่งตัว Django นั้นเองเป็นคนสร้าง security ตัวนี้เพื่อป้องกันปัญหาเรื่อง Phishing attack นั่นเอง

Phishing ออกเสียงเหมือน Fishing เป็นการตกเบ็ด นั่งรอเฉยๆเพื่อให้เหยื่อเข้ามาหาเอง อย่างเช่น การที่สร้าง websites ปลอม หน้าตาดูเชื่อถือ เพื่อให้เราเชื่อแล้วกรอกข้อมูลส่วนตัว คนรอเบ็ดก็วินไปได้ข้อมูลเราไปใช้ทำมิดีมิร้ายด้าย

(https://www.djangoproject.com/weblog/2013/feb/19/security/)

เซต database 

เข้ามาใน mysite/settings.py

เราเลือกใช้ SQLite เพราะเป็น default ของ python อยู่แล้ว ไม่ต้องทำอะไรเพิ่ม แต่ถ้าอยากได้ database ที่ scalable กว่าก็เลือก PostgreSQL ไปนะแจ๊ะ

DATABASES = {

    ‘default’: {

        ‘ENGINE’: ‘django.db.backends.sqlite3’,  // ไม่ก็ ‘django.db.backends.postgresql’

        ‘NAME’: os.path.join(BASE_DIR, ‘db.sqlite3’), // ถ้าใช้ sqlite3 ตัว database จะสร้างไฟล์ลงในเครื่องของเราให้เลย

    }

}

ถ้าใช้นอกเหนือ SQLite ล่ะก็ ต้องรันคำสั่ง “CREATE DATABASE database_name;” ด้วยนะ

Migrate 

ในส่วนต้นๆของไฟล์ ที่ INSTALLED_APPS จะมีชื่อของ Django Applications ต่างๆมาเป็น default ให้อยู่ละ

พวก apps เหล่านี้จะต้องใช้ database เราจึงต้อง create database ขึ้นมาถึงจะใช้ apps เหล่านี้ได้

$ python manage.py migrate

( ต้องอยู่ที่ๆมี manage.py นะแจ๊ะ)

คำสั่งนี้จะ create และ update database ไปในตัว

Start web server

มาดูหน่อยซิว่า work ไหม

(venv)   django_project$ python manage.py runserver

เปิดเข้าไปใน http://127.0.0.1:8000/ แล้วก็จะพบกับ

screen-shot-2559-12-23-at-4-30-24-pm

happy-crying-face-meme-11

เย้

Powered by WordPress & Theme by Anders Norén