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