Moderne Webentwicklung lebt von modernen Programmiersprachen, modernen Methoden und vor allem von Frameworks, die dem Programmierer viel Arbeit abnehmen.

Gerade im Webbereich haben mit der Weiterentwicklung Web 2.0 zahlreiche Frameworks Vorschub bekommen. Webentwicklung findet nicht mehr nur für große Webseiten statt, sondern auch für Applikationen für mobile Endgeräte (wie iPhone, HTC, usw.).

Durch Frameworks werden dem Entwickler Funktionen an die Hand gegeben, die die Entwicklung selbst leichter machen sollen, aber vor allem auch Designelemente standardisieren und Anwendungen auf vielen Endgeräten robuster machen. Jeder Webentwickler kennt die Probleme eine Webseite für die verschiedensten Browser zu optimieren.

An der TU Darmstadt, Fachbereich Informatik findet am Samstag, 04.12.2010 eine Vortragsreihe statt, die drei interessante und moderne Entwicklungsmethoden mit Frameworks vorstellt:

• Ruby On Rails in a metro session (Jesus Villar)
• CodeIgniter – Einführung in ein lightweight PHP-Framework (Ulf Karrock)
• HTML5 und Javascript – mehr als eine “simple” Scriptsprache (Thomas Pöpl)

Die drei Vorträge finden im Fachbereichsgebäude der Informatik an der TU Darmstadt (Hochschulstraße 10, 64289 Darmstadt) statt.

Beginn: Samstag 04.12.2010, 10 Uhr
Ende: ca. 13 Uhr
Raum: S2 02 | C110

Wer interessiert ist an einer Einführung in moderne Webentwicklung sollte hier einen Blick riskieren.

Gefunden bei Clients from hell.

Wer kennt nicht inzwischen den Verlag Galileo Computing, der durch seine kostenlosen online abrufbaren Bücher Openbook (wie die “Java Insel”, wohl eines der besten Java Bücher überhaupt), aber auch durch seine anderen guten Fachbücher bekannt wurde?

Noch bekannter dagegen ist der O’Reilly-Verlag, welcher sich den IT-Fachbüchern verschrieben hat. Die sehr guten und praktischen Fachbücher vom “Cookbook”, der Referenz bis hin zur “kurz&gut”-Kurzreferenz für die Westentasche sind die Bücher alle durchweg für die praktische Anwendung geeignet.

Wie golem.de heute meldet, bietet der Webdienst PaperC, bei dem man knapp 2.700 Bücher online kostenlos von der ersten bis zur letzten Seite einsehen kann, nun auch 600 neue IT-Bücher aus dem Hause O’Reilly an.

Ich habe den Dienst selbst noch nicht benutzt, aber aus den Kommentaren bei golem.de lässt sich entnehmen, dass die Qualität zum lockeren Lesen am PC wohl nicht geeignet sei. Aber zum Recherchieren z. Bsp. für Hausarbeiten oder zum schnellen Nachschlagen dürfte es genügen. Ein guter Tipp! Ich könnte mir gut vorstellen, dass der Dienst sich auch dazu eignet in Bücher reinzuschauen und sich dadurch eine Kaufentscheidung zu erleichtern. Der Dienst PaperC ist übrigens deutsch und hat damit auch deutsche Bücher im Angebot!

CodeIgniter Logo

In the Web 2.0 it is familiar to create new services. In Germany the Web 2.0 is also called “Mitmach-Web” (join-in-web). And there is a other transformation in the scene: With Javascript (and that what is called Ajax – I call it in german always “Webwaschmittel”) more and more static websites becomes dynamically web applications – to use like normal desktop applications. But to have an interactive website, which behaves similar to a desktop application (giving response in no time, show informations and take the user into its own hand). The one thing webdesigners and web-developers do to make a website interactive and behaves like an application is to use Javascript. Javascript is the mean of choice but there exists several Javascript-Frameworks which helps the user to write clean and short Javascript-Code with a great functionality.

