PHPFront logo
v1.0.0 now
PHPFront Online Documentation now available! PHPFront is available on Composer: composer require ox-harris/phpfront Contact us to place an ad here...

Introduction To Phpless Markup

Here is a little new dimension to creating webpages and working with templates.

You'll agree that creating webpages for dynamic, PHP-powered websites is not as easy as creating static web pages.

The Problem: PHP + HTML

To create dynamic web pages for PHP, you would have to pick up some PHP variables and echo them in elements. Then you would have to create loops to render array variables.
And, of course, you couldn't even attempt this without having first learned the PHP programming language - in addition to all the languages used in frontend design.

Truth is, for PHP-powered projects that are really functional, frontend design can be a real pain mixing PHP and HTML codes on files everywhere.

How messy HTML looks with inline PHP!

Well, with PHPFront, you can write clean HTML markup, with no single trace of PHP code, and yet have your templates pick up content from the backend of your application (contents in PHP variables).

Let's see how codeless markup works.

Compare PHPless Markup

Here are some common code-mixing cases. Then see the PHPFront solution. In each case, compare the look of the HTML markup.

PHP + HTML 
      
        
        <h1><?php echo $var ?></h1>
PHPFront 
      
        
        <h1></h1>
        
        // Backend code
        $PHPFront->assign('h1', $var);

Test Before Print String

PHP + HTML 
      
          
        <div>
        <?php if (!empty($var))
        {
            echo $var;
        }
        ?>
        </div>

        <!-- OR -->

        <div id="container-element"><?php echo !empty($var) ? $var : '' ?></div>
PHPFront 
      
        
        <div id="container-element"></div>
        
        // Backend code
        $PHPFront->assign('#container-element', $var);

Show Default Text if String Is Empty

PHP + HTML 
      
          
        <p>
        <?php if (empty($var))
        {
            echo '<em id="container-element">empty</em>';
        }
        else
        {
            echo '<b id="container-element">'.$var.'</b>';
        }
        ?>
        </p>
PHPFront 
      
        
        <p><em id="container-element">empty</em></p>
        
        // Backend code
        if (!empty($var))
        {
            $PHPFront->assign('#container-element', array('@content' => $var, '@render' => 'b'));
        }
PHP + HTML 
      
        
        <table>
        <?php if (!empty($users))
        {
            For($i = 0; $i < count($users); $i++)
            {
                echo '<tr>';
                echo '<td>'.$users[$i]['first_name'].'</td><td>'.$users[$i]['last_name'].'</td><td>'.$users[$i]['username'].'</td>';
                echo '</tr>';
            }
        }
        </table>
PHPFront 
      
        
        <table>
          <tr><td></td></tr>
        </table>
        
        // Backend code
        $PHPFront->assign('table', $users);
What do you notice?

- PHPFront can find elements by their tag names, id, class, and other attributes - just like CSS.
- HTML markup can be in fewer code or even dry - with PHPFront there to fill-in the blanks and auto complete the page.

Furthermore, it is a key goal achieved by PHPFront to work without any proprietary tags, or syntaxes. That's why you can work with PHPFront without any learning curve – because there is practically none.

The revolutionary part of it is that all the work of revealing application content is now moved from the frontend to the backend.

Want to peep into the friendly developer documentation section to see how the magic happens? No problems.
You may also visit the Hello World section of this documentation for an overview of how PHPFront works.

Codeless Markup will make your HTML templates valid anywhere: PHP or no PHP, template engine or no template engine!

Frontend designing now means less code (Codeless!), and zero PHP codes (Codeless!)

Working with the Backend

With PHP separated from HTML, the frontend cannot access the backend.
The backend believes that it is safer with this isolation from the front, and that is true. And that also means zero liability on your part!

Now your templates are as blind as anything! You will not be able to touch any application variable or data, let alone manipulate them here in your markup.

But you should know about the nature and structure of the data revealed by your application - the application's data API - then you can create the beautiful User Interfaces and an awesome User Experience for it.

An application's Data API is something the developers will create and hand over to you. This Data API is your collaboration point with the backend.

Furthermore, thanks to PHPFront, you could also affect the behaviour of PHPFront itself at runtime. There are a few HTML attributes that you can set on elements to set rendering preferences. These are covered in the chapter Adding Special Rendering Attributes.

Summary

  • PHPFront makes it possible write clean HTML markup, with no single trace of PHP code, and yet have the templates pick up content from the PHP backend of the application. Recall
  • Collaborating with the backend means understanding the nature and structure of the data revealed by an application - the application's data API. Recall
  • It is possible to affect PHPFront's behaviour during rendering using some special attributes.

Welcome to Codeless Markup!

Back to Designing for PHPFront

See Also