Chapter 09epaper.gotop.com.tw/PDFSample/ACL051400.pdf · 9-5 專題：網站留言版 09 chalogin\urls.py ⋯⋯ 16 from django.conf.urls import url, include 17 from django.contrib

$Page 1: Chapter 09epaper.gotop.com.tw/PDFSample/ACL051400.pdf · 9-5 專題：網站留言版 09 chalogin\urls.py ⋯⋯ 16 from django.conf.urls import url, include 17 from django.contrib$
Python架站特訓班 - Django最強實戰

網站上的留言版，可以說是站長與網友溝通的橋

樑，所以許多網站都希望能夠放置留言版，讓網

友可以有一個交流的空間。

本章開發的網站留言版，不僅可供訪客觀看，發

表留言，管理者也擁有完整的管理功能，並可對

訪客留言做回應。

專題：網站留言版

. . . . . . . . . . . . . . . . . . . . .....................................

............. .. .. .. .. .. . .

. . . .. . . . . . . . . . . . . . . . . . . . . . . . ............................

...

............. .. .. . .. . .

. . . .. . . . . . ......................................

....................

.......

09Chapter

9-2


9.1 圖像驗證碼圖形驗證碼最基本的運作形式就是在送出資料前，要求你在欄位中輸入圖片中的

英文字母數字，主要功能是用來防止機器人進行灌票、留言、垃圾廣告等干擾網

站、活動運行。圖形驗證碼應該是現代人最熟悉的網路機制之一，張貼留言評論、

註冊會員或是活動投票常常都要使用圖形驗證碼。

圖形驗證碼簡稱為 CAPTCHA (Completely Automated Public Turing test to tell

Computers and Humans Apart)，是一種區分使用者是電腦還是人的公共全自動

程式。在 CAPTCHA測試中，作為伺服器的電腦會自動生成一個問題讓使用者

解答：這個問題由電腦生成，但是必須只有人類才能解答。由於電腦無法解答

CAPTCHA的問題，所以回答出問題的使用者就可以被認為是人類。

早期的驗證碼大多用扭曲的文字來實現，用以避開 OCR（自動光學字符識別技

術）的自動識別，例如 Yahoo早期的驗證碼版本 EZ-Gimpy。後來，又有在扭曲

字符上加曲線，以及將字符擁擠在一起。但有利就有弊，越難被破解的圖形驗證

碼，真人也越難識別，反而造成使用者的困擾。

目前圖形驗證碼技術大量運用於對安全性較高的網站：如各種購票系統、金融機

構登入機制、投票系統等。

9.1.1 使用 django-simple-captcha 套件

Django 使用最多的圖形驗證碼套件為 django-simple-captcha，此套件的功能相

當強大，不但可產生有背景圖案的英文字母圖片，還可指定圖片中英文字母的數

量，也可製作數學計算式的圖形驗證碼，使用者必須輸入正確計算結果才能通過

驗證。

安裝 Django 時並未安裝 django-simple-captcha 圖形驗證碼套件，必須自行安

裝：在 DjangoEnv 虛擬環境輸入下列指令即可完成安裝。

pip install django-simple-captcha

9-3

09專題：網站留言版

接著在 <settings.py> 中「INSTALLED_APPS」項目加入「'captcha',」：

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'captcha',]

django-simple-captcha 會在資料庫中建立圖形驗證碼需使用的資料表，因此要在

專案中以下列指令重整資料庫：

python manage.py migrate

最後在 <urls.py> 加入 captcha 就大功告成，可以在網頁中使用圖形驗證碼了！

url(r'^captcha/', include('captcha.urls')),

9.1.2 具圖形驗證碼的登入專案

為說明 django-simple-captcha 使用方法，我們以一個具有圖形驗證碼登入功能

的專案為例，讀者可將此專案套用到現成網站中。

請確認已依照前一小節安裝完成 django-simple-captcha 套件，將本書範例

<chalogin> 資料夾複製到 <C:\DjangoEnv> 目錄中，在命令提示字元視窗中啟

動虛擬環境並切換到 <chalogin> 資料夾，啟動本機伺服器。

輸入管理者帳號「admin」，密碼「aa123456」，再輸入驗證碼，如果驗證碼正確，

會開啟管理頁面 (此處僅顯示「已登入系統！」文字 )。

9-4


