Jump to content

Populating Bootstrap theme from database


SalientAnimal

Recommended Posts

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.

Link to comment
Share on other sites

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 by mac_gyver
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by SalientAnimal
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.