├── README.md
├── blog_post_process.php
├── index.html
├── index.php
├── media
    ├── screenshot1.jpg
    ├── screenshot2.jpg
    └── screenshot3.jpg
├── scripts
    └── script.js
└── styles
    └── style.css


/README.md:
--------------------------------------------------------------------------------
 1 | # A Simple Blog Using PHP And MySQL
 2 | 
 3 | This simple blog application provides a user-friendly platform for bloggers to publish their posts online. It is built using PHP on the server-side and uses MySQL for storing blog posts. The application allows bloggers to write blog posts, add images and publish them on the blog.
 4 | 
 5 | This application can be used as a starting point for developers who want to build a blog application using PHP and MySQL. 
 6 | 
 7 | 	
 8 | ## Setup
 9 | 
10 | - Start the Apache and MySQL server from the XAMPP control panel.
11 | 
12 | - Extract the downloaded git project folder in the htdocs folder(present in the XAMPP folder). Generally during installation the XAMPP is installed in the C: Drive of your computer.
13 | 
14 | - A common file structure might looks like this:
15 | 
16 | ```
17 | C:
18 | |----XAMPP
19 |      |----htdocs
20 |           |----blog-using-php-mysql-main
21 |                |----styles
22 |                     |----style.css
23 |                |----media
24 |                |----images
25 |                |----scripts
26 |                     |----script.js
27 |                |----blog_post_process.php
28 |                |----index.html
29 |                |----index.php
30 |                |----README.md
31 | ```
32 | 
33 | - To create client's database go to: <http://localhost/phpmyadmin>
34 | 
35 | - Start by creating a new database from the left sidebar named as 'blog_db' with the default server connection collation settings.
36 | 
37 | - After creating the database create a table named as 'blog_table' with 4 columns for id, topic_title, topic_date and topic_para.
38 | 
39 | - The first column is 'id' which is an integer. Check the Auto Increment checkbox which will also make this field the primary key.
40 | 
41 | - The next column will be for the 'Post Title' and we'll make this a text type field.
42 | 
43 | - The next column is for the 'Date of the Created Post' which we'll make a text type field.
44 | 
45 | - The next column will be of 'Post Paragraph' which we'll make a text type field.
46 | 
47 | - After creating the database table you may test it by visiting this link in your browser: <http://localhost/blog-using-php-mysql-main/>
48 | 
49 | - On the `index.php` page all the created posts will be displayed. There is also a `Write a New Post` button on the bottom of the page from where you will be redirected to post creation page `index.html`.
50 | 
51 | ## Features
52 | 
53 | - On the home page `index.php` all the created posts are displayed.
54 | 
55 | - Current date and time will be automatically inserted into the post during the time of post creation.
56 | 
57 | - Major feature of user account creation and displaying dynamic content for each user is pending.
58 | 
59 | - More features like post deletion, editing existing post and more will be addded soon.
60 | 
61 | ## Screenshots
62 | 
63 | ![blog-using-php-mysql](https://raw.githubusercontent.com/kshitizrohilla/blog-using-php-mysql/main/media/screenshot1.jpg)
64 | ![blog-using-php-mysql](https://raw.githubusercontent.com/kshitizrohilla/blog-using-php-mysql/main/media/screenshot2.jpg)
65 | ![blog-using-php-mysql](https://raw.githubusercontent.com/kshitizrohilla/blog-using-php-mysql/main/media/screenshot3.jpg)


--------------------------------------------------------------------------------
/blog_post_process.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // error_reporting(0);
 4 | 
 5 | $servername = "localhost";
 6 | 
 7 | $username = "root";
 8 | 
 9 | $password = "";
10 | 
11 | $database = "blog_db"; 
12 | 
13 | $blogTitle = $_POST["blogtitle"];
14 | 
15 | $blogDate = $_POST["blogdate"];
16 | 
17 | $blogPara = $_POST["blogpara"];
18 | 
19 | // $sql = "insert into blog_table (topic_title, topic_date, image_filename, topic_para) values ('" . $blogTitle . "', '" . $blogDate . "', '" . $filename . "', '" . $blogPara . "');";
20 | 
21 | $conn = new mysqli($servername, $username, $password, $database);
22 | 
23 | if($conn->connect_error) die("Connection to database failed") . $conn->connect->error;
24 | 
25 | $filename = "NONE";
26 | 
27 | if(isset($_FILES['uploadimage']))
28 | {
29 |   $GLOBALS['filename'] = $_FILES['uploadimage']['name'];
30 |   
31 |   $tempname = $_FILES['uploadimage']['tmp_name'];
32 |   
33 |   move_uploaded_file($tempname, "images/" . $GLOBALS['filename']);
34 | }
35 | 
36 | $sql = "insert into blog_table (topic_title, topic_date, image_filename, topic_para) values ('" . $blogTitle . "', '" . $blogDate . "', '" . $filename . "', '" . $blogPara . "');";
37 | 
38 | if($conn->query($sql) === TRUE)
39 | {
40 |   echo "";
41 | }
42 | 
43 | else
44 | {
45 |   echo "Error Saving Post";
46 | }
47 | 
48 | $conn->close();
49 | 
50 | ?>
51 | 
52 | <!DOCTYPE html>
53 | 
54 | <html lang="en">
55 | 
56 |   <head>
57 | 
58 |     <meta charset="UTF-8">
59 | 
60 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
61 | 
62 |     <title>Post Saved</title>
63 | 
64 |     <link rel="stylesheet" href="styles/style.css">
65 | 
66 |   </head>
67 | 
68 |   <body>
69 | 
70 |     <div class="container" style="width: 50%; margin: auto; text-align: justify; font-family: Roboto, sans-serif;">
71 | 
72 |       <h1 style="margin-bottom: 10px; text-align: center;">Post Saved</h1>
73 | 
74 |       <center><a style="color: dodgerblue;" href="index.php">Go to Home Page</a></center>
75 |       
76 |       <br><br>
77 | 
78 |       <?php echo "<span style='font-weight: bold;' id='showTitle'>" . $blogTitle . "</span>" ?>
79 |       <br>
80 | 
81 |       <span id="showDate"><?php echo $blogDate ?></span><br><br>
82 | 
83 |       <center><img src="images/<?php echo $filename; ?>" id="showImage" style="width: 50%; height: auto;"></center>
84 | 
85 |       <br>
86 | 
87 |       <?php echo "<span id='showPara'>" . $blogPara . "</span>" ?>
88 | 
89 |       <br><br>
90 |       
91 |     </div>
92 | 
93 |   </body>
94 |   
95 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   
 5 |   <head>
 6 | 
 7 |     <meta charset="UTF-8">
 8 | 
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 | 
11 |     <title>Blog Using PHP And MySQL</title>
12 | 
13 |     <link rel="stylesheet" href="styles/style.css">
14 | 
15 |   </head>
16 | 
17 |   <body>
18 | 
19 |     <div class="top-bar">
20 |   
21 |       <span id="topBarTitle">Blog | New Post</span>
22 | 
23 |     </div>
24 | 
25 |     <div class="writing-section">
26 | 
27 |       <form action="blog_post_process.php" method="POST" enctype="multipart/form-data">
28 | 
29 |         <input id="blogTitle" name="blogtitle" type="text" placeholder="Blog Title..." autocomplete="off">
30 |         
31 |         <br>
32 |         
33 |         <span id="dateLabel">Date: </span>
34 |         
35 |         <input id="blogDate" name="blogdate" readonly></input>
36 |         
37 |         <br><br>
38 |         
39 |         <input type="file" name="uploadimage">
40 |         
41 |         <br><br>
42 |       
43 |         <textarea id="blogPara" name="blogpara" cols="75" rows="10" type="text" placeholder="Blog Paragraph..." autocomplete="off"></textarea>
44 | 
45 |         <br><br>
46 |         
47 |         <button id="saveBtn" type="submit">Save Post</button>
48 | 
49 |       </form>
50 | 
51 |       <br>
52 | 
53 |       <center><a style="text-decoration: none;" href="index.php" id="saveBtn">Go to Home Page</a></center>
54 |       
55 |     </div>
56 | 
57 |     <script src="scripts/script.js"></script>
58 | 
59 |   </body>
60 |   
61 | </html>


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   
 5 |   <head>
 6 | 
 7 |     <meta charset="UTF-8">
 8 | 
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 | 
11 |     <title>Blog Using PHP And MySQL</title>
12 | 
13 |     <link rel="stylesheet" href="styles/style.css">
14 | 
15 |   </head>
16 | 
17 |   <body>
18 | 
19 |     <div class="top-bar">
20 | 
21 |       <span id="topBarTitle">Blog | All Posts</span>
22 | 
23 |     </div>
24 | 
25 |     <br>
26 | 
27 |     <div class="all-posts-container">
28 | 
29 |       <?php
30 | 
31 |       $servername = "localhost";
32 | 
33 |       $username = "root";
34 | 
35 |       $password = "";
36 | 
37 |       $database = "blog_db";
38 | 
39 |       $conn = new mysqli($servername, $username, $password, $database);
40 | 
41 |       if($conn->connect_error) die("Connection Error" . $conn->connect_error);
42 | 
43 |       $sql = "select topic_title, topic_date, image_filename, topic_para from blog_table;";
44 | 
45 |       $result = $conn->query($sql);
46 | 
47 |       if($result->num_rows > 0)
48 |       {
49 |         while($row = $result->fetch_assoc())
50 |         {
51 |           echo "<div style='padding: 25px 25px;' class='post-container'>";
52 | 
53 |           echo "<span id='displayTitle'>" . $row["topic_title"] . "</span><br>";
54 | 
55 |           echo "<span id='displayDate'>" . $row["topic_date"] . "</span><br><br>";
56 | 
57 |           echo "<img style='width: 100%; height: auto' id='displayImage' src='images/" . $row["image_filename"] . "'><br>"; 
58 | 
59 |           echo "<p style='overflow: hidden; display: -webkit-box; -webkit-line-clamp: 10; line-clamp: 10; -webkit-box-orient: vertical;' id='displayPara'>" . $row["topic_para"] . "</p><br>";
60 |           
61 |           echo "</div>";
62 |         }
63 |       }
64 |       
65 |       else
66 |       {
67 |         echo "<center><span>No Blog Posts Found</span></center>";
68 |       
69 |         // echo "<center><a style='color: dodgerblue;' href='index.html'>Write a New Post</a></center>";
70 |       }
71 | 
72 |       $conn->close();
73 |       
74 |       ?>
75 | 
76 |     </div>
77 | 
78 |     <?php echo "<br><center><a style='color: dodgerblue; text-decoration: none; background: dodgerblue; padding: 5px 25px; color: #fff; border-radius: 50px;' href='index.html'>Write a New Post</a></center><br>"; ?>
79 | 
80 |   </body>
81 |   
82 | </html>


--------------------------------------------------------------------------------
/media/screenshot1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kshitizrohilla/blog-using-php-mysql/db659d28a60c3d5a538844137f7450877d51b74b/media/screenshot1.jpg


--------------------------------------------------------------------------------
/media/screenshot2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kshitizrohilla/blog-using-php-mysql/db659d28a60c3d5a538844137f7450877d51b74b/media/screenshot2.jpg


--------------------------------------------------------------------------------
/media/screenshot3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kshitizrohilla/blog-using-php-mysql/db659d28a60c3d5a538844137f7450877d51b74b/media/screenshot3.jpg


--------------------------------------------------------------------------------
/scripts/script.js:
--------------------------------------------------------------------------------
 1 | const d = new Date();
 2 | 
 3 | var DATE = String(d.getDate()) + '/' + String(d.getMonth()) + '/' + String(d.getFullYear());
 4 | 
 5 | var TIME = d.toLocaleString("en-US",
 6 | 
 7 |   {
 8 |     hour: "numeric",
 9 | 
10 |     minute: "numeric",
11 | 
12 |     hour12: true
13 |   }
14 | 
15 | );
16 | 
17 | // console.log(DATE);
18 | 
19 | // console.log(TIME);
20 | 
21 | var dateTime = DATE + ', ' + TIME;
22 | 
23 | document.getElementById("blogDate").value = dateTime;


--------------------------------------------------------------------------------
/styles/style.css:
--------------------------------------------------------------------------------
  1 | body
  2 | {
  3 |   margin: 0;
  4 | 
  5 |   word-wrap: break-word;
  6 | }
  7 | 
  8 | .top-bar
  9 | {
 10 |   background: #252525;
 11 | 
 12 |   color: #f5f5f5;
 13 | 
 14 |   margin: 0;
 15 | 
 16 |   text-align: center;
 17 | 
 18 |   padding: 10px;
 19 | }
 20 | 
 21 | #topBarTitle
 22 | {
 23 |   font-family: "Segoe UI", sans-serif;
 24 | 
 25 |   text-align: center;
 26 | 
 27 |   margin: 0;
 28 | 
 29 |   font-size: 30px;
 30 | }
 31 | 
 32 | #dateLabel
 33 | {
 34 |   font-family: "Segoe UI", sans-serif;
 35 | 
 36 |   font-weight: bold;
 37 | }
 38 | 
 39 | .writing-section
 40 | {
 41 |   margin: 10px;
 42 | }
 43 | 
 44 | form
 45 | {
 46 |   -webkit-tap-highlight-color: transparent;
 47 | 
 48 |   text-align: center;
 49 | }
 50 | 
 51 | #blogTitle
 52 | {
 53 |   font-family: "Roboto", sans-serif;
 54 | 
 55 |   outline: none;
 56 | 
 57 |   border: 1.5px solid lightgrey;
 58 |   
 59 |   color: #333;
 60 | 
 61 |   font-size: 20px;
 62 | 
 63 |   width: 37.5%;
 64 | 
 65 |   margin-bottom: 5px;
 66 | 
 67 |   border-radius: 5px;
 68 | 
 69 |   padding: 5px 5px;
 70 | }
 71 | 
 72 | #blogPara
 73 | {
 74 |   font-family: "Roboto", sans-serif;
 75 | 
 76 |   outline: none;
 77 | 
 78 |   border: 1.5px solid lightgrey;
 79 | 
 80 |   color: #333;
 81 | 
 82 |   resize: none;
 83 | 
 84 |   font-size: 20px;
 85 | 
 86 |   margin-top: 5px;
 87 | 
 88 |   border-radius: 5px;
 89 | 
 90 |   padding: 5px 5px;
 91 | }
 92 | 
 93 | #blogDate
 94 | {
 95 |   border: none;
 96 | 
 97 |   outline: none;
 98 | 
 99 |   font-size: 1em;
100 | }
101 | 
102 | #saveBtn
103 | {
104 |   border: none;
105 | 
106 |   background: dodgerblue;
107 | 
108 |   color: #fff;
109 | 
110 |   font-size: 17.5px;
111 | 
112 |   padding: 5px 25px;
113 | 
114 |   border-radius: 5px;
115 | 
116 |   cursor: pointer;
117 | }
118 | 
119 | .all-posts-container
120 | {
121 | /* 
122 |   margin-left: auto;
123 | 
124 |   margin-right: auto; */
125 | 
126 |   font-family: "Roboto", sans-serif;
127 | 
128 |   display: flex;
129 | 
130 |   flex-direction: row;
131 | 
132 |   flex-wrap: wrap;
133 | 
134 |   align-items: center;
135 | 
136 |   justify-content: center;
137 | }
138 | 
139 | .post-container
140 | {
141 |   background: #d3d3d3;
142 | 
143 |   margin: 5px;
144 | 
145 |   width: 25%;
146 | 
147 |   height: 500px;
148 | 
149 |   border-radius: 15px;
150 | }
151 | 
152 | #displayTitle
153 | {
154 |   font-weight: bold;
155 | }
156 | 
157 | #displayImage
158 | {
159 |   width: 50%;
160 | 
161 |   height: auto;
162 |   
163 |   border-radius: 15px;
164 | }


--------------------------------------------------------------------------------