基于HTML5+PHP技術的化妝品網站設計與實現
2024-01-27 13:41:08張曰花等
現代信息科技 2023年24期
張曰花 等
陳紅娟? 劉婷婷
摘? 要：隨著互聯網的普及，通過網絡展示宣傳企業的產品變得越來越重要，設計企業網站可以方便客戶了解企業基本情況與最新的產品信息。文章從化妝品網站需求分析、網站主頁設計、注冊登錄頁設計等幾方面入手，采用HTML5技術結合CSS3動畫技術實現圖片特效，同時采用PHP技術結合MySQL數據庫，實現會員注冊、會員登錄等功能。該網站整潔美觀，簡單易用，加載速度快，可滿足宣傳企業產品的需求。
關鍵詞：化妝品網站；PHP；HTML5
中圖分類號：TP393? 文獻標識碼：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? 引? 言
隨著網絡技術的不斷發展普及，人們獲取信息的途徑不再局限于報紙、廣播等媒體，開始越來越多地在網絡上獲取信息，各類企業紛紛建立自己的網站，借助于互聯網增強企業的影響力、推廣自己的產品，同時通過互聯網快速的信息傳遞加速自身的發展[1]，化妝品企業產品種類多，產品更新快，面向人群廣，文章通過最新的HTML5+CSS3制作技術，做出了絢麗多彩的網頁。網站以綠色為主色調，采用扁平化的配色方案，網站首頁結合CSS3的過渡、變形、動畫等屬性，實現了圖片的翻轉、鼠標指針懸停顏色過渡、放大縮小等圖片特效，為了收集用戶信息，應用PHP+MySQL數據庫制作了會員注冊、登錄頁面。
1? 化妝品網站規劃
1.1? 化妝品網站的需求分析
隨著互聯網的日益普及，在網上展示自己企業的產品變得越來越有必要，設計企業網站的目的，就是能使任何人在任何時候、任何地方都能借助網絡了解企業的基本情況與最新的產品信息。化妝品網站的功能示意圖如圖1所示。
1.2? 開發環境配置及要求
網站開發設計工具HBuilder是一款支持HTML5的網頁開發工具，其具有強大的代碼助手，可幫助使用者快速完成開發，同時，其具有最全的語法庫和瀏覽器兼容性數據，可以支持多種編程語言，操作簡單，使用方便快捷。
PHP是開源語言，有自己獨特的語言風格，在開發領域應用廣泛，經常用于開發動態網站，執行效率高。PHP之所以應用廣泛，受到大家歡迎，是因為它有很多突出的特點，如：開源免費、跨平臺、面向對象、支持多種數據庫、快捷等[2]。
MySQL是關系型數據庫管理系統，支持在UNIX、Linux、Windows等平臺使用，相對于其他數據庫而言，MySQL數據庫體積小、速度快，使用更加方便、快捷、并且開放源代碼，開發人員可以根據自己的需要進行修改，MySQL由于具有跨平臺性、可靠性、適用性、開放性和免費性等特點，一直被認為是PHP的最佳搭檔[3]。
1.3? 規劃草圖
頁面布局對于改善網頁的外觀非常重要，為了使頁面結構更加清晰，有條理而對頁面進行排版，如圖2所示為本網站首頁的頁面布局圖。
1.4? 數據庫的連接與設計
1.4.1? 數據庫設計
注冊頁面功能實際上是將用戶提交的表單保存到數據庫中，因此應該在數據庫中創建一張用戶表，用于保存用戶數據，注冊信息通常有用戶名、密碼、郵箱地址、手機號等，表結構如表1所示。
1.4.2? 連接數據庫
Mysql_connect（‘localhost，‘root，‘123456）;
Mysql_connect（）函數獲取數據庫連接，函數主要參數有3個，第1個參數表示要連接的數據庫地址，第2個參數表示操作數據庫的用戶名，第3個參數表示操作數據庫的用戶密碼。
Mysql_query（‘use `browser`）；此行代碼用于選擇要操作的數據庫。
2? 網站主頁設計
2.1? 建立站點
建立站點對于一個網站非常重要，站點可以幫助我們系統的管理網站文件，一個網站通常有HTML文件、圖像、CSS樣式、音頻視頻等。站點用于保存這些零散的文件，對于網站的上傳維護、內容的擴充和移植都有著非常重要的影響，具體步驟為：1）創建網站站點根目錄；2）在根目錄下新建文件；3）新建站點。
2.2? 效果圖分析
只有熟悉頁面的結構和版式，才能更好更高效的完成頁面的排版，下面對網站首頁效果圖的HTML結構和CSS結構進行分析，首頁效果圖如圖3所示。
2.2.1? HTML結構分析
頭部、導航和輪播廣告嵌套在一個大盒子里，其中，頭部右邊有登錄和注冊兩部分，導航菜單結構清晰，分為logo、導航、搜索3部分，內容可以根據信息的不同劃分為3部分，通過3個獨立的大盒子模型構成，版權信息為獨立的部分。
2.2.2? CSS樣式分析
背景顏色均為通欄顯示，則各模塊的寬度都可以設置為100%，頁面中大部分字體為14 px，樣式為微軟雅黑，頁面中大部分文字顏色為灰色，當鼠標指針移動上時變為白色，頁面中所有input表單中大部分控件邊框線和圓角相同，這些共同的樣式可以提前定義，以減少代碼冗余。
2.3? 輪播廣告
該部分內容是六張banner廣告圖片，通過JavaScript實現在一定的時間間隔內自動切換廣告圖片，圖片切換時帶有一定過渡效果，當鼠標單擊黑色圓點時也可以實現廣告圖片的切換。關鍵代碼如下：
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） //滾動間隔時間設置 oDiv.onmouseover = function（） {clearInterval（timer）} oDiv.onmouseout = function（） {timer = setInterval（oNext.onclick，3000） //滾動間隔時間設置 } 2.4? 產品介紹 該部分內容分為標題和產品兩部分，標題部分設置單色背景，通過border-radius屬性將背景設置為圓角矩形，當鼠標經過產品圖片時顯示產品介紹的文字，并設置過渡效果，從下向上滑動，背景顏色黑色半透明效果。關鍵代碼如下： 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? 產品展示 該部分內容分為標題和產品兩部分，當鼠標指針懸停與產品部分的任意一款產品上時，會出現該產品的相關介紹，無序列表 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? 評測中心 該部分模塊分為標題和評測公司logo兩部分，當鼠標指針懸停于任何評測公司的logo上時，logo圖像會發生變化，將會有另一張圖像替換到當前的logo圖像[4]，用于替換的圖片不透明度設置為0，加載頁面完成時處于隱藏狀態，當鼠標懸停于用于定義產品部分，并且在
.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? 用戶注冊與登錄頁面
進入Web 2.0時代以后，互聯網中的網站開始注重用戶參與，瀏覽網站的訪客可以注冊成為會員，網站可以通過用戶名和密碼來區分每個用戶。
2.7.1? 用戶注冊
設計思路：1）在數據庫中創建一張用戶表，用于保存用戶信息；2）編寫HTML頁面，中創建一個表單，用于填寫用戶注冊信息；3）在瀏覽器中訪問用戶注冊頁面時填寫注冊信息并提交表單；4）通過PHP接收表單數據；5）將新注冊用戶的信息保存到數據庫的表中。
保存到數據庫的用戶名不允許重復，所以需要判斷用戶名是否已經存在，將新注冊的用戶保存到數據庫中，關鍵代碼如下：
$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[] = ?用戶名已經存在，請換個用戶名。?;
showRegPage（）;
}
$pass = md5（$pass）;
$sql = ?insert into `user` （`user`，`pass`，`email`，`tel`） values （?$user?， ?$pass?， ?$email?， ?$tel?）";
2.7.2? 用戶登錄
用戶登錄也是網站中最常見的功能之一，用戶在網頁中輸入用戶名和密碼，然后提交表單，服務器就會驗證用戶名和密碼是否正確，如果驗證通過則用戶登錄成功，用戶就可以使用這個賬號在網站中進行其他操作[5]，用戶登錄界面如圖4所示。
在用戶登錄時，首先應驗證用戶名和密碼是否符合格式，然后根據用戶名到數據庫中取出密碼，再判斷密碼是否正確，關鍵代碼如下：
//載入表單驗證函數庫，驗證用戶名和密碼格式
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? 結? 論
化妝品網站的實現，讓瀏覽者更方便了解企業的基本情況與最新的產品信息，通過產品展示和產品介紹，產品可被多樣化全方位展示，讓瀏覽者快速了解產品特點及功效，搜索功能使查找產品方便快捷，通過會員注冊、登錄和會員中心企業可以與瀏覽者溝通交流，能為瀏覽者提供個性化服務。
參考文獻：
[1] 高洪升.企業網站的設計與制作 [J].計算機光盤軟件與應用，2013，16（16）：107+109.
[2] 白春雨.基于PHP的社交化藝術品電商平臺的研究與設計 [D].北京：北京郵電大學，2021.
[3] 黑馬程序員.PHP基礎案例教程：第2版 [M].北京：人民郵電出版社，2022.
[4] 黑馬程序員.HTML5+CSS3網站設計基礎教程：第3版 [M].北京：人民郵電出版社，2023.
[5] 傳智播客.PHP網站開發實例教程 [M].北京：人民郵電出版社，2015.
作者簡介：張曰花（1980.05—），女，漢族，山東德
州人，高級工程師，本科，研究方向：計算機應用；劉婷婷（1994—），女，漢族，東德州人，助教，碩士研究生，研究方向：網絡信息安全；陳紅娟（1998—），女，漢族，河北衡水人，工程師，本科，研究方向：計算機科學與技術。
收稿日期：2023-05-06
基金項目：山東華宇工學院2023度校級教育教學改革項目（2023JG01）
