PHP動態網站開發項目教程項目2在線投票系統任務7項目開發前的準備工作子任務7.1項目介紹7.1.1項目基本需求分析

（1）游客可以查看投票項目，以及各項目的當前得票數。（2）游客可以注冊成為會員。（3）游客注冊后可以登錄本系統。（4）登錄系統后，可以單擊車輛圖片實現投票。（5）管理員可以登錄后臺管理系統查看車輛列表。（6）管理員可以通過列表查看所有投票項目的得票情況。（7）管理員可以管理各個投票項目（包括新增、刪除、編輯）。（8）管理員可以通過圖表的形式查看各項目的得票情況。

7.1.2項目詳細設計

（1）整合會員管理系統。（2）會員登錄后，單擊列表中的項目進行投票。投票后，票數立即變化，顯示新的票數。（3）只有登錄用戶可以投票，未登錄用戶單擊投票項目時，彈出需要登錄的提示。（4）限制同一名用戶一天只能給一個投票對象投5票。（5）限制同一名用戶一天只能給3個投票對象投票。（6）投票時要輸入驗證碼，以防止機器或程序刷票。（7）每個投票對象之間至少要間隔1min才能重復投票。（8）一個IP地址一天只能給一個投票對象投5票。（9）投票采用AJAX無刷新技術，前端頁面無須刷新。（10）管理員登錄后，進入管理頁面，通過列表查看所有投票項目的得票情況。（11）管理員登錄后，可以管理所有投票項目，包括編輯和刪除已有項目、添加新的投票項目。（12）管理員可以通過圖表的形式查看投票項目得票情況，圖表以柱狀圖的形式呈現。7.1.3項目展示

（1）圖7.1.1所示為項目首頁。圖7.1.1

項目首頁（2）圖7.1.2所示為管理員登錄后的首頁。圖7.1.2

管理員登錄后的首頁（3）圖7.1.3所示為投票時輸入驗證碼的頁面。圖7.1.3

投票時輸入驗證碼（4）圖7.1.4所示為管理員進行車輛管理的頁面。圖7.1.4

管理員進行車輛管理（5）圖7.1.5所示為管理員添加車輛時的頁面。圖7.1.5

管理員添加車輛（6）圖7.1.6展示了管理員查看車輛得票情況柱狀圖頁面。圖7.1.6

管理員查看車輛得票情況柱狀圖子任務7.2版本控制與代碼托管【知識儲備】7.2.1版本控制

版本控制軟件提供完備的版本管理功能，用于存儲、追蹤目錄（文件夾）和文件的修改歷史，是軟件開發者的必備工具，是軟件公司的基礎設施。版本控制軟件的最高目標是支持軟件公司的配置管理活動、追蹤多個版本的開發和維護活動，以及及時發布軟件。簡單來說，在開發過程中會不斷發現新需求，不斷發現bug，如果不做控制，那么軟件將永遠不能發布，或今天發布一個版本，明天又發布一個版本。

版本控制對于DevOps（Development和Operations的組合詞，是一組過程、方法與系統的統稱，用于促進開發、技術運營和質量保障部門之間的溝通、協作與整合）團隊的成功起著核心作用。根據2022年度DevOps研究，版本控制一直是整體軟件工程性能的最佳指標之一，使用版本控制有以下優勢。1．更快、更簡單地發現錯誤2．并行開發3．提高最終產品的可靠性

版本控制和一流的軟件工程性能之間的共生關系是顯而易見的。當團隊正確利用版本控制系統時，可以以更快的速度和更高的可靠性水平進行更改。DevOps的目標是加快整個生產過程，同時提高工作的質量。版本控制在增強團隊溝通和成功開發產品方面發揮著巨大作用，并為實現這些目標提供了巨大的幫助。7.2.2Git介紹

