這篇文章將為大家詳細講解有關怎么通過html+css+MySQL+php來快速的制作動態(tài)網(wǎng)頁,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
目前創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設、域名、雅安服務器托管、網(wǎng)站改版維護、企業(yè)網(wǎng)站設計、館陶網(wǎng)站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
一、開發(fā)環(huán)境的搭建
(1)apache+php+mysql環(huán)境搭建
因為要用apache來做服務器,mysql作為數(shù)據(jù)庫來存儲數(shù)據(jù),php來寫代碼以此實現(xiàn)網(wǎng)頁與數(shù)據(jù)庫的交互數(shù)據(jù),所以需要下載上述軟件,但上述軟件的安裝環(huán)境、配置很麻煩,所以在這里用了一個功能強大的建站集成軟件包---XAMPP,具體的安裝方法可見鏈接(點擊打開鏈接)。
當然,也有可能啟動Apache時候出現(xiàn)錯誤,這里給出鏈接(點擊打開鏈接),如果apache啟動有錯誤可以參考上面這個鏈接來解決問題。
(2)數(shù)據(jù)庫客戶端軟件navigat
直接在cmd命令控制臺操作數(shù)據(jù)庫并不方便,不夠直白,當然也可以直接用phpmyadmin來操作(上述xampp軟件包安裝之后在游覽器輸入127.0.0.1/phpmyadmin即可打開),但是phpmyadmin來操作也不方便,這里便采用Oracle公司出品的數(shù)據(jù)庫客戶端Navicat,這里還是給出鏈接(點擊打開鏈接),按照要求下載即可,
點擊連接,輸入連接名,(這里我直接取了IP地址的名字127.0.0.1),主機名和端口號都不用變,這里的用戶名和密碼。如果是你用的是xampp,那么用戶名是root,密碼為空;如果不是用的是xampp安裝的,按照你設置的用戶名和密碼登錄即可。填寫完畢之后點擊連接測試,沒有問題直接確定即可連接好數(shù)據(jù)庫。
此外你要是想掌握數(shù)據(jù)庫,簡單來講你想對數(shù)據(jù)庫的任何操作,都必須操作sql語句,總的來說分為四個操作:增刪改查。
①增:向數(shù)據(jù)庫寫入數(shù)據(jù)
語句:insert into users (`username`,`password`) values ('name','passwd')
(ps新手一定要注意這離users這個數(shù)據(jù)表后面的``這個符號是在tab鍵上方的引號,而values后面的就是個單引號)
②刪:刪除已有數(shù)據(jù)
語句:delete from users WHERE id='3'
③改:修改數(shù)據(jù)
語句:update set users username='新值', password='新值' WHERE id=3
④查:從數(shù)據(jù)庫讀取數(shù)據(jù)
語句:select * from users where id>1 order by id desc limit 0,2
如果你想進一步深入的了解mysql語句的話,看一下這里的連接,(點擊打開鏈接)連接給出了這四個操作的具體參數(shù)的詳解,要想用數(shù)據(jù)庫一定要掌握這四個操作。
(3)html網(wǎng)頁的編寫工具sublime text
Sublime Text 是一個代碼編輯器(Sublime Text 2是收費軟件,但可以無限期試用),也是HTML和散文先進的文本編輯器。Sublime text具有漂亮的用戶界面和強大的功能,非常適合寫代碼的程序猿。在這里還是給出sublime text的安裝方法以及注冊碼及常用插件的安裝步驟,按照連接下載即可。(點擊打開鏈接)
用sublime text來寫網(wǎng)頁代碼,可以掌握這樣一個小技巧,先新建一個文件,格式保存為html網(wǎng)頁格式,然后在sublime text中打開,輸入html:4s 然后按下tab鍵即可生成大體框架。當然這個快捷鍵要想使用是要按照我上述給的鏈接,按照步驟安裝好Emmet這個插件,才能使用。
(4)網(wǎng)站域名的配置
一般來講,你在游覽器打開127.0.0.1這個網(wǎng)址,會轉到apache默認目錄下的一個網(wǎng)址,這里我對其進行修改,修改為我做項目的目錄,E:\PHP\xampp\apache\conf,打開httpd.conf文件,將里面的路徑修改為你存儲網(wǎng)站的目錄,在這里我的修改為
DocumentRoot "E:/php/xampp/workplace"
<Directory "E:/PHP/xampp/workplace">
這里要注意按照自己的下載按照路徑來修改為自己的目錄,其次我還對這個127.0.0.1這個網(wǎng)址再次做了修改,使其虛擬域名為blog.com,具體的配置及修改還是見鏈接(點擊打開鏈接),修改完之后重啟之后,在游覽器輸入blog.com,便會出現(xiàn)下述場景:
在這里我發(fā)現(xiàn)我修改的DNS配置,不知道何時再前面加了一條注釋,導致沒法打開,大家也要注意按照我給的連接配置好之后,如果打不開再看一下配置文件有無錯誤。
總之,配置環(huán)境和工具基本上也搭建成功了,接下來我就開始講解這個blog的項目。
二、博客網(wǎng)站的書寫
1.總體框架
首先在這里我先介紹一下我的總體框架,講解一下,讓大家先熟悉一下。
blog是項目的名字,admin文件夾里面存儲的是后臺登錄文件 core文件夾里面存儲核心文件,theme文件夾存儲網(wǎng)頁的樣式文件 upfiles文件夾是存儲從本地上傳到服務器的圖片信息,之后config.php文件是整個博客網(wǎng)站的配置文件,header.inc.php是加載了一個頁面樣式信息,index.php文件是網(wǎng)站的首頁,read.php文件是網(wǎng)站首頁文章的具體鏈接。
數(shù)據(jù)庫表中的設計在這里我給出,方便大家參考學習,這里我主要建立了三個表,admin這個表示用來存儲后臺管理員注冊和登錄的數(shù)據(jù),即賬戶和密碼:
page這個表主要是用來存儲博客信息,在這里也給圖片,方便安裝圖來建表:
最后給出setting這個表,主要是用來存儲博客的系統(tǒng)設置:
2.網(wǎng)站后臺admin的書寫
(1)登錄界面(login.php)
關于這個頁面我會在這里給出源碼,登錄頁面其實也就是個從數(shù)據(jù)庫讀取的過程,這個登錄頁面的設計我主要是采用了bootstrap來設計的,不明白的可以百度一下bootstrap,可以參考我的鏈接來看一下(點擊打開鏈接)
在這里面它包含了各式的樣式、組件和JavaScript插件,可以說很好用。
在這里我的使用方法是將bootstrap下載下來,然后將文件加壓,復制到theme這個文件夾下面,調(diào)用方法見下面的源碼,在源碼中我都給出了詳細的解釋。
源碼:
<?php /* 后臺管理員登錄窗口 */ /*啟動session服務,記錄賬號登錄的cookies*/ session_start(); /*包含一個配置文件*/ include('../config.php'); if($input->get('do')=='check'){ /*獲取頁面提交的用戶名和密碼數(shù)據(jù)*/ $ausername=$input->post('ausername'); $apassword=$input->post('apassword'); /*查詢頁面提交的數(shù)據(jù)是否在數(shù)據(jù)庫提供的數(shù)據(jù)存在的sql語句*/ $sql="select * from admin where ausername='{$ausername}' and apassword='{$apassword}' "; /*數(shù)據(jù)庫查詢語句返回結果*/ $mysqli_result=$db->query($sql); /*以數(shù)組形式存儲數(shù)據(jù)庫查詢語句的返回結果*/ $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("賬戶或密碼錯誤"); } } ?> <!--后臺管理員登錄界面></!--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>管理員登錄界面</title> <!--加載包含bootstrap里css和javascript里的文件></!--> <?php include(PATH . '/header.inc.php');?> </head> <body> <!--最外面的container容器></!--> <p class="container"> <!--bootstrap使用時建議使用一個row表格類,包含12個列></!--> <p class="row" style="margin-top:200px;"> <!--距左邊3個列></!--> <p class="col-md-3"></p> <!--中間部分占據(jù)6列></!--> <p class="col-md-6" "> <p class="panel panel-primary"> <!--登錄頭部分></!--> <p class="panel-heading">管理員登錄</p> <!--登錄的身體部分></!--> <p class="panel-body"> <form class="form-horizontal" action="login.php?do=check" method="post"> <!--登錄的用戶名那一行></!--> <p class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">用戶名</label> <p class="col-sm-10"> <input type="text" class="form-control" name="ausername" id="ausername" placeholder="請輸入用戶名" datatype="*3-10" errormsg="請輸入長度 范圍在3-10之間的昵稱"> </p> </p> <!--登錄的密碼那一行></!--> <p class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">密碼</label> <p class="col-sm-10"> <input type="password" class="form-control" name="apassword" id="apassword" placeholder="請輸入密碼"> </p> </p> <!--登錄、注冊那一行></!--> <p class="form-group"> <p class="col-sm-3"></p> <!--登錄></!--> <p class="col-sm-4"> <input type="submit" value="登錄" class='btn btn-primary'> </p> <!--注冊></!--> <p class="col-sm-4"> <a href="register.php"><input type="button" value="注冊" class="btn btn-primary"> </a> </p> </p> </form> </p> <!--登錄的尾部分></!--> <p class="panel-footer text-right">版權所有,盜版必究</p> </p> </p> <!--距離右邊三列></!--> <p class="col-md-3"></p> </p> </p> <!--窗口背景的script加載></!--> <script type="text/javascript"> window.onload = function() { var config = { vx : 4, vy : 4, height : 2, width : 2, count : 100, color : "121, 162, 185", stroke : "100, 200, 180", dist : 6000, e_dist : 20000, max_conn : 10 } CanvasParticle(config); } </script> <script type="text/javascript" src="../theme/js/canvas-particle.js"></script> </script> </body> </html>
(2)注冊界面(register.php)
注冊界面其實也就是個往數(shù)據(jù)庫增加數(shù)據(jù)的過程。
還是給出源碼,源碼中我給出了詳解。
<?php /*包含一個配置文件*/ include('../config.php'); if($input->get('do')=='check'){ /*獲取用戶頁面注冊傳來的用戶名和密碼數(shù)據(jù)*/ $ausername=$input->post('ausername'); $apassword=$input->post('apassword'); $aconfirmpassword=$input->post('aconfirmpassword'); /*注冊時的處理*/ if($apassword!=$aconfirmpassword){ echo "前后兩次輸入的密碼不一致"; exit; } /*將用戶填入的數(shù)據(jù)插入到數(shù)據(jù)庫的sql語句*/ $sql="INSERT INTO admin(`ausername`,`apassword`) values('$ausername','$apassword')"; /*提交sql語句到數(shù)據(jù)庫處理*/ $is=$db->query($sql); /*判斷是否注冊成功*/ if($is){ echo "注冊成功"; header("Location:login.php"); }else{ echo "注冊失敗"; } } ?> <!--后臺管理員登錄界面></!--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>管理員注冊界面</title> <!--加載包含bootstrap里css和javascript里的文件></!--> <?php include(PATH . '/header.inc.php');?> </head> <body> <!--最外面的container容器></!--> <p class="container"> <!--bootstrap使用時建議使用一個row表格類,包含12個列></!--> <p class="row" style="margin-top:200px;"> <!--距左邊3個列></!--> <p class="col-md-3"></p> <!--中間部分占據(jù)6列></!--> <p class="col-md-6" "> <p class="panel panel-primary"> <!--注冊頭部分></!--> <p class="panel-heading">管理員注冊</p> <!--注冊的身體部分></!--> <p class="panel-body"> <form class="form-horizontal" action="register.php?do=check" method="post"> <!--注冊的用戶名那一行></!--> <p class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">用戶名</label> <p class="col-sm-10"> <input type="text" class="form-control" name="ausername" id="ausername" placeholder="請輸入用戶名"> </p> </p> <!--注冊的密碼那一行></!--> <p class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">密碼</label> <p class="col-sm-10"> <input type="password" class="form-control" name="apassword" id="apassword" placeholder="請輸入密碼"> </p> </p> <!--注冊的密碼確定那一行></!--> <p class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">確認密碼</label> <p class="col-sm-10"> <input type="password" class="form-control" name="aconfirmpassword" id="aconfirmpassword" placeholder="請再次輸入密碼"> </p> </p> <!--提交注冊那一行></!--> <p class="form-group"> <p class="col-sm-4"></p> <p class="col-sm-6"> <input type="submit" value="注冊" class='btn btn-primary btn-lg btn-block'> </p> </p> </form> </p> <!--登錄的尾部分></!--> <p class="panel-footer text-right">版權所有,盜版必究</p> </p> </p> <!--距離右邊三列></!--> <p class="col-md-3"></p> </p> </p> <!--窗口背景的script加載></!--> <script type="text/javascript"> window.onload = function() { var config = { vx : 4, vy : 4, height : 2, width : 2, count : 100, color : "121, 162, 185", stroke : "100, 200, 180", dist : 6000, e_dist : 20000, max_conn : 10 } CanvasParticle(config); } </script> <script type="text/javascript" src="../theme/js/canvas-particle.js"></script> </script> </body> </html>
(3)后臺管理頁面(home.php)
在源碼中將上述網(wǎng)站的標題那部分單獨給拿出來做了一個文件(nav.inc.php),這里也是給出源碼,供大家學習參考。
home.php源碼
<?php /* 后臺管理員登錄之后php控制端 */ include ('check.php'); ?> <!--后臺管理員登錄之后的界面<>/!--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>管理員登錄</title> <?php include(PATH . '/header.inc.php');?> <!--所有的頁面都需加載這個文件></!--> </head> <body> <?php include('nav.inc.php');?> <!--管理員登錄頁面的標題部分></!--> </body> </html>
nav.inc.php
<!--后臺管理界面的上方標題></!--> <nav class="navbar navbar-default" role="navigation"> <p class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <p class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="home.php">ADMIN</a> </p> <!-- Collect the nav links, forms, and other content for toggling --> <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li ><a href="blog.php">博客管理 <span class="sr-only">(current)</span></a></li> <li><a href="auser.php">管理員管理</a></li> <li><a href="setting.php">系統(tǒng)管理</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <?php echo $session_user['ausername'];?> <span class="caret"></span></a> <!--輸出此時登錄的賬戶名></!--> <ul class="dropdown-menu"> <li><a href="logout.php">退出</a></li> </ul> </li> </ul> </p><!-- /.navbar-collapse --> </p><!-- /.container-fluid --> </nav>
(4)博客管理界面(blog.php)
這里有三個功能,修改、刪除、添加博客界面,下面我將單獨列出添加博客這個界面
(5)添加博客界面(blog_add.php)
為什么要單獨列出添加博客這個界面呢?因為在添加博客這個界面中加載了一個編輯器,一個強大的在線編輯器simditor,這里還是給出下載及使用連接,大家可以作為參考,學習一下(點擊打開鏈接)在這里這個編輯器如果需要圖片上傳功能的話,需要在文件中設置,這個文件設置為(blog_uopload.php)
blog_add.php源碼
<?php /*后臺除去管理員登錄界面,均需加載這個文件,來驗證該頁面管理員是否登錄*/ include ('check.php'); /*取出傳來的pid從而判斷是添加還是修改操作*/ $pid=$input->get('pid'); /*初始化page,為了區(qū)別添加還是修改操作*/ $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("數(shù)據(jù)不能為空"); } /*如果aid大于1,則得出更新操作,否則執(zhí)行添加操作*/ 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 "執(zhí)行失敗"; } } ?> <!--管理員添加博客或修改博客的界面<>/!--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>添加博客</title> <?php include(PATH . '/header.inc.php');?> <!--加載simiditor編輯器的文件></!--> <link rel="stylesheet" type="text/css" href="../theme/simditor/styles/simditor.css" /> <script type="text/javascript" src="../theme/simditor/scripts/module.js"></script> <script type="text/javascript" src="../theme/simditor/scripts/hotkeys.js"></script> <script type="text/javascript" src="../theme/simditor/scripts/uploader.js"></script> <script type="text/javascript" src="../theme/simditor/scripts/simditor.js"></script> </head> <body> <?php include('nav.inc.php');?> <p class="container"> <h3> 博客管理 <small class="pull-right"><a class='btn btn-default' href="blog.php">返回</a></small></h3> <hr/> <p class="rows"> <form class="form-horizontal" role="form" action="blog_add.php?do=add&pid=<?php echo $pid;?>" method="post"> <p class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">標題</label> <p class="col-sm-6"> <input type="text" class="form-control" name="title" placeholder="請輸入標題" value='<?php echo $page['title'];?>'> </p> </p> <p class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">作者</label> <p class="col-sm-4"> <input type="text" class="form-control" name="author" placeholder="請輸入作者" value='<?php echo $page['author'];?>' > </p> </p> <p class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">正文</label> <p class="col-sm-8"> <textarea id="content" name="content" class="form-control"><?php echo $page['content'];?></textarea> <!--在script中初始化編輯器,在這里注意script里加載的textarea的ID要與上方textarea的id號一致></!--> <script> var editor = new Simditor({ textarea: $('#content'), upload:{ url:'blog_upload.php', fileKey:'file1' } //optional options }); </script> </p> </p> <p class="form-group"> <p class="col-sm-offset-2 col-sm-6"> <button type="submit" class="btn btn-default">提交</button> </p> </p> </form> </p> </p> </body> </html>
blog_upload.php源碼
<?php /*后臺除去管理員登錄界面,均需加載這個文件,來驗證該頁面管理員是否登錄*/ include('check.php'); /*將文件上傳到服務器的目錄里*/ $key='file1'; $dir='../upfiles/'; if(isset($_FILES[$key])){ $file=$_FILES[$key]; if($file['error']==0){ /*文件所處服務器的目錄*/ $pathName=$dir . $file['name']; /*文件所在服務器的網(wǎng)址*/ $urlName='http://blog.com/blog/upfiles' . $file['name']; $is=move_uploaded_file($file['tmp_name'], $pathName); /*判斷是否移動成功*/ if(!$is){ die("上傳失敗"); } /*編輯器來判斷是否成功上傳圖片*/ $json=array( 'success' => true, 'msg' => '', 'file_path'=>$urlName ); echo json_encode($json); } } ?>
(6)管理員管理界面(auser.php)
這里還是有三個功能,修改、刪除和添加,這里我就不單獨一一列出來了,具體可參考文末給出的源碼
(7)系統(tǒng)管理界面
系統(tǒng)管理可以在這里設置標題、介紹和博客每頁的顯示數(shù)量
3.主界面(index.php)
這里是游客訪問的主界面,這里給出源碼大家作為參考,
閱讀界面(read.php)
當你想閱讀該文章時,可點擊標題進入閱讀頁,進行閱讀,同樣給出源碼,作為參考
關于“怎么通過html+css+mysql+php來快速的制作動態(tài)網(wǎng)頁”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
網(wǎng)站欄目:怎么通過html+css+mysql+php來快速的制作動態(tài)網(wǎng)頁
當前URL:http://jinyejixie.com/article4/iieeoe.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供面包屑導航、云服務器、營銷型網(wǎng)站建設、網(wǎng)站改版、微信公眾號、關鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)