HTML generation in PHP

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|622\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Blogs Home -> Blogs

JL235	Created : 31 August 2010 System : Linux HTML generation in PHP
I'm currently toying with the idea of building some classes for generating HTML from PHP code. The idea is to try to cut down on the mix-mash you can get of HTML and PHP, especially to remove all of the <?php ?> tags you end up having everywhere. So here are two code samples. The first is some actual HTML code I wrote last night, the second is a fictional PHP example I've just cooked up which would output the same HTML code. HTML: <div class="alliance_links"> <?php if ( isset($myAlliance) && $myAlliance ) { ?> <form method="post" action="/alliance/leave" onsubmit="return quitAlliance();" > <input type="hidden" name="leave" value="yes" /> <input type="submit" name="submit" value="Leave" /> </form> <?php if ( isset($hasApplications) && $hasApplications ) { ?> <a href="/alliance/applications/<?php echo $alliance->id; ?>">View Applications</a> <?php } ?> <?php } else if ( isset($inAlliance) && !$inAlliance ) { $joinHidden = $hasApplied ? 'style="display: none;"' : ''; $deleteHidden = $hasApplied ? '' : 'style="display: none;"'; ?> <form id="alliance_join_form" <?php echo $joinHidden; ?> method="post" action="." onsubmit="showOverlay_join_alliance(); return false;" > <input type="submit" name="submit" value="Join" /> </form> <form id="alliance_delete_form" <?php echo $deleteHidden; ?> method="post" action="." onsubmit="deleteApplication(); return false;" > <input type="submit" name="submit" value="Delete Application" /> </form> <?php } ?> <a href="/alliance/members/<?php echo $alliance->name; ?>">Members</a> </div> --v PHP: <div class="alliance_links"> <?php if ( isset($myAlliance) && $myAlliance ) { echo $html->form->method('post')->action('/alliance/leave')->onsubmit('return quitAlliance();')->nodes( $html->input('hidden')->name('leave')->value('yes'), $html->input('submit')->name('submit')->value('Leave'), ); if ( isset($hasApplications) && $hasApplications ) { echo $html->a('/alliance/applications/'.$alliance->id)->text('View Applications'); } } else if ( isset($inAlliance) && !$inAlliance ) { $joinHidden = $hasApplied ? 'style="display: none;"' : ''; $deleteHidden = $hasApplied ? '' : 'style="display: none;"'; echo $html->form->id('alliance_join_form')->class($joinHidden)->method('post')->action('.')->onsubmit('showOverlay_join_alliance(); return false;')->nodes( $html->input('submit')->name('submit')->value('Join'), ); echo $html->form->id('alliance_delete_form')->class($deleteHidden)->method('post')->action('.')->onsubmit('deleteApplication(); return false;')->nodes( $html->input('submit')->name('submit')->value('Delete Application'), ); } echo $html->a('/alliance/members/'.$alliance->name)->text('Members'); ?> </div> --v The PHP version works by having a HTML generator stored in the $html variable. When methods are called on it a new HTML generator is returned with those changes stored, allowing calls to be chained. You'd have to manually call for them to be echo'd, but their toString would also return the HTML version. So you could also use the generated HTML as a string. As you can see the PHP heavy version is not shorter, but I wonder if it's easier to read? What are people's thoughts on this?

