สร้าง Django Web Blog ด้วย CKEditor-Ep จบ

S T A C K P Y T H O N

Frame
June 1, 2021

สร้าง Django Web Blog ด้วย CKEditor-Ep จบ

สวัสดีครับสำหรับใน EP.3 นี้เราจะมาสร้าง Web Blog ของเราให้เสร็จกันโดยในวันนี้เราจะมาสร้างหน้าเว็บไซต์ของเรากันต่อพร้อมติดตั้งเครื่องมือ CKEditor ที่จะช่วยให้เราสามารถเขียน Blog ได้อย่างอิสระมากขึ้น

มาสร้างหน้าเว็บไซต์กันต่อ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <title></title>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-light bg-light mt-2 mb-2">
        <a class="navbar-brand" href="#">Blog</a>
      </nav>
      <div class="card  mb-2">
        <div class="card-body">
          <img src="https://res.cloudinary.com/frame-dev/image/upload/v1617038048/img-index/james-harrison-vpOeXr5wmR4-unsplash_xglsew.jpg" class="img-fluid" alt="...">
          <h3 class="card-title">Card title</h3>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <a href="#" class="btn btn-primary">Card link</a>
        </div>
      </div>
    </div>
  </body>
</html>

ผมได้ใช้ class ของ bootstrap ที่ชื่อ card ในสร้างกล่องขึ้นมาเพื่อความสวยงามและใช้การแสดงเนื้อหาข่าวสารของเราซึ่งเพื่อนๆ อาจจะใช้ตัวอื่นก็ได้ลองศึกษากันได้เลย

นี้ก็เป็นตัวอย่างง่ายๆในการใช้ bootstrap ในการสร้างเว็บไซต์ทุกคนจะเห็นว่า bootstrap นั้นช่วยให้เราสามารถสร้างเว็บไซต์ได้อย่างง่ายดายเพียงไม่กี่ขึ้นตอน

ต่อไปเราก็มาทำในส่วนของ Django กันต่อเลยเราจะเห็นว่าตอนนี้หน้าเว็บของเรายังไม่ได้มีการเชื่อมกับฐานข้อมูลหรือเนื้อหา Blog ของเราเลยเดียวเรามาเขียน code เชื่อมฐานข้อมูลกัน

ให้ทุกคนไปเพิ่มข้อมูลในฐานข้อมูลไว้สัก 3 อัน

จากนั้นมาเริ่มกันเลยที่ไฟล์ views.py เราต้องทำการ import ข้อมูลจากฐานข้อมูบของเราที่อยู่ในไฟล์ models.py มาก่อนเพื่อที่เราจะได้เข้าถึงฐานข้อมูลได้

from django.shortcuts import render
from .models import TablesNews 
# Create your views here.
def index(request):
    blog = TablesNews.objects.all() # สร้างตัวแปร blog เพื่อเก็บข้อมูลได้ที่จากฐานข้อมูล
    data = {
        "blog":blog
    }
    return render(request, 'index.html', {'data':data}) # ส่งข้อมูลในรูปแบบ object

ทำการเขียน code ตามนี้ได้เลยโดยเราจะมีการประกาศตัวแปรสำหรับเก็บค่าที่จะได้จากฐานข้อมูลแล้วทำการส่งค่านั้นไปแสดงผลที่หน้าเว็บไซต์ของเรา

มาเขียน code สำหรับหน้าเว็บไซต์กัน

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <title></title>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-light bg-light mt-2 mb-2">
        <a class="navbar-brand" href="#">Blog</a>
      </nav>
      {% for i in data.blog %}
      <div class="card  mb-2">
        <div class="card-body">
          <img src="{{i.photo.url}}" class="img-fluid" alt="...">
          <h3 class="card-title">{{i.title}}</h3>
          <h6 class="card-subtitle mb-2 text-muted">{{i.date}}</h6>
          <a href="#" class="btn btn-primary">อ่าน</a>
        </div>
      </div>
      {% endfor %}
    </div>
  </body>
</html>

