Populating Bootstrap theme from database

SalientAnimal · December 15, 2015

Hi All,

I'm hoping that this is the correct place to be posting this question. I have a Bootstrap theme which I downloaded. Having just recently discovered bootstrap, I am still struggling to to fully customize the templates and was hoping that I could get some advice / assistance here.

I have over the last week written a script that I would like to use to track user activity and I have gotten this to work 90% like I want it to. One of the challenges I have with this, is how to make the information display in the bootstrap template. The demo's have the information hard coded, and I haven't been able to find some thing that tells me how to use the template, linking it to a database to populate the information.

Here is the code to the bootstrap theme (Link to the full theme: https://github.com/Cyruxx/Bootstrap-User-List-Snippet) :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Admin Table for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="adminTable.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<br><br>
<div class="container">
    <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>Cyruxx</strong><br>
                <span class="text-muted">User level: Administrator</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>Cyruxx</strong><br>
                                <table class="table table-condensed table-responsive table-user-information">
                                    <tbody>
                                    <tr>
                                        <td>User level:</td>
                                        <td>Administrator</td>
                                    </tr>
                                    <tr>
                                        <td>Registered since:</td>
                                        <td>11/12/2013</td>
                                    </tr>
                                    <tr>
                                        <td>Topics</td>
                                        <td>15</td>
                                    </tr>
                                    <tr>
                                        <td>Warnings</td>
                                        <td>0</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>

		

                </div>
            </div>
        </div>
    </div>
</div><!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="userTable.js"></script>
</body>
</html>

Any help / assistance here will really be appreciated. Thanks.

mac_gyver · December 15, 2015

you would need to dynamically produce the two div sections - <div class="row user-row"> ... </div> and <div class="row user-infos cyruxx"> ... </div> by turning those sections into a template with replaceable parameters for the values/portions that are dynamic.

the only 'magic' to make the javascript work is the data-for=".cyruxx" class selector inside the first div must be a valid class selector and match what is used in the second div definition - <div class="row user-infos cyruxx">

Edited December 15, 2015 by mac_gyver

SalientAnimal · December 15, 2015

Are the dynamic div sections required?

Or would I be able to do this with just one div?

I will try and find something on how to create the dynamic div sections.

SalientAnimal · December 15, 2015

From what I can see, the css seem to dynamically generate the different div classes, although I could be wrong. How would I update the data-for".cyruxx" dynmically?

mac_gyver · December 15, 2015

the example code has information for three users hard-coded into it, i.e. there's three sets of the two related div's in it. if you want to do this for a dynamic number of users that you retrieve from a database query, you will need to dynamically produce each of the two related div's for each user you want to display.

you would do this by looping over the data you retrieve from your database query, populate, then output a template version of the two related div's with the correct data for each record from the query.

the only issue you should be facing is what sort of template system you want to use. they range from simple php echo variable statements up to full template engines that implement logic, loops, functions, caching...

SalientAnimal · December 15, 2015

Would a simple echo statement do the trick? Or should I rather look to ind out more about something a little more complex?

Reason I'm asking is because when the list of users is populated I would like to perform a number of functions by simply clicking on the drop down arrow associated with each user. This will then give me 3 links, i.e send a message, edit user, delete user.

This is the extent of my current idea, by I can see it extending once I have the basics working

Edited December 15, 2015 by SalientAnimal

mac_gyver · December 15, 2015

the template system is only concerned with producing and outputting the html document. it has nothing to do with what functionality is present on the page.

what template system you use is dependent on your programming skill and knowledge and how much time you want to invest in learning something new.

Sign In

Populating Bootstrap theme from database

Recommended Posts

SalientAnimal

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

SalientAnimal

Link to comment

Share on other sites

SalientAnimal

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

SalientAnimal

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information