How this website was made. PHP, CSS, and Folders.
Disclaimer: This is nothing fancy. I started out with HTML back in the 90's, started using Wordpress in the 00's, and lost interest in the 10's. I am a casual computer user, and didn't keep up with the times. I wanted something I could keep in one folder on my Desktop again. There is a lot of great flat file code out there, but I wanted something I could understand and control. I have tried to keep any code that I borrowed with the authors name. First things first.
Here is what the public_html folder looks like
The main .htaccess file
The .htaccess file redirects pages so they look like they are all in folders, when it is actually a file. Any requests for http://dispelled.ca/j, or http://dispelled.ca/j/ will be shown the page j.php and the same for the other user pages. It also strips any www. from requests.
RewriteCond %{HTTPS} =on RewriteCond %{HTTPS} ^on$ RewriteRule ^(.*)$ http://dispelled.ca/$1 [R=301,L] RewriteRule ^j$ j.php [L] RewriteRule ^j/$ j.php [L] RewriteRule ^cori$ cori.php [L] RewriteRule ^cori/$ cori.php [L] RewriteCond %{HTTP_HOST} ^www\. RewriteCond %{HTTP_HOST} ^www.dispelled.ca$ [NC] RewriteRule ^(.*)$ http://dispelled.ca/$1 [R=301,L]
The main index.php
Basic includes to header.php and footer.php
<?php include("header.php"); ?>
<!-- This overrides image display (!important) and keeps iframes off of this page only. -->
<style>
img {display: none !important;}
iframe {display: none;}
</style>
<h1>Dispelled.ca Homepage</h1>
<p>Welcome to our little spot on the Internet. Finally got it back to the basics. This site is made only from <a href="http://dispelled.ca/categories/Code/How%20this%20website%20was%20made.php">a few PHP files and a flat file directory structure</a>.</p>
<p>Things will get broken, and things will get better. Cheers.</p>
<!-- Quick links is back lol! I'll move the CSS later -->
<div style="display: inline-block; background-color:#030303; -webkit-border-top-left-radius: 2ex; -webkit-border-top-right-radius: 2ex; -webkit-border-bottom-left-radius: 2ex; -webkit-border-bottom-right-radius: 2ex;"><div style="padding: 10px;"><p><b>New Links!</b></p>
<p>New in Code: (Oct 20 2024)
<br><a href="https://dispelled.ca/categories/Code/Starting%20with%20Github%20-%20Create%20a%20new%20repository%20on%20the%20command%20line.php">Starting with Github - Create a new repository on the command line</a></p>
<p>New in Code: (Oct 14 2024)
<br><a href="https://dispelled.ca/categories/Code/The%20Branch%20command%20for%20Assembly%20in%20Arm64%20with%20GDB.php">The Branch command for Assembly in Arm64 with GDB</a></p>
<p><a href="https://dispelled.ca/categories/Code/Starting%20to%20learn%20Assembly%20for%20ARMV8%20with%20a%20Khadas%20Vim3%20and%20Ubuntu%2024.04.php">Starting to learn Assembly for ARMV8 with a Khadas Vim3 and Ubuntu 24.04</a></p>
<p><a href="https://dispelled.ca/categories/Code/Debugging%20Assembly%20code%20for%20Arm64%20with%20GDB.php">Debugging Assembly code for Arm64 with GDB</a></p>
<p>New in Cpus: (Oct 14 2024)
<br><a href="https://dispelled.ca/categories/Cpus/Re-installing%20ProtonVPN%20on%20Ubuntu%2024.04%20for%20ARM.php">Re-installing ProtonVPN on Ubuntu 24.04 for ARM</a></p>
</div></div>
<p> </p>
<p><b>Old School News Feeds (RSS)</b> <a href="https://dispelled.ca/categories/Code/RSS%20example%20from%20main%20page.php">How?</a></p>
<p><b>Slashdot</b></p>
<?php
$rss = new DOMDocument();
$rss->load('http://rss.slashdot.org/Slashdot/slashdot');
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
);
array_push($feed, $item);
}
$limit = 5;
for($x=0;$x<$limit;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$description = $feed[$x]['desc'];
echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
echo '<p>'.$description.'</p>';
}
?>
<p><b>Ars Technica</b></p>
<?php
$rss = new DOMDocument();
$rss->load('https://feeds.arstechnica.com/arstechnica/index');
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
);
array_push($feed, $item);
}
$limit = 20;
for($x=0;$x<$limit;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$description = $feed[$x]['desc'];
echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
echo '<p>'.$description.'</p>';
}
?>
<p><b>Rebel News</b></p>
<?php
$rss = new DOMDocument();
$rss->load('https://www.rebelnews.com/news.rss');
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
);
array_push($feed, $item);
}
$limit = 20;
for($x=0;$x<$limit;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$description = $feed[$x]['desc'];
echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong></p>';
}
?>
<p><b>The Gateway Pundit</b></p>
<?php
$rss = new DOMDocument();
$rss->load('https://www.thegatewaypundit.com/rss/');
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
);
array_push($feed, $item);
}
$limit = 15;
for($x=0;$x<$limit;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$description = $feed[$x]['desc'];
echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
echo '<p>'.$description.'</p>';
}
?>
<p><b>Dissentwatch</b></p>
<?php
$rss = new DOMDocument();
$rss->load('https://dissentwatch.com/?feed=linkfeed');
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
);
array_push($feed, $item);
}
$limit = 10;
for($x=0;$x<$limit;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$description = $feed[$x]['desc'];
echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
echo '<p>'.$description.'</p>';
}
?>
<p><b>Childrens Health Defense</b></p>
<?php
$rss = new DOMDocument();
$rss->load('https://childrenshealthdefense.org/rss/');
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
);
array_push($feed, $item);
}
$limit = 20;
for($x=0;$x<$limit;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$description = $feed[$x]['desc'];
echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
echo '<p>'.$description.'</p>';
}
?>
<p><b>Infowars</b></p>
<?php
$rss = new DOMDocument();
$rss->load('https://www.infowars.com/rss.xml');
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
);
array_push($feed, $item);
}
$limit = 9;
for($x=0;$x<$limit;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$description = $feed[$x]['desc'];
echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
echo '<p>'.$description.'</p>';
}
?>
<?php include("footer.php"); ?>
The header.php
It is mostly the original header.php out of my wordpress installation so I could keep my existing style.css file. After that is a piece of code I added and modified by Chirp Internet: www.chirp.com.au that takes the contents of my categories folder (in the public_html root), displays each folder name, and links to each folders index.php.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Dispelled.ca</title>
<link rel="stylesheet" href="https://dispelled.ca/css/style.css" type="text/css" media="all" />
<style type="text/css" id="custom-background-css">
body.custom-background {background-image: url('https://dispelled.ca/bg/bg.jpg'); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; background-size: 100%; }
</style>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body class="page page-template-default custom-background full-width">
<div id="titlediv"><div id="title">
<div style="text-align: right;"><a href="https://github.com/oddlej/" title="@oddlej on Github.com"><img style="padding-bottom: 31px; display: inline !important" src="https://avatars.githubusercontent.com/u/185309100?v=4&s=48" ></a><a href="https://dispelled.ca/"><img src="https://dispelled.ca/bg/dispelled.png" style="display: inline !important" title="Hocus Pocus Black Magic"></a></div></div></div>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<!-- #site-navigation -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-menu1-container"><ul id="menu-menu1" class="nav-menu"><li id="menu-item-2915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2915"><a href="https://dispelled.ca/cori/">Cori’s Stuff</a></li><li id="menu-item-2915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2915"><a href="https://dispelled.ca/j/">J’s stuff</a></li><li id="menu-item-2915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2915"><a href="https://sellco.ca">Sellco.ca</a></li>
<?PHP
// Original PHP code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
function getFileList($dir)
{
// array to hold return value
$retval = array();
// add trailing slash if missing
if(substr($dir, -1) != "/") $dir .= "/";
// open pointer to directory and read list of files
$d = @dir($dir) or die("getFileList: Failed opening directory $dir for reading");
while(false !== ($entry = $d->read())) {
// skip hidden files
if($entry[0] == ".") continue;
if(is_dir("$dir$entry")) {
$retval[] = array(
"name" => "$dir$entry/",
"type" => filetype("$dir$entry"),
"size" => 0,
"lastmod" => filemtime("$dir$entry")
);
} elseif(is_readable("$dir$entry")) {
$retval[] = array(
"name" => "$dir$entry",
"type" => mime_content_type("$dir$entry"),
"size" => filesize("$dir$entry"),
"lastmod" => filemtime("$dir$entry")
);
}
}
$d->close();
return $retval;
}
?>
<?PHP
$dirlist = getFileList("./categories/");
// echo "<ul class=\"sub-menu\">\n";
foreach($dirlist as $file) {
echo "<li class=\"menu-item menu-item-type-taxonomy menu-item-object-category\">\n";
if(preg_match("/\index.php$/", $file['name'])) continue;
echo "<a href=\"/{$file['name']}\">",basename($file['name']),"</a>\n";
echo "</li>\n";
}
//echo "</ul>\n";
?>
</li>
<li id="menu-item-2915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2915"><a title="Requires Javascript" href="https://dispelled.ca/stocks.php">Stocks</a></li>
</ul></div>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<!-- Open Divs -->
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div id="content" role="main">
The footer.php
<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=109371611/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://flyingbuttpliers.bandcamp.com/album/geoff-feeds-a-bunny-30th-anniversary-rereleased-2024">Geoff Feeds a Bunny - 30th Anniversary - Rereleased 2024 by Flying Butt Pliers</a></iframe>
<p> Check out some other Bands on <a href="https://bandcamp.com/">.Bandcamp.com</a>. <a href="https://crazyfingers.bandcamp.com/">Crazy Fingers (Vancouver 1991)</a>, <a href="https://altogethersteveandthemercenaries.bandcamp.com/">Altogether Steve and the Mercenaries</a>, and <a href="https://hammyhamhands.bandcamp.com/">Hammy Ham Hands</a>.</p>
<p><i>Proudly powered by <a href="https://www.geany.org/">an IDE</a>, <a href="https://www.vim.org/">a Text Editor</a>, and some <a href="https://priv.au/">Internet </a><a href="https://metager.org/">Searches</a>.</i></p>
<p> 2024 dispelled.ca end of file. </p>
<!-- Close Divs -->
</div><!-- .entry-content -->
</div><!-- #content -->
</div><!-- #primary -->
</div><!-- #main .wrapper -->
</div><!-- #page -->
<p> </p>
</body>
</html>
Now to get into the categories folder
So there is a folder called categories, with all of the subjects we want to show in the menu. Any pages in the root of the site will get the categories menu across the top.
Next. Looking into a category
Let's take a look inside the first directory, Camp
Each folder in categories contains a index.php that has a structure like categories/Camp/index.php below.
<?php include("../../headercat.php"); ?>
<h1>Camping</h1>
<p>Camping, Fishing, Hiking, Biking, Boating, and Skipping Rocks</p>
<?php include("../../cat.php"); ?>
<?php include("../../footer.php"); ?>
It uses a special menu called headercat.php that displays links back to our home pages, and a link back to categories. It then calls on cat.php which displays all of the pages in that directory, using the code modified in a different way fom Chirp. I added a way for it to read the first line from each file from a date stamp so it would display them based on their post date.
headercat.php
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Dispelled.ca</title>
<link rel='stylesheet' href='https://dispelled.ca/css/style.css' type='text/css' media='all' />
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('https://dispelled.ca/bg/bg.jpg'); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; background-size:100%;}
</style>
</head>
<body class="page page-template-default custom-background full-width">
<div id="titlediv"><div id="title">
<div style="text-align: right;"><a href="https://github.com/oddlej/" title="@oddlej on Github.com"><img style="padding-bottom: 31px; display: inline !important" src="https://avatars.githubusercontent.com/u/185309100?v=4&s=48" ></a><a href="https://dispelled.ca/"><img src="https://dispelled.ca/bg/dispelled.png" style="display: inline !important" title="Hocus Pocus Black Magic"></a></div></div></div>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<!-- #site-navigation -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-menu1-container"><ul id="menu-menu1" class="nav-menu"><li id="menu-item-2915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2915"><a href="https://dispelled.ca/cori/">Cori’s Stuff</a></li><li id="menu-item-2915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2915"><a href="https://dispelled.ca/j/">J’s stuff</a></li><li id="menu-item-2915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2915"><a href="https://dispelled.ca/">Back to Categories >></a></li>
</ul></div>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<!-- Open Divs -->
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div id="content" role="main">
cat.php
<?PHP
function getPostDate($url) {
$data = file_get_contents($url);
$date = preg_match('/<!--date=(.*?) -->/ims', $data, $matches) ? $matches[1] : null;
return $date;
}
function getTitle($url) {
$data = file_get_contents($url);
//$title = preg_match('/<!--title=(.*?) -->/ims', $data, $matches) ? $matches[1] : null;
$title = preg_match('/<h1[^>]*>(.*?)<\/h1>/ims', $data, $matches) ? $matches[1] : null;
return $title;
}
function sortByTimestamp( $a, $b ) {
if ($a[ 'day' ] == $b[ 'day' ]) {
return 0;
}
return ($a[ 'day' ] > $b[ 'day' ]) ? -1 : 1;
}
// Original PHP code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
function getFileListcat($dir)
{
// array to hold return value
$retval = array();
// add trailing slash if missing
if(substr($dir, -1) != "/") $dir .= "/";
// open pointer to directory and read list of files
$d = @dir($dir) or die("getFileList: Failed opening directory $dir for reading");
while(false !== ($entry = $d->read())) {
// skip hidden files
if($entry[0] == ".") continue;
if(is_dir("$dir$entry")) {
$retval[] = array(
"name" => "$dir$entry/",
"type" => filetype("$dir$entry"),
"size" => 0,
"lastmod" => filemtime("$dir$entry")
);
} elseif(is_readable("$dir$entry")) {
$retval[] = array(
"name" => "$dir$entry",
"type" => mime_content_type("$dir$entry"),
"size" => filesize("$dir$entry"),
"lastmod" => filemtime("$dir$entry"),
// added
"tit" => getTitle("$dir$entry"),
"day" => getPostDate("$dir$entry")
);
}
}
$d->close();
usort( $retval, 'sortByTimestamp' );
return $retval;
}
?>
<?PHP
$dirlist = getFileListcat("./");
echo "<ul class=\"sub-menu\">\n";
foreach($dirlist as $file) {
echo "<li class=\"menu-item menu-item-type-taxonomy menu-item-object-category\">\n";
if(preg_match("/\index.php$/", $file['name'])) continue;
echo "<a href=\"{$file['name']}\">",basename($file['tit']),"</a>\n";
echo "</li>\n";
}
echo "</ul>\n";
?>
The last piece of the puzzle. Adding posts
At this point, you just start adding content. Add folders (as long as you add the index.php that looks like this)
Each folder needs a index.php to land on. Once again, here's the one from categories/Camp
<?php include("../../headercat.php"); ?>
<h1>Camping</h1>
<p>Camping, Fishing, Hiking, Biking, Boating, and Skipping Rocks</p>
<?php include("../../cat.php"); ?>
<?php include("../../footer.php"); ?>
and then add each post in each category as Name_of_Post.php using the same Name_of_Post for the title and using the <!--date=20141027 --> date stamp, headercat.php and footer.php includes like shown below.
<!--date=20141027 -->
<?php include("../../headercat.php"); ?>
<h1>Your title</h1>
<p>Content of your post.</p>
<?php include("../../footer.php"); ?>
That's it! I'll try and get a zip file working one day. Like I said, casual computer user ;) Cheers.
Check out some other Bands on .Bandcamp.com. Crazy Fingers (Vancouver 1991), Altogether Steve and the Mercenaries, and Hammy Ham Hands.
Proudly powered by an IDE, a Text Editor, and some Internet Searches.
2024 dispelled.ca end of file.