close
Python Django 學習紀錄(九) 專題練習：網站留言板
以下是此專題練習會依序完成的步驟：
- 繪製系統流程圖
- 安裝所需套件、建置一個名為 board 的專案
- 建置資料庫結構、圖示
- 加入圖片驗證系統
- Url配置、建置網頁基礎模版
- 建置表單類別檔
- 首頁頁面處理函式及模版
- 新增留言頁面處理函式及模版
- 登入登出頁面處理函式及模版
- 管理頁面處理函式及模版
- 刪除頁面處理函式及模版
一、網路留言板流程圖：
以下是接下來將做的網路留言板的流程圖：
二、安裝所需套件、建置一個名為 board 的專案：
1.安裝圖像驗證碼套件
首先要安裝一個額外的套件 captcha ，這是一個圖像驗證碼的套件
請在 django 的虛擬環境輸入下指令安裝：
pip install django-simple-captcha
2.建立專案
接著建立專案：
- 建立一個名為 board 的專案
- 建立名為 boardapp 的 App
- 建立 templates 目錄、static 目錄
- 建立makemigrations 資料檔，並利用 migrate 將模型與資料庫同步
- 最後完成<setting.py>的設定
這邊要注意的是，由於要使用 captcha 套件，所以在要<setting.py>的「INSTALLED_APPS」加入「'captcha',」
設定圖形背景圖案的語法為：「 CAPTCHA_NOISE_FUNTIONS = ('圖案',) 」，也可以同時使用兩種(以逗號分隔)
圖案的值有以下三種：
- captcha.helpers.noise_null #沒有圖案
- captcha.helpers.noise_arcs #圖案為「線」
- captcha.helpers.noise_dots #圖案為「點」
該專案採用「點」，以下為完整語法：
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'boardapp', 'captcha', ] CAPTCHA_NOISE_FUNTIONS = ( 'captcha.helpers.noise_dots', #點 )
設定<urls.py>也要導入include套件並加入以下這行：
path('captcha/',include('captcha.urls')),
三、建置資料庫結構、圖示
1.資料庫結構
資料庫結構定義在 <models.py> 中，建立一個名為 BoradUnit 的資料表
class BoardUnit(models.Model): bname = models.CharField(max_length=20, null=False) #姓名 bgender = models.CharField(max_length=2, default='m', null=False) #性別 bsubject = models.CharField(max_length=100, null=False) #留言標題 btime = models.DateTimeField(auto_now=True) #時間 bmail = models.EmailField(max_length=100, blank=True, default='') #電子郵件 bweb = models.CharField(max_length=200, blank=True, default='') #網址 bcontent = models.TextField(null=False) #內容 bresponse = models.TextField(blank=True, default='') #回應 def __str__(self): return self.bsubject
2.圖示
請在 staitic 目錄裡面 創建 images 資料夾
並在裡面放入圖片，圖片可以到網路上尋找，但請對應的這裡的檔案名稱
| 圖片用途 | 檔案名稱 |
| 男生 | boy.png |
| 女生 | girl.png |
| 日期 | date.png |
| 刪除 | cross.png |
| 背景圖 | main.png |
| 刪除資料 | cancel.png |
| 版主管理 | key.png |
| 登出 | door_out.png |
| 下一頁 | nextpage.png |
| 信箱 | email.png |
| 上一頁 | prevpage.png |
| 使用者小圖 | user.png |
| 瀏覽留言 | comments.png |
| 我要留言 | comment.png |
| 網頁圖示 | world.png |
| 無資料驚嘆號 | exclamation.png |
| 我要留言圖片 | guestbook2_1.png |
3.CSS
CSS部分，我尚未學習，所以這邊暫不做說明
可以利用網路資源導入基礎CSS
四、Url配置、建置網頁基礎模版
1.Url配置
在<urls.py> 定義下列的 URL：
先將還不會用到的路徑註解掉，之後要使用時再陸續打開，以免之後運行伺服器會產生找不到路徑的問題：
from django.contrib import admin
from django.urls import path,re_path,include #要加入include
from boardapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('captcha/',include('captcha.urls')), #使用圖像驗證碼
path('index/',views.index),
re_path('index/(\w+)/$',views.index),
path('post/',views.post),
path('login/',views.login),
path('logout/',views.logout),
path('adminmain/',views.adminmain),
re_path('adminmain/(\w+)/$',views.adminmain),
re_path('delete/(\w+)/$',views.delete),
re_path('delete/(\d+)(\w+)/$',views.delete),
]
2.建置網頁基礎模版
(1)<base.html> 基礎模板
網路留言板的基礎模板為網頁上方標題、右上方 瀏覽留言功能按鈕 及下方版權的部分
由於 <index.html> 、<login.html>和 <post.html>網頁結構類似，為這三個網頁建立模板檔 <base.html>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
{% block title %}{% endblock %}
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
</head>
<body bgcolor="#ffffff">
<div id="warp">
<table width="897" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="260" background="{% static "images/main.png" %}"> </td>
</tr>
<tr>
<td>
<div class="functionDiv">
<table width="92%" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<img src="{% static "images/comments.png" %}" width="16" height="16" align="absmiddle" />
<a href="/index/">瀏覽留言</a>
{% block twomenu %}{% endblock %}
</td>
</tr>
</table>
</div>
{% block content %}{% endblock %}
<div id="siteinfo"> Django 網站留言板 版權所有© 2018</div>
</td>
</tr>
</table>
</div>
</body>
</html>
(2)<baseadmin.html> 基礎模板
<adminmain.html>和 <delete.html>網頁結構類似，為這兩個網頁建立模板檔 <baseadmin.html>
包括：網頁上方的標題、右上方的登出管理功能按鈕、下方版權
與<base.html>大同小異，只有瀏覽留言的按鈕要改成登出管理(包括路徑)
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
{% block title %}{% endblock %}
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
</head>
<body bgcolor="#ffffff">
<div id="warp">
<table width="897" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="260" background="{% static "images/main.png" %}"> </td>
</tr>
<tr>
<td>
<div class="functionDiv">
<table width="92%" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<img src="{% static "images/door_out.png" %}" width="16" height="16" align="absmiddle" />
<a href="/logout/">登出管理</a>
</td>
</tr>
</table>
</div>
{% block content %}{% endblock %}
<div id="siteinfo"> Django 網站留言板 版權所有© 2018</div>
</td>
</tr>
</table>
</div>
</body>
</html>
五、建置表單類別檔
在 Django 中圖像驗證碼通常配合表單類別(forms.Form)使用
請在boardapp目錄下建立<forms.py>
from django import forms from captcha.fields import CaptchaField class PostForm(forms.Form): boardsubject = forms.CharField(max_length=100,initial='') # initial='' 初始值為空白 boardname = forms.CharField(max_length=20,initial='') boardgender = forms.CharField(max_length=2,initial='m') boardmail = forms.EmailField(max_length=100,initial='',required=False) # required=False 允許使用者不輸入資料 boardweb = forms.URLField(max_length=100,initial='',required=False) boardcontent = forms.CharField(widget=forms.Textarea) captcha = CaptchaField() #圖像驗證碼
五、首頁處理函式及模板
1.首頁<後台>
在首頁按下上一頁、下一頁鈕，或是在詳細頁面按下 首頁 鈕，都會執行<views.py>的 index 函式、還有載入<index.html>網頁
from django.shortcuts import render,redirect
from boardapp import models,forms
from django.contrib.auth import authenticate
from django.contrib import auth
import math
page = 0 #目前頁面，0為第1頁
def index(request,pageindex=None):
global page #重複開啟頁面需保留 page 值
pagesize = 3 #每頁顯示3筆資料
boardall = models.BoardUnit.object.all().order_by('-id') #讀取資料表，依id遞減排序
datasize = len(boardall) #資料筆數
totpage = math.ceil(datasize / pagesize) #總頁數
if pageindex == None:
page = 0
boardunits = models.BoardUnit.object.order_by('-id')[:pagesize]
elif pageindex == 'prev': #上一頁
start = (page-1)*pagesize #該頁第1筆資料
if start >= 0: #有前頁資料就顯示
boardunits = models.BoardUnit.object.order_by('-id')[start:(start+pagesize)]
page -= 1
elif pageindex == 'next': #下一頁
start = (page+1)*pagesize #該頁第1筆資料
if start < datasize:
boardunits = models.BoardUnit.object.order_by('-id')[start:(start+pagesize)]
page += 1
currentpage = page + 1 #將目前頁面以區域變數傳回 html
return render(request,"index.html",locals())
2.首頁<前台>
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}<title>網路留言板</title>{% endblock %}
<!-- 建立 我要留言、版主管理 功能按鈕 -->
{% block twomenu %}
<img src="{% static "images/comment.png" %}" width="16" height="16" align="absmiddle" /><a href="/post/">我要留言</a>
<img src="{% static "images/key.png" %}" width="16" height="16" align="absmiddle" /><a href="/login/">版主管理</a>
{% endblock %}
<!-- 以下開始顯示boardunits變數傳送過來的資料 -->
{% block content %}
</td>
</tr>
{% for unit in boardunits %}
<tr>
<td>
<table width="545" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- 性別欄位，根據傳送過來的性別顯示不同的圖片 -->
<div class="floorDiv">
{% if unit.bgender == "m" %}
<img src="{% static "images/boy.png" %}" width="73" height="63" />
{% else %}
<img src="{% static "images/girl.png" %}" width="73" height="63" />
{% endif %}
</div>
<!-- 顯示留言內容 -->
<div class="contentDiv">
<!-- 標題 -->
<p class="title">{{unit.bsubject}}</p>
<p></p>
<!-- 內容 -->
<p>{{unit.bcontent}}</p>
<!-- 如果有版主回應，則顯示 -->
{% if unit.bresponse != "" %}
<div class="responseDiv">
<p><strong>版主回應</strong>:{{unit.bresponse}}</p>
</div>
{% endif %}
<!-- 顯示留言者姓名 -->
<p class="editor"><img src="{% static "images/user.png" %}" width="16" height="16" align="absmiddle">{{unit.bname}}
<!-- 顯示留言時間 -->
<img src="{% static "images/date.png" %}" width="16" height="16" align="absmiddle">{{unit.btime}}
<!-- 如果有信箱，則顯示 -->
{% if unit.bmail != "" %}
<a href="mailto:{{unit.bmail}}" target="_blank">
<img src="{% static "images/email.png" %}" width="16" height="16" align="absmiddle" border="0">
</a>
{% endif %}
<!-- 如果有網頁內容，則顯示 -->
{% if unit.bweb != "" %}
<a href="mailto:{{unit.bweb}}" target="_blank">
<img src="{% static "images/world.png" %}" width="16" height="16" align="absmiddle" border="0">
</a>
{% endif %}
</p>
</div>
</td>
</tr>
<tr>
<td width="545" height="12"></td>
</tr>
</table>
</tr>
<!-- 若資料傳送過來是空串列(無資料) -->
{% empty %}
<tr>
<td style="background-color:#b3ccff;">
<div class="messageDiv"><img src="{% static "images/exclamation.png" %}" width="16" height="16" align="absmiddle">目前沒有新的資料，歡迎您留言</div>
</td>
</tr>
{% endfor %}
<tr>
<td>
<div class="pagebutton" style="background-color:#b3ccff;">
{% if currentpage > 1 %}
<a href="/index/prev/" title="上一頁">
<img src="{% static "images/prevpage.png" %}" alt="上一頁" width="64" height="24">
</a>
{% endif %}
{% if currentpage < totpage %}
<a href="/index/next/" title="下一頁">
<img src="{% static "images/nextpage.png" %}" alt="下一頁" width="64" height="24">
</a>
{% endif %}
</div>
</td>
</tr>
<tr>
<td>
{% endblock %}
六、新增留言頁面處理函式及模板
1.新增留言頁面<後台>
在首頁按下 我要留言 按鈕，就會執行<views.py>中的 post函式，並載入<post.html>網頁
def post(request):
if request.method == "POST":
postform = forms.PostForm(request.POST) #建立forms物件
if postform.is_valid(): #通過 forms 驗證
subject = postform.cleaned_data['boardsubject'] #取得輸入資料
name = postform.cleaned_data['boardname']
gender = postform.cleaned_data['boardgender']
mail = postform.cleaned_data['boardmail']
web = postform.cleaned_data['boardweb']
content = postform.cleaned_data['boardcontent']
unit = models.BoardUnit.objects.create(bname=name, bgender=gender, bsubject=subject, bmail=mail, bweb=web, bcontent=content, bresponse='') #新增資料紀錄
unit.save()
message = '已儲存'
postform = forms.PostForm()
return redirect('/index')
else:
message = '驗證碼錯誤!'
else:
message = '標題、姓名、內容及驗證碼必須輸入!'
postform = forms.PostForm()
return render(request,"post.html",locals())
2.新增留言頁面<前台>
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}<title>網路留言板-訪客留言</title>{% endblock %}
<!-- 建立 我要留言、版主管理 功能按鈕 -->
{% block twomenu %}
<img src="{% static "images/comment.png" %}" width="16" height="16" align="absmiddle" /><a href="/post/">我要留言</a>
<img src="{% static "images/key.png" %}" width="16" height="16" align="absmiddle" /><a href="/login/">版主管理</a>
{% endblock %}
{% block content %}
<table width="545" border="0" align="center" cellspacing="0" cellpadding="0" style="background-color:#b3ccff;">
<tr>
<td valign="top" style="background:url({% static "images/guestbook2_1.png" %}); background-repeat:no-repeat">
<div id="postDiv">
<form action="." method="POST" name="form1">
{% csrf_token %}
<table width="100%" border="0" cellspacing="1" cellpadding="4">
<tr>
<th width="80" align="right" valign="baseline">標題</th>
<td valign="baseline">{{postform.boardsubject}}</td>
</tr>
<tr>
<th align="right" valign="baseline">姓名</th>
<td valign="baseline">{{postform.boardname}}</td>
</tr>
<tr>
<th align="right" valign="baseline">性別</th>
<td valign="baseline">
<input name="boardgender" type="radio" id="boardgender" value="m" checked="checked" />
<img src="{% static "images/boy.png" %}" width="72" height="63" alt="男生">
<input name="boardgender" type="radio" id="boardgender" value="f" />
<img src="{% static "images/girl.png" %}" width="72" height="63" alt="女生">
</td>
</tr>
<tr>
<th align="right" valign="baseline">電子郵件</th>
<td valign="baseline">{{postform.boardmail}}</td>
</tr>
<tr>
<th align="right" valign="baseline">個人網站</th>
<td valign="baseline">{{postform.boardweb}}</td>
</tr>
<tr>
<th align="right" valign="baseline">內容</th>
<td valign="baseline">{{postform.boardcontent}}</td>
</tr>
<tr>
<th align="right" valign="baseline">驗證碼</th>
<td valign="baseline">{{postform.captcha}}</td>
</tr>
<tr>
<th colspan="2" align="center" valign="baseline">
<input type="submit" name="button" id="button" value="送出">
<input type="reset" name="button2" id="button2" value="重設">
</th>
</tr>
</table>
<span style="color: red">{{message}}</span>
</form>
</div>
</td>
</tr>
</table>
{% endblock %}
七、登入登出頁面處理函式及模板
1.建立管理者帳號
這裡將帳號設為 root 密碼設為 aa000000
可以將 models 導入 <admin.py> 的 Django 自帶資料庫，方便查看儲存的資料來除錯並處理
from boardapp.models import BoardUnit admin.site.register(BoardUnit)
2.登入登出頁面<後台>
在首頁按下 版主管理 按鈕，就會執行<views.py>中的 login函式，並載入<login.html>網頁
在管理頁面或刪除留言頁面按下 登出 按鈕，就會執行<views.py>中的 login函式，並載入<login.html>網頁
def login(request): #登入
message = '' #初始時清除訊息
if request.method == 'POST':
name = request.POST['username'].strip()
password = request.POST['password']
user1 = authenticate(username = name, password = password) #驗證
if user1 is not None: #驗證通過
if user1.is_active: #驗證有效
auth.login(request, user1) #登入
return redirect('/adminmain/') #開啟管理頁面
else:
message = '帳號無效!'
else: #驗證未通過
message = '帳號尚未啟用!'
return render(request, "login.html", locals())
def logout(request):
auth.logout(request)
return redirect('/index/')
3.登入登出頁面<前台>
{% extends "base.html" %}
{% block title %}<title>登入頁面</title>{% endblock %}
{% block content %}
<form action="." method="POST" name="form1" style="background-color:#b3ccff;">
{% csrf_token %}
<table border="0" cellpadding="4" cellspacing="1" >
<tr>
<th align="right" valign="baseline">帳號</th>
<td valign="baseline"><input type="text" name="username" id="username" style="width: 200px"></td>
</tr>
<tr>
<th align="right" valign="baseline">密碼</th>
<td valign="baseline"><input type="password" name="password" id="password" style="width: 200px"></td>
</tr>
<tr>
<th colspan="2" align="center" valign="baseline">
<input type="submit" name="button" id="button" value="送出">
<input type="reset" name="button2" id="button2" value="重設">
</th>
</tr>
</table>
<span style="color: red">{{message}}</span>
</form>
{% endblock %}
八、管理頁面處理函式及模板
1.管理頁面<後台>
使用者在登入頁面通過驗證就會執行<views.py>中的 adminmain函式，並載入<adminmain.html>網頁
def adminmain(request, pageindex=None):
global page #重複開啟頁面需保留 page 值
pagesize = 3 #每頁顯示3筆資料
boardall = models.BoardUnit.objects.all().order_by('-id') #讀取資料表，依id遞減排序
datasize = len(boardall) #資料筆數
totpage = math.ceil(datasize / pagesize) #總頁數
if pageindex == None:
page = 0
boardunits = models.BoardUnit.objects.order_by('-id')[:pagesize]
elif pageindex == 'prev': #上一頁
start = (page-1)*pagesize #該頁第1筆資料
if start >= 0: #有前頁資料就顯示
boardunits = models.BoardUnit.objects.order_by('-id')[start:(start+pagesize)]
page -= 1
elif pageindex == 'next': #下一頁
start = (page+1)*pagesize #該頁第1筆資料
if start < datasize:
boardunits = models.BoardUnit.objects.order_by('-id')[start:(start+pagesize)]
page += 1
elif pageindex == 'ret': #在管理頁面按下"確定修改"按鈕後返回
start = page*pagesize
boardunits = models.BoardUnit.objects.order_by('-id')[start:(start+pagesize)]
else: #在編輯新聞頁面按下"確定修改"按鈕後會以 pageindex 傳入資料id
unit = models.BoardUnit.objects.get(id=pageindex) #取得要修改的資料紀錄
unit.bcontent = request.POST.get('boardcontent','')
unit.bresponse = request.POST.get('boardresponse','')
unit.save()
return redirect('/adminmain/ret/') #返回管理頁面，參數為ret
currentpage = page + 1
return render(request, "adminmain.html", locals())
2.管理頁面<前台>
{% extends "baseadmin.html" %}
{% load staticfiles %}
{% block title %}<title>網路留言板-管理留言</title>{% endblock %}
<!-- 建立 我要留言、版主管理 功能按鈕 -->
{% block twomenu %}
<img src="{% static "images/comment.png" %}" width="16" height="16" align="absmiddle" /><a href="/post/">我要留言</a>
<img src="{% static "images/key.png" %}" width="16" height="16" align="absmiddle" /><a href="/login/">版主管理</a>
{% endblock %}
<!-- 以下開始顯示boardunits變數傳送過來的資料 -->
{% block content %}
</td>
</tr>
{% for unit in boardunits %}
<tr>
<td style="background-color:#b3ccff;">
<table width="545" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<form action="/adminmain/{{unit.id}}/" method="POST" name="form1">
{% csrf_token %}
<!-- 性別欄位，根據傳送過來的性別顯示不同的圖片 -->
<div class="floorDiv">
{% if unit.bgender == "m" %}
<img src="{% static "images/boy.png" %}" width="73" height="63" />
{% else %}
<img src="{% static "images/girl.png" %}" width="73" height="63" />
{% endif %}
<!-- 刪除資料 -->
<a href="/delete/{{unit.id}}">
<img src="{% static "images/cross.png" %}" width="16" height="16" border="0" align="absmiddle">
刪除
</a>
</div>
<!-- 顯示留言內容 -->
<div class="contentDiv">
<!-- 顯示留言者姓名 -->
<p class="editor">
<img src="{% static "images/user.png" %}" width="16" height="16" align="absmiddle">{{unit.bname}}
<!-- 顯示留言時間 -->
<img src="{% static "images/date.png" %}" width="16" height="16" align="absmiddle">{{unit.btime}}
<!-- 顯示信箱 -->
<a href="mailto:{{unit.bmail}}" target="_blank">
<img src="{% static "images/email.png" %}" width="16" height="16" align="absmiddle" border="0">
</a>
<!-- 顯示網頁圖示 -->
<a href="mailto:{{unit.bweb}}" target="_blank">
<img src="{% static "images/world.png" %}" width="16" height="16" align="absmiddle" border="0">
</a>
</p>
<p class="title">留言標題
<input type="text" name="boardsubject" id="boardsubject" style="margin-top: 5px" value="{{unit.bsubject}}" size="40">
</p>
<p class="content">留言內容
<textarea name="boardcontent" id="boardcontent" cols="50" rows="5" style="margin-top: 5px">{{unit.bcontent}}</textarea>
</p>
<p class="response">版主回應
<textarea name="boardresponse" id="boardresponse" cols="50" rows="5">{{unit.bresponse}}</textarea>
</p>
<p align="center">
<input type="submit" name="button" id="button" value="確定修改">
</p>
</div>
</form>
</td>
</tr>
<tr>
<td width="545" height="12"></td>
</tr>
</table>
</tr>
<!-- 若資料傳送過來是空串列(無資料) -->
{% empty %}
<tr>
<td style="background-color:#b3ccff;">
<div class="messageDiv"><img src="{% static "images/exclamation.png" %}" width="16" height="16" align="absmiddle">目前沒有新的資料，歡迎您留言</div>
</td>
</tr>
{% endfor %}
<tr>
<td>
<div class="pagebutton" style="background-color:#b3ccff;">
{% if currentpage > 1 %}
<a href="/index/prev/" title="上一頁">
<img src="{% static "images/prevpage.png" %}" alt="上一頁" width="64" height="24">
</a>
{% endif %}
{% if currentpage < totpage %}
<a href="/index/next/" title="下一頁">
<img src="{% static "images/nextpage.png" %}" alt="下一頁" width="64" height="24">
</a>
{% endif %}
</div>
</td>
</tr>
<tr>
<td>
{% endblock %}
九、刪除頁面處理函式及模板
1.刪除頁面<後台>
使用者在管理頁面點選 刪除 按鈕，就會執行<views.py>中的 delete 函式，並載入<delete.html>網頁
def delete(request, boardid=None, deletetype=None): #刪除資料
unit = models.BoardUnit.objects.get(id=boardid) #讀取指定資料
if deletetype == 'del': #按下 確定刪除 按鈕
unit.delete()
return redirect('/adminmain/')
return render(request,"delete.html",locals())
2.刪除頁面<前台>
{% extends "baseadmin.html" %}
{% load staticfiles %}
{% block title %}<title>網路留言板-刪除留言</title>{% endblock %}
<!-- 建立 我要留言、版主管理 功能按鈕 -->
{% block twomenu %}
<img src="{% static "images/comment.png" %}" width="16" height="16" align="absmiddle" /><a href="/post/">我要留言</a>
<img src="{% static "images/key.png" %}" width="16" height="16" align="absmiddle" /><a href="/login/">版主管理</a>
{% endblock %}
{% block content %}
<!-- 以下開始顯示boardunits變數傳送過來的資料 -->
<form action="/delete/{{unit.id}}/del/" method="POST" name="form1">
{% csrf_token %}
<table width="545" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- 性別欄位，根據傳送過來的性別顯示不同的圖片 -->
<div class="floorDiv">
{% if unit.bgender == "m" %}
<img src="{% static "images/boy.png" %}" width="73" height="63" />
{% else %}
<img src="{% static "images/girl.png" %}" width="73" height="63" />
{% endif %}
</div>
<!-- 顯示留言內容 -->
<div class="contentDiv" style="background-color:#b3ccff;">
<!-- 顯示標題 -->
<p class="title">{{unit.bsubject}}</p>
<p></p>
<!-- 顯示內容 -->
<p>{{unit.bcontent}}</p>
<!-- 顯示版主回應 -->
<div class="responseDiv">
<p><strong>版主回應</strong>:{{unit.bresponse}}</p>
</div>
<!-- 顯示留言者姓名 -->
<p class="editor">
<img src="{% static "images/user.png" %}" width="16" height="16" align="absmiddle">{{unit.bname}}
<!-- 顯示留言時間 -->
<img src="{% static "images/date.png" %}" width="16" height="16" align="absmiddle">{{unit.btime}}
<!-- 顯示信箱 -->
<a href="mailto:{{unit.bmail}}" target="_blank">
<img src="{% static "images/email.png" %}" width="16" height="16" align="absmiddle" border="0">
</a>
<!-- 顯示網頁圖示 -->
<a href="mailto:{{unit.bweb}}" target="_blank">
<img src="{% static "images/world.png" %}" width="16" height="16" align="absmiddle" border="0">
</a>
</p>
<div class="messageDiv">
<img src="{% static "images/cancel.png" %}" width="16" height="16" align="absmiddle" />是否確定刪除此筆留言?
</div>
<p align="center">
<input type="submit" name="button" id="button" value="確定刪除">
<input type="button" name="button2" id="button2" value="回上一頁" onclick="window.history.back();" >
</p>
</div>
</td>
</tr>
<tr>
<td width="545" height="12"></td>
</tr>
</table>
</form>
{% endblock %}
全站熱搜
留言列表
NAS (1)