On the backend-side (server-side) the programmers have done also many development and engineering in the last years. Several Frameworks have been established (Symfony, CodeIgniter, Ruby on Rails, Zend, Flow3 and so on – more about frameworks in the iX special “Web on Rails“). I am using CodeIgniter because it is a really leightweight and nice to use framework with many functionality, but the latitude to program and design your application as you will (means: with very few restrictions and a very small footprint).

In this little HowTo I want to show you how to build a little CodeIgniter REST-like API (only an example with one controller) and use it via Javascript (ajax with jQuery). The REST-API (Representational State Transfer – Advanced Programming Interface) is an idea, a way how to provide information and data as an service to the web, using the HTTP-protocol given mechanisms (like POST-data, GET-data, …). I write knowingly “REST-like”, because it is no easy work to create a full and dynamically usable REST-API. The MVC-Pattern-Design from CodeIgniter helps you to build Controller which can behave REST-like. But still programming a controller and let them return a header and some data is not the whole idea of a REST-full API.
To learn what a REST-API is or how it works: have a look at “A RESTful Web service, an example” by Paul James. There are also a german PDF “REST Web Services – eine Einführung” available from OIO (Orientation In Objects – a german software development company).
I also used two other tutorials from the web to inform myself about form validation with Ajax. You can find them at the end of the article among “Sources”.

Now I want to show you in an easy way how to build one little web service which validates something for you and send a response. A Javascript snippet send a call to the CodeIgniter Controller, the Controller do something and send an response. The answer will be shown up on the front end without relaoding the whole website. So it is good for a site with a PHP-Backend (via the REST-API) because it can be used from others later (maybe from outside or from company-internal services).

This code splitting: using Javascript for the request and do the validation in PHP and sending an response makes your application more secure, because if you writes your validation all in Javascript inside the HTML-code, a attacker can use this information. And you need in all cases (also when you wants to validates all with Javascript inside the HTML-code and also with the scenario explained in this article) a PHP-function to validate the data you gets from outside before it will be inserted maybe in a database. Because a attacker can build a own website, using your site and deletes the Javascript code and then sending some shit to your application.

It is some of the most important security-rules when you have an application with data coming from outside your application to test them in all cases. The application has to verify that the data are as expected and that the length is like expected. Just to think all users are nice and it is enough to tell them “this string has to be maximal 128 characters long” and not to verify is a naive way.

But now coming to the things you need to build a Ajax form validation with jQuery and a REST-like API built with CodeIgniter.

What do you need?

You need a CodeIgniter installation. You need a Controller (which represent the REST-like API), a HTML-Website, jQuery and a little Javascript snippet. For testing I used a simple HTML-Website (no site provided by CI – so in this example I just use CI for the validation-response).

• Your Controller must have the name: service.php and must have (in this example) a function exists()
• The service has be available in: system/application/controller/
• The simple HTML-File for test this web-service has to be stored in the same directory as the CI index.php.
• The HTML-File itself. I named it: template.php (it has an php-suffix, but it is still a HTML-site).

Let´s start with the HTML-File and some Javascript.

The HTML-File and Javascript-Code

jQuery Logo

First of all create an HTML-File. I using one created with YAML. In the header of the HTML-File you have to link to jQuery (local stored or from the web), to use their functions.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>

Then you put these Javascript Snippet in the head.