สำหรับทางฝั่งของหน้าเว็บไซต์นั้นเราต้องมีการใช้ forloop เพื่อทำการเข้าถึง object หรือข้อมูลที่เราส่งมาและแทนที่ข้อมูลนั้นลงใน tag ต่างๆตามตัวอย่างจะเห็นว่าผมได้ทำการเข้าถึงข้อมูลด้วยตัวแปร i ซึ่งมาจาก {% for i in data.blog %} ซึ่งก็คือการเขียน python ในหน้าเว็บไซต์หรือไฟล์ html ที่เรียกกันว่า django template นั้นเองเราสามารถไปศึกษาเพิ่มเติมได้

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

สร้างเว็บไซต์แสดงเนื้อหาบทความ

ให้เราสร้างไฟล์ views.html ขึ้นมาแล้วทำการวางโครงสร้างแบบที่เราเคยทำกันไว้ได้เลย

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <title></title>
  </head>
  <body>
    <div class="container">
     
    </div>
  </body>
</html>

หลังการจากนั้นก็มาสร้าง path สำหรับไฟล์ view.html กันไปที่ views.py เพื่อสร้างฟังค์ชั่นสำหรับ path ของเราและทำการสร้าง path ที่ urls.py ตามนี้ได้เลย

ที่ไฟล์ views.py

def view(request, id=None):
    blog = TablesNews.objects.filter(id=id) #ค้นหาข้อมูลตาม id ที่ได้มา
    data = {
        "blog":blog
    }
    return render(request, 'view.html', {'data':data})

ทำการสร้างฟังค์ชั่นและมีการรับตัวแปร id เข้ามาใช้งานสำหรับสร้างเงื่อนไขในการค้นหาข้อมูลตามที่เราต้องการแล้วส่งข้อมูลไปยังไฟล์ views.html ของเรา

ที่ไฟล์ urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('view/<int:id>', views.view, name='view'), # เพิ่ม path และรับค่า id เข้ามาด้วย
]

จากนั้นให้เรากลับไปที่ไฟล์ index.html ของเราเพื่อแก้ไข้ปุ่ม อ่าน ให้ลิ้งไปยังตัวเนื้อหาข่าวได้

<a href="/view/{{i.id}}" class="btn btn-primary">อ่าน</a>

ที่เราก็ว่าทำหน้าแสดงเนื้อหาบทความของเราที่ไฟล์ views.html ได้เลยโดยการเขียนก็คล้ายๆกับไฟล์ index.html เขียน code ตามนี้ได้เลย

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <title></title>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-light bg-light mt-2 mb-2">
        <a class="navbar-brand" href="#">Blog</a>
      </nav>
     {% for i in data.blog %}
     <img src="{{i.photo.url}}" class="img-fluid" alt="...">
          <h2>{{i.title}}</h2>
          <p>{{i.detail}}</p>
     {% endfor %}
    </div>
  </body>
</html>

เสร็จแล้วไปที่หน้าเว็บไซต์ของเราแล้วลองกด "อ่าน" ได้เลย

เพียงเท่านี้เราก็ได้หน้าสำหรับแสดงเนื้อหาบทความของเราแล้วแต่ว่าตอนนี้เราสามารถเขียนบทความได้เพียงแค่รูปแบบข้อความปกติธรรมดาทั่วไปเท่านั้น เพราะงั้นเราจึงจำเป็นต้องใช้เครื่องมืออย่างหนึ่งที่มีชื่อว่า CKEditor ที่จะช่วยให้เราสามารถเขียนบทความออกมาในรูปแบบที่เยอะขึ้นและสวยงามมากขึ้นนั้นเอง เรามาเริ่มกันเลย

CKEditor

การติดตั้ง CKEditor นั้นอาจจะมีหลายๆ ส่วนที่เราต้องแก้ไขแต่ก็ไม่ได้ยากก่อนอื่นให้เราทำการติดตั้ง CKEditer ก่อนด้วยคำสั่ง

pip install django-ckeditor

จากนั้นไปที่ไฟล์ settings.py ตั้งค่าตามนี้ได้เลย

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'MyWebsite',
    'ckeditor' # เพิ่ม
]

และ

CKEDITOR_BASEPATH = "/static/ckeditor/ckeditor/"
CKEDITOR_UPLOAD_PATH = "uploads/"
X_FRAME_OPTIONS = 'SAMEORIGIN'
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',
        'width': '100%',
        'height': '500px',
    },
}

