Archive for the ‘ DEVELOPMENT ’ Category

Generate function completion / autocompleter for Aptana Studio 3 PHP Projects

If you develop large Projects, it is really helpful to get all the available functions over an autocompleter, because you didn’t have to look each function-name and his parameters.
The realization theese function with Aptana Studio 3 is very easy.

 
At first, navigate into ‚Window‘ > ‚Preferences‘ > ‚Aptana‘ > ‚Editors‘ > ‚PHP-Libraries‘.
Here you can create a new user library by pressing the ‚New user library‘ Button.


 
Here enter a name for your library and select the folder where the files are located. In my case i want to create an Function-Autocompleter for the same project (Project: filescope – enterprise resource planning), where in i work. So i select my project-directory.


 
After that, uncheck the checkbox from the new entry and close the preferences.


 
Now you have to add the new library to the Buildpath of your PHP-Project. Take a right click on your Project within the ‘Project Explorer’ and select the Tree-Entry named ‘PHP Buildpath’. If you didn’t have a Tree-Entry named ‘PHP Buildpath’, maybe your project isn’t a PHP-Project. In our case, select the ‘Project Natures’ Entry.


 
Confirm the nature change and you become a PHP-Project.


 
After that you should find the ‘PHP Buildpath’ Entry in your Project preferences. Select these Entry and navigate to the Libraries-Tab. There select the ‘Use project specific settings’ Checkbox, then select your created Library and Apply it.

Finally close the properties window by pressing ok and that’s it. 🙂

 
For a quick test open a PHP-File from your Project, type a few initial-letters from any function and press ‚Strg’+’Space‘.. Now you should become a selection-menu where you will find all functions, that are matched to your input.

The Best Firefox Addons for Linux for Web Developers

Here you will find a delicious selection of Firefox Addons for Linux, which every Web Developer should have 😉

Firebug Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Download it here
FireQuery FireQuery is a collection of Firebug enhancements for jQuery. Requires Firebug 1.3 or greater.
Download it here
gTranslate With gTranslate you can translate any text in a webpage just by selecting and right-clicking over it. The extension uses the Google translation services to translate the text.
Download it here
Web Developer The Web Developer extension adds various web developer tools to a browser.
Download it here
Clear Cache Clear the cache by pressing a single key.
Download it here
TimeStamp Converter Converts dates and timestamps. Context menu option to convert the selected timestamp into a date. Context menu option to convert the selected date/time (allowed formats) into a timestamp. Human readable output of convesions. Support for GMT conversions.
Download it here
ColorZilla Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…
Download it here

How to use Namespaces and Sub-Namespaces with PHP 5.3

If you want to implement a huge project, it will be better when you encapsulate your modules and classes into several Namespaces and Sub-Namespaces.

But why should you use namespaces?
Namespaces are very useful, if you have some classes in your project, which have the same name as other global classes or classes from other project spaces. If you have two same named classes in the same space, you will have some problems. It is also very useful, to get your project into a modular and easy-extensible structure.

As Sample, we have a project with the following structure:

As Sample, we have a project with the following structure:

    MyProject

      – Module1
      – Module1
      – Module1

From these, we create a similar directory-structure, like:

/MyProject/.
/MyProject/..
/MyProject/MyProjectClass.class.php
/MyProject/MyProjectClass2.class.php
/MyProject/Module1/.
/MyProject/Module1/..
/MyProject/Module1/Module1Class.class.php
/MyProject/Module2/.
/MyProject/Module2/..
/MyProject/Module2/Module2Class.class.php
/MyProject/Module3/.
/MyProject/Module3/..
/MyProject/Module3/Module3Class.class.php

 
Now you can structure your classes as your Namespaces and find easily your classes.

To define a Namespace in a class-file, the file-contents (as sample for the MyProject.class.php) file must start with:

namespace MyProject;

