Giving Your Client Control of a Chalk Board on a Web Site

Published:
Updated:
A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would create a generalized case that illustrated the principles.  There are five parts to this application.  

A Background Image that Looks Like a Chalk Board
First, there is a background image that sets the stage for the messages.  In this case we wanted to use white writing on a black chalk board.  I found an open-source image of a chalk board and used Photoshop to resize it to 350 pixels wide and 450 pixels high.  I named it chalkboard_background and stored it in the form of a png image. The background image - a traditional wood-framed chalk board.Our Very Simple Data Model
Second, there is a data storage requirement.  In this case, there is very little data to be stored - just a string of text that we will write on the chalk board.  I created a little text file on the server and named it chalkboard.txt.  It can be anywhere that makes sense for your application needs, so long as its permission set makes it writable by PHP.

A Chalkboard Class
Third, there is a need for a Chalkboard class to encapsulate our data and functions.  The class has three methods - a constructor, a render and an update.  Let's look at each one separately.  

The Class Constructor
The constructor starts on line 6 and does most of the work of the class.  We define three variables: file is the URL of our little text file, pass is the password that our client must enter to update the chalkboard, and size is the maximum length of the text.  Having client authentication limited to a hardcoded password is not very sophisticated, but it will work for our simple needs because only one client will ever need to update the text on this chalk board.

Next we load the current contents of the chalkboard.txt file and perform the nl2br() conversion that enables us to preserve line feeds in the rendered text.  Note that we do not store the
tags in the data base - we just store the text exactly (or very closely) as our client created it.

On line 18 we use heredoc syntax to create a CSS string that will apply styling to our chalkboard elements.  There are three tags we want to style, div, textarea, and p.  Our CSS lets us put the dark chalkboard_background image behind our text, which is written in white.  We arrived at the dimensions for the padding and width through a little trial and error.  These seemed to be happy values when we tested in IE8 and Firefox.  You can learn more about heredoc syntax on the PHP.net man page.  It is a very useful way of defining a string because it allows variable substitution without a lot of extraneous punctuation.
http://php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

On line 44 we use heredoc syntax again to create the chalkboard div.  It incorporates the contents of the chalkboard_text variable and it wraps this string in the styled HTML tags.

The Render() Method
This function on line 53 is only two statements long!  It echoes the CSS string into the browser output stream.  And it echoes the chalkboard div into the browser output stream.  What could be simpler?

The Update() Method
This function starts on line 60.  If there is an update in $_POST we check the password, do a little housekeeping on the new text and write it into our little chalkboard.txt file (line 70).  If the password test fails, we simply die without any further action.  Again, not very sophisticated but adequate to our needs in this application.

On line 78 we use heredoc syntax again, this time to create a form with the most recent chalk board text incorporated.  Since we assign the id="chalkboard" attribute to this textarea, it will be styled almost exactly the same way the chalkboard div is styled.  Thus our client sees a fairly faithful representation of the final chalk board.

On line 90 we echo the CSS string and the form into the browser output stream.  Our class is now complete.
<?php // class_chalkboard.php
                      error_reporting(E_ALL);
                      
                      Class Chalkboard
                      {
                          public function __construct()
                          {
                              // DEFINE OUR LOCAL VARIABLES
                              $this->file = 'chalkboard.txt';
                              $this->pass = 'Murray';
                              $this->size = 380;
                      
                              // LOAD THE CHALKBOARD TEXT
                              $this->chalkboard_text = @file_get_contents($this->file);
                              $this->chalkboard_text = nl2br($this->chalkboard_text);
                      
                              // CREATE THE STYLE SHEET
                              $this->chalkboard_css = <<<CHALKCSS
                      <style type="text/css">
                      #chalkboard {
                          border:0px;
                          margin:0px;
                          padding:0px;
                          width:350px;
                          height:450px;
                          padding:50px;
                          overflow:hidden;
                          background-image:url("chalkboard_background.png");
                          background-repeat:no-repeat;
                          font-family:"Comic Sans MS", cursive, sans-serif;
                          font-size:1.1em;
                          color:white;
                      }
                      #chalkboard p {
                          border:0px;
                          margin:0px;
                          padding:0px;
                          width:250px;
                      }
                      </style>
                      CHALKCSS;
                      
                              // CREATE THE DIV FOR THE CHALKBOARD
                              $this->chalkboard_div = <<<CHALKDIV
                      <div id="chalkboard">
                      <p>$this->chalkboard_text</p>
                      </div>
                      CHALKDIV;
                      
                          } // END CONSTRUCTOR
                      
                      
                          public function render()
                          {
                              echo $this->chalkboard_css;
                              echo $this->chalkboard_div;
                          } // END RENDER
                      
                      
                          public function update()
                          {
                              // IF THE DATA IS POSTED
                              if (!empty($_POST))
                              {
                                  if ($_POST["chalkboard_pass"] == $this->pass)
                                  {
                                      $this->chalkboard_text = trim(stripslashes($_POST["chalkboard_text"]));
                                      $this->chalkboard_text = strip_tags($this->chalkboard_text, '<b><i><br>');
                                      $this->chalkboard_text = substr($this->chalkboard_text, 0, $this->size);
                                      file_put_contents($this->file, $this->chalkboard_text);
                                  }
                                  else
                                  {
                                      die("{$_POST["chalkboard_pass"]} IS NOT THE RIGHT PASSWORD");
                                  }
                              }
                      
                              // CREATE THE FORM TO RECEIVE THE CHALKBOARD CONTENTS
                              $this->chalkboard_form = <<<CHALKFORM
                      <form method="post">
                      <textarea name="chalkboard_text" id="chalkboard">$this->chalkboard_text</textarea>
                      <br/>
                      Password: <input type="password" name="chalkboard_pass" />
                      <br/>
                      <input type="submit" value="Update the Chalkboard" />
                      </form>
                      CHALKFORM;
                      
                              // ECHO THE STYLESHEET AND FORM INTO THE BROWSER STREAM
                              echo $this->chalkboard_css;
                              echo $this->chalkboard_form;
                      
                          } // END UPDATE
                      } // END CLASS ChalkBoard

Open in new window


Using the Class to Render the Contents of a Chalk Board
Yes, it really is this easy!
<?php // chalkboard_render.php
                      error_reporting(E_ALL);
                      
                      require_once('class_chalkboard.php');
                      $c = new Chalkboard;
                      $c->render();

Open in new window


Using the Class to Update the Contents of a Chalk Board
Yes, it really is this easy, again!
<?php // chalkboard_update.php
                      error_reporting(E_ALL);
                      
                      require_once('class_chalkboard.php');
                      $c = new Chalkboard;
                      $c->update();

Open in new window


How it All Looks in Action
Here are three screen shots from Firefox showing the way our class works.  On the left is the output from the render() method.  In the center, we have called the update() method and highlighted some text to change.  After we have typed our updates, you can see the new text in the update window on the right.  Since the render() method would be called on each page load, our client's updates are instantaneous!Three images showing the rendered chalk board, and the update processWhat Just Happened
With just a few lines of code we solved a multitude of problems.  We gave our client a way to control an important part of her web site.  We made it password protected and thus reduced the risk of "accidental" updates (although we could have been much more sophisticated about client authentication).  We made it look nice, both in the rendered version and in the HTML update form.  We kept our web site and FTP passwords away from the client, so the rest of our web scripts remain safe.  And we did it in OOP notation, so there is little risk of variable name collisions when we integrate this sample code into the rest of the site.

Please give us your feedback!
If you found this article helpful, please click the "thumb's up" button below. Doing so lets the E-E community know what is valuable for E-E members and helps provide direction for future articles.  If you have questions or comments, please add them.  Thanks!
 
6
8,294 Views

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.