Use of a common css file for a 5 page website

HTML & CSS
#21

I tried doing it on the index.php and it’s not working. Here’s what index.php now looks like:
<?php

$php_scripts = '../php/';
require $php_scripts . 'PDO_Connection_Select.php';
require $php_scripts . 'GetUserIpAddr.php';

{
$ip = GetUserIpAddr();
if (!$pdo = PDOConnect("foxclone_data"))   {	
    exit;
    }
   {
	$stmt = $pdo->prepare("INSERT INTO access (address) values (?)");
    $stmt->execute([$ip]) ;      	
   }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
  <title>Foxclone backup and cloning utility</title>  
  <meta name="description" content= "FoxClone is a Linux based image backup, restore and clone tool using a simple point and click interface." />
  <meta name="robots" content= "index, follow">

  require_once("header.php");

    <!-- Header -->
    <header class="header">
       <div class="header-content">
	<!--	    <div class="p-large">  -->
		        <div class="header__top">FoxClone</div>
		    </div>
   
                            <p class="p-small">FoxClone is a Linux based image backup, restore and
                clone tool using a simple point and click interface. It takes
                images of the partitions on your hard disk (HDD) or solid-state
                drive (SSD) and stores them for later restoration. Image files
                can optionally be compressed to save space.</p>
                         
        </div>
    </header> <!-- end of header -->

 require_once("footer.php");

Here’s what header.php looks like:

    <link rel="stylesheet" type="text/css" media="screen" href="css/foxclone.css"> 
  
    <!-- Favicon  -->
    <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">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

</head>
<body>
	
		     <!-- Navbar -->
		<nav class="navbar" style="background:transparent;">
      
			<div class="navbar-links">
			  <ul>
				<li><a href="index.php">Home</a></li>
				<li><a href="features.php">Features</a></li>
				<li><a href="legal.php">Legal</a></li>
				<li><a href="contact.php">Contact</a></li>
				<li><a href="download.php">Downloads</a></li>
			  </ul>
			</div>
		</nav>

Here’s footer.php:

	<script>
          const toggleButton = document.getElementsByClassName('toggle-button')[0] ;
          const navbarLinks = document.getElementsByClassName('navbar-links')[0];

          toggleButton.addEventListener('click', () => {
              navbarLinks.classList.toggle('active');
            });
    </script> 
</body>   
</html>

This is the result:

failed
failed1366×768 49.3 KB

This is what it should look like:

website
website1366×768 512 KB

Where have I gone wrong?

#22

Well, lots of small things… First, you do NOT need all those extra brackets… They just add bloat to your code and are wasted space. The server does not need to waste time processing empty brackets.

Next, use “require_once” not just “require” . The server will cache them and not need to reload them.
Makes the server processing a little faster!

Then, you load a PHP file named “GetUserIpAddr”, but, then you get it manually. That does not make
sense to me. I bet you got confused there, or there is more in that file that I am not aware of…

Now, onto the header section. As we discussed before, you need the header to be the first line of each
page. Meaning that the file should start with something like this:

<?PHP require_once("header.php"); AND, all parts of the header should be in that. The only thing that you would want above that line would possibly be PHP code that is unique to the one page itself. Since loading the PDO connection and the IPaddr code would run on every page, it should be inside the header.php file, too. And, all of the < html> < head> < title> and < meta> code lines would be the same for every page, so they should be in the header.php file, too. Now, the real error is where you insert the header and footer pages. Those lines, require_once, are PHP which means you need to do it this way.. <?PHP require_once("header.php"); ?>

( You need the PHP to handle these SERVER-SIDE before the browser sees the code. )

Hope that helps!

#23

PDO Connection and GetUserIpAddr(); only apply to this page, so not included in header.php.
Each page has a different meta tag description so I didn’t include meta tags in header.php either. Should the description meta tag be the same on every page?

I made all the corrections that you suggested (minus what I described above). Now I’m getting a stacked menu, not a navbar and still no image. Also, no text formatting. Any other suggestions?

bad2
bad21366×768 52.3 KB

#24

Well, META’s are for the site, not the page. You should not use them for things like colors. Those should be
handled using CSS classes. Not sure why you would want to use META’s for different pages. These are
all used site-wide. Why do you think you need different META’s for different pages? Confused on what you
think they are used for.
As far as PDO connections go, you need to connect to your database if you use data from it on every
page that uses data. Seldom do you not need that connected. Therefore, why not put it into the header?
Now, if you do have PHP code that is needed in one page and not in all pages, just add that PHP code
under the header line. So, in page#13 of 400 pages, you might have something like this:
< ?PHP
require_once(“header.php”);
// New code to handle for this page only…
$some_variable_only_for_this_page = “something”;
// Rest of content for this page only…
?>
The header page would include all of the top section of the page including the home-pictures-legal nav
stuff and general set up info, usually including your database connection. Very seldom would you not
need to connect to the DB. Perhaps on your legal page since it is just for your legal info, but, even then
you might want to pull the latest legal info from a database table so you can change that instead of the
code on page when the legal terms change.
If you are using the GetUserIpAddr() to protect your site, you would need that on every page. If you are
using that to verify the user’s address, you would need it on all of the pages, too. Maybe not?

So, perhaps I need to explain how to debug sites a bit. You site is complex because it has many pages.
Therefore, you need to know what is failing. One simple point to start with is to just check the output of
your PHP code to see what is being sent to the browser. It is very simple to do. Go to the live page on
your site. RIGHT-CLICK anywhere in a blank area, meaning not on a button. Select VIEW-SOURCE.
It will open a new tab with the page’s code in it. ( PS: You can do that anywhere on any site in the world! )
You will NOT see any server code, just the finished product after the server processes your PHP and it
has sent the resulting code to the browser. Now, look down thru the page and see errors in the HTML it
might have. Also, you can see where the code stops and it will give you a way to track how far down your
code has processed. It probably will show up an error right away for you. If not, it will at least show what
parts of your code worked and which did not get sent to the browser.
Start with that and let us know… Are you using a template or have you written this by yourself?
Just curious how this got started…

#25

The site was built from scratch as was the css. I started learning this about 8 months ago.
I thought the meta description was page specific, not site-wide.
The PDO connection and GetUserIpAddr() are only needed on the index.php and in a function called when someone downloads a file on the download page.
The GetUserIpAddr() is used to create an entry in the database so we know who is using the site. The user’s ip is linked to an ip-lookup table so in reports we know what country and region they are connecting from. I realize that this doesn’t account for VPN connections.

It’s all working now. I made a dumb mistake when I created the test site, I forgot to copy the combined css file to the test site.

Sorry for bothering you again.

#26

Never bothered by a good programming puzzle! Ha!

Well, normally when you create a site, you want to track everything, not just when something is downloaded.
The overhead to have the IP info in the header page is minor. So, I would have put it in there. In most sites
these days, you need to register to download things. It is a way to keep tabs on your users. But, it is your
site and you can create it as you see fit. When anyone on this site mentions a way to do something, it is
from their viewpoint and not always 100% correct for the reader. In fact, many times one expert here will
see something the previous one missed and add something or change the overall idea’s going on prior.

Sounds like you have it up and working! Good for you! We will see you at your next post…

Sponsor our Newsletter | Privacy Policy | Terms of Service