Seperating Code/Functionality From HTML

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
thomas777neo
Forum Contributor
Posts: 214
Joined: Mon Mar 10, 2003 6:12 am
Location: Johannesburg,South Africa

Seperating Code/Functionality From HTML

Post by thomas777neo »

Hi All

How on earth does one seperate the php from the html. Yet, having the maintenance of the site still being pretty easy.

E.g. Here is some code, how would I perform the current question on it:

Code: Select all

<?
require("includes/class.encryption.php");
require("ini.php"); // requires class.encryption.php
require("includes/class.debug.php");
require("includes/class.mysql.php"); // extends class.encryption.php
require("includes/class.utilities.php"); // extends class.mysql.php
require("includes/class.benchmark.php"); // extends class.mysql.php

if ($_SESSION&#1111;"board_pass"] == 1)
&#123;
	$skip_check = 1;
	require("process.php");
&#125; //if ($_SESSION&#1111;"board_pass"] == 1)

if ($login == 1)
&#123;
	if ($timer == 1)
	&#123;
		$startTimer = $util-> get_formatted_microtime();
	&#125; //if ($timer == 1)
?>
  <script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) &#123; //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) &#123;
    d=parent.frames&#1111;n.substring(p+1)].document; n=n.substring(0,p);&#125;
  if(!(x=d&#1111;n])&&d.all) x=d.all&#1111;n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms&#1111;i]&#1111;n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers&#1111;i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
&#125;

function MM_validateForm() &#123; //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) &#123; test=args&#1111;i+2]; val=MM_findObj(args&#1111;i]);
    if (val) &#123; nm=val.name; if ((val=val.value)!="") &#123;
      if (test.indexOf('isEmail')!=-1) &#123; p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      &#125; else if (test!='R') &#123; num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) &#123; p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    &#125; &#125; &#125; else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; &#125;
  &#125; if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
&#125;
//-->
  </script>
<title>Login</title>
<form action="process.php" method="post" name="login" id="login">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
	<p>&nbsp;</p>
    <table align="center" class="tableClass">
      <tr>
        <td rowspan="4">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="4">&nbsp;</td>
      </tr>
      <tr>
        <td>Login Name </td>
        <td><input name="login_name" type="text" class="box" id="login_name"></td>
      </tr>
      <tr>
        <td>Login Password </td>
        <td><input name="login_password" type="password" class="box" id="login_password"></td>
      </tr>
      <tr>
        <td>&nbsp;            </td>
        <td><input name="Submit" type="submit" class="submit" onClick="MM_validateForm('login_name','','R','login_password','','R');return document.MM_returnValue" value="Submit"></td>
      </tr>
    </table>
  <p class="info">If you have any problems logging in, please contact us at <? echo $support_email; ?></p>
  </form>
<?
	if ($timer == 1)
	&#123;
		$endTimer = $util-> get_formatted_microtime();
		
		if ($startTimer == $endTimer)
		&#123;
			$totalTime = 0;
		&#125; //if ($startTimer == $endTimer)
			else
			&#123;
				$totalTime = $endTimer - $startTimer;
				$totalTime = round($totalTime,6);
			&#125; //if ($startTimer == $endTimer)
		
		if (strstr($totalTime,"E"))
		&#123;
			$totalTime = 0;
		&#125; //if (strstr($totalTime,"E"))
		
		echo "<p class="info">Execution Time &#1111;login.php]&#1111;login screen load]:".$totalTime." second(s)</p>";
		
		$insert_benchmark = $benchmark_site-> insert_benchmark_site("benchmark_site","INTO",NULL,NULL,NULL,NULL,NULL,"now()",0,0,0,0,0,"login.php","login screen load","$totalTime",1,30000,NULL,NULL);
	&#125; //if ($timer == 1)
&#125; //if ($login == 1)
?>
<table align="center">
  <tr>
    <td><img src="images/logos/xampp.jpg"></td>
    <td><img src="images/logos/apache.jpg" width="120" height="19"></td>
    <td><img src="images/logos/php5.jpg" width="60" height="32"></td>
    <td><img src="images/logos/mysql.jpg" width="60" height="31"></td>
  </tr>
  <tr>
    <td colspan="4"><div align="center"><strong class="info">AMP Technology </strong></div></td>
  </tr>
</table>
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

First of write the output as a standard HTML file.
Determine which portions of text could be variable/changed by PHP.
Write PHP code to get the variables items. and place as block at top of file
Replace variable HTML with <?php echo($variable_name); ?>.

Not totally separate but much more readable. (Simplistic example below).

Code: Select all

<?php
  $page_title="LURTZ RULES";
  $logged_in="Aragorn";
?>

<html>
<head>
<title><?php echo($page_title);?></title>
</head>
<body>
<h1><?php echo($page_title);?></h1>
<p>You are logged in as <?php echo($logged_in) ?></p>
</body>
</html>
jl
Forum Commoner
Posts: 53
Joined: Tue Nov 09, 2004 12:05 am

Post by jl »

This is the idea of templating..

I have a simple templating class I put together that allows me to have a template file that is HTML, and a PHP file that fills in 'place holders' in the HTML file.

E.g., my HTML file looks like this:

Code: Select all

<html>
<title>&#123;TITLE&#125;</title>
<script> ... javascript code .. </script>
This is the HTML header <br><br>
&#123;CONTENT&#125;
<br><br>
This is the footer
</html>
Then I have a template class where I can write to variables called TITLE and CONTENT, then I tell the template class to fill in {TITLE} and {CONTENT} from the HTML template with the value of the variables called TITLE and CONTENT.

This is a bit of a simplification to what my class does, but is the basis of templating and completely separating PHP from HTML.
User avatar
thomas777neo
Forum Contributor
Posts: 214
Joined: Mon Mar 10, 2003 6:12 am
Location: Johannesburg,South Africa

thanks

Post by thomas777neo »

Many thanks for you input
Post Reply