Html css django

tổng quan

Sau khi chúng tôi xác định các mô hình của mình và tạo một số hồ sơ thư viện ban đầu để làm việc, đã đến lúc viết mã trình bày thông tin đó cho người dùng. Điều đầu tiên chúng tôi cần làm là xác định bất kỳ thông tin nào chúng tôi muốn hiển thị trong các trang của mình và xác định các URL để sử dụng để trả về các tài nguyên đó. Sau đó, chúng tôi sẽ tạo URL bản đồ, chế độ xem và URL mẫu để hiển thị các trang

Sơ đồ sau đây mô tả luồng dữ liệu chính và các thành phần cần thiết khi xử lý các yêu cầu và phản hồi HTTP. Như chúng tôi đã triển khai mô hình, các thành phần chính mà chúng tôi sẽ tạo ra là

• Người thiết lập bản đồ URL để chuyển tiếp các URL được hỗ trợ (và bất kỳ thông tin nào được mã hóa trong URL) đến các chức năng xem thích hợp
• Xem các chức năng để lấy dữ liệu được yêu cầu từ các mô hình, tạo các trang HTML hiển thị dữ liệu và trả lại các trang cho người dùng để xem trong trình duyệt
• Các mẫu để sử dụng khi hiển thị dữ liệu trong chế độ xem

Như bạn sẽ thấy trong phần tiếp theo, chúng tôi có 5 trang để hiển thị, đây là quá nhiều thông tin để ghi lại trong một bài viết. Do đó, bài viết này sẽ tập trung vào cách thực hiện trang chủ và chúng tôi sẽ trình bày các trang khác trong một bài viết tiếp theo. Điều này sẽ cung cấp cho bạn một sự hiểu biết từ đầu đến cuối cùng tốt về cách những người lập bản đồ, quan điểm và URL mô hình hoạt động trong thực tế.

Specify URL resource

Vì phiên bản này của Thư viện Locall về cơ bản chỉ đọc cho người dùng cuối, chúng tôi chỉ cần cung cấp một trang đích cho trang web (một trang chủ) và các trang hiển thị danh sách và xem chi tiết cho sách và tác giả

Các URL mà chúng tôi sẽ cần cho các trang của chúng tôi là

• urlpatterns = [
      path('', views.index, name='index'),
  ]
  

  5 - Trang Home (Mục lục)

• urlpatterns = [
      path('', views.index, name='index'),
  ]
  

  6 - Danh sách tất cả các cuốn sách

• urlpatterns = [
      path('', views.index, name='index'),
  ]
  

  7 - Danh sách tất cả các tác giả

• urlpatterns = [
      path('', views.index, name='index'),
  ]
  

  8 - Chế độ xem chi tiết cho một cuốn sách cụ thể, với trường chính từ khóa là

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

  9 (mặc định). Ví dụ. URL cho cuốn sách thứ ba được thêm vào danh sách sẽ là

  <a href="{% url 'index' %}">Homea>.
  

  0

• <a href="{% url 'index' %}">Homea>.
  

  1 - Chế độ xem chi tiết cho tác giả có thể thực hiện với trường chính là

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

  9. Ví dụ. URL cho tác giả thứ 11 được thêm vào danh sách sẽ là

  <a href="{% url 'index' %}">Homea>.
  

  3

Ba URL đầu tiên sẽ trả về chỉ mục, danh sách và danh sách tác giả. URL này không mã hóa bất kỳ thông tin bổ sung nào và các truy vấn tìm kiếm tải dữ liệu từ cơ sở dữ liệu sẽ luôn giống nhau. Tuy nhiên, kết quả mà các truy vấn trả về sẽ phụ thuộc vào nội dung của cơ sở dữ liệu

