来自数据源的动态DIV(PDO MySQL)

时间:2015-12-15 12:11:22

标签: html twitter-bootstrap dynamic

我正在使用Bootstrap模板来显示我的在线用户。问题是bootstrap模板有硬编码用户。

我从数据库中选择我的用户,并且需要根据从数据库返回的信息动态生成每个DIV类部分。

如何生成这些DIV类,以便从数据库中填充每个用户的状态?

这就是我所拥有的...我不知道如何生成不同的DIV。当我按原样使用它时,我将所有结果显示在一个div中,并且随着越来越多的填充它们变得越来越小。

<div class="container"><?php $stmtonl = $db->prepare('SELECT * FROM sys_members');   #last_active BETWEEN DATE_SUB(NOW(),INTERVAL 10 SECOND) AND NOW()
$stmtonl->execute();
#$num_rows = $stmtonl->fetchColumn();   
#if ($num_rows > 0) {
while ($row = $stmtonl->fetch(PDO::FETCH_ASSOC)) {

    echo "
    <div class='well col-sm-12 col-md-8 col-md-offset-2'>
    <div class='row user-row'>
        <div class='col-md-1'>
            <img class='img-circle'
                 src='https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50'
                 alt='User Pic'>
        </div>


        <div class='col-md-10'>
            <strong>" . $row['username'] . "</strong><br>
            <span class='text-muted'>User level: " . $row['username'] . "</span>
        </div>
        <!-- add .rowname class to attribute data-for (Dropdown!)-->
        <div class='col-md-1 dropdown-user' data-for='.cyruxx'>
            <i class='glyphicon glyphicon-chevron-down text-muted'></i>
        </div>
    </div>

    <!-- Add data-for class to this row -->
    <div class='row user-infos cyruxx'>
        <div class='col-sm-10 col-md-10 col-md-offset-1'>
            <div class='panel panel-primary'>
                <div class='panel-heading'>
                    <h3 class='panel-title'>User information</h3>
                </div>
                <div class='panel-body'>
                    <div class='row'>
                        <div class='col-md-3'>
                            <img class='img-circle'
                                 src='https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100'
                                 alt='User Pic'>
                        </div>
                        <div class='col-md-6'>
                            <strong>" . $row['username'] . "</strong><br>
                            <table class='table table-condensed table-responsive table-user-information'>
                                <tbody>
                                <tr>
                                    <td>User level:</td>
                                    <td>" . $row['username'] . "</td>
                                </tr>
                                <tr>
                                    <td>Registered since:</td>
                                    <td>" . $row['username'] . "</td>
                                </tr>
                                <tr>
                                    <td>Topics</td>
                                    <td>" . $row['username'] . "</td>
                                </tr>
                                <tr>
                                    <td>Warnings</td>
                                    <td>" . $row['username'] . "</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class='panel-footer'>
                    <button class='btn btn-sm btn-primary' type='button'
                            data-toggle='tooltip'
                            data-original-title='Send message to user'><i class='glyphicon glyphicon-envelope'></i></button>
                    <span class='pull-right'>
                        <button class='btn btn-sm btn-warning' type='button'
                                data-toggle='tooltip'
                                data-original-title='Edit this user'><i class='glyphicon glyphicon-edit'></i></button>
                        <button class='btn btn-sm btn-danger' type='button'
                                data-toggle='tooltip'
                                data-original-title='Remove this user'><i class='glyphicon glyphicon-remove'></i></button>
                    </span>
                </div>
            </div>
        </div>
    </div>

    ";
}   #}
#   else {

#echo "No Users Online";
#}
?>     
</div>
</div>

0 个答案:

没有答案