PHP Tutorials By Kloplop321 » Insert

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.

PHP & MySQL Tutorial 09: File Upload system with records in MySQL

Kloplop321 — Tue, 06 Apr 2010 01:15:55 +0000

This tutorial goes over the concept of uploading files, and keeping records in a MySQL database.
So lets try this
When: I need to upload files and keep long term records on who uploaded and where it is.
Why: I don’t know, you make up the reasons.
What: Exactly do you need to keep record of? Time, who sent it, where is it?
Who: Depends on how you implement
Where: On the Internet!
How: I’ll show you.

There are two parts, so pay attention closely. (The last part is always the most important) Don’t forget to see more of this post for the sources and part two!

So first we need to make our uploading page. It is pretty much an XHTML template base with an uploading form

<html>
<head>
<link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet”/>
<title>Upload Indextitle>
head>

<body>
<form enctype=“multipart/form-data” action=“upload.php” method=“post”>
        Choose your file to upload!
        <input name=“uploadedfile” type=“file” />
        <br />
        And what would you like to call it? <input name=“title” type=“text” />
        <br />
        <input type=“submit” value=“upload file”/>
        form>

body>
html>

The most important part is the input for the file, the submit button and the form itself. In this case we have to say that there are multiple parts(the text, and the file) for this file upload so we set the enctype to “multipart/form-data”.
Since we are sending to another page(upload.php), we need to process it.
In upload.php, the basic way to save the file to the uploads directory is like the following(not final)

//time to see if the file is uploaded. $putItAt = "uploads/".basename($_FILES['uploadedfile']['name']); //hmm, will they try uploading a script or a page that might be a security risk? //lets prevent any .php from getting in, and rename with .txt $putItAt = str_replace("php","txt", $putItAt); if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'],$putItAt)){ //we could echo, but why don't we just go to the file list now? savedata(); header("location: listfiles.php");//redirect them to the listfiles.php page }else{ //we failed. Lets try a slightly different method here. instead of moving, try copying if(copy($_FILES['uploadedfile']['tmp_name'],$putItAt)){ //we have success! savedata(); header("location: listfiles.php"); }else{ //we totally failed... so lets tell them. echo 'You totally failed. click here to go back and try again.'; } } ?>

Next it is noticed that we aren’t saving any information in the database. Here comes the MySQL part.
Make your table in the database, call it what ever you want, in my case I named it ‘thefiles’. The requirement is that we connect to the database and set our script up to be able to query in and for information.
$link = mysql_connect('localhost', 'phpuser', 'phppass'); if (!$link) { die('Could not connect: ' . mysql_error()); } //WE NEED to select the database! mysql_selectdb("tutorials_upload");
By putting that at the top of our script, we now have a connection to the database so now we want to insert our information when it is uploaded. Now the question is: do we want to be redundant and have the inserting code twice(for copy and move), or do we want to make a function and refer to that function twice? Honestly I choose the later, it makes the code cleaner.
//function time! function savedata(){ global $_FILES, $_POST, $putItAt; $sql = "INSERT INTO `tutorials_upload`.`thefiles` ( `ID` , `Time` , `FileLocation` , `IP` , `Title` ) VALUES ( NULL , UNIX_TIMESTAMP( ) , '".mysql_real_escape_string($putItAt)."', '".$_SERVER['REMOTE_ADDR']."', '".mysql_real_escape_string($_POST['title'])."' );"; mysql_query($sql); }

So now that I have this function, I need to implement it into the uploading code.
So, now my code finally for upload.php is
$link = mysql_connect('localhost', 'phpuser', 'phppass'); if (!$link) { die('Could not connect: ' . mysql_error()); } //WE NEED to select the database! mysql_selectdb("tutorials_upload"); if(!is_dir("uploads")){//do we need to make the uploads directory for the files? mkdir("uploads");//make the rest of the script safe, though this will only be done once } //function time! function savedata(){ global $_FILES, $_POST, $putItAt; $sql = "INSERT INTO `tutorials_upload`.`thefiles` ( `ID` , `Time` , `FileLocation` , `IP` , `Title` ) VALUES ( NULL , UNIX_TIMESTAMP( ) , '".mysql_real_escape_string($putItAt)."', '".$_SERVER['REMOTE_ADDR']."', '".mysql_real_escape_string($_POST['title'])."' );"; mysql_query($sql); } //time to see if the file is uploaded. $putItAt = "uploads/".basename($_FILES['uploadedfile']['name']); //hmm, will they try uploading a script or a page that might be a security risk? //lets prevent any .php from getting in, and rename with .txt $putItAt = str_replace("php","txt", $putItAt); if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'],$putItAt)){ //we could echo, but why don't we just go to the file list now? savedata(); header("location: listfiles.php");//redirect them to the listfiles.php page }else{ //we failed. Lets try a slightly different method here. instead of moving, try copying if(copy($_FILES['uploadedfile']['tmp_name'],$putItAt)){ //we have success! savedata(); header("location: listfiles.php"); }else{ //we totally failed... so lets tell them. echo 'You totally failed. click here to go back and try again.'; } } ?>

Next, we have our file list page. We will start off with a basic XHTML template and have a CSS file linked in.

< !DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet”/>
<title>Uploaded Filestitle>
head>

<body>

<br />
<a href=“index.php”>Go back to the indexa>
body>
html>

The main.css has

ul li {
    display: block;
    width: 160px;
    min-height: 160px;
    border: thin dashed black;
    float: left;
    padding: 8px;
}
ul {
    clear: both;
}
br {
    clear: left;
}

in it, which pretty much makes our list items boxes with a dashed border around them.

So the format I want to use is something like

<ul>
<li>
    <h1>YYYYYYYh1><br />
    <h3>Uploaded By: XXX.XXX.XXX.XXXh3><br />
    <a href=“uploads/ZZZZZZZ.jpg”>YYYYYYYa>
li>
ul>

So, in php, I would query the database for ‘thefiles’ and display the information in the like format.
//time to get our info $sql = "SELECT * FROM `thefiles`"; $result = mysql_query($sql); while($file = mysql_fetch_array($result)){ echo '

';
    echo ''.$file['Title'].'
';
    //now the file info and link
    echo 'Uploaded By: '.$file['IP'].'
';
    echo '.$file['FileLocation'].'">'.$file['Title'].'';
    echo '

';
}

?>

So, finally, our listfiles.php looks like (along with the MySQL connection section) this:



$link = mysql_connect('localhost', 'phpuser', 'phppass');
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
//WE NEED to select the database!
mysql_selectdb("tutorials_upload");
?>



        
    Uploaded Files




//time to get our info
$sql = "SELECT * FROM `thefiles`";
$result = mysql_query($sql);
while($file = mysql_fetch_array($result)){
    echo '';
    echo ''.$file['Title'].'
';
    //now the file info and link
    echo 'Uploaded By: '.$file['IP'].'
';
    echo '.$file['FileLocation'].'">'.$file['Title'].'';
    echo '
';
}

?>




Go back to the index

All that put together provides something that looks like

and ends with

MySQL and PHPMyAdmin Introduction with PHP 07: A basic Guestbook

Kloplop321 — Mon, 15 Feb 2010 16:05:36 +0000

This is pretty much a basic “How to” for making a very basic guestbook that uses a database instead of text. I go over everything from making the database to the table, the html form and actual posting. If you watch this video you will pretty much see the basic idea of what a guestbook is, how they work, and how to make a basic one yourself.

This video has two parts, so to understand fully, please watch both.

Part 2 and the source after the jump

$link = mysql_connect('localhost', 'phpuser', 'phppass');
if (!$link) {
    die('Not connected : ' . mysql_error());
}else{
    //echo "I am connected. ";
}

// make foo the current db
$db_selected = mysql_select_db('guestbook', $link);
if (!$db_selected) {
    die ('Can\'t use guestbook DB : ' . mysql_error());
}
$name = trim($_REQUEST['name']);
$comment = trim($_REQUEST['comment']);
if(strlen($name)> 0){
    if(strlen($comment)> 0){
        $name = mysql_real_escape_string($name);
        $comment = mysql_real_escape_string($comment);

        $sql = "INSERT INTO `guestbook`.`entries` (
`ID` ,
`name` ,
`date` ,
`comment`
)
VALUES (
NULL , '$name', UNIX_TIMESTAMP( ) , '$comment'
);";
mysql_query($sql);
    }else{
        echo "You did not put in a comment.";
    }
}else{
    if(strlen($comment)> 0){
        echo "you got a comment, but not a name;";
    }
}
$sql = "SELECT *
FROM `entries` ORDER BY `ID` DESC
LIMIT 3";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){
    echo $row['name']." Said: ".$row['comment']."

";
}
?>
<form action="?" method="post">
Name:
<input type="text" name="name" /><br />
Comment: <br />
<textarea name="comment">textarea><br />
<input type="submit" value="Submit" />
form>