PHP - indent block of html - php

Let's say I have the following code:
<?php
echo "<div id=\"root\">";
echo "<div id=\"child_of_root\">";
echo "<img src=\"picture1.png\">";
echo "<img src=\"picture2.png\">";
echo "<img src=\"picture3.png\">";
echo "<img src=\"picture4.png\">";
echo "<img src=\"picture5.png\">";
echo "</div>";
echo "</div>";
?>
If I ran this the following HTML would be rendered all inline without any line breaks:
<div id="root"><div id="child_of_root"><img src="picture1.png"><img src="picture2.png"><img src="picture3.png"><img src="picture4.png"><img src="picture5.png"></div></div>
If I ran the following code:
<?php
echo "<div id=\"root\">\n";
echo "\t"."<div id=\"child_of_root\">\n";
echo "\t\t"."<img src=\"picture1.png\">"."\n";
echo "\t\t"."<img src=\"picture2.png\">"."\n";
echo "\t\t"."<img src=\"picture3.png\">"."\n";
echo "\t\t"."<img src=\"picture4.png\">"."\n";
echo "\t\t"."<img src=\"picture5.png\">"."\n";
echo "\t"."</div>"."\n";
echo "</div>";
?>
It wound render the following beautiful HTML:
<div id="root">
<div id="child_of_root">
<img src="picture1.png">
<img src="picture2.png">
<img src="picture3.png">
<img src="picture4.png">
<img src="picture5.png">
</div>
</div>
Is there a way I could achieve these beautiful indents without having to put \t before every line I want to indent. I mean so that I can indent a block instead of one line.

For one thing, it's HTML markup, so it doesn't matter how it's formatted, the browser renders it all the same. Using a tool like Firebug can give you a much better way of navigating HTML in your web-pages.
On another note, you don't have to continually use echo commands to output HTML. PHP is more-or-less a templating language in itself, so you could just exit PHP, output your HTML in your own format, and then re-enter PHP.
For example:
<?php // ... your code before this ... ?>
<div id="root">
<div id="child_of_root">
<img src="picture1.png">
<img src="picture2.png">
<img src="picture3.png">
<img src="picture4.png">
<img src="picture5.png">
</div>
</div>
<?php // ... your code after this ... ?>
If your output needs some level of dynamism to it, you can always use PHP to add in loops and whatnot.
<?php // ... your code before this ... ?>
<div id="root">
<div id="child_of_root">
<?php for ($x = 1; $x <= 5; $x++): ?>
<img src="picture<?php echo $x; ?>.png">
<?php endfor; ?>
</div>
</div>
<?php // ... your code after this ... ?>
If you still need formatted HTML, maybe for displaying code samples or something, you'll either have to continue manually using \n and \t, or you could check out the PHP Tidy extension, which is built for formatting HTML.

First of all use:
echo '<img src="picture1.png">';
instead of
echo "<img src=\"picture1.png\">";
Code is much more clear.
If you want to return HTML code in PHP, there is no other way to do indents.
However why you want to print HTML code in PHP ? Can't you just exit PHP block here ?
<?php
// do something and exit PHP block
?>
<div id="root">
<div id="child_of_root">
<img src="picture1.png">
<img src="picture2.png">
<img src="picture3.png">
<img src="picture4.png">
<img src="picture5.png">
</div>
</div>
<?php
// do again something in PHP
?>

I would suggest using HEREDOC for this. It's best for holding large blocks of HTML and Text that you wish to retain formatting:
//Note that I used spaces and not tabs, but that's only due to the post editor.
echo <<<HTML
<div id="root">
<div id="child_of_root">
<img src="picture1.png">
<img src="picture2.png">
<img src="picture3.png">
<img src="picture4.png">
<img src="picture5.png">
</div>
</div>
HTML;
You can also do
$variable = <<<OPENINGTAG
text
text
text
OPENINGTAG;
echo $variable;
Variables will also be parsed inside HEREDOC strings. Just be careful of the ending tag, it's very temperamental. No spaces before or after on it's line. I don't even know if comments are allowed.
Here it is using Dominic Barnes example with a loop:
<?php
echo <<<HTML
<div id="root">
<div id="child_of_root">
HTML;
for ($x = 1; $x <= 5; $x++)
{
echo <<<HTML
<img src="picture$x.png">
HTML;
}
echo <<<HTML
</div>
</div>
HTML;
?>
could also do:
<?php
$output = <<<HTML
<div id="root">
<div id="child_of_root">
HTML;
for ($x = 1; $x <= 5; $x++)
{
$output .= <<<HTML
<img src="picture$x.png">
HTML;
}
$output .= <<<HTML
</div>
</div>
HTML;
echo $output;
?>
NOWDOC is also available in 5.3+ which act as single quoted strings with no variable parsing.
HEREDOC and NOWDOC strings can be concatenated on to in the same way as normal strings.

