Things About Web Design Logo

Things About Web Design

PHP CSS MySQL JS Scripts & Tutorials

Responsive Blog Tutorial


Create a directory (folder) named blog. Like http://yoursite.com/blog/.
Inside http://yoursite.com/blog/ create the following directories:
http://yoursite.com/blog/secure/
http://yoursite.com/blog/comments/
http://yoursite.com/blog/blogthumbs/ with 12 small square images in it.

Download the 12 images as a zip file. Click me!

Download the whole blog file. Click me!


.

Inside http://yoursite.com/blog/secure/
Create a file named .htaccess Like: http://yoursite.com/blog/secure/.htaccess
Note: the leading period in front of .htaccess is required to hide the file (make it not viewable from the web). Copy and paste the code below into .htaccess

7

AuthType Basic AuthName "Password Protected Area" AuthUserFile /complete/path/to/user/web/yoursite.com/blog/secure/.htpasswd Require valid-user <Files .htaccess> order allow,deny deny from all </Files>
.

Inside http://yoursite.com/blog/secure/
Create a file named .htpasswd Like: http://yoursite.com/blog/secure/.htpasswd
Note: the leading period in front of .htpasswd is required to hide the file (make it not viewable from the web). Copy and paste the code in the box below into .htpasswd
the username is: username
the password is: password
IMPORTANT: Go to htpasswd generator and get a username and password that only you know. And replace the code below in .htpasswd with your code right away!
Also: to edit .htpasswd you must temporarily rename it to.htpasswd.txt then rename to .htpasswd when done!

6

username:$2y$10$RmkSrdIWn1LL1fZdRH0BeO.FpT6sA8sLiTBRRrPNRUkfeyf5wA7Wq
.

delete.php below goes in a Password Protected Directory named secure inside the blog folder. Like http://yoursite.com/blog/secure/delete.php

5


<?php
$url
='http://' $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$url=str_replace(array($query,'http',':','/','yoursite.com','blog','secure','delete','.','php','?','file','=',),''$url);
echo 
"$url"unlink("/complete/path/to/your/user/web/yoursite.com/blog/comments/$url.txt");
delete_files("/complete/path/to/your/user/web/yoursite.com/blog/blogthumbs/$url/");
/* php delete function that deals with directories recursively*/
function delete_files($target) {
    if(
is_dir($target)){
        
$files glob$target '*'GLOB_MARK ); //GLOB_MARK adds a slash to directories returned

        
foreach( $files as $file ){
            
delete_files$file );      
        }

        
rmdir$target );
    } elseif(
is_file($target)) {
        
unlink$target );  
    }
}
header('location:blog-post.php#deletetop'); //redirect back to the other page
?>
.

blog-post.php below goes in a Password Protected Directory named secure inside the blog folder. Like http://yoursite.com/blog/secure/blog-post.php

4