$(document).ready(function () {
 var validateUsername = $('#validateUsername');
 $('#username').keyup(function () {
    var t = this;
    if (this.value != this.lastValue) {
      if (this.timer) clearTimeout(this.timer);
         validateUsername.removeClass('error').html('<img src="images/ajax-loader.gif" height="16"
         width="16" /> checking availability...');
         this.timer = setTimeout(function () {
            $.ajax({
               url: 'index.php/api/service/exists/',
               data: 'username=' + t.value,
               dataType: 'json',
               type: 'post',
               success: function (j) {
                  validateUsername.html(j.msg);
               }
             });
          }, 200);
         this.lastValue = this.value;
      }
   });
});

What this all stands for and the parts of the code are explained in the source jQuery for designers “Using Ajax to validate forms” below. You see at line 7 a little grafic is loaded. You have to put this image in your images-directory. A Ajax-Load-Image (also called ajax spinner) in your style can be downloaded at ajaxload.info. This grafic indicates activity when load data via Ajax.

In the middle of the code you see the $.ajax({})-part. This are the data which will be send to your CodeIgniter REST-like API to validate them. The url is the uri-segment of your CodeIgniter-URL. This is, why the template.php file has to be stored where the CI index.php is. This will later be unnecessary when you load your website via CI, but is necessary in this example because we work with this simple template.php-File instead of using the CI framework for providing the test-site.
The part exists is the function inside your CI-Controller “service“. As you can see we pass the data in JSON-format. So the response later has also to be in JSON. And we put the data via HTTP “post” to the CI service, so we have to read later the data from the PHP $_POST[]-variable.

As you know, CI normally gets the data via GET over the URL (in the uri-segments like: controller/function/param1/param2). This also works with this JScript. Normally via Ajax and REST-API you put the data via POST. If you want to put it via the URL you have to change the script above. Delete the lines for set “data” and “type” and transofrm the url like this:

url: 'index.php/api/service/exists/' + t.value

The next thing is the  HTML-snippet (with the IDs from above, used in the Javascript). This is the base for using the Javascript, sending the value in the input-field and display the response from the CI-Controller.

The HTML-Code

This is the HTML-Code inside our template.php to few an input-form-field and can view the response from CI and the loading-spinner. The spinner and the validation-response is shown in the span with the ID #validateUsername.

<div>
  <label for="username">Username, valid: a-z.-_</label>
  <input type="text" name="username" value="" id="username" />
  <span id="validateUsername"><?php if ($error) { echo $error['msg']; } ?></span>
</div>

No we have the base to call the CI function, which makes the validation (or whatever you want) and send a response.

The CodeIgniter controller and function – The REST-like API

This is a primitive Controller, which only checks if a parameter is given or not and sending a response. You can do in this function much more, like doing a database query.

/**
 * Checks whether a given string is valid or not
 * @param string $value A given value when you call the function via PHP
 * @return string A JSON encoded array
 * @author UK
 */
 public function exists($value=null) {
    $value = $_POST['username'];  //POST-Data from the Javascript
    $response = array();

   //If you does not get an response, you can use this code
   //to test if the JScript calls the controller correctly
   /* $filename = "/the/path/to/your/file.txt";
   $handle = fopen($filename, "w+");
   fwrite($handle, $value);
   fclose($handle); */

   if (empty($value)) {
      $response = array(
         'ok' => false,
         'msg' => 'invalid username'
      );
   } //if - empty
   else {
      $response = array(
         'ok' => true,
         'msg' => 'valid username'
      );
   }

   header('Content-Type: application/json');
   echo json_encode($response); //send the response to the caller
 } //exists

Only one thing is important. That the Ajax-caller can get the response, the callee have to send an http-header (that now coming JSON-encoded data) and then just send (echo) the data. This are the last two lines. A PHP-return is not enough, because this returns the data to the PHP-internal caller (which is here the CI-Framework, coming over the index.php). But you need to put the data via http to the frontend-website and this is, what echo do.

That´s it.
Now you have an REST-like API (your Controller) and have a nice input-field which let the data  on change validate from the CI Controller.
The only disadvantage is, that you need for every input-field you want to validate a little Javascript snippet in the site-header. But maybe you can write them all together in a little js-File and include one file. Maybe the code for sending the value and showing the grafic can be written down in a little javascript-function, so that every snippet for every input-field can reuse these things. So you can minimize the overhead.

Sources

“Using Ajax to validate forms” at jqueryfordesigners.com
“jQuery for Designers – Ajax Form Validation Example” at jqueryfordesigners.com
“A quick Code Igniter and jQuery Ajax Tutorial” at mrforbes.com

The installation instructions for the WordPress PlugIn MyCaptcha on wordpress.org is false. The code shown there is not complete. Here are the correct way to install it.

• for the single.php-file of your theme (must start at the first line of your file):

<?php
if (class_exists('MyCaptcha')) {
$MyCaptcha->initialize();
}
//
?>

• for the comment.php-file the code on wordpress.org is correct:

<?php
if (class_exists('MyCaptcha')) {
global $MyCaptcha;
?>
Enter this code <!-- or any text that fits you -->
<?php
$MyCaptcha->comment_form();
?>

<br>
<input type=”text” name=”securitycode” id=”securitycode” size=”30″ />

<?php
}
?>

Important is, that you paste the code for the single.php in the first line! If you have the get_header(); in the first line, you´ll get following error (the path and the code-line is different from yours – it is dependent from your webserver and your wordpress-theme):

Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at /path/to/your/website/wordpress/wp-content/themes/k2/header.php:24) in /path/to/your/website/wordpress/wp-content/plugins/mycaptcha/MyCaptcha.php on line 41

