Charles's Notes for Code: Building PHP Web Apps Without Framework

Building PHP Web Apps Without Framework

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.

Charles's Notes for Code

Monday, September 17, 2018