Write a comment on this article

Advanced shoutbox

< back to tutorials main page

This tutorial requires the tutorial Shoutbox.

We will now extend our shoutbox with some little features:

  1. Faster input - when the visitor clicks on an input field, the label is cleared and the user can write immediately.
  2. Breaking long words - when the visitor writes a very long word, it will be broken after a specific number of characters. This makes sense to keep the layout from being destroyed.
  3. Refresh lock - prevent duplicate entries when the visitor refreshes the page.
  4. Prevent HTML - HTML tags should be replaced.
  5. Quotation marks - Backslashes before quotations marks should be removed.

First things first: faster input. This for we change the HTML form adding onfocus and onblur events:

<input type="text" value="Your name" name="input_name" maxlength="<?php echo $maxlength_name; ?>"
       onfocus="if(this.value=='Your name'){this.value='';}"
       onblur="if(this.value==''){this.value='Your name';}" /><br />
<input type="text" value="Your text" name="input_text" maxlength="<?php echo $maxlength_text; ?>"
       onfocus="if(this.value=='Your text'){this.value='';}"
       onblur="if(this.value==''){this.value='Your text';}" /><br />
select code
 

Done. Next step: breaking long words. We will need a function which checks if there are long words in a text and breaks them if necessary. This function looks like this:

function str_break($str,$maxlen){
  $nobr = 0;
  $len = strlen($str);

  for($i=0;$i<$len;$i++){
    if(($str[$i]!=' ') && ($str[$i]!='-') && ($str[$i]!="\n")){
      $nobr++;
    }else{
      $nobr = 0;

      if($maxlen+$i>$len){
        $str_br .= substr($str,$i);
        break;
      }
    }
      
    if($nobr>$maxlen){
      $str_br .= ' '.$str[$i];
      $nobr = 1;
    }else{
      $str_br .= $str[$i];
    }
  }
    
  return $str_br;
}
select code
 

Variable $maxlen defines the maximum length of a string without whitespaces. We insert this function at the very beginning of our script but we will use it later on.

Here comes step 3: refresh lock. In case the visitor just submitted the form and then he refreshes the page, the same values would be submitted again. In this case, we check if the last shout equals the one the visitor just submitted.

//get last name and comment
$handle = fopen($file,"r");

while(!feof($handle)){
  $row = fgets($handle,999999);
  list($tmp_name,$tmp_text) = split("\|\|\|\|\|",$row);

  if($tmp_name != "" && $tmp_text != ""){
    $last_name = $tmp_name;
    $last_text = str_replace("\n","",$tmp_text);
  }
}

fclose($handle);
select code
 

Now we can use our selfmade function str_break to check the input. This will finish step 2.

$input_name = str_break($input_name,$break_name);
$input_text = str_break($input_text,$break_text);
select code
 

With step 4 we will prevent HTML. This is done quite easily with the function str_replace. We just need to replace angle brackets:

$input_name = str_replace("<","&lt;",$input_name);
$input_name = str_replace(">","&gt;",$input_name);
$input_text = str_replace("<","&lt;",$input_text);
$input_text = str_replace(">","&gt;",$input_text);
select code
 

Last step: quotation marks. Quotations marks written by the visitor are prefixed with a backslash. This doesn't look quite nice. With the help of the function stripslashes we can remove these backslashes easily.

$input_name = stripslashes($input_name);
$input_text = stripslashes($input_text);
select code
 

In a simple if-statement we check if the submitted name and text equal the last ones. This finished step 3.

if($last_name != $input_name || $last_text != $input_text){
  $handle = fopen($file,"a"); //open shouts file to write (append)
  fputs($handle,"$input_name|||||$input_text\n"); //insert name and shout
  fclose($handle); //close file handle
}
select code
 

That's it. Reading the shouts file and printing the HTML remains the same as in the normal shoutbox. So now we have extended our shoutbox with some useful features although it still looks the same.

You can try this script here: demos/Advanced_Shoutbox/index.php. Or download it here: Advanced_shoutbox_1-0.zip

< back to tutorials main page

Tags

PHP, tutorial, shoutbox, advanced

Comments (0)

Leave a comment

If you have a question or a problem and you're looking for a solution, please use the forum. Comments might not be answered.

Your name (required, maximum 255 characters) ( remember)
Your message (required, maximum 5000 characters)
 
Insert these letters into the textfield below: RAQO (required, case-sensitive)
Drag the slider to the right (required)