php - 无法在 PHP 文件中使用 Bootstrap

标签 php mysql twitter-bootstrap

我正在从 MySQL 数据库中获取一些数据到网页中。我想出了一个简单的 PHP 页面来查询数据库并以表格的形式显示查询,它工作得很好。

但是,当我尝试向页面添加 Bootstrap 并为其设置样式时,整个页面都停止工作了。

这是我的 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>

知道我在这里做错了什么吗?

最佳答案

首先,我认为您必须正确分离 HTML 和 PHP。

在您的代码中,在您的 HTML 正文中混合 HTML 标记 + 来自 PHP 代码的 HTML 标记……不太合规。而且很难维护。

您可以创建这样的架构:

<?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>

此外,Boostrap 是一个 Javascript 库,它不能直接在 PHP 上运行,但它可以读取 HTML 结构、您的元素及其类。如果您的 javascript 已加载,并且您的结构做得很好,那就行了!您有 Boostrtap 的示例和文档 here ;

在您的代码中,您忘记关闭 <head></head>元素,你在这行有问题:

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


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

如果 PHP 和 HTML 分离得很好,你就会有更少的遗忘问题 :D 你有 many links在互联网上了解这种良好做法

PS:不要忘记用适当的行缩进编码:它更具可读性:

<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>

希望能帮到你。

关于php - 无法在 PHP 文件中使用 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47302619/

相关文章:

PHP CLI 不使用额外的 .ini 文件

php - 如何根据不同的外部值显示 mysql 表中的行

javascript - CSS 重新定位的内容留下足迹

css - 如何在 bootstrap 3 中向下滚动带有固定标题(导航栏)的表格行时将表格标题(thead)放在顶部?

java - 使用谷歌地图获取到最近地标(购物中心、医院和机场等)的距离

php - PHP变量中的地址,没有Javascript的谷歌地图嵌入?

javascript - 在 jquery 中增加 $_SESSION 索引

mysql - 如何通过添加两列来执行 SELECT?

php - 将 php 数组与 sql 结果进行比较并执行某些操作

javascript - Bootstrap 导航栏汉堡菜单不起作用