模塊07 網(wǎng)站架構(gòu)

1模塊07網(wǎng)站架構(gòu)模塊引導(dǎo)本模塊是根據(jù)“世界技能大賽WebDeSign”競賽項目的內(nèi)容和要求，在網(wǎng)站架構(gòu)方面，采用了XAMPP架構(gòu)，集成了PHP環(huán)境，MYSQL數(shù)據(jù)庫，PHPMYADMIN可視化數(shù)據(jù)庫操作工具，可以減輕網(wǎng)站架構(gòu)人員對數(shù)據(jù)庫結(jié)構(gòu)化語言的依賴，同時，對大賽所涉及到的最前沿的專業(yè)技術(shù)有所掌握，為下一步深入掌握網(wǎng)頁制作與網(wǎng)站架構(gòu)打下了扎實的基礎(chǔ)。本模塊情境1主要講動態(tài)網(wǎng)站環(huán)境架構(gòu)及認(rèn)識，比如PHP的初步使用，PHPMYADMIN的使用，MYSQL數(shù)據(jù)庫的建立。本模塊情境2主要是構(gòu)建一個簡單的注冊登陸管理系統(tǒng)，以及開源類庫的基本使用。本模塊圍撓著網(wǎng)站架構(gòu)為主線，通過基本情境的構(gòu)建，培養(yǎng)學(xué)生的職業(yè)技能與職業(yè)素質(zhì)，每個情境有不同的、工作過程完整的模擬制作任務(wù)和獨立實踐任務(wù)組成。23學(xué)習(xí)目標(biāo)能力目標(biāo) 1.能夠掌握xampp的安裝和配置方法。 2.能夠制作簡單的網(wǎng)頁計數(shù)器。

3.能夠建立簡單的MYSQL數(shù)據(jù)庫。知識目標(biāo)

1.掌握PHP的基本語法。

2.理解數(shù)據(jù)庫的概念。

3.理解數(shù)據(jù)庫備份復(fù)原的概念。課時分配