เสร็จแล้วไปที่ไฟล์ urls.py ในโปรเจคทำการเพิ่ม path ตามนี้

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('MyWebsite.urls')),
    path('ckeditor/', include('ckeditor_uploader.urls')), #เพิ่ม
    
]

ต่อไปที่ admin.py ทำการตั้งค่า forms ให้กับหน้า admin ของเรา

from django.contrib import admin
from .models import TablesNews

from ckeditor.widgets import CKEditorWidget
from django import forms
# Register your models here.

class PostAdminForm(forms.ModelForm):
    news_detail = forms.CharField(widget=CKEditorWidget())

    class Meta:
        model = TablesNews
        fields = '__all__'

class PostAdmin(admin.ModelAdmin):
    news_detail = PostAdminForm

admin.site.register(TablesNews, PostAdmin)

ส่วนต่อมาก็คือ models.py ทำการเปลี่ยน model ให้กับตัว detail ของเรา

from django.db import models
from ckeditor.fields import RichTextField #เพิ่ม
# Create your models here.
class TablesNews(models.Model):
    photo = models.ImageField(upload_to='Photo', default='')
    title = models.CharField(max_length=1000)
    detail = RichTextField()  #เปลี่ยน
    date = models.DateTimeField(auto_now_add=True, blank=False)
    date_updated = models.DateTimeField(auto_now=True, blank=False)

    def __str__(self):
        return self.title

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

python manage.py makemigrations

และ

python manage.py migrate

เมื่อเรียบร้อยแล้วส่วนสุดท้ายที่เราต้องแก้ไขก็คือ view.html ทำการเปลี่ยนตัว detail ของเราให้เป็น

{{ i.detail|safe }}

ตามนี้เลย

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <title></title>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-light bg-light mt-2 mb-2">
        <a class="navbar-brand" href="#">Blog</a>
      </nav>
     {% for i in data.blog %}
     <img src="{{i.photo.url}}" class="img-fluid" alt="...">
          <h2>{{i.title}}</h2>
          {{ i.detail|safe }}
     {% endfor %}
    </div>
  </body>
</html>

เพียงเท่านนี้ก็เรียบร้อบไปทดสอบ runserver ของเราแล้วไปที่หน้า admin ได้เลย

เรียบร้อยเท่านี้เราก็มีเครื่องมือต่างๆให้ใช้ในการปรับแต่งบทความของเราแล้วไปทดสอบกันเลย

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

สำหรับ CKEditor ศึกษาเพิ่มเติมได้ที่นี้ https://github.com/django-ckeditor/django-ckeditor

Source Code project

กิจกรรมที่กำลังจะมาถึง

ไม่พลาดกิจกรรมเด็ด ๆ ที่น่าสนใจ

Python Bundle 2023 สมัครครั้งเดียวเรียนได้ทุกคอร์ส

Event นี้จะเริ่มขึ้นใน April 25, 2023

รายละเอียดเพิ่มเติม/สมัครเข้าร่วม

คำอธิบาย

คอร์สเรียนไพธอนออนไลน์ที่เราได้รวบรวมและได้ย่อยจากประสบการณ์จริงและเพื่อย่นระยะเวลาในการเรียนรู้ ลองผิด ลองถูกด้วยตัวเองมาให้แล้ว เพราะเวลามีค่าเป็นอย่างยิ่ง พร้อมด้วยการซัพพอร์ตอย่างดี

สร้าง Django Web Blog ด้วย CKEditor-Ep จบ

มาสร้างหน้าเว็บไซต์กันต่อ

Python Bundle 2023 สมัครครั้งเดียวเรียนได้ทุกคอร์ส

คำอธิบาย

STACKPYTHON

Focusing On

Partner

สร้าง Django Web Blog ด้วย CKEditor-Ep จบ

﻿มาสร้างหน้าเว็บไซต์กันต่อ

Python Bundle 2023 สมัครครั้งเดียวเรียนได้ทุกคอร์ส

คำอธิบาย

STACKPYTHON

Focusing On

Partner

มาสร้างหน้าเว็บไซต์กันต่อ