Building a PHP web app using a framework such as Laravel, Symfony and CakePHP is a straight-forward job. Just arrange functions according to the rules set by the framework, programmers usually can get the job done. However, learning the framework itself is not a very easy task. There are a lot of concepts, ideas, knowledge to learn. Learning time is quite long.
What if to build a PHP web app without using a framework? Just utilizing few basic tools such as template engine, and setting up some rules for passing parameters between web pages, a simple PHP web app is easy to build. Let’s find out!
Setup A Circulation Mechanism of Web Pages
Normally, the entry point of a web is
index.html, it is
index.php if programmed by PHP. So we can identify the direction is:
index.php -> index.html -> user interaction
^ |
\----------------------------- /
Which means the system redirects to
index.html at the end of
index.php. Any operation triggered by pressing a button at
index.html will start running from
index.php with or without parameters again. The according operation is executed depends on the parameters
POSTED by the former
index.html. After the required operation executed, the system redirects to
index.html with some other parameters passed. The
index.html shows the pages accordingly again. Then the circulation mechanism is built.
Passing Parameters - Smarty Template Engine
How to passing parameters between pages? The answer is
Smarty Template Engine. Here is how:
- Download Smarty and stored in a subdirectory
/smarty/lib.
- Place these two lines of code at the beginning of
index.php.require_once('smarty/libs/Smarty.class.php');
$smarty = new Smarty;
- place code as follows at the end of
index.php.$smarty->assign('op', $op);
$smarty->display('index.html');
Notice that ‘op’ means operation parameter. It is used to control the program flow in order to execute the required operation.
The last line is to display
index.html. Therefore the program flow goes to the html rendering part.
Starting Web Page
We start from
index.php with default (no) parameter passing to
index.html. And html pages is rendered by default.
Imaging that there is a link shown as follows:
<a href="index.php?op=list_products">
If we press the link, it goes back to
index.php with ‘op=product_display’ parameter.
That is the
user interaction designed for user to decide to at the web page. Now the system goes back to
index.php.
The ‘op’ Parameter and Flow Control
The flow control of
index.php is decided by the ‘op’ parameter.
$op variable is initialized and copy value from the session variable $_REQUEST[‘op’].
$op = isset($_REQUEST['op']) ? filter_var($_REQUEST['op'], FILTER_SANITIZE_MAGIC_QUOTES) : '';
A flow control built by
switch to decide which operation is made.
switch ($op) {
case 'list_products':
$op = "list_products";
list_products();
break;
:
:
default:
show_default();
break;
}
Also, a function
list_products() in
index.php is made:
function list_products() {
global $mysqli, $smarty;
$products = "";
$sql = "SELECT * FROM products";
$result = $mysqli->query($sql) or die($mysqli->connect_error);
$products = $result->fetch_all(MYSQLI_ASSOC);
$smarty->assign('products', $products);
}
A variable
$products is passed to
index.html for rendering web page.
Flow Control in the Web Page
The
index.html is composed by at least three parts of html files. They are ‘head part’, ‘main part’ and ‘foot part’. The ‘main part’ is the place where flow control works. The following
Smarty code acts as the control part. The system include
list_products.html while
$op == 'list_products', where shows all products.
<!DOCTYPE html>
<html lang="en">
<head>
:
</head>
<body>
{if $op == 'list_products'}
{include file = "list_products.html"}
{elseif}
:
:
{else}
:
{/if}
:
:
</body>
</html>
The sample code of
list_products.html is as follows:
<div class="row">
{foreach from=$products item=product}
<img src="uploads/thumbs/{$product.prod_id}.png" alt="{$product.prod_name}">
<a href="index.php?prod_id={$product.prod_id}">{$product.prod_name}</a>
price：{$product.prod_price}
counter：{$product.prod_counter}
{/foreach}
</div>
As shown above, the
$op variable can be used as the key of the flow control. The system shows different web pages by composing different sub web pages in the main part according to
$op. Now the flow stops at
index.html again with new contents where allows user to trigger a new action again.