代碼托管服務通常是企業或者組織基于版本控制工具提供的一種研發流程管理工具，例如，大家熟知的“GitHub”就是面向開源開發者提供的基于Git版本管理工具的代碼托管服務。所以代碼托管服務隨著使用規模的擴大，通常也會變得更加龐大、復雜和難以管理，對于個人開發者而言可能無須關注，但對于企業而言需要一定的維護成本，畢竟大多數情況下，代碼托管服務中存儲的可能是企業的核心軟資產。對于代碼托管服務來說，比較核心的要點有3個。（1）可協同。在功能層面要包含倉庫管理、分支管理、權限管理、提交管理、代碼評審等代碼存儲和版本管理功能，讓開發者更好地協同工作。（2）可集成。好的代碼托管服務應該具備靈活和簡易的第三方工具集成能力，有些甚至直接提供了嵌入式的CI/CD（CI指的是持續集成，CD指的是持續部署）能力，降低了DevOps的落地成本。（3）安全可靠。這是最重要的一點，對于個人開發者而言可能無感，但是對于企業而言，代碼的安全性、服務的穩定性、數據是否存在丟失的風險，是最被優先考量的點。7.2.3碼云的使用

打開碼云的官網，注冊一個個人賬號即可免費使用代碼托管服務。

為了配合代碼托管的使用，我們還需要在計算機中安裝Git軟件。

PhpStorm完美支持Git，可以通過PhpStorm的菜單命令完成版本控制和代碼托管的相關操作，非常方便。7.2.4Git的工作流程

在本地計算機中分有3個區域，分別是工作區（IDE代碼區）、暫存區（修改過的文件緩存區）、本地倉庫（確認修改過的所有文件區）。在遠程服務器上有一個“遠程倉庫”，保存所有的代碼，可以推送到服務器與別人共享。在項目開始時，我們的本地倉庫為空，此時，需要從遠程倉庫克隆（clone）代碼到本地倉庫（此時，遠程倉庫應該有初始化信息，或者有其他人完成的代碼）。

在后續過程中，如果要更新代碼，就需要從服務器拉取（fetch）代碼到本地倉庫，然后合并（merge）到工作區，也可以使用pull命令合并上述fetch和merge命令。上述工作流程的示意如圖7.2.1所示。圖7.2.1

Git工作流程示意

圖7.2.2所示為個人使用Git的流程示意。圖7.2.2

個人使用Git的流程示意

圖7.2.3所示為團隊使用Git的流程示意。圖7.2.3

團隊使用Git的流程示意

其中，fork操作表示把別人的倉庫直接復制到本人的遠程倉庫中；clone命令表示從遠程倉庫直接下載到本地倉庫中（適用于初始化，本地倉庫為空的情況）；pull命令表示從遠程倉庫拉取代碼合并到本地倉庫（適用于已經有本地倉庫的情況）；add命令表示將修改后的代碼添加至暫存區，commit命令表示將暫存區代碼提交至本地倉庫；push命令表示從本地倉庫更新文件到遠程倉庫。

PhpStorm可以完美支持Git，只需要先安裝好Git軟件，然后在PhpStorm中配置好Git文件路徑，就可以在PhpStorm中克隆遠程倉庫至本地以初始化項目。在本地編輯程序后，再通過add、commit、push命令更新遠程倉庫。7.2.5在PhpStorm中使用Git

（1）在Git官網下載安裝程序。下載時，選擇好對應的操作系統和軟件位數。同時，還可以選擇安裝版本（Setup）或綠色版本（Portable），如圖7.2.4所示。圖7.2.4

下載Git安裝程序（2）打開PhpStorm，單擊“Settings”

→“VersionControl”

→“Git”，然后在“PathtoGitexecutable”中選擇“git.exe”文件的路徑，最后單擊“Test”按鈕，如果成功顯示Git的版本，則說明配置完成，如圖7.2.5所示。圖7.2.5

配置git.exe文件路徑

在新版本的PhpStorm中，也可以不用事先安裝Git，而是在使用時，通過PhpStorm直接下載并安裝。以PhpStorm2021.2.1為例，在歡迎界面中單擊右上角的“GetfromVCS”按鈕，然后在Versioncontrol下拉菜單中選擇Git，系統會提示Git并未安裝，只需要單擊“DownloadandInstall”按鈕即可完成安裝，如圖7.2.6所示。圖7.2.6

