Thiết kế web 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:

• GIỚI THIỆU VỀ PYTHON DJANGO
• TẠO PROJECT VỚI PYTHON DJANGO
• TẠO WEB APP VÀ XỬ LÝ KHI NGƯỜI DÙNG YÊU CẦU TRUY CẬP TRONG PYTHON DJANGO
• SỬ DỤNG TEMPLATE VÀ JINJA TRONG PYTHON DJANGO
• FILE TĨNH VÀ THIẾT KẾ WEB BẰNG BOOTSTRAP TRONG PYTHON DJANGO

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>



1

2

3

4

5

6

7

8

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

     </div>
{% endblock %}

</div>



1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

---

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>



1

2

3

4

5

6

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>



1

2

3

4

5

6

7

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



1

2

3

4

5

6

7

8

9

10

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



1

2

3

4

5

6

7

8

9

Ở 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')



1

2

3

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

urlpatterns = [

   path('', views.index),

   path('contact/', views.contact),

]



1

2

3

4

5

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.