CODEWITHSUNDEEP
phphtml
Sanokposo
Sanokposo

Reputation: 9

Link to PHP file from a HTML File

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

Upvotes: 0

Views: 262

Answers (1)

Professor Abronsius
Professor Abronsius

Reputation: 33823

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

Upvotes: 1

Related Questions