PHP Tutorials By Kloplop321 » cms http://kloplop321.com/php-tutorials PHP video tutorials, for everyone. Sun, 20 Mar 2011 19:03:28 +0000 en hourly 1 http://wordpress.org/?v=3.2 PHP & MySQL Tutorial 13: Posting on a Blog http://kloplop321.com/php-tutorials/index.php/2010/07/07/php-mysql-tutorial-13-posting-on-a-blog/ http://kloplop321.com/php-tutorials/index.php/2010/07/07/php-mysql-tutorial-13-posting-on-a-blog/#comments Wed, 07 Jul 2010 23:51:14 +0000 Kloplop321 http://kloplop321.com/php-tutorials/?p=292 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    <?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($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 ‘<?xml version=”1.0″ encoding=”UTF-8″?>’;
  36    ?>
  37    <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  38    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  39    <head>
  40        <title>Blog title</title>
  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 title</div>
  47            <div class=“postform”>
  48                <form method=“POST” action=“?”>
  49                    Title: <input type=“text” name=“title” id=“postformtitle” value=“<?php
  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″><?php
  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                    <?php
  65                    if(isset($reason)){
  66                        echo $reason;
  67                    }
  68                    ?>
  69                    </div>
  70            </div>
  71        </div><!– end of maincontent –>
  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 <a href=”http://evilwebsite.com/with/viruses”>Friendly cute puppies</a> 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”>Post</a></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.

]]> http://kloplop321.com/php-tutorials/index.php/2010/07/07/php-mysql-tutorial-13-posting-on-a-blog/feed/ 2 PHP & MySQL Tutorial 12: Logging into a Basic Blog http://kloplop321.com/php-tutorials/index.php/2010/07/03/php-mysql-tutorial-12-logging-into-a-basic-blog/ http://kloplop321.com/php-tutorials/index.php/2010/07/03/php-mysql-tutorial-12-logging-into-a-basic-blog/#comments Sun, 04 Jul 2010 04:17:50 +0000 Kloplop321 http://kloplop321.com/php-tutorials/?p=287 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    <?php
   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<br />\n”;
  26        }
  27    }
  28    
  29    
  30    
  31    echo ‘<?xml version=”1.0″ encoding=”UTF-8″?>’;
  32    ?>
  33    <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  34    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  35    <head>
  36        <title>Blog title</title>
  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 title</div>
  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”><?php
  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    <?php
   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    <?php
   2    include(“connect.php”);
   3    
   4    echo ‘<?xml version=”1.0″ encoding=”UTF-8″?>’;
   5    ?>
   6    <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
   7    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
   8    <head>
   9        <title>Blog title</title>
  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 title</div>
  16            <div class=“posts”>
  17                <?php
  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”><?php
  36                    echo $row['postname'];
  37                    ?></span> Wrote 
  38                    <a class=“title” href=“post.php?post=<?php
  39                    echo htmlentities($row['ID']);
  40                    echo ‘”>’;
  41                    echo htmlentities($row['title']);
  42                    ?></a> at <?php
  43                    echo date(‘l jS \of F Y h:i:s A’,(int)$row['date']);
  44                    ?>
  45                    <div class=“content”><?php
  46                    echo htmlentities($row['content']);
  47                    ?></div>
  48                </div>
  49                <?php
  50                }
  51                ?>
  52            </div><!– end of posts section –>
  53            <div class=“controls”>
  54                <?php
  55                if((int)$_SESSION['isin']){
  56                ?>
  57                Hello, You may
  58                <ul>
  59                    <li><a>Post</a></li>
  60                    <li><a href=“logout.php”>Logout</a></li>
  61                </ul> 
  62                <?php
  63                }else{
  64                    echo ‘You may log in through <a href=”login.php”>this</a>.’;
  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.

]]> http://kloplop321.com/php-tutorials/index.php/2010/07/03/php-mysql-tutorial-12-logging-into-a-basic-blog/feed/ 1 PHP & MySQL Tutorial 10: Starting a Basic Blog http://kloplop321.com/php-tutorials/index.php/2010/06/26/php-mysql-tutorial-10-starting-a-basic-blog/ http://kloplop321.com/php-tutorials/index.php/2010/06/26/php-mysql-tutorial-10-starting-a-basic-blog/#comments Sat, 26 Jun 2010 21:28:56 +0000 Kloplop321 http://kloplop321.com/php-tutorials/?p=256 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    <?xml version=“1.0″ encoding=“UTF-8″?>
   2    <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
   3    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
   4    <head>
   5        <title>Blog title</title>
   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 title</div>
  12            <div class=“posts”>
  13                <div class=“post”>
  14                    <span class=“author”>AUTHOR</span> Wrote 
  15                    <span class=“title”>TITLE</span>
  16                    <div class=“content”>Content</div>
  17                </div>
  18                <div class=“post”>
  19                    <span class=“author”>AUTHOR</span> Wrote 
  20                    <span class=“title”>TITLE2</span>
  21                    <div class=“content”>Content2</div>
  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

  1. Connect to the database
  2. Query for posts
  3. Query for the usernames of all posts
  4. 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    <?php
   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 ‘<?xml version=”1.0″ encoding=”UTF-8″?>’;
  10    ?>
  11    <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  12    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  13    <head>
  14        <title>Blog title</title>
  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 title</div>
  21            <div class=“posts”>
  22                <?php
  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”><?php
  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”><?php
  36                    echo $row['title'];
  37                    ?></span> at <?php
  38                    echo date(‘l jS \of F Y h:i:s A’,(int)$row['date']);
  39                    ?>
  40                    <div class=“content”><?php
  41                    echo htmlentities($row['content']);
  42                    ?></div>
  43                </div>
  44                <?php
  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).

]]> http://kloplop321.com/php-tutorials/index.php/2010/06/26/php-mysql-tutorial-10-starting-a-basic-blog/feed/ 9