While cycle result to three columns - php

I have following HTML code and I need make results from db, but I don't know how. There are three static divs. I don't know how to end static div and how to recognize columns. Can you help me please? Please see structure of html code with numbers of results. Thank for help.
<div class="static-div">
<div class="first-div">1</div>
<div class="second-div">4</div>
<div class="third-div">7</div>
<div class="first-div">10</div>
<div class="second-div">13</div>
<div class="third-div">16</div>
<div class="first-div">19</div>
<div class="second-div">22</div>
<div class="third-div">25</div>
</div>
<div class="static-div">
<div class="first-div">2</div>
<div class="second-div">5</div>
<div class="third-div">8</div>
<div class="first-div">11</div>
<div class="second-div">14</div>
<div class="third-div">17</div>
<div class="first-div">20</div>
<div class="second-div">23</div>
<div class="third-div">26</div>
</div>
<div class="static-div">
<div class="first-div">3</div>
<div class="second-div">6</div>
<div class="third-div">9</div>
<div class="first-div">12</div>
<div class="second-div">15</div>
<div class="third-div">18</div>
<div class="first-div">21</div>
<div class="second-div">24</div>
<div class="third-div">27</div>
</div>

You can achieve this output by using Arrays.
we will create three arrays for given three static divs.
try the following code.
The variable $i is not for loop iteration so if you are using $i for iteration please replace the following $i with other name.
$i=1;
$first_arr=array();
$sec_arr=array();
$third_arr=array();
while(database loop condition)
{
if($i==1)
{
$val=' <div class="first-div">'.$row['column'].'</div>';//$val is a variable from database query result
array_push($first_arr,$val);
$i++;
}
elseif($i==2)
{
$val=' <div class="second-div">'.$row['column'].'</div>';//$val is a variable from database query result
array_push($sec_arr,$val);
$i++;
}
elseif($i==3)
{
$val=' <div class="second-div">'.$row['column'].'</div>';//$val is a variable from database query result
array_push($sec_arr,$val);
$i=1;
}
}
$first_div=implode('',$first_arr);
$sec_div=implode('',$sec_arr);
$third_div=implode('',$third_arr);
echo '<div class="static-div">'.$first_div.'</div>
<div class="static-div">'.$sec_div.'</div>
<div class="static-div">'.$third_div.'</div>';

Related

PHP and JSON entering inside a Div

So, I have a JSON array, which parses just fine in the layout view, but the elements from json stack vertically and I need them to be horizontally aligned.
Here is the example code
<div class="swiper-container mySwiper2 swiper-container-h">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-padding">
<?php include_once("team_hq.php"); ?>
</div>
<div class="swiper-slide swiper-padding bkg bkg3">
<h2>Partners</h2>
<?php
showStuff($stuff, "Partners"); ?>
</div>
<div class="swiper-slide swiper-padding bkg bkg12">
<h2>Production</h2>
<?php showStuff($stuff, "Production"); ?>
</div>
<div class="swiper-slide swiper-padding bkg bkg13">
<h2>Sales</h2>
<?php showStuff($stuff, "Sales"); ?>
</div>
<div class="swiper-slide swiper-padding bkg bkg14">
<h2>Support</h2>
<?php showStuff($stuff, "Support"); ?>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
The question I'm asking is how can I make the content which is pulled from the $stuff variable present horizontally instead of vertically as is now.
To position HTML elements horizontal either use:
Flexbox or CSS-Grid or Floating
But assuming your function showStuff just prints a JSON string, you'd have to work with your $stuff variable. E.g. loop over the it's content – with PHP I suppose – and build the HTML-Tags according your needs.

why all div inside php tag not work

