Monthly Archive for June, 2013

PHP Graphic CMS Class with Template Method

uploadLoad Up the Graphic Files

In Part IV of the Content Management System (CMS) series, I noted that I wanted to have a separate post on uploading graphics to a web server. This post addresses the issues involved in getting graphics in place on a web server that will be included in a Web page, whether you’re using a CMS or not. In the case of selecting a graphic from your desktop and uploading it to a server, most of the important work is done by HTML. So, we’ll start with the HTML assuming that HTML5 is in use. Be advised at the outset that you will need to do a little system administration to set your file privileges in the folders where you will store the graphic files. In the development process, I used a local host, a different computer on my LAN, and two different web servers at remote locations.

Choosing a File to Upload

HTML5 (and possibly earlier versions) has some very nice built-in form attributes that make selecting a graphic file from your computer to place in an “uploadable” state quite easy. All you need are a couple of lines of HTML. Within a form container, the line:

generates the following button when you load the code into a browser:

In the

tag, you will need to include an enctype assignment:

That’s about it, and you’re all set to select a file that can be accessed through the PHP superglobal variable $_FILES.

The following HTML code generates the CSS first the then HTML portion of the little graphic CMS:

@charset "UTF-8";
/* CSS Document */
/* upload.css */
body
{
    font-family: Verdana, helvetica, arial, futura, sans-serif;
    color:#991C00;
    background-color:#FFFCDB; 
}
 
h1
{
    font-family: "Arial Black", futura, sans-serif;
    color:#E09A25;
    background-color:#262B30;
    text-align: center;
}
?View Code HTML
< !doctype html>

    
        
            
        Catalog Files
    

    

Graphic File Loader

Click the 'Choose File' button to browse your local drive for files to upload:

Once you have chosen a file, click the 'Load Graphic File' button to upload the file to your web server:

I added separation between the Choose File button and Load Graphic File submit button so that the HTML and PHP portions are more clearly defined. Figure 1 shows the initial web page for the upload:

Figure 1: Selecting and calling PHP Script

Figure 1: Selecting and calling PHP Script

Since the goal of having a CMS is to make updates simple, this initial example does not have any whistles and bells (e.g., folder selection), and it does nothing more than to prepare a selected file for upload to a server.

A Little PHP

On the PHP side of the equation, you have only two code elements:

  1. $_FILES: Superglobal array with selected file information in elements
  2. move_uploaded_file(): Stores uploaded file (in $_FILES) to in specified server location.

Creating a class, using the minimum code and no error, type or size checking, is quite simple. To keep it even simpler, the following trigger script instantiates the Upload class:

< ?php
//triggerUpload.php
include_once("Upload.php");
$worker = new Upload();
?>

After testing the initial Upload class, we’ll see how it can be enhanced. First, though, take a look at the code:

< ?php
//Upload.php
class Upload
{
    private $fileNow;
    public function __construct()
{
        if ($_FILES)
        {
            $this->fileNow=$_FILES["file"]["name"];
 
            //The following line does all the work
            move_uploaded_file($_FILES["file"]["tmp_name"],"images/$this->fileNow");
 
            echo $this->fileNow . " has been uploaded to the images folder:";
        }
    }
}
?>

That simple class does everything you need to upload and store a file in a folder named “images” in the directory where the script is launched. It’s pretty basic, but you should be able to see exactly what is required to upload a file to a web server without having to use an FTP client.

Template Method for Details

Note: Before you get started on this section, download all of the files that are involved:
Download

As you saw, the Upload class is quite easy. However, you will want to make sure that not just any file type is loaded and you’ll want to make sure that you don’t have giant files loaded that may fill up your disk space. (You also want to protect against maliciously uploaded files.) The $_FILES array has information to use for checking type and size. Using the $_FILES array information we can boil the process down to three steps:

  1. checkSize(); See how big it is and compare to a maximum allowable size.
  2. checkType(); Add a set of acceptable file types used with a Web page and check to see if the file type is acceptable.
  3. uploadFile(); If the file type and size are okay, upload the file.

Click below to continue:
Continue reading ‘PHP Graphic CMS Class with Template Method’

PHP CMS Project Part IV: La Petite Blog

cms4Bring in the MySql

At this stage there is still no design pattern in the project. You will see that re-use is starting to creep in, and we’re getting to the point where some decisions can be made about what design pattern would best fit this project. In Part V, you will see how a design pattern pulls everything together and why one is helpful to PHP programming.

In Part III of this series, you saw how external data from text files can be placed into an array and used by the DocHere class to populate a web page. In this installment, the same process shows how this can be done using data from a MySql database.

From Data Input to Web Page Display

The whole point of a CMS is to make updating a web site or blog easy. For the time being, I’m going to treat the web page example as a little blog–La Petite Blog. Figures 1 and 2 show how the data are to be entered and the end result pulled out of a database and displayed in the web page.

Figure 1: HTML form to send data to MySql database

Figure 1: HTML form to send data to MySql database

