Ok so here's the thing my classmate did a very good html file...this is the basis of the design of our homepage...there is a part where I should put the news on a collapsible group blah blah..i need help
Here's the query to show news and events(nevermind the paginator Im going to remove it)
<?php
#list all posts from the posts table
try {
//instantiate the class
$pages = new Paginator('3','p');
//collect all records fro the next function
$stmt = $db->query('SELECT postID FROM posts');
//determine the total number of records
$pages->set_total($stmt->rowCount());
$stmt = $db->query('SELECT postID, postTitle, postURL, postDesc, postDate FROM posts ORDER BY postDate DESC '.$pages->get_limit());
while($row = $stmt->fetch()){
echo '<div>';
echo '<p><b><h5><a href="'.$row['postURL'].'">'.$row['postTitle'].'</a></h5></b></p>';
echo '<p>Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).' in ';
$stmt2 = $db->prepare('SELECT catTitle, catURL FROM category, post_cats WHERE category.catID = post_cats.catID AND post_cats.postID = :postID');
$stmt2->execute(array(':postID' => $row['postID']));
$catRow = $stmt2->fetchAll(PDO::FETCH_ASSOC);
$links = array();
foreach ($catRow as $cat)
{
$links[] = "<a href='c-".$cat['catURL']."'>".$cat['catTitle']."</a>";
}
echo implode(", ", $links);
echo '</p>';
echo '<p>'.$row['postDesc'].'</p>';
echo '<p><a href="'.$row['postURL'].'"><button type="button" class="btn btn-primary">Read More</button></a></p><hr>';
echo '</div>';
}echo $pages->page_links();
} catch(PDOException $e) {
echo $e->getMessage();
}
//here is where I want to integrate that loop
<!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">
<link rel="shortcut icon" href="img/logor2.png">
<title>SICS | Home</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/sticky-footer-navbar.css">
<link rel="stylesheet" href="css/bootflat.css">
<style type="text/css">
/*body {
background-image: url('img/background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}*/
.footer a {
color: white;
}
.carousel {
height: 400px;
margin-bottom: 10px;
}
.carousel .item {
height: 400px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.container-bg {
background-image: url('img/sics-icov6.png');
background-repeat: no-repeat;
background-position: center;
}
.area {
border: none;
background-color: white;
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0px 0px rgba(0, 0, 0, .2);
box-shadow: 0 0px 0px rgba(0, 0, 0, .2);
}
.index p {
font-size: 16px;
line-height: 26px;
font-weight: 400;
}
.login-only {
position: relative;
}
.login-only .login-icon {
position: absolute;
top: 2px;
left: 90%;
z-index: 20;
width: 30px;
font-size: 17px;
line-height: 30px;
color: #FFADD6;
text-align: center;
}
.login-area {
border: solid 2px white;
background-color: white;
}
</style>
</head>
<body>
<!-- NAVIGATION -->
<?php include("includes/navbar.php");?>
<!-- CAROUSEL -->
<div class="container">
<div class="">
<div class="jumbotron">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpg">
<div class="carousel-caption">
<h5>Head Caption</h5>
<p>Caption details about the head caption to use this space.</p>
</div>
</div>
<div class="item">
<img src="img/slide2.jpg">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item">
<img src="img/slide3.jpg">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- jumbotron -->
</div><!-- col-md-8 -->
<!-- mini login -->
<!--<div class="col-md-3 login-area">
<h3>Student Log-in</h3>
<form role="form">
<div class="form-group login-only">
<i class="login-icon glyphicon glyphicon-user"></i>
<input type="text" class="form-control" id="idnumber" placeholder="ID Number">
</div>
<div class="form-group login-only">
<i class="login-icon glyphicon glyphicon-asterisk"></i>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="button" class="btn btn-primary btn-lg col-md-offset-8">Log-in</button>
</form>
</br>
</div>-->
</div>
</div><!--container -->
<!-- CONTENT -->
<!-- <div class="container">
<h3 class="page-header">School of Information and Computer Sciences</h3>
</div> -->
<div class="container container-bg">
<div class="index container col-md-12">
<h4 class="text-center">SCHOOL OF INFORMATION AND COMPUTER SCIENCES</h4>
<p class="text-center"></br></br>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</br>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus.</br>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid richardson ad squid.</br></br></br></br></br></p>
</div>
<div class="col-md-1 col-md-offset-2">
<button type="button" class="btn btn-primary btn-lg">Link Button</button>
</div>
<div class="col-md-1 col-md-offset-2">
<button type="button" class="btn btn-primary btn-lg">Link Button</button>
</div>
<div class="col-md-1 col-md-offset-2">
<button type="button" class="btn btn-primary btn-lg">Link Button</button>
</div>
</div>
<div id="newsandevents" class="container">
<div class="col-md-4 col-md-offset-1">
<h4 class="thumbnail text-center">Current News and Events</h4>
<div class="panel-group panel-group-lists" id="accordion">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<img src="img/logor2.png" height="90px" width="180px">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <a href="#">Read More</a></p>
</div>
</div>
</div><!-- end 1st panel-->
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <a href="#">Read More</a>
</div>
</div>
</div><!-- end 2nd panel-->
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <a href="#">Read More</a>
</div>
</div>
</div><!-- end 3rd panel-->
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
Collapsible Group Item #4
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <a href="#">Read More</a>
</div>
</div>
</div><!-- end 4th panel-->
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
Collapsible Group Item #5
</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <a href="#">Read More</a>
</div>
</div>
</div><!-- end 5th panel-->
</div><!--accordion end -->
<!-- Link to Gallery -->
<div class="thumbnail">
<h4 class="text-center">View Photo Gallery</h4>
<a href="../albumgallerysystem/public.php"><img class="custom" src="img/gallery.jpg" height="30px"></a>
</div>
<p><br><br> <img src="img/facebook.png"> <img src="img/twitter.png"> <img src="img/gmail.png"> <img src="img/linkedin.png"><br><br></p>
</div><!-- col-md-4-offset-1-->
<!-- Quicklinks -->
<div class="col-sm-6"><h4 class="thumbnail text-center">Quick Links</h4></div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" src="img/pic2.jpg" >
<div class="caption text-center">
<h5><a href="#">Enrollment</a></h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" src="img/graduates.jpg" >
<div class="caption text-center">
<h5><a href="#">Graduates</a></h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" src="img/offers.jpg" >
<div class="caption text-center">
<h5><a href="#">Job Offers</a></h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" src="img/lcc1.jpg" >
<div class="caption text-center">
<h5><a href="#">Louisian Computer Club</a></h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" src="img/css.jpg" >
<div class="caption text-center">
<h5><a href="#">Computer Science Society</a></h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" src="img/solis.jpg">
<div class="caption text-center">
<h5><a href="#">SOLIS</a></h5>
</div>
</div>
</div>
</div><!-- container-fluid -->
<!--FOOTER -->
<?php include("/includes/footer.php");?>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Bootflat js files -->
<!-- Bootflat's JS files.-->
<script src="js/icheck.min.js"></script>
<script src="js/jquery.fs.selecter.min.js"></script>
<script src="js/jquery.fs.stepper.min.js"></script>
</body>
</html>
Give me some tips on how to integrate it..im not so familiar with this collapsible thing....in the meantime I ma try experimenting on it
