สร้าง 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 นั้นเองเราสามารถไปศึกษาเพิ่มเติมได้

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

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

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