Link to PHP file from a HTML File

Question

I have created an header.html includes file as a menu structure that i use in my index.php.

The problem is, when i click on the link in the index.php it directs it to the file with an .html extension - which actually does not exsist on the live server. On my live server, i get an Error 404 page as a result. When i type the URL with the correct extension (In that case: PlayerReg.php), it directs me to the correct adress and it works. But if i click on the link, i get the error Page.

This is the index.php

<!DOCTYPE html>
<html lang="en">
<head>
<?php include("includes/head.html"); ?>
</head>
<header>
<?php include("includes/header.html"); ?>
</header>
<body>
 

    
</body>
</html>

This the header.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="btn-styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Palanquin+Dark&display=swap" rel="stylesheet"> 
    <title>Chess Team APP</title>
</head>

<header>
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-one">Log-In</a> </div>
        <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-two">Register</a> </div>
        <div class="col-md-3 col-sm-3 col-xs-6"> <a href="PlayerReg.php" class="btn btn-sm animated-button sandy-three">Register a new Player</a> </div>
        <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-four">Learn more</a> </div>
      </div>
      
</header>

So on the site: http://codeplace.primebyte.ch/ when i click on the "Register A New Player" it should direct me to the registration form.

I made sure i uploaded the correct file via FTP.

I would like to add that the head.html file works just fine but there are no links included. I am not even sure if it makes sense that the head is included in the head.html and the header.html

You can't really have two head sections in a page. Why did you do that? — ADyson
– ADyson, Commented Aug 15, 2021 at 7:35
And you certainly should not have two ,<!DOCTYPE html> <html lang="en">s in a single page, that could really screw things up potentially. — ADyson
– ADyson, Commented Aug 15, 2021 at 7:36
It's because i am learning. But i thought it was an issue so i am not that useless as it seems :D — Sanokposo
– Sanokposo, Commented Aug 15, 2021 at 7:45
But my question is.. is that the problem so its not working ? — Sanokposo
– Sanokposo, Commented Aug 15, 2021 at 7:47
It's hard to tell, but it won't be helping. Does the same code work on the test server, but not on the live server? And are you saying that clicking on the link to playerreg.php causes you to be redirected to playerreg.html? It wasn't quite clear. — ADyson
– ADyson, Commented Aug 15, 2021 at 7:52

Professor Abronsius · Accepted Answer · 2021-08-15 10:07:25Z

For your markup to be valid using the combination of files that you have indicated you would need to modify your index.php page to be similar to the following:

In your code you are using includes/head.html etc means that the includes directory is a sub-directory of the current working directory (where the index.php page is) - if the files are located in a different directory they will not be included and will cause an error. By using __DIR__ . '/includes' you provide a full path for PHP to use to find the files and using set_include_path allows you to simply include the file by name once this path is set - small timesaver perhaps.

<?php
    error_reporting(E_ALL);

    set_include_path( __DIR__ . '/includes' );
    require 'head.html';
?>
    <body>
<?php
    require 'header.html';
?>
        <h1>Hello World!</h1>
    </body>
</html>

As the HTML declaration and headers are all contained in head.html that should be the first content included.

#head.html

<!-- head.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="btn-styles.css" />
        <link rel="preconnect" href="//fonts.googleapis.com" />
        <link rel="preconnect" href="//fonts.gstatic.com" crossorigin />
        <link href="//fonts.googleapis.com/css2?family=Palanquin+Dark&display=swap" rel="stylesheet" /> 
        <title>Chess Team APP</title>
    </head>

As the header section is HTML content it should be within the body - so the header.html file should be included after the body has been opened.

#header.html

    <!-- header.html -->
    <header>
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-6"><a href="#" class="btn btn-sm animated-button sandy-one">Log-In</a></div>
            <div class="col-md-3 col-sm-3 col-xs-6"><a href="#" class="btn btn-sm animated-button sandy-two">Register</a></div>
            <div class="col-md-3 col-sm-3 col-xs-6"><a href="PlayerReg.php" class="btn btn-sm animated-button sandy-three">Register a new Player</a></div>
            <div class="col-md-3 col-sm-3 col-xs-6"><a href="#" class="btn btn-sm animated-button sandy-four">Learn more</a></div>
          </div>
    </header>

when rendered in the browser this will yield:

<!-- head.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="btn-styles.css" />
        <link rel="preconnect" href="//fonts.googleapis.com" />
        <link rel="preconnect" href="//fonts.gstatic.com" crossorigin />
        <link href="//fonts.googleapis.com/css2?family=Palanquin+Dark&display=swap" rel="stylesheet" /> 
        <title>Chess Team APP</title>
    </head>
    <body>

        <!-- header.html -->
        <header>
            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-6"><a href="#" class="btn btn-sm animated-button sandy-one">Log-In</a></div>
                <div class="col-md-3 col-sm-3 col-xs-6"><a href="#" class="btn btn-sm animated-button sandy-two">Register</a></div>
                <div class="col-md-3 col-sm-3 col-xs-6"><a href="PlayerReg.php" class="btn btn-sm animated-button sandy-three">Register a new Player</a></div>
                <div class="col-md-3 col-sm-3 col-xs-6"><a href="#" class="btn btn-sm animated-button sandy-four">Learn more</a></div>
              </div>
        </header>
        <h1>Hello World!</h1>
    </body>
</html>

Everything is in the correct place

Collectives™ on Stack Overflow

Link to PHP file from a HTML File

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related