If you put your picture ids in an array, you can do a foreach() loop that echoes each of the images with the new line and tab characters in front without having to code it by hand. E.g.
echo '<div id="root">\n';
echo '\t<div id="child_of_root">\n';
$images = array('picture1', 'picture2', 'picture3', 'picture4', 'picture5');
foreach ($images as $image) {
echo '\t\t<img src="'.$image.'.png">\n';
}
echo '\t</div>\n';
echo '</div>';

I tried Tidy, but for some reason no matter how I configure it, it won't seem to indent. However, somebody else has written some code that will:
PHP function for cleaning up HTML and JavaSctipt code
There are also some intelligent guidelines for avoiding the need for such code:
Get beautifully indented HTML with your PHP templates: two rules to follow
Also: fredsco.com/programming/indenting-html-output-in-php

Here is an example that worked for me:
<?php
echo '
<div style="margin-left: 100px">
<div id="root">
<div id="child_of_root">
<img src="picture1.png" /><br />
<img src="picture2.png" /><br />
<img src="picture3.png" /><br />
<img src="picture4.png" /><br />
</div>
</div>
</div>
';
?>

Related

how to get automatic converted 'echo' of php from html code?

I would like to easy to get converted code that 'echo' of php code from html code.
For example, Just like this.
http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
This is a convert tool for JS printing code from html.
Conclude, I would like to see below
from
<div id="foo">
<div id="bar">
</div>
</div>
to
echo '<div id="foo">';
echo '<div id="bar">';
echo '</div>';
echo '</div>';
Thank you for read.
Not sure if this is what you are looking for but you can echo multiple lines of text like this:
echo <<< EOT
<div id="foo">
<div id="bar">
</div>
</div>
EOT;

Generate Multiple Divs within php code

Currently I am trying to loop through a directory grabbing all 14 file names and generate some html using the file names. I have run into some issue of creating HTML elements within PHP, and right now I'm just trying to generate an HTML div with an image in it and a line of text underneath 14 times.
I have tried putting empty php tags before and after the HTML elements, which didn't work because PHP does not allow php elements within another php element.
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
<?php
?>
<div class="cell-1-9">
<img src="images/image.jpg">
<p>Dylan Miller</p>
</div>
<?php
?>
}
?>
I need another way of generating HTML elements within PHP.
You just need to close the <?php tag in order to revert back to html:
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
?>
<div class="cell-1-9">
<img src="<?php echo $file ?>">
<p>Dylan Miller</p>
</div>
<?php
}
?>
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
?>
<div class="cell-1-9">
<img src="images/image.jpg">
<p>Dylan Miller</p>
</div>
<?php
}
?>
Try the HEREDOC syntax.
I'm pasting the user1477388's corrected code: the closing HTML; must NOT be indented.
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
echo <<<HTML
<div class="cell-1-9">
<img src="{$file}">
<p>{$file}</p>
</div>
HTML;
}
?>
As shown in the example in my MVC project, PHP-One, you can do something like this using what's known as HEREDOC syntax:
<?php
foreach($Model as $movie)
{
echo <<<HTML
<li class="list-group-item">
<strong>{$movie->Title}</strong> ({$movie->Rating}) - {$movie->ReleaseDate}
</li>
HTML;
}
?>
Adapted for your code, try something like:
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
echo <<<HTML
<div class="cell-1-9">
<img src="{$file}">
<p>{$file}</p>
</div>
HTML;
}
?>
Ref. https://github.com/DominicArchual/Php-One#define-your-view
Footnote: Learning MVC will make you a better developer; also more valuable.

Content showing PHP

