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"); ?>

<style>
img {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%20and%20Cpus/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>

<p><b>Old School News Feeds (RSS)</b> <a href="https://dispelled.ca/categories/Code%20and%20Cpus/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(' & ', ' &amp; ', $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(' & ', ' &amp; ', $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(' & ', ' &amp; ', $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 = 20;
    for($x=0;$x<$limit;$x++) {
        $title = str_replace(' & ', ' &amp; ', $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>Summit News</b></p>
<?php
    $rss = new DOMDocument();
    $rss->load('https://summit.news/feed');
    $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(' & ', ' &amp; ', $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 = 15;
    for($x=0;$x<$limit;$x++) {
        $title = str_replace(' & ', ' &amp; ', $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(' & ', ' &amp; ', $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(' & ', ' &amp; ', $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"><h1 id="title" title="Hocus Pocus Black Magic"><a href="https://dispelled.ca/">dispelled.ca</a></h1></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&#8217;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&#8217;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

<p>&nbsp;</p>
<p>&nbsp;</p>
<p><i>Proudly powered by <a href="https://en.wikipedia.org/wiki/Xed">Text Editor</a><a href="https://en.wikipedia.org/wiki/Windows_Notepad">s</a> and some <a href="https://metager.org/">Internet Searches</a>.</i></p>
<p> 2023 dispelled.ca end of file. </p>
<!-- Close Divs -->
</div><!-- .entry-content -->
</div><!-- #content -->
</div><!-- #primary -->
</div><!-- #main .wrapper -->
</div><!-- #page -->
<p>&nbsp;</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"><h1 id="title" title="Hocus Pocus Black Magic"><a href="https://dispelled.ca/">dispelled.ca</a></h1></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&#8217;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&#8217;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.

 

 

Proudly powered by Text Editors and some Internet Searches.

2023 dispelled.ca end of file.