Web Design: the next level.

kgun · #1 (**permalink**) 03-28-2008, 04:13 PM

While I was unavailable to access the forum, I have learned the new leve of tagging. Tag elements are created using PHP classes. You need to have PHP 5.* installed on your web server.

Example:

Code:

<html>
<head>
<title>Generating X(HT)ML elements with PHP classes</title>
</head>
<body>
<?php
require 'HTMLParagraph.class.php';
require 'HTMLDiv.class.php';
require 'HTMLH1.class.php';
require 'HTML.class.php';
echo HTML::p('This is a static method!'); 
echo HTML::div(HTML::h1('Welcome to my web site!'), array('id' => 'header')); 
?>
</body>
</html>

It produces this (if you can not see the page, I am working on it) page: Generating X(HT)ML elements with PHP classes

with this source:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Generating X(HT)ML elements with PHP classes</title>  
</head>
<body>
<p>This is a static method!</p>
<div id="header"><h1>Welcome to my web site!</h1></div> 
</body>
</html>

Code for: HTML.class.php

Code:

<?php
require_once 'HTMLParagraph.class.php';
require_once 'HTMLH1.class.php';
require_once 'HTMLDiv.class.php';class HTML
{
  public static function p($content, $attributes = array()) {
     return new HTMLParagraph($content, $attributes);
  } 
   public static function h1($content, $attributes = array()) {
     return new HTMLH1($content, $attributes);
  }
  public static function div($content, $attributes = array()) {
     return new HTMLDiv($content, $attributes);
  }  
}
?>

Code for: HTMLDiv.class.php

Code:

<?php
require_once 'HTMLElement.class.php';class HTMLDiv extends HTMLElement
{
  protected $tagname = 'div';
  public function __construct($content, $attributes = array())
  {
    parent::__construct($content, $attributes);
  }
}?>

with code for HTMLElement.class.php:

Code:

<?php
class HTMLElement
{
  protected $content;
  protected $tagname;
  protected $attributes;
 
  public function __construct($content, $attributes = array())
  {
    $this->content = $content;
    $this->attributes = $attributes;
  }
 
  public function getSource()
  {
    return '<' . $this->tagname . $this->getAttributeSource() . '>' .
        $this->content . 
        '</' . $this->tagname . '>';
  }
 
  public function getAttributeSource()
  {
    $attributes = '';  
    if (count($this->attributes)) {
      foreach ($this->attributes as $attrnme => $attrval)
      {
        $attributes .= ' ' . $attrnme . '="' . $attrval . '"';
      }
    }
    return $attributes;
  }
 
  public function __toString()
  {
    return $this->getSource();
  }
}?>

So what is the clue? Don't you see the advantages?

This is on a more general level than a CMS. See point 4 and 6 below.
Coding is reduced to writing text once the API is in place.
Less errors.
Tag content and attributes can be pulled from a database.
You can make a class for each static (X)HTML element.
The API can of course be used to make dynamic XML elements.

Remember:
Imagination is more important than knowledge.

Exercise:
Write the class for HTMLParagrap and HTMLH1 and you get it.

Combine this with AJAX and JavaScript ...

Combine this with Microformats SEO and the Sumo parser.

and

SEO:: Science, art or metaphysics?

"bad markup should be reduced to bad programming". At least badly nested and unclosed tags should no longer be a problem once the API is made. X(HT)ML elements are produced automatically like:

Code:

echo HTML::div(HTML::h1('Welcome to my web site!'), array('id' => 'header'));

where the text in read is variable and can be pulled from external sources like another website (RssFeed) or a database.

Inspiration:
The PHP Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition - SitePoint Books

mikesmith76 · #2 (**permalink**) 03-30-2008, 09:51 AM

kgun have you ever had a look at the Zend Framework for PHP?

Zend Framework

The View (Template) layer of the framework has a lot of view helpers for building common html. Great for reusing common bits of html.

In fact I would recommend you have a read through the framework documentation, it is quickly becoming a great toolkit for developers. Best of all you're free to use as many or as few of the classes as you need to use, nothing is forced on you.

chandrika · #3 (**permalink**) 03-30-2008, 11:07 AM

Does installing PHP 5 on server cause any problems with older versions of PHP, or is it all backwards compatible?

kgun · #4 (**permalink**) 03-30-2008, 11:18 AM

Quote:

Originally Posted by mikesmith76

kgun have you ever had a look at the Zend Framework for PHP?

Yes, I know that framework (see the last link in my signature), but not in detail. If you look at the classes in my thread, it is very general. Think of this:

Testing and validating your input before it is put on the web. You have to write the API, classes doing it.
Related to the above. Standardization across your site. Standardization on security, usability, acessibilty, design (XSL(T) / CSS) , browser (JS) and server side scripting.
Writing more robust markup and design via tested code, in case there are problems on the web server.
Minimalism: Hint web-site wide includes.

