Hello @astonecipher,
No, it is not for Wordpress. It is for the database. Here are the php file codings for it:
database.php file:
<?php
require_once('config.php');
// Should return a PDO
function db_connect() {
try {
// TODO
// try to open database connection using constants set in config.php
// return $pdo;
$servername = DBHOST;
$databasename = DBNAME;
$user = DBUSER;
$password = DBPASS;
$connectionString = "mysql:host=$servername;dbname=$databasename";
$pdo = new PDO($connectionString,$user,$password);
$pdo -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $pdo;
}
catch (PDOException $e)
{
die($e->getMessage());
}
}
// Handle form submission
function handle_form_submission() {
global $pdo;
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// TODO
// Prepare the submitted form data and insert it to the database
$email = $_POST['email'];
$mood = $_POST['mood'];
$comments = $_POST['comment'];
$date = date('Y-m-d');
$stmt = $pdo->prepare("INSERT INTO comments (email,mood,commentText,date) VALUES(:email,:mood,:commentText,:date)");
$stmt->bindValue(':email',$email);
$stmt->bindValue(':mood',$mood);
$stmt->bindValue(':commentText',$comments);
$stmt->bindValue(':date',$date);
$stmt->execute();
}
}
// Get all comments from database and store in $comments
function get_comments() {
global $pdo;
global $comments;
//TODO
$sql = "SELECT * FROM comments ORDER BY ID DESC;";
$result = $pdo->query($sql);
$comments = $result;
}
// Get unique email addresses and store in $commenters
function get_commenters() {
global $pdo;
global $commenters;
//TODO
$query = "SELECT DISTINCT email FROM comments;";
$rslt = $pdo->query($query);
$commenters = $rslt;
}
Then I have index.php file:
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
// global array of posts, to be fetched from database
$comments = [];
// global array of unique commenter email addresses to be fetched from db
$commenters = [];
require_once 'database/database.php';
require_once 'templates/functions/template_functions.php';
//connect to database: PHP Data object representing Database connection
$pdo = db_connect();
// submit comment to database
handle_form_submission();
// Get comments from database
get_comments();
// Get commenters from database
get_commenters();
// include the template to display the page
include 'templates/index.php';
And then this is the file where I am having the functions in the template_functions.php:
<?php
require_once('database/database.php');
// Output comments to HTML
function the_comments() {
global $comments;
// TODO
echo "<h2>Comments</h2>";
while($rows = $comments->fetch())
{
/*echo "<div class = 'comments'>"
."<div class='comment'>".$rows['commentText']."</div>"."</div>";*/
echo '<div class = "comments">'
.'<div class="comment">'. "<div class='ID'>".'Post ID: '.$rows['ID']."</div>".
'<div class="date">'.'Posted on: .'.$rows['date'].'</div>'. '<h3>New comment by: '.$rows['email'].'</h3>'.
'<div class="mood">'.'Current mood: '.$rows['mood'].'</div>'.
'<div class="comment-text">'. '<p>' .$rows['commentText'].'</p>'. '</div>'.
'</div>'.
'</div>';
}
}
// Output unique email addresses to HTML
function the_commenters() {
global $filter;
global $commenters;
//TODO
echo '<h2>People Who have Commented: </h2>';
while($row = $commenters->fetch()){
echo '<div class="commenters">'.'<ul>'.'<li>'.'<a href="index.php">'.$row['email'].'</a>'
.'</li>'.'</ul>'.
'</div>';
}
if($_SERVER["REQUEST_METHOD"] == "GET"){
}
}
And here is the html file along with the css file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Database: SQL</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Database: SQL</h1>
<div class="write-comment">
<h2>Post a Comment</h2>
<form action="index.php" method="post">
<label>
Email Address:
<input type="email" name="email">
</label>
<label>
Mood:
<select name="mood">
<option value="happy">Happy</option>
<option value="sad">Sad</option>
<option value="excited">Excited</option>
<option value="bored">Bored</option>
<option value="angry">Angry</option>
</select>
</label>
<label>
Enter a Comment:
<textarea name="comment"></textarea>
</label>
<button type="submit" name="button">Post Comment</button>
</form>
</div>
<?php
the_comments();
the_commenters();
?>
</body>
</html>
css file:
@import url('https://fonts.googleapis.com/css?family=Arvo:400,700|Monofett|Montserrat:400,700');
html
{
font-family: "Montserrat";
}
body
{
background-color: rgb(180,255,255);
max-width: 1200px;
margin:0 auto;
}
h1
{
font-family: "Monofett";
font-weight: normal;
color:hotpink;
font-size: 8vw;
text-align: right;
text-shadow: -1vw 1vw 0 white, -1.2vw 1.2vw 0 rgb(180,255,255), -2vw 2vw 0 white, -2.2vw 2.2vw 0 rgb(180,255,255),-3vw 3vw 0 white, -3.2vw 3.2vw 0 rgb(180,255,255),-4vw 4vw 0 white, -4.2vw 4.2vw 0 rgb(180,255,255),-5vw 5vw 0 white, -5.2vw 5.2vw 0 rgb(180,255,255), 1vw -1vw 0 rgb(80, 195, 195),2vw -2vw 0 rgb(80, 195, 195);
padding-top:5vw;;
padding-bottom: 9vw;
}
h2, h3
{
font-family: arvo;
}
.write-comment
{
border:10px dashed white;
padding:1rem;
border-radius: 10px;
}
.write-comment h2
{
font-size: 3rem;
color:hotpink;
padding-left:2rem;
text-shadow:1.5rem 1.5rem 0 white, -1.5rem -1.5rem 0 rgb(80, 195, 195);
}
.comment
{
background-color: hotpink;
border-radius: 10px;
margin:1rem;
box-shadow: 0px 0px 3px rgb(190, 0,100);
color:white;
display:flex;
flex-wrap:wrap;
}
.comment>*
{
margin:.5rem;
}
.comment h3, .comment-text
{
width:100%;
}
.ID, .date
{
background-color: rgb(190, 0,100);
margin:0;
padding:.5rem;
}
.ID
{
border-radius: 10px 0 0 0;
}
.date
{
border-radius: 0 0 10px 0;
}
.comment-text
{
color:black;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 3px rgb(190, 0,100);
padding:1rem;
}
form
{
display: flex;
flex-wrap:wrap;
}
label
{
margin:1rem;
}
label:last-of-type
{
width:100%;
}
label:first-of-type
{
width:50%;
display: flex;
}
label:first-of-type input
{
flex-grow:1;
}
button[type="submit"]
{
background-color: rgb(190, 0,100);
color:white;
font-size: 1.1rem;
padding:.5rem;
border:3px solid rgb(190, 0,100);
border-radius: 5px;
margin:.5rem;
}
button[type="submit"]:hover
{
background-color: hotpink;
}
textarea, input, select
{
border:2px solid hotpink;
border-radius: 5px;
}
textarea
{
display: block;
width:100%;
height:6rem;
resize:vertical;
}