WHy all div inside php tag not work
<body>
<div class="main-section ">
<?php
$result=$restaurant->runQuery("SELECT fooditem.*,restaurant.* from fooditem ,restaurant ,foodcategory where restaurant.restaurantID=foodcategory.restaurantID and foodcategory.categoryID=fooditem.categoryID and restaurant.restaurantID='$id' ");
if (!empty($result))
foreach($result as $value){
?>
<div class="page-content-fullwidth">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
echo "<div class="page-section restaurant-detail-image-section" style="background: url(../../wp-content/uploads/cover-photo12.jpg) no-repeat scroll 0 0 / cover">"
<?php }?>
Background image will be display when foreach bracket cut from this position
There are multiple issues:
Your foreach loop contains 4 opening div-tags - but you don't close them. This will result in a faulty markup.
The echo will not work without <?php-tags around.
You could remove the echo anyways because you're not printing any variables
The if is missing curly braces. You can only miss them if your content is no longer than one line or in the same line.
Also consider using Alternative syntax for control structures: http://php.net/manual/en/control-structures.alternative-syntax.php
Because your answer does not have any further information, I suspect you don't have error_reporting/display_errors enabled. So maybe this would be very helpful for developing.
So fixed it should look like this:
<body>
<div class="main-section ">
<?php
$result = $restaurant->runQuery("SELECT fooditem.*,restaurant.* from fooditem ,restaurant ,foodcategory where restaurant.restaurantID=foodcategory.restaurantID and foodcategory.categoryID=fooditem.categoryID and restaurant.restaurantID='$id' ");
if (!empty($result)):
foreach($result as $value): ?>
<div class="page-content-fullwidth">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="page-section restaurant-detail-image-section" style="background: url(../../wp-content/uploads/cover-photo12.jpg) no-repeat scroll 0 0 / cover"></div>
</div>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>

Adding 'end' foundation class to div in PHP loop isn't styling it correctly

