How to create a basic news system

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.