I am working on a project currently where the Index.php file basically acts as a layout page and basically uses tables for the layout.
Please have a look at it's contents below. This is just a small part of the code, there's much more like this.
I need to pass on this file to a Front End Developer/ Designer so that he could change the layout as well as change the code to use CSS instead of Tables for the layout. But I think this is a mess and the designer might have issues understanding and modifying this.
What's the best way to structure and organize this code so that
1)The code becomes much more cleaner, structured and organized.
2)It's easier for the Designer to understand and change the layout.
<table width="770" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td colspan="3"><?php include("header.inc.php"); ?>
</td></tr>
<tr>
<?php
if ($xview == "main" || $show_sidebar_always)
{
?>
<td width="185" id="sidebar_left" valign="top">
<table width="90%" class="buttons" cellpadding="0" align="center">
<tr>
<td>
<!-- Begin Version 5.0 -->
<?php echo $lang['HOME_LINK']; ?>
<!-- End Version 5.0 -->
</td>
</tr>
<tr>
<td>
<?php echo $lang['POST_LINK']; ?>
</td>
</tr>
<?php if($enable_calendar) { ?>
<tr>
<td>
<?php echo $lang['POST_EVENT_LINK']; ?>
</td>
</tr>
<?php } ?>
<?php if($enable_images) { ?>
<tr>
<td>
<?php echo $lang['POST_IMG_LINK']; ?>
</td>
</tr>
<?php } ?>
<?php if($forum_dir) { ?>
<tr>
<td>
<?php echo $lang['FORUM_LINK']; ?>
</td>
</tr>
<?php } ?>
<tr>
<td>
<?php if($auth->id) { ?>
My Account
Watch List
Logout
<?php }else{ ?>
Login
Sign up
<?php } ?>
</td>
</tr>
</table>
<br>
To improve readability try using Alternative PHP Syntax in your HTML output.
<?php if($enable_calendar): ?>
...
...
<?php endif; ?>
Instead of:
<?php if($enable_calendar) { ?>
...
...
<?php } ?>
The closing blocks are a bit more intuitive than just a closing curly brace.
It would be better to let the designer create a completely new layout and then add the PHP logic into into. If you rewrite this I strongly suggest using a template engine.
Mmm. Here are some advices:
1) Use tables only when you want to show a table. Really. Almost 95% of the cases can and must be done using divs.
2) Use a template engine! so you don't mess up your html with your php code (and the designer won't break it). Good templating engines are Smarty (the most popular) and TemplatePower
Hope this helps. Cheers
I recommend you use a Template Engine, like the Smarty Template Engine
You can easily implement.
Use a templating engine like Smarty. Now if you ask around, most people hate Smarty for some reason or another, so do your research first. However it's great when you want the CSS / HTML to be in one place, and the business logic somewhere else.
Regardless of what you end up using, do a little research into the MVC design pattern -- that's a much cleaner way in general of keeping things organized.
I would first start by sorting out all the indentation, I know that's a corny thing to say, but it will be 10 times more readable than it was before you start optimising it.
<table>
<tr>
<td><?php echo "hi"; ?></td>
<td>cell 2</td>
</tr>
</table>
if you are going to intersperse <?php if(true == true) { ?> with <?php } ?> then try to make sure that they line up.
As a general rule on layout though, tables within tables is soooo 90s :P try reading up on CSS positioning using div elements and laying them out using the CSS instead of in the HTML.
I would take the time to invest your time to a CMS such as WordPress or Drupal, and learn how to apply CSS and PHP styles to the CMS. In particular, as I am familiar with WordPress, I can confidently state that developing a theme for WordPress allows you to intermingle direct PHP.
If using a CMS is not an option, then you probably should decide to create an API for your functions, create proper documentation for these API functions, and ask your developer to call off the API, for another layer of abstraction.
I do not recommend using a templating system such as Smarty, as it creates another layer of difficulty for your developers to learn. PHP as it stands is perfectly fine.
Related
So, I found this cool PHP script on the web called Listr. It makes your Index directories much prettier. I also noticed someone made a version specifically for Bootstrap, but opted not to use it (I don't want something over complicated, nor do I want to compile things).
So, I went along with the original Listr, added and removed a couple things to make it mobile friendly, and here is the result:
So, for whatever reason, only the first line shows up properly under Name. I really don't know why; I've tried several placements of <table>, <th>, and <tr>... none of my methods seem to work.
Here is my code: http://pastebin.com/uHSJhFyq (sorry, it's minified! you'll have to unminify it to read it :/)
Try this for the <tbody>:
<tbody>
<?if($folder_list):?>
<?foreach($folder_list as $item):?>
<tr>
<th><a href=<?=$item['name']?>/><?=$item['name']?></a></th>
<th><?=$item['size']['num']?><?=$item['size']['str']?></th>
<th><?=time_ago($item['mtime'])?> ago</th>
</tr>
<?endforeach;?>
<?endif;?>
<?if($file_list):?>
<?foreach($file_list as $item):?>
<tr>
<th><a href=<?=$item['name']?>.<?=$item['ext']?>><?=$item['name']?>.<?=$item['ext']?></a></th>
<th><?=$item['size']['num']?><?=$item['size']['str']?></th>
<th><?=time_ago($item['mtime'])?> ago</th>
</tr>
<?endforeach;?>
<?endif;?>
</tbody>
In my application, I have classes A and B. Objects of class A own many objects of class B.
To edit these objects, I have a compound form. The outer form edits the properties of object A and the inner form edits all the owned instances of B. This subform is supposed to display its entries as table rows. The table itself is defined by the outer form.
My project is using the PHP templating engine. So far, I have managed to overwrite the template widget to edit an object of type B. The property of A holding all instances of B is rendered as collection into the form. This means the following templates are rendered: collection_widget.html.php -> form_widget_compound.html.php -> form_rows.html.php -> form_row.html.php ->
my_custom_template_widget.html.php
However, some of these templates add tags to surround the templates they are rendering which destroys my table layout. I have managed to fix this by overwriting the template for this property by creating _formForA_propertyB_widget.html.php and rendering everything manually in there.
The problem I have now is that it should be possible to add objects to this collection. I want to do this using the prototype functionality provided by Symfony. However, it seems the prototype is not created using my overwritten template (of course not, as this is for a collection and not for a single row) but instead is created using form_row.html.php. I have tried overwriting this by creating _formForA_propertyB_form.html.php but this did not make any difference.
How can I overwrite the prototype template for this specific property?
Essentially this question is very similar to How to customize the data-prototype attribute in Symfony 2 forms but this one is about using PHP as a templating engine. Answers on the other question use features of the TWIG templating engine which are not available with the PHP engine.
Sample code to illustrate the problem:
Views/EditA.html.php:
<table data-prototype="<?php echo $view->escape($view['form']->row($form['collectionOfB']->vars['prototype'])) ?>">
<thead>
<tr>
<th>Description</th>
<th>Prop1</th>
<th>Prop2</th>
</tr>
</thead>
<tbody>
<?php echo $view['form']->widget($form['collectionOfB']) ?>
</tbody>
</table>
Views/Form/_objectA_collectionOfB_widget.html.php:
<?php foreach ($form as $child) : ?>
<?php echo $view['form']->widget($child) ?>
<?php endforeach; ?>
Views/Form/objectB_widget.html.php:
<tr>
<td><?php echo $view['form']->widget($form['description']) ?>
<?php echo $view['form']->errors($form['description']) ?></td>
<td><?php echo $view['form']->widget($form['prop1']) ?>
<?php echo $view['form']->errors($form['prop1']) ?></td>
<td><?php echo $view['form']->widget($form['prop2']) ?>
<?php echo $view['form']->errors($form['prop2']) ?></td>
</tr>
As I said, the form is rendered correctly, but this is the prototype:
<div>
<label class="required" >__name__label__</label>
<tr>
<!-- snip more code here -->
</tr>
</div>
You can see that this contains the label and a div, both of which I do not want as it will destroy the table.
It turns out that the answer is way simpler than I thought. Instead of rendering the entire row (and thereby rendering the form_row.html.php template containing a div) I need to render the widget only.
Basically all you need to do is replace
$view->escape($view['form']->row($form['collectionOfB']->vars['prototype']))
with
$view->escape($view['form']->widget($form['collectionOfB']->vars['prototype']))
On my site: www.metallica-gr.net you can see that the main table has 3 columns.
1st column(left): Vertical image
2nd column(middle): Main content
3d column(right): Vertical image
Problem is, because the right image is on the bottom of the code(since it's the tables last column) it waits for main conent to load before appearing. So before the site loads it looks messy, since only one border of the layout appears.
I can't use the divs for this since I have a lot html pages made already, and also when I tried it didn' went good. Is there any way to fix this? Here's the code:
index.html:
<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
<tr>
<td width="2" valign="top"><?php include "vertical.php"?></td>
<td valign="top" style="vertical-align:top;">
<div><?php include "main.html"?></div></td>
<td width="2" valign="top"><?php include "vertical.php"?></td>
</tr>
</table>
vertical.php:
<div style="background-image:url(images/vertical.jpg); width:2px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0;"></div>
While I would recommend exploring a more modern HTML structure (like the use of divs), I understand that sometimes a complete restructuring is not viable.
I believe the PHP output buffer may offer an interim solution.
<?php ob_start(); ?>
<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
<tr>
<td width="2" valign="top"><?php include "vertical.php" ?></td>
<td valign="top" style="vertical-align:top;">
<div><?php include "main.html" ?></div>
</td>
<td width="2" valign="top"><?php include "vertical.php" ?></td>
</tr>
</table>
<?php ob_end_flush(); ?>
What this will do is hold the page response until all the includes have been processed. You should also be aware that while this may cause less "shuffling" on the page it could also increase the perceived load time.
See the PHP Manual's documentation on ob_start for more information: http://www.php.net/manual/en/function.ob-start.php
While the above should take care of any issue caused by PHP includes it looks like you may have a few other likely culprits. The most likely being that you have tags loading from an "src". Script tags will delay all other loading while they're being loaded and processed which is why it is recommended that they be added asynchronously if possible. If they cannot be loaded asynchronously they should be included within the or directly above the closing tag.
For a little more information on your script issue see:
Does the <script> tag position in HTML affects performance of the webpage?
While sifting through the HTML I also spotted quite a few validation errors that should probably be resolved:
http://validator.w3.org/check?uri=http%3A%2F%2Fmetallica-gr.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Even a table based layout should validate as it makes browser rendering more predictable and bug hunting easier.
I think you should replace the table structure with div structure because that's the draw back of table structure that it'll load each TR / TD line by line while in DIV structure we make different divisions that's why browser will load different divisions simultaneously and that's why now a days designers are prefer DIV structure.
In your case it's starting to load from first TD and end with the last TD one by one so I think DIV structure is the solution for your problem.
I need some help. I am working on a backend of a website and I want to create functions where I can re-use the same code instead of duplicating it.
So I will have certain "sections" that contain information, such as:
getQuickInfo
function getQuickInfo() {
echo '
<div class="portlet">
<div class="portlet-header">
<h4>Quick Info</h4>
</div>
<div class="portlet-content">
<table cellspacing="0" class="info_table">
<tbody>
<tr>
<td class="value">'.getCount("total_users").'</td>
<td class="full">Total Users</td>
</tr>
<tr>
<td class="value">'.getCount("count_open_requests").'</td>
<td class="full">Open Support Requests</td>
</tr>
</tbody>
</table>
</div>
</div>
';
}
Now I know I am approaching this the wrong way, that's why I am posting this question. But that is just an example of a Quck Info section I would like to re-use on other pages, so I can sitck it wherever I want and just do getQuickInfo()
For this example, that function works fine. I would like suggestions on a better way to do it, and also for some other sections it won't be that easy it will have some Mysql queries and grabbing information from a database, which I can't store that within an echo.
How does everyone else accomplish stuff like this?
My main goal is to be able to output sections wherever I would like:
getQuickInfo()
getAdminNotes()
getSupportRequests()
etc.
Thanks!
Much as I am loathed to mix raw HTML with PHP code in templates, I know others disagree with me and this is one place where it might be a valid use.
So you would create a file that looks like this:
quickinfo.php
<div class="portlet">
<div class="portlet-header">
<h4>Quick Info</h4>
</div>
<div class="portlet-content">
<table cellspacing="0" class="info_table">
<tbody>
<tr>
<td class="value"><?php echo getCount("total_users"); ?></td>
<td class="full">Total Users</td>
</tr>
<tr>
<td class="value"><?php echo getCount("count_open_requests"); ?></td>
<td class="full">Open Support Requests</td>
</tr>
</tbody>
</table>
</div>
</div>
...and in you main page, you can just do:
include('quickinfo.php');
You can easily adapt this to use the result of queries. You would simply perform the query in the main page, and assign the results to a named variable. Then in the template page you use the data in the named variable to generate the page. This means that you can use the same code to generate different results based on different queries - as long as the result are held in the same named variable.
If you're using php 5 you should considered using PHP's object orientation support.
http://php.net/manual/en/language.oop5.php
This way you can create a class which has methods that print out stuff and hold values and then instantiate this class and call it's methods as needed.
I'm no php guru, but maybe you should create separate .php files for each of those sections (something like quickinfo.php, adminnotes.php, etc) put your html layout inside, and maybe even the php functions you need (or you could put them in a separate file, this depends on whether the logic you need is too complex, if it's fairly simple you can put everything in the same file)
Then you would do something like include('quickinfo.php') wherever you want to use those sections.
I'm developing a site that's pretty lightweight on the interface and mostly database driven (equal amounts read and write). It's written in PHP and I've found the easiest way to make each page is:
Page:
<?php include("header-nav.php"); ?>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Data Point 1</td>
<td>Data Point 2</td>
</tr>
<tr>
<td>Data Point 3</td>
<td>Data Point 4</td>
</tr>
</table>
<?php include("footer.php"); ?>
header-nav.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
</head>
<?php include("db_connect.php"); ?>
<body>
<div id="wrapper">
<h1>Welcome</h1>
<ul id="nav">
<li>Home</li>
<li>Data</li>
</ul>
footer.php:
</div>
</body>
<?php mysql_close($dbc); ?>
</html>
All of these pages by themselves are not valid and may produce errors. Working together to create a whole page, they look great.
My question is: Would this be an efficient and easy to maintain solution?
It seems that just adding a couple includes (one at the top and one at the bottom) makes sense. Especially because the site is so lightweight that I don't need a web framework. It just feels uncomfortable to create pages without starting with <html><head>...etc.
This is definitely an okay thing. I would highly recommend it. This way if you need to change the header or anything you can do so in once place easily. And the read time for hitting the file system for the include really isn't that big of a concern. So I would say that this is definitely acceptable.
"All of these pages by themselves are not valid" - I'm not sure what you mean by this. You mean a HTML Validator wouldn't pass them? Well of course not - they are fragments of pages. What matters is what the validator says when ran against the HTML the executed PHP generates.
This is one approach, and depending on the size of the problem you're tackling it's a valid one.
Yes, IMO this is a perfectly good way to do things, especially for a small site. Done it myself many times.
Get over your discomfort. Most IDEs (Dreamweaver comes to mind) actually support this way of developing sites, and will display content correctly and honor the includes if you prefer a WYSIWYG.
I develop sites using includes, like so:
site-header.inc:
require_once 'html-header.inc';
<div id="header">
/* menus, navigation, etc. */
</div>
<div class="content">
site-footer.inc:
</div>
<div id="header">
/* menus, navigation, etc. */
</div>
require_once 'html-footer.inc';
Where "html-header.inc" and "html-footer.inc" are your HTML header and footer tags and elements (title, meta, etc.). I then have functions to allow me to add CSS, JavaScript, titles, anywhere on the page, and use ob_start() and ob_end_flush() to handle these in the footer, actually. e.g.
stylesheet_register($path, $media="screen", $type="text/css");
javascript_register($path, $type="text/javascript");
title_set($title, $overwrite=true);
It your basic concept of abstraction: Don't write the same "header" and "footer" HTML code twice. Same applies to any PHP functionality which can be easily abstracted away and decoupled. Best of luck.