基于HTML5+PHP技術(shù)的化妝品網(wǎng)站設(shè)計與實現(xiàn)
2024-01-27 13:41:08張曰花等
現(xiàn)代信息科技 2023年24期
張曰花 等
陳紅娟? 劉婷婷
摘? 要：隨著互聯(lián)網(wǎng)的普及，通過網(wǎng)絡(luò)展示宣傳企業(yè)的產(chǎn)品變得越來越重要，設(shè)計企業(yè)網(wǎng)站可以方便客戶了解企業(yè)基本情況與最新的產(chǎn)品信息。文章從化妝品網(wǎng)站需求分析、網(wǎng)站主頁設(shè)計、注冊登錄頁設(shè)計等幾方面入手，采用HTML5技術(shù)結(jié)合CSS3動畫技術(shù)實現(xiàn)圖片特效，同時采用PHP技術(shù)結(jié)合MySQL數(shù)據(jù)庫，實現(xiàn)會員注冊、會員登錄等功能。該網(wǎng)站整潔美觀，簡單易用，加載速度快，可滿足宣傳企業(yè)產(chǎn)品的需求。
關(guān)鍵詞：化妝品網(wǎng)站；PHP；HTML5
中圖分類號：TP393? 文獻(xiàn)標(biāo)識碼：A? 文章編號：2096-4706（2023）24-0033-05
Design and Implementation of Cosmetic Website Based on HTML5+PHP Technology
ZHANG Yuehua， CHEN Hongjuan， LIU Tingting
（Shandong Huayu University of Technology， Dezhou? 253034， China）
Abstract： With the popularization of the Internet， it has become increasingly important to showcase and promote a company's products through the internet. Designing a company website can facilitate customers to understand the basic situation of the company and its latest product information. This paper starts with the analysis of cosmetics website requirements， website homepage design， registration and login page design， and uses HTML5 technology combined with CSS3 animation technology to achieve image special effects. At the same time， PHP technology combined with MySQL database is used to achieve functions such as member registration and login. The website is clean and beautiful， simple and easy to use， with fast loading speed， and can meet the requirement for promoting company's products.
Keywords： cosmetics website; PHP; HTML5
0? 引? 言
隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展普及，人們獲取信息的途徑不再局限于報紙、廣播等媒體，開始越來越多地在網(wǎng)絡(luò)上獲取信息，各類企業(yè)紛紛建立自己的網(wǎng)站，借助于互聯(lián)網(wǎng)增強(qiáng)企業(yè)的影響力、推廣自己的產(chǎn)品，同時通過互聯(lián)網(wǎng)快速的信息傳遞加速自身的發(fā)展[1]，化妝品企業(yè)產(chǎn)品種類多，產(chǎn)品更新快，面向人群廣，文章通過最新的HTML5+CSS3制作技術(shù)，做出了絢麗多彩的網(wǎng)頁。網(wǎng)站以綠色為主色調(diào)，采用扁平化的配色方案，網(wǎng)站首頁結(jié)合CSS3的過渡、變形、動畫等屬性，實現(xiàn)了圖片的翻轉(zhuǎn)、鼠標(biāo)指針懸停顏色過渡、放大縮小等圖片特效，為了收集用戶信息，應(yīng)用PHP+MySQL數(shù)據(jù)庫制作了會員注冊、登錄頁面。
1? 化妝品網(wǎng)站規(guī)劃
1.1? 化妝品網(wǎng)站的需求分析
隨著互聯(lián)網(wǎng)的日益普及，在網(wǎng)上展示自己企業(yè)的產(chǎn)品變得越來越有必要，設(shè)計企業(yè)網(wǎng)站的目的，就是能使任何人在任何時候、任何地方都能借助網(wǎng)絡(luò)了解企業(yè)的基本情況與最新的產(chǎn)品信息。化妝品網(wǎng)站的功能示意圖如圖1所示。
1.2? 開發(fā)環(huán)境配置及要求
網(wǎng)站開發(fā)設(shè)計工具HBuilder是一款支持HTML5的網(wǎng)頁開發(fā)工具，其具有強(qiáng)大的代碼助手，可幫助使用者快速完成開發(fā)，同時，其具有最全的語法庫和瀏覽器兼容性數(shù)據(jù)，可以支持多種編程語言，操作簡單，使用方便快捷。
PHP是開源語言，有自己獨特的語言風(fēng)格，在開發(fā)領(lǐng)域應(yīng)用廣泛，經(jīng)常用于開發(fā)動態(tài)網(wǎng)站，執(zhí)行效率高。PHP之所以應(yīng)用廣泛，受到大家歡迎，是因為它有很多突出的特點，如：開源免費(fèi)、跨平臺、面向?qū)ο?、支持多種數(shù)據(jù)庫、快捷等[2]。
MySQL是關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，支持在UNIX、Linux、Windows等平臺使用，相對于其他數(shù)據(jù)庫而言，MySQL數(shù)據(jù)庫體積小、速度快，使用更加方便、快捷、并且開放源代碼，開發(fā)人員可以根據(jù)自己的需要進(jìn)行修改，MySQL由于具有跨平臺性、可靠性、適用性、開放性和免費(fèi)性等特點，一直被認(rèn)為是PHP的最佳搭檔[3]。
1.3? 規(guī)劃草圖
頁面布局對于改善網(wǎng)頁的外觀非常重要，為了使頁面結(jié)構(gòu)更加清晰，有條理而對頁面進(jìn)行排版，如圖2所示為本網(wǎng)站首頁的頁面布局圖。
1.4? 數(shù)據(jù)庫的連接與設(shè)計
1.4.1? 數(shù)據(jù)庫設(shè)計
注冊頁面功能實際上是將用戶提交的表單保存到數(shù)據(jù)庫中，因此應(yīng)該在數(shù)據(jù)庫中創(chuàng)建一張用戶表，用于保存用戶數(shù)據(jù)，注冊信息通常有用戶名、密碼、郵箱地址、手機(jī)號等，表結(jié)構(gòu)如表1所示。
1.4.2? 連接數(shù)據(jù)庫
Mysql_connect（‘localhost，‘root，‘123456）;
Mysql_connect（）函數(shù)獲取數(shù)據(jù)庫連接，函數(shù)主要參數(shù)有3個，第1個參數(shù)表示要連接的數(shù)據(jù)庫地址，第2個參數(shù)表示操作數(shù)據(jù)庫的用戶名，第3個參數(shù)表示操作數(shù)據(jù)庫的用戶密碼。
Mysql_query（‘use `browser`）；此行代碼用于選擇要操作的數(shù)據(jù)庫。
2? 網(wǎng)站主頁設(shè)計
2.1? 建立站點
建立站點對于一個網(wǎng)站非常重要，站點可以幫助我們系統(tǒng)的管理網(wǎng)站文件，一個網(wǎng)站通常有HTML文件、圖像、CSS樣式、音頻視頻等。站點用于保存這些零散的文件，對于網(wǎng)站的上傳維護(hù)、內(nèi)容的擴(kuò)充和移植都有著非常重要的影響，具體步驟為：1）創(chuàng)建網(wǎng)站站點根目錄；2）在根目錄下新建文件；3）新建站點。
2.2? 效果圖分析
只有熟悉頁面的結(jié)構(gòu)和版式，才能更好更高效的完成頁面的排版，下面對網(wǎng)站首頁效果圖的HTML結(jié)構(gòu)和CSS結(jié)構(gòu)進(jìn)行分析，首頁效果圖如圖3所示。
2.2.1? HTML結(jié)構(gòu)分析
頭部、導(dǎo)航和輪播廣告嵌套在一個大盒子里，其中，頭部右邊有登錄和注冊兩部分，導(dǎo)航菜單結(jié)構(gòu)清晰，分為logo、導(dǎo)航、搜索3部分，內(nèi)容可以根據(jù)信息的不同劃分為3部分，通過3個獨立的大盒子模型構(gòu)成，版權(quán)信息為獨立的部分。
2.2.2? CSS樣式分析
背景顏色均為通欄顯示，則各模塊的寬度都可以設(shè)置為100%，頁面中大部分字體為14 px，樣式為微軟雅黑，頁面中大部分文字顏色為灰色，當(dāng)鼠標(biāo)指針移動上時變?yōu)榘咨?，頁面中所有input表單中大部分控件邊框線和圓角相同，這些共同的樣式可以提前定義，以減少代碼冗余。
2.3? 輪播廣告
該部分內(nèi)容是六張banner廣告圖片，通過JavaScript實現(xiàn)在一定的時間間隔內(nèi)自動切換廣告圖片，圖片切換時帶有一定過渡效果，當(dāng)鼠標(biāo)單擊黑色圓點時也可以實現(xiàn)廣告圖片的切換。關(guān)鍵代碼如下：
function tab（）
{ for（var i=0; i {aLiSmall[i].className = '';} aLiSmall[now].className = 'thistitle' startMove（oUlBig，'left'，-（now* aBigLi[0].offsetWidth）） } var now = 0; for（var i=0; i {aLiSmall[i].index = i; aLiSmall[i].onclick = function（） {now = this.index; tab（）;} } oPre.onclick = function（） {now— if（now ==-1） {now = aBigLi.length;} tab（）;} oNext.onclick = function（） {now++ if（now ==aBigLi.length） {now = 0;} tab（）;} var timer = setInterval（oNext.onclick，3000） //滾動間隔時間設(shè)置 oDiv.onmouseover = function（） {clearInterval（timer）} oDiv.onmouseout = function（） {timer = setInterval（oNext.onclick，3000） //滾動間隔時間設(shè)置 } 2.4? 產(chǎn)品介紹 該部分內(nèi)容分為標(biāo)題和產(chǎn)品兩部分，標(biāo)題部分設(shè)置單色背景，通過border-radius屬性將背景設(shè)置為圓角矩形，當(dāng)鼠標(biāo)經(jīng)過產(chǎn)品圖片時顯示產(chǎn)品介紹的文字，并設(shè)置過渡效果，從下向上滑動，背景顏色黑色半透明效果。關(guān)鍵代碼如下： ul li hgroup{ position： absolute; left：0; top：250px; width：266px; height：250px; background： rgba（0，0，0，0.5）; transition：all 0.5s ease-in 0s; } ul li：hover hgroup{ position： absolute; left：0; top：0; } 2.5? 產(chǎn)品展示 該部分內(nèi)容分為標(biāo)題和產(chǎn)品兩部分，當(dāng)鼠標(biāo)指針懸停與產(chǎn)品部分的任意一款產(chǎn)品上時，會出現(xiàn)該產(chǎn)品的相關(guān)介紹，無序列表 ul li img{ position： absolute; left：0; top：0; -webkit-backface-visibility：hidden; transition：all 0.5s ease-in 0s;} ul li img.fan{ -webkit-transform：rotateX（-180deg）;} ul li：hover img.fan{ -webkit-transform：rotateX（0deg）;} ul li：hover img.zheng{ -webkit-transform：rotateX（180deg）; } 2.6? 評測中心 該部分模塊分為標(biāo)題和評測公司logo兩部分，當(dāng)鼠標(biāo)指針懸停于任何評測公司的logo上時，logo圖像會發(fā)生變化，將會有另一張圖像替換到當(dāng)前的logo圖像[4]，用于替換的圖片不透明度設(shè)置為0，加載頁面完成時處于隱藏狀態(tài)，當(dāng)鼠標(biāo)懸停于用于定義產(chǎn)品部分，并且在
.text ul li img{
position： absolute;
top：50%;
left：50%;
transform：translate（-50%，-50%）;}
.text ul li：nth-child（4），.text ul li：nth-child（8）{
margin-right：0;}
.text ul li .tihuan{
opacity： 0;
transition：all 0.4s ease-in 0.2s;? ?}
.text ul li：hover .tihuan{
opacity： 1;
transform：translate（-50%，-50%） scale（0.75）;? ?}
.text ul li .tu{
transition：all 0.4s ease-in 0s;}
.text ul li：hover .tu{
opacity： 0;
transform：translate（-50%，-50%） scale（0.5）;
}
2.7? 用戶注冊與登錄頁面
進(jìn)入Web 2.0時代以后，互聯(lián)網(wǎng)中的網(wǎng)站開始注重用戶參與，瀏覽網(wǎng)站的訪客可以注冊成為會員，網(wǎng)站可以通過用戶名和密碼來區(qū)分每個用戶。
2.7.1? 用戶注冊
設(shè)計思路：1）在數(shù)據(jù)庫中創(chuàng)建一張用戶表，用于保存用戶信息；2）編寫HTML頁面，中創(chuàng)建一個表單，用于填寫用戶注冊信息；3）在瀏覽器中訪問用戶注冊頁面時填寫注冊信息并提交表單；4）通過PHP接收表單數(shù)據(jù)；5）將新注冊用戶的信息保存到數(shù)據(jù)庫的表中。
保存到數(shù)據(jù)庫的用戶名不允許重復(fù)，所以需要判斷用戶名是否已經(jīng)存在，將新注冊的用戶保存到數(shù)據(jù)庫中，關(guān)鍵代碼如下：
$user = mysql_real_escape_string（$user）;
$email = mysql_real_escape_string（$email）;
//判斷用戶名是否存在
$sql = "select `id` from `user` where `user`=?$user?";
$rst = mysql_query（$sql）;
if（mysql_fetch_row（$rst））{
$error[] = ?用戶名已經(jīng)存在，請換個用戶名。?;
showRegPage（）;
}
$pass = md5（$pass）;
$sql = ?insert into `user` （`user`，`pass`，`email`，`tel`） values （?$user?， ?$pass?， ?$email?， ?$tel?）";
2.7.2? 用戶登錄
用戶登錄也是網(wǎng)站中最常見的功能之一，用戶在網(wǎng)頁中輸入用戶名和密碼，然后提交表單，服務(wù)器就會驗證用戶名和密碼是否正確，如果驗證通過則用戶登錄成功，用戶就可以使用這個賬號在網(wǎng)站中進(jìn)行其他操作[5]，用戶登錄界面如圖4所示。
在用戶登錄時，首先應(yīng)驗證用戶名和密碼是否符合格式，然后根據(jù)用戶名到數(shù)據(jù)庫中取出密碼，再判斷密碼是否正確，關(guān)鍵代碼如下：
//載入表單驗證函數(shù)庫，驗證用戶名和密碼格式
require ?./check_form.php?;
if（（$result = checkUsername（$user）） ！== true）? $error[] = $result;
if（（$result = checkPassword（$pass）） ！== true）? $error[] = $result;
if（empty（$error））{
$user = mysql_real_escape_string（$user）;
$sql = "select `id`，`pass` from `user` where `user`=?$user?";
if（$rst = mysql_query（$sql））{
$row = mysql_fetch_assoc（$rst）;
$pass = md5（$pass）;
if（$pass== $row[?pass?]）{
header（?Location： index.html?）;
die;}}
$error[] = ?用戶名不存在或密碼錯誤。?;}}
3? 結(jié)? 論
化妝品網(wǎng)站的實現(xiàn)，讓瀏覽者更方便了解企業(yè)的基本情況與最新的產(chǎn)品信息，通過產(chǎn)品展示和產(chǎn)品介紹，產(chǎn)品可被多樣化全方位展示，讓瀏覽者快速了解產(chǎn)品特點及功效，搜索功能使查找產(chǎn)品方便快捷，通過會員注冊、登錄和會員中心企業(yè)可以與瀏覽者溝通交流，能為瀏覽者提供個性化服務(wù)。
參考文獻(xiàn)：
[1] 高洪升.企業(yè)網(wǎng)站的設(shè)計與制作 [J].計算機(jī)光盤軟件與應(yīng)用，2013，16（16）：107+109.
[2] 白春雨.基于PHP的社交化藝術(shù)品電商平臺的研究與設(shè)計 [D].北京：北京郵電大學(xué)，2021.
[3] 黑馬程序員.PHP基礎(chǔ)案例教程：第2版 [M].北京：人民郵電出版社，2022.
[4] 黑馬程序員.HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程：第3版 [M].北京：人民郵電出版社，2023.
[5] 傳智播客.PHP網(wǎng)站開發(fā)實例教程 [M].北京：人民郵電出版社，2015.
作者簡介：張曰花（1980.05—），女，漢族，山東德
州人，高級工程師，本科，研究方向：計算機(jī)應(yīng)用；劉婷婷（1994—），女，漢族，東德州人，助教，碩士研究生，研究方向：網(wǎng)絡(luò)信息安全；陳紅娟（1998—），女，漢族，河北衡水人，工程師，本科，研究方向：計算機(jī)科學(xué)與技術(shù)。
收稿日期：2023-05-06
基金項目：山東華宇工學(xué)院2023度校級教育教學(xué)改革項目（2023JG01）