Originally I had a bunch of large-4 columns that looked like this
<div class="large-12 columns">
<h2>Title Here</h2>
<div class="row">
<div class="large-4 columns">foo</div>
<div class="large-4 columns">foo</div>
<div class="large-4 columns">foo</div>
<div class="large-4 columns">foo</div>
<div class="large-4 columns end">foo</div>
</div>
</div>
Where it displays 3 columns then drops the fourth and fifth columns down below the first 3 and floats them left because of the 'end' class'.
I want to create the same thing using values provided via fields from my WordPress Admin panel. The field is a text box with text that is delimited by new line character. From this, in my code I create an array by exploding the field by new line character. An example looks like this
Text from field:
Foo
Bar
Bazz
Buzz
$pcv = get_post_custom_values('text_from_field');
$text_array = explode(PHP_EOL, $pcv[0]);
So now $text_array is equal to [Foo, Bar, Bazz, Buzz]
With me so far?
Next I want to iterate over that array for each item in that array, I want to create a large-4 div and pump the current array value into that div. I also want to check if the current array value is the last value in the array and if so, append the 'end' class to it. That code would look like this.
<div class="large-12 columns>
<div class="row">
<?php
$pcv = get_post_custom_values('text_from_field');
$text_array = explode(PHP_EOL, $pcv[0]);
foreach ($text_array as $text) { ?>
<div class="large-4 columns <?php if($text == end($text_array)){ echo "end";} ?>">
<p><?php echo $text; ?></p>
</div>
<?php } ?>
</div>
</div>
Given that there are 5 values, it should create the same html tree I showed at the beginning of this thread, and for the most part it does. The HTML itself looks fine, including the 'end class' being added to the last large-4.
The only problem is that the 4th and 5th columns aren't being floated left. They are behaving as normal and stacking directly underneath the 3rd column. Can anyone help me figure out what I'm missing? Is there something missing from my PHP?
DOM using the loop
This is not at all a PHP issue and is related to your use of Foundation. Foundation supports a 12 column row. What that means is that your can only add the numbers on columns to 12 this is not working because 4*5 = 20.
So what you need is to either reduce the column down to 2 (2*5=10) the end class on the last element will make this all line up.
The other option if you want to use 4 is to create another row once you hit 3 elements. Then on the last element if it does not fill a row apply an end class
What you will see in html is
<!--I assume this is in a row???-->
<div class="large-12 columns">
<h2>Title Here</h2>
<div class="row">
<div class="large-2 columns">foo</div>
<div class="large-2 columns">foo</div>
<div class="large-2 columns">foo</div>
<div class="large-2 columns">foo</div>
<div class="large-2 columns end">foo</div>
</div>
</div>
or
<!--I assume this is in a row???-->
<div class="large-12 columns">
<h2>Title Here</h2>
<div class="row">
<div class="large-4 columns">foo</div>
<div class="large-4 columns">foo</div>
<div class="large-4 columns">foo</div>
</div>
<div class="row">
<div class="large-4 columns">foo</div>
<div class="large-4 columns end">foo</div>
</div>
</div>
I don't think this is an issue with .PHP rather how you are using design elements.
Personally what I would do is first design your layout so that it displays as you want it, then worry about feeding an array into it.
It looks like you are defining column class within the loop here:
foreach ($text_array as $text) { ?>
<div class="large-4 columns <?php if($text == end($text_array))
{echo "end";} ?>">
<p><?php echo $text; ?></p>
I would recommend defining layout outside of the loop. I would not consider myself an expert, but it has been my experience in the past that contolling structure/layout from within loops becomes increasingly difficult as you use the same loop for other intended purposes in general.
Your code logic is correctly.
I think it's the missing quotes at the first div, that is bugging the row behavior.
<div class="large-12 columns>
image link
EDIT:
#modusAndrew The answer that has been accepted is not correct. It is perfectly accepted to put more columns than 12. A completely valid example:
<div class="row">
<div class="small-12 large-6">
50% on desktop, 100% on mobile
</div>
<div class="small-12 large-6">
50% on desktop, 100% on mobile
</div>
</div>
See your code working: http://imgur.com/a/dtpDl

How do I loop through multiple child nodes of XML?

I am having some trouble trying to loop through an XML document. The XML looks like this:
<data>
<weather>
<hourly>
<time>0</time>
<tempC>17</tempC>
<tempF>62</tempF>
<windspeedMiles>24</windspeedMiles>
<windspeedKmph>39</windspeedKmph>
</hourly>
<hourly>
<time>3</time>
<tempC>16</tempC>
<tempF>60</tempF>
<windspeedMiles>22</windspeedMiles>
<windspeedKmph>35</windspeedKmph>
</hourly>
</weather>
<weather>
<hourly>
<time>0</time>
<tempC>17</tempC>
<tempF>62</tempF>
<windspeedMiles>24</windspeedMiles>
<windspeedKmph>39</windspeedKmph>
</hourly>
<hourly>
<time>3</time>
<tempC>16</tempC>
<tempF>60</tempF>
<windspeedMiles>22</windspeedMiles>
<windspeedKmph>35</windspeedKmph>
</hourly>
</weather>
</data>
My code (below) whilst it loops through all 'weather' nodes, it only picks out the first 'hourly' child node and completely skips the second. Would someone be able to help me as if I am honest, I do not know enough about looping to fix it and its driving me nuts! Grr.
Here is my PHP code which loads an XML document from online and then formats the XML results into div tags and obviously loops through the XML but as I said only loops through the first 'hourly' node of each 'weather' node.
<?php
// load SimpleXML
$data = new SimpleXMLElement('myOnlineXMLdocument.xml', null, true);
echo <<<EOF
<div class="observationRow">
<div class="observationTitleSmall"><br>Time</div>
<div class="observationTitleSmall"><br>Temp C</div>
<div class="observationTitleSmall"><br>Temp F</div>
<div class="observationTitleSmall"><br>Wind Speed MPH</div>
<div class="observationTitleSmall"><br>Wind Speed KMPH</div>
</div>
EOF;
foreach($data as $weather) // loop through our hours
{
echo <<<EOF
<div>
<div class="observationCellSmall"><br>{$weather->time}</div>
<div class="observationCellSmall"><br>{$weather->tempC}</div>
<div class="observationCellSmall"><br>{$weather->tempF}</div>
<div class="observationCellSmall"><br>{$weather->hourly->windspeedMiles}</div>
<div class="observationCellSmall"><br>{$weather->hourly->windspeedKmph}</div>
EOF;
}
echo '</div>';
?>
EDITED CODE:
$str = "";
foreach($data->weather as $weather)
{
foreach ($weather->hourly as $hour)
{
$str .= "
<div>";
if ($hour->time == "0") {
$str .= "
<div class='observationCellSmall'><br>$weather->date</div>
<div class='observationCellSmall'><br>$weather->maxtempC</div>
<div class='observationCellSmall'><br>$weather->mintempC</div>";
}
$str .= "
<div class='observationCellSmall'><br>$hour->time</div>
<div class='observationCellSmall'><br>$hour->tempC</div>
<div class='observationCellSmall'><br>$hour->tempF</div>
<div class='observationCellSmall'><br>$hour->windspeedMiles</div>
<div class='observationCellSmall'><br>$hour->windspeedKmph</div>
</div>
";
}
}
echo $str;
Using a slenderized version of your XML feed, that generates this:
<div>
<div class='observationCellSmall'><br>2013-08-19</div>
<div class='observationCellSmall'><br>17</div>
<div class='observationCellSmall'><br>15</div>
<div class='observationCellSmall'><br>0</div>
<div class='observationCellSmall'><br>15</div>
<div class='observationCellSmall'><br>59</div>
<div class='observationCellSmall'><br>11</div>
<div class='observationCellSmall'><br>18</div>
</div>
<div>
<div class='observationCellSmall'><br>300</div>
<div class='observationCellSmall'><br>15</div>
<div class='observationCellSmall'><br>59</div>
<div class='observationCellSmall'><br>13</div>
<div class='observationCellSmall'><br>21</div>
</div>
<div>
<div class='observationCellSmall'><br>2013-08-20</div>
<div class='observationCellSmall'><br>21</div>
<div class='observationCellSmall'><br>16</div>
<div class='observationCellSmall'><br>0</div>
<div class='observationCellSmall'><br>17</div>
<div class='observationCellSmall'><br>62</div>
<div class='observationCellSmall'><br>11</div>
<div class='observationCellSmall'><br>18</div>
</div>
<div>
<div class='observationCellSmall'><br>300</div>
<div class='observationCellSmall'><br>16</div>
<div class='observationCellSmall'><br>61</div>
<div class='observationCellSmall'><br>10</div>
<div class='observationCellSmall'><br>17</div>
</div>
You need a nested loop. One to loop over the weathers, and and another to loop over the hourlies.
foreach($data->weather as $weather) {
foreach($weather->hourly as $hourly) {
// code here
}
}
I don't remember the simplexml API 100% off my head, if that doesn't work you might need to use ->getChildren() or something to make it iterable.
Either that, or use xpath and nab the hourlies directly: /data/weather/hourly.

DOMXpath query on query

I have the following HTML:
[...]
<div class="row clearfix">
<div class="col1">Data</div>
<div class="col2">Data</div>
<div class="col3">Data</div>
<div class="col4">Data</div>
<div class="col5">Data</div>
<div class="col6">Data</div>
<div class="col7">Data</div>
<div class="col8">Data</div>
</div><!--// row-->
<div class="row clearfix otherClass">
<div class="col1">Data</div>
<div class="col2">Data</div>
<div class="col3">Data</div>
<div class="col4">Data</div>
<div class="col5">Data</div>
<div class="col6">Data</div>
<div class="col7">Data</div>
<div class="col8">Data</div>
</div><!--// row-->
<div class="row clearfix thirdClass">
<div class="col1">Data</div>
<div class="col2">Data</div>
<div class="col3">Data</div>
<div class="col4">Data</div>
<div class="col5">Data</div>
<div class="col6">Data</div>
<div class="col7">Data</div>
<div class="col8">Data</div>
</div><!--// row-->
[...]
I want to get all of these divs out of the HTML, they all start with "row clearfix" as class, but can have more data to it.
After that I want to be able to handle each col separetely, so get the value of col1, col2, col3 ect.
I have written this code, but am stuck now. Can someone help me out?
$oDom = new DOMDocument();
$oDom->loadHtml($a_sHTML);
$oDomXpath = new DOMXpath($oDom);
$oDomObject = $oDomXpath->query('//div[#class="row clearfix"]');
foreach ($oDomObject as $oObject) {
var_dump($oObject->query('//div[#class="col1"]')->nodeValue);
}
UPDATE *Solution*
Thanks to the replies below, I got it working with the following code:
$oDom = new DOMDocument();
#$oDom->loadHtml($a_sHTML);
$oDomXpath = new DOMXpath($oDom);
$oDomObject = $oDomXpath->query('//div[contains(#class,"row") and contains(#class,"clearfix")]');
foreach ($oDomObject as $oObject) {
foreach($oObject->childNodes as $col)
{
if ($col->hasAttributes())
{
var_dump($col->getAttribute('class') . " == " . trim($col->nodeValue));
}
}
}
To match the outer divs I think that what you need is
//div[starts-with(#class,"row clearfix")]
or
//div[contains(#class,"row clearfix")]
or
//div[contains(#class,"row") and contains(#class,"clearfix")]
I'd go for the last one because the class names could be in any order.
I am not 100% sure what you want to do with the inner div, but you could get them with something like this:
div[starts-with(#class,"col")]

Categories