如何透過html+css+mysql+php來快速的製作動態網頁

慕斯
發布: 2023-04-10 06:44:02
轉載
13805 人瀏覽過

跟大家介紹如何透過html css mysql php來快速的製作動態網頁,讓我們一起出發探索未知的奧秘吧! ! !

如何透過html+css+mysql+php來快速的製作動態網頁

一、開發環境的搭建

#1)apache php mysql環境搭建

因為要用apache來做伺服器,mysql作為資料庫來儲存數據,php來寫程式碼以此實現網頁與資料庫的交互數據,所以需要下載上述軟體,但上述軟體的安裝環境、設定很麻煩,所以在這裡使用了一個功能強大的網站整合軟體包---XAMPP,

##2)資料庫客戶端軟體navigat

直接在cmd指令控制台操作資料庫並不方便,不夠直白,當然也可以直接用phpmyadmin來操作(上述xampp軟體包安裝之後在遊覽器輸入127.0 .0.1/phpmyadmin即可打開),但是phpmyadmin來操作也不方便,這裡便採用Oracle公司出品的資料庫客戶端Navicat

點擊連接,輸入連接名,(這裡我直接取了IP位址的名字127.0.0.1),主機名稱和連接埠號碼都不用變,這裡的使用者名稱和密碼。如果是你用的是xampp,那麼用戶名是root,密碼為空;如果不是用的是xampp安裝的,按照你設定的用戶名和密碼登入即可。填寫完畢之後點選連線測試,沒有問題直接確定即可連接資料庫。

刪改查。

①增:寫入資料

語句:insert into users (`username`,`password`) values ('name','passwd')

# (ps新手一定要注意這離users這個資料表後面的``這個符號是在tab鍵上方的引號,而values後面的就是個單引號)

②刪:刪除已有資料

語句:delete from users WHERE id='3'

③改:修改資料

## 語句:update set users username='新值', password='新值' WHERE id=3

④查:從資料庫讀取資料

語句:select * from users where id>1 order by id desc limit 0,2

##

#(3)html網頁的編寫工具sublime textSublime Text 是一個程式碼編輯器(Sublime Text 2是收費軟體,但可以無限期試用),也是HTML和散文先進的文字編輯器。 Sublime text具有漂亮的使用者介面和強大的功能,非常適合編寫程式碼的程式猿。

#用sublime text寫網頁程式碼,可以掌握這樣一個小技巧,先新建一個文件,格式儲存為html網頁格式,然後在sublime text中打開,輸入html:4s 然後按下tab鍵即可產生大體框架。當然這個快捷鍵要想使用是要按照我上述給的鏈接,按照步驟安裝好Emmet這個插件,才能使用。
4)網站網域的設定

###### 大致上講,你在導覽器開啟127.0.0.1這個網址,會前往apache預設目錄下的一個網址,這裡我對其進行修改,修改為我做專案的目錄,E:\##########PHP#########\xampp\apache\conf ,打開httpd.conf文件,將裡面的路徑修改為你儲存網站的目錄,在這裡我的修改為###### DocumentRoot "E:/#########php#### #####/xampp/workplace"### ###

這裡要注意按照自己的下載按照路徑來修改為自己的目錄,其次我還對這個127.0.0.1這個網址再次做了修改,使其虛擬域名為blog.com,,修改完之後重啟之後,在遊覽器輸入blog.com,便會出現下述場景:

在這裡我發現我修改的DNS配置,不知道何時再前面加了一條註釋,導致沒辦法打開,大家也要注意依照我給的連線配置好之後,如果打不開再看一下設定檔有無錯誤。

總之,配置環境和工具基本上也搭建成功了,接下來我就開始講解這個blog的專案。

二、部落格網站的書寫

1.整體架構

首先在這裡我先介紹一下我的總體框架,講解一下,讓大家先熟悉一下。

# blog是專案的名字,admin資料夾裡面儲存的是在後台登入檔案 core資料夾內儲存核心文件,theme upfiles資料夾是儲存從本地上傳到伺服器的圖片信息,之後config.php檔案是整個部落格網站的設定文件,header.inc.php是載入了一個頁面樣式信息,index.php檔案是網站的首頁,read.php文件是網站首頁文章的具體連結。

資料庫表中的設計在這裡我給出,方便大家參考學習,這裡我主要建立了三個表,admin這個表示用來存儲後台管理員註冊和登入的數據,即帳戶和密碼:

page這個表主要是用來存儲博客信息,在這裡也給圖片,方便安裝圖來建表:

最後給出setting這個表,主要是用來儲存部落格的系統設定:

2221 .網站後台admin的書寫

#1)登入介面(login.php)

# 關於這個頁面我會在這裡給出源碼,登錄頁面其實也就是個從資料庫讀取的過程,這個登錄頁面的設計我主要是採用了bootstrap來設計的,不明白的可以百度一下bootstrap,

