PHP Programming – Should PHP Code Be Included in HTML or Vice Versa?

htmlPHPprogramming practices

What is the best practice, to write my PHP code inside my HTML code or HTML inside PHP?

PHP inside HMTL:

 <p class="lead">Welcome to the <?= COMPANY_NAME ?> website.</p>

HTML inside PHP:

 <?php
      echo '<p class="lead">Welcome to the ' . COMPANY_NAME . ' website.</p>';
 ?>

Is there a difference in performance? Which is the best practice? As in, which would produce code that is best maintained.

Also COMPANY_NAME is defined as such:

define("COMPANY_NAME", 'MyCompany');

Best Answer

What about:

Neither

Mixing languages is not a good idea. You don't put JavaScript in HTML, or HTML in JavaScript, or JavaScript in PHP, or HTML in Python or Ruby in SQL.

Why don't we do that?

Because different languages usually correspond to different layers.

PHP deals with business logic. HTML deals with presentation of the business objects. Thus, you have two layers: the one generates the objects; the other one builds a pseudo-XML representation of those objects.

In the same way, JavaScript deals with interaction, and CSS with the presentation of the content. When you want to change interaction, you don't open an .html file, and you surely don't open a .php file: you open a .js or .coffee file.

By mixing logic within the same file, you'll quickly notice that maintaining the code becomes more and more difficult. You want to change the method which applies rebates to products, and you spend fifteen minutes browsing through a mix of HTML with PHP statements here and there, and PHP code with HTML all over it.

The fact that technically, PHP makes it possible to mix HTML and PHP is irrelevant. The feature is available for historical reasons, but shouldn't be used any longer.

So what should you do?

What are you probably looking for is called templates. Depending on the framework you use, it may already be available, usually under a form of MVC, where the template is in the view, or you may have to use a third-party template engine, such as Smarty.

In both cases, the idea remains the same. You have PHP code strictly separated from the template which contains the HTML and a bit of very simplistic logic: simple loops over entities, conditions for conditional displaying of information, etc. When the PHP code is ready, it calls the template engine, passing to it some information. The engine uses a specific template to build the final output (often HTML, but other formats are possible as well) which is then sent to the user.

By using templates, you make sure that you have a strict separation between the business logic and the form you give to this logic through the templates. One day, you can throw all those templates and write other ones, without modifying a single line of PHP code. Or you may create a bunch of templates for a mobile version of the website.

An additional benefit is that you are not even stuck with HTML. If you need to make an API which is based practically 1:1 on the actual web pages of the website, instead of applying the template, you serialize to JSON the object which was about to be sent to the template engine. With practically zero efforts, you add API capability to an app, thing which couldn't be possible without severe rewriting if you were mixing PHP and HTML.

General

Indents are 4 spaces.
Indent new levels
Comments are < ~80 chars from the indent level. If I'm in two levels (8 spaces) that means the cursor stop will be around 88 characters.
Use multi-line comments. I prefer the look, however this is a subjective point.
Comment now rather then later when you have no idea what's going on.
Allman style braces. It's cleaner and is more readable. Subjective.

JavaScript

Use a library. jQuery in particular is very good. It eliminates all cross browser headaches.
Understand that ID's are for particular elements, classes are for styles. ID's shouldn't be used more then once per page and they will have particular hooks attached to them. Use classes for things like navigation.
Out source into methods. It's tempting to put all the code into the bind call, however putting it in it's own function will increase the flexibility of your code.
Use functions instead of evals. That means setTimeout(function(){ /* Do something */ }, 1000); instead of setTimeout('doSomething', 1000);
Use local variables with var.

HTML

Semantic markup. Use appropriate tags. Don't put <br />'s in there to add space, adjust margins and CSS rules.
All tags are lowercase.
All tags should end with a closing tag or be self closing.
Make use of classes for layout that is similar. Have a couple of predefined classes like hide, clear, error, etc.
Everything (scripts included) should go in <head>. Worry about optimizing (moving stuff around) when it presents a problem.
External stylesheets and JavaScript source is a must unless it is page specific.

PHP

Frameworks are good, I recommend CodeIgniter.
If you don't want to use a framework, try to use the latest version of PHP possible. (That means 5.3).
Use includes to your advantage.
Clear injections or use prepared statements.

Perform if checks on preconceived fail-secure values.

$logged_in = false;
if(check_user($user))
{
     $logged_in = true;
     $user = load_user($_SESSION);
}

Know the difference between single and double quotes. Use single quotes when possible.
Don't echo HTML.

PHP, JavaScript, HTML – Correct Echoing of HTML in JavaScript

The addslashes method is NOT reliable. Instead, do:

new Element('div', {
    html: <?= htmlspecialchars(json_encode($html)) ?>
}.inject($('content'));

addslashes() is a braindead deprecated method of escaping text for SQL usage. It's not intended for Javascript. That's what JSON is for. It'll convert your PHP data (simple variable, object, array, etc...) into what's guaranteed to be syntactically correct Javascript.

JSON (or javascript) embedded in HTML needs to be properly escaped for HTML. That is why it is wrapped in htmlspecialchars(). Consider that JSON will NOT encode <, >, &, and others because they are valid characters in a quoted JSON string.

However, since you're just inserting one block of html into JS, you could just have

<div id="seekrithiddenhtml" style="display: none">
<?= $html ?>
</div>

from which you can then do a simple cloning in javascript.

Best Answer

Neither

Related Solutions

Javascript – PHP, HTML, Javascript and writing good practices

General

JavaScript

HTML

PHP

PHP, JavaScript, HTML – Correct Echoing of HTML in JavaScript

Related Topic