How to avoid repeating html code?

Asked

Viewed 2,052 times

4

Good night, you guys. The thing is, I’m using the bootstrap and I would like to know how I avoid repeating the same codes on all pages, because the header and footer are the same, it would make the code more legible, I searched and saw that I should use PHP’s Include, but I don’t know how to use it, Help me out, please. Grateful ;)

3 answers

6


The first thing to do is to separate your website into 3 files.

  • header.html
  • php content.
  • footer.html

As you can see in the header you will have the header and footer the footer.

Then in the conteudo.php you will do the includes, the header.html at the beginning of the code and footer.html at the end, follows example:

<?php include 'header.html'; ?>

<h1>Nome da pagina</h1>

<?php  include 'footer.html'; ?>

And so for all pages that want to reuse the header and footer.

Obs. The files that will be included do not necessarily need to be PHP, only where you want to include PHP is required.

  • If you don’t want to use. php files on your site, you can do this using jQuery.

  • Perfect @Ricardo

  • I did like you said, but it still doesn’t work, like, I put all the html on the page, right, then I take all the code from Navbar and play in a separate document, when I give the include it n shows the navbar.

  • I managed to solve, I had not put the extension of the index page as php.

  • @Very good tiagosilveira :) Remembering that you can have as many includes as you want, for example also separate a side menu

3

Just save the header and footer in files separated by ex header.php and footer.php

after that on your main page instead of header and footer you make a include

<?php include("header.php"); ?>

does the same thing in place of the footer

<?php include("footer.php"); ?>

1

You can save to different files. This makes the code cleaner, readable and faster in case of later editions, of course if used correctly. A beautiful example is if all pages have the same footer and you need to change information that is present in it, without separating the files you would have to edit at all, giving more work. Below is an example of an index, fragmented into several files:

 <!DOCTYPE html>
<?php 
include("inclusoes/cabecalho.php");
if(isset($_GET['sair']) && $_GET['sair']== true){
    unset($_SESSION['usuario']);
    }
 ?>
<body>
<header id="header"><!--header-->
<?php include_once("inclusoes/menu.php");?>
</header>
<!--/header-->
<?php
if(!isset($categoria)|| $categoria==""){
 include_once("inclusoes/inicio.php");
}
else if(isset($categoria) && $categoria!=""){
    if(file_exists("inclusoes/$categoria.php")){
     include_once("inclusoes/$categoria.php");
    }
    else{
         include_once("404.php");   
        }
    }
 ?>
<?php include_once("inclusoes/rodape.php");?>
</body>
</html>

I hope this helps you understand. Recalling that the include_once has the assurance that the file will not be included again if it has been included before.

  • But then how should the structure of the aquives be separate? changes something due to the fact that I use bootstrap?

  • I did not understand your doubt... But if I understood, it does not change no, because with the includes at the end the file will be the same, it is only divided. As in my example there, in my header are all my bootstrap links, css, js and others... It is only separated, but with include, when the page is loaded it becomes only one, understands?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.