STACKPYTHON

สร้าง Django Web Blog ด้วย CKEditor - EP.2

ทำ web blog ด้วย Django ใช้งานร่วมกับ CKEditor

โดย Frameอัปเดต 3 ตุลาคม 2564
สร้าง Django Web Blog ด้วย CKEditor - EP.2

สวัสดีครับมาต่อกันเลยสำหรับ EP.2 วันนี้เราจะมาเริ่มทำหน้าเว็บกันนะครับสำหรับ framework ที่เราจะใช้ในวันนี้จะเป็น Bootstrap หรือ css framework ที่จะทำให้เราสามารถสร้างหน้าเว็บไซต์สวยๆได้อย่างง่ายดายเรามาเริ่มกันต่อจาก EP.1 กันเลย

ใช้งาน Bootstrap ร่วมกับ Django

โดยปกติแล้วใน Django เราจะสร้าง path ต่างๆหรือ url ให้กับเว็บไซต์ของเราผ่านไฟล์ urls.py ในตัวโฟลเดอร์ของ Myproject แต่เพื่อความเป็นระบบมากขึ้นเราจะย้าย urls.py ไปเก็บไว้ไหน app ของเราซึ่งสามารถทำได้ตามนี้ ก่อนอื่นให้เราสร้างไฟล์ urls.py ขึ้นมาในโฟลเดอร์ Mywevsite ของเรา

Mywebsite/    migrations    __init__.py    admin.py    apps.py    models.py    urls.py    views.py

จากนั้นให้เรากลับไปที่ไฟล์ urls.py ของ Myproject เพื่อทำการ include ไฟล์ urls.py ที่เราสร้างขึ้นใหม่เข้ามา

from django.contrib import admin
from django.urls import path, include # เพิ่มบรรทัดนี้
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('MyWebsite.urls')), # เพิ่มบรรทัดนี้
    
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

จากนั้นในไฟล์ urls.py ที่เราสร้างขึ้นใหม่ให้เขียน code ตามนี้เลย

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'), # views.index ดึงฟังก์ชั่น index จากไฟล์ views 
]

ตอนนี้เราได้ path สำหรับหน้าแรกของเราแล้วจากนั้นให้เราไปที่ไฟล์ views.py ใน MyWebsite ของเราซึ่งไฟล์นี้เราจะใช้ในการสร้างฟังก์ชั่นต่างๆในการทำงานของเว็บไฟล์เขียน code ในไฟล์ views.py ตามนี้ได้เลย

from django.shortcuts import render

def index(request): # ตั้งชื่อฟังก์ชั่นให้ตรงกับ path ใน urls.py
    return render(request, 'index.html') #เมื่อมีการทำงานของฟังก์ชั่น index มีถูก render ไปยัง index.html

ต่อไปเราก็มาสร้างไฟล์ html สำหรับเว็บไซต์แรกของเราได้แล้วให้เราทำการสร้างไฟล์ index.html ขึ้นมาในโฟลเดอร์ templates ของเราได้เลย

Mywebsite/    templates/         index.html

สำหรับพื้นฐานการเขียนเว็บไซต์หลักๆที่เราจะใช้กันผมอาจจะไม่ได้ลงรายละเอียดมากทุกคนสามารถไปศึกษาเพิ่มเติมได้ในเรื่องของ HTML และ css เป็นหลัก

ในไฟล์ index.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">
    <title></title>
</head>
<body>
    
</body>
</html>

โดยโครงสร้างหลักนั้นเราจะทำการวางโครงสร้างทั้งหมดไว้ใน เป็นหลักส่วนในเราจะใช้ในสร้างหรือ import ไฟล์ css ต่างๆ เข้ามาใช้งานเรามาทำเว็บไซต์ด้วย booststrap กันเลยก่อนอื่นให้เราไปที่เว็บไซต์ของ booststrap https://getbootstrap.com/

กดเลือกเวอร์ชั่นที่ต้องการซึ่งผมจะใช้เป็นเวอร์ชั่น 4.6.x เนื่องจาก เวอร์ชั่น 5.0 ยังเป็น beta อยู่

สิ่งที่เราต้องก็คือตัว CSS และ JS ให้เราทำการ copy code ทั้ง 2 ตัวมาได้เลย

CSS CDN

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

JS CDN

<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>

เสร็จแล้วนำ 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">
    <title>Home</title>
</head>
<body>
    <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>
</body>
</html>

เท่านี้เราก็พร้อมใช้งาน bootstrap แล้วง่ายมากๆ

วิธีใช้งานก็ง่ายมากให้เราดูที่ทางขวาของเว็บจะมีหัวข้อต่างๆให้เราเลือกใช้งาน

เรามาทดสอบ run เว็บไซต์ของเราก่อนได้เลยด้วยคำสั่ง

(env) python manage.py runserver

จากนั้นเปิดไปที่ http://127.0.0.1:8000/ ซึ่งตอนนี้หน้าเว็บของเราจะยังไม่มีอะไรขึ้นมาเป็นหน้าเว็บว่างๆอยู่เดียวเรามาเริ่มใช้ bootstrap กันเลยตัวที่เราจะใช้กันให้เราไปที่เมนูทางซ้ายของเว็บไซต์ bootstrap จากนั้นไปที่หัวข้อ layout > Overview

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

ต่อไปเราจะมาสร้างแทบข้างบนเว็บไซต์กันโดยผมจะใช้เป็น แทบที่ชื่อ Navbar อยู่ในส่วนของเมนู components > Navbar

นำ code มาใส่ลงใน tag container ก่อนหน้าได้เลย เราจะได้ 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">
    <title></title>
</head>
<body>
    <div class="container">
      <!-- As a link -->
      <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
      </nav>
    </div>
    <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>
</body>
</html>

จากนั้นกด save แล้วลอง run server กันเลย

เท่านี้เราก็ได้ตัวอย่างหน้าเว็บไซต์สำหรับพร้อมใช้งานแล้วเดียวมาต่อกัน EP.3 เร็วๆนี้