Example: Look at the footer of these two sites:

- DigitalStart.net: The starting point for English speaking surfers and webmasters

- Skupot.com: Skupot is Kjell Bleivik's artist name

Both sites are add on domains on KjellBleivik.com, see first link in my signature. But they share the same includefiles that is in the root folder of KjellBleivik.com And the last year, 2008 is automatically updated (elementary PHP) via PHP:
Code:
```
<?php echo date('Y'); ?>
```
A Class API is a more general way of reusing code. The most general is Design Patterns (see the last link in my signature).
The idea is to write your site, with no copy of code, design and markup - it is constant - so you can update your site with new content everywhere in the world without Ftp access to the internet. You can even update your site from an internet cafe.

This

Build*Your*Own Database*Driven*Website Using*PHP*&*MySQL - SitePoint Books

sitepoint book in addition to those mentioned in this thread:

The desktop is on the Web.

have all you need.

If you want an XML driven system this

No*Nonsense XML*Web*Development With*PHP - SitePoint Books

is a good start.

That was very general so as a conclusion, I will foccus on

The PHP Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition - SitePoint Books Chapter 1 and 2.

The*Art*& Science*of JavaScript - SitePoint Books Chapter 5.

Conclusion:

Only content is variable, as long as you stay with your markup, design and bahaviour (don't need to change that while on holiday or helping a customer in another physical location). You can update your site all over the world. With MS SkyDrive, you can even upload your most important files to the internet with faster access for a customer than on a Cd.

Example (No Permalink):

OOP in PHP 5

Click Start.
DigitalStart in the upper right corner.
You find SkyDrive as a link at the top.

Soon time to start with the next

level C++Builder product page ?

kgun · #5 (**permalink**) 03-30-2008, 11:28 AM

Quote:

Originally Posted by chandrika

Does installing PHP 5 on server cause any problems with older versions of PHP, or is it all backwards compatible?

You may have problems. There are some new reserved words in PHP 5.*

like this. P.H.P. below 5 was not OO, so the this variable was not needed.

and the devil may be in the detalis:

Question

For the latest on PHP, see the last link in my signature, especially in the upper right corner along the right menu.

PHP 6.0 is said, by some people at SitePoint, to be just around the corner.

Test your configuration etc. with configtest.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Configuration testing</title>
</head>
<body>
<?php
echo ( '<pre>' );
echo 'PHP info = ' . phpinfo() ;
echo ( '</pre>' );
echo ( '<pre>' );
echo 'DOCUMENT_ROOT = ' . $_SERVER['DOCUMENT_ROOT'] ;
echo ( '</pre>' );
echo ( '<pre>' );
echo 'Include_path = ' .  ini_get('include_path') . "\n";
echo ( '</pre>' );
echo ( '<pre>' );
echo 'Magic_quotes = ' .  ini_get('magic_quotes_gpc') . "\n";
echo ( '</pre>' );
echo ( '<pre>' );
echo 'Short_open_tag = ' .  ini_get('short_open_tag') . "\n";
echo ( '</pre>' );
echo ( '<pre>' );
echo 'register_globals = ' .  ini_get('register_globals') . "\n";
echo ( '</pre>' );
echo ( '<pre>' );
echo 'post_max_size = ' . ini_get('post_max_size') . "\n";
echo ( '</pre>' );
echo ( '<pre>' );
echo 'display_errors = ' . ini_get('display_errors') . "\n";
echo ( '</pre>' );
echo ( '<pre>' );
echo 'post_max_size+1 = ' . (ini_get('post_max_size')+1) . "\n"; 
echo ( '</pre>' );
require_once ('config.php');
echo ( '<pre>' );
echo 'Include_path = ' .  ini_get('include_path') . "\n";
echo ( '</pre>' );
echo ( '<pre>' );
echo 'Magic_quotes_runtime = ' .  ini_get('magic_quotes_runtime') . "\n";
echo ( '</pre>' );  
//$inis = ini_get_all();
//print_r($inis);
?>
</body>
</html>

Like this (no perma link):

Configuration testing

PHP 5.2.5 is the last stable version and you see that my hoster have 5.2.4 installed.

chandrika · #6 (**permalink**) 03-30-2008, 12:29 PM

Thanks Kgun

kgun · #7 (**permalink**) 03-30-2008, 12:56 PM

Side note:

Did you note this:

Code:

echo HTML::div(HTML::h1('Welcome to my web site!'), array('id' => 'header'));

The code in red indicates how you add an attribute to an element. So. say you sit on an internet cafe in London and want to uppdate your site with a link with the following attribute:

Visit my <a href="http://www.example.com/" rel="nofollow">discount pharmaceuticals</a> site.

No problem, the code is there already, so you only update the content, that is the element content and the attributes you want attached to an element. It is assumed that you have written the class for the element like I indicated in the firs post. You may even write a class that say, this content is not wll-formed and / or valid. So if you make a good API, it is safer, robust, minimalistic and efficient. You change site-wide styling in one (or more) central styling file(s). You change behaviour in one (or more) central JavaScript file(s). You put conent into a database or a two-dimensional array that simulates a table in a database

Code:

<?php
// Some sample data representing a database query
$MainMenu = array (
    array (
     'tagname'=>'Start',
     'link'=>'http://www.digitalpunkt.no',
         ),
    array (
     'tagname'=>'Tools',
     'link'=>'http://www.cyscape.com',
         )
);
$SubMenu = array (
    array (
     'tagname'=>'DigitalStart',
     'link'=>'http://www.digitalstart.net',
  'tagname'=>'OopSchool',
     'link'=>'http://www.oopschool.com',
  'tagname'=>'Web2Logistics',
     'link'=>'http://www.www.web2logistics.com',
  'tagname'=>'RedcarpetRank',
     'link'=>'http://www.redcarpetrank.com',
  'tagname'=>'MultiFinanceIT',
     'link'=>'http://www.multifinanceit.com',
  'tagname'=>'Ad-University',
     'link'=>'http://www.ad-university.com'
         ),
     array (
     'tagname'=>'CSS Creator',
     'link'=>'http://csscreator.com',
  'tagname'=>'ReviewToolbar',
     'link'=>'http://www.reviewtoolbar.com/',
     'tagname'=>'GoGui',
     'link'=>'http://gogui.com',
  'tagname'=>'GeckoTribe',
     'link'=>'http://www.geckotribe.com',
  'tagname'=>'Favorez',
     'link'=>'http://www.favorez.com/',
  'tagname'=>'HawHaw',
     'link'=>'http://www.hawhaw.de'
        )
);
?>

and pull that out throug a script. You have different password protected access levels where you can edit, delete and add content. It is more flexible than a CMS system. Your API can be extend by class inheritance.

Some tags like image tags are handled different from other tags. They are closed differently. Read more how that is done in chapter 1 of

The PHP Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition - SitePoint Books

where also one of the exercises I mentioned in my first post is solved for you if you did not get the general method.

Finally, don't forget

The danger with copy and paste

I have surfed the web since the beginning and the more I surf, the more I adhere to Opera's overall security principle: "Don't trust any site on the Internet."

I will add especially downloads until it have proved otherwise or you fully understand the code you past into your site.

Even serious providers have stopped providing JavaScript content to my site without warning. What does that imply for the semantics of your eProperty?

I have indicated with red that only content is written in from the computer on the internet cafe. You can make it more flexible by writing in content like this:

'tagname'=>'Start'
'link'=>'http://www.digitalpunkt.no'

speed · #8 (**permalink**) 03-30-2008, 02:08 PM

My question is simple, why would you want to do this?

I really don't see what this is giving you, it's taking the design away from the designers and making programmers write HTML as functions. This can only add overhead/bloat.

If you want to separate design from function then use a proper template engine. If done right the designers can create the page just as they would any web page, with the exception of marking where they want certain things to show e.g. current user name.

kgun · #9 (**permalink**) 03-30-2008, 02:18 PM

Quote:

Originally Posted by speed

My question is simple, why would you want to do this?

And so is my answer. How large do you think your content document will be once the API, is in place to be included centrally in php.ini / .htaccess or like this:

PHP Code:


			
<?php include $_SERVER['DOCUMENT_ROOT']  .  '/include/myAPI.class.php' ;

How difficult is it to change that API site wide? Did you look at the source of my examples regarding my main domain and the add on domains above? You can of course not see the PHP code, but you may guess some of the functionality.

You can also see the content of robots.txt but not of .htaccess. The semantic content and code / markup that the Bots see is stripped to a minimum. SEO effect? Saving bandwidth? Saving storage? In essense, your site content, aside from the API is reduced to a long content string (at least for text content).

Finally:
Why should you need to validate your markup? Can that not be done on the highest level with:

Throw, try and catch exeption handling?

If your API si well written, you should not even need to validate. You get a message like this:

Fatal error, this input is not allowed.
Error this input is not reccomended.
Warning this input is well-formed, but not valid.

Using AJAX functionality, you may not even need to reload the page. You can only change the input line where the error is.

speed · #10 (**permalink**) 03-30-2008, 03:35 PM

Quote:

Originally Posted by kgun

And so is my answer. How large do you think your content document will be once the API, is in place to be included centrally in php.ini / .htaccess or like this:

I bet bigger than just standard HTML templates and an awful lot more hassle to maintain than the same system using a template engine and/or something like Zend Framework, or CodeIgniter, or one of the other frameworks.

Lets put it another way why do you need an API for creating an HTML page from PHP functions at such a low level? If you provided higher level functions, lets call them widgets, then I could see the point in it as a few lines of PHP would generate all the HTML and JavaScript to provide a complex widget such as a calender along with the functionality to control it with a few simple calls.

I still don't see what "echo HTML:

('This is a static method!');" does for you. At that level you can't ask designers to build your templates you have to rather use coders.

If you look at a template engine then you have a normal HTML page with mark-up along the lines of:

Code:

... The page head HTML ...
<div id="mainarea">{body}</div>
... The page footer HTML ...

The PHP would be something like:

PHP Code:


			
$tpl = new template_engine('my.html');

$tpl->assign('body', 'some html');

$tpl->render();

Ok, it's overly simplified there, but the HTML can be changed on a whim and "some html" could easily be pulled from a database. You can also easily create "some html" using a WYSIWYG editor, unlike your system which would require the person editing the content hack away in PHP.

In both systems style is obviously controlled by CSS so doesn't come into the equation.

kgun · #11 (**permalink**) 03-30-2008, 05:07 PM

Ok, I have read your answer:

From bad experience I do not like to rely on third party code.
There is more than one way to prepare a meal.
The final taste may be different, but that discussion can go on for ever.

speed · #12 (**permalink**) 03-30-2008, 05:21 PM

Quote:

Originally Posted by kgun

Ok, I have read your answer:

From bad experience I do not like to rely on third party
code.

Same here, which is why I have my own framework/template engine, but there are some things are worth buying in such as WYSIWYG editors.

Quote:

There is more than one way to prepare a meal.

Yes, but I think you need to be careful with OO to not over abstract the design.

kgun · #13 (**permalink**) 03-31-2008, 08:31 AM

This was a shocking experience:

Today march 31 2008 14.00 Norwegian Time I Googled:

web test server kgun site:www.webproworld.com

Free hit number 2 here was this thread, so GoogleBot has discovered it. I did not find the thread I was looking for even if I refined the search to:

make your own test server kgun site:www.webproworld.com

and this thread was still number 2 on the SERP's. The third exact search did it:

"make your own" kgun" site:www.webproworld.com

And I found this thread:

Make your own "test webserver" in 5 minutes.

Do I really need to write SQL?

Page Search that on the home page of the last link in my signature. That is about

Persistence Layers:

For Short Database Interaction Without SQL.

Do I really need to write (X)HT(ML)? It is so easy to write bad markup. Why should there not be an API that test your input so you can update you site all over the world where you have access to the internet, but not FTP access to the internet.

I don't speak about GoToMyPc or related tools where your home computer need to be turned on. What about security? What about the computer collapsing or over heating.

Conclusion:

If you can answer yes to this, I hate SQL and Markup (design), Persistence Layers and a flexible extendable Coding API is definitely for you.

P. S.
Do you know Matt Zandstra's book: "PHP 5 Objects, Patterns and Practice" from Apress?

Here is a cite I personally like from that book:

"The problem is that PHP is just too easy. It tempts you to try out your ideas, and flatters you with good results. You write much of your code straight into your Web pages, because PHP is designed to support that. You add the heavier code to functions in library files, and before you know it you have a working Web application. You are well on your way to ruin. You don't realize this, of course, because your site looks fantastic. It performs well, your clients are happy, and your users are spending money."

Any comment?

speed · #14 (**permalink**) 03-31-2008, 08:50 AM

Quote:

Originally Posted by kgun

Do I really need to write (X)HT(ML)? It is so easy to write bad markup. Why should there not be an API that test your input so you can update you site all over the world where you have access to the internet, but not FTP access to the internet.

How are you going to upload your PHP files if you don't have FTP?

If you enter HTML then you can just capture the input and store it in the database. You can also push the data through tidy if you want.

You could of course accept the PHP from the user via a textarea, store it in the databse, then use eval. However get the access control wrong and anyone can trivially execute PHP on your server.

Just a thought for you, if you create an application and people create templates for it then if the templates are only HTML it is safe for any user to download any template from any source to use with your application. However if templates are PHP based then any template you download may introduce additional code and therefore security holes and so forth.

Quote:

Do you know Matt Zandstra's book: "PHP 5 Objects, Patterns and Practice" from Apress?

Here is a cite I personally like from that book:

"The problem is that PHP is just too easy. It tempts you to try out your ideas, and flatters you with good results. You write much of your code straight into your Web pages, because PHP is designed to support that. You add the heavier code to functions in library files, and before you know it you have a working Web application. You are well on your way to ruin. You don't realize this, of course, because your site looks fantastic. It performs well, your clien