iT邦幫忙

2021 iThome 鐵人賽

DAY 15
1
自我挑戰組

Python 30天自我挑戰系列 第 15

Day15 - 建立模板

在完成前兩天的前置作業後,之後將繼續進行django的網站實作,接下來預計花大約2-3天的時間,完成將小說加入追蹤清單的功能。

因為時間關係,今天主要先完成程式雛形作為紀錄,細部功能先暫時留空待之後再補,且今天的程式尚未完成測試,故實際執行上可能會出問題。

今天將接續昨天的進度,完成HTML template,進行範圍如下:

  • 新增templates資料夾,完成base_generic.html、index.html、track_book.html三支程式
  • 於urls.py加入頁面連結
  • 啟動網站,驗證功能

Template

  1. 於應用程式資料夾下新增templates資料夾。

  2. 新增 base_generic.html檔案,作為網頁的基本模板。

<!DOCTYPE html>
<html lang="en">

<head>
  {% block title %}<title>Local Library</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
        {% block sidebar %}
        <ul class="sidebar-nav">
          <li><a href="{% url 'index' %}">Home</a></li>
          <li><a href="{% url 'newtrack' %}">New Track</a></li>

        </ul>
        {% endblock %}
      </div>
      <div class="col-sm-10 ">
        {% block content %}{% endblock %}
      </div>
    </div>
  </div>
</body>

</html>

程式基本上直接使用教學網站的範例,僅調整側邊欄的頁面連結;index.html也沒有太多調整,後面就不再列出。

  • {% block xxxx %}:基本模板可設定預設值,其他延伸模板可以替換其中內容。
  1. 新增track_book.html,為建立在基本模板之上的延伸模板。
{% extends "base_generic.html" %}
{% block content %}

  <h1>小說進度追蹤</h1>

  {% if title_save %}
  <p>{{title_save}}已加入追蹤。</p>  
  {% endif %}

  <form action="" method="post">
    {% csrf_token %}
    <table>
    {{ form }}
    </table>
    <input type="submit" value="Submit" />
  </form>

{% endblock %}
  • {% extends "base_generic.html" %}:聲明使用的基本模板

  • {% if title_save %} {% endif %}:根據views.py中TrackBook()回傳的title_save來顯示內容。

    • 若表單POST新增資料成功,會回傳書名:顯示「書名已加入追蹤。」
    • 若回傳None,表示為初始表單,不顯示額外資訊
  • {% csrf_token %}:產生隱藏的token,防止Cross-Site Request Forgery。

URL

於urls.py新增以下內容:

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

啟動網站,驗證功能

使用指令重新啟動網站,透過瀏覽器開啟。

python manage.py runserver

https://ithelp.ithome.com.tw/upload/images/20210927/20141886CGaKM2fjH3.png

輸入網址並送出後,顯示已加入追蹤。
https://ithelp.ithome.com.tw/upload/images/20210927/20141886NRLCEHra61.png

補充

以上為今天實作內容,其實在實際啟動時有修正一些程式碼的錯誤,之後如果有時間會再記錄下來。

後面待完成內容:

  1. 網址檢核

  2. 爬蟲功能整合至網站


上一篇
Day14 - 使用表單新增資料
下一篇
Day16 - 完成爬蟲功能
系列文
Python 30天自我挑戰30

尚未有邦友留言

立即登入留言