สวัสดีครับวันนี้ทาง stackpython จะพาทุกคนมาสร้าง Workshop ง่าย ๆ ด้วย Django กันนะครับสำหรับใครทึ่มีพื้นฐานอยู่แล้วก็สามารถนำไปต่อยอดในโปรเจคของตัวเองได้อย่างแน่นอนโดย workshop ในวันนี้จะเป็นการสร้าง Web Blog ง่าย ๆ โดยใช้ WYSIWYG ที่มีชื่อว่า CKEditor ซึ่งจะช่วยใหเราสามารถสร้าง Blog ข่าวสารหรือข้อมูลต่างๆ ให้มีประสิทธิภาพมากขึ้น

เริ่มกันเลย

ขั้นตอนแรกเรามาสร้างโปรเจคกันก่อนโดยแน่นอนเราจะขาดไปไม่ได้เลยก็คือ django framework ของเรานั้นเองให้เราทำการติดตั้งให้เรียบร้อย

(env) pip install django

จากนั้นก็ทำการสร้างโปรเจคหลัก

(env) django-admin startproject Myproject .

แล้วก็สร้าง app สำหรับเก็บเว็บไซต์ของเรา

(env) cd Myproject

(env) python manage.py startapp MyWebsite

เสร็จแล้วเราก็จะได้โครงสร้างโปรเจคของเราตามนี้

Myproject/
    __init__.py
    asgi.py
    settings.py
    urls.py
    wsgi.py
Mywebsite/
    migrations
    __init__.py
    admin.py
    apps.py
    models.py
    views.py

สร้าง folder ชื่อ static และ templates ใน folder MyWebsite

Myproject/
    __init__.py
    asgi.py
    settings.py
    urls.py
    wsgi.py
Mywebsite/
    migrations
    static
    templates
    __init__.py
    admin.py
    apps.py
    models.py
    views.py

ตั้งค่า setting ต่างๆให้กับ Django ไปที่ settings.py

เพิ่ม 'MyWebsite' ใน INSTALLED_APPS[...]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'MyWebsite',  # Oup app
]

ทำการเปลี่ยน TIME_ZONE

TIME_ZONE = 'Asia/Bangkok'

ตั้งค่า path static media ต่างๆ เพิ่ม code ข้างล่างลงไปได้เลย

STATICFILES_DIRS = [Path.joinpath(BASE_DIR, 'MyWebsite/static')]
STATIC_ROOT = Path.joinpath(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = Path.joinpath(BASE_DIR, 'MyWebsite/static/media')

ไปที่ urls.py เพื่อทำการ import setting และ static เข้ามา

from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
    path('admin/', admin.site.urls),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

เท่านี้ก็เรียบร้อยสำหรับการตั้งค่าต่างๆ ทีนี้เราก็สามารถเริ่มทำโปรเจคของเราได้แล้ว

ลอง runserver ของเราดู

(env) python manage.py runserver

เราจะได้ ip localhost มานั้นคือ http://127.0.0.1:8000/

เราเข้าลองกดเข้าไปที่ http://127.0.0.1:8000/admin

หากขึ้นหน้าแบบก็โอเครแต่ตอนนี้เรายังไม่สามารถ login หน้า Admin ได้เราต้องมาสร้างฐานข้อมูลของเราขึ้นมาก่อนซึ่งส่วนที่เราจะในการสร้างฐานข้อมูลต่างๆ ก็คือไฟล์ models.py นั้นเองให้เราทำการเปิดขึ้นมาเราจะทำการสร้างฐานข้อมูลกัน

class TablesNews(models.Model):
    photo = models.ImageField(upload_to='Photo', default='') # เก็บข้อมูลชนิดรูปภาพแล้วอัพโหลดไปยังโฟลเดอ Photo
    title = models.CharField(max_length=1000) # เก็บข้อมูลประเภท Char มีขนาดมากสุด 1000 ตัวอักษร
    detail = models.TextField() # เก็บข้อมูลประเภท text
    date = models.DateTimeField(auto_now_add=True, blank=False) # เก็บข้อมูลประเภท Date หรือ วันเวลามีการอัพเดทครั้งเดียวคือตอนบันทึกข้อมูล
    date_updated = models.DateTimeField(auto_now=True, blank=False) # เก็บข้อมูลประเภท Date หรือวันเวลามีการอัพเดททุกครั้งที่มีการแก้ไขข้อมูล

    def __str__(self):
        return self.title # แสดงข้อมูล title ทีหน้า admin

จากนั้นเราจะยังไม่สามารถสร้างฐานข้อมูลได้เนื่องจากฐานข้อมูลของเรามีการทำงานเกี่ยวกับไฟล์ในส่วนของ ImageField เราต้องทำการติดตั้ง library ที่ชื่อ Pillow ก่อน ทำการติดตั้งให้เรียบร้อย

(env) pip install Pillow

เมื่อติดตั้งเสร็จแล้วเราก็ทำการสร้างฐานข้อมูลของเราได้เลยด้วยคำสั่ง

(env) python manage.py makemigrations

และต่อด้วยคำสั่ง

(env) python manage.py migrate

เท่านี้เราก็สร้างฐานข้อมูลของเราเรียบร้อยแล้วต่อไปเรามาสร้าง user admin สำหรับใช้ login เข้าหน้า admin เพื่อจัดการฐานข้อมูลของเรากันด้วยคำสั่ง

(env) python manage.py createsuperuser

เมื่อพิมพ์คำสั่งเรียบร้อยระบบจะเด้งคำถามให้เรากรอดข้อมูลนั้นคือ username emaill และ password ( password จะไม่แสดงตอนพิมพ์ไม่ต้องตกใจ )

Username (leave blank to use 'ff'): admin
Email address: admin@gmail.com
Password: 
Password (again):
Superuser created successfully.

เสร็จแล้วเราก็ runserver ของเราอีกครั้งและไปที่หน้า Admin ของเราและทำการ login ด้วย username ที่เราสร้างขึ้นมาได้เลย

ถ้าเรา login สำเร็จเราก็จะได้หน้า admin ประมาณนี้ก็โอเครแต่ตอนนี้เราจะยังมองไม่เห็นฐานข้อมูลของเราเราต้องมีการเพิ่มบ้างส่วนก่อน

ให้เราไปที่ไฟล์ admin.py เพิ่ม code ตามนี้ได้เลย

from .models import TablesNews
admin.site.register(TablesNews) # ดึงฐานข้อมูลของตาราง TablesNews ไปยังหน้า Admin

เสร็จแล้วกด save แล้วไปดูที่หน้า admin

เราก็จะเห็นตาราง tablesnews ของเราแล้วลองกดปุ่ม +Add ข้างหลังดู

เท่านี้เราก็มีหน้าสำหรับจัดการข่าวสารหรือบทความของเราแล้วลองกรอกข้อมูลดูได้เลย

เท่านี้ก็เรียบร้อยสำหรับใน EP.1 ขอจบลงเท่านี้ก่อนเดียวเจอกันใน EP.2 นะครับขอบคุณมากครับ