Sử dụng View và Template trong Django - Information Technology Seeker

Trong bài Sử dụng Model trong Django, chúng ta đã làm quen với một thành phần trong kiến trúc MVT của Django là M (Model). Trong bài này, chúng ta sẽ thực hành sử dụng hai thành phần còn lại là V(View) và T (Template).

Tại bài Sử dụng Model trong Django, chúng ta đã tạo Stock table (sqlite3 table) cho ứng dụng StockApp và thêm dữ liệu là mã chứng khoán VNM và VCB vào table này. Trong bài này, chúng ta sẽ viết tiếp View và Template cho StockApp để hiển thị thông tin về mã chứng khoán dưới dạng table.

Đối với View của ứng dụng, ta viết hàm getStockInfo() trong file StockApp/views.py như sau:

from .models import Stock
from django.http import HttpResponse
from django.template import loader


# Create your views here.
def getStockInfo(request):
    # Get data from Stock table database
    stock_info = Stock.objects.all()
    # Load template for the view
    template = loader.get_template('stock_info.html')
    # Value to add to the template context
    context = {
        'stock_info': stock_info,
    }
    return HttpResponse(template.render(context, request))

from .models import Stock

from django.http import HttpResponse

from django.template import loader

# Create your views here.

def getStockInfo(request):

# Get data from Stock table database

stock_info = Stock.objects.all()

# Load template for the view

template = loader.get_template('stock_info.html')

# Value to add to the template context

context = {

'stock_info': stock_info,

}

return HttpResponse(template.render(context, request))

Để tạo template cho một ứng dụng, trước hết ta cần tạo thư mục templates trong thư mục của ứng dụng StockApp(tạo thư mục StockApp/templates). Sau đó ta tạo file stock_info.html để viết giao diện hiển thị cho ứng dụng như sau (các bạn tham khảo syntax của Django template tại đây):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Stock Information</title>
        <!-- Load CSS  -->
        {% load static %}
        <link rel="stylesheet" href="{% static 'css/stock_info.css' %}">
    </head>
    <body>
        <h2> STOCK INFORMATION </h2>
        <!--  Table to display stock information  -->
        <div class="stock_info_table">
            <table>
              <tr>
                <th>Name</th>
                <th>ROE</th>
                <th>PB</th>
                <th>Company</th>
              </tr>
                {% for stock in stock_info %}
                <tr>
                    <td>{{ stock.name}}</td>
                    <td>{{ stock.roe}}</td>
                    <td>{{ stock.pb}}</td>
                    <td>{{ stock.company}}</td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Stock Information</title>

{% load static %}

</head>

<body>

<h2> STOCK INFORMATION </h2>

<table>

<tr>

<th>Company</th>

</tr>

{% for stock in stock_info %}

<tr>

<td>{{ stock.name}}</td>

<td>{{ stock.roe}}</td>

<td>{{ stock.pb}}</td>

<td>{{ stock.company}}</td>

</tr>

{% endfor %}

</table>

</div>

</body>

</html>

Lưu ý:

– Trong file root setting, Django đã cấu hình sẵn TEMPLATES cho project nên mặc định Django sẽ truy vấn đến các thư mục templates của các app trong INSTALLED_APPS để load các templates cho ứng dụng.

– Trong Template trên, ta có sử dụng giá trị của biến stock_info được truyền từ StockApp/views.py thông qua việc thiết lập giá trị context hàm render().

– Trong Template trên, ta đã cấu hình file CSS cho stock_info.html với dòng lệnh (xem thêm tại đây):

{% load static %}
<link rel="stylesheet" href="{% static 'css/stock_info.css' %}">

1 2	{% load static %} <link rel="stylesheet" href="{% static 'css/stock_info.css' %}">

Để thực hiện cấu hình CSS cho một file HTML, trước hết ta cần tạo thư mục static trong thư mục của ứng dụng StockApp (tạo thư mục StockApp/static). Tương tự như templates, Django đã cấu hình file root setting để có thể tìm được các static files của project (static file là các file không thay đổi đối với mọi user như các file CSS, images…). Ta tạo thêm thư mực css trong thư mục static và viết file stock_info.css như sau:

h2{
    text-align: center;
    margin-top: 50px;
    color: #2929ca;
}
table{
    text-align: center;
}
th, td{
    padding: 10px;
    min-width: 50px;
    border: 1px solid black;
}
.stock_info_table{
    text-align: -webkit-center;
    margin-top: 20px;
}

h2{

text-align: center;

margin-top: 50px;

color: #2929ca;

}

table{

text-align: center;

}

th, td{

padding: 10px;

min-width: 50px;

border: 1px solid black;

}

.stock_info_table{

text-align: -webkit-center;

margin-top: 20px;

}

Cuối cùng ta cấu hình url cho View của ứng dụng trong file StockApp/urls.py như sau:

from django.urls import path

from . import views

urlpatterns = [
    path('getInfo/', views.getStockInfo),
]

from django.urls import path

from . import views

urlpatterns = [

path('getInfo/', views.getStockInfo),

]

Khởi chạy project với lệnh python manage.py runserver và truy cập theo đường dẫn http://127.0.0.1:8000/stockApp/getInfo/ ta được kết quả sau:

Như vậy, chúng ta đã hoàn thành việc viết một ứng dụng sử dụng cả 3 thành phần của kiến trúc MVT (Model View Template) trong Django. Các bạn có thể tham khảo code của bài này trong trang Github của Itech Seeker tại đây.