Can't use Bootstrap in PHP file

Question

I'm fetching some data from a MySQL database onto a WebPage. I came up with a simple PHP page that queries the database and shows the query in the form of a table and it works just fine.

However, when I try to add bootstrap to the page and style it, the entire page stops working.

Here's my index.php

<!DOCTYPE html>
<html>
<head>
<title>MakersBox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<center>
<h1>Sensor Testing Dashboard</h1>
<div class="container">
<?php
echo "<table class='table table-hover' align=center>";
 echo "<thead><tr><th>Sensor Id</th><th>Temperature</th><th>Light</th><th>Last Updated</th></tr></thead>";

class TableRows extends RecursiveIteratorIterator {
    function __construct($it) {
        parent::__construct($it, self::LEAVES_ONLY);
    }

    function current() {
        return "<td>" . parent::current(). "</td>";
    }

    function beginChildren() {
        echo "<tr>";
    }

    function endChildren() {
        echo "</tr>" . "\n";
    }
}

$servername = "localhost";
$username = "root";
$password = "paanikiboond";
$dbname = "testbox1";

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("SELECT * FROM sensor ORDER BY LastUpdate DESC LIMIT 1");
    $stmt->execute();

    // set the resulting array to associative
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);

    foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
        echo $v;
    }
}
catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}
$conn = null;
echo "</table>";
</div>

$url1=$_SERVER['REQUEST_URI'];
header("Refresh: 3600 ; URL=$url1");
?>

</body>
</html>

Any idea what I may be doing wrong here?

I so much hate when people are mixing HTML and PHP. Folks, please use template engines, do not make your live miserable. — Andrejs Cainikovs, Nov 15 '17 at 08:34
@MyMomSaysIamSpecial rightly said... Anyways.. I made the change you said and it still doesn't work. — YaddyVirus, Nov 15 '17 at 08:37

Doc Roms · Answer 1 · 2017-11-15T12:33:07.637

First, I think you must separte properly your HTML, and your PHP.

In your code, mixte HTML tag + HTML tag from PHP code in your HTML body is... not too regulatory. And very difficult to maintain.

You can, create an architecture like that :

<?php 
    // Create connexion, and get your results.
    $connexion = new PDO();
    $results = [];
?>

<!DOCTYPE html>
<html>
    <head>
        <!-- Your link and scripts-->
    </head>
    <body>
        <h1></h1>
        <div>
           <?php if (!empty($results){ ?>
           <table class='table table-hover'>
               <!-- Show your results. -->
               <? foreach($results as $result)
                  {

                  }
               ?>
           </table>
           <?php }else{
               echo 'no results found';
             }
           ?>
        </div>
    </body>
</html>

Also, Boostrap is a Javascript library, It doesn't work directly on PHP, but it read the HTML structure, with your elements and their classes. If your javascript is loaded, and your structure is well done, that work! You have samples and documentation of Boostrtap here;

In your code you forgotten to close your <head></head> element and you've a problem in this lines :

echo "</table>";  // that is PHP, but PHP is not close with `?>`


</div> <!-- That is HTML but in PHP code witouth `echo ''` -->

If PHP and HTML has well separted, you will have fewer problems of forgetting :D You have many links in Internet for understand this good practise

PS : don't forgot to code with proper line indentions: it's much more readable:

<html>
<head> <!-- Very difficult to see we havn't a </head> close tag -->
<body>
<div>
My content
</div>
</body>
</html>

<html>
    <head> <!-- Very easy to see we havn't a </head> close tag -->
    <body>
        <div>
            My content
        </div>
    </body>
</html>

Hope I help you.

SmartCoder · Accepted Answer · 2017-11-15T08:46:49.783

2

for one thing you arent closing your <head>, so your code should be

<!DOCTYPE html>
<html>
<head>
<title>MakersBox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
...

EDIT: close to the bottom your code should look like

...
echo "</table>";
echo "</div>";

$url1=$_SERVER['REQUEST_URI'];
header("Refresh: 3600 ; URL=$url1");
?>

</body>
</html>

edited Nov 15 '17 at 08:46

answered Nov 15 '17 at 08:32

SmartCoder

413
2
13

Did that. No effect – YaddyVirus Nov 15 '17 at 08:38
edited answer,as i found a syntax error in your code – SmartCoder Nov 15 '17 at 08:47
Yep. That does it. – YaddyVirus Nov 16 '17 at 12:09

score 0 · Answer 3 · answered Nov 15 '17 at 09:21

</center><!--that where you forgot to add this as it needs to be closed off-->
</body>
</html>

Also, you might be better off put Javascript on the bottom of the pages, Not sure if it will work.

Second things you need use Web developer tools to diagnosed this issues. it will help a lot. also, you might need to test out different browser if it's same issues or not.

Alberto Favaro · Answer 4 · 2017-11-15T09:43:25.063

I tried your code. I only find these three mistakes:

You must use echo for build HTML code from PHP and then close your div container

   $conn = null;
   echo "</table>";

   //wrong way expecting statement 
   </div>

   //correct way for use HTML inside PHP tags
   echo "</div>";

The line where you add a header "refresh" generate a warning because "Cannot modify header information - headers already sent"
```
   $url1=$_SERVER['REQUEST_URI'];
   header("Refresh: 3600 ; URL=$url1");
```
You use <center> tag that it's deprecated so you should use CSS instead and you not close this tag

Can't use Bootstrap in PHP file

4 Answers4