class MyProjectClass {
	...

 
Attention: Namespace-Files must be started with the Namespace-Definition, otherwise you will get an Fatal error:

Namespace declaration statement has to be the very first statement in the script in

 
The Project-Modules, which are also included in the namespace MyProject, we will encapsulate in a sub-Namespace. Therefore you must define the Sub-Namespace in the Module-Files, like:

namespace MyProject\\Module1;

class Module1 {
	...

 
Now your are able to use the Namespaces in your API-File:

namespace MyProject;
error_reporting(E_ALL);
require_once '../MyProject/include.php';

try {
	
	$MyProjectClass = new MyProjectClass();
	...
	
	$Module1Class = new Module1\\Module1Class();
	...

} 
catch (Exception $e) {
	...

 
If we now consider the namespaces in more detail, there is a similar behavior to a file system.
What we have done?
We switched in the namespace (or as sample directory) MyProject, and could directly access our Classes from these Namespace (here as the directory-sample, the files in the directory). Would we now access a global Class (which were in our directory-sample a file in our root-directory), we just add a backslash before the global Identifer:

throw new \\Exception(...

 
If you want to handle a Class from a Sub-Namespace, you have to add the Namespace-Path (also similar to an Filesystem):

$Module1Class = new Module1\\Module1Class();

 
Notice: I’ve integrate the Namspaces into an existing project. The result were some Errors like:
Fatal error: Class ‚MyProject\\Exception‘ not found in..
Because the global Exception-class isn’t anymore found, which are very often used in my sourcecode. For a quick’n’dirty solution, you can do something like that:

namespace MyProject;
class Exception extends \\Execption {
}

 
Thanks of the Namespaces, it doesn’t make a Problem to named the Class also Exception 😉

Notice: The Code-Highlighting WordPress-Plugin i use seems to have a little Bug! In the Single-View of a Post a Backslash must be escaped, but in the List-View not. So, if you find a false double-‚\\‘, it is a problem with these Plugin 😉

Best practice for using the PHP 5.3 Ternary operator

The Ternary Operator is very useful for short expressions.
I use it as sample very often to check GET or POST Variables, and give them in empty-cases a default-value.

Instead of making an examination of variables in an if statement, which is a lot of typing…

if(empty($_POST['action'])) {
    $varToUse = 'varIsEmpty';
} 
else {
    $varToUse = $_GET['varToUse'];
}

 
You can do the same with a Ternary Operator, with a much less of typing:

$varToUse = (!empty($_GET['varToUse'])) ? $_GET['varToUse'] : "varIsEmpty";

 
Since PHP 5.3 it is possible, to do this even faster. Just leave out the middle part of the ternary operator, as sample:

$varIsEmpty = (empty($_GET['varToUse'])) ?: false;

 
So you can save a much of typing, to take a simple check 😉

Create a Typo3 Menu/Navigation and include it in a Fluid-Template

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post is the fifth part of Create a complete Typo3 website by using the Fluid Template Engine

After creating a few more sites, includes some CSS-Files and designing the main frame, we will create a main-menu for our site.

1. Navigate into ‚WEB‘->’List‘, select the root-site within the tree and create a new sub-template by clicking on the New-Icon on your main-template. (show image)
2. Enter a name and save the new sub-template. (show image)
3. Be sure that the new sub-template is listed under the main-template and edit the main-template. (show image)
4. Open the Inlcudes-tab and search in the Include Basis Template Area for your sub-template, then include it (show image) and save the changes. (show image)
5. Open the new sub-template for creating the menu-TypoScript. (show image)
The mainNavi TypoScript could look like (show image) :

lib.mainNavi = HMENU
lib.mainNavi.entryLevel=0
lib.mainNavi.1 = TMENU
lib.mainNavi.1 {
  wrap = <ul id="mainNavi">|</ul>
  expAll = 0
  NO.allWrap = <li class="mainNaviItem">|</li>
  RO < .NO
  RO = 1
  CUR < .NO
  CUR = 1
  CUR.allWrap = <li class="mainNaviItemActive">|</li>
  ACT < .CUR
}

 

6.
Now we just have to include the mainNavi TypoScript objectpath into our Fluid-Template. Therefore we navigate into ‚FILE‘->’Filelist‘ and edit the fileadmin/templates/layouts/main.html and add the f:cObject on the needed position (show image) :

  <f:cObject typoscriptObjectPath="lib.mainNavi" />

 
Our Fluid-Template now looks like:

<div id="header">
  <div id="header-top-border"></div>
  <div id="header-area"></div>
  <f:cObject typoscriptObjectPath="lib.mainNavi" />
  <div id="header-line-dark"></div>
  <div id="header-line"></div>
</div>
<div id="content"><f:render section="content" /></div>
<div id="footer">
  <div id="footer-line"></div>
  <div id="footer-text">
    <div id="footer-text-left"></div>
    <div id="footer-text-right"></div>
  </div>
  <div id="footer-bottom-border"></div>
</div>

 
Notice: Don’t forget to clear the Typo3-Cache after editing the Fluid-Template. 😉

Include CSS files by using page.includeCSS under TypoScript

TIPP: Um noch leichter mit CSS unter Verwendung von LESS TYPO3 Fluid-Templates erstellen zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

CSS-Dateien über TYPOScript einzubinden ist sehr einfach. Verwende dazu einfach das page.includeCSS. Hier ein kleines Beispiel:

page.includeCSS { 
  file1 = fileadmin/templates/css/style.css 
  file1.title = Default CSS
  file1.media = screen
  
  file2 = fileadmin/templates/css/print.css 
  file2.title = Print CSS
  file2.media = print
}

Configure the Fluid TypoScript and create Backend-Templates

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post is the fourth part of Create a complete Typo3 website by using the Fluid Template Engine Before we can actually see the first result on the screen , we have to configure the TypoScript template. We do this again step by step 😉 1. Navigate to the ‚WEB‘->’Page‘ module and click on the Typo3-Icon in the frame next to the modules list („tree area“) and create a new site. (show image) 2. Enter a name for the Root-Site of your website (show image) 3. Navigate on the Access-tab and remove the Disable-Checkbox and save the changes subsequently. (show image) 4. Navigate into the ‚WEB‘->’Template‘ module, and create a new Template by clicking on ‚Create template for a site‘ (show image) 5. After that, click on ‚Edit the whole template record‘ (show image) 6. Enter a name for the Template and write the first TypoScript code, that will define the page (show image):

# Create and configure our site
page = PAGE
page.typeNum = 0
page.meta.DESCRIPTION = My Site
page.meta.KEYWORDS = Internet, Homepage, Typo3

7. Navigate to the Includes-tab and include the ‚CSS Styled Content‘ in the Include-static Area and then save the complete template. (show image) 8. Now we proceed to create the Backend-Templates. The Backend-Templates define the backend view, so the editor(s) can only see the content areas that are present in each template. In our default case, a Backend-Template with three columns and an alternative template with only one content area. Navigate to ‚WEB‘->’List‘ and click above the main-frame on the New-Icon, then click on ‚Backend Layout‘. (show image) 9. Enter a name for the Backend-Template and click the Edit-icon in the config-area to start the Wizard. (show image) 10. In the Wizard-Popup we create for example the Three-Column Layout. To achieve this start by clicking on the right side twice on the Plus-Icon. (show image 1, image 2) 11. Then click on each Layout-Column on the Edit-Icon an give the columns a name and a column number. (show image) In our case the columns will have the following column-numbers: Left=1, Center= 0, Right= 2. (show image)The resulting config for the threeColumnTemplate would look like this:

backend_layout {
  colCount = 3
  rowCount = 1
  rows {
    1 {
      columns {
        1 {
          name = leftColumn
          colPos = 1
        }
        2 {
          name = mainColumn
          colPos = 0
        }
        3 {
          name = rightColumn
          colPos = 2
        }
      }
    }
  }
}

The resulting config for a fullSize Template would look like this:

backend_layout {
  colCount = 1
  rowCount = 1
  rows {
    1 {
      columns {
        1 {
          name = mainColumn
          colPos = 0
        }
      }
    }
  }
}

Notice: After creating the Backend-Templates, look for the respective Template-ID. You will find the ID at the right bottom corner, and it would look like ‚Backend Layout [2]‘. My threeColumTemplate has the ID 2, the fullSizeTemplate the ID 3. We will need the respective ID when producing the required TypoScript code. (show image) 11. Now we will write the required TypoScript code for our site. For this purpose we navigate back to ‚WEB‘->’Template‘, click on our root-site and then edit the Setup. (show image) First of all, we will assign the Typo3-Columns with the Fluid-Templates: (show image)

# Create a Fluid Template
page.10 = FLUIDTEMPLATE
page.10 {
  # Set the Template Pathes
  partialRootPath = fileadmin/templates/partials/
  layoutRootPath = fileadmin/templates/layouts/
  variables {
    # Assign the main column with our {content}-destination
    content < styles.content.get
    # Assign the left column with our {content_left}-destination
    content_left < styles.content.get
    content_left.select.where = colPos = 1
    # Assign the right column with our {content_right}-destination
    content_right < styles.content.get
    content_right.select.where = colPos = 2
  }
}

After that we assign the Backend-Template, so that we can select it later when creating pages (show image):

# Assign the Template files with the Fluid Backend-Template
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout

  # Set the default Template, our 3 column Template
  default = TEXT
  default.value = fileadmin/templates/threeColumn.html

  # Set also the first [2] Template, our 3 column Template
  2 = TEXT
  2.value = fileadmin/templates/threeColumn.html

  # Set a second [3] Template, our full size Template
  3 = TEXT
  3.value = fileadmin/templates/fullSize.html
}

12. At the end we want to create some pages to test the result of our configuration. We do this under ‚WEB‘->’Functions‘, as we will need several pages. Navigate to this module and click once again on the „New“-icon above the main frame. There we enter the name(s) of our new site(s) and click ‚Create pages‘. (show image) When the dialogue ‚You’re about to create many new pages. Are you sure you want to continue?‘ pops up, click ‚Yes‘. 13. After that we can modify our Root-Site to become a shortcut. Just click within the tree-area on the root-page icon and click edit. (show image) Select on the General-tab the Type ‚Shortcut‘ and the Shortcut Mode ‚First subpage of current page‘. (show image) 14. Now you only need to select the required Template for your pages and create page contents… and that’s about it. Edit for example the start-site and navigate to the Appearance-tab, there we select the threeColumnTemplate as Backend Layout (this page only) and Backend Layout (subpages of this page). (show image) A Backend-Page for our threeColumntemplate could now look like this: (show image) So now I’m going to create my Fluid HTML-Template in detail 🙂 I’ll be back soon and then we’ll see how to create some navigation menus and so on.. 😉 Read here the next step: Create a Typo3 Menu/Navigation and include it in a Fluid-Template

Create base HTML Fluid Templates for Typo3 4.5

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post is the third part of Creating a complete Typo3 website by using the Fluid Template Engine

Here we come to the next few steps for creating a base HTML Fluid Template, just do it point by point.
1. Navigate into the Typo3 Backend ‘FILE’->’Filelist’ Module and click on the ‘fileadmin’ tree node.
2. Click on New-Icon above the main-frame and create a folder named ‘templates’. Here you will store all your template files.
3. Navigate by using the file-tree into the new ‘templates’ directory, and create two directories named ‘layouts’ and ‘partials’. The ‘layouts’ directory is destined for the main templates, wherein the partial templates will be later included. The ‘partials’ directory will store the part templates, like the navigation, the subnavigation and so on.(show image)
4. Now, after we finish the creation of our directory structure, we create our first main-template file named ‘main.html’. Therefore we navigate into the ‘layouts’ directory and click again the New-Icon above the main frame, to create the file. (show image)
5. To edit our new template file, click on the file-icon on the left and click further on ‚Edit‘ (show image)
6. Within the editor your are now able to write the first template code. Just create a main-border-structure (show image), where are later your content templates are placed in:

<div id="header">header</div>
<div id="content"><f:render section="content" /></div>
<div id="footer">footer</div>

 

7. For our website we would create two seperate content templates. A first default content template that will have three columns, and a second template that will have the full size of the content. Therefore we create in the ‚templates‘ directory two files, a ‚threeColumn.html‘ for our default template and a ‚fullSize.html‘ as an alternative template. (show image)
Notice: If you have a fault by naming between the template files and the TypoScript, there are no references shown in the last column from the last sample image.

8. Now we will write the content templates. First, we edit the ‚threeColumn.html‘ template by click on his File-Icon. (show image)
The name of the f:layout must have the name of our in step 6 created template file, that means ‘main’. We could also create several content templates, that use different main-border-structures (as sample for style switches, or complete different website areas) that we assign to the f:layout name attribute.
The f:section defines that these templare is placed in the f:render section=”content” within the assigned main-border-structure template.

<f:layout name="main" />
<f:section name="content">
  <div id="content_left">
    <f:format.html>{content_left}</f:format.html>
  </div>
  <div id="content_main">
    <f:format.html>{content}</f:format.html>
  </div>
  <div id="content_right">
    <f:format.html>{content_right}</f:format.html>
  </div>
</f:section>

 

Our alternative content template could look like:

<f:layout name="main" />
<f:section name="content">
  <div id="content_main_full">
    <f:format.html>{content}</f:format.html>
  </div>
</f:section>

That’s it for now, from the HTML Fluid templates. 😉

Do you have understand every point?! If not, feel free to write me a comment 🙂

Read here the next step: Configure the Fluid TypoScript and create Backend-Templates

Import the ExtBase and the Fluid Template Engine into Typo3 4.5

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post are the second part of Create a complete Typo3 website by using the Fluid Template Engine

To be able to use Fluid within Typo3 4.5, we must install the Extension named ‚fluid‘. ‚fluid‘ itself is dependent on the Extension ‚extbase‘, so we must install the ‚extbase‘ Extension first.

In order for that we have to do the following steps within the Typo3 Backend:
1. Navigate to „ADMIN TOOLS‘ -> ‚Extension Manager‘ (show image)
2. Navigate in the topmost select box to ‚Import Extensions‘
3. Search about ‚extbase‘ (show image)
4. Install the ‚extbase‘ by clicking on the brick stone (show image)
5. In the next step, click ‚make all updates‘

So, if you become the message ‚The extension „extbase“ has been installed.‘ we can continue with the fluid extension:
7. Navigate once again in the topmost select box to ‚Import Extensions‘
8. Search about ‚fluid‘ (show image)
9. Install the ‚fluid‘ by clicking on the brick stone (show image)

That’s it. If you become again the message ‚The extension „fluid“ has been installed.‘ you have successfully integrate the Fluid Template Engine. 😉

Read here the next step: Create fluid base templates

Create a complete Typo3 website by using the Fluid Template Engine

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Heute möchte ich einmal die neue Template-Engine Fluid ausprobieren, welche die Standard Template-Engine im Typo3 5 werden soll.

Aber warum Fluid? In der fünften Version von Typo3 wird noch mehr Trennung zwischen Logik und Darstellung angestrebt, dafür haben die Typo3-Entwickler das System von Grund auf überarbeitet.
So wird bspw. ein Model-View-Controller-System integriert das viel mehr leisten kann, als das relativ statisches System, wie das der herkömmliche Sub-Templates und Marker.

Da ich eh gerade eine komplett neue Typo3 Website zu entwickeln habe, wollten wir alle zu erledigende Punkte von Anfang an durchführen. 😉
Als erstes teilen wir dieses Projekt in ein paar Teilprojekte:

 
Wir beginnen mit dem Download des aktuellen Typo3 Quellcodes von der Seite http://typo3.org/download/, entpacken den Quellcode dann und laden Ihn auf den Ziel-Server.

Wenn der Upload abgeschlossen ist, erstellen wir eine Datei namens ‘ENABLE_INSTALL_TOOL’ und kopieren diese ebenfalls auf den Webspace in das Verzeichnis ‘typo3conf’.

Danach navigiere mit einem Browser zu Typo3-Installtool:

http://your-domain.com/typo3/install/index.php

 
Die erste Nachricht die ich erhalte ist:

Error
TYPO3 Fatal Error: /var/www/virtual/***/dev/htdocs/typo3conf/localconf.php is not writable!

 
Ok…Ich gebe dieser Datei ein wenig mehr Rechte und probiere es noch einmal 😉

Des weiteren passe ich folgend noch die Rechte der Verzeichnisse ‚typo3conf‘ und ‚typo3temp‘ an.
Jetzt sollte das Installtool angezeigt werden und wir können die folgenden Schritte durchführen:

 
1. Gebe die Datenbank-Zugangsdaten ein

 
2. Erstelle oder wähle eine Datenbank aus

 
3. Wenn das ‚fileadmin‘ und das ‚uploads‘ Verzeichnis noch nicht die erforderlichen Zugriffsrechte hat, setze diese

 
4. Wähle das leere Paket, weil wir diese Standard-Konfiguration nicht brauchen

 

Das war’s, schon haben wir unsere Typo3-Installation abgeschlossen

 

Zu Einloggen in das Typo3 Backend navigiere einfach zur folgenden Seite:

http://your-domain.com/typo3/


 
Dort kann man sich dann mit dem Standard-Login anmelden, der wie folgt lautet:
Name: admin
Password: password

Jetzt wo du eingeloggt bist sollte die erste Aktion die Änderung des Passworts sein. Danach vergesse aber auch nicht, das Passwort des Installtools zu verändern 😉

Lese hier wie es weiter geht: ExtBase Extension und die Fluid Template Engine in Typo3 4.5 integrieren