I have a problem in a file : movies.php
I want to show all movies on the files when there is no id, and if the id exists, i want to show the movie with that id , i used :
echo "<div id='head'>$title</div>";
echo "<div id='bodyar'>$content</div> <br />
<hr>Category : <span class='date'>$moviecategory</span></hr>
<hr>Views : <span class='date'>$views_numimg</span></hr>
<hr></hr> <br />"; exit;}
$orderposts = mysql_query("select * from movie ");
echo "<div class='bodypanelposts'>";
while ($rowar = mysql_fetch_assoc($orderposts)) {
$id_po = $rowar['id'];
$picture = $rowar['picture'];
$title = $rowar['title'];
echo "<div id='movieall'><table id='classing' border='0'
cellspacing='2'><tr> <td>";
echo "<a href='movies.php?id=$id_po'><img src='$picture' alt='$image_caption' width='180' height='250'><br /></div><div class='movies'>$title</div></a><br />LIKE BOX GOES HERE</tr></td></table></div>";
}
The problem is , after using that , the footer is not appearing anymore ..
I want it to appear.
To let PHP know it has to start interpret the code, you need start tags:
<?php
// PHP code here
?>
You should also concat variables by a dot instead of putting into the quotes:
echo "<div id='head'>" . $title . "</div>";
(Some might say this is not important but it is IMO, PHP can't handle it properly in every case.)
When using exit;, you tell PHP to quit and flush the result to the browser.
There is also a closing } bracket after the exit, but I don't see any opening { bracket.
A better way to handle your HTML is to do it like this:
<div id='head'><?=$title?></div>
<div id='bodyar'><?=$content?></div>
<br />
<table>
<tr><td>Category</td><td><span class='date'><?=$moviecategory?></span></td></tr>
<tr><td>Views</td><td><span class='date'><?=$views_numimg?></span></td></tr>
</table>
<div class='bodypanelposts'>
<?php
while ($rowar = mysql_fetch_assoc($orderposts)) {
$id_po = $rowar['id'];
$picture = $rowar['picture'];
$title = $rowar['title'];
echo <<<HTML
<div id='movieall'>
<table id='classing' border='0' cellspacing='2'>
<tr><td><a href='movies.php?id=$id_po'><img src='$picture' alt='$image_caption' width='180' height='250'><div class='movies'>$title</div></a>
<br />LIKE BOX GOES HERE
</td></tr>
</table>
</div>
HTML;
?>
</div>
Notice the <?= tags to do inline PHP echo statements, allowing you to write HTML without having to wrap them in echo statements.
You can also use HEREDOC syntax to echo out a large chunk of HTML with variables inline.
These two methods make it much easier to reason about what your code is outputting.

PHP spaces in HTML output when formatting code

Following code will produce unwanted whitespace between icons.
<div>
<img src="icon1.png" />
<img src="icon2.png" />
</div>
I need to keep image tags on single lines because I have some conditions in my .phtml file, it looks something like this:
<div>
<?php if ($condition1) : ?>
<img src="icon1.png" />
<?php endif ?>
<?php if ($condition2) : ?>
<img src="icon2.png" />
<?php endif ?>
</div>
I don't want to have all code messed up on a single line. Is there any solution for situations like this?
Apply font-size:0px; style to your div.
You may use echo to output parts of html code. You'll get something like this
<div>
<?php if (true) :
echo '<img src="icon2.png" />';
endif;
if (true) :
echo '<img src="icon2.png" />';
endif;
?>
</div>

Add HTML elements to the current page using PHP

So I have the need to dynamically add html content using php which isnt the tricky part but I'm trying to put the HTML into a different location in the document than where the PHP is being run. So for example:
<div id="firstDiv">
<?php
echo "<div id=\"firstDivA\"></div>";
echo "<div id=\"secondDivA\"></div>";
?>
</div>
<div id="secondDiv">
</div>
But I want to be able to place the some HTML inside "secondDiv" using the PHP that is executed in the "firstDiv". The end result should be:
<div id="firstDiv">
<div id="firstDivA"></div>
</div>
<div id="secondDiv">
<div id="secondDivA"></div>
</div>
But I have no idea how to go about doing that. I read about some of the DOM stuff in PHP 5 but I couldn't find anything about modifying the current document.
You can open/close "blocks" of PHP wherever you like in your HTML
<div id="firstDiv">
<?php echo '<div id="firstDivA"></div>'; ?>
</div>
<div id="secondDiv">
<?php echo '<div id="secondDivA"></div>'; ?>
</div>
You can also capture the output if necessary with ob_start() and ob_get_clean():
<?php
$separator = "\n";
ob_start();
echo '<div id="firstDivA"></div>' . $separator;
echo '<div id="secondDivA"></div>' . $separator;
$content = ob_get_clean();
$sections = explode($separator, $content);
?>
<div id="firstDiv">
<?php echo $sections[0]; ?>
</div>
<div id="secondDiv">
<?php echo $sections[1]; ?>
</div>
Why not just move the relevant code to the right place?
<div id="firstDiv">
<?php
echo "<div id=\"firstDivA\"></div>";
?>
</div>
<div id="secondDiv">
<?php
echo "<div id=\"secondDivA\"></div>";
?>
</div>
The .php file is continuous thus if you have two separate <?php ?> tags they will be able to share the same variables.
<div id="firstDiv">
<?php
echo "<div id=\"firstDivA\"></div>";
$div2 = "<div id=\"secondDivA\"></div>";
?>
</div>
<div id="secondDiv">
<?php echo $div2 ?>
</div>
This will give the desired effect. (Demonstrates the use of variables)
I'm not sure what you're asking. Perhaps just add an echo statement to the second div.
<div id="firstDiv">
<?php echo "<div id=\"firstDivA\"></div>"; ?>
</div>
<div id="secondDiv">
<?php echo "<div id=\"secondDivA\"></div>"; ?>
</div>
Or do you mean you want to make DIV changes after PHP? Try jQuery!
Or do you mean you want to make DIV changes before PHP is finished? Perhaps phpQuery is good for you then.
If you want to work with XML-data (read XHTML), you'd rather use an appropriate XML processor.
DomCrawler is an excellent to work with DOM. It works with the native DOM Extension and therefore is fast and widely used.
Here an example from the doc on how to add content:
$crawler = new Crawler();
$crawler->addHtmlContent('<html><div class="foo"></div></html>');
$crawler->filter('div')->attr('class') // returns foo

Categories