在這裡面它包含了各式的樣式、元件和JavaScript插件,可以說得很好用。

在這裡我的使用方法是將bootstrap下載下來,然後將檔案加壓,複製到theme這個資料夾下面,呼叫方法見下面的源碼,在原始碼中我都給了詳細的解釋。

原始碼:

get('do')=='check'){ /*获取页面提交的用户名和密码数据*/ $ausername=$input->post('ausername'); $apassword=$input->post('apassword'); /*查询页面提交的数据是否在数据库提供的数据存在的sql语句*/ $sql="select * from admin where ausername='{$ausername}' and apassword='{$apassword}' "; /*数据库查询语句返回结果*/ $mysqli_result=$db->query($sql); /*以数组形式存储数据库查询语句的返回结果*/ $row=$mysqli_result->fetch_array( MYSQLI_ASSOC); /*如果row确实返回了结果,则将结果的aid存储在session里,并转向home.php文件*/ if(is_array($row)){ $_SESSION['aid']=$row['aid']; header("location:home.php"); }else{ echo("账户或密码错误"); } } ?>      管理员登录界面   

管理员登录

登入後複製

(2)註冊介面(register.php)

註冊介面其實也就是個往資料庫增加資料的過程。

還是給原始碼,原始碼中我給了詳解。

get('do')=='check'){ /*获取用户页面注册传来的用户名和密码数据*/ $ausername=$input->post('ausername'); $apassword=$input->post('apassword'); $aconfirmpassword=$input->post('aconfirmpassword'); /*注册时的处理*/ if($apassword!=$aconfirmpassword){ echo "前后两次输入的密码不一致"; exit; } /*将用户填入的数据插入到数据库的sql语句*/ $sql="INSERT INTO admin(`ausername`,`apassword`) values('$ausername','$apassword')"; /*提交sql语句到数据库处理*/ $is=$db->query($sql); /*判断是否注册成功*/ if($is){ echo "注册成功"; header("Location:login.php"); }else{ echo "注册失败"; } } ?>      管理员注册界面   

管理员注册

登入後複製

3)後台管理頁面(home.php)

在原始碼中將上述網站的標題那部分單獨給拿出來做了一個文件(nav.inc.php),這裡也是給出源碼,供大家學習參考。

home.php原始碼

      管理员登录   
登入後複製

nav.inc.php

4)部落格管理介面(blog.php)

這裡有三個功能,修改、刪除、新增部落格介面,以下我將單獨列出新增部落格這個介面

( 5)新增部落格介面(blog_add.php)

在这里这个编辑器如果需要图片上传功能的话,需要在文件中设置,这个文件设置为(blog_uopload.php)

blog_add.php源码

get('pid'); /*初始化page,为了区别添加还是修改操作*/ $page=array( 'title' => '', 'author' => '', 'content' => '', ); /*如果pid大于0,可以得出并不是添加操作,而是修改操作*/ if($pid>0){ $sql="select * from page where pid ='{$pid}' "; $res=$db->query($sql); $page=$res->fetch_array(MYSQLI_ASSOC); } /*对于添加操作操作而言,账户或密码不能为空*/ if($input->get('do')=='add'){ $title=$input->post('title'); $author=$input->post('author'); $content=$input->post('content'); if(empty($title)||empty($author)||empty($content)){ echo("数据不能为空"); } /*如果aid大于1,则得出更新操作,否则执行添加操作*/ if($pid>0){ $uptime=time(); $sqlTpl="UPDATE page set title='%s',author='%s',content='%s',uptime='%d' where pid='%d' "; $sql=sprintf($sqlTpl,$title,$author,$content,$uptime,$pid); } else{ $intime=time(); $sqlTpl="INSERT INTO page(`title`,`author`,`content`,`intime`,`uptime`) values('%s','%s','%s','%d','%d')"; $sql=sprintf($sqlTpl,$title,$author,$content,$intime,0); } /*判断是否有结果*/ $is=$db->query($sql); if($is){ header("location:blog.php"); }else{ echo "执行失败"; } } ?>      添加博客        

博客管理 返回


'>

' >

登入後複製

blog_upload.php源码

 true, 'msg' => '', 'file_path'=>$urlName ); echo json_encode($json); } } ?>
登入後複製

6)管理员管理界面(auser.php)

这里还是有三个功能,修改、删除和添加,这里我就不单独一一列出来了,具体可参考文末给出的源码

7)系统管理界面

系统管理可以在这里设置标题、介绍和博客每页的显示数量


3.主界面(index.php)

这里是游客访问的主界面,这里给出源码大家作为参考,

阅读界面(read.php)

当你想阅读该文章时,可点击标题进入阅读页,进行阅读,同样给出源码,作为参考

推荐学习:《PHP视频教程

以上是如何透過html+css+mysql+php來快速的製作動態網頁的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!