2課時（授課1課時，實踐1課時）。應(yīng)知技能網(wǎng)站建設(shè)所需環(huán)境包括軟件環(huán)境和硬件環(huán)境，軟件環(huán)境包括網(wǎng)頁制作工具，程序開發(fā)及測試工具，數(shù)據(jù)庫開發(fā)工具，網(wǎng)站發(fā)布推廣工具等，硬件環(huán)境主要包括服務(wù)器硬件配置，網(wǎng)絡(luò)環(huán)境，我們這里主要講動態(tài)網(wǎng)站所需環(huán)境架構(gòu)，主要包括PHP、PHPMYADMIN、MYSQL的認(rèn)識和使用。XAMPP是一款A(yù)pache+MYSQL+PHP+PHPMYADMIN+FileZillaFTP的服務(wù)器系統(tǒng)開發(fā)套件，也是很多網(wǎng)站設(shè)計師及“世界技能大賽WebDeSign”動態(tài)網(wǎng)頁環(huán)境所用軟件。同時支持ZendOptimizer，支持插件安裝，目前最新xampp的版本是1.7.4。官方網(wǎng)址：，支持操作系統(tǒng)：Windows2000，XP(Server2003)，WIN7(Server2008)，我們在這里只需安裝這一軟件就可以解決動態(tài)網(wǎng)站所需環(huán)境。網(wǎng)站建設(shè)軟件環(huán)境5應(yīng)知技能MYSQL操作方法有很多種，如果你想像命令行那樣操作的話，那直接用MYSQL本身自帶的MYSQL客戶端即可。如果你想用某種可視化的GUI工具操作的話，可選擇的工具有很多種：PHPMyAdmin、MySQL-Front、Navicat、ToadForMySQL、SQLyog。根據(jù)比賽要求我們選擇PHPMyAdmin，PHPMyAdmin界面可視友好，可以遠(yuǎn)程操作，所以使用PHPMYADMIN來完成我們的任務(wù)是非常方便的。網(wǎng)站建設(shè)軟件環(huán)境6模擬任務(wù)任務(wù)背景怎樣才能制作出一個屬于自己的網(wǎng)站？我們需要很多的工具，比如Adobe家族的Photoshop、Dreamweaver、Fireworks等，構(gòu)建動態(tài)網(wǎng)站還需要配置一些其它的軟件，以PHP為例，還需安裝Apache、MYSQL、PHP、PHPMYADMIN等。任務(wù)要求安裝動態(tài)網(wǎng)站所需環(huán)境。任務(wù)1安裝和配置xampp7模擬任務(wù)任務(wù)背景不管大型還是小型網(wǎng)站，一般都會有自己的網(wǎng)站計數(shù)器，以方便統(tǒng)計訪問者人次，以便進行各種決策，網(wǎng)站計數(shù)器可以很復(fù)雜，比如按IP進行統(tǒng)計，同一IP某一段時間訪問只按一次計算，這種計算更加科學(xué)，還可以按地區(qū)、來路等進行統(tǒng)計，當(dāng)然，網(wǎng)站計數(shù)器也可以很簡單的制作，每刷新一次頁面算一次訪問，即使這么簡單的計數(shù)器也有兩種做法，比如把數(shù)值寫入數(shù)據(jù)庫，也可以寫入文本文件，原理是一樣的，語法是有所區(qū)別的，表現(xiàn)形式也有兩種，一種是純字符形式表現(xiàn)，另一種是圖形形式表現(xiàn)。任務(wù)要求開發(fā)簡單網(wǎng)頁計數(shù)器。任務(wù)2簡單網(wǎng)頁計數(shù)器制作8模擬任務(wù)任務(wù)背景大型網(wǎng)站的數(shù)據(jù)量如此之大，究竟是放在哪里的？這么快的搜索速度是怎么做到的？怎樣驗證用戶信息，所有這些問題都指向同一個地方——數(shù)據(jù)庫，數(shù)據(jù)庫有很多種類，根據(jù)不同的需求構(gòu)建不同的數(shù)據(jù)庫，小型企業(yè)網(wǎng)站可以采用ACCESS數(shù)據(jù)庫，大中型網(wǎng)站可以用MSSQL或是MYSQL數(shù)據(jù)庫，其中MYSQL數(shù)據(jù)庫是免費開源的，我們這里為了無版權(quán)糾紛及講解方便就使用MYSQL數(shù)據(jù)庫。任務(wù)要求學(xué)習(xí)使用PHPMYADMIN建立用戶權(quán)限、數(shù)據(jù)庫、數(shù)據(jù)表、備份和恢復(fù)數(shù)據(jù)庫等。任務(wù)3學(xué)習(xí)和使PHPMYADMIN9知識拓展1．XAMPP介紹XAMPP是一款非常優(yōu)秀Apache+MYSQL+PHP的服務(wù)器系統(tǒng)開發(fā)套件，也是很多網(wǎng)頁設(shè)計大賽動態(tài)網(wǎng)頁環(huán)境所用軟件。同時支持ZendOptimizer，支持插件安裝，目前最新xampp的版本是1.7.4。官方網(wǎng)址：，支持操作系統(tǒng)：Windows2000，XP(Server2003)，WIN7(Server2008)。XAMPP1.7的特點：XAMPP支持的操作系統(tǒng)包括：Windows、Linux、MacOSX、Solaris；XAMPP是完全免費的，并且遵循GNU通用公眾許可XAMPP簡介10知識拓展2．XAMPP的配置文件路徑Web服務(wù)器軟件Apache基本配置：xampp\apache\conf\httpd.confPHP：xampp\php\php.ini數(shù)據(jù)庫軟件MySQL：xampp\mysql\bin\my.iniphpMyAdmin：xampp\phpMyAdmin\config.inc.phpFileZillaFTP服務(wù)器：xampp\FileZillaFTP\FileZillaServer.xmlMercury郵件服務(wù)器基本配置：xampp\MercuryMail\MERCURY.INISendmail：xampp\sendmail\sendmail.iniXAMPP的配置文件路徑11知識拓展3．XAMPP的常用路徑網(wǎng)站根目錄的默認(rèn)路徑：xampp\htdocsMYSQL數(shù)據(jù)庫默認(rèn)路徑：xampp\mysql\data4．XAMPP的默認(rèn)密碼1)MySQL（數(shù)據(jù)庫軟件）:User:rootPassword:（空）2)FileZillaFTP(FTP傳輸工具):User:newuserPassword:wamppUser:anonymousPassword:some@3)Mercury:Postmaster:postmaster(postmaster@localhost)Administrator:Admin(admin@localhost)TestUser:newuserPassword:wampp4)WEBDAV(基于HTTP1.1協(xié)議的通信協(xié)議):User:wamppPassword:xamppXAMPP的常用路徑及密碼12獨立實踐任務(wù)背景CMS是ContentManagementSystem的縮寫，意為“內(nèi)容管理系統(tǒng)”。內(nèi)容管理系統(tǒng)是企業(yè)信息化建設(shè)和電子政務(wù)的新寵，也是一個相對較新的市場。對于內(nèi)容管理，業(yè)界還沒有一個統(tǒng)一的定義，不同的機構(gòu)有不同的理解。內(nèi)容管理系統(tǒng)可建設(shè)具有獨特個性的網(wǎng)站?！熬W(wǎng)站模板與網(wǎng)站程序完全分離”和“模板方案”是CMS的主流設(shè)計特點，讓網(wǎng)站的模板設(shè)計與程序徹底分開。設(shè)計者可以將每個頻道、欄目甚至內(nèi)容頁面運用不同的模板，隨時能編輯、修改網(wǎng)站界面，更能一鍵切換預(yù)設(shè)的模板方案，更換網(wǎng)站界面。內(nèi)容管理系統(tǒng)后臺管理實現(xiàn)方便、易用、人性化的操作方式，創(chuàng)新采用書簽式管理的Web界面，切換方便，節(jié)省使用者和瀏覽者的時間。所見即所得的編輯功能，可以在內(nèi)容管理系統(tǒng)里直接進行文字的排版處理，還可以在線對圖片進行簡單處理。系統(tǒng)支持插入Flash、音頻、視頻、超鏈接、特殊字符等等。內(nèi)容管理系統(tǒng)使用基于角色的用戶管理，通過添加不同權(quán)限的用戶，可以將一個網(wǎng)站的管理權(quán)限分配給不同的用戶。通過建立具有不同管理權(quán)限的用戶組，可以將用戶分成多種級別：超級管理員、欄目管理員、文檔錄入員、審核員等一份內(nèi)容從最初錄入到最后發(fā)布到網(wǎng)站上，中間可以經(jīng)過編輯初審、修改，管理員審批等，保證發(fā)布內(nèi)容的質(zhì)量。任務(wù)要求1．安裝CMS組件；2．查看網(wǎng)站前臺欄目（前臺地址http://localhost/或/）；3．登陸后臺查看各功能（后臺地址http://localhost/admin/或/admin，用戶名：qibosoft，密碼：qibosoft）。任務(wù)4

