สวัสดีครับสำหรับใน EP.3 นี้เราจะมาสร้าง Web Blog ของเราให้เสร็จกันโดยในวันนี้เราจะมาสร้างหน้าเว็บไซต์ของเรากันต่อพร้อมติดตั้งเครื่องมือ CKEditor ที่จะช่วยให้เราสามารถเขียน Blog ได้อย่างอิสระมากขึ้น
มาสร้างหน้าเว็บไซต์กันต่อ
```python
ผมได้ใช้ class ของ bootstrap ที่ชื่อ card ในสร้างกล่องขึ้นมาเพื่อความสวยงามและใช้การแสดงเนื้อหาข่าวสารของเราซึ่งเพื่อนๆ อาจจะใช้ตัวอื่นก็ได้ลองศึกษากันได้เลย
นี้ก็เป็นตัวอย่างง่ายๆในการใช้ bootstrap ในการสร้างเว็บไซต์ทุกคนจะเห็นว่า bootstrap นั้นช่วยให้เราสามารถสร้างเว็บไซต์ได้อย่างง่ายดายเพียงไม่กี่ขึ้นตอน
ต่อไปเราก็มาทำในส่วนของ Django กันต่อเลยเราจะเห็นว่าตอนนี้หน้าเว็บของเรายังไม่ได้มีการเชื่อมกับฐานข้อมูลหรือเนื้อหา Blog ของเราเลยเดียวเรามาเขียน code เชื่อมฐานข้อมูลกัน
ให้ทุกคนไปเพิ่มข้อมูลในฐานข้อมูลไว้สัก 3 อัน
จากนั้นมาเริ่มกันเลยที่ไฟล์ views.py เราต้องทำการ import ข้อมูลจากฐานข้อมูบของเราที่อยู่ในไฟล์ models.py มาก่อนเพื่อที่เราจะได้เข้าถึงฐานข้อมูลได้
from django.shortcuts import renderfrom .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/bootstrap@4.6.0/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/bootstrap@4.6.0/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/bootstrap@4.6.0/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/bootstrap@4.6.0/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 pathfrom . import viewsurlpatterns = [ 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/bootstrap@4.6.0/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/bootstrap@4.6.0/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 adminfrom .models import TablesNewsfrom ckeditor.widgets import CKEditorWidgetfrom 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 = PostAdminFormadmin.site.register(TablesNews, PostAdmin)ส่วนต่อมาก็คือ models.py ทำการเปลี่ยน model ให้กับตัว detail ของเรา
from django.db import modelsfrom 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/bootstrap@4.6.0/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/bootstrap@4.6.0/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 https://github.com/django-ckeditor/django-ckeditor