Thursday, August 1, 2019

A lesson in PHP:A navigation bar

What a wonderful navbar on my website, showing itself in all its glory. But, one may question how I designed such a navbar. Well, I'm here to tell you, on this "A lesson in PHP"!
Now, a lot of you probably know that I used to be on Neocities, at this URL, however I eventually moved seeing as it got too difficult for me to keep going on that website. Back then, EVERYTHING was done purely by HTML and CSS, and once you have too many pages(like I was planning), things would get too hard to redo. My move to InfinityFree was almost solely powered by the amount of pages I was planning, on top of the infinite hard drive space I'm given and the other features I was promised, such as having a forum(which is currently shut down thanks to BS involving a spambot). Before we get into how the internals of the PHP work, we have to understand a bit about the CSS and HTML of the old bar.

So, the old navbar's CSS is actually identical to the current navbar's CSS, just implemented slightly differently. We just have to worry about 3 elements under #nav. li, a, li a:hover. Li, just for the horizontal bar, a for the "active" tabs(the ones you haven't clicked but are active and not crossed out), and li a:hover, for the color difference when you hover over them.
As for the HTML, the idea was that on each page and subpage, I'd manually set the correct tab to ".active"(the light color), and then set everything else to a. While this achieved what I now have the PHP doing automatically, it meant whenever I updated the navbar, I would have to do this x-amount of times for EACH PAGE THAT HAD A NAVBAR. Given that I planned to do 9 main pages with a bunch of subpages, this would mean I would have to update each subpage on top of the main pages. Obviously, a no go, which is where PHP comes to handle this.
And now, useless conjecture aside, here is the part you were waiting for. In an include folder, a 983 byte file rests, labeled nav.php. This is included with every page. Now, what does nav.php do? To put it simply, it is the new navigational bar, that is loaded up on EVERY webpage. Let me break this page down for you.
$directory = array(1=>'Armed');
$currentpage = $_SERVER['REQUEST_URI'];
$directory = explode("/", $currentpage);
 This is at the very start of the page. This effectively makes it so that there is an array named "directory" which has each and every current page. Although I only ever use the first part of this URL($directory[1]), one could theoretically use this to make expanding navbars, of which I have no plans to do right now. Let's say $directory[1] is called while you're on any part of the livechat page. The PHP code will receive the direction "hey, you're on the livechat page, let me do my code here."
if ($directory[1] == "index.html") {
echo '<a class="active" href="../index.html">Index</a>';
} elseif ($directory[1] == "") {
echo '<a class="active" href="../index.html">Index</a>';
} else {
echo '<a href="../index.html">Index</a>';
This code does something with the $directory[1] call. This asks, "hey, am I on index.html?" If it isn't, then it makes sure to check if it's on the first level(the first page you arrive at when you go to my website) of the website, and if it is, it just says "okay, well I'm on the index.html page anyways." The echo commands tell the browser "okay, this HTML goes here" after deciding where it is. In short, this is repeated numerous times(with the exception to the blog and Xboards link), each one checking where it is, to see if it's apart of the right group.
And that is how the navigation bar works on my website. Turn in next Thursday for another post!

Labels: ,


Post a Comment

Subscribe to Post Comments [Atom]

<< Home