從VCS復制項目（3）在碼云中創建一個倉庫。登錄碼云后，將鼠標指針移至右上角的“+”處，在彈出的快捷菜單中選擇“新建倉庫”。按要求輸入倉庫名稱和路徑（輸入倉庫名稱后，路徑會自動填充），如果路徑和已有倉庫路徑重復，則系統會給出提示，只需要修改路徑名稱即可。如圖7.2.7所示，新建倉庫時，可以選擇是“私有”還是“開源”。開源表示任何人都可以訪問你的倉庫，可以下載你的文件。私有表示僅有你自己，或你添加的成員可以下載或修改你的文件。當然，在現在的碼云系統中新建倉庫時，只能選擇私有。如果想設置成開源，則可以在倉庫創建好以后，單擊“管理”→“基本信息”命令，重新設置成開源。圖7.2.7

在碼云中新建倉庫

創建好倉庫以后，單擊“代碼”選項卡，可以看到有一個倉庫的地址，如圖7.2.8所示。此處默認顯示的是HTTPS地址，單擊右邊的復制圖標即可復制地址，然后將地址填充到圖7.2.6中的URL文本框中，在下面的Directory中選擇項目所在位置，再單擊右下角的“Clone”按鈕，即可完成項目的復制。小王同學選擇將項目創建至E:\onlineVote。圖7.2.8

復制倉庫地址（4）項目復制成功后，PhpStorm會自動打開當前項目。由于剛才在碼云中新建的是一個空白倉庫，因此，現在在本地項目文件夾中沒有任何文件。如果在碼云的當前倉庫中添加了一些文件，那么復制項目以后，這些文件會自動同步到當前項目中。選中項目根目錄并單擊鼠標右鍵，創建一個新文件index.php。當有新的文件加入項目中時，系統會自動提示是否將此文件添加到Git中，如圖7.2.9所示。圖7.2.9

添加文件到Git

單擊“Add”按鈕，即可將文件添加至Git。勾選“Don’taskagain”復選框后，以后新增加的文件都會自動添加至Git。為了查看文件是否添加到Git的區別，還可以再新建一個test.php文件，然后選擇不添加至Git，最后觀察這兩個文件的顏色是有區別的，“index.php”為綠色，“test.php”為紅色，如圖7.2.10所示。當然，具體的顏色和當前PhpStorm使用的主題有關。圖7.2.10

將新增文件添加至Git（5）當工作進行到一定的進度以后，就可以把當前的文件提交到碼云。選中項目目錄并單擊鼠標右鍵，在彈出的快捷菜單中選擇“Git”→“CommitDirectory”命令，如圖7.2.11所示。接下來，會打開提交文件的對話框，如圖7.2.12所示。其中左上角第一個區域就是當前添加到Git且有修改的文件，第二個區域是未添加到Git的文件，默認選中第一類文件。在左邊中間區域需要輸入提交信息（CommitMessage），就是這一次提交的描述信息。圖7.2.11

提交目錄

在圖7.2.12最下面的區域顯示當前選中文件的內容。如果此文件是新增加的文件，則直接在下面區域顯示其當前內容。如果此文件是原來已經有的文件，并進行了修改，則下面的區域分成左右兩欄顯示。其中左邊一欄是該文件上一個版本的內容，右邊一欄是該文件現在的內容。單擊下面的“Commit”按鈕即可將修改后的文件提交至本地倉庫。

如果需要將文件提交至遠程倉庫，則再次在圖7.2.11中單擊“Push”命令。當然，也可以在“Commit”時同時完成“Push”，只需要單擊“Commit”按鈕旁邊的下拉按鈕，選擇“CommitandPush”命令，打開圖7.2.13所示的界面，單擊右下角的“Push”按鈕，在彈出的登錄的窗口中輸入碼云的用戶名和密碼，可以勾選“Remember”復選框以記住密碼，避免每次都要重新輸入。圖7.2.12

提交文件圖7.2.13

提交文件至遠程倉庫

“Push”成功后，可以到碼云中查看倉庫，在倉庫中可以看到剛才新上傳的所有文件。

如果我們換了一臺新計算機，或者有其他協作者也上傳了代碼，本地倉庫的文件就不是最新版本了。此時，可以在圖7.2.11中選擇“Pull”命令，將最新的文件拉取至本地倉庫。

如果多次提交過某一個文件，這個文件就會被保存為多個版本。此時，可以在圖7.2.11中單擊“ShowHistory”命令，此文件的所有版本將顯示在下面的窗口中，可以單擊任意一個版本的文件查看內容，如圖7.2.14所示。如果想撤銷某個版本的修改內容，或者回到這個版本的上一個版本，就可以選中想要回退的版本并單擊鼠標右鍵，然后選擇“RevertCommit”命令，新建一個名為“Revert×××Commit”的提交記錄，該記錄進行的操作是將“×××Commit”中對代碼進行的修改全部撤銷。圖7.2.14

查看文件的歷史版本子任務7.3數據庫設計的方法及原理【知識儲備】7.3.1數據庫設計的方法

（1）直觀設計法（手工試湊法）。這是最早使用的數據庫設計方法。這種方法依賴于設計者的經驗和技巧，缺乏科學分析的理論基礎和工程手段的支持，因為設計質量與設計人員的經驗和水平有直接關系，所以設計質量很難保證，主要適用于一些簡單小型的系統。（2）規范設計法。將數據庫設計分為若干階段，明確規定各階段的任務，采用“自頂向下、分層實現、逐步求精”的設計原則，結合數據庫理論和軟件工程設計方法，實現設計過程的每一細節，最終完成整個設計任務。這種方法包括新奧爾良方法、基于實體-聯系（Entity-Relationship，E-R）模型的數據庫設計方法、基于第三范式（ThirdNormalForm，3NF）的設計方法、面向對象的數據庫設計方法、統一建模語言（UnifiedModelingLanguage，UML）方法等。（3）計算機輔助設計法。在數據庫設計的某些過程中，可以利用計算機和一些輔助設計工具模擬某一規范設計法，并以人的知識或經驗為主導，通過人機交互方式實現設計中的某些部分。比如，Oracle公司開發的Designer、Sybase公司開發的PowerDesigner，都是常用的數據庫設計工具軟件。7.3.2數據庫設計的基本步驟

（1）需求分析。通過詳細調查現實世界要處理的對象（組織、部門、企業等），充分了解原系統（手工系統或計算機系統）的工作概況，明確用戶的各種需求。（2）概念結構設計。通過對用戶需求進行綜合、歸納與抽象，形成一個獨立于具體數據庫管理系統的概念模型。（3）邏輯結構設計。將概念結構轉換為某個數據庫管理系統支持的數據模型，并對其進行優化。（4）物理結構設計。為邏輯結構選取最適合應用環境的物理結構，包括存儲結構和存取方法等。（5）數據庫實施。根據邏輯結構設計和物理結構設計的結果構建數據庫，編寫與調試應用程序，組織數據入庫并進行試運行。（6）數據庫運行和維護。經過試運行后即可投入正式運行，在運行過程中必須不斷對其進行評估、調整與修改。設計步驟設計描述數據處理需求分析數據字典、數據項、數據流、數據存儲的描述數據流圖、判定樹、數據字典中處理過程的描述概念結構設計概念模型（E-R模型）、數據字典系統說明書（系統要求、方案、數據流圖）邏輯結構設計某種數據模型（如關系）系統結構圖（模塊結構）物理結構設計存儲安排、方法選擇、存取路徑建立模塊設計數據庫實施編寫與調試應用程序、裝入數據、數據庫試運行程序編碼、編譯聯結、測試數據庫運行和

維護性能監測、轉儲/恢復、數據庫重組和重構新舊系統轉換、運行、維護表7.3.1

數據庫的設計步驟及具體的設計描述7.3.3概念結構設計

概念結構設計就是將需求分析得到的用戶需求抽象為信息結構（即概念模型）的過程。

目前應用最普遍的是E-R模型，它將現實世界的信息結構統一用屬性、實體以及它們之間的聯系來描述。

為了簡化E-R模型的處理，現實世界的事物能作為屬性對待的，盡量作為屬性對待。

其中有兩條基本的準則。（1）作為屬性，不能再具有需要描述的性質。屬性必須是不可再細分的數據項，不能包含其他屬性。（2）屬性不能與其他實體具有聯系，即E-R模型中所表示的聯系是實體之間的聯系。7.3.4實體-聯系圖（E-R模型）

