This is word heavy. I try to keep my guides staight to the point, but since this is more of an article than a guide, I thought I'd accept the wordiness of this sort of thing.
Disclaimer: All codes in here are just examples to get a point across. Do not use them because they aren't good.
I recently showed someone my tools page, and they responded saying they didn't know what PHP is or how it works. I explained in my self hosting guide that I aimed my guide at people who were already familiar with static hosting because my background was coming from Neocities and primarily interacting with people who wanted to switch over to PHP later on.
The problem is that a lot of the things I really like about PHP actually won't really be understood by people who aren't super into neocities culture or anything like that. And even the people into Neocities don't really know what PHP is.
This is because there's a million articles on PHP from 20 years ago, and everyone who is informed about PHP is learning from those articles from 20 years ago. The other reason is because a lot of programmers have turned away from PHP in favor of JS frameworks while a lot of Neocities users who give up on plainly coding turn to SSGs.
I think those are both really good options, but to me, PHP is just perfect for everything I want to do and I think it suits many static users too.
Also I'm not addressing security in this article for people who are wondering because I have elsewhere.
So, we need to go over what a static site is. A static site is a site that only servers content to via the user browser. This differs from a PHP site which can use server-side permissions/commands to display more content. So, let's break that down some more with an example of how a static site may handle a barebones gallery versus a PHP site.
We'll expand on this example as we progress in this article.
Fishkid wants to makes a gallery of their art. They have several pieces from over time, and because it is artwork, they want it to be easy to click on. They use JavaScript to enlarge the images since this is not possible in plain CSS/HTML. They learn about lightbox which is what allows you to enlarge images.
This is the gallery snippet they'd use. It expands over time as more images are added.
<div class="gallery">
<img src="images/art1.jpg" alt="Artwork 1">
<img src="images/art2.jpg" alt="Artwork 2">
<img src="images/art4.jpg" alt="Artwork 3">
<img src="images/art5.jpg" alt="Artwork 1">
<img src="images/art6.jpg" alt="Artwork 2">
<img src="images/art7.jpg" alt="Artwork 3">
<!---more images here-->
</div>
<!-- Lightbox overlay -->
<div id="lightbox" style="display:none;">
<img id="lightbox-img" src="" alt="Large view">
</div>
<script src="gallery.js"></script>
You can type this by hand, generate it via an external script or SSG, or copy paste, but you will have to have the files displayed this way in the file somehow.
Bunnygirl chooses to make a gallery of her art. She has the same specifications as fishkid, but she has server-side/PHP access.
Since Bunnygirl has PHP access, she uses PHP to compress Fishgirl's gallery HTML. Instead of linking every image manually,
This is a snippet of her gallery.
<div class="gallery">
<?php
$dir = "images/"; // folder where art is stored
$files = scandir($dir);
foreach ($files as $file) {
if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $file)) {
echo "<img src='$dir$file' alt='Artwork'>";
}
}
?>
</div>
<!-- Lightbox overlay -->
<div id="lightbox" style="display:none;">
<img id="lightbox-img" src="" alt="Large view">
</div>
Bunnygirl now has a working gallery that will update any time she drops an image into the directory.
Why Can Bunnygirl read a directory but Fishkid Can't?
This is because of how PHP is handled. PHP is run on the server and serves it to the browser. The server has permission to read the folder ('directory') "images." Static sites cannot do this because everything is done on your browser.
So, when you read Bunnygirl's script with inspect element, it will display as plain HTML like Fishkid's. The PHP has sent the plain HTML to your browser, so now the user can actually read it despite not having access to the directory themselves.
Other tools can do this, but no static site has the ability to do this. This is the entire meaning of 'server-side.' Code runs server-side and gets shown to the client (client-side) as plain HTML/JS/CSS.
So, SQL is a big can of worms, but I just think of as a glorified spreadsheet. It exists to hold data (hence a 'database'). You can have a fully functioning PHP site without SQL. You can even hold data other ways and display them with PHP, but databases are ideal for holding large quantities of data.
SQL is everywhere because our modern world is based on data.
So, how does that apply to us? Well, it holds data, so let's expand our gallery concept.
Fishkid decides that they want to add titles to all of their art. They decide to do this by having PHP read the file names and format the files a particular way so that it reads it correctly.
<div class="gallery">
<?php
$dir = "images/"; // folder where art is stored
$files = scandir($dir);
foreach ($files as $file) {
if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $file)) {
// Remove extension
$name = pathinfo($file, PATHINFO_FILENAME);
// Split on underscore (e.g. "2020_sunrise")
$parts = explode("_", $name);
// First part is year, second part is title
$year = $parts[0];
$title = ucfirst($parts[1] ?? "Untitled");
echo "<figure>";
echo "<img src='$dir$file' alt='$title'>";
echo "<figcaption>$title ($year)</figcaption>";
echo "</figure>";
}
}
?>
</div>
<!-- Lightbox overlay -->
<div id="lightbox" style="display:none;">
<img id="lightbox-img" src="" alt="Large view">
<p id="lightbox-caption"></p>
</div>
The echo statement will output the image with title (year) as the caption.
Catboy they want a gallery with the same specifications as dogboy, but they store the titles and captions in a database to avoid improperly formatting files.
<div class="gallery">
<?php
// Database connection
$host = "localhost";
$user = "username";
$pass = "password";
$db = "gallerydb";
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Query all artworks
$sql = "SELECT filename, title, year FROM artworks ORDER BY year DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$file = $row['filename'];
$title = htmlspecialchars($row['title']);
$year = $row['year'];
echo "<figure>";
echo "<img src='images/$file' alt='$title'>";
echo "<figcaption>$title ($year)</figcaption>";
echo "</figure>";
}
} else {
echo "No artworks found.";
}
$conn->close();
?>
</div>
<!-- Lightbox overlay -->
<div id="lightbox" style="display:none;">
<img id="lightbox-img" src="" alt="Large view">
<p id="lightbox-caption"></p>
</div>
The echo statement will output the image with title (year) as the caption according to what's in the database. But, that feels a bit weird. You have to put the images in the database somehow right? And that doesn't feel so different from just formatting your files?
Well, let's talk about inputting data into SQL.
I like to make user frontends. Forms you can just put user data into. PHP allows this, and I like to use it specifically for myself. This is how a ton of SNS platforms work when you think about it. You login. You put your data in. It's stored and displayed.
You can do this on your own server with just yourself (or others too really but be careful). So, let's expand Catboy's example some more.
Catboy explains to Dogthing how their PHP stuff works. Dogthing is interested and tries it out, but dislikes uploading the files to the server, so they decide to make a basic frontend script to upload their files.
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="title">Title:</label>
<input type="text" name="title" id="title" required><br><br>
<label for="year">Year:</label>
<input type="number" name="year" id="year" required><br><br>
<label for="file">Choose Image:</label>
<input type="file" name="file" id="file" accept="image/*" required><br><br>
<input type="submit" value="Upload">
</form>
This file opens a form on their website. They can just type all of the fields instead of formatting their files by name and upload from whatever decide they want. Now they just need to use PHP to upload the files to the server.
<?php
// Database connection
$host = "localhost";
$user = "username";
$pass = "password";
$db = "gallerydb";
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Folder where uploads go
$targetDir = "images/";
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$title = $_POST['title'];
$year = $_POST['year'];
$file = $_FILES['file'];
// Build file path
$targetFile = $targetDir . basename($file["name"]);
// Move uploaded file to folder
if (move_uploaded_file($file["tmp_name"], $targetFile)) {
// Insert metadata into database
$stmt = $conn->prepare("INSERT INTO artworks (filename, title, year) VALUES (?, ?, ?)");
$stmt->bind_param("ssi", $file["name"], $title, $year);
if ($stmt->execute()) {
echo "Upload successful! <a href='gallery.php'>View Gallery</a>";
} else {
echo "Database error: " . $conn->error;
}
$stmt->close();
} else {
echo "File upload failed.";
}
}
$conn->close();
?>
Yippie! Now they can organize all their files themselves without dealing with pesky file formatting or having to upload their images to their server every single time! Also, now, if they want, they can add even more data.
Later on , Dogthing decides to add tags, categories, and they can just display it with their PHP since the SQL is holding it and input it with the form!
PHP and SQL are different HTML and CSS. JavaScript is also different from HTML/CSS, but it's so widely used that easy to wrangle things together with it.
But guess what?
You already use PHP and SQL!! You don't need to learn it because the workflow is already familiar to you. Have you posted on Twitter or Tumblr or a blog? Fancy form input! What about tags? Just data being held and displayed to you.
You don't need to learn PHP or SQL to use it because there are a million systems in place but for you to use it already.
I like scripts myself, and I have a bunch for public use, but you don't need to use those even because if you're doing something simple, chances are you can just look on github or something and find a solution. There's a million PHP image galleries on Github, SQL ones too.
And outside of that, it's something you can take time to learn. PHP has a lot of simple uses too. Due to it being able to read directories and things, it can just make a lot of stuff go faster. You don't need to use SQL, nor do you need to have complex scripts either.
PHP includes are a big part of why PHP is appealing. People don't realize the extent they can use PHP includs, so let's talk about uses.
The most common way people think of using PHP includes is via footers, headers, navbars, etcetera. Those are good, but you can do lots of random other stuff too! Maybe you need a warning sign on several pages with broken links! You can just include it on every page it's needed on.
Okay, so I'm an insane person, and I break up my site in a veery strange way. My homepage does not use a CSS file. It actually includes the style in the top of the index header. This header includes the navbar and some other things.
I include a lot. The header and navbar (the navbar is included in the header even), the RSS feed, the right side bar and footer nad bubble script).
It serves as HTML on load, so it's not a "seperate file" to the client. It is just part of the page.
I don't use SQL for my gallery. My gallery is actually really weird compared to rest of my site- partially because my art output is so high. So I explain.
My file formats use 2025_17 (year_id) because I run all of my art through a a conversion program (XNConvert) which then renames it to year_# and increases the ID by one each time. I do this in batches which is why I don't have a form or anything like that. I just upload everything by dropping the files into WinSCP (WinSCP is explained in my hosting guide).
I wouldn't do it this way if it weren't for this being how I did things back when I had a static site. I would just generate the HTML via random programming tools. Now, PHP just reads the year and ID, and makes a tab for each year.
BUT my script is actually even weirder. It doesn't display by date or just the ID. It uses a random formula to display images. This is because I don't save my images in order and the files I save usually don't have dates stored in them a lot of the time. It used to display randomly, but it pissed me off, so now it uses a random mathematical formula.
// Keep files in consistent order
usort($imageFiles, function($a, $b) {
return sin(crc32($a)) <=> sin(crc32($b));
});
Anyways, this script is cobbled together from a bunch of Github snippets and things because it's just something I upload to but don't think about a lot. Maintaining archive is done for sake of maintaining the archive. It's not meant to be a huge thing.
Which is what I'm trying to say. You can do whatever you want. You can use for simple stuff, complex stuff, etc etcetera, and you can always build on your simple things. My art archive is a simple gallery, but my OC galleries are a bit more complex.
This guide is to explain what PHP/SQL is an its capabilities. I hope it expanded your mind. You don't need to push these capabilities, but also, maybe an easier workflow would help you update your site more often. My file handlings allow me to just paste social media urls to upload to my server at times. Not for my gallery mind you, but some of my other scripts work this way because I want to have the files locally.
You can do whatever you want forever honestly. I really respect people who maintain static hosts for years, but I can't and I think many people who stop maintaining their sites would maintain them if they knew about PHP. There's a whole world out there!! Don't be scared!!!