Comments
Tuesday, 31 August 2010, 09:40
Jayenkai	Personally I find the "Looks like code" PHP version (#2) better, but I imagine there's a whole bunch of people who prefer the "Looks like HTML" version. (#1) The codey one reads easier to me. Although you've still indented everything in the HTML one, it's all kinda "here's one bit, oops, back again, some more, jump back, hop in, hop out, do the hokey-cokey".. And Google Chrome can spell hokey-cokey.. I think this is just a personal preference thing, it doesn't make it any better or worse, but as a coder I'd imagine you'd prefer the second. Has anyone ever done any bulk-tests? Is it quicker to stay in PHP mode, or quicker to jump back and forth?!
Tuesday, 31 August 2010, 09:40
CodersRule	I like the concept, but HTML is a lot easier to read and I personally don't believe you're saving enough to use it rather than just using HTML. And you'd want the HTML class to be quick, because writing out direct HTML is a lot quicker than calling functions to write out the same code. \|edit\| Jay's post wasn't there when I was posting. \|edit\| \|edit\| Edit 2: Adding more: \|edit\| Also, there's stuff that you'd need to relearn. By _just_ knowing HTML, you wouldn't know that the $html->a has the text() method. It'd also be harder to organize in that it'd be harder to style with CSS. Would you rather try to style <?php echo $html->div->id('content')->text($entireDivContent); ?> --v Is that how you would do a div? It'd be annoying, because you'd have to define all of the HTML code into a variable before writing it out, or organization would be even more of a mess. Would you rather style that? Or this: <div id="content"> <?php echo $entireDivContent ?> </div> --v HTML has been kept over the years partly because it's easy to read and write. That's an important feature of it.
Tuesday, 31 August 2010, 09:44
JL235	Tbh I don't care about performance. Interacting with the DB will certainly be more expensive, especially if your site is popular (and so has lots of stuff in it). At this point in time I'm mainly caring about making writing HTML easier. @Jay That's exactly why I want to build something like this, to make my HTML files look less like dirty scripts. But I think I kinda agree with this: CodersRule I personally don't believe you're saving enough to use it rather than just using HTML. One minor improvement is it can include some in-built things, like the text function could add slashes to make your text HTML safe (you'd use the html function to avoid this). That means you can dump user input into the HTML without caring about security. I could also add some default values for tag attributes which your supposed to always include. I'm gonna continue toying with this idea.
Tuesday, 31 August 2010, 14:37
Stealth	If you can come up with a more clever implementation of this, I think you have something. The PHP pseudo code you've shown isn't more effective. I also think there is a huge drawback because it requires you to learn these new PHP tags. A better solution would be to create a template engine rather than an HTML generator. Replace your <?=$var?> with %var% or what-not. I think if you came up with a really cool way to write templates, it would be a far simpler and more flexible solution.
Tuesday, 31 August 2010, 22:16
JL235	First I think this is closer to what I'm settling on: <div class="alliance_links"> <?php if ( isset($myAlliance) && $myAlliance ) { echo HTML::form('post', '/alliance/leave', 'return quitAlliance();')->nodes( HTML::hidden->name('leave')->value('yes'), HTML::submit->value( 'Leave' ) ); if ( isset($hasApplications) && $hasApplications ) { echo HTML::a( '/alliance/applications/'.$alliance->id, 'View Applications' ); } } else if ( isset($inAlliance) && !$inAlliance ) { $joinHidden = $hasApplied ? 'display: none;' : ''; $deleteHidden = $hasApplied ? '' : 'display: none;'; echo HTML::form('post', '.', 'showOverlay_join_alliance(); return false;')->id('alliance_join_form')->style($joinHidden)->nodes( HTML::submit->value( 'Join' ) ); echo HTML::form('post', '.', 'deleteApplication(); return false;')->id('alliance_delete_form')->style($deleteHidden)->nodes( HTML::submit->value( 'Delete Application' ) ); } echo HTML::a( '/alliance/members/'.$alliance->name, 'Members' ); ?> </div> --v Lots of more parameters supplied for the elements and you'd create elements from a HTML static class rather then an object held in a variable. @Coders I wouldn't want to have to concat lots of HTML into a single string either. Instead you could do something like: echo HTML::div->id('content')->nodes( HTML::h1('Title'), HTML::p('Lots of text'), HTML::h2('Subtitle'), HTML::p('The quick brown fox jumps over the lazy dog') ); --v But I think the best solution would be to just write the above in HTML. I'm thinking that this would be mainly used for replacing the fiddly bits where your mixing lots of PHP and HTML together. If you notice in my example it's all wrapped within an outer div, as it's much simpler to use HTML for that. What I'm also liking is that it would be easier to build extra components where you need to add code both before and after your HTML code. For example I have some HTML for building overlays that appear on top of the webpage, but the code to use it is essentially: <?php require "view/common/overlay_start.php" ; ?> <h1>To: <?php echo $toName; ?></h1> <form method="post" action="." onsubmit="sendMail( this ); return false;"> <input type="text" name="subject" /> <text area name="content" ></text area> <input type="button" name="Cancel" value="Cancel" onclick="hideOverlay();" /> <input type="submit" name="Send" value="Send" /> </form> <?php require "view/common/overlay_end.php" ; ?> --v But instead I could wrap that up as an extra HTML component, as say: echo HTMLextra::overlay( 'compose', HTML::h1( "To: $toName" ), HTML::form( 'post', '.' )->onsubmit( 'sendMail( this ); return false;' )->nodes( HTML::text->name('subject'), HTML::text area->name('content'), HTML::button('Cancel')->onclick('hideOverlay();'), HTML::submit('Send') ); ); --v
Thursday, 02 September 2010, 08:32
JL235	I've decided to implement this and move over some of my code to use it. The extras stuff seems to be really making a difference. It's only small but I have code that looks like this: XHTMLx::overlay( 'mail_composeSent', XHTML::p( 'Your mail has been sent.' ), XHTML::button( 'Ok', 'Ok', 'hideOverlay("mail_composeSent");' ); ); --v instead of: <?php $this->load->view( "view/common/overlay_start.php", array( 'name' => 'composeSent' ) ); ?> <p>Your mail has been sent.</p> <input type="button" value="Ok" name="Ok" onclick="hideOverlay_composeSent()" /> <?php $this->load->view( "view/common/overlay_end.php" ); ?> --v A pure PHP solution is much more to the point.

HTML generation in PHP

Comments