<!DOCTYPE html> <html lang="en"> <title>Blog</title> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif} body {color:black;} .w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer} .w3-half img:hover{opacity:1} * { box-sizing: border-box; } .deletebtn a { text-decoration:none; } .deletebtn .delhov { background-color:#4CAF50; /* #4CAF50 is light Green */ border: none; color: white; border-radius:4px; padding: 8px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .deletebtn .delhov:hover { background-color:red; color: white; } .lownav a:hover { color: hotpink; } .lownav a { text-decoration:none; font-size:26px; } input { border: 1px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; } .lefttext {font-size: 14px; letter-spacing: 2px;} .posttext {font-size: 14px; letter-spacing: 1px;} .postdate {font-size: 12px;} .menutext {font-size: 12px;} .social i { display: inline-block; font-size: 20px; color: dodgerblue; padding: 4px; height:30px; width: 30px; background-color: white; border-radius: 50%; } .leftlinks a { font-size: 14px; text-decoration: none; } .leftlinks a:hover { font-size: 14px; color: hotpink; } .menu { width: 17%; float: left; padding: 15px 1px 1px 15px; /*border: 1px solid red;*/ } .main { width: 83%; float: left; padding: 1px 1px 1px 9px; /*border: 1px solid red;*/ } /*.clearfix { overflow: auto; }*/ @media screen and (max-width:990px) { .menu img { display: none; } } /* make post images disappear on small screen */ /* Use a media query to add a breakpoint at 990px: */ @media screen and (max-width: 990px) { .main { width: 100%; /* The width is 100%, when the viewport is 1200px or smaller */ } } footer { background-color:DarkSlateGrey; color: white; font-size: 12px; } /*Image Gallery*/ .pic { width:auto; box-shadow:0px 0px 20px #cecece; -moz-transform: scale(0.7); -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); -ms-transition-duration: 0.6s; } .pic:hover { box-shadow: 20px 20px 20px #dcdcdc; -moz-transform: scale(0.8); -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -ms-transition-duration: 0.6s; } fieldset{ overflow: hidden } .some-class { float: left; clear: none; } label { float: left; clear: none; display: block; padding: 3px 1em 3px 8px; } input[type=radio], input.radio { float: left; clear: none; padding: 3px 1em 3px 8px; margin: 13px 0 0 2px; } </style> </head> <body> <!-- My Blog Posts --> <div style="width:auto; padding: 40px 20px 1px 20px; text-align:left; background-color: snow;"> <div id='blogtop' style="width: 90%;">
<?php    
// get current directory path
$dirpath "/complete/path/to/your/user/web/yoursite.com/blog/comments/*.txt";

// copy filenames to array
$files = array();
$files glob($dirpath);

// sort files by last modified date
usort($files, function($x$y) {
    return 
filemtime($x) < filemtime($y);
});

foreach(
$files as $item){
    
$all_lines file($item);
    
$file1 "$item";
$lines file($file1);
foreach(
$lines as $line_num => $line){
//echo "$line";
echo "<p>";  
}
$all_lines str_replace("."""$all_lines);  
  
$all_lines str_replace("\n"""$all_lines);
            echo 
"<div class='menu clearfix'>";
              echo 
"<img style='border-radius:4px;' src='/blog/blogthumbs/$all_lines[0]/$all_lines[0].jpg' height=90 alt='$all_lines[0]'>";
              echo 
"</div>";
              echo 
"<div class='main clearfix'>";
          
$all_lines str_replace("-"" "$all_lines);
            echo 
"<h4><b>";
            echo 
$all_lines[0]";
            echo 
"</b></h4>";
              echo 
"<p class=postdate>";
            echo  @
date('D M j, Y - g:i a T'filemtime($item)) . "<br/>";
              echo 
"</p>";
            echo 
"<p class=posttext>";
        
$text "$all_lines[1]";
            echo 
substr($text0223);
          
$all_lines str_replace(" ""-"$all_lines);
            echo 
"<span><b>...</b><br />";
            echo 
"<a href='/blog/blog-article.php?id=$all_lines[0].txt'>Read more →</a>";
              echo 
"</span>";
            echo 
"</p>";
            echo 
"</div>";

}
?>
<!-- End My Blog Posts --> <!-- New Post Section --> <div class="w3-container" style="padding:58px 16px; background-color:snow"> <h3 id="contact" class="w3-left w3-margin-top">Blog Post:</h3> <p class="w3-left w3-large"> <div style="margin-top:22px"> <br><br> <form id="myForm" class="contact w3-card w3-padding w3-round" name="ContactForm" method="post" action="/blog/ajax.php"> <p><input class="w3-input w3-border w3-round" type="text" maxlength="48" placeholder="Blog Subject: (48 chars) No PHP Periods or Question Marks" name="fname" id="fname" autocomplete="off" /></p> <p><textarea class="w3-input w3-border w3-round" maxlength="2000" placeholder="Post (2000 chars)" name="message" id="message" ></textarea></p> <fieldset> <div class="w3-row"> <p>Please select your image:</p> <div class="w3-third" style="width:200px;"> <span><input type="radio" id="thumb-1.jpg" name="thumb" value="thumb-1.jpg"> <label ><img src="../blogthumbs/thumb-1.jpg" alt="thumb-1" height="40"></label></span> <span><input type="radio" id="thumb-2.jpg" name="thumb" value="thumb-2.jpg"> <label ><img src="../blogthumbs/thumb-2.jpg" alt="thumb-2" height="40"></label></span> <span><input type="radio" id="thumb-3.jpg" name="thumb" value="thumb-3.jpg"> <label ><img src="../blogthumbs/thumb-3.jpg" alt="thumb-3" height="40"></label></span> <span><input type="radio" id="thumb-4.jpg" name="thumb" value="thumb-4.jpg"> <label ><img src="../blogthumbs/thumb-4.jpg" alt="thumb-4" height="40"></label></span> </div> <div class="w3-third" style="width:200px;"> <span><input type="radio" id="thumb-5.jpg" name="thumb" value="thumb-5.jpg"> <label ><img src="../blogthumbs/thumb-5.jpg" alt="thumb-5" height="40"></label></span> <span><input type="radio" id="thumb-6.jpg" name="thumb" value="thumb-6.jpg"> <label ><img src="../blogthumbs/thumb-6.jpg" alt="thumb-6" height="40"></label></span><br> <span><input type="radio" id="thumb-7.jpg" name="thumb" value="thumb-7.jpg"> <label ><img src="../blogthumbs/thumb-7.jpg" alt="thumb-7" height="40"></label></span> <span><input type="radio" id="thumb-8.jpg" name="thumb" value="thumb-8.jpg"> <label ><img src="../blogthumbs/thumb-8.jpg" alt="thumb-8" height="40"></label></span> </div> <div class="w3-third" style="width:200px;"> <span><input type="radio" id="thumb-9.jpg" name="thumb" value="thumb-9.jpg"> <label ><img src="../blogthumbs/thumb-9.jpg" alt="thumb-9" height="40"></label></span> <span><input type="radio" id="thumb-10.jpg" name="thumb" value="thumb-10.jpg"> <label ><img src="../blogthumbs/thumb-10.jpg" alt="thumb-10" height="40"></label></span> <span><input type="radio" id="thumb-11.jpg" name="thumb" value="thumb-11.jpg"> <label ><img src="../blogthumbs/thumb-11.jpg" alt="thumb-11" height="40"></label></span> <span><input type="radio" id="thumb-12.jpg" name="thumb" value="thumb-12.jpg"> <label ><img src="../blogthumbs/thumb-12.jpg" alt="thumb-12" height="40"></label></span> </div> </div> </fieldset> <p><button class="w3-button w3-teal w3-round btn btn-default" type="submit" name="submit"><i class="fa fa-paper-plane"></i> SEND POST</button><br /><p> <span class="message_box" style="margin:10px 0px;"></span> </form> </div> </div> <!-- end new post --> <!-- Delete Section --> <div id="deletetop" class="w3-container" style="padding:58px 16px; background-color:snow"> <h3 class="w3-left w3-margin-top">Blog Delete:</h3> <p class="w3-left w3-large w3-card"> <div class="deletebtn" style="margin-top:22px"> <br><br>       
<?php
// get current directory path
$dirpath "/complete/path/to/user/web/yoursite.com/blog/comments/*.txt";
// copy filenames to array
$files = array();
$files glob($dirpath);      
// sort files by last modified date
usort($files, function($x$y) {
    return 
filemtime($x) < filemtime($y);
});
foreach(
$files as $item) {
    
$all_lines file($item);
    
$file1 "$item";
$lines file($file1);
foreach(
$lines as $line_num => $line) { 
}
    echo 
"<h4><b>";
    echo 
"<a class=delhov href='delete.php?file=$all_lines[0]'>X</a> $all_lines[0].txt";
    echo 
"</b></h4>";
    echo 
"<p>";
}
?>
</div> </div> <!-- End Delete Section --> </body> </html>
.

index.php below goes in the blog folder. Like http://yoursite.com/blog/index.php

3

<!DOCTYPE html> <html lang="en"> <title>Blog</title> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif} body {color:black;} .w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer} .w3-half img:hover{opacity:1} * { box-sizing: border-box; } .deletebtn a { text-decoration:none; } .deletebtn .delhov { background-color:#4CAF50; /* #4CAF50 is light Green */ border: none; color: white; border-radius:4px; padding: 8px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .deletebtn .delhov:hover { background-color:red; color: white; } .lownav a:hover { color: hotpink; } .lownav a { text-decoration:none; font-size:26px; } input { border: 1px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; } .lefttext {font-size: 14px; letter-spacing: 2px;} .posttext {font-size: 14px; letter-spacing: 1px;} .postdate {font-size: 12px;} .menutext {font-size: 12px;} .social i { display: inline-block; font-size: 20px; color: dodgerblue; padding: 4px; height:30px; width: 30px; background-color: white; border-radius: 50%; } .leftlinks a { font-size: 14px; text-decoration: none; } .leftlinks a:hover { font-size: 14px; color: hotpink; } .menu { width: 17%; float: left; padding: 15px 1px 1px 15px; /*border: 1px solid red;*/ } .main { width: 83%; float: left; padding: 1px 1px 1px 9px; /*border: 1px solid red;*/ } /*.clearfix { overflow: auto; }*/ @media screen and (max-width:990px) { .menu img { display: none; } } /* make post images disappear on small screen */ /* Use a media query to add a breakpoint at 990px: */ @media screen and (max-width: 990px) { .main { width: 100%; /* The width is 100%, when the viewport is 1200px or smaller */ } } footer { background-color:DarkSlateGrey; color: white; font-size: 12px; } /*Image Gallery*/ .pic { width:auto; box-shadow:0px 0px 20px #cecece; -moz-transform: scale(0.7); -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); -ms-transition-duration: 0.6s; } .pic:hover { box-shadow: 20px 20px 20px #dcdcdc; -moz-transform: scale(0.8); -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -ms-transition-duration: 0.6s; } fieldset{ overflow: hidden } .some-class { float: left; clear: none; } label { float: left; clear: none; display: block; padding: 3px 1em 3px 8px; } input[type=radio], input.radio { float: left; clear: none; padding: 3px 1em 3px 8px; margin: 13px 0 0 2px; } </style> <!-- My Blog Posts --> <div style="width:auto; padding: 40px 20px 1px 20px; text-align:left; background-color: snow;"> <div id='blogtop' style="width: 90%;">   
<?php    
// get current directory path
$dirpath "/complete/path/to/user/web/yoursite.com/blog/comments/*.txt";

// copy filenames to array
$files = array();
$files glob($dirpath);

// sort files by last modified date
usort($files, function($x$y) {
    return 
filemtime($x) < filemtime($y);
});

foreach(
$files as $item){
    
$all_lines file($item);
    
$file1 "$item";
$lines file($file1);
foreach(
$lines as $line_num => $line){
//echo "$line";
echo "<p>";  
}
$all_lines str_replace("."""$all_lines);  
  
$all_lines str_replace("\n"""$all_lines);
            echo 
"<div class='menu clearfix'>";
              echo 
"<img style='border-radius:4px;' src='/blog/blogthumbs/$all_lines[0]/$all_lines[0].jpg' height=90 alt='$all_lines[0]'>";
              echo 
"</div>";
              echo 
"<div class='main clearfix'>";
          
$all_lines str_replace("-"" "$all_lines);
            echo 
"<h4><b>";
            echo 
$all_lines[0]";
            echo 
"</b></h4>";
              echo 
"<p class=postdate>";
            echo  @
date('D M j, Y - g:i a T'filemtime($item)) . "<br/>";
              echo 
"</p>";
            echo 
"<p class=posttext>";
        
$text "$all_lines[1]";
            echo 
substr($text0223);
          
$all_lines str_replace(" ""-"$all_lines);
            echo 
"<span><b>...</b><br />";
            echo 
"<a href='/blog/blog-article.php?id=$all_lines[0].txt'>Read more →</a>";
              echo 
"</span>";
            echo 
"</p>";
            echo 
"</div>";

}
?>
<!-- End My Blog Posts -->
.

blog-artice.php below goes in the blog folder. Like http://yoursite.com/blog/blog-article.php

2

<!DOCTYPE html> <html lang="en"> <title>Blog</title> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif} body {color:black;} .w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer} .w3-half img:hover{opacity:1} * { box-sizing: border-box; } .deletebtn a { text-decoration:none; } .deletebtn .delhov { background-color:#4CAF50; /* #4CAF50 is light Green */ border: none; color: white; border-radius:4px; padding: 8px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .deletebtn .delhov:hover { background-color:red; color: white; } .lownav a:hover { color: hotpink; } .lownav a { text-decoration:none; font-size:26px; } input { border: 1px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; } .lefttext {font-size: 14px; letter-spacing: 2px;} .posttext {font-size: 14px; letter-spacing: 1px;} .postdate {font-size: 12px;} .menutext {font-size: 12px;} .social i { display: inline-block; font-size: 20px; color: dodgerblue; padding: 4px; height:30px; width: 30px; background-color: white; border-radius: 50%; } .leftlinks a { font-size: 14px; text-decoration: none; } .leftlinks a:hover { font-size: 14px; color: hotpink; } .menu { width: 17%; float: left; padding: 15px 1px 1px 15px; /*border: 1px solid red;*/ } .main { width: 83%; float: left; padding: 1px 1px 1px 9px; /*border: 1px solid red;*/ } /*.clearfix { overflow: auto; }*/ @media screen and (max-width:990px) { .menu img { display: none; } } /* make post images disappear on small screen */ /* Use a media query to add a breakpoint at 990px: */ @media screen and (max-width: 990px) { .main { width: 100%; /* The width is 100%, when the viewport is 1200px or smaller */ } } footer { background-color:DarkSlateGrey; color: white; font-size: 12px; } /*Image Gallery*/ .pic { width:auto; box-shadow:0px 0px 20px #cecece; -moz-transform: scale(0.7); -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); -ms-transition-duration: 0.6s; } .pic:hover { box-shadow: 20px 20px 20px #dcdcdc; -moz-transform: scale(0.8); -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -ms-transition-duration: 0.6s; } fieldset{ overflow: hidden } .some-class { float: left; clear: none; } label { float: left; clear: none; display: block; padding: 3px 1em 3px 8px; } input[type=radio], input.radio { float: left; clear: none; padding: 3px 1em 3px 8px; margin: 13px 0 0 2px; } </style> <!-- My Blog Posts --> <div class="w3-container"> <div id='blogtop' class="w3-container" style="width:100%; margin-left:20px;"> <!-- hr -->   
<?php
$blogpost 
$_GET['id'];      
$my_text_file "$blogpost";
$all_lines file('comments/' $my_text_file);
$all_lines str_replace("-"" "$all_lines);
              echo 
"<div class='main clearfix'>";
            echo 
"<h1>";
            echo 
"$all_lines[0]";
            echo 
"</h1>";
            echo 
"<span class=postdate>Published" " " .  @date('D M j, Y - g:i a T'filemtime("comments/$blogpost")) . "</span><br/>";
              echo 
"</div>";
              echo 
"<div class='main posttext clearfix'>";
            
//echo "<p class=posttext>";
            
echo "<p>$all_lines[1]</p>";
              echo 
"<p>$all_lines[2]</p>";
            echo 
"<p>$all_lines[3]</p>";
              echo 
"<p>$all_lines[4]</p>";
              echo 
"<p>$all_lines[5]</p>";
            echo 
"<p>$all_lines[6]</p>";
              echo 
"<p>$all_lines[7]</p>";
           
// echo "</p>";
        
$url htmlspecialchars($_SERVER['HTTP_REFERER']);
            echo 
"<a href='$url'> ← Go Back</a>";                       
            echo 
"</div>";
?>
</div> </div> <!-- End My Blog Posts -->
.

ajax.php below goes in the blog folder. Like http://yoursite.com/blog/ajax.php

1

 
<?php

// define variables and set to empty values
$fname $message $thumb "";

if (
$_SERVER["REQUEST_METHOD"] == "POST") {
  
$fname test_input($_POST["fname"]);
  
$message test_input($_POST["message"]);
  
$thumb test_input($_POST["thumb"]);
}

function 
test_input($data) {
  
$data trim($data);
  
$data stripslashes($data);
  
$data htmlspecialchars($data);
  return 
$data;
}

if(isset(
$_POST['submit'])) {
    
$fname $_POST['fname'];
$message $_POST['message'];
$thumb$_POST['thumb'];  

$fnamepreg_replace("/[^a-zA-Z0-9\$_]+$/"" "$fname);  
$fname preg_replace('#[ -]+#''-'trim($fname)); 
$comment = @fopen("comments/$fname.txt""a+");
$file_contents "$fname\n";
@
fwrite($comment$file_contents);
$file_contents "$message\n";
@
fwrite($comment$file_contents);
@
fclose($comment);
if (!
is_dir('blogthumbs/' $fname)) {
  
// if dir does not exist, make it
 
mkdir('blogthumbs/' $fname);
}
copy("blogthumbs/$thumb""blogthumbs/$fname/$fname.jpg");    
}
// Redirect browser
header("Location: secure/blog-post.php");
exit;
?>