Hello world!

I spun up this blog to document my work.

The first thing I'll write about is the website itself.

I made this blog using HTML/CSS for the frontend and PHP for the backend. The code is as simple as possible, at least by my standards.

I'll discuss four parts of the website:
The homepage (/index.php)
This is the homepage of the website.

The homepage of my website
The page is a simple static HTML file (with just happens to end in .php). No PHP here! You can view the source markup on your (desktop) browser by visiting the page, right clicking, and selecting "View Source".


The blog folder (/blog/)
The blog posts are contained in /blog/res/.

Here's what the file structure of the /blog/ directory looks like on the server:

The file structure of the /blog/ directory.
Each blog post lives as a folder in /blog/res/, named with an ID number. For example, this blog post's ID is 0.

Each folder in /blog/res/ contains four things:
For example, blog post 0-- this post-- has a meta.txt, a thumbnail.png, a post.html file, and an img folder.


The blog index (/blog/index.php)
This is the page that shows all the blog posts.

The blog index
This page is dynamic, and uses PHP. Specifically, it uses this snippet of PHP to find and display all the blog posts:

$folders = glob('res/*', GLOB_ONLYDIR);

foreach (array_reverse($folders) as $folder) {
	
	$metaraw = file_get_contents($folder . "/meta.txt");
	$meta = explode(PHP_EOL, $metaraw);
	
	$postid = explode('/', $folder)[1];
	
	echo <<<EOD
		<div class="post">
			<a href="post.php?id={$postid}"><img src="{$folder}/thumbnail.png">
			<p class="postheader">{$meta[0]}</p></a>
			<p class="postsubheader">{$meta[1]}</p>
			<p class="postblurb">{$meta[2]}</p>
		</div>
	EOD;
}
The PHP for grabbing and displaying the blog posts.
The script starts by iterating over every blog post folder in /blog/res/.

First, it grabs each blog post's metadata and ID. Then, it displays formatted boxes, containing the thumbnail, title, date, and summary of each blog post.

The result is a nice column of posts. The thumbnail and title of each post is a clickable link, leading to the blog reader.


The blog reader (/blog/post.php)
The blog reader is the page you're on right now. As you can see in your URL bar, the page accepts a parameter called `id`.

The URL of this page, showing the id parameter set equal to 0.
We need to check that id parameter to make sure there's no funny business going on.

First, we check if the id parameter is set, and if it's a string (and not an array).

if (!isset($_GET['id']) || !is_string($_GET['id'])) {
	echo "Quit it!";
	die();
}
Checking if the id parameter is a) set, and b) a string.
Then, we check if the id parameter is numerical, and if that blog post's ID exists in /res/.

$postid = $_GET['id'];

if (filter_var($postid, FILTER_VALIDATE_INT) === false || !is_dir("res/" . $postid)) {
	echo "Quit it!";
	die();
}
Checking if the id parameter is numerical and if the post exists.
If any of these checks fail, the page becomes blank, and the user is greeted with "Quit it!"

After these security checks, we use the post ID to grab the post's metadata and content.

$metaraw = file_get_contents("res/" . $postid . "/meta.txt");
$meta = explode(PHP_EOL, $metaraw);
$postcontent = file_get_contents("res/" . $postid . "/post.html");
Grabbing the post metadata and content.
The post's metadata is used to annotate the metadata of the page. The post content is what you're reading right now.

This is how the post content is displayed:

echo <<<EOD
	<img class="postimg" src="res/{$postid}/thumbnail.png">
	<h1 class="postheader">{$meta[0]}</h1>
	<p class="postsubheader">{$meta[1]}</p>
	
	<article class="postcontent">
		{$postcontent}
	</article>
EOD;
The post content being displayed


What's next
I'm excited to document my technological and personal endeavors on this blog.

Feel free to contact me at ramblecube@gmail.com for questions or suggestions.