如果驗證碼輸入錯誤，會在左下方顯示提示訊息並更新驗證碼圖片讓使用者重新

輸入。

本專案 <settings.py> 檔中 INSTALLED_APPS 項目，除了加入本專案應用程式

「chaapp」外，還加入「captcha」。

chalogin\settings.py⋯⋯

33 INSTALLED_APPS = [

34 'django.contrib.admin',

35 'django.contrib.auth',

36 'django.contrib.contenttypes',

37 'django.contrib.sessions',

38 'django.contrib.messages',

39 'django.contrib.staticfiles',

40 'chaapp',41 'captcha',42 ]

⋯⋯

<urls.py> 也要含入「captcha」：

9-5


chalogin\urls.py⋯⋯

16 from django.conf.urls import url, include17 from django.contrib import admin

18 from chaapp import views

19

20 urlpatterns = [

21 url(r'^$', views.index),

22 url(r'^index/$', views.index),

23 url(r'^manage/$', views.manage),

24 url(r'^captcha/', include('captcha.urls')),25 url(r'^admin/', admin.site.urls),

26 ]

第 24 列使用 include 加入 captcha，16 列要記得含入「include」。

第 21 列設定開啟「http://127.0.0.1」載入 <index.html> 網頁，第 23 列設定圖形

驗證成功後開啟 <manage.html> 網頁。

django-simple-captcha 套件需重整資料庫

此處是在虛擬環境匯入 Django 專案，專案中已包含圖形驗證碼資料表，可直接執行專案。若讀者自行建立專案，需自行在資料庫中建立 django-simple-captcha 資料表，因此在修改完 <settings.py> 後要重整資料庫：

python manage.py migrate

9.1.3 表單類別及使用圖形驗證碼

在 Django 中圖形驗證碼通常是配合表單類別 (forms.Form) 使用，表單類別是建

立於 <forms.py> 。

chaapp\forms.py 1 from django import forms

2 from captcha.fields import CaptchaField 3

4 class PostForm(forms.Form):

5 username = forms.CharField(max_length=20,initial='')

6 pd = forms.CharField(max_length=20,initial='')

7 captcha = CaptchaField()

9-6


在表單類別中建立圖形驗證碼的程式為第 2 列含入 CaptchaField，然後在第 7

列以 CaptchaField 建立圖形驗證碼欄位 (此處為 captcha)。第 5 及 6 列則以

「CharField」型態建立帳號及密碼欄位。

表單類別大部分型態欄位的 required 參數預設值為 True，使用者必須在欄位中

輸入資料才能將表單送出，例如上述帳號及密碼欄位一定要輸入資料，否則按送

出鈕時會顯示提示訊息：

圖形驗證碼欄位 (captcha) 不是 Django 內建表單類別，並沒有 required 參數，

沒有輸入驗證碼也可送出表單，只是無法通過驗證。

9.1.4 登入專案的視圖及模版

建立好表單類別後，就可在視圖 (views.py) 中建立表單物件傳送給模版 (index.

html) 顯示，並在視圖中處理使用者輸入的帳號及密碼。

chaapp\views.py 1 from django.shortcuts import render, redirect

2 from chaapp import forms 3 from django.contrib.auth import authenticate

4 from django.contrib import auth

5

6 def index(request):

7 if request.method == "POST":

8 postform = forms.PostForm(request.POST) 9 if postform.is_valid(): #forms驗證通過

10 username = postform.cleaned_data['username']

11 pd = postform.cleaned_data['pd']

12 user1 = authenticate(username=username, password=pd)

#管理者驗證

13 if user1 is not None: #驗證通過

14 auth.login(request, user1) #登入

9-7


15 postform = forms.PostForm()

16 return redirect('/manage/')

17 else: #驗證未通過

18 message = '登入失敗！ '

19 else:

20 message = '驗證碼錯誤！ '

21 else:

22 message = '帳號、密碼及驗證碼都必須輸入！ '

23 postform = forms.PostForm()

24 return render(request, "index.html", locals())

25

26 def manage(request):

27 return render(request, "manage.html", locals())

第 2 列含入前一小節建立的表單類別，第 8 及 23 列建立表單物件 (postform)，

此物件會傳送給模版 (index.html) 顯示。

第 9 列若「postform.is_valid()」為 True表示通過表單驗證：帳號及密碼有輸入

資料，且填入的圖形驗證碼正確，就在 10-11 列取得輸入的帳號及密碼，12 列比