Figure 1 shows that the same categories of data used throughout the project are still in use. Even the CSS file is the same. The form is a simple HTML5 one. (Click View Code to see listing.)

?View Code HTML
< !doctype html>


    
    
    Blogette Data Entry


La Petite Blog

 Enter data to update your blogette

 CSS file  Title  Header 1  Header 2  Image 1 file name  Image 2 file name  Caption for Image 1  Caption for Image 2

The “entry” for the system is the class RetrieveBlog. It is almost identical to the Content class in Part III, and it generates the required results as shown in Figure 2.

Figure 2: Page content from database.

Figure 2: Page content from database.

Getting from the HTML5 data input to the PHP-generated web page takes a bit of doing, and so to get started, download the necessary files:
Download

From Data Input to Web View

The whole point of a CMS is to regularly update a web page easily. By the end of this stage, the only thing you’ll need with an FTP client for is to upload graphics. (Uploading graphic files from a web page using PHP is handled up an upcoming post apart from this series.) For now, though, you will be able to update all text in a web page as well as graphics are have already been placed in an image folder. Here’s what we’ll need:

  1. An HTML form for data entry (see above)
  2. A PHP class to create a MySQL Table to store data
  3. A PHP class to take the data from the HTML form and store it in the MySQL table
  4. A PHP class to retrieve the data from the and make it available to the web page

We’ll start with the table.
Continue reading ‘PHP CMS Project Part IV: La Petite Blog’

PHP CMS Project Part III: Going External

cms3Solve Once; Use Often

One of the goals, indeed the purpose, of most OOP is to solve a programming problem one time and then re-use it. The idea of re-using code is not so much cutting and pasting code as it is to have a good solution and use the same solution for similar problems. In a larger context, that’s exactly what design patterns do. So far in this CMS series, we have not had to add much to the original DocHere class or to the CSS file. In this step, the only class you will need to change is the Content class developed in in Part II of the PHP CMS Series.

The sample page content has been changed, but all of the new data are from external sources (not unlike the graphics and CSS.) Figure 1 shows the new data in the old page:

Figure 1: All of the data are from external sources of both the PHP files and Web page.

Figure 1: All of the data are from external sources of both the PHP files and Web page.

As you can see, everything in the page is in the original style and arrangement. That’s the way it’s supposed to be. All that’s going on is changing data to an existing Web page. The difference in this step is that all of the data are stored in text or graphic files external to the Web page and PHP objects. Everything in this installment is identical to the classes in Part II. All you will need to do is to make some changes in the Content class. The class still uses the same associative array to pass data to the Web page; however, instead of getting its data from literals in the Content class, it gets content from external text files.

Getting Content from the Outside

Before looking into more complex (and robust) ways of adding and/or changing content in a Web page, consider how simple it is using humble text files. Figure 2 shows how the data from an external source becomes the value in a key-value pair in an associative array:

Figure 2: Substituting external text file data for literal value in associative array.

Figure 2: Substituting external text file data for literal value in associative array.

So all that needs to be done with the Content class is to make changes so that it now picks up the data for the Web page from external sources. Actually, every time the Content class has loaded a graphic, it got the data from an external file—a URL. So, all this does is the same thing you’ve done with graphics but with text data.


include_once('PageMaster.php');
class Content extends PageMaster
{
    private $title;
    private $header1;
    private $header2;
    private $body1;
    private $body2;
    private $caption1;
    private $caption2;
 
    public function getContent()
    {      
        $this->loadContent();
        $this->content = array("css" => "heredoc.css",
                         "title" => $this->title,
                         "header1" => $this->header1,
                         "header2" => $this->header2,
                         "body1" => $this->body1,
                         "body2" => $this->body2,
                         "image1" => "images/bobbed.png",
                         "image2" => "images/daraculaCar.png",
                         "caption1" => $this->caption1,
                         "caption2" => $this->caption2,
                         );   
        return $this->content;
    }
 
    private function loadContent()
    {
        $this->title = file_get_contents('text/title.txt');
        $this->header1 = file_get_contents('text/header1.txt');
        $this->header2 = file_get_contents('text/header2.txt');
        $this->body1 = file_get_contents('text/body1.txt');
        $this->body2 = file_get_contents('text/body2.txt');
        $this->caption1 = file_get_contents('text/caption1.txt');
        $this->caption2 = file_get_contents('text/caption2.txt');
    }
}
?>

All of the content for the page must be placed in text files with the appropriate names. Simply writing what you want to appear in the Web page will do the trick. You can use HTML tags in the text files as well, but remember that all you want is to add content; not structure. Using the image in Figure 1, you should be able to determine what goes in each text file.

As you can see very little had to be done to change the Content class so that it works with external data instead of literals assigned to associative array elements. Eventually, this project will lead to using a database, but for now, each step is one at a time.

Adding a Class for Loading Data

It would be pretty easy to make a LoadContent class from the loadContent() method. Then there would be an object to have the data ready for content use by the Web page and a separate one to load the data used for content. In Part IV, the CMS looks at a separate data loading class and what advantages it would have.