一、開發環境的搭建
（1）apache+php+mysql環境搭建
因為要用apache來做服務器，mysql作為資料庫來存盤資料，php來寫代碼以此實作網頁與資料庫的互動資料，所以需要下載上述軟體，但上述軟體的安裝環境、配置很麻煩，所以在這里用了一個功能強大的建站集成軟體包---XAMPP
當然，也有可能啟動Apache時候出現錯誤，
（2）資料庫客戶端軟體navigat
直接在cmd命令控制臺操作資料庫并不方便，不夠直白，當然也可以直接用phpmyadmin來操作（上述xampp軟體包安裝之后在游覽器輸入127.0.0.1/phpmyadmin即可打開），但是phpmyadmin來操作也不方便，這里便采用Oracle公司出品的資料庫客戶端Navicat
點擊連接，輸入連接名，（這里我直接取了IP地址的名字127.0.0.1），主機名和埠號都不用變，這里的用戶名和密碼，如果是你用的是xampp，那么用戶名是root，密碼為空；如果不是用的是xampp安裝的，按照你設定的用戶名和密碼登錄即可，填寫完畢之后點擊連接測驗，沒有問題直接確定即可連接好資料庫，
此外你要是想掌握資料庫，簡單來講你想對資料庫的任何操作，都必須操作sql陳述句，總的來說分為四個操作：增刪改查，
①增：向資料庫寫入資料
陳述句：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 text
phper在進階的時候總會遇到一些問題和瓶頸，業務代碼寫多了沒有方向感，不知道該從那里入手去提升，對此我整理了一些資料，包括但不限于：分布式架構、高可擴展、高性能、高并發、服務器性能調優、TP6，laravel，YII2，Redis，Swoole、Kafka、Mysql優化、shell腳本、Docker、微服務、Nginx等多個知識點高級進階干貨需要的可以免費分享給大家，需要的（點擊→）我的官方群677079770
Sublime 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"
<Directory "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這個表，主要是用來存盤博客的系統設定：
2.網站后臺admin的書寫
（1）登錄界面（login.php）
關于這個頁面我會在這里給出原始碼，登錄頁面其實也就是個從資料庫讀取的程序，這個登錄頁面的設計我主要是采用了bootstrap來設計的，不明白的可以百度一下bootstrap
在這里面它包含了各式的樣式、組件和JavaScript插件，可以說很好用，
在這里我的使用方法是將bootstrap下載下來，然后將檔案加壓，復制到theme這個檔案夾下面，呼叫方法見下面的原始碼，在原始碼中我都給出了詳細的解釋，
原始碼：
1 <?php 2 /* 3 后臺管理員登錄視窗 4 */ 5 6 /*啟動session服務，記錄賬號登錄的cookies*/ 7 session_start(); 8 9 /*包含一個組態檔*/ 10 include('../config.php'); 11 12 13 if($input->get('do')=='check'){ 14 /*獲取頁面提交的用戶名和密碼資料*/ 15 $ausername=$input->post('ausername'); 16 $apassword=$input->post('apassword'); 17 18 /*查詢頁面提交的資料是否在資料庫提供的資料存在的sql陳述句*/ 19 $sql="select * from admin where ausername='{$ausername}' and apassword='{$apassword}' "; 20 /*資料庫查詢陳述句回傳結果*/ 21 $mysqli_result=$db->query($sql); 22 /*以陣列形式存盤資料庫查詢陳述句的回傳結果*/ 23 $row=$mysqli_result->fetch_array( MYSQLI_ASSOC); 24 /*如果row確實回傳了結果，則將結果的aid存盤在session里，并轉向home.php檔案*/ 25 if(is_array($row)){ 26 $_SESSION['aid']=$row['aid']; 27 header("location:home.php"); 28 }else{ 29 echo("賬戶或密碼錯誤"); 30 } 31 } 32 ?> 33 34 <!--后臺管理員登錄界面></!--> 35 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 36 <html lang="en"> 37 <head> 38 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 39 <title>管理員登錄界面</title> 40 <!--加載包含bootstrap里css和javascript里的檔案></!--> 41 <?php include(PATH . '/header.inc.php');?> 42 43 44 </head> 45 <body> 46 <!--最外面的container容器></!--> 47 <div class="container"> 48 <!--bootstrap使用時建議使用一個row表格類，包含12個列></!--> 49 <div class="row" style="margin-top:200px;"> 50 <!--距左邊3個列></!--> 51 <div class="col-md-3"></div> 52 <!--中間部分占據6列></!--> 53 <div class="col-md-6" "> 54 55 <div > 56 <!--登錄頭部分></!--> 57 <div >管理員登錄</div> 58 <!--登錄的身體部分></!--> 59 <div > 60 61 <form action="login.php?do=check" method="post"> 62 <!--登錄的用戶名那一行></!--> 63 <div > 64 <label for="inputEmail3" >用戶名</label> 65 <div > 66 <input type="text" name="ausername" id="ausername" placeholder="請輸入用戶名" datatype="*3-10" errormsg="請輸入長度 范圍在3-10之間的昵稱"> 67 </div> 68 </div> 69 70 <!--登錄的密碼那一行></!--> 71 <div > 72 <label for="inputEmail3" >密碼</label> 73 <div > 74 <input type="password" name="apassword" id="apassword" placeholder="請輸入密碼"> 75 </div> 76 </div> 77 78 <!--登錄、注冊那一行></!--> 79 <div > 80 <div ></div> 81 <!--登錄></!--> 82 <div > 83 <input type="submit" value="https://www.cnblogs.com/a609251438/p/登錄" class='btn btn-primary'> 84 </div> 85 <!--注冊></!--> 86 <div > 87 <a href="https://www.cnblogs.com/a609251438/p/register.php"><input type="button" value="https://www.cnblogs.com/a609251438/p/注冊" > </a> 88 </div> 89 </div> 90 </form> 91 92 93 94 </div> 95 <!--登錄的尾部分></!--> 96 <div >著作權所有，盜版必究</div> 97 </div> 98 99 </div> 100 <!--距離右邊三列></!--> 101 <div ></div> 102 </div> 103 </div> 104 <!--視窗背景的script加載></!--> 105 <script type="text/javascript"> 106 window.onload = function() { 107 var config = { 108 vx : 4, 109 vy : 4, 110 height : 2, 111 width : 2, 112 count : 100, 113 color : "121, 162, 185", 114 stroke : "100, 200, 180", 115 dist : 6000, 116 e_dist : 20000, 117 max_conn : 10 118 } 119 CanvasParticle(config); 120 } 121 </script> 122 <script type="text/javascript" src="https://www.cnblogs.com/a609251438/theme/js/canvas-particle.js"></script> 123 </script> 124 </body> 125 </html>
（2）注冊界面(register.php)
注冊界面其實也就是個往資料庫增加資料的程序，
還是給出原始碼，原始碼中我給出了詳解，
1 <?php 2 /*包含一個組態檔*/ 3 include('../config.php'); 4 5 if($input->get('do')=='check'){ 6 /*獲取用戶頁面注冊傳來的用戶名和密碼資料*/ 7 $ausername=$input->post('ausername'); 8 $apassword=$input->post('apassword'); 9 $aconfirmpassword=$input->post('aconfirmpassword'); 10 /*注冊時的處理*/ 11 if($apassword!=$aconfirmpassword){ 12 echo "前后兩次輸入的密碼不一致"; 13 exit; 14 } 15 /*將用戶填入的資料插入到資料庫的sql陳述句*/ 16 $sql="INSERT INTO admin(`ausername`,`apassword`) values('$ausername','$apassword')"; 17 /*提交sql陳述句到資料庫處理*/ 18 $is=$db->query($sql); 19 /*判斷是否注冊成功*/ 20 if($is){ 21 echo "注冊成功"; 22 header("Location:login.php"); 23 }else{ 24 echo "注冊失敗"; 25 } 26 } 27 28 29 ?> 30 31 32 33 <!--后臺管理員登錄界面></!--> 34 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 35 <html lang="en"> 36 <head> 37 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 38 <title>管理員注冊界面</title> 39 <!--加載包含bootstrap里css和javascript里的檔案></!--> 40 <?php include(PATH . '/header.inc.php');?> 41 42 </head> 43 <body> 44 <!--最外面的container容器></!--> 45 <div class="container"> 46 <!--bootstrap使用時建議使用一個row表格類，包含12個列></!--> 47 <div class="row" style="margin-top:200px;"> 48 <!--距左邊3個列></!--> 49 <div class="col-md-3"></div> 50 <!--中間部分占據6列></!--> 51 <div class="col-md-6" "> 52 53 <div > 54 <!--注冊頭部分></!--> 55 <div >管理員注冊</div> 56 <!--注冊的身體部分></!--> 57 <div > 58 59 <form action="register.php?do=check" method="post"> 60 <!--注冊的用戶名那一行></!--> 61 <div > 62 <label for="inputEmail3" >用戶名</label> 63 <div > 64 <input type="text" name="ausername" id="ausername" placeholder="請輸入用戶名"> 65 </div> 66 </div> 67 68 <!--注冊的密碼那一行></!--> 69 <div > 70 <label for="inputEmail3" >密碼</label> 71 <div > 72 <input type="password" name="apassword" id="apassword" placeholder="請輸入密碼"> 73 </div> 74 </div> 75 <!--注冊的密碼確定那一行></!--> 76 <div > 77 <label for="inputEmail3" >確認密碼</label> 78 <div > 79 <input type="password" name="aconfirmpassword" id="aconfirmpassword" placeholder="請再次輸入密碼"> 80 </div> 81 </div> 82 83 <!--提交注冊那一行></!--> 84 <div > 85 <div ></div> 86 <div > 87 <input type="submit" value="https://www.cnblogs.com/a609251438/p/注冊" class='btn btn-primary btn-lg btn-block'> 88 </div> 89 </div> 90 </form> 91 92 93 94 </div> 95 <!--登錄的尾部分></!--> 96 <div >著作權所有，盜版必究</div> 97 </div> 98 99 </div> 100 <!--距離右邊三列></!--> 101 <div ></div> 102 </div> 103 </div> 104 <!--視窗背景的script加載></!--> 105 <script type="text/javascript"> 106 window.onload = function() { 107 var config = { 108 vx : 4, 109 vy : 4, 110 height : 2, 111 width : 2, 112 count : 100, 113 color : "121, 162, 185", 114 stroke : "100, 200, 180", 115 dist : 6000, 116 e_dist : 20000, 117 max_conn : 10 118 } 119 CanvasParticle(config); 120 } 121 </script> 122 <script type="text/javascript" src="https://www.cnblogs.com/a609251438/theme/js/canvas-particle.js"></script> 123 </script> 124 </body> 125 </html>
（3）后臺管理頁面（home.php）
在原始碼中將上述網站的標題那部分單獨給拿出來做了一個檔案（nav.inc.php）,這里也是給出原始碼，供大家學習參考，
home.php原始碼
1 <?php 2 /* 3 后臺管理員登錄之后php控制端 4 */ 5 include ('check.php'); 6 ?> 7 8 <!--后臺管理員登錄之后的界面<>/!--> 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 10 <html lang="en"> 11 <head> 12 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 13 <title>管理員登錄</title> 14 <?php include(PATH . '/header.inc.php');?> <!--所有的頁面都需加載這個檔案></!--> 15 </head> 16 <body> 17 <?php include('nav.inc.php');?> <!--管理員登錄頁面的標題部分></!--> 18 </body> 19 </html>
nav.inc.php
1 <!--后臺管理界面的上方標題></!--> 2 <nav class="navbar navbar-default" role="navigation"> 3 <div class="container-fluid"> 4 <!-- Brand and toggle get grouped for better mobile display --> 5 <div class="navbar-header"> 6 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 7 <span class="sr-only">Toggle navigation</span> 8 <span class="icon-bar"></span> 9 <span class="icon-bar"></span> 10 <span class="icon-bar"></span> 11 </button> 12 <a class="navbar-brand" href="https://www.cnblogs.com/a609251438/p/home.php">ADMIN</a> 13 </div> 14 15 <!-- Collect the nav links, forms, and other content for toggling --> 16 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 17 <ul class="nav navbar-nav"> 18 <li ><a href="https://www.cnblogs.com/a609251438/p/blog.php">博客管理 <span class="sr-only">(current)</span></a></li> 19 <li><a href="https://www.cnblogs.com/a609251438/p/auser.php">管理員管理</a></li> 20 <li><a href="https://www.cnblogs.com/a609251438/p/setting.php">系統管理</a></li> 21 </ul> 22 23 <ul class="nav navbar-nav navbar-right"> 24 25 <li class="dropdown"> 26 <a href="https://www.cnblogs.com/a609251438/p/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <?php echo $session_user['ausername'];?> <span class="caret"></span></a> <!--輸出此時登錄的賬戶名></!--> 27 <ul class="dropdown-menu"> 28 <li><a href="https://www.cnblogs.com/a609251438/p/logout.php">退出</a></li> 29 30 </ul> 31 </li> 32 </ul> 33 </div><!-- /.navbar-collapse --> 34 </div><!-- /.container-fluid --> 35 </nav>
（4）博客管理界面(blog.php）
這里有三個功能，修改、洗掉、添加博客界面，下面我將單獨列出添加博客這個界面
（5）添加博客界面(blog_add.php)
為什么要單獨列出添加博客這個界面呢？因為在添加博客這個界面中加載了一個編輯器，一個強大的在線編輯器simditor在這里這個編輯器如果需要圖片上傳功能的話，需要在檔案中設定，這個檔案設定為（blog_uopload.php）
blog_add.php原始碼
1 <?php 2 /*后臺除去管理員登錄界面，均需加載這個檔案，來驗證該頁面管理員是否登錄*/ 3 include ('check.php'); 4 /*取出傳來的pid從而判斷是添加還是修改操作*/ 5 $pid=$input->get('pid'); 6 /*初始化page，為了區別添加還是修改操作*/ 7 $page=array( 8 'title' => '', 9 'author' => '', 10 'content' => '', 11 ); 12 /*如果pid大于0，可以得出并不是添加操作，而是修改操作*/ 13 if($pid>0){ 14 $sql="select * from page where pid ='{$pid}' "; 15 $res=$db->query($sql); 16 $page=$res->fetch_array(MYSQLI_ASSOC); 17 } 18 19 20 21 /*對于添加操作操作而言，賬戶或密碼不能為空*/ 22 if($input->get('do')=='add'){ 23 $title=$input->post('title'); 24 $author=$input->post('author'); 25 $content=$input->post('content'); 26 if(empty($title)||empty($author)||empty($content)){ 27 echo("資料不能為空"); 28 } 29 /*如果aid大于1，則得出更新操作，否則執行添加操作*/ 30 if($pid>0){ 31 $uptime=time(); 32 $sqlTpl="UPDATE page set title='%s',author='%s',content='%s',uptime='%d' where pid='%d' "; 33 $sql=sprintf($sqlTpl,$title,$author,$content,$uptime,$pid); 34 } 35 else{ 36 $intime=time(); 37 $sqlTpl="INSERT INTO page(`title`,`author`,`content`,`intime`,`uptime`) values('%s','%s','%s','%d','%d')"; 38 $sql=sprintf($sqlTpl,$title,$author,$content,$intime,0); 39 40 } 41 /*判斷是否有結果*/ 42 $is=$db->query($sql); 43 if($is){ 44 header("location:blog.php"); 45 }else{ 46 echo "執行失敗"; 47 } 48 } 49 ?> 50 51 <!--管理員添加博客或修改博客的界面<>/!--> 52 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 53 <html lang="en"> 54 <head> 55 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 56 <title>添加博客</title> 57 <?php include(PATH . '/header.inc.php');?> 58 59 <!--加載simiditor編輯器的檔案></!--> 60 <link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/a609251438/theme/simditor/styles/simditor.css" /> 61 <script type="text/javascript" src="https://www.cnblogs.com/a609251438/theme/simditor/scripts/module.js"></script> 62 <script type="text/javascript" src="https://www.cnblogs.com/a609251438/theme/simditor/scripts/hotkeys.js"></script> 63 <script type="text/javascript" src="https://www.cnblogs.com/a609251438/theme/simditor/scripts/uploader.js"></script> 64 <script type="text/javascript" src="https://www.cnblogs.com/a609251438/theme/simditor/scripts/simditor.js"></script> 65 66 </head> 67 <body> 68 <?php include('nav.inc.php');?> 69 <div class="container"> 70 <h2> 博客管理 <small class="pull-right"><a class='btn btn-default' href="https://www.cnblogs.com/a609251438/p/blog.php">回傳</a></small></h2> 71 <hr/> 72 <div class="rows"> 73 <form class="form-horizontal" role="form" action="blog_add.php?do=add&pid=<?php echo $pid;?>" method="post"> 74 <div class="form-group"> 75 <label for="inputEmail3" class="col-sm-2 control-label">標題</label> 76 <div class="col-sm-6"> 77 <input type="text" class="form-control" name="title" placeholder="請輸入標題" value='https://www.cnblogs.com/a609251438/p/<?php echo $page['title'];?>'> 78 </div> 79 </div> 80 <div class="form-group"> 81 <label for="inputPassword3" class="col-sm-2 control-label">作者</label> 82 <div class="col-sm-4"> 83 <input type="text" class="form-control" name="author" placeholder="請輸入作者" value='https://www.cnblogs.com/a609251438/p/<?php echo $page['author'];?>' > 84 </div> 85 </div> 86 87 <div class="form-group"> 88 <label for="inputPassword3" class="col-sm-2 control-label">正文</label> 89 <div class="col-sm-8"> 90 <textarea id="content" name="content" class="form-control"><?php echo $page['content'];?></textarea> 91 <!--在script中初始化編輯器,在這里注意script里加載的textarea的ID要與上方textarea的id號一致></!--> 92 <script> 93 var editor = new Simditor({ 94 textarea: $('#content'), 95 upload:{ 96 url:'blog_upload.php', 97 fileKey:'file1' 98 } 99 //optional options 100 }); 101 </script> 102 </div> 103 </div> 104 105 <div class="form-group"> 106 <div class="col-sm-offset-2 col-sm-6"> 107 <button type="submit" class="btn btn-default">提交</button> 108 </div> 109 </div> 110 </form> 111 112 </div> 113 </div> 114 </body> 115 </html> 116
blog_upload.php原始碼
1 <?php 2 /*后臺除去管理員登錄界面，均需加載這個檔案，來驗證該頁面管理員是否登錄*/ 3 include('check.php'); 4 /*將檔案上傳到服務器的目錄里*/ 5 $key='file1'; 6 $dir='../upfiles/'; 7 if(isset($_FILES[$key])){ 8 $file=$_FILES[$key]; 9 if($file['error']==0){ 10 /*檔案所處服務器的目錄*/ 11 $pathName=$dir . $file['name']; 12 /*檔案所在服務器的網址*/ 13 $urlName='http://blog.com/blog/upfiles' . $file['name']; 14 $is=move_uploaded_file($file['tmp_name'], $pathName); 15 /*判斷是否移動成功*/ 16 if(!$is){ 17 die("上傳失敗"); 18 } 19 /*編輯器來判斷是否成功上傳圖片*/ 20 $json=array( 21 'success' => true, 22 'msg' => '', 23 'file_path'=>$urlName 24 ); 25 echo json_encode($json); 26 } 27 } 28 ?>
（6）管理員管理界面（auser.php）
這里還是有三個功能，修改、洗掉和添加，這里我就不單獨一一列出來了，具體可參考文末給出的原始碼
（7）系統管理界面
系統管理可以在這里設定標題、介紹和博客每頁的顯示數量
3.主界面（index.php）
這里是游客訪問的主界面，這里給出原始碼大家作為參考，
閱讀界面（read.php）
當你想閱讀該文章時，可點擊標題進入閱讀頁，進行閱讀,同樣給出原始碼，作為參考
phper在進階的時候總會遇到一些問題和瓶頸，業務代碼寫多了沒有方向感，不知道該從那里入手去提升，對此我整理了一些資料，包括但不限于：分布式架構、高可擴展、高性能、高并發、服務器性能調優、TP6，laravel，YII2，Redis，Swoole、Kafka、Mysql優化、shell腳本、Docker、微服務、Nginx等多個知識點高級進階干貨需要的可以免費分享給大家，需要的（點擊→）我的官方群677079770
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/125429.html
標籤：PHP
上一篇：laravel 可以做什么