0

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

2
Contributors
4
Replies
17
Views
3 Years
Discussion Span
Last Post by RonKevinT.Manuela
1

Well it's nice to see someone using OOP for a change in the paginator class. Try to keep to this good habit aha.

Simply put the while loop inside your code where you want the loop.

while($row = $stmt->fetch()){
    echo '<div>';
    ...
}

If you're on about inproving the PHP while you're here, take a look at this.

# Keep this at the top of the page with all of your code
$output = '';
while($row = $stmt->fetch()){
    $output .= '<div>';
    ...
}

# Shove this where you need the output
echo $output;

The above is a much neater way of managing your code, and is far more easier to understand.

I'm not quite sure how you plan to use this in your code. If you want to use the collapse in Bootstrap, use the following code in the output loop above (have assumed the column postID, just change this to your Primary Key:

$output = '<div class="panel-group" id="accordion">';

while(..){
    $output .= '<div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#';
    $output .= $row['postID'];
    $output .= '">';
    $output .= $row['postTitle'] ;
    $output .= '
            </a>
          </h4>
        </div>
        <div id="';
    $output .= $row['postID'];
    $output .= '" class="panel-collapse collapse in">
          <div class="panel-body">
              <p>Posted on ';
    $output .= date('jS M Y H:i:s', strtotime($row['postDate']));
    $output .= ' in ';
    $output .= $row['postDesc']
    $output .= '</div>

      </div>';
}

$output .= '</div>';

It's huge and clumsy, but will give you a starting point. Also maybe develop the PHP into a proper class (I'm very busy otherwise I'd help with that too), and reference it properly. Hope this helps!

0

sir, i was trying to run that code but it gives me Parse error: syntax error, unexpected '$output' (T_VARIABLE) in C:\wamp\www\SICS\home.php on line 193

    <?php
            $output = '<div class="panel-group" id="accordion">';
            $stmt = $db->query('SELECT postID, postTitle, postURL, postDesc, postDate FROM posts ORDER BY postDate DESC');
    while($row = $stmt->fetch()){
    $output .= '<div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#';
    $output .= $row['postID'];
    $output .= '">';
    $output .= $row['postTitle'] ;
    $output .= '
    </a>
    </h4>
    </div>
    <div id="';
    $output .= $row['postID'];
    $output .= '" class="panel-collapse collapse in">
    <div class="panel-body">
    <p>Posted on ';
    $output .= date('jS M Y H:i:s', strtotime($row['postDate']));
    $output .= ' in ';
    $output .= $row['postDesc']
    $output .= '</div></div>';
    }
    $output .= '</div>';
?>
1

Use the following code, I missed a ; on line 23 above.

$output = '<div class="panel-group" id="accordion">';
$stmt = $db->query('SELECT postID, postTitle, postURL, postDesc, postDate FROM posts ORDER BY postDate DESC');

while($row = $stmt->fetch()){
    $output .= '<div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#';
    $output .= $row['postID'];
    $output .= '">';
    $output .= $row['postTitle'] ;
    $output .= '
        </a>
        </h4>
        </div>
        <div id="';
    $output .= $row['postID'];
    $output .= '" class="panel-collapse collapse in">
        <div class="panel-body">
        <p>Posted on ';
    $output .= date('jS M Y H:i:s', strtotime($row['postDate']));
    $output .= ' in ';
    $output .= $row['postDesc'];
    $output .= '</div></div>';
}
$output .= '</div>';
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.