Principle and Example: php+mysql+jquery generate static Web page (with background editing function)

From the perspective of how the Web works, the server load of user access to HTML is much smaller than accessing dynamic pages, because in the former, the server only sends the corresponding HTML code to the client, while in the latter, the server needs to perform a series of calculations based on the access conditions, and then generates the HTML code. Finally, the operation result code is sent to the client. So, for the most visited promotional sites (such as news), use static pages as much as you can.

On the other hand, it is impossible for web editors to manually make these HTML one by one, that is, to return to the pure static era years ago. We can use dynamic language to quickly and easily generate these static pages. Moreover, this technology is now very mature. This article begins with the simplest of principles and cases, attempts to understand the approximate methods and processes, and does not care about specific details (such as a text editor).

Principle steps:

1. Create an HTML page with empty content as a template.

2. When a site editor adds a record through the background, add its content to the appropriate location in the template file and save it as an HTML file at a specific location

3. Record the information of the file in the database

4, in the foreground, read the records in the database and display

5, background editing, in essence, the HTML file to increase, delete, change, incidentally, the record in the database is also carried out as above operation.

Directory structure:

Database design:

Create Database cms_php_html;

Use cms_php_html;

CREATE TABLE IF not EXISTS ' newslist ' (

' NID ' int (one) not NULL auto_increment,

' Ntitle ' varchar (COLLATE) Utf8_bin not NULL,

' Nurl ' varchar (+) COLLATE Utf8_bin not NULL,

PRIMARY KEY (' NID ')

) Engine=innodb DEFAULT Charset=utf8;

Code:

1, front page: index.html

 
  Newslist
 
  
  
Admin

2, the front desk Query Database page: admin/query.php

3, backstage edit home: admin/admin_index.html

 
  
 <title>CMS backend</title>
 Front desk View
 
 

 
  
  
 
   
 
    
 
     
 
      
Add to
 
      
Title:
 
      
Content:
 
      
 
     
 
    
 
     
 
      
Modify
 
      
File:
 
      
Title:
 
      
Content:
 
      
 
     
 
   
 
   
 
    
News List
 
   
 
  

 
 

4. Js:js/new.js related to new records and record changes

$ (function () {//) first lists the existing records in the body of the table $.ajax ({type: "Get", url: "). /admin/query.php ", DataType:" JSON ", success:function (data) {$ (" #newsList "). HTML (" "); $.each (data, function (index, Row) {$ ("#newsList"). Append ("
"+row[' Ntitle ']+"
");}); $ ("#newsList Li"). each (function () {$ (the). bind (' click ', {url:$ (this). attr (' title ')},readnews)})});//Empty new record text box $ ("#newClear"). Click (function () {newtitle=$ ("#newTitle"). Val ("") newcontent=$ ("#newContent"). Val ("");}) Clears the text box that modifies the record $ ("#editClear"). Click (function () {newtitle=$ ("#oldTitle"). Val ("") newcontent=$ ("#oldContent"). Val ("" ); $ ("#pageFile"). HTML ("")})//Submit new record Contents $ ("#newSubmit"). Click (function () {if ("#newTitle"). val ()! = "" && $ (" #newContent "). val ()! =" ") {$ (" #newSubmit "). Val (' Add in: '); $ ("#newSubmit"). attr ("Disabled", "disabled"), newtitle=$ ("#newTitle"). Val () newcontent=$ ("#newContent"). Val (); $. Ajax ({type: "post", url: ".. /admin/new.php ", Data:{txttitle:newtitle,txtcontent:newcontent},datatype: ' HTML ', success:function (data) {alert ( Data), $ ("#newSubmit"). Removeattr ("Disabled"), $ ("#newSubmit"). Val (' Add '); $.ajax ({type: "Get", url: "). /admin/query.php ", DataType:" JSON ", success:function (data) {//Added successfully after the refresh of the existing list of records $ (" #newsList "). HTML (" "); $.each (data, function (Index,row) {$ ("#newsList"). Append ("
"+row[' Ntitle ']+"
");}); $ ("#newsList Li"). each (function () {$ (the). bind (' click ', {url:$ (this). attr (' title ')},readnews)})})}) Clicking on any of the record lists displays the original contents of the record in the text box of the modified area function Readnews (evt) {//alert (Evt.data.url), $.ajax ({type: "Get", url: "). /admin/read.php ", DataType: ' JSON ', data:{htmlurl:evt.data.url},success:function (data) {//alert (' returned ') $ (" # Oldtitle "). Val (Data[0]); $ (" #oldContent "). Val (Data[1]) $ (" #pageFile "). html (Evt.data.url)});}

5. Js:js/saveedit.js related to the modification of records

$ (function () {$ ("#oldSubmit"). Click (function () {if ("#pageFile"). Text ()! = "&& $ (" #oldTitle "). val ()! =" " && $ ("#oldContent"). val ()! = "") {$ ("#oldSubmit"). Val (' modified ... '); fileurl=$ ("#pageFile"). html (); $ ("# Oldsubmit "). attr (" Disabled "," disabled "), newtitle=$ (" #oldTitle "). Val () newcontent=$ (" #oldContent "). Val (); $.ajax ( {type: "post", url: ".". /admin/saveedit.php ", Data:{url:fileurl,title:newtitle,content:newcontent},datatype: ' HTML ', success:function ( Data) {$ ("#oldSubmit"). Removeattr ("Disabled"), $ ("#oldSubmit"). Val (' modify '); alert (data); $.ajax ({type: "Get", url: "). /admin/query.php ", DataType:" JSON ", success:function (data) {$ (" #newsList "). HTML (" "); $.each (data, function (index, Row) {$ ("#newsList"). Append ("
"+row[' Ntitle ']+"
");}); $ ("#newsList Li"). each (function () {$ (the). bind (' click ', {url:$ (this). attr (' title ')},readnews)})})}) function Readnews (evt) {//alert (Evt.data.url); $.ajax ({type: "Get", url: "). /admin/read.php ", DataType: ' JSON ', data:{htmlurl:evt.data.url},success:function (data) {//alert (' returned ') $ (" # Oldtitle "). Val (Data[0]); $ (" #oldContent "). Val (Data[1]) $ (" #pageFile "). html (Evt.data.url)});}

6. Js:js/delete.js related to deleting records

$ (function () {$ ("#oldDelete"). Click (function () {if (window.confirm) (' OK ' to delete? ') {==true) {currenturl=$ ("#pageFile"). Text (); $.ajax ({type: "post", url: "). /admin/delete.php ", Data:{curl:currenturl},datatype: ' HTML ', success:function (data) {alert (data); $.ajax ({type:" Get ", url:". /admin/query.php ", DataType:" JSON ", success:function (data) {$ (" #newsList "). HTML (" "); $.each (data, function (index, Row) {$ ("#newsList"). Append ("
"+row[' Ntitle ']+"
");}); $ ("#newsList Li"). each (function () {$ (the). bind (' click ', {url:$ (this). attr (' title ')},readnews)})})})

7, the new record of the PHP implementation code: admin/new.php

8, modify the existing record of the PHP implementation code: admin/saveedit.php

 
  (.*?) #s ","". $title."", $oldContent); $newContent =preg_replace (" # (. *?) #s "," ". $content." ", $newContent);p reg_match (" #http://localhost/phptohtml/(. *). Html#s ", $url, $m); $fwrite =fopen (". /". $m [1].". HTML "," W "); Fwrite ($fwrite, $newContent); mysql_connect ("localhost", "root", "root"), mysql_query ("Set names UTF8"); mysql_select_db ("cms_php_html"); mysql_ Query ("Update newslist set ntitle= '". $title. "' Where Nurl= '". $url. "'"); Echo ("OK"); >

9, read the existing record of the PHP implementation code: admin/read.php

 
  (.*?) #s ", $fcontents, $titleMatches);p Reg_match (" # (. *?) #s ", $fcontents, $contentMatches) $row [0]= $titleMatches [1]; $row [1]= $contentMatches [1];echo (Json_encode ($row));? >

10, delete a record of the PHP implementation code: admin/delete.php

11. template file: template/t1.html

 
  {TITLE}Returns the list page {CONTENT}

Results:

Front desk:

After opening the link in the foreground:

Background home:

To add a record:

After adding:

To modify a record:

To delete a record:

After the list is deleted:

