PHP Tutorials By Kloplop321 » blog

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 12: Logging into a Basic Blog

Kloplop321 — Sun, 04 Jul 2010 04:17:50 +0000

This tutorial goes over implementing a log in system into the basic blog from tutorial 10/11. The goal is to use a session, a form, and a few pages to log in, log out, and of course, setting up future tools for the blog administration that will be shown in future tutorials.
You may refer to Tutorial 8(Login Concept) as we go though this tutorial.

Part 1:

Make sure to click on Read more so that you may see Part 2 and the sources(including downloads)!

Part 2:

So first of all, Here is my list of goals

Create a login page
Edit the existing blog.php to prove I am logged in
Create a way to log out
Add a place for future posting

Additionally, to see how the blog was set up initially, and what has been added to it, please see Tutorial 10 and Tutorial 11.

First, I created a login page, essentially stealing from Tutorial 10 as you will see in the video.
login.php
   1
   2    include(“connect.php”);
   3    $errortxt = ”;
   4    if(isset($_REQUEST['sub'])){
   5        $username = trim($_REQUEST['username']);
   6        $password = trim($_REQUEST['password']);
   7        //make it safe to see if in the table
   8        $username = mysql_real_escape_string($username);
   9        $password = sha1($password);
  10        //time to query
  11        $sql = “SELECT * FROM `users` WHERE username = ’$username‘ AND password = ’$password‘”;
  12        $result = mysql_query($sql);
  13        $exists = false;
  14        $userid = -1;
  15        while($row = mysql_fetch_array($result)){
  16            $exists = true;
  17            $userid = (int)$row[0];
  18            break;//get out of the while loop
  19        }
  20        if($exists){
  21            $_SESSION['isin'] = 1;
  22            $_SESSION['userid'] = $userid;
  23            header(‘location: blog.php’);
  24        }else{
  25            $errortxt .= “You got something wrong, try again\n”;
  26        }
  27    }
  28
  29
  30
  31    echo ‘’;
  32    ?>
  33
  34    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  35    <head>
  36        <title>Blog titletitle>
  37        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
  38    head>
  39    <body>
  40        <div class=“maincontent”>
  41            <div class=“top”>
  42                Blog titlediv>
  43            <div class=“login”>
  44                <form action=“?” method=“post”>
  45            Username <input type=“text” name=“username” /><br />
  46            Password <input type=“password” name=“password” /> <br />
  47            <input type=“submit” value=“Log in” />
  48            <input type=“hidden” name=“sub” value=“1″ />
  49        form>
  50                <div class=“error”>
  51                echo $errortxt;
  52                ?>div>
  53            div>
  54        div>
  55    body>
  56    html>

Then, I figured, I needed a way to log out. This part is the easiest, as it only includes starting the session essentially, then killing it, and redirecting to the front page.
logout.php
   1
   2    include(‘connect.php’);
   3    session_destroy();
   4    header(‘location: blog.php’);
   5    ?>

So now what?
Well, now we need to take our login page and our logout page and connect them to the nucleus of our blog, blog.php

You will notice the added content in lines 53-67 in the following
blog.php
   1
   2    include(“connect.php”);
   3
   4    echo ‘’;
   5    ?>
   6
   7    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
   8    <head>
   9        <title>Blog titletitle>
  10        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
  11    head>
  12    <body>
  13        <div class=“maincontent”>
  14            <div class=“top”>
  15                Blog titlediv>
  16            <div class=“posts”>
  17
  18                $sql = “SELECT posts.ID as `ID`,
  19    users.postname as `postname`,
  20    posts.title as `title`,
  21    posts.content as `content`,
  22    posts.date as `date`
  23
  24    FROM posts
  25
  26    INNER JOIN users
  27
  28    ON users.ID = posts.username
  29
  30    ORDER BY date DESC”;
  31                $result = mysql_query($sql);
  32                while($row=mysql_fetch_array($result)){
  33                ?>
  34                <div class=“post”>
  35                    <span class=“author”>
  36                    echo $row['postname'];
  37                    ?>span> Wrote
  38                    <a class=“title” href=“post.php?post=
  39                    echo htmlentities($row['ID']);
  40                    echo ‘”>’;
  41                    echo htmlentities($row['title']);
  42                    ?> at
  43                    echo date(‘l jS \of F Y h:i:s A’,(int)$row['date']);
  44                    ?>
  45                    <div class=“content”>
  46                    echo htmlentities($row['content']);
  47                    ?>div>
  48                div>
  49
  50                }
  51                ?>
  52            div>
  53            <div class=“controls”>
  54
  55                if((int)$_SESSION['isin']){
  56                ?>
  57                Hello, You may
  58                <ul>
  59                    <li><a>Posta>li>
  60                    <li><a href=“logout.php”>Logouta>li>
  61                ul>
  62
  63                }else{
  64                    echo ‘You may log in through this.’;
  65                }
  66                ?>
  67            div>
  68        div>
  69    body>
  70    html>

In concept, I detected whether logged in or not. If logged in, I would provide appropriate links, if not, I would provide the link to the login page.

The next tutorial will be going over the creation of a post with a What You See Is What You Get editor.

You may download the sources bundled in this Zip Archive for your own use.

PHP & MySQL Tutorial 11: Extending a Basic Blog

Kloplop321 — Tue, 29 Jun 2010 20:30:33 +0000

This tutorial goes over an inner join SQL query and extending the basic blog from tutorial 10 to have a link to a single-post page.
First of all, I am basing this tutorial on the last tutorial(10), which established a basic blog. Here we are going to compound the original statement that looks like
SELECT * FROM posts ORDER BY date DESC
What we are trying to do however, is to remove the statement that looks like
"SELECT postname FROM users WHERE ID = ”.$row['username']
and preserve the information on “Who posted it.”
The Second objective of this tutorial is to simply make the titles of the blog posts linked to a page that shows that post exclusively.
Here is Part 1 out of three, please watch all in their entirety so that you may understand them to the fullest.
Part 1:

Click on Read More to view the sources along with Part 2 and 3 of the video

Part 2:

Part 3:

First of all, I’m going to regurgitate the sources of this project and then explain what everything new means.
File: blog.php

   1
   2    include(“connect.php”);
   3
   4    echo ‘’;
   5    ?>
   6
   7    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
   8    <head>
   9        <title>Blog titletitle>
  10        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
  11    head>
  12    <body>
  13        <div class=“maincontent”>
  14            <div class=“top”>
  15                Blog titlediv>
  16            <div class=“posts”>
  17
  18                $sql = “SELECT posts.ID as `ID`,
  19    users.postname as `postname`,
  20    posts.title as `title`,
  21    posts.content as `content`,
  22    posts.date as `date`
  23
  24    FROM posts
  25
  26    INNER JOIN users
  27
  28    ON users.ID = posts.username
  29
  30    ORDER BY date DESC”;
  31                $result = mysql_query($sql);
  32                while($row=mysql_fetch_array($result)){
  33                ?>
  34                <div class=“post”>
  35                    <span class=“author”>
  36                    echo $row['postname'];
  37                    ?>span> Wrote
  38                    <a class=“title” href=“post.php?post=
  39                    echo htmlentities($row['ID']);
  40                    echo ‘”>’;
  41                    echo htmlentities($row['title']);
  42                    ?> at
  43                    echo date(‘l jS \of F Y h:i:s A’,(int)$row['date']);
  44                    ?>
  45                    <div class=“content”>
  46                    echo htmlentities($row['content']);
  47                    ?>div>
  48                div>
  49
  50                }
  51                ?>
  52            div>
  53        div>
  54    body>
  55    html>

File: Post.php

   1
   2    include(“connect.php”);
   3    $postid = (int)trim($_GET['post']);
   4    $sql = “SELECT posts.ID as `ID`,
   5    users.postname as `postname`,
   6    posts.title as `title`,
   7    posts.content as `content`,
   8    posts.date as `date`
   9
  10    FROM posts
  11
  12    INNER JOIN users
  13
  14    ON users.ID = posts.username
  15
  16    WHERE posts.ID = $postid
  17    ORDER BY date DESC”;
  18    $result = mysql_query($sql);
  19    $postdata = array();
  20    while($row=mysql_fetch_array($result)){
  21            $postdata = $row;
  22    }
  23
  24    echo ‘’;
  25    ?>
  26
  27    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  28    <head>
  29        <title>Blog title ->
  30        echo htmlentities($postdata['title']);
  31        ?>title>
  32        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
  33    head>
  34    <body>
  35        <div class=“maincontent”>
  36            <div class=“top”>
  37                <a href=“blog.php”>Blog titlea>div>
  38            <div class=“posts”>
  39                <div class=“post”>
  40                    <span class=“author”> echo htmlentities($postdata['postname']); ?>span> Wrote
  41                    <span class=“title”> echo htmlentities($postdata['title']); ?>span> at
  42                    echo date(‘l jS \of F Y h:i:s A’,(int)$postdata['date']);
  43                    ?>
  44                    <div class=“content”> echo htmlentities($postdata['content']); ?>div>
  45                div>
  46            div>
  47        div>
  48    body>
  49    html>

File: Connect.php

The new INNER JOIN query:
   1
   2    SELECT posts.ID as `ID`,
   3    users.postname as `postname`,
   4    posts.title as `title`,
   5    posts.content as `content`,
   6    posts.date as `date`
   7
   8    FROM posts
   9
  10    INNER JOIN users
  11
  12    ON users.ID = posts.username
  13
  14    ORDER BY date DESC

There are major differences between this query and the last one.

Not selecting *(anything and everything in the tables)
Use of tableName.field
Use of the AS term
Use of INNER JOIN … ON (test of truth)

First of all in this query, we are no longer selecting * (anything and everything), because we have information in the second table that we do not want to bother with. Because of this need for specification, we can consider it adding power to our SQL. We select only what we need, and that includes information from both the user table and the posts table. So, we use the format tableName.fieldName, for a real example, in our “ON” matching case, we use posts.username and users.ID. However, We want to replace the username field in posts with the postname field from the user table. As you can see, this requires some sort of matching and complexity. This is where the INNER JOIN comes in.
We say INNER JOIN and then the table name, in our case users. Then, the most important part, the table data matching. We use ON and then a test of truth, or rather, does Column C from Table A match or satisfy the value in Column A in Table B.
I use ON users.ID = posts.username, however the users.ID and posts.username can be switched. Obviously, this is the most important part because it specifies what we are matching so we get the correct data from both tables.
Please see the video for how I implement this further, as it better show the process of how I compound the process.

Now for the second part, we wanted to put a link from the title of the posts, to a page that has only the post. Now, if you are reading this, you have already used that feature to get to that information. We may in the future implement a “read more” link system. Now, what I do is swap the span tag around the title, with an anchor tag (a). Then I put in a URL, this is where the
  38                    <a class=“title” href=“post.php?post=
  39                    echo htmlentities($row['ID']);
  40                    echo ‘”>’;
  41                    echo htmlentities($row['title']);
  42                    ?> at
is implemented.

Then, we simply need to make that post.php.
Simply stated, we needed to use the base.html(included in the source download, and shown in the last tutorial), add the date back in, and prepare the SQL environment and change the SQL just a bit.
The only change in the post page SQL is adding the WHERE clause in the correct place and not being ambiguous with what ID we are referring to. Hence, we end up with “WHERE posts.ID = $postid”
We also need to get the $postid, and as shown above in the blog.php, the link is using the post variable inside of GET(note, I am not referring to the POST variable, the GET is used in the URL). I can safely use this without mysql_real_escape_string or the like because I am casting(forcing the variable type) to a number.
Also, in the process of adding a post.php, I moved the MySQL connect information to connect.php which I am including now in both my blog.php and my post.php.
The rest of the post.php was really just filling in the information into the base template.

This zip Archive contains

connect.php
joining.sql(the join query by itself)
base.html
blog.php
main.css
post.php
tutorials_blog.sql(the database dump, you can just import this)

Remember, when you try to implement this tutorial on your end, you will need to change the MySQL connect information to work with your server or localhost settings.

Another thing, I forgot to show how to debug your SQL as I first mentioned(sorry), what you can do if you find out that something is not working or selecting the data correctly, after you do the query, you can do
echo mysql_error();
and it will tell you something if something is wrong. If nothing shows up, then it is your logic that is wrong, or you are not using the correct variables with the mysql_fetch_array

PHP & MySQL Tutorial 10: Starting a Basic Blog

Kloplop321 — Sat, 26 Jun 2010 21:28:56 +0000

Here’s a start for beginner web programmers: a Blog which will evolve into not only A blog, but a content management system. Alas, we need a beginning. This tutorial first starts with setting up our blog system. This blog system is designed in a way that can be expanded for future tutorials for real application.

Here’s the first video, Part 1:

Please click read more to see the sources, and part 2 and 3.

Part 2:

Part 3:

So, first I start with a base XHTML of my page(look at the bottom for download links, copying the segments below may not function 100%)

   1    version=“1.0″ encoding=“UTF-8″?>
   2
   3    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
   4    <head>
   5        <title>Blog titletitle>
   6        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
   7    head>
   8    <body>
   9        <div class=“maincontent”>
  10            <div class=“top”>
  11                Blog titlediv>
  12            <div class=“posts”>
  13                <div class=“post”>
  14                    <span class=“author”>AUTHORspan> Wrote
  15                    <span class=“title”>TITLEspan>
  16                    <div class=“content”>Contentdiv>
  17                div>
  18                <div class=“post”>
  19                    <span class=“author”>AUTHORspan> Wrote
  20                    <span class=“title”>TITLE2span>
  21                    <div class=“content”>Content2div>
  22                div>
  23            div>
  24        div>
  25    body>
  26    html>

With the styling CSS file called main.css
   1    .maincontent {
   2        width: 95%;
   3        margin: auto;
   4    }
   5    .top {
   6        font-size: 2em;
   7    }
   8    .author {
   9        font-style: italic;
  10    }
  11    .title {
  12        font-weight: bold;
  13    }
  14    .content:first-letter {
  15    color:#111;
  16    font-size:xx-large;
  17    }
  18    .content:first-line {
  19        font-size: larger;
  20        font-style: oblique;
  21    }
  22    .content {
  23        border-top: dashed thin black;
  24    }
  25    .post {
  26        border-top: dashed thin gray;
  27    }

