How to display a users post on home page - html

Question

So at the top of the page there is an area for users to create a post with a title and body.
<div class="write_post" id="write_post">
<label for="post_title"><b>Title</b></label>
<input type="text" placeholder="What are you calling this?" name="post_title" required>
<label for="post_body">Body</label>
<textarea name="post_body" id="post_body" rows="5" cols="80" placeholder="Write post here..." required></textarea>
<button action="post.php" class="post_submit" type="submit">Post</button>
</div>
The goal is when they click the post button it will create a post below.
I've tried using javascript to help, but I'm not 100% sure what to do. A push in the right direction would help.

Answer 1

There is no need to use JavaScript in this case – you can use PHP and save the form data in a database.
1. Create an HTML form within a PHP file
First, wrap your input elements in a form (I've only kept the elements that are important in this case):
index.php
<form action="comment.php" method="get">
<input type="text" name="post_title">
<textarea name="post_body"></textarea>
<button type="submit">Post</button>
</form>
2. Create a PHP file to process the submitted form data
As you can see, the form has an action attribute which leads to a file named comment.php. This is just a suitable name I picked, you can name the PHP-file however you like.
In this newly created PHP-file you have to process the submitted form data. Please notice that PHP-files can only run on a server and not locally on your PC like an HTML-file. I would recommend to directly upload and test within a sub-folder on your web server.
A possible folder structure would be:
test-folder
|
+-- index.php
|
+-- comment.php
2. Editing the PHP file and saving data to the database
Open the PHP-File and add the following:
comment.php
2.1 Getting the form data
?php
/*
* Receive the submitted form data and assign it to variables
*/
$comment_title = $_GET["post_title"]; // same as the name attribute in HTML
$comment_body = $_GET["post_body"];
2.2 Creating a new database
We now have the data, but we also want to save it. Data like this is usually saved within a database. Most hosting providers allow you to create one pretty easily.
Your database should have a structure like this:
comments
|
+-- ID (auto increment)
|
+-- comment_title
|
+-- comment_body
2.3 Connecting to the database
We now have to connect to our database to save the data.
/*
* Connect to your database to save the form data
*/
$servername = "localhost"; // get this data from your hosting provider
$username = "username";
$password = "password";
// create a new connection
$conn = new mysqli($servername, $username, $password);
// check if the connection succeeds
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
2.4 Inserting data in to the database
/*
* Insert the form data in to the database
*/
$sql = "INSERT INTO comments (comment_title, comment_body)
VALUES ('".$comment_title."','".$comment_body."',)";
$conn->close();
3. Displaying the saved data
Now we only have to display the saved data on the index.php
We can to this by looping through the rows in our database.
index.php
/*
* Connect to your database and display the saved comments
*/
$servername = "localhost"; // get this data from your hosting provider
$username = "username";
$password = "password";
// create a new connection
$conn = new mysqli($servername, $username, $password);
// check if the connection succeeds
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$result = mysql_query("SELECT comment_title, comment_body FROM comments");
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
echo $row[0] . $row[1];
}