PDA

View Full Version : Display information from database



SalientAnimal
12-14-2015, 09:41 AM
Hi All,

I'm new to using bootstrap and can see that it can be a very nice tool for making your pages look funky. I found a bit of bootstrap code to display user lists. However what I have noticed is most of the demo have hardcoded details. What I would like to know is how do I pull this information from a database to show:
1. Online users?
2. Offline users?

I already have the list of user status populating, but how / where do I put it into the bootstrap?

Here is the bootstrap link: https://github.com/Cyruxx/Bootstrap-User-List-Snippet

And the html page code looks as follows (I will be saving it as PHP so it can extract the data from the database, and then use the final file as an include):


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