Thiết kế hoàn chỉnh Blog trong Python Django

Lập trình web với Python bằng Django

5.0 (1 đánh giá)
Tạo bởi Lê Châu Cập nhật lần cuối 11:08 06-10-2019 13.048 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

Thiết kế hoàn chỉnh Blog trong Python Django

Ghi chú

Nội dung bài viết bạn đang xem được update từ tháng 06/2019. Vì vậy sẽ có đôi chút khác biệt giữ VIDEO và NỘI DUNG BÀI VIẾT.

Chúng ta sẽ có nhiều cập nhập hơn về cả bài viết lẫn video trong thời gian tới. Nhớ like/ share hoặc đánh giá 5 sao để Kteam có động lực nhé! 

Cảm ơn các bạn! 


Dẫn nhập

Ở bài trước, chúng ta đã tìm hiểu về FILE TĨNH VÀ THIẾT KẾ WEB BẰNG BOOTSTRAP TRONG PYTHON DJANGO.

Trong bài viết hôm nay, Kteam sẽ Hoàn thiện thiết kế blog để phục vụ việc học trong Python Django.


Nội dung

Để theo dõi bài này tốt nhất, bạn nên xem qua bài:

Bài này sẽ giới thiệu những nội dung sau:

  • Thiết kế Slider Bar
  • Thiết kế Footer
  • Tạo web page từ thông tin đã thiết kế

Thiết kế Slider Bar

Slider Bar trong website là nơi hiển thị những mục chính trong trang web, từ những mục này giúp người dùng dễ tìm kiếm thông tin muốn tìm.

Yêu cầu Slider Bar phải ‘fixed’ trên trang web, để khi trang web quá dài và người dùng kéo xuống dưới, thì Slider Bar vẫn ‘đứng yên’ ở màn hình cho người dùng vẫn có thể lựa chọn bất cứ lúc nào. Ta sẽ sử dụng Slider Bar của Bootstrap như sau:

<div class="bs-sliderbar" style="background-color: #ffffff;>
    <ul class="nav flex-column">
        <li><a href="/redirect?Id=ockOPgmf%2bYcKOZ%2bjTTUlZHvO8ZR7NgpHNjdzDYB9hhE%3d" tin cá nhân</a></li>
        <li><a href="/redirect?Id=rV4G3fH4LY9jEK6er9LuCS%2fuNxuw%2bsUsL5a9reRjWUM%3d" viết</a></li>
        <li><a href="/redirect?Id=PII9ejNqWVU0YlQIwjPwBbWrzxYivFAssvxR%2f4VLBGM%3d" hệ</a></li>
    </ul>
</div>

Bây giờ, Kteam muốn Slide Bar nằm ở bên trái, thông tin chính nằm ở bên phải, từ thẻ div row chia ngang ở bài trước. Kteam sẽ hoàn thiện như sau:

<br/>
<div class="row">
    <div class="col-sm-2">
         <div class="bs-sliderbar" style="background-color: #ffffff;">
             <ul class="nav flex-column">
                 <li><a href="/redirect?Id=ockOPgmf%2bYcKOZ%2bjTTUlZHvO8ZR7NgpHNjdzDYB9hhE%3d" tin cá nhân</a></li>
                 <li><a href="/redirect?Id=rV4G3fH4LY9jEK6er9LuCS%2fuNxuw%2bsUsL5a9reRjWUM%3d" viết</a></li>
                 <li><a href="/redirect?Id=PII9ejNqWVU0YlQIwjPwBbWrzxYivFAssvxR%2f4VLBGM%3d" hệ</a></li>
             </ul>
         </div>
     </div>
     <div class="col-sm-10">
           {% block content %}
      
           {% endblock %}
     </div>
</div>

Thiết kế Footer

Bây giờ Kteam sẽ để footer có những link liên kết như sau:

Ta sẽ để thẻ footer nằm trong body ở dưới cùng:

<footer>
    <div class="container-fluid">
        <a href="/redirect?Id=6U%2fmjnomkcLNhYuCvRy2AyVPdtNybWqOzxEqDEZJIlyKQL21E855mOksJV66zohA" | <a href="/redirect?Id=6U%2fmjnomkcLNhYuCvRy2A7pB2GqsMYbG5BSh%2bkby54ixeR8n%2fJqm7bzH%2bNfTYHLN" | <a href="/redirect?Id=6U%2fmjnomkcLNhYuCvRy2Aw4nvdeGx3O9EZkOGYSSxloDxvDNvLW0usazWZd5AIMx"
    </div>
</footer>

Bây giờ ta phải xử lý làm sao để footer nằm ở dưới cùng. Đầu tiên, ta phải cho thẻ html, body phải hiện thị 100% bề dọc, cho dù thông tin có ít hay không. Ở thẻ header, ta thêm style css như sau:

<style>
    html, body {
        height: 100%;
        background-color: #f6f6f6;
    }
</style>

Sau đó, ta cho thẻ div đầu tiên trong body có class container-fluid chiếm bề dọc ít nhất 95%, để 5% còn lại cho footer. Như vậy footer sẽ luôn nằm dưới đáy trang web

Như vây: ta đã hoàn thành việc thiết kế blog


Tạo web page từ design đã thiết kế

Bây giờ ta thử tận dụng design mà ta vừa thiết kế được làm một web page. Ở trang chủ (url ‘/’) mình sẽ hiển thị thông tin cá nhân, còn ở url ‘/contact’ thì sẽ hiển thị thông tin liên hệ

Ở file home.html, mình sẽ sửa lại như sau:

{% extends "pages/base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<p>Tên: Lê Bảo Châu</p>
<p>Năm: 1997</p>
<p>Trường: Đại học sư phạm kỹ thuật Tp.HCM</p>   
{% endblock %}

Ngoài ra, mình sẽ thêm 1 file contact.html như sau:

{% extends "pages/base.html" %}

{% block title %}Contact{% endblock %}

{% block content %}
<p>Liên hệ email:</p>
<p>chau123@gmail.com</p>
{% endblock %}

Ở file views.py, Ta sẽ viết thêm hàm để thực thi khi truy cập url ‘/contact’:

def contact(request):
   return render(request, 'pages/contact.html')

Ở file urls.py trong app home, tạo đường dẫn path contract:

urlpatterns = [
   path('', views.index),
   path('contact/', views.contact),
]

Bây giờ, ta runserver và thử vào mục Thông tin cá nhân hoặc Liên hệ để xem kết quả:


Kết

Như vậy Kteam đã hướng dẫn các bạn xong cách thiết kế website đơn giản bằng Bootstrap.

Ở bài tiếp theo, Kteam sẽ giới thiệu cho các bạn DÙNG MODEL TẠO DATABASE TRONG PYTHON DJANGO.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.


Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Nội dung bài viết

Tác giả

Quan tâm lập trình và lịch sử.

Thích xem Anime, Marvel DC,..

Khóa học

Lập trình web với Python bằng Django

Lập trình web với Python bằng Django

Đánh giá

duykhanh992 đã đánh giá 19:38 01-03-2019

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.