Along all with all these base elements of style and page, we need a base to set our blog on. This base, naturally in word, will be our database. So I created a database for the blog and put in the following data

   1
   2    SET SQL_MODE=“NO_AUTO_VALUE_ON_ZERO”;
   3
   4    –
   5    – Database: `tutorials_blog`
   6    –
   7
   8    – ——————————————————–
   9
  10    –
  11    – Table structure for table `posts`
  12    –
  13
  14    CREATE TABLE IF NOT EXISTS `posts` (
  15      `ID` int(255) NOT NULL AUTO_INCREMENT,
  16      `username` int(255) NOT NULL,
  17      `title` varchar(256) COLLATE utf8_unicode_ci NOT NULL,
  18      `content` longtext COLLATE utf8_unicode_ci NOT NULL,
  19      `date` int(255) NOT NULL,
  20      PRIMARY KEY (`ID`)
  21    ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5 ;
  22
  23    –
  24    – Dumping data for table `posts`
  25    –
  26
  27    INSERT INTO `posts` (`ID`, `username`, `title`, `content`, `date`) VALUES
  28    (1, 1, ‘Happy Tacos’, ‘Hello Happy tacos and cheese with nacho and ranch.’, 1277514243),
  29    (3, 1, ‘Some content’, ‘some other content to work with and so on.’, 1277514483),
  30    (4, 1, ‘Jalopies go to town on sundays’, ‘happy go lucky Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus         ac elit ligula. Quisque feugiat vehicula neque, ac elementum diam rutrum nec. Nulla ac cursus purus. Vestibulum dictum dapib        us gravida. Sed laoreet, nisi porta interdum ullamcorper, massa nunc ullamcorper eros, id viverra nunc neque a magna. Duis e        get leo velit. Etiam eget velit neque. Mauris metus odio, bibendum eget auctor non, hendrerit non ipsum. In vehicula magna e        get augue pulvinar aliquam eget eget quam. Nullam in ante vitae velit cursus commodo vel eget risus. Vivamus rhoncus vehicul        a massa, sit amet tincidunt justo tempor non. Maecenas risus odio, porta ut lacinia sit amet, porta in nibh. Etiam interdum,         lectus nec mollis semper, lorem ipsum lacinia massa, ac tincidunt nulla orci vitae magna. Ut molestie tempus placerat. Cras         volutpat, velit nec mattis pellentesque, nisl augue posuere quam, quis fringilla augue nunc sit amet eros. Cum sociis natoq        ue penatibus et magnis dis parturient montes, nascetur ridiculus mus. ’, 1277515071);
  31
  32    – ——————————————————–
  33
  34    –
  35    – Table structure for table `users`
  36    –
  37
  38    CREATE TABLE IF NOT EXISTS `users` (
  39      `ID` int(255) NOT NULL AUTO_INCREMENT,
  40      `username` varchar(32) COLLATE utf8_unicode_ci NOT NULL,
  41      `password` varchar(256) COLLATE utf8_unicode_ci NOT NULL,
  42      `postname` varchar(128) COLLATE utf8_unicode_ci NOT NULL,
  43      PRIMARY KEY (`ID`),
  44      UNIQUE KEY `username` (`username`)
  45    ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;
  46
  47    –
  48    – Dumping data for table `users`
  49    –
  50
  51    INSERT INTO `users` (`ID`, `username`, `password`, `postname`) VALUES
  52    (1, ‘kloplop321′, ’5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8′, ‘Kloplop321′);

As you can see, both a table is made not only for posts, but also for users. This is part of the step towards an expandable project, by separating data that can change, and also reduce redundancies in storage.

At this point, since I have the data, all I need to do is

Connect to the database
Query for posts
Query for the usernames of all posts
Edit the Template and fill in the data

Essentially, I do that. Here’s the source result. If you watch the video, you will see the process by which I do this, and you will hear me explain everything in detail of how and why.

   1
   2    $link = mysql_connect(‘localhost’, ‘phpuser’, ‘phppass’);
   3    if (!$link) {
   4        die(‘Could not connect: ’ . mysql_error());
   5    }
   6    //WE NEED to select the database!
   7    mysql_selectdb(“tutorials_blog”);
   8
   9    echo ‘’;
  10    ?>
  11
  12    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  13    <head>
  14        <title>Blog titletitle>
  15        <link href=“main.css” type=“text/css” media=“screen” rel=“stylesheet” />
  16    head>
  17    <body>
  18        <div class=“maincontent”>
  19            <div class=“top”>
  20                Blog titlediv>
  21            <div class=“posts”>
  22
  23                $sql = “SELECT * FROM `posts` ORDER BY `date` DESC”;
  24                $result = mysql_query($sql);
  25                while($row=mysql_fetch_array($result)){
  26                ?>
  27                <div class=“post”>
  28                    <span class=“author”>
  29                    $sql = “SELECT postname FROM users WHERE ID = ”.$row['username'];
  30                    $result2 = mysql_query($sql);
  31                    while($author=mysql_fetch_array($result2)){
  32                        echo $author[0];
  33                    }
  34                    ?>span> Wrote
  35                    <span class=“title”>
  36                    echo $row['title'];
  37                    ?>span> at
  38                    echo date(‘l jS \of F Y h:i:s A’,(int)$row['date']);
  39                    ?>
  40                    <div class=“content”>
  41                    echo htmlentities($row['content']);
  42                    ?>div>
  43                div>
  44
  45                }
  46                ?>
  47            div>
  48        div>
  49    body>
  50    html>

As you can see, I took one of the demonstration posts from the base html, and I wrapped it symbolically with each row of data, or posts for the blog. I filled in the blanks for the post information

Download Link

base.html
main.css
blog.php
tutorials_blog.sql

Are all contained in in this zip archive
Now, the SQL file is only a dump in the database that you can import if you wish to skip the step of manually entering in the information that I did. However, I believe it is best for your experience to follow along with me, rather than just skipping to the end. Programmers learn by doing, not by solely observing the end result(that is called web browsing).