Ngược lại, hai URL cuối cùng sẽ hiển thị thông tin chi tiết về một cuốn sách hoặc tác giả có thể. URL này đã mã hóa danh tính của mục để hiển thị (được biểu thị bằng

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

Lưu ý. Với Django, bạn có thể xây dựng URL của mình tuy nhiên bạn yêu cầu - bạn có thể mã hóa thông tin trong phần thân của URL như được hiển thị ở trên hoặc bao gồm các tham số

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

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

Như đã đề cập trong tổng quan, phần còn lại của bài viết này mô tả cách xây dựng chỉ mục trang

Create page index

Trang đầu tiên chúng tôi sẽ tạo là trang Index (

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

Lưu ý. Điều đáng để chú ý thêm một chút trong phần này. Hầu hết các thông tin cũng được áp dụng cho các trang khác mà chúng tôi sẽ tạo. Thật đáng để chú ý thêm một chút trong phần này. Hầu hết thông tin cũng áp dụng cho các trang khác mà chúng tôi sẽ tạo

URL ánh xạ

Khi chúng tôi tạo trang web Skeleton, chúng tôi đã cập nhật tệp locall Library/urls. py để đảm bảo rằng bất kỳ URL nào bắt đầu với

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

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

Đoạn mã sau từ locall Library/urls. py bao gồm mô-đun

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

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

Lưu ý. Bất kể khi nào Django gặp chức năng đầu vào

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

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

Chúng tôi cũng đã tạo một tệp giữ chỗ cho mô-đun URLConf, có tên là /catalog/urls. py. Thêm các dòng sau vào tệp đó. /catalog/url. py. Thêm các dòng sau vào tập tin đó

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

Giăm bông

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

• URL mẫu, là một chuỗi trống.

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

  33. Chúng tôi sẽ thảo luận chi tiết về các URL mẫu khi làm việc trên các quan điểm khác nhau
• Hàm xem sẽ được gọi nếu URL mẫu được phát hiện.

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

  34, is function has named

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

  35 in file Views. py. lượt xem. tập tin py

Giăm bông

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

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

<a href="{% url 'index' %}">Homea>.

Lưu ý. Chúng tôi có thể mã hóa phần cứng liên kết như trong

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

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

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

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

Xem (dựa trên chức năng)

Chế độ xem là một hàm xử lý yêu cầu HTTP, lấy dữ liệu cần thiết từ cơ sở dữ liệu, hiển thị dữ liệu trong trang HTML bằng HTML mẫu và sau đó trả về HTML được tạo trong HTTP phản hồi để hiển thị cho trang. . Chế độ xem chỉ mục theo cấu hình này - nó tìm hiểu thông tin về số lượng

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

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

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

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

Open Catalog/ViewS. Py và lưu ý rằng tệp đã nhập hàm tắt Render() để tạo tệp HTML bằng cách sử dụng mẫu và dữ liệu. danh mục/lượt xem. py và lưu ý rằng tệp đã nhập chức năng phím tắt render() để tạo tệp HTML bằng cách sử dụng mẫu và dữ liệu

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

Dán các dòng sau ở dưới cùng của tệp

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

Dòng đầu tiên nhập các lớp mô hình mà chúng tôi sẽ sử dụng để truy cập dữ liệu trong tất cả các điểm quan trọng của chúng tôi

Phần đầu của hàm xem có lượng bản ghi bằng thuộc tính

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

Ở cuối hàm xem, chúng tôi gọi hàm

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

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

• Object

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

  68 ban đầu, là một

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

  69
• A HTML HTML with a place for data
• Một biến

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

  80, là một từ điển Python, chứa dữ liệu để chèn vào vị trí

Chúng ta sẽ nói thêm về các mẫu và biến

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

mẫu

Mẫu là một tệp văn bản xác định cấu trúc hoặc bố cục cục bộ của một tệp (chẳng hạn như HTML trang), nó sử dụng trình giữ chỗ để biểu diễn nội dung thực tế

Một ứng dụng Django được tạo bằng StartApp (như bộ khung của ví dụ này) sẽ tìm kiếm các mẫu trong một thư mục con có tên 'Mẫu' của các ứng dụng của bạn. Ví dụ. in mode view only which we just add into, function

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

Bạn có thể kiểm tra điều này bằng cách lưu các thay đổi trước đó và truy cập

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

Lưu ý. Dựa trên tệp cài đặt của dự án, Django sẽ tìm kiếm các mẫu ở một số nơi, tìm kiếm trong các ứng dụng đã cài đặt của bạn theo mặc định. Bạn có thể tìm hiểu thêm về cách Django tìm thấy các mẫu và mẫu nào mà nó hỗ trợ trong phần Mẫu của tài liệu Django. Dựa trên tệp cài đặt dự án của bạn, Django sẽ tìm kiếm các mẫu ở một số nơi, tìm kiếm trong các ứng dụng đã cài đặt của bạn theo mặc định. Bạn có thể tìm hiểu thêm về cách Django tìm mẫu và những định dạng mẫu mà nó hỗ trợ trong phần Mẫu của tài liệu Django

Mở rộng các mẫu

Mẫu chỉ mục cần đánh dấu tiêu chuẩn HTML cho đầu và cơ thể, cùng với các phần điều hướng để liên kết đến các trang khác của trang web (mà chúng tôi chưa tạo) và với các phần hiển thị dữ liệu văn bản và văn bản

Phần lớn cấu trúc HTML và điều hướng sẽ giống nhau trong mỗi trang web của chúng tôi. Thay vì sao chép mã hơi trên mỗi trang, bạn có thể sử dụng ngôn ngữ khuôn mẫu Django để khai báo một mẫu cơ sở, sau đó mở rộng nó để thay thế các bit khác nhau cho mỗi trang cụ thể

Sau code code is base pattern from file base_generic. html. Chúng tôi sẽ sớm tạo mẫu cho locall Library. Mẫu dưới đây bao gồm HTML phổ biến với các phần dành cho tiêu đề, thanh bên và nội dung chính được đánh dấu bằng thẻ mẫu

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

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

Lưu ý. Thẻ mẫu là các chức năng mà bạn có thể sử dụng trong một mẫu để lặp qua danh sách, thực hiện các hoạt động có điều kiện dựa trên giá trị của một biến, v. v. Ngoài các thẻ mẫu, cú pháp mẫu cho phép bạn tham khảo các biến được truyền vào mẫu từ chế độ xem và sử dụng các bộ lọc mẫu để định dạng các biến (ví dụ:. to convert string to normal). Thẻ mẫu là các chức năng mà bạn có thể sử dụng trong mẫu để lặp qua các danh sách, thực hiện các thao tác có điều kiện dựa trên giá trị của một biến, v.v. Ngoài các thẻ mẫu, cú pháp mẫu cho phép bạn tham chiếu các biến được chuyển vào mẫu từ dạng xem và sử dụng các bộ lọc mẫu để định dạng các biến (ví dụ: để chuyển đổi một chuỗi thành chữ thường)

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

Khi xác định một mẫu cho một chế độ xem cụ thể, trước hết chúng tôi chỉ định mẫu cơ sở bằng thẻ mẫu

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

Ví dụ. đoạn mã bên dưới để thấy cách sử dụng mẫu thẻ

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

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

Model locall Library

Chúng tôi sẽ sử dụng đoạn mã sau làm mẫu cơ sở cho trang web locall Thư viện. Như bạn có thể thấy, nó chứa một số mã HTML và xác định các khối cho

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

Lưu ý. Chúng tôi cũng giới thiệu hai thẻ mẫu bổ sung

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

Tạo một tệp mới Base_Generic. html in/locall Library/Catalog/Mẫu/và dán mã sau vào tệp. base_generic. html trong /locallibrary/catalog/templates/ và dán đoạn mã sau vào tệp

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

Bao gồm mẫu bao gồm CSS từ Bootstrap để cải thiện cục bộ và trình bày của trang HTML. Sử dụng Bootstrap (hoặc khung web phía máy khách khác) là một cách nhanh chóng để tạo một trang hấp dẫn hiển thị tốt trên các kích thước màn hình khác nhau

Cơ sở mẫu cũng tham chiếu đến một bộ CSS cục bộ (styles. css) cung cấp kiểu dáng bổ sung. Tạo kiểu tệp. css trong/locall Thư viện/danh mục/static/css/và dán mã sau trong tệp. phong cách. css) cung cấp kiểu dáng bổ sung. Tạo kiểu. css trong /locallibrary/catalog/static/css/ và dán đoạn mã sau vào tệp

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

Model only

Tạo tệp HTML mới INDEX. html in/locall Library/Catalog/Mẫu/và dán mã sau vào tệp. Mã này mở rộng cơ sở mẫu của chúng tôi trên dòng đầu tiên và sau đó thay thế khối

<a href="{% url 'index' %}">Homea>.

<a href="{% url 'index' %}">Homea>.

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

Trong phần Nội dung động, chúng tôi tuyên bố các trình giữ chỗ (biến mẫu) cho thông tin từ chế độ xem mà chúng tôi muốn bao gồm. The variable are set with the double (tay lái)

Lưu ý. Bạn có thể dễ dàng nhận ra các biến mẫu và thẻ mẫu (hàm) - Các biến được đặt trong đảo lộn kép (

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

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

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

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

Điều quan trọng cần lưu ý ở đây là các biến được đặt tên với các từ khóa mà chúng tôi chuyển vào từ điển

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

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

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

Tham khảo các tệp tĩnh trong các mẫu

Dự án của bạn có khả năng sử dụng tài nguyên tĩnh, bao gồm JavaScript, CSS và hình ảnh. Vì vị trí của các tệp này không thể biết được (hoặc có thể thay đổi), Django cho phép bạn chỉ định vị trí trong các mẫu của bạn vì vậy khi cài đặt toàn cầu

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

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

Trong mẫu trước tiên bạn gọi thẻ mẫu

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

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

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

Bạn có thể thêm một hình ảnh vào trang theo cách tương tự, ví dụ

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

Lưu ý. Các mẫu chỉ nằm trên vị trí định vị của các tệp, nhưng Django không phục vụ chúng theo mặc định. Chúng tôi đã cấu hình máy chủ web phát triển để phục vụ các tệp tệp bằng cách sửa đổi bản đồ URL toàn cầu (/locall Library/locall Library/urls. py) khi chúng tôi tạo khung trang web, nhưng vẫn cần bật tệp phục vụ trong sản phẩm xuất. Chúng tôi sẽ xem xét điều này sau. Các mẫu ở trên chỉ định vị trí của các tệp, nhưng Django không phục vụ chúng theo mặc định. Chúng tôi đã định cấu hình máy chủ web phát triển để phân phát tệp bằng cách sửa đổi trình ánh xạ URL chung (/locallibrary/locallibrary/urls. py) khi chúng tôi tạo khung trang web, nhưng vẫn cần bật phân phát tệp trong sản xuất. Chúng ta sẽ xem xét điều này sau

Để biết thêm thông tin về việc làm với các tệp tĩnh, hãy xem Quản lý các tệp tĩnh trong tài liệu Django

Linked with URL

Mẫu cơ sở trên thẻ mẫu giới hạn

<a href="{% url 'index' %}">Homea>.

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

This tag accept the name of function

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

Configation Config Nơi tìm các mẫu

Vị trí nơi Django tìm kiếm các mẫu được chỉ định trong các đối tượng

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

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

Settings of

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

Chúng tôi cũng có thể chỉ định các vị trí cụ thể cho Django để tìm kiếm các thư mục bằng cách sử dụng

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

Nó trông như thế nào?

Tại thời điểm này, chúng tôi đã tạo tất cả các tài nguyên cần thiết để hiển thị chỉ mục trang. Chạy máy chủ (

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

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

Lưu ý. Tất cả các cuốn sách và tất cả các liên kết của tác giả sẽ không hoạt động vì các đường dẫn, chế độ xem và mẫu cho các trang đó không được xác định. Chúng tôi chỉ cần chèn giữ chỗ cho các liên kết đó trong mẫu

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

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

Bản thân thử nghiệm

Dưới đây là một số nhiệm vụ để kiểm tra sự quen thuộc của bạn với các truy vấn, chế độ xem và mô hình mẫu

1. Mẫu cơ sở cục bộ Thư viện bao gồm một khối ____512. Ghi đè khối này trong chỉ mục mẫu và tạo tiêu đề mới cho trang

   Lưu ý. Phần mở rộng các mẫu giải thích cách tạo các khối và mở rộng một khối trong một mẫu khác. Phần Mở rộng mẫu giải thích cách tạo khối và mở rộng khối trong mẫu khác

2. Sửa đổi chế độ xem để tạo số lượng cho các loại và sách có chứa một từ cụ thể (trường hợp không cảm ứng) và chuyển kết quả cho ____080. Bạn hoàn thành điều này theo cách tương tự như tạo và sử dụng

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

   39 và

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

   60. Sau đó cập nhật chỉ mục mẫu để bao gồm các biến này

Bản tóm tắt

Chúng tôi vừa tạo trang chủ cho trang web của chúng tôi-một trang HTML hiển thị một số bản ghi từ cơ sở dữ liệu và liên kết đến các trang chưa được tạo khác. Trên đường đi, chúng tôi đã nghiên cứu thông tin cơ bản về người thiết lập bản đồ URL, chế độ xem, truy vấn cơ sở dữ liệu với các mô hình, chuyển thông tin đến một mẫu từ chế độ xem và tạo và mở rộng các

Trong bài viết tiếp theo, chúng tôi sẽ xây dựng kiến ​​​​thức này để tạo ra bốn trang còn lại của trang web của chúng tôi