對帳號及密碼是否正確，如果正確就以 14-16 列登入並開啟管理頁面，若不正確

就在 17-18 列顯示「登入失敗」訊息。

若「postform.is_valid()」為 False表示未通過表單驗證：由於帳號或密碼欄位未

輸入資料無法送出表單，所以未通過表單驗證的唯一理由就是輸入的圖形驗證碼

錯誤，故於 19-20 列顯示「驗證碼錯誤」訊息。

templates\index.html⋯⋯

11 <form action="." method="POST" name="form1">

12 {% csrf_token %}

13 <table border="0" align="center" cellpadding="4" cellspacing="1">

14 <tr>

15 <th align="right" valign="baseline">帳號 </th>

16 <td valign="baseline">{{postform.username}}</td>17 </tr>

18 <tr>

19 <th align="right" valign="baseline">密碼 </th>

20 <td valign="baseline">{{postform.pd}}</td>21 </tr>

22 <tr>

9-8


23 <th align="right" valign="baseline">驗證碼 </th>

24 <td valign="baseline">{{postform.captcha}}</td>25 </tr>

26 <tr>

27 <th colspan="2" align="center" valign="baseline">

28 <input type="submit" name="button" id="button" value="送出">

29 <input type="reset" name="button2" id="button2" value="重設 ">

30 </th>

31 </tr>

32 </table>

33 <span style="color:red">{{message}}</span>

34 </form>

⋯⋯

第 16、20 、24 列的 postform 是由 <views.py> 傳送過來表單類別物件，只要使

用「{{表單類別物件 .欄位 }}」就能在模版中顯示表單。

9.1.5 圖形驗證碼常用設定

django-simple-captcha 套件具備許多強大功能可以依使用者需求自行設定，這些

設定必須在 <settings.py> 加入。本節登入專案 (chalogin) 的 <settings.py> 檔中

已加入圖形驗證碼常用功能程式碼，只是加上註解，讀者可以將程式列前方「#」

移除，逐一測試其效果。

chalogin\settings.py43

44 CAPTCHA_NOISE_FUNCTIONS = (

45 #'captcha.helpers.noise_null', # 沒有樣式

46 'captcha.helpers.noise_arcs', #線

47 'captcha.helpers.noise_dots', #點

48 )

49

50 #CAPTCHA_IMAGE_SIZE = (150, 70) #圖片大小

51

52 #CAPTCHA_BACKGROUND_COLOR = '#ffff00' #背景頻色

53

54 #CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge'

#圖片為英文字母

55 #CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'

#圖片中為數學計算式

56

9-9


57 #CAPTCHA_LENGTH = 6 #英文字母個數

58

59 #CAPTCHA_TIMEOUT = 1 #時間限制 (分 )

圖片樣式

設定圖形驗證碼背景圖案的語法為：

CAPTCHA_NOISE_FUNCTIONS = ('圖案 ',)

圖案的值有：

█ captcha.helpers.noise_null：沒有圖案。 █ captcha.helpers.noise_arcs：圖案為「線」。 █ captcha.helpers.noise_dots：圖案為「點」。

預設值為同時具有點及線圖案。

CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_arcs',

'captcha.helpers.noise_dots',)

預設無圖案線圖案點圖案

設定圖形驗證碼背景顏色的語法為：

CAPTCHA_BACKGROUND_COLOR = '顏色 '