Hope this will help you fix a installation problem with the MyCaptcha Plugin for WordPress.

At douglaswademedia.com are also some information available on how to install the Plugin. But attention – there is also shown the failure at the 2nd screenshots, where the get_header(); is in the first line (that is false!).

Update 05.07.2009 – Prefering SI Captcha

I now prefer the more easier to install Captcha-Plugin SI Captcha. It also provides more functionality like reload Captcha. It also works perfectly with the newest WordPress version!

Bereits seit einiger Zeit ist es möglich mit Google eine benutzerdefinierte Suche anzulegen. Auch Yahoo und andere Suchmaschinenbetreiber bieten ähnliche Dienste an.
Im folgenden Artikel beschreibe ich kurz wie man mit wenigen Klicks zur benutzerdefinierten Suche bei Google kommt und wie man diese auf seiner eigenen Webseite oder seinem Blog einbaut. Die Suchmaschine kann auch per URL öffentlich zugänglich gemacht werden.

Aber zunächst einmal stellt sich die Frage was denn eine benutzerdefinierte Suche eigentlich genau ist? Google bietet eine Kombination aus Suchbegriffen und Suchseiten an. Es ist also quasi möglich eine Suche, die man auch auf der normalen Seite von Google durchführen könnte abzuspeichern. Man kann diese weiter eingrenzen durch Suchbegriffe, Webseiten die mit eingeschlossen werden sollen und mit Tags versehen. Für die eigene Webseite bietet es sich an einfach über alle Seiten auf der eigenen Webseite zu suchen. So habe ich für meine Webseite folgenden Suchstring erstellt: *.karrock.de/* welcher dann die ganze Seite einbezieht, inklusive Subdomains und Unterverzeichnissen (wie bspw. der Blog).

Erstellen der benutzerdefinierten Suchmaschine in vier Schritten

1. 

   Nach der Anmeldung bei Google zum Erstellen der Suchmaschine

   Auf http://www.google.de/coop/cse/ gelangst Du über “Erstellen einer benutzerdefinierten Suchmaschine” auf die Login-Seite. Dort musst Du dir, sofern noch nicht geschehen, registrieren. Dafür ist kein GMail-Konto oder ähnliches nötig. Es reicht auch die private E-Mail-Adresse zur Registrierung. Nach der Anmeldung landest Du auf einer art Wizard in zwei Schritten. Der erste Schritt “Richte Sie ihre Suchmaschine ein” erfasst “Allgemeine Informationen”.

2. 

   Übersicht der eigenen Suchmaschinen

   Ist der Wizard abgeschlossen, ist die Suchmaschine erstellt. Weiter müssen zunächst keine Einstellungen vorgenommen werden. Dann kann aus der URL aus dem vorherigen Schritt der Link “Oder verwalten Sie ihre vorhandenen Suchmaschinen” ausgewählt werden. Damit gelangt man zur Übersicht seiner Suchmaschinen.

3. Dort wählt man für die entsprechende Suchmaschine den Link “Steuerungsfeld” aus. Damit kommt man zu den erweiterten Einstellungen
   

   Google-Suche anpassen

   der Suchmaschine. Dort lässt sich dann über “Aussehen und Verhalten” (obere Navigationsleiste) einige Farbeinstellungen und das gewünschte “Branding” (das markieren durch ein Google-Logo) auswählen.

4. Unter “Code” kann man entsprechend wie für die eigene Webseite gewünscht dann den HTML-Code kopieren und in die eigene Webseite einfügen: Fertig!

Code-Auswahl

Das HTML-Formular mit dem Suchfeld und dem Button kann natürlich noch angepasst werden. Zum Beispiel habe ich die Beschriftung des Buttons in “los” geändert.
Die Ergebnisseite der Suche kann noch soweit angepasst werden, dass ein Kopfbild eingefügt wird.
Die Werbung an der rechten Seite der Ergebnisseite, darf für den privaten oder gewerblichen Gebrauch nicht entfernt werden (die entsprechende Einstellung ist in den Einstellungen bzw. bei der Erstellung der Suchmaschine auszuwählen).
Das Ergebnis meiner personalisierten Suche und die Einbindung in die Webseite können auf meiner Heimseite rechts oben betrachtet und natürlich genutzt werden.

Es gibt auch andere Anbieter die eine benutzerdefinierte Suche anbieten – einer der größten ist wohl Yahoo. In einem späteren Artikel werde ich mich auch mit dieser benutzerdefinierten Suche befassen und ggf. weitere Tipps geben zur Anpassung des Designs und anderen Möglichkeiten die Suchseite in sein eigenes Webseiten-Design zu integrieren.

Andere Quellen über personalisierte Google-Suchmaschinen

Eigene Google Suchmaschine erstellen

Code Igniter is a very fast and leightweight PHP-Framework.
Since I transferred my website to a other webhoster my previous installation of CI and my website does not work. I only get a blank page instead of my website content. I searched for days but I found nothing.

Now after a few month (the last month I had not very much time to work on this problem) I begun again to pay the problem my attention. At the first time I workedout the problem I was also searching at CI Forum but I found no solution – only one or two others with the same complications.
Today I took a look at the log files from my webhoster but I found nothing interesting. Afterwards I took a look at the CI log files but the last one were from July. This was weird and I checked out the config-file and see that logging was on (4 = log all).

And now the solution for my problem is:
if you have logging on, you also have to make sure, that the access rights for the log-directory are correct for CI (set it to 777 = all can read, write and execute).

After changing this my website works again properly!

Some blank page problem threads at CI forum

• http://codeigniter.com/forums/viewthread/84634/
• http://codeigniter.com/forums/viewthread/84614/
• http://codeigniter.com/forums/viewthread/84850/

Update 20.08.2009

There are also some other reasons which can result in a blank page when calling a CI controller. I use at the moment the actual CodeIgniter Version 1.7.1 at a project and every time I have a syntax error (maybe I forgot a parenthesis or bracket) I got a white blank page instead of a result.
I don´t know till now why CI don´t view a PHP error. Maybe one reason is the environment in which I develope. But I don´t really know …

Update 12.05.2010

I have another solution for the blank-page-problem. If you write a PHP-Script an have a syntax error, CI maybe show a blank page. The problem is the configuration in the php.ini which prevent the system from showing the syntax error. So you have to set display_errors to “on”.

Than maybe another error can occur. If you use PHP 5.2.5 with dompdf as an CI-Plugin and have logging enabled this error message can occur:

Strict Standards: date(): It is not safe to rely on the system's timezone settings. Please use the
date.timezone setting, the TZ environment variable or the date_default_timezone_set() function. In
case you used any of those methods and you are still getting this warning, you most likely
misspelled the timezone identifier. We selected 'Europe/Berlin' for 'CEST/2.0/DST' instead in
/system/libraries/Log.php on line 102

The error can also occur on line 89. To prevent the system from display this error you have to put a “@” in front of the date()-Function at Line 102 and 89 in the Log.php.
I only found this problem because my automatically generated PDF with the dompdf-Plugin can´t be view in the PDF-Reader. If you open the PDF-Document in a text editor you can see the message.

To get more information about using dompdf as an Plugin in CI see the CI-Wiki article “PDF generation using dompdf“.