Building a Multi-Page Article System With ASP/PHP

Building a Multi-Page Article System With ASP/PHP - How Everything Will Work
(Page 2 of 6 )

If you're a web developer and have business-orientated clients, then I'm sure that you either have -– or will have to –- construct some sort of content management system to manage articles or content. Some people would like to have you think that CMS's (content management systems) are hard to develop. Don't be fooled. They are easy.

The one we are going to build today will let us store and display articles. Each article can have up to 20 pages, each of which will contain a title and some content. We will create one script to create new articles, and another to display them. A MySQL/SQL Server 2000 database will be used to store the articles.

The Database Schema
Our database will contain just 2 tables: 1 for the articles and 1 for the pages. Each page will link back to its parent article with the use of a primary key in the articles table, and a foreign key in the pages table.

MySQL Database Details
Jump to the MySQL command prompt and run the following code to create a new database and populate it with 2 tables, as described above:

create database myCMS;
use myCMS;

create table articles
(
articleId int auto_increment not null primary key,
title varchar(250),
summary text,
datePublished timestamp,
unique id(articleId)
);

create table pages
(
pageId int auto_increment not null primary key,
articleId int,
title varchar(250),
content text,
unique id(pageId)
);

SQL Server 2000 Database Details
Use query analyzer to create a new database and populate it with 2 tables, as described above:

create database myCMS
go

use myCMS
go

create table articles
(
articleId int not null primary key identity(1,1),
title varchar(250),
summary text,
datePublished datetime default GETDATE()
)

create table pages
(
pageId int not null primary key identity(1,1),
articleId int,
title varchar(250),
content text
)

Press F5 to execute the queries once you've copied them into the query analyzer window.

Building Our Multi-Page System
Our database is now in place. It's time to get creative with some JavaScript to build the multi-page article system. Here's how our page is going to look when we’ve finished:



As you can see, it's pretty simple. We will have an article title and summary, followed by a series of pages. Each of the buttons has an event linked to it in which JavaScript code is used to perform some operation on the current article page.

Our article system will let us:

• Add, edit and delete articles
• Shift the page order of each page in our article
• Remove all pages in one hit
• Delete pages on a page-by-page basis
• Update a page once it has already been created

[Note] Our article system will add articles only. It is beyond the scope of this article for me to show you how to load articles back from the database or delete them. [End Note]

Adding an Article
The good thing about our article system is that there's very little server-side code. It's mostly client-side JavaScript, meaning that if you didn't use ASP or PHP, then you could easily take the code and convert it to Perl, ColdFusion, ASP.Net, etc.

Our basic layout is a couple of text boxes, a select box and a text box. The entire code for this article is available in the support material link on the last page. Let's now run through the steps of adding pages to an article. We will then look at the JavaScript code behind our article system.

Here's a diagram to illustrate the order in which the "add article" form should be completed:



As you can see, we start by entering an article title and summary. Next, we move onto adding pages to our article. We start with the page title (step 3) and then the page content (step 4). Once we have entered those, we click on the "Add Page" button (step 5). The "Add Page" button fires off some JavaScript which we will look at shortly. We then repeat steps 3 to 5 to add more pages.

Phew. OK. Now, let's get into the nitty-gritty and look at the JavaScript code behind it all. Don't worry, I will assume that you have limited JavaScript ability and I will try to explain everything as best as I can!
blog comments powered by Disqus