安裝CMS套件學(xué)習(xí)目標(biāo)能力目標(biāo)

1.了解PHP基本語法。

2.了解和掌握數(shù)據(jù)庫與腳本的結(jié)合操作。

3.了解Session變量的使用的方法。

4.掌握開源類庫和框架制作客戶端應(yīng)用。知識目標(biāo)

1.了解和掌握連接數(shù)據(jù)庫的基本操作。

2.了解和掌握表單數(shù)據(jù)傳遞的基本原理。

3.了解和掌握接收表單數(shù)據(jù)的方法。

4.掌握數(shù)據(jù)庫的寫入和讀取操作。課時分配

4課時（授課2課時，實踐2課時）13應(yīng)知技能動態(tài)網(wǎng)站并不是指具有動畫功能的網(wǎng)站，而是指通過數(shù)據(jù)庫進行架構(gòu)的網(wǎng)站。動態(tài)網(wǎng)站除了要設(shè)計網(wǎng)頁外，還要通過數(shù)據(jù)庫和編程序來使網(wǎng)站具有更多自動的和高級的功能。動態(tài)網(wǎng)站體現(xiàn)在網(wǎng)頁一般是以asp，jsp，php，aspx等結(jié)束，而靜態(tài)網(wǎng)頁一般是HTML結(jié)尾，動態(tài)網(wǎng)站服務(wù)器空間配置要比靜態(tài)的網(wǎng)頁要求高，動態(tài)網(wǎng)頁利于網(wǎng)站內(nèi)容的更新，適合企業(yè)建站。14動態(tài)網(wǎng)站模擬任務(wù)15任務(wù)背景倫敦是一個世界級的城市，也是來自世界各地游客去英國旅游的主要景點。倫敦以其充生機勃勃而聞名，它有很多景點：大劇院、博物館、藝術(shù)畫廊，紀(jì)念碑、餐館、游泰晤士河以及在觀光巴士上游覽和購物等。有一個英國的咖啡店專營各種本地特色開胃小菜、湯和甜點。為了讓更多的來自世界各地的人們了解咖啡店，需要幫這個咖啡店制作一個帶有交互功能的網(wǎng)站，在前面的情境里我們已經(jīng)對靜態(tài)網(wǎng)頁的頁面進行了布局，有一些動態(tài)效果也附加上去了，為了讓游客和咖啡店之前有更多的交互，我們需要登記他們的信息，以便線上線下進行更多的交流。任務(wù)要求編寫一個用戶注冊登錄管理程序。使的用戶可以在網(wǎng)站上注冊賬號，完善各項信息，店主可以在后臺對用戶進行管理。使用php/mysql進行服務(wù)器端編程，構(gòu)造一個靈活的前后臺框架，滿足下述的功能需求?！鲈L客要填寫他們的Email（獨一無二）、昵稱/用戶名（獨一無二）、真實姓名以及密碼在網(wǎng)站上進行注冊，所有的表單域都為必填項?！鲎杂脩艨梢允褂盟麄兊拿艽a，昵稱或者Email（同一個表單）進行登錄和登出?！鲇脩舻卿浤懿榭醇靶薷耐暾膫€人信息?！鲚斎氲谋韱沃敌枰恍ｒ?。任務(wù)1會員注冊和管理模擬任務(wù)16任務(wù)背景開發(fā)一個網(wǎng)頁應(yīng)用程序，該程序是被用于2011年倫敦世界技能大賽的任務(wù)管理器。任務(wù)要求此設(shè)計需要使用開源功能庫來制作(JQuery,Mootools,Prototype)。此程序根據(jù)三種狀態(tài)來管理任務(wù)，并以帶有三列的告示板方式呈現(xiàn)，如下表。Backlog：本欄列出所有等待完成的工作In-Progress：本欄列出所有已開始進行的工作Done：本欄列出所有已經(jīng)完成的工作本應(yīng)用的主頁包括二個區(qū)域：第一個區(qū)域是任務(wù)注冊表單；第二個區(qū)域是任務(wù)管理器的公告板。板上有三列（未完成/正在進行/已經(jīng)完成），它展示了當(dāng)前每一個任務(wù)的進度狀態(tài)。任務(wù)2用開源類庫和框架制作客戶端應(yīng)用知識拓展當(dāng)您運行一個應(yīng)用程序時，您會打開它，做些更改，然后關(guān)閉它。這很像一次會話。計算機清楚你是誰。它知道你何時啟動應(yīng)用程序，并在何時終止。但是在因特網(wǎng)上，存在一個問題：服務(wù)器不知道你是誰以及你做什么，這是由于HTTP地址不能維持狀態(tài)。通過在服務(wù)器上存儲用戶信息以便隨后使用，PHPsession解決了這個問題（比如用戶名稱、購買商品等）。不過，會話信息是臨時的，在用戶離開網(wǎng)站后將被刪除。如果您需要永久儲存信息，可以把數(shù)據(jù)存儲在數(shù)據(jù)庫中。

Session的工作機制是：為每個訪問者創(chuàng)建一個唯一的id(UID)，并基于這個UID來存儲變量。UID存儲在cookie中，亦或通過URL進行傳導(dǎo)。17PHPsession變量知識拓展存儲和取回session變量的正確方法是使用PHP$_SESSION變量：

<?phpsession_start();$_SESSION['views']=1;?><html><body><?phpecho"Pageviews=".$_SESSION['views'];?></body></html>

輸出：Pageviews=1

在下面的例子中，我們創(chuàng)建了一個簡單的view計數(shù)器。isset()函數(shù)檢測是否已設(shè)置"views"變量。如果已設(shè)置"views"變量，我們累加計數(shù)器。如果"views"不存在，則我們創(chuàng)建"views"變量，并把它設(shè)置為1：

<?phpsession_start();if(isset($_SESSION['views']))$_SESSION['views']=$_SESSION['views']+