A Whole Lot of New Possibilities with PHPFront
Do one thing right and many things will fall in place!
PHPFront is an effort to implement code separation between PHP and HTML. But other things have fallen in place!
See how PHPFront is naturally smoothing out one or two rough edges in web developement and shedding light on a third gray area.
Then discover the new possibilities it brings.
Application Security
When PHP code is allowed to run from within HTML, anyone would easily access the system from the frontend - the template.
Any type of content could be obtained, database and file system could be modified, and whatever rules or principles built into the main application logic would be overridden there on the template.
Those are the serious security vulnerabilities associated with code combination. And, today or tomorrow, you would be having this or that to combat.
But separate the codes, and the issues are gone forever! This is what PHPFront makes possible!
It stands between the front and back ends, facilitating all access to the frontend from the backend but making the backend completely inaccessible from the frontend.
That's PHPFront as a security layer - a tough and non-negotiable one!
A Borderline Between The Developer and The Designer
When it comes to creating templates to render dynamic content, PHP has to be involved. But it always had to be coded inline with HTML.
Developers and designers have had to step out to learn a new language since their mother tongue alone would not do it.
So where does the developer's job end, and where does that of the designer begin? That has been the gray area, especially when both teams meet on a project.
Or would it just suffice to get the designers to learn PHP? Or should templating be left to the developers? The questions keep coming once you start asking them.
But things have changed! With PHPFront, Frontend and Backend codes can be written in separate places, at separate times, and by separate people!
It's a teamwork, but the developer and the designer can now focus squarely on their respective worlds of codes. There's now a clear border line between the roles, just like the one between the codes.
How this sheds light on the gray area!
New Possibilities with Code
Sometimes all it takes to open up new possiblitites for engineers is the right tool.
Now with the right tool, here are new things made possible.
Only be prepared to change the way you do certain things and get ready to embrace the new possibilities with code!
Real Code Separation
Code Separation means: write code A to affect code B, but do not mix them together.
This principle works well with HTML and CSS - giving CSS the ability to tranform HTML without stepping a foot on it!
Unfortunately, PHP is not designed to work this way. Hence, the practice of mixing PHP and HTML!
But, this is not anymore the case!
With PHPFront, PHP can work with HTML from a distance! Real code separation is now possible!
PHPFront even supports the CSS convention of targeting elements; and everything just revolves around the standards.
Here we go.
-
In CSS, you would write:
...h1 { color: red; } h2.large { font-size: 50px; } a[href^='#'] { color: orange; }
-
In PHP you would write:
...$PHPFront->assign('h1', 'This Is Heading1'); $PHPFront->assign('h2.large', 'This Is Large Text'); $PHPFront->assign('a[href^="#"]', array('@attr' => array('title' => 'Jump to document section', 'class' => 'anchor-links')));
-
Meanwhile, your HTML sits clean like this:
...<html> <head> <title>Untitled Document</title> </head> <body> <h1></h1> <h2 class="large"></h2> <p>Code Separation is clean! See how CSS, HTML and PHP are all working together professionally! <a href="#code-separation">Learn more below</a>.</p> </body> </html>
Preview your HTML in a browser and see how CSS and PHP transformed it without touching it! -
When next you're tempted to mix codes just because 'it works anyway!', remember, your HTML will suffocate... just like this:
...<html> <head> <title>Untitled Document</title> </head> <body> <h1 style="color: red"><?php echo $page_h1 ?></h1> <h2 class="large" style="font-size: 50px"><?php echo $document_title ?></h2> <p>Code Separation is clean! See how CSS, HTML and PHP are all working together professionally! <a style="color: orange" href="#code-separation"<?php echo !empty($tooltip) ? ' title="'.$tooltip.'"' : '' ?><?php echo !empty($anchor_class) ? ' class="'.$anchor_class.'"' : '' ?>>Learn more below</a>.</p> </body> </html>
And you could lose track of things here and there. But now your templates can be really codeless!
Template Manipulation
With PHPFront, you can engineer your template on the fly as it leaves the server to the browser.
You know, some things are really better decided upon and done on the server; and your page will land on the browser well-formed.
You see how JavaScript manipulates the DOM on the browser, that's how PHPFront does it on the server.
So, how would you like to manipulate your templates before rendering on the browser?
Here's a case:
Do we have content to display on the right side bar of the page? OK, go ahead.
Otherwise remove the empty side bar and make the main column wider to fill up its space.
-
With PHPFront:
...if (!empty($right_sidebar_content)) { $PHPFront->assign('aside.right', $right_sidebar_content); } else { $PHPFront->assign('aside.right', array('@render' => false)); $PHPFront->assign('main.col-md-10', array('@attr' => array('class' => 'col-md-12'))); }
-
With plain PHP:
...<main class="<?php echo !empty($right_sidebar_content) ? 'col-md-10' : 'col-md-12' ?>"> ... </main> <?php if (!empty($right_sidebar_content)) {?> <aside class="col-md-2"> <?php // loop over array here ?> </aside> <?php} ?>
Consider another case:
We are two levels away from the homepage of a website (Home > About > Our Story). We want all the links towards this subdirectory to have the class 'active'. That would also include all the links to the parent directory having the same class.
We would later use CSS to highlight all '.active' links.
-
With PHPFront:
...$PHPFront->assign('xpath:a[starts-with("'.$location_path.'", @href)]', array('@attr' => array('class' => 'active')));
See the sample result. Notice the '.active' links:
...<nav> <ul class="menu"> <li class="menu-item"><a href="/phpfront/shop-now">Shop Products</a></li> <li class="menu-item"><a href="/phpfront/contact">Contact Us</a></li> <li class="menu-item"><a href="/phpfront/about" class="active">About Us</a> <ul class="sub-menu"> <li class="sub-menu-item"><a href="/phpfront/about/mission">Our Mission</a></li> <li class="sub-menu-item"><a href="/phpfront/about/vision">Our Vision</a></li> <li class="sub-menu-item"><a href="/phpfront/about/story" class="active">Our Story</a></li> </ul> </li> </ul> </nav>
-
If you were to do that with JQuery - Javascript
...$('a[href]').each(function(i, element) { if (document.location_path.indexOf(element.attr('href')) === 0) { element.attr('class', 'active'); } });
For this to even work, your page must, first, have been rendered by the browser. But wouldn't this be better done server-side?
This is the new possibility brought by PHPFront! -
Ok, if you were to do this same thing with plain PHP, HMMM:
...<a href="dir1/"<?php echo strpos($location_path, 'dir1/') === 0 ? ' class="active"' : '' ?>>Click</a> <a href="dir1/subdir/"<?php echo strpos($location_path, 'dir1/subdir/') === 0 ? ' class="active"' : '' ?>>Click</a> <a href="dir2/"<?php echo strpos($location_path, 'dir2/') === 0 ? ' class="active"' : '' ?>>Click</a> <a href="dir2/subdir/"<?php echo strpos($location_path, 'dir2/subdir/') === 0 ? ' class="active"' : '' ?>>Click</a>
...remember to do this on the rest of the links! (That's if you like to do things the hard way.) -
And we didn't tell you: there is no limit to how you can manipulate your templates!
You can use all the power of PHP on them because there is no middle man.
This is so unlike other template engines that are designed to lock away PHP functions and allow you to do only a few things with their own version of selected PHP functions.
Plug-N-Play Templating
With PHPFront, any valid HTML markup is a template. And valid HTML is valid anywhere with or without the PHPFront engine. Now, that's unlike other templating systems whose template files only work within their engine environment and fail elsewhere.
But get PHPFront. Plug-in any template without having to configure anything.
Port templates to and from anywhere - they'll all play.
And here is a tip:
You can implement multi-templating system on your project.
Just do all the assign() from inside your application, and when you're ready to render, try setTemplate() using different template files - one template at a time.
Ready to have fun?
- Create three HTML templates, or head on to a site where you can download free templates.
- Assign data to some elements like the
<title>
,<menu>
,<h1>
,<p>
and all the rest. -
Now test each template on your code. With PHPFront every HTML template is 'plug-n-play'!
...$PHPFront->setTemplate('template1.html'); // $PHPFront->setTemplate('template2.html'); // $PHPFront->setTemplate('template3.html'); $PHPFront->render();
- In real life, you may want to let individual users set the name of their prefered template to a cookie or to the database. Each one can thus have his prefered feel of your website.
- How would you attempt to do this with plain PHP?
Wouldn't each template be a whole new project for you, considering all the inline PHP codes you would write on them, taking care to write the same PHP codes on each one?
That would be terribly tidious; and fortunately, we do not have the time and space to do that here!
Let's continue the rest of the codes in the examples - because this is not all!
You will see no point in doing things the hard way! (In fact, it may hurt your feelings to see how easy some big things you've done could have been simply done! But don't kick yourself.)
So code with all the ease, fun, and a whole lot of new possibilities! Be more productive or just impress! Have fun and share the fun with code!