CODEWITHSUNDEEP
phpinclude
sbswim
sbswim

Reputation: 276

PHP Include Trouble

I have been attempting to have includes as a part of my website for about 2 weeks now. Throughout multiple questions and long research I have figured out that php is the best way to go. I started with trying Server side includes in the html comment way, then I went to php and researched all of the different extensions needed for the include to work and so on. I had downloaded MAMP for the mac knowing that it would work with includes. I tried again and again with similar code with php and for whatever reason it did not work. Whether it was thenewboston on youtube or php's manual I had no success.

Finally, I came upon http://www.w3schools.com/php/php_includes.asp . I had saved their code into a folder and ran it on MAMP, it magically worked. I thought if I implemented this into my website it would work. Again, no success. So I'm asking you for help.

The Code:

Footer: (footer.php)

<?php echo'<div class ="footer">
<p>Contact Us! <br> @allwaterpolo</p>
<a href="#"><img src ="img/Facebook_Png_01.png" class="facebook" id="FaceBook Link" /> </a>
<a href="#"><img src ="img/Uiconstock-Socialmedia-Instagram.ico" class="instagram" id="Instagram Link" /> </a>
 <a href="#"><img src ="img/Twitter_Logo_Hd_Png_03.png" class="twitter" id="Twitter Link" /> </a>
<a href="#"><img src ="img/Youtube_icon.png" class="youtube" id="YouTube Link" /> </a>
<div class="aboutus">
<a href ="htmlfiles/aboutUs.php">About <br>Us</a>
</div>
<div class= copyright>
Copyright &copy; 2016<script>new Date().getFullYear()>2016&&document.write("-"+new Date().getFullYear());</script>, <br> All Water Polo. All rights reserved
</div>
</div> ';?>

Header:(header.php)

<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> <a href ="index.html">Water Polo!</a></h2> </div>';?>

Navigation Bar:(navbar.php)

<?php echo'<div class="navBar">
    <ul>
    <li><a href ="htmlfiles/history.php">History
    </a></li>
    <li><a href ="htmlfiles/started.php"> Get Started</a></li>
    <li><a href ="htmlfiles/positions.php">Positions</a></li>
    <li><a href ="htmlfiles/rules.php">Rules</a></li>
    <li><a href ="htmlfiles/nationalleague.php">National League</a></li>
    <li> <a href ="htmlfiles/extras.php">Extras</a>
        <ul>
            <li><a href="#">Videos</a> </li>
            <li><a href="#">Plays</a> </li>
            <li><a href="#">TBA</a> </li>
        </ul>
    </li>
    </ul>
</div>';?>

A Page In My Website: (aboutUs.php)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
<link rel="icon" type="image/png" href="img/favicon.ico" />
</head>
<body>
<div class="wrapper">
<?php
include 'header.php' ;
?>
<?php
include 'navbar.php' ;
?>
<div class= "content">
</div>
<?php
include 'footer.php' ;
?>
</div>
</body>
</html>

(I'm not allowed to post direct images yet) Directory Structure

This time with the edition of the ../includes/header.php my page showed some hope. The only problem was that the includes did not access the css and image files and ended up with something like this: Sorry can't publish two pictures, but the new page had no css impact and looked like plain text.

Upvotes: 1

Views: 725

Answers (3)

cssyphus
cssyphus

Reputation: 40106

If you are using MAMP, then I believe you put website files into a folder called www, am I right? Assume that is correct. You have a folder for this website called waterpolo-site, so you should be able to display the website by typing this into Safari's address bar:

localhost/waterpolo-site

Safari's address bar should display: http://waterpolo-site/index.html. If this is not correct, please correct me.

(1) Usually, we would structure the website thus:

example.com
    - css
        styles.css
        bootstrap.min.css
    - js
        index.js
        jquery.min.js
        bootstrap.min.js
    - img
        logo.jpg
        pic1.jpg
        pic2.jpg
        another_pic.jpg
    - inc
        connect.inc.php
        head.inc.php
        header.inc.php
        footer.inc.php
        nav.inc.php
    index.php
    about.php
    history.php
    positions.php

If you structure the website folder structure as above, then all paths to files are straight-forward: include "folder/file.ext" or <link href="folder/file.ext"

(2) The file head.inc.php might look something like this:

<?php
    session_start();
    include 'inc/connect.inc.php';
    //Any more PHP instructions here
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>My Soccer Website</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="A description of my website goes here" />
    <meta name="keywords" content="soccer, football, hooligans, beer, beckham, stadium, scalpers" />
    <meta name="robots" content="index,follow" />

    <link rel="icon" type="image/png" href="img/favicon.png?v=2" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
</head>

(3) Notice that PHP code is only used to do PHP stuff - call functions, database lookups, session_start, etc. Once you close the PHP tag ?> then HTML is output as if it was a .html file.

(4) The primary difference between a file that ends in .php versus one that ends in .html is that the PHP file can also process PHP commands. Both can process HTML exactly the same. There is really no need to ever use the file extension .html

(5) Notice the little trick on the favicon. If you update a file (css, js, etc) and you want visitors to use the new file instead of a previously fetched version stored in their browser's cache, then you can add a ?xxx=yyy fake GET parameter and presto! they will download the updated version from your server. Next time they visit, though, they may use the version from cache unless you change that GET param again.

Upvotes: 1

Lionel Chan
Lionel Chan

Reputation: 8079

When you do include using relative file path, PHP find the file by using current directory first, and then look for it in the include paths (include paths can be found via phpinfo()).

In your case, your footer.php, navbar.php, and header.php are all located in the includes directory, but your aboutUs.php located in the htmlfiles directory.

To fix it, you can do this:

aboutUs.php

include dirname(__DIR__) . '/includes/header.php';

Experience talk: We don't usually do include '../includes/header.php' because this is evil. Although it looks fine from the first glance, if there is another file located in yet another directory try to include aboutUs.php, the relative path will change, and again your header will not be found. Doing dirname(__DIR__) is to ensure "I want the PHP to search this file relative to the directory of this current file, and not other files"

The include statement is quite powerful, as it can be used for other fancy stuff as well, for example, include an array from another php file (for configurations), or even include the content from a URL. Do read it up :)

Upvotes: 0

Chris Rutherfurd
Chris Rutherfurd

Reputation: 1687

The PHP include statement is relative to the file it is accessed through...

EG:

If you access the site using index.php then the includes need to be...

include("includes/footer.php");

If you are accessing the pages directly, eg: http://domain.com/htmlfiles/aboutUs.php then the include needs to be...

include("../includes/footer.php");

Using the ../ path prefix is the equivalent of saying go up one level in the directory structure.

Upvotes: 0

Related Questions