預設值為白色 (顏色為「#ffffff」)。

預設 #ffff00 #00ff00

設定圖形驗證碼中英文字母個數的語法為：

CAPTCHA_LENGTH = 數值

預設值為 4 個字母 (數值為「4」)。

預設 6個字母

9-10


設定圖形驗證碼尺寸的語法為：

CAPTCHA_IMAGE_SIZE = (長 , 寬 )

圖片長及寬的單位是「像素」，預設值由系統根據瀏覽器解析度自行決定。

預設長 150, 高 70

設定圖形驗證碼輸入時間限制的語法為：

CAPTCHA_TIMEOUT = 數值

時間的單位是「分鐘」，預設值為「5」，即在 5 分鐘內輸入才有效。

驗證方式

django-simple-captcha 套件可產生 2 種驗證方式，語法為：

CAPTCHA_CHALLENGE_FUNCT = '驗證方式 '

驗證方式的值有：

█ captcha.helpers.random_char_challenge：英文字母驗證。 █ captcha.helpers.math_challenge：數學計算式驗證。

預設值為英文字母驗證。

若設定為數學計算式驗證，產生的圖形驗證碼如下圖：

需輸入「36」才能通過驗證。

9-11


9.2 網站留言版網站上的留言版，可以說是站長與網友溝通的橋樑，所以許多網站都希望能夠放

置留言版，讓網友可以有一個交流的空間。本章開發的網站留言版，不僅可供訪

客觀看，發表留言，管理者也擁有完整的管理功能，並可對訪客留言做回應。

9.2.1 使用網站留言版

確認已安裝 django-simple-captcha 套件後，將本書範例 <board> 資料夾複製

到 <C:\DjangoEnv> 目錄中，在命令提示字元視窗中啟動虛擬環境並切換到

<board> 資料夾，啟動本機伺服器。

首頁會以每頁 3 則留言方式顯示留言，按上一頁、下一頁鈕可切換頁面。右上

方為功能區：瀏覽留言即為首頁，我要留言可新增一筆留言，版主管理會開啟

登入頁面讓使用者輸入管理者帳號及密碼。

使用者按我要留言開啟我要留言頁面，輸入各項資料及驗證碼後按送出鈕就會

新增一筆留言。標題、姓名及內容為必填欄位，若未輸入資料則無法送出表單。

9-12


在首頁點選版主管理開啟登入頁面，帳號輸入「admin」，密碼輸入「aa123456」，

按送出鈕即可進入管理頁面。管理頁面也是每頁顯示 3 筆留言，輸入版主回應

欄位資料或修改各欄位內容按確定修改就可將資料存入資料庫，按左方刪除鈕

會開啟刪除頁面並顯示該則留言內容，按確定刪除鈕即可刪除該則留言。

9.2.2 網站留言版流程圖

index.html

post.html

delete.html

adminmain.html

login.html

留言版主頁面

新增留言頁面登入

新增留言

刪除登出

登入成功

登入失敗

刪除留言

開始

留言版管理首頁

登入管理

9-13


9.2.3 網站留言版資料庫結構

資料庫結構定義在 <models.py> 中，內含 BoardUnit 資料表：

boardapp\models.py 1 from django.db import models

2

3 class BoardUnit(models.Model):

4 bname = models.CharField(max_length=20, null=False)

5 bgender = models.CharField(max_length=2, default='m', null=False)

6 bsubject = models.CharField(max_length=100, null=False)

7 btime = models.DateTimeField(auto_now=True)

8 bmail = models.EmailField(max_length=100, blank=True, default='')

9 bweb = models.CharField(max_length=200, blank=True, default='')

10 bcontent = models.TextField(null=False)

11 bresponse = models.TextField(blank=True, default='')

12

13 def __str__(self):

14 return self.bsubject

所有欄位名稱都以「b」為前置字元，避免與保留字衝突。bname、bgender、

bsubject 及 bcontent 分別儲存留言者姓名、性別、留言標題及內容，這些欄位必

須有資料。bmail、bweb 及 response 分別儲存留言者電子郵件、網址及版主回

應，這些欄位可以沒有資料。

btime 儲存留言時間，以「auto_now=True」參數取得系統目前時間做為欄位值。

9.2.4 <settings.py> 加入 captcha

本專題使用圖形驗證碼，需在 <settings.py> 檔的 INSTALLED_APPS 項目加入

captcha。本專題的驗證碼背景圖案使用「點圖案」。

board\settings.py⋯⋯

33 INSTALLED_APPS = [

34 'django.contrib.admin',

35 'django.contrib.auth',

36 'django.contrib.contenttypes',

37 'django.contrib.sessions',

38 'django.contrib.messages',

39 'django.contrib.staticfiles',


隨著數位相機的流行，拍下生活中的點點滴滴放

到網路上與朋友分享，已經是許多現代人的日常

習慣。

本專題將完成一個實用的網路相簿程式，管理者

可以輕易將數位照片上傳到相簿的內容中分享。

專題：網路相簿

. . . . . . . . . . . . . . . . . . . . .....................................

............. .. .. .. .. .. . .

. . . .. . . . . . . . . . . . . . . . . . . . . . . . ............................

...

............. .. .. . .. . .

. . . .. . . . . . ......................................

....................

.......

10Chapter

10-6


10.2 網路相簿隨著數位相機的流行，拍下生活中的點點滴滴放到網路上與朋友分享，已經是許

多現代人的日常習慣。本專題將完成一個實用的網路相簿程式，管理者可以輕易

將數位照片上傳到相簿的內容中分享。

10.2.1 使用網路相簿

將本書範例 <album> 資料夾複製到 <C:\DjangoEnv> 目錄中，在命令提示字元

視窗中啟動虛擬環境並切換到 <album> 資料夾，啟動本機伺服器。

首頁會顯示所有相簿的第 1 張相片，相片下方為相簿名稱，並在頁面右上方顯示

相簿總數。點選相簿的第 1 張相片或相簿名稱會進入相簿詳細頁面，相簿詳細頁

面顯示相簿中所有相片，相片下方為相片標題，並在頁面右上方顯示相片總數。

在相簿詳細頁面點選相片會開啟顯示該相片的頁面。在首頁點選相簿管理鈕就

進入登入頁面，帳號輸入「admin」，密碼輸入「aa123456」，按登入管理鈕即

可進入管理頁面。管理頁面與首頁雷同，按新增相簿鈕可建立新相簿。

10-7

10專題：網路相簿

在新增相簿頁面填寫資料 (相簿名稱一定要填寫 )後按確定新增鈕即可建立新相

簿，回到管理頁面可見到新建的相簿，由於新相簿沒有相片，會以「暫無圖片」

圖形取代第 1 張相片。按相片下方 ( 刪除相簿 ) 鈕會彈出確認刪除對話方塊，按

確定鈕就刪除相簿 (包含相簿中所有相片 )；按相片下方相簿名稱則會進入相簿

維護頁面。

在修改相簿頁面可以修改相簿各項資訊，最重要的是可上傳相片檔案，一次最多

可上傳 5 張相片，設定好相片路徑及標題後按更新及上傳資料鈕就會將檔案上

傳。上傳完成後會在下方管理相片區域顯示相簿中所有相片，管理者可修改相

片標題及刪除相片。

10-8


10.2.2 網路相簿流程圖

index.html

網路相簿首頁

登入系統

albumshow.html

相簿瀏覽頁面

adminadd.html

新增相簿頁面

adminmain.html

albumphoto.html

照片瀏覽頁面

adminfix.html

修改相簿頁面

登入失敗

瀏覽單一相簿

瀏覽單一照片

登入成功

新增相簿

新增成功

修改相簿內容

及上傳圖片

開始

網路相簿管理首頁

login.html

10.2.3 網路相簿資料庫結構

資料庫結構定義在 <models.py> 中，內含 AlbumModel 及 PhotoModel 資料表：

albumapp\models.py 1 from django.db import models

2

3 class AlbumModel(models.Model):

4 adate = models.DateTimeField(auto_now=True)

5 alocation = models.CharField(max_length=200, blank=True, default='')

6 atitle = models.CharField(max_length=100, null=False)

7 adesc = models.TextField(blank=True, default='')


9 return self.atitle

10

11 class PhotoModel(models.Model):

12 palbum = models.ForeignKey('AlbumModel', on_delete=models.CASCADE)

13 psubject = models.CharField(max_length=100, null=False)

14 pdate = models.DateTimeField(auto_now=True)

15 purl = models.CharField(max_length=100, null=False)


想要在網站上自己開店當老闆嗎？那麼購物車就

是您網站必須具備的主要功能之一，本專題可以

幫助您完成購物流程的規劃、製作及網路開店的

夢想！

購物車專題將以顧客的購物流程製作為重點，至

於商品庫存控管、客戶管理或是訂單處理等問

題，則不在本專題討論範圍中。

專題：購物車

. . . . . . . . . . . . . . . . . . . . .....................................

............. .. .. .. .. .. . .

. . . .. . . . . . . . . . . . . . . . . . . . . . . . ............................

...

............. .. .. . .. . .

. . . .. . . . . . ......................................

....................

.......

11Chapter

11-9

11專題：購物車

11.2.2 購物車流程圖

index.html

addcocart.html

購物車首頁

購物車功能頁

cart.html

檢視購物車頁面

cartcheckout.html

確認購物內容頁面

detail.html

產品詳細頁面

cartok.html

完成購物頁面

cartordercheck.html

查詢訂單頁面

商品加入購物車

送出訂單確認信

利用訂單編號、電

子郵件查詢訂單

商品加入購物車

開始

11.2.3 購物車資料庫結構

資料庫結構定義在 <models.py> 中，內含 ProductModel、OrdersModel 及

DetailModel 資料表：

cartapp\models.py 1 from django.db import models

2

3 class ProductModel(models.Model):

4 pname = models.CharField(max_length=100, default='')

5 pprice = models.IntegerField(default=0)

6 pimages = models.CharField(max_length=100, default='')

7 pdescription = models.TextField(blank=True, default='')


9 return self.pname

10

11-13

11專題：購物車

11.2.6 首頁處理函式及模版

使用者以「http://127.0.0.1:8000」開啟本專題就會執行 <views.py> 中的 index

函式載入 <index.html> 網頁，會顯示所有商品。

cartapp\views.py 1 from django.shortcuts import render, redirect

2 from cartapp import models

3 from smtplib import SMTP, SMTPAuthenticationError, SMTPException

4 from email.mime.text import MIMEText

5

6 message = ''

7 cartlist = [] #購買商品串列

8 customname = '' #購買者姓名

9 customphone = '' #購買者電話

10 customaddress = '' #購買者地址

11 customemail = '' #購買者電子郵件

12


14 global cartlist

15 if 'cartlist' in request.session: #若 session中存在 cartlist就讀出

16 cartlist = request.session['cartlist']

17 else: #重新購物

18 cartlist = []

19 cartnum = len(cartlist) #購買商品筆數

20 productall = models.ProductModel.objects.all() #取得資料庫所有商品


⋯⋯

第 3-4 列，本專題使用 Smtplib 模組寄送電子郵件，故需引入這些模組。

第 6-11 列，訊息 (message)、購物車商品串列 (cartlist) 及購買者資訊

(customname 等 )，有多個頁面會使用這些資料，故設為全域變數。

為了讓使用者已選取的購物商品在瀏覽器關閉之後仍能存在一段時間，因此本專

題將購物車商品存於 session 中。第 15-16 列檢查 session 購物車中是否有商品

存在，若有就讀取資料讓使用者繼續購物，如果 session 沒有購物車商品，表示

使用者重新購物，在 17-18 列清空購物車串列。

第 19 列取得購物車商品數量，傳送給 <index.html> 判斷購物車內商品的數量。

第 20 列由資料庫取得所有商品資料，傳送給 <index.html> 顯示商品資訊。


埔里美食地圖專題將在網頁上加入 Google 地圖，透過資料庫中記錄的美食景點，利用經緯度

標示在地圖上。瀏覽者不僅可以在點選景點時看

到介紹訊息、街景縮圖，並可以直接進入街景模

式來檢視真實的街景圖片，讓美食的資訊結合地

圖，使整個專題的功能更加實用。

專題：埔里美食地圖

. . . . . . . . . . . . . . . . . . . . .....................................

............. .. .. .. .. .. . .

. . . .. . . . . . . . . . . . . . . . . . . . . . . . ............................

...

............. .. .. . .. . .

. . . .. . . . . . ......................................

....................

.......

12Chapter

12-7

12專題：埔里美食地圖

12.1.4 Google 地圖整合範例

將本書範例 <gmap>資料夾複製到 <C:\DjangoEnv> 目錄中，在命令提示字元

視窗中啟動虛擬環境並切換到 <gmap> 資料夾，啟動本機伺服器。

首頁 (127.0.0.1:8000) 會顯示 Google 地圖，按加入地標鈕會在台北 101 大樓

建立地標，點選地標會顯示訊息視窗，按顯示街景鈕會切換到街景服務。

<views.py> 只是顯示 <index.html> 網頁模版。

gmapapp\views.py 1 from django.shortcuts import render

2



<index.html> 中建立 Google 地圖、建立地標、訊息視窗及街景服務。

templates\index.html 1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

5 <title>Google地圖 </title>

6 <script async defer type="text/javascript" src="https://maps.

googleapis.com/maps/api/js?callback=loadGoogleMap"></script>

7 <script language="javascript">

8 google.maps.event.addDomListener(window, 'load',

loadGoogleMap); //啟動 GoogleMap

Documents

Chapter 09epaper.gotop.com.tw/PDFSample/ACL051400.pdf · 9-5 專題：網站留言版 09 chalogin\urls.py ⋯⋯ 16 from django.conf.urls import url, include 17 from django.contrib