I am making a sort of forum with subjects out of my database. My website is built in PHP (PDO) the problem is that I cant get the subject out of the database to show the correct way under each other in each a different block.
<div class="col-md-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Stel jezelf voor</h2>
<h5> Laat wetn wie jij en je business zijn</h5>
</div>
</div>
<div class="col-md-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 12</h2>
<?php
$toppics = $app->get_topics();
$i = 0;
$j = 0;
foreach ($toppics as $topic) {
if($j >= 1) continue;
echo '' . $topic['onderwerp'] . '';
$j++;
}
?>
</div>
</div>
Function:
public function get_topics(){
$getTopic = $this->database->query("SELECT * FROM topics ORDER BY id DESC LIMIT 1");
$topics = $this->database->resultset();
return $topics;
}
I want this also to be each record in a new block. In the code, you can see I tried some stuff but it isn't the right way or its not working. I know the j++ isn't good but if I delete that and the LIMIT 1 function it doesn't still don't work
UPDATE
If I use the code like it is in the answer given it looks like this and not 2 diffent blocks.
<?php
$toppics = $app->get_topics();
$i = 0;
foreach($toppics as $topic){
echo '<div>';
echo '<h3>'.$topic['onderwerp'].'</h3><br>';
echo '' .$topic['omschrijving'].'';
echo '</div><br>';
}
?>
First of all: Since you want to fetch multiple topics from the DB, you must remove the LIMIT 1 from the query and the if($j >= 1) continue; in the foreach loop, as they both are restricting your output to only 1 topic.
In your foreach loop for $toppics (correct spelling: topics ;P) you currently only echo an anchor tag (link), but what you want is (to use your words here) a 'block'. Whatever you want that block to look like, the place for defining that is within that foreach loop.
Now I don't know what elements, classes or stylings you use / want to use, so I will make an example of a block that consists of a title and below that the link:
//rename $topic keys to the names of your DB columns
foreach($toppics as $topic){
echo '<div>';
echo '<h3>'.$topic['title'].'</h3><br>';
echo ''.$topic['link_text'].'';
echo '</div><br>';
}
I know my solution will not look exactly like your given image, but it should get the point across how and where you can build your blocks.
I think this problem should have been easily solveable when you know the basics of HTML, so I would really recommend you learning a bit more about HTML before you work on big projects.
Edit after question was edited:
As I mentioned in my answer, my solution will not look exactly like your given image because I don't know what elements, classes or stylings you use. Your remaining problem is now the usage of the correct html tags, classes and stylings.
It appears that the parent element of the generated divs is styled the way you want the single blocks to look like.
So what you could do is remove the parent element and use it as a replacement of the generated div, like so:
<div class="col-md-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Stel jezelf voor</h2>
<h5> Laat wetn wie jij en je business zijn</h5>
</div>
</div>
<div class="col-md-6">
<!--<div class="well dash-box">-->
<h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 12</h2>
<?php
$toppics = $app->get_topics();
$i = 0;
foreach($toppics as $topic){
echo '<div class="well dash-box">';
echo '<h3>'.$topic['onderwerp'].'</h3><br>';
echo '' .$topic['omschrijving'].'';
echo '</div><br>';
}
?>
<!--</div>-->
</div>
sidenote: I do not agree with your building of your href attribute #section1. When building these sections you would have to know that exact index from that previous foreach-loop. Instead, use some attribute from the topic itself, maybe its ID, title, or description (like I did in the first codeblock). This way when you are building the sections you can easily know how to set the elements id attribute.
Related
Actually I am beginner programmer in HTML, CSS and PHP. I have simple website for add and register in courses. The user should be add course into website and the courses should be posted on the site.so users can browse and register.
Actually my problem is how to call the course name from database and how to format it with HTML code as I want.
This is the page of courses which is content the list of available courses in website ( please note it is only HTML code, I do that to see how the page will be )
Screenshot of page:
So as you see, the first page include many this HTML code to add course list into website with the following code:
<div class="card card-1">
<a href="http://127.0.0.1/project2/course details/course1.php">
<img src="http://127.0.0.1/project2/icons/coursepic.jpg" alt="Avatar" style="width:101% "></a> <div class="container">
<h4 class="textstyle"><b>Operating System</b> </h4>
<p class="textstyle">Free Course</p>
</div>
</div>
what i want do with PHP?
I want to write a PHP code to replace the P and h4 with the course name, cost of courses from my database for each available course.
Please note: the pic for each course it will be from my pc, no need to call the pic from database.
I tried to write PHP code like below:
<div>
<div class="card card-1">
<a href="http://127.0.0.1/project2/course details/course1.php">
<img src="http://127.0.0.1/project2/icons/coursepic.jpg" alt="Avatar" style="width:101% "></a> <div class="container">
<?php
include_once("db.php");
$result = mysqli_query(OpenCon(), "SELECT Course_Name,cost FROM `course`");
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array
while($res = mysqli_fetch_array($result)) {
echo "<p>".$res['Course_Name']."</p>";
echo "<p>".$res['cost']."</p>";
}
?>
</div>
</div>
</div>
This is my result:
It's okay but I want the style to be like the first screenshot. each course should have picture.
After that when the user click on course name. I want move to another page which is content the course details ( for the same course that user clicked ) also it's called for my database
like this:
I hope any one help my to solve this problem only, I should solve this problem within 2 days only. and sorry if my explanation is bad.
Thanks in advance for everyone.
Put the code in a PHP loop.....
So, this
<div class="card card-1">
<a href="http://127.0.0.1/project2/course details/course1.php">
<img src="http://127.0.0.1/project2/icons/coursepic.jpg" alt="Avatar" style="width:101% ">
</a>
<div class="container">
<h4 class="textstyle"><b>Operating System</b> </h4>
<p class="textstyle">Free Course</p>
</div>
</div>
Becomes (after cleaning up the code a bit - I think you didn't mean to use two <p> in there, but I left them so you can see it. Note that using different lines for the segments makes it a lot easier to see what you have.)
include_once("db.php");
$result = mysqli_query(OpenCon(), "SELECT Course_Name,cost FROM `course`");
$count = 0;
while($res = mysqli_fetch_array($result)) {
$count ++;
// NOTE: Here is the LOOP! - not outside the query, but INSIDE it
// First you 'jump out' of PHP, going back to HTML
?> <!-- now you are in HTML (when you need PHP again, you 'jump in' and 'jump out' as needed - see the code below....) -->
<div class="card card-<?php echo $count;?>">
<a href="http://127.0.0.1/project2/course details/course<?php echo $count;?>.php">
<img src="http://127.0.0.1/project2/icons/coursepic.jpg" alt="Avatar" style="width:101% ">
</a>
<div class="container">
<h4 class="textstyle">
<b><p><?php echo $res['Course_Name'];?></p></b>
</h4>
<p class="textstyle">
<p><?php echo $res['cost'];?></p>
</p>
</div>
</div>
<?php // we are in PHP again....
}
That should do what you asked for - though I would go a step (well, more than one...) further and make as much of this dynamic as you can.
For this I will presume that:
your database table has a column called 'id' (if it doesn't, you should have) and it relates to the course number (you could make a course number column if they don't match up, but I'm keeping it simple)
you have all your pictures labeled 'coursepicX' where the X is the course number.
We'll use 'coursepic' as a default in case there isn't a picture yet...
Now, the code is more dynamic!
include_once("db.php");
$result = mysqli_query(OpenCon(), "SELECT id,Course_Name,cost FROM `course`");
while($res = mysqli_fetch_array($result)) {
// NOTE: Here is the LOOP! - not outside the query, but INSIDE it
// First you 'jump out' of PHP, going back to HTML
?> <!-- now you are in HTML (when you need PHP again, you 'jump in' and 'jump out' as needed - see the code below....) -->
<div class="card card-<?php echo $res['id']?>">
<a href="http://127.0.0.1/project2/course details/course<?php echo $res['id']?>.php">
<?php
$pic = "http://127.0.0.1/project2/icons/coursepic.jpg";
if(file_exists("http://127.0.0.1/project2/icons/course" . $res['id'] . ".jpg") {
$pic = "http://127.0.0.1/project2/icons/course" . $res['id'] . ".jpg";
}
<img src="<?php echo $pic; ?>" alt="Avatar" style="width:101% ">
</a>
<div class="container">
<h4 class="textstyle">
<b><p><?php echo $res['Course_Name'];?></p></b>
</h4>
<p class="textstyle">
<p><?php echo $res['cost'];?></p>
</p>
</div>
</div>
<?php // we are in PHP again....
}
Note that this is the basic 'shopping cart' sort of program - you will likely use it many (many) times in your career.
Happy Coding!
I am displaying information in a card-based layout, but if any title in the card is longer than 41 characters, it doesn't fit into the card.
I thought about using [wordwrap], but all that would do is cause the one specific title to wrap and change the height of that card, affecting the layout of the other cards.
This is the PHP I use to print my results for pagination purposes, so it only prints 9 things at a time.
<div class="row">
<?php
while ($row = mysql_fetch_assoc($rs_result)) {
?>
<div class="col xl4 l4 m12 s12">
<div class="card z-depth-5">
<div class="card-content">
<p><? echo $row["title"]; ?></p>
<p>Category: <? echo $row["category"]; ?></p>
</div>
</div>
</div>
<?php
};
?>
</div>
How would I go about line breaking every title if even one title is detected as longer than 41 characters?
EDIT: This is the solution I created:
$titlebreak = $row["title"];
if (strlen($titlebreak) >= 40)
{
$titlebreak2 = wordwrap($titlebreak, 39, "</p><p>");
}
else
{
$titlebreak2 = $row["title"] . "<p> </p>\n";
}
I've included 3 possible solutions below - adding manual line breaks as you asked about in your question; a basic but unsatisfactory CSS option and a jQuery solution which in this case is the one I would suggest as the most flexible.
Although a CSS-only solution is usually the preferred way of fixing a layout issue, when it comes to equal heights of elements there isn't a clear-cut way to do it and often a jQuery solution like the one below is required.
Manual line-break - as requested in your question
Instead of doing an additional SQL query as mentioned, you can easily do it in the PHP in 2 different ways:
(a) loop through the rows before displaying them to calculate the title lengths, then loop again to display with/without the line break
or
(b) if you really down't want to loop twice, you could include the line break regardless of length as you loop once, but also calculate the line length in that loop. Then hide the line break using CSS if its not required
(a) 2 loops: Calculate length to determine whether to add the line break or not:
<?php
$maxchars = 41;
$cards = array();
$bLongTitle = false;
while ($row = mysql_fetch_assoc($rs_result)) {
// save detaisl to $cards array
$cards[$row["title"]] = $row["category"];
// check title lengths until we find one over 41 - no need to check any more after that
if (!$bLongTitle && strlen($row["title"])) > $maxchars)
$bLongTitle = true;
}
?>
<div class="row">
<?php
foreach ($cards as $title => $category) {
?>
<div class="col xl4 l4 m12 s12">
<div class="card z-depth-5">
<div class="card-content">
<p><?
// if there were any long title, wrap them all text
if ($bLongTitle)
$title = wordwrap($title, $maxchars, "<br />\n");
echo $title;
?></p>
<p>Category: <? echo $category; ?></p>
</div>
</div>
</div>
<?php
}
?>
</div>
(b) 1 loop: Always display line break, and hide it if not required
<div class="row">
<?php
$bLongTitle = false;
while ($row = mysql_fetch_assoc($rs_result)) {
?>
<div class="col xl4 l4 m12 s12">
<div class="card z-depth-5">
<div class="card-content">
<p class="cardTitle"><? echo wordwrap($title, $maxchars, "<br />\n"); ?></p>
<p>Category: <? echo $row["category"]; ?></p>
<?php
// check title lengths until we find one over 41 - no need to check any more after that
if (!$bLongTitle && strlen($row["title"])) > $maxchars)
$bLongTitle = true;
?>
</div>
</div>
</div>
<?php
};
?>
</div>
<?php if ($bLongTitle) {?>
<script>.cardTitle br {display:none;}</script>
<?php } ?>
CSS-only solution - not viable for the OP?
Because the titles are aren't direct siblings, the only way would be to fix the height of all title. This isn't a desirable solution, as I'm sure titles can vary a lot in length so its impossible to pick a "default" height to suit every possibility, and even that's complicated by the responsive width of the columns potentially changing the heights dynamically.
But for the sake of completeness:
add a class (e.g. .cardTitle) to the title in your loop
identify suitable heights for the title with and without a line break, and set these in your CSS
add the corresponding class (e.g. wrapTitle) to your <p> if any title is too long in a loop (similar to adding a line break above)
CSS
p.cardTitle { height:20px; } /* example of the default height for title */
p.cardTitle.wraptitle { height:40px; } /* example of height for wrapped title */
PHP (after looping through SQL rows to fill $cards array as option (a) above)
<?php
foreach ($cards as $title => $category) {
?>
<div class="col xl4 l4 m12 s12">
<div class="card z-depth-5">
<div class="card-content">
<p class="cardTitle <?php if ($bLongTitle) echo "wrapTitle"; ?>"><? echo $title; ?></p>
<p>Category: <? echo $row["category"]; ?></p>
</div>
</div>
</div>
<?php
};
?>
jQuery
You could use jQuery to loop through all elements to calculate the heights, and set them all to the tallest.
You could write the code yourself (see How to make all div columns of the same height automatically with jQuery or Setting equal heights for div's with jQuery but there is a library available to do this for you: matchHeight
Using the library, all you need to do is include it on your page and call it like this (assuming you've added the class cardTitle to the <p> that holds your title)
jQuery(document).ready(function() {
$(".cardTitle").matchHeight();
});
I would perform a new SQL query first to see if any results have a title length of greater than 41 characters:
select count(*) from table where length(title)>41
And then set the result of this query to be a variable, e.g. $has41
You can then use an if statement within your loop ...
if($has41) {
// do something with $row['title']
} else {
// do something else with $row['title']
}
I have html page what im trying to read(used htmlsql.class.php, but as its too old and outdated, then i have to use phpQuery).
The html markup is:
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
<li>
<div data-widget-type="epg.tvGuide.channel" data-view="epg.tvGuide.channel" id="widget-765574917197" class=" widget-epg_tvGuide_channel">
<div class="group-box">
<div class="group-header l-center" data-action="togglePreviousBroadcasts">
<span class="header-text">
<img src="logo.png" style="height: 40px" />
</span>
</div>
<div>
<div class="tvGuide-item is-past">
<span data-action="toggleEventMeta">
06:15 what a day
</span>
<div class="tvGuide-item-meta">
Some text.
<div>Näita rohkem</div>
</div>
</div>
<div class="tvGuide-item is-current">
<span data-action="toggleEventMeta">
06:15 what a day
</span>
<div class="tvGuide-item-meta">
Some text.
<div>Näita rohkem</div>
</div>
</div>
<div class="tvGuide-item">
<span data-action="toggleEventMeta">
06:15 what a day
</span>
<div class="tvGuide-item-meta">
Some text.
<div>Näita rohkem</div>
</div>
</div>
</div>
</div>
Then with the previos thing it was fearly easy:
$wsql->select('li');
if (!$wsql->query('SELECT * FROM span')){
print "Query error: " . $wsql->error;
exit;
}
foreach($wsql->fetch_array() as $row){
But i could not read the class so i need to know when the class is current and when its not.
As im new to phpQuery then and reallife examples are hard to find.
can someone point me to the right direction.
I would like to have the "span" text and item meta, allso i like to know when the div class is "is-past" or "is-current"
You can find infos about phpQuery here: https://code.google.com/archive/p/phpquery/
I prefer "one-file" version on top in downloads:
https://code.google.com/archive/p/phpquery/downloads
Simple examples based on your code:
// for loading files use phpQuery::newDocumentFileHTML();
// for plain strings use phpQuery::newDocument();
$document = phpQuery::newDocumentFileHTML('http://domain.com/yourFile.html');
$items = pq($document)->find('.tvGuide-item');
foreach($items as $item) {
if(pq($item)->hasClass('is-past') === true) {
// matching past items
}
if(pq($item)->hasClass('is-current') === true) {
// matching current items
}
// examples for finding elements and grabbing text/attributes
$span = pq($item)->find('span');
$text_in_span = pq($span)->text();
$meta = pq($item)->find('.tvGuide-item-meta');
$link_in_meta = pq($meta)->find('a');
$href_of_link_in_meta = pq($link_in_meta)->attr('href');
}
Hi guys so i am just using learning php for the first time and building my own site etc to try it out. I have a database of recipes. For each recipe it has a list of ingredients. Each recipe will have different amounts. So one will have 5, the other can have 3 etc. The problem with my code is. If someone searches for a recipe and they find it, it will return the ingredients but sometimes if it has more than the divs i put there it will give some null values back. Also i understand about the sql injections etc and the bad practice but i am just playing about with it first. I want to get it to work and then fix that part later :)
PHP:
<div class="panel panel-default">
<div class="panel-heading"><b>' . htmlentities($rN, ENT_QUOTES) . '</b></div>
</a>
}
?>
Now i am pretty sure in my white loop i am suppose to do an if statement after the div tags and say if the value == null then dont display but i have tried and nothing has worked so any help on this matter would be great
Thanks
Your HTML for ingredients seems be repeating, so you can resolve the empty <div> issue and short your code using a for loop and a if condition:
$output .= '<div class="panel panel-default">
(...)
<h3 class="media-heading">INGREDIENTS:</h3>';
for( $i=1; $i < 7; $i++ )
{
if( ${"rI$i"} )
{
$output .= '<div class="food-graph">
<span class="food-graph-title">' . htmlentities(${"rI$i"}, ENT_QUOTES) . '</span>
</div>';
}
}
$output .= ' (...) ';
If encountering null values is a problem, this will only print out the ingredients that your row contains.
while($row = mysql_fetch_array($query)) {
$rN = $row['recipeName'];
$i=1;
$recipes = '';
if (isset($row['recipe_ing'.$i]) {
while(isset($row['recipe_ing'.$i]) {
$value = htmlentities($row['recipe_ing'.$i], ENT_QUOTES);
$recipes .= <<< EOT
<div class="food-graph">
<span class="food-graph-title">$value</span>
</div>
EOT;
$i++;
}
$output .= <<< EOT
<div class="panel panel-default">
<div class="panel-heading"><b>' . htmlentities($rN, ENT_QUOTES) . '</b></div>
<div class="panel-body">
<div class="pull-left col-xs-12 col-sm-4">
<a href="#">
<img class="img-thumbnail img-responsive" src="Image/green.jpg">
</a>
<a class="btn btn-success btn-block btnrec" href="#">View Recipe</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="media-body">
<h3 class="media-heading">INGREDIENTS:</h3>
$recipes
</div>
</div>
</div>
</div>
<div class="panel-footer">Rating</div>
</div>
EOT;
}
}
EDIT: Also, i'm using Heredocs to set the strings. the lines with EOT; must have no whitespace or code in front of it. it must be at the start of the line. also no code may be on the same line behind it. Else, your documents will become a huge string.
in ZOO Application/templates/uikit/_categories.php have this code:
<?php
// init vars
$i = 0;
$columns = $this->params->get('template.categories_cols', 2);
reset($this->selected_categories);
// render rows
while ((list($key, $category) = each($this->selected_categories))) {
if ($category && !($category->totalItemCount() || $this->params->get('config.show_empty_categories', false))) continue;
if ($i % $columns == 0) echo ($i > 0 ? '</div><hr class="uk-grid-divider"><div class="uk-grid">' : '<div class="uk-grid">');
echo '<div class="uk-width-1-'.$columns.'">'.$this->partial('category', compact('category')).'</div>';
$i++;
}
if (!empty($this->selected_categories)) {
echo '</div>';
}
?>
Render look like this:
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
<hr class="uk-grid-divider">
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
And I want this (only one div.uk-grid for all div.uk-width* and without hr.uk-grid.divider):
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
Can someone help me with this, i am not good in php?
Thanks.
My modified code which not work :(
<?php
$columns = $this->params->get('template.categories_cols', 2); // I dont know why is at end ", 2"
reset($this->selected_categories); // I dont know why is needed reset array
// render rows
while ((list($key, $category) = each($this->selected_categories))) {
if ($category && !($category->totalItemCount() || $this->params->get('config.show_empty_categories', false))) {
echo '<div class="uk-grid">'; // I dont know why is not rendered
}
echo '<div class="uk-width-1-'.$columns.'">'.$this->partial('category', compact('category')).'</div>';
}
if (!empty($this->selected_categories)) {
echo '</div>';
}
?>
You must have set a parameter to add two columns, that's what kicks in the code that adds the separator.
The name of the parameter is template.categories_cols it will be translated though to something in english.
This is a commercially supported extension, you might be able to get some support on their forums
Your best bet would be to set your columns at 1, then use UIKit's CSS to size your divs. This means you'd want your container class to be uk-grid uk-grid-width-1-3, then to remove the uk-width-1-3 from the inner divs. The added benefit here is that you can vary layout depending on your screen size > Grid Component - UIKit.
In your PHP you could remove the columns param all together. Remove the line starting with $columns..., the single spot it's echo'd '.$columns.', and you should be all set.
The PHP was using your "columns" variable to split divs (2 was the default), but if you tailor the container you can avoid the column assignment altogether.