This is a recent tutorial for a 3 panel / 3 column AJAX based page manager that can be used for any cms (content management system). This tutorial requires a moderate working knowledge of AJAX and any scripting language and database technology.
You can use any scripting technology or javascript framework / library for this method, we always recommend using jquery library for the AJAX parts of this tutorial.
Overview
The AJAX page manager is a 3 column visual AJAX webpage manager that allows the management of web pages and web page folders (web pages that contain sub pages).
The AJAX Page Manager allows the management of web pages and web page folders for multi-level sub pages and sub folders.
Description of terminology used in tutorial
first level api – the api that handles the display of the 1st level / primary level web pages / webpage folders.
second level api – the api that handles the display of the 2nd level web pages / webpage folders.
third level api – the api that handles the display of the 3rd level web pages.
sort api – the api that handles the sort order of the web page / web page folder. This api can obtain json objects or xml data depending upon your requirements.
Database Setup Overview
A database table named “webpages” or any other suitable name for the web pages and web page folders will be used, the database layout consists of a minimum of the following columns;
page_id (int) <- the webpage or webpage folder id
page_name (varchar) <- the webpage name
parent_page_id(int) <- the webpage or webpage folders parent page id
page_level (int) <- the webpage level (e.g. level 1, level2, level3)
is_folder (int) <- 1 for is a webpage folder 0 for not a webpage folder
page_order <- the order of the web page / webpage folder. (can be managed via drag/drop javascript with json)
Implementation method / details
3 or more column “place holders” are used in a cms whereby the the first column represents the top level parent pages / parent folders placeholder, the second column represents the second level sub pages / sub folders placeholder and the third column represents the third level sub pages placeholder. (More sub levels and columns can be added if needed, however the initial version uses 3 columns). Also, you can use row based place holders if you prefer. The final column does not typically allow for addition of page folders.
The columns can be div elements with a specific html DOM ID to specify the column level. e.g. column1 should be labelled <div id=”column1″> or something similar and the same for column2 and column 3.
e.g. <div id=”column2″> </div> and <div id=”column3″> </div>
The labelled divs will be used for the AJAX DOM identifier for which place holder div should be filled with the AJAX obtained web content from the API’s . The API’s can be developed in any scripting / programming language such as PHP, ASP, .NET, JAVA, etc. However, for our demo we are using PHP. The API’s simply return the html code for the webpage / webpage folder placeholder div elements. If there is more than 1 web page within that page_level , the specific API will return multiple web page / web page folder elements that can be clicked on.
Initially the GUI page loads with the first column populated with your existing website pages / webpage folders (if any pages exist) of the “page_level 1″ aka. primary page level within the db,
select * from webpages where page_level=1;
All the div columns are scrollable to allow for multiple pages. The first column and dynamically populated second column have 2 buttons that allow the addition of web pages and the addition of web page folders. (Note: the addition of pages and folders are setup within the first 2 columns and when adding the pages to a database , the page_level parameter is set).
insert into webpages (‘page_name’,'page_level’,***ETC***) VALUES (‘page name’,'$page_level’);
if adding a webpage folder
insert into webpages (page_name,page_level,is_folder,***ETC***) VALUES (‘page name’,$page_level,1);
***ETC*** represents the other column data to add to the db.
Note: For the second and third level pages, a parent_page_id will be added aswell.
When you click on a web page folder element (div or table element) within the first column, an AJAX request is sent to the “second level api” for the first level sub pages (aka. web pages / web page folders with “page_level=2″ db details) to populate within the second column. The “second level api” receives the parent page id or parent page name as a parameter to make the database lookup to determine the sub pages to fetch.
In the demo , we use the page_id parameter.
e.g.
select * from webpages where parent_page_id=”$parent_page_id” and page_level=”2”;
When you click on any web page folder element (div or table element) within the newly populated second column, another AJAX request is sent to the third level api . The third column is then populated with all the sub pages / sub folders of the second level subpages (aka. web pages / web page folders with the “page_level=3″ db details).
The “third level api” receives the parent page id or parent page name as a parameter to make the database lookup to determine the sub pages to fetch.
e.g.
select * from webpages where parent_page_id=”$parent_page_id” and page_level=”3”;
The third / last column does not allow for the addition of sub folders.
Within the database, each web page / web page folder entry has a minimum of details,
1) the parent_page id
2) the page_level
3) is_folder toggle
Each api simply populates the column[1-3] div place holder with the web page / web page folder elements that can be clicked on. Each web page / web page folder element has multiple links that perform actions such as delete page, edit page and each web page / web page folder element can be sorted. Our demo method implementation uses drag and drop sort ordering via json object posts to the sort api. You can also setup your sort ordering api to accept xml data or any other type of dynamic AJAX based data transfer methods.
Notes: When you click on any web page element (not folder element) the child column (next column) should populate with a blank page via AJAX call. You can specify the div id’s of the columns for the AJAX call. If you have multiple web page folders within the same column, clicking on each web page folder element will re-load the AJAX obtained api results within the child column.
We recommend using jquery javascript framework for the AJAX dynamic page loading within the column div placeholders, however any javascript or javascript framework that supports AJAX will do.
I will update this thread with a working demo of this tutorial for those of you who need to see the example / method in action.
You can use any scripting technology or javascript framework / library for this method, we always recommend using jquery library for the AJAX parts of this tutorial.
Overview
The AJAX page manager is a 3 column visual AJAX webpage manager that allows the management of web pages and web page folders (web pages that contain sub pages).
The AJAX Page Manager allows the management of web pages and web page folders for multi-level sub pages and sub folders.
Description of terminology used in tutorial
first level api – the api that handles the display of the 1st level / primary level web pages / webpage folders.
second level api – the api that handles the display of the 2nd level web pages / webpage folders.
third level api – the api that handles the display of the 3rd level web pages.
sort api – the api that handles the sort order of the web page / web page folder. This api can obtain json objects or xml data depending upon your requirements.
Database Setup Overview
A database table named “webpages” or any other suitable name for the web pages and web page folders will be used, the database layout consists of a minimum of the following columns;
page_id (int) <- the webpage or webpage folder id
page_name (varchar) <- the webpage name
parent_page_id(int) <- the webpage or webpage folders parent page id
page_level (int) <- the webpage level (e.g. level 1, level2, level3)
is_folder (int) <- 1 for is a webpage folder 0 for not a webpage folder
page_order <- the order of the web page / webpage folder. (can be managed via drag/drop javascript with json)
Implementation method / details
3 or more column “place holders” are used in a cms whereby the the first column represents the top level parent pages / parent folders placeholder, the second column represents the second level sub pages / sub folders placeholder and the third column represents the third level sub pages placeholder. (More sub levels and columns can be added if needed, however the initial version uses 3 columns). Also, you can use row based place holders if you prefer. The final column does not typically allow for addition of page folders.
The columns can be div elements with a specific html DOM ID to specify the column level. e.g. column1 should be labelled <div id=”column1″> or something similar and the same for column2 and column 3.
e.g. <div id=”column2″> </div> and <div id=”column3″> </div>
The labelled divs will be used for the AJAX DOM identifier for which place holder div should be filled with the AJAX obtained web content from the API’s . The API’s can be developed in any scripting / programming language such as PHP, ASP, .NET, JAVA, etc. However, for our demo we are using PHP. The API’s simply return the html code for the webpage / webpage folder placeholder div elements. If there is more than 1 web page within that page_level , the specific API will return multiple web page / web page folder elements that can be clicked on.
Initially the GUI page loads with the first column populated with your existing website pages / webpage folders (if any pages exist) of the “page_level 1″ aka. primary page level within the db,
select * from webpages where page_level=1;
All the div columns are scrollable to allow for multiple pages. The first column and dynamically populated second column have 2 buttons that allow the addition of web pages and the addition of web page folders. (Note: the addition of pages and folders are setup within the first 2 columns and when adding the pages to a database , the page_level parameter is set).
insert into webpages (‘page_name’,'page_level’,***ETC***) VALUES (‘page name’,'$page_level’);
if adding a webpage folder
insert into webpages (page_name,page_level,is_folder,***ETC***) VALUES (‘page name’,$page_level,1);
***ETC*** represents the other column data to add to the db.
Note: For the second and third level pages, a parent_page_id will be added aswell.
When you click on a web page folder element (div or table element) within the first column, an AJAX request is sent to the “second level api” for the first level sub pages (aka. web pages / web page folders with “page_level=2″ db details) to populate within the second column. The “second level api” receives the parent page id or parent page name as a parameter to make the database lookup to determine the sub pages to fetch.
In the demo , we use the page_id parameter.
e.g.
select * from webpages where parent_page_id=”$parent_page_id” and page_level=”2”;
When you click on any web page folder element (div or table element) within the newly populated second column, another AJAX request is sent to the third level api . The third column is then populated with all the sub pages / sub folders of the second level subpages (aka. web pages / web page folders with the “page_level=3″ db details).
The “third level api” receives the parent page id or parent page name as a parameter to make the database lookup to determine the sub pages to fetch.
e.g.
select * from webpages where parent_page_id=”$parent_page_id” and page_level=”3”;
The third / last column does not allow for the addition of sub folders.
Within the database, each web page / web page folder entry has a minimum of details,
1) the parent_page id
2) the page_level
3) is_folder toggle
Each api simply populates the column[1-3] div place holder with the web page / web page folder elements that can be clicked on. Each web page / web page folder element has multiple links that perform actions such as delete page, edit page and each web page / web page folder element can be sorted. Our demo method implementation uses drag and drop sort ordering via json object posts to the sort api. You can also setup your sort ordering api to accept xml data or any other type of dynamic AJAX based data transfer methods.
Notes: When you click on any web page element (not folder element) the child column (next column) should populate with a blank page via AJAX call. You can specify the div id’s of the columns for the AJAX call. If you have multiple web page folders within the same column, clicking on each web page folder element will re-load the AJAX obtained api results within the child column.
We recommend using jquery javascript framework for the AJAX dynamic page loading within the column div placeholders, however any javascript or javascript framework that supports AJAX will do.
I will update this thread with a working demo of this tutorial for those of you who need to see the example / method in action.
Last edited: