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 <?php
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 = ‘<p>Put in some content</p>’;
55 if(strlen($content2) > 0){
56 $initialValue = $content2;
57 }
58 // Create first instance.
59 $code = $CKEditor->editor(“content”, $initialValue);
60 echo ‘<?xml version=”1.0″ encoding=”UTF-8″?>’;
61 ?>
62 <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
63 xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”
64
65 Blog title
66 href=“main.css” type=“text/css” media=“screen” rel=“stylesheet”
67
68
69 class=“maincontent”
70 class=“top”
71 Blog title
72 class=“postform”
73 method=“POST” action=“?”
74 Title: type=“text” name=“title” id=“postformtitle” value=“<?php
75 if(isset($title2)){
76 echo htmlentities($title2);
77 }
78 ?>“
79 Main Content:
80 <?php
81 echo $code;
82 ?>
83 type=“submit” value=“Send!”
84 type=“hidden” name=“sub” value=“1″
85
86 class=“errors”
87 <?php
88 if(isset($reason)){
89 echo $reason;
90 }
91 ?>
92
93
94 <!– end of maincontent –>
95
96
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 = ‘<p>Put in some content</p>’;
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 <?php
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 = ‘<p>Put in some content</p>’;
83 if(strlen($content2) > 0){
84 $initialValue = $content2;
85 }
86 // Create first instance.
87 $code = $CKEditor->editor(“content”, $initialValue);
88 echo ‘<?xml version=”1.0″ encoding=”UTF-8″?>’;
89 ?>
90 <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
91 xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”
92
93 Blog title
94 href=“main.css” type=“text/css” media=“screen” rel=“stylesheet”
95
96
97 class=“maincontent”
98 class=“top”
99 Blog title
100 class=“postform”
101 method=“POST” action=“?”
102 Title: type=“text” name=“title” id=“postformtitle” value=“<?php
103 if(isset($title2)){
104 echo htmlentities($title2);
105 }
106 ?>“
107 Main Content:
108 <?php
109 echo $code;
110 ?>
111 type=“submit” value=“Send!”
112 type=“hidden” name=“sub” value=“1″
113 type=“hidden” name=“post” value=“<?php echo $postid; ?>“
114
115 class=“errors”
116 <?php
117 if(isset($reason)){
118 echo $reason;
119 }
120 ?>
121
122
123 <!– end of maincontent –>
124
125
Anyway, here’s the sources, the base source zip archive, and again, the ckeditor zip archive.
November 1st, 2010 at 6:00 am
Dear Kloplop321
Today I find your blog tutorials on YouTube and they are really cool and useful.
Thanks for them very much.
I hope you could keep making more tutorials on your site or YouTube.
Thanks again!!
January 17th, 2011 at 8:35 pm
Thanks so much for the blog tuts!
February 13th, 2011 at 1:26 am
Good post, it helped me with my final year project at school also learnt MySQL Commands at Tutorial arena.
Regards,
Sue
March 29th, 2011 at 3:16 pm
I didn’t actually watch parts 12, 13, and 14. i intend on later, but i wanted to just check out the final part, so I downloaded the files from part 14. And i noticed that there’s no comment method. what’s up w/ that?!
can you please explain how to create the comment section of the blog?
March 29th, 2011 at 3:27 pm
There’s no comments section because I covered the idea in a previous tutorial:
http://kloplop321.com/php-tutorials/index.php/2010/02/15/mysql-and-phpmyadmin-introduction-with-php-07-a-basic-guestbook/
The guestbook is like a comment feature, except comments additionally have another field/column in the database which specifies the post it belongs to.
So here’s this comment I’m currently typing, it has who wrote it, what time it was posted, what post on my blog it belongs to, and a couple other things.
The guestbook implements that except for what it belongs to(as it is assuming globally), So if you want to have comments, you can take the concept, add another database field, change the insert to additionally have the post it belongs to, and then when displaying the blog post entry, query for the comments, with the filter in the SQL of something like
… where blog_post_id = “.$current_post_id;
May 31st, 2011 at 8:06 am
I’m having problems with the stupidest things! For some reason my username and password are not working. any ideas?
May 31st, 2011 at 8:10 am
I should add that I have used as my password/login in the connect.php file as the same as is used in my SQL Database, wrong?
BTW apart from that it’s a top tutorial mate.
June 1st, 2011 at 6:04 am
fixed
June 10th, 2011 at 5:38 am
How can i make to have 5 posts on page? I dont want to have all posts only one page. Can you help me? thanx
June 16th, 2011 at 1:20 pm
It is possible to delete the posts from admin panel? Or must to delete from database?
August 29th, 2011 at 10:49 am
right now I can not overhovdet navigate around your code to write / edit his blog I look at your video. and I can not get it to hang together overhovedet.http: / / localhostr.com/files/4WPVCDs/capture.png so does my databse out right now! and it looks like this on record since entering into mysql database – http://localhostr.com/files/PfiaaCB/mysql-databasen.png
Can not you contact me on my email?