對E-R模型的理解，主要是弄清楚其組成元素和元素間的聯系。（1）組成元素。E-R模型中具體的組成元素如表7.3.2所示。元素描述表示形式實體客觀存在并可以相互區別的事物用矩形框表示，矩形框內寫明實體名屬性實體所具有的一個屬性用橢圓形表示，并用無向邊將其與相應的實體連接起來聯系實體和實體之間，以及實體內部的聯系用菱形表示，菱形框內寫明聯系名，并用無向邊分別將其與有關實體連接起來，同時在無向邊旁邊標上聯系的類型表7.3.2

E-R模型中具體的組成元素（2）聯系詳解。

實體之間的聯系最常見的有如下3種。①一對一。

圖7.3.1所示為一對一聯系的示意。其含義是，實體集“公民”中的每一個實體至多與實體集“身份證號碼”中一個實體有聯系；反之，實體集“身份證號碼”中的每個實體至多與實體集“公民”中的一個實體有聯系。圖7.3.1

一對一聯系示意②一對多。

圖7.3.2所示為一對多聯系的示意。其含義是，實體集“班級”至少與實體集“學生”中的N（N

>0）個實體有聯系；并且實體集“學生”中的每一個實體至多與實體集“班級”中的一個實體有聯系。圖7.3.2

一對多聯系示意③多對多。

圖7.3.3所示為多對多聯系的示意。其含義是，實體集“學生”中的每一個實體至少與實體集“課程”中的M（M

>0）個實體有聯系，并且實體集“課程”中的每一個實體至少與實體集“學生”中的N（N

>0）個實體有聯系。圖7.3.3

多對多聯系示意子任務7.4創建數據庫7.4.1實例詳解

為了能順利完成數據庫設計，小王同學先做了如下的練習。

問題描述：（1）一個學生可選修多門課程，一門課程有若干學生選修；（2）一個教師可講授多門課程，一門課程只有一個教師講授；（3）一個學生選修一門課程，僅有一個成績；（4）學生的屬性有學號、姓名；教師的屬性有教師編號、教師姓名；課程的屬性有課程號、課程名。

根據上面的問題描述，小王同學最終繪制了圖7.4.1所示的E-R模型，其中，有下畫線的屬性表示主鍵。圖7.4.1

根據問題描述繪制的E-R模型

有了E-R模型，就可以轉換數據表了。一般來說，可以為一個實體創建一張表，為一個聯系（關系）創建一張表。當然，在實際工作中，可以根據情況進行合并等操作。

完成上面的E-R模型后，小王同學覺得火候差不多了，可以正式制作在線投票系統的數據庫了。他仔細看了子任務7.1的需求分析，然后畫出了圖7.4.2所示的E-R模型。

他仔細檢查和分析后，覺得這個E-R模型已經沒有問題了，能夠完整體現在線投票系統的需求分析，接下來，他根據E-R模型設計出了最終的數據表，其具體結構如表7.4.1～表7.4.3所示。圖7.4.2

在線投票系統數據庫設計之E-R模型序號列名類型排序規則注釋1idint(11)

用戶ID，主鍵2userNamevarchar(20)utf8_unicode_ci用戶名3pwvarchar(32)utf8_unicode_ci密碼4emailvarchar(256)utf8_unicode_ci信箱5admintinyint(1)

是否為管理員6picvarchar(256)utf8_unicode_ci用戶頭像表7.4.1

用戶表（表名：userInfo）序號列名類型排序規則注釋1idint(11)

投票詳情ID，主鍵2userIDint(11)

用戶ID，外鍵3carIDint(11)

車輛ID，外鍵4voteTimedate

投票時間5ipvarchar(15)utf8_unicode_ci投票者IP地址表7.4.2

投票表（表名：voteDetail）序號列名類型排序規則注釋1idint(11)

車輛ID，主鍵2carNamevarchar(45)utf8_unicode_ci車輛名稱3carDescvarchar(1000)utf8_unicode_ci車輛描述4carPICvarchar(256)utf8_unicode_ci車輛圖片5carNumint(11)

車輛得票數表7.4.3

車輛表（表名：carInfo）7.4.2主鍵和外鍵

在小王同學設計的數據表中出現了“主鍵”和“外鍵”。那什么是主鍵和外鍵呢？

關系數據庫中的一條記錄有若干屬性，若其中某一個屬性或屬性組能唯一標識一條記錄，該屬性或屬性組就可以稱為一個主鍵。

比如，有一張數據表名為“學生表”，其列構成為：學號、姓名、性別、班級。其中每個學生的學號是唯一的，因此，學號就是一個主鍵。

又如，有一張數據表名為“課程表”，其列構成為：課程編號、課程名、學分。其中課程編號是唯一的，因此，課程編號就是一個主鍵。

再如，有一張數據表名為“成績表”，其列構成為：學號、課程編號、成績。顯然，成績表中的單個屬性無法唯一標識一條記錄，學號和課程編號的組合才可以唯一標識一條記錄，所以學號和課程編號的屬性組就是一個主鍵。

雖然成績表中的學號不是成績表的主鍵，但它和學生表中的學號相對應，并且學生表中的學號是學生表的主鍵，因此，可以稱成績表中的學號是學生表的外鍵。同理，成績表中的課程編號是課程表的外鍵。

數據表中，除了主鍵、外鍵，還有索引。那么主鍵、外鍵和索引有什么區別？表7.4.4總結了主鍵、外鍵和索引的區別。主鍵外鍵索引定義唯一標識一條記錄，不能有重復，不允許為空表的外鍵是另一表的主鍵，外鍵可以有重復的值，可以是空值該字段沒有重復值，但可以是空值作用用來保證數據完整性用來和其他表建立聯系提高查詢排序的速度個數主鍵只能有一個一張表可以有多個外鍵一張表可以有多個唯一索引表7.4.4

主鍵、外鍵和索引的區別

小王同學根據前面創建好的3張數據表，在phpMyAdmin中進行數據庫創建。他創建了一個數據庫，名為vote，其中就包括上述3張數據表，具體內容如圖7.4.3所示。其中每一張表都采用了一個id作為主鍵，這個id列是一個自動增長列，它本身并無實際意義，僅僅用來作為主鍵，作用是標識某一行數據。圖7.4.3

在phpMyAdmin中創建好的數據表7.4.3如何創建外鍵

1．創建外鍵的必備條件（1）需要把相關數據表的存儲引擎設置為InnoDB。（2）創建外鍵時，外鍵本身必須創建索引。（3）設置外鍵的列，其數據類型要和對應的主鍵數據類型保持一致。2．選擇數據表存儲引擎

在創建數據表時，可以在右下角的存儲引擎中選擇類型，如圖7.4.4所示。

在MySQL數據庫中，數據表的存儲引擎默認是MyISAM。如果要創建外鍵，則存儲引擎必須設置為InnoDB。3．MyISAM和InnoDB的區別（1）緩存機制。MyISAM僅僅緩存索引，不會緩存實際數據信息，它會將這一工作交給操作系統（OperatingSystem，OS）級別的文件系統緩存，所以MyISAM緩存優化工作集中在索引緩存優化上。InnoDB有自己的緩存，不僅緩存索引，還緩存表中的數據。（2）事務支持。MyISAM不支持事務。InnoDB支持事務，也支持主鍵和外鍵。（3）鎖定實現。MyISAM鎖定由MySQL服務控制，只支持表級鎖。InnoDB鎖定交由InnoDB存儲引擎，支持行級鎖、頁級鎖等粒度更小的鎖定級別。由于鎖定級別的差異，在更新并行度上，InnoDB比MyISAM好很多。（4）數據物理存儲方式（包括索引和數據）。在MyISAM存儲引擎中，每張數據表有3個文件：“.FRM”文件存放表結構數據；“.MYI”文件存放索引信息；“.MYD”文件存放表數據。圖7.4.4

新建數據表時設置存儲引擎4．存儲引擎的修改

如果已經使用默認存儲引擎創建好了數據表，則可以在進入數據表以后，在頁面上方導航菜單中單擊“操作”按鈕，然后在“存儲引擎”中進行修改，如圖7.4.5所示。圖7.4.5

在“操作”中修改數據表的存儲引擎5．添加外鍵

在phpMyAdmin中打開表結構后，其中有一個“關聯視圖”按鈕，單擊該按鈕，即可添加外鍵約束，如圖7.4.6所示。

從圖7.4.6中可以看出，在第一欄中可以輸入外鍵約束的名稱，在第二欄和第三欄中，可以設置當刪除（ONDELETE）、更新（ONU