How to create a basic news system

In this tutorial I will show you how to create a basic file based news system with integrated WYSIWYG editor.

Step 1.: Introduction

A basic news system needs to display user submitted articles. To do this we need a page which displays the latest news. Besides this we need to create an other page where you can post your news. And here we usually want to use a WYSIWYG editor. In this tutorial we will use the quite common TinyMCE editor. So we need the followings for this small project:

• TinyMCE WYSIWYG editor
• index.php page to display latest news
• admin.php to post news

You can download TinyMCE from here. You need to extract the content of the zip file. After it you have a directory named tinymce with 3 sub-directories. Besides this you need to create a news directory on the main level of the project. At the end the file structure should look like this:

• tinymce
• news
  
• index.php
• admin.php

Step 2.: The admin interface

So as first coding step let's work with the admin.php file which will be relevant to display a from with the WYSIWYG editor, process the submitted data and store it in a file under the news directory.

In this file we will create a HTML form and it's PHP process back-end. This is the quite usual way to create forms. First focus on the HTML part of the code. Here we create a normal HTML document with a form. To make it easy we only add to item to the form. One textfield for the post title and one textarea for the post itself.

And here is the first interesting part. How to integrate the WYSIWYG editor in the code. Fortunately it is quite easy. We only need to extend the HTML head area a bit and add the TinyMCE initialisation code. You need to add the following code inside the head part:

tinyMCE.init({ mode : "textareas", theme : "advanced",
theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",});

In this tutorial I don't focus more on the editor settings. As we have our form we need to create the PHP processing code to it. We can do it by checking the $_POST array and if the visitor submitted the form we will process the data. First we get the title and the post content from the $_POST array and besides this get the actual time. As we have this information we will create a file where we use the actual time as file name.

(In case of high traffic it is not a good solution as more submission can come in at once however I think for this tutorial this solution is sufficient.)

As next step we open the file and write the title in the first line, the time in the second and the post text comes next. With this structure we can later read back the correct values. See it later. Afterwards we close the file and redirect the user to the main page where he/she can see the latest news.

The processing code looks like this:

$newsTitel = isset($_POST['title']) ? $_POST['title'] : 'Untitled';
$submitDate = date('Y-m-d g:i:s A');
$newsContent = isset($_POST['newstext']) ? $_POST['newstext'] : 'No content';

$filename = date('YmdHis');
$f = fopen('news/'.$filename.".txt","w+");
fwrite($f,$newsTitel."\n");
fwrite($f,$submitDate."\n");
fwrite($f,$newsContent."\n");
fclose($f);

header('Location:index.php');
?>

On the next page I will show you how to display the existing messages.

[newpage=The news page]

Now we are able to post news and store them in the filesystem. However it is important to display the posts as well. To do this we will create a new file, let's say index.php which is responsible for displaying posts on the screen.

This code needs to check the news directory, read all files in it and displays the content. First of all we need to create a function which collects all available files from the news directory and after the list should be sorted to display news in chronological order. To do this we use opendir and readdir functions and we put all names into an array which is not a directory. When all files were processed we sort the array. The function is quite simple:

function getNewsList(){

$fileList = array();

// Open the actual directory
if ($handle = opendir("news")) {
// Read all file from the actual directory
while ($file = readdir($handle)) {
if (!is_dir($file)) {
$fileList[] = $file;
}
}
}

rsort($fileList);

return $fileList;
}
?>

Now it's time to display the posts. Se we create a HTML page where we will put the messages in a table. In the first row we will display the post title and the time. Next we pot the post content in a new row. We repeat this steps for each file.

To read back posts we use the file function which reads the file content into an array. Each line will be a separate array element. As we put title in the first line and the time in the second line so we know that the first 2 lines contains important information. We will save it in an other variable and the remove the first 2 elements from the array. Next we will walk through the array and concatenate lines into a string. Now we have the 3 important variable and so we can display them and go back and take the next file.

The code which processes and displays the files looks like this:

$list = getNewsList();
foreach ($list as $value) {
$newsData = file("news/".$value);
$newsTitle = $newsData[0];
$submitDate = $newsData[1];
unset ($newsData['0']);
unset ($newsData['1']);

$newsContent = "";
foreach ($newsData as $value) {
$newsContent .= $value;
}

echo "$newsTitle
$submitDate";
echo "".$newsContent.
"

That's all.

Download:

You can download a small news system from the download section.

Full code:

On the next page you can find the full source code of the admin.php and index.php

[newpage=Full source code]

admin.php

if (!isset($_POST['submit'])) {

?>






tinyMCE.init({ mode : "textareas", theme : "advanced",
theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",});

index.php

// This function reads all available news
function getNewsList(){

$fileList = array();

// Open the actual directory
if ($handle = opendir("news")) {
// Read all file from the actual directory
while ($file = readdir($handle)) {
if (!is_dir($file)) {
$fileList[] = $file;
}
}
}

rsort($fileList);

return $fileList;
}

?>