PHP Tutorials By Kloplop321 » posting

PHP & MySQL Tutorial 14: Editing on a blog — The fancy way

Kloplop321 — Tue, 17 Aug 2010 02:58:17 +0000

This tutorial goes over implementing editing, and modifying the posting page to use a really cool in-page content editor, CKEditor!
So, here are the goals for today:

Implement the Fancy Editor into posting
Create a way to edit based on the posting

Now, it doesn’t sound like that is much to do, but as I explain it in depth, you will understand that there is more process to such implementation than what two bullet points can convey.
So, here is the recording(total ~ 25 minutes), there are two parts so please make sure you click on Read More to see the download-able sources along with part 2.

At this point the blog system has the ability to show all the posts in order of date of modification/post, to show posts individually, and to make new dull plain-text posts… That’s about it.
So, first you can get CKEditor(not included in my sources download), so get it here and proceed.

If you wish to get the sources before all the modification was done on this tutorial, please go to PHP MySQL Tutorial 13: Posing on a blog and download the sources as provided at the bottom, so that you may be able to code with me step by step.

Now that we have that business taken care of, we need to proceed and make the modifications.
The first step is that we need to look at one of the samples on how to implement the CKEditor. You may see one under ckeditor/_samples/php/ in the ckedior download. I happened to select the “advanced.php” that has extra settings like width and height.
From there, I simply copied the sources that initiated the ckeditor class and presented the code into put.php

   1
   2    include(“connect.php”);
   3    if(isset($_POST['sub'])){
   4        $title = stripslashes(trim($_POST['title']));
   5        $content = stripslashes(trim($_POST['content']));
   6        $title2 = $title;
   7        $content2 = $content;
   8        $error = false;
   9        $reason = ”;
  10        if(strlen($title) < 3){
  11            $error = true;
  12            $reason .= “Bad Title.\n”;
  13        }
  14        if(strlen($content) < 3){
  15            $error = true;
  16            $reason .= “Bad Post Content.\n”;
  17        }
  18        if(!$error){
  19            $title = mysql_real_escape_string($title);
  20            $content = mysql_real_escape_string(stripslashes($content));
  21            $sql = “INSERT INTO `posts` (`ID`, `username`, `title`, `content`, `date`) VALUES
  22    (NULL, ”.$_SESSION['userid'].“, ’$title‘, ’$content‘, ”.time().“)”;
  23            mysql_query($sql);
  24            if(mysql_errno()){
  25                $reason .= mysql_error();
  26            }else{
  27                header(“location: blog.php”);
  28            }
  29        }else{
  30
  31        }
  32
  33    }
  34    include(“ckeditor/ckeditor.php”);
  35
  36    // Create class instance.
  37    $CKEditor = new CKEditor();
  38
  39    // Do not print the code directly to the browser, return it instead
  40    $CKEditor->returnOutput = true;
  41
  42    // Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
  43    //   $CKEditor->basePath = ’/ckeditor/’
  44    // If not set, CKEditor will try to detect the correct path.
  45    $CKEditor->basePath = ‘ckeditor/’;
  46
  47    // Set global configuration (will be used by all instances of CKEditor).
  48    $CKEditor->config['width'] = 600;
  49
  50    // Change default textarea attributes
  51    $CKEditor->textareaAttributes = array(“cols” => 80, “rows” => 10);
  52
  53    // The initial value to be displayed in the editor.
  54    $initialValue = ‘

Put in some content

’;
  55    if(strlen($content2) > 0){
  56        $initialValue = $content2;
  57    }
  58    // Create first instance.
  59    $code = $CKEditor->editor(“content”, $initialValue);
  60    echo ‘’;
  61    ?>
  62
  63    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  64    <head>
  65        <title>Blog titletitle>
  66        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
  67    head>
  68    <body>
  69        <div class=“maincontent”>
  70            <div class=“top”>
  71                Blog titlediv>
  72            <div class=“postform”>
  73                <form method=“POST” action=“?”>
  74                    Title: <input type=“text” name=“title” id=“postformtitle” value=“
  75                    if(isset($title2)){
  76                        echo htmlentities($title2);
  77                    }
  78                    ?>“ /><br />
  79                    Main Content:<br />
  80
  81                    echo $code;
  82                    ?><br />
  83                    <input type=“submit” value=“Send!” />
  84                    <input type=“hidden” name=“sub” value=“1″ />
  85                form>
  86                <div class=“errors”>
  87
  88                    if(isset($reason)){
  89                        echo $reason;
  90                    }
  91                    ?>
  92                    div>
  93            div>
  94        div>
  95    body>
  96    html>

As you can see here
  34    include(“ckeditor/ckeditor.php”);
  35
  36    // Create class instance.
  37    $CKEditor = new CKEditor();
  38
  39    // Do not print the code directly to the browser, return it instead
  40    $CKEditor->returnOutput = true;
  41
  42    // Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
  43    //   $CKEditor->basePath = ’/ckeditor/’
  44    // If not set, CKEditor will try to detect the correct path.
  45    $CKEditor->basePath = ‘ckeditor/’;
  46
  47    // Set global configuration (will be used by all instances of CKEditor).
  48    $CKEditor->config['width'] = 600;
  49
  50    // Change default textarea attributes
  51    $CKEditor->textareaAttributes = array(“cols” => 80, “rows” => 10);
  52
  53    // The initial value to be displayed in the editor.
  54    $initialValue = ‘

Put in some content

’;

I included the file that ckeditor provided me which contained a php class(an object that has several interrelated properties and functions using Object Oriented Programming(I’ll make a tutorial on this later)), and then used the included functions to create the editor html.

I also added a stripslashes function(removes extra backslashes as a result of sending over http headers) to the content variable before it went into the mysql database.

Then comes the second goal: Implement Editing.
Really, all I did was copy the file of put.php, saved it as edit.php and changed a few things, like how variables are first gathered(using sql from post.php), did some preservation tricks, and it al worked. Only change is that when I make a change via edit.php, it moves the changed post to the top because I modified its date. That can be fixed by ordering by post ID, but that is for a later time.
   1
   2    include(“connect.php”);
   3    $postid = (int)trim($_REQUEST['post']);
   4    if(!isset($_POST['sub'])){
   5
   6        $sql = “SELECT posts.ID as `ID`,
   7        users.postname as `postname`,
   8        posts.title as `title`,
   9        posts.content as `content`,
  10        posts.date as `date`
  11
  12        FROM posts
  13
  14        INNER JOIN users
  15
  16        ON users.ID = posts.username
  17
  18        WHERE posts.ID = $postid
  19        ORDER BY date DESC”;
  20        $result = mysql_query($sql);
  21        $postdata = array();
  22        while($row=mysql_fetch_array($result)){
  23                $postdata = $row;
  24        }
  25        $title2 = $postdata['title'];
  26        $content2 = $postdata['content'];
  27    }
  28
  29
  30
  31    if(isset($_POST['sub'])){
  32        $title = stripslashes(trim($_POST['title']));
  33        $content = stripslashes(trim($_POST['content']));
  34        $title2 = $title;
  35        $content2 = $content;
  36        $error = false;
  37        $reason = ”;
  38        if(strlen($title) < 3){
  39            $error = true;
  40            $reason .= “Bad Title.\n”;
  41        }
  42        if(strlen($content) < 3){
  43            $error = true;
  44            $reason .= “Bad Post Content.\n”;
  45        }
  46        if(!$error){
  47            $title = mysql_real_escape_string($title);
  48            $content = mysql_real_escape_string(stripslashes($content));
  49            $sql = “UPDATE `posts` SET `title` = ’$title‘,

  50    `content` = ’$content‘, `date` = ”.time().“ WHERE `ID` =”.$postid.“;”;
  51            mysql_query($sql);
  52            if(mysql_errno()){
  53                $reason .= mysql_error();
  54            }else{
  55                header(“location: blog.php”);
  56            }
  57        }else{
  58

  59        }
  60

  61    }
  62    include(“ckeditor/ckeditor.php”);
  63
  64    // Create class instance.
  65    $CKEditor = new CKEditor();
  66
  67    // Do not print the code directly to the browser, return it instead
  68    $CKEditor->returnOutput = true;
  69
  70    // Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
  71    //   $CKEditor->basePath = ’/ckeditor/’
  72    // If not set, CKEditor will try to detect the correct path.
  73    $CKEditor->basePath = ‘ckeditor/’;
  74
  75    // Set global configuration (will be used by all instances of CKEditor).
  76    $CKEditor->config['width'] = 600;
  77
  78    // Change default textarea attributes
  79    $CKEditor->textareaAttributes = array(“cols” => 80, “rows” => 10);
  80
  81    // The initial value to be displayed in the editor.
  82    $initialValue = ‘

Put in some content

’;
  83    if(strlen($content2) > 0){
  84        $initialValue = $content2;
  85    }
  86    // Create first instance.
  87    $code = $CKEditor->editor(“content”, $initialValue);
  88    echo ‘’;
  89    ?>
  90

  91    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  92    <head>
  93        <title>Blog titletitle>
  94        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
  95    head>
  96    <body>
  97        <div class=“maincontent”>
  98            <div class=“top”>
  99                Blog titlediv>
100            <div class=“postform”>
101                <form method=“POST” action=“?”>
102                    Title: <input type=“text” name=“title” id=“postformtitle” value=“
103                    if(isset($title2)){
104                        echo htmlentities($title2);
105                    }
106                    ?>“ /><br />
107                    Main Content:<br />
108
109                    echo $code;
110                    ?><br />
111                    <input type=“submit” value=“Send!” />
112                    <input type=“hidden” name=“sub” value=“1″ />
113                    <input type=“hidden” name=“post” value=“ echo $postid; ?>“ />
114                form>
115                <div class=“errors”>
116
117                    if(isset($reason)){
118                        echo $reason;
119                    }
120                    ?>
121                    div>
122            div>
123        div>
124    body>
125    html>

Anyway, here’s the sources, the base source zip archive, and again, the ckeditor zip archive.

PHP & MySQL Tutorial 13: Posting on a Blog

Kloplop321 — Wed, 07 Jul 2010 23:51:14 +0000

This tutorial in essence goes over implementing posting and inserting data into a database, along with data validation for the blog. This one also extends on Tutorial 10, 11, 12, so please check those out if you have not.
Here’s the plan:

Make a page for posting
Make a form
Get the SQL for inserting
Prepare and validate data
Test page functionality
Finalize and clean up

Part 1:

Make sure to click on Read More so that you may see Part 2 and the sources.

Part 2:

So, back to the plan, I created the page to post from, and named it “put.php” and modeled the HTML from blog.php. I then put a form for posting in the put.php. At this point, I now have the static page done. By static, I mean that the part of the page that isn’t supposed to change. So, at this point, I need to put in the dynamic part into the page.
Here’s put.php so you may refer to it.
   1
   2    include(“connect.php”);
   3    if(isset($_POST['sub'])){
   4        $title = stripslashes(trim($_POST['title']));
   5        $content = stripslashes(trim($_POST['content']));
   6        $title2 = $title;
   7        $content2 = $content;
   8        $error = false;
   9        $reason = ”;
  10        if(strlen($title) < 3){
  11            $error = true;
  12            $reason .= “Bad Title.\n”;
  13        }
  14        if(strlen($content) < 3){
  15            $error = true;
  16            $reason .= “Bad Post Content.\n”;
  17        }
  18        if(!$error){
  19            $title = mysql_real_escape_string($title);
  20            $content = mysql_real_escape_string($content);
  21            $sql = “INSERT INTO `posts` (`ID`, `username`, `title`, `content`, `date`) VALUES
  22    (NULL, ”.$_SESSION['userid'].“, ’$title‘, ’$content‘, ”.time().“)”;
  23            mysql_query($sql);
  24            if(mysql_errno()){
  25                $reason .= mysql_error();
  26            }else{
  27                header(“location: blog.php”);
  28            }
  29        }else{
  30
  31        }
  32
  33    }
  34
  35    echo ‘’;
  36    ?>
  37
  38    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  39    <head>
  40        <title>Blog titletitle>
  41        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
  42    head>
  43    <body>
  44        <div class=“maincontent”>
  45            <div class=“top”>
  46                Blog titlediv>
  47            <div class=“postform”>
  48                <form method=“POST” action=“?”>
  49                    Title: <input type=“text” name=“title” id=“postformtitle” value=“
  50                    if(isset($title2)){
  51                        echo htmlentities($title2);
  52                    }
  53                    ?>“ /><br />
  54                    Main Content:<br />
  55                    <textarea name=“content” id=“postformcontent” cols=“40″ rows=“4″>
  56                    if(isset($content2)){
  57                        echo htmlentities($content2);
  58                    }
  59                    ?>textarea><br />
  60                    <input type=“submit” value=“Send!” />
  61                    <input type=“hidden” name=“sub” value=“1″ />
  62                form>
  63                <div class=“errors”>
  64
  65                    if(isset($reason)){
  66                        echo $reason;
  67                    }
  68                    ?>
  69                    div>
  70            div>
  71        div>
  72    body>
  73    html>

As you see, I am using the isset((some form variable here)) thing to see if any data is being submitted. Within the code block (lines 4-32), I prepare the data by using both trim and stripslashes to clean up the content. The most important part is the strip slashes. For if I do not use it, a statement like
Hello “My Dear”
Will end up in the variable as
Hello \”My Dear\”

Obviously, a dirty escape is not what we want to show the user. Handling data like this can be very infuriating if you do not initially handle issues like this.
Furthermore, I duplicate the title and content variables so that the now-unescaped content could be fed back into the form if an error occurred. Then I do further data validation. In my case, I don’t want a post without any content, or a title. Therefore, preventative action is used so I will not end up with an undesired result.
Next, if all my tests are good, then I try to post the content using SQL INSERT. I grabbed the SQL to base it on from a table export, which uses similar syntax, I just needed to modify the example to fit my needs for new dynamic content.

However, when an error has occurred, I need to feed the data back in so the user doesn’t have to type everything back in. Ever had that happen? If you have had that happen because of something like “Oh noes, your session is over!”, I bet you found it really disheartening. Well, don’t make it happen to your users because a database problem happened, or they made a mistake on their side by forgetting a title. Make your systems forgiving!
So, this is why I had those duplicate variables. I can safely put these back into the page by using htmlentities to convert all special characters to their HTML form, as to act as text, and not literal text. Literal text can have other effects, like putting in Friendly cute puppies into the post, if it did not have htmlentities, it would allow problematic issues to arise.

Other than that, all I did to any other file, was add a link in blog.php
59 <li><a href=“put.php”>Posta>li>

So, anyway, You may download the Zip Archive that contains the sources so that you may experiment with them.
The Next tutorial will be going over editing, and the next will most likely be going over changing to a visual editor for the post.