Es gibt jedoch einen Weg, mit dem man trotzdem auf den Linux Server zugreifen kann, ohne dabei die Möglichkeit zu haben, einen Tunnel zu erstellen. Das Tool das man dazu benötigt findet sich auf Google Code und nennt sich shellinabox.

Leute die wie ich mit Debian arbeiten, haben es besonders einfach:
wget http://shellinabox.googlecode.com/files/shellinabox_2.10-1_i386.deb
dpkg -i shellinabox_2.10-1_i386.deb

Damit wird automatisch eine Init Script erstellt welches man hier findet: /etc/init.d/shellinabox. Wurde dieses ausgeführt, lässt sich die Linux Shell via Browser hier erreichen: https://localhost:4200. Da allerdings auch der Port 4200 wohl meistens geblockt wird, wollen wir den Verkehr von HTTPS zu 4200 umleiten, indem wir mit Apache einen Reverse Proxy einrichten. Als erstes müssen wir sicherstellen, dass beim Apache die entsprechenden Module aktiv sind:

/etc/apache2/mods-enabled
ln -s ../mods-available/proxy.conf
ln -s ../mods-available/proxy.load
ln -s ../mods-available/proxy_http.load

Anschliessend die gewünschte Apache Seiten Konfiguration anpassen. In meinem Fall hab ich in /etc/apache2/sites-available/default-ssl die folgenden Zeilen eingefügt:
<Location /shell>
ProxyPass http://localhost:4200/
Order allow,deny
Allow from all
</Location>

Shellinabox arbeitet standardmässig mit HTTPS und kann von jeder IP Adresse angesprochen werden. Auch das ändern wir, indem wir in /etc/init.d/shellinabox SHELLINABOX_ARGS hinzufügen (nur die letzte Zeile in der folgenden Box):
# Set some default values
SHELLINABOX_DATADIR="${SHELLINABOX_DATADIR:-/var/lib/shellinabox}"
SHELLINABOX_PORT="${SHELLINABOX_PORT:-4200}"
SHELLINABOX_USER="${SHELLINABOX_USER:-shellinabox}"
SHELLINABOX_GROUP="${SHELLINABOX_GROUP:-shellinabox}"
SHELLINABOX_ARGS="--localhost-only --disable-ssl"

Nun alle Dienste neu starten: “/etc/init.d/shellinabox restart” und /etc/init.d/apache2 restart” – schon lässt sich die Shell via https://localhost/shell erreichen!

Concrete5 erlaubt es, ohne grossen Aufwand die 404-Seite anzupassen. Allerdings gibt es ein paar Dinge die man kennen muss. Als Ausgangslage dient diese Seite – die Standard Concrete5 404-Seite:

Wie man sieht, wird standardmässig das Concrete5 Dashboard Layout verwenden. Als erstes wollen wir unser eigenes Theme einsetzen. Dazu öffnen wir diese Datei: “config/site_theme_paths.php”. Es gibt bereits einige Beispiele welche auskommentiert sind, neu sollte die Datei jedoch folgendermassen aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php  
 
defined('C5_EXECUTE') or die(_("Access Denied."));
 
$v = View::getInstance();
$v->setThemeByPath('/page_not_found', "yourtheme");
 
/* 
	you can override system layouts here  - but we're not going to by default 
 
	For example: if you would like to theme your login page with the Green Salad theme,
	you would uncomment the lines below and change the second argument of setThemeByPath 
	to be the handle of the the Green Salad theme "greensalad" 
 
$v = View::getInstance();
 
$v->setThemeByPath('/login', "yourtheme");
 // $v->setThemeByPath('/403', "yourtheme");
 // $v->setThemeByPath('/register', "yourtheme");
 // $v->setThemeByPath('/dashboard', "yourtheme");
 
*/

Zeile 5 und 6 definieren unser eigenes Theme. “yourtheme” muss natürlich mti dem Namen des eigenen Themes ersetzt werden. Der Name ist identisch mit dem Verzeichnisname des Themes welches sich im Ordner “themes” befindet.

Es ist wichtig, dass das Theme eine Datei mit dem Namen view.php für “Single Pages” hat. Sie kann ungewähr folgendermassen aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>
<div id="content">
<div id="body">
	   	<!-- begin -->
	   	<?php
	   	echo $innerContent;
	   	?>
	   	<!-- end --></div>
</div>
<?php
$this->inc('elements/footer.php');
?>

$innerContent enthält alle Informationen und muss zwingend ausgegeben werden.

Nachdem site_theme_paths.php gespeichert wurde, sollte die 404-Seite unser Layout übernommen haben. In meinem Fall sieht das folgendermassen aus:

Sitemap

Machmal ist es hilfreich, wenn die 404-Seite die Seitenstruktur ausgibt. Auch das lässt sich relativ einfach umsetzen. Dazu muss von dieser Datei /concrete/single_pages/page_not_found.php hier eine Kopie erstellt werden /single_pages/page_not_found.php. Dadurch können wir den Inhalt der Datei anpassen, ohne im “Concrete5 Core” Änderungen vorzunehmen. Folgendes Beispiel zeigt den Code mit einer eingebauten Sitemap:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<h1 class="error"><?php echo t('Page Not Found')?></h1>
<?php echo t('No page could be found at this address.')?>
 
<?php  if (is_object($c)) { ?>
 
 
	<?php  $a = new Area("Main"); $a->display($c); ?>
<?php  } ?>
 
 
 
<?php
$bt = BlockType::getByHandle('autonav');
$bt->controller->orderBy = 'display_asc';                    
$bt->controller->displayPages = 'top';
$bt->controller->displaySubPages = 'all';     
$bt->controller->displaySubPageLevels = 'all';                    
$bt->render('view');
?>		
 
 
 
<a href="<?php echo DIR_REL?>/"><?php echo t('Back to Home')?></a>.

Die Zeilen 13 bis 20 verwenden den Autonav Block um eine Sitemap auszugeben. Mehr braucht’s nicht! In meinem Fall sieht die Seite so aus:

Etwas überflüssig in meinem Fall, je nach Struktur/Seite aber vielleicht ganz nützlich.

In diesem Tutorial werde ich ein “Custom Template” für den autonav Block erstellen, welches ein Attribut von einer Seite ausliest um ein Bild anstelle des Textes anzuzeigen.

Seiten Attribute

Mit Concrete5 können verschiedene Attribute einer Seite hinzugefügt werden. Damit kann man Meta-Tags, Notizen, Tags, Thumbnails oder eben auch Bilder für die Navigation verwalten. Als erstes müssen wir zwei neue Attribute erstellen. Eines wo wir das Bild auswählen können, wenn die Seite inaktiv ist und eines wenn die Seite aktiv ist.

Die roten Stellen sind entscheidend:

• Typ muss “Image/File” sein
• Das “Handle” ist wichtig, wir benötigen es später im Template
• Der Name ist nur informativ

Bilder zuweisen

Wir haben nun zwei neue Attribute. Wie auf diesem Screenshot gezeigt, können wir dort Bilder zuweisen:

• In der “Sitemap” die gewünschte Seite suchen und “Properties” auswählen
• Unter “Custom Fields” können wir nun die beiden Felder für diese Seite aktivieren
• Nun die beiden Bilder für die Navigation auswählen

Das Gleiche bitte nun für alle Seiten machen wo kein Text sondern ein Bild in der Navigation erscheinen soll. Dies ist übrigens etwas das auch ein End-User machen kann. Dank den Seiten-Attributen kann ein End-User sogar Navigationselemente mit grafischem Text selber hinzufügen.

Custom Template für den Autonav Block

Wer mit dem Stichwort “Custom Template” nichts anfangen kann, sollte vermutlich zuerst dieses Tutorial durchlesen: http://www.codeblog.ch/de/2009/03/concrete5-templates/.

Um ein neues Custom Template für den Autonav Block anzulegen, können wir ganz einfach von dieser Datei /concrete/blocks/autonav/view.php eine Kopie hier ablegen: /blocks/autonav/templates/image_navigation.php. Die Verzeichnisse autonav und templates müssen vermutlich zuerst erstellt werden.

In Zeile 55 sollte dieser Code zu finden sein. Je nach Concrete5 Version kann sich das natürlich ändern.

1
2
3
4
5
6
7
8
9
10

if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
}

Mit etwas HTML und PHP Kenntnissen erkennen wir bereits wo der Link-Text ausgegeben wird. $ni->getName(). Dies ist auch die Stelle wo wir nun ein Bild, falls vorhanden, ausgeben wollen.

Wir ersetzen $ni->getName() also mit Variablen und prüfen vorgängig ob das Seiten-Attribut einen Wert hat und weisen anschliessend ein img-Tag zu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$linkTextActive = $ni->getName();
$linkTextInactive = $ni->getName();
 
$picOn = $_c->getAttribute('pic_on');
$picOff = $_c->getAttribute('pic_off');
 
if ($picOn) {
  $linkTextActive = '<img src="' . $picOn->getURL() . '" alt="' . linkTextActive . '"/>';
}
if ($picOff) {
  $linkTextInactive = '<img src="' . $picOff->getURL() . '" alt="' . linkTextInactive . '"/>';
}
 
if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $linkTextInactive . '</a>');
}

• Line 1,2: Die neuen Variablen
• Line 4,5: Attribut-Wert auslesen
• Line 7-12: Prüft ob das Attribut einen Wert hat und generiert das img-Tag

Jetzt kann ein autonav Block eingefügt werden, alle Einstellungen vornehmen und nachdem der Block hinzugefügt wurde, erneut anklicken und “Set Custom Template” wählen. Hier sollte nun unser neues Custom Template erscheinen.

Wenn alles funktioniert hat, sollte nun eine Navigation mit Bildern erscheinen:

Ein simpler Block im Inhalt anzuzeigen den man bei Bedarf aus- und wieder einblenden kann:

Dialog

Der folgende Screenshot zeigt den Dialog wo sämtliche Informationen eingegeben werden können. Speziell ist, dass man bei diesem Block das Layout gleich in der Eingabemaske definieren kann.

Erweiterungen

Sollte jemand ein paar Pfeile/Layouts haben, bitte kontaktiert mich. Ich würde gerne ein paar Templates einbinden so dass der Block später im Concrete5 Marktplatz veröffentlich werden kann.

Installation

Block hier herunterladen.

Die ZIP Datei in /blocks/ extrahieren. Sicherstellen dass der Ordner “remo_expand” vorhanden ist. Viel Spass!

Custom Templates

Das Stichwort “Custom Templates” sollte bekannt sein, ansonsten bitte zuerst diesen Artikel durchlesen: http://www.codeblog.ch/2009/03/concrete5-templates/. Kurz zusammengefasst: Concrete5 erlaubt es, mittels “Custom Templates” sämtliche Blöcke in ihrem Erscheinungsbild anzupassen, falls mit CSS nicht genügend Möglichkeiten zur Verfügung stehen sollten.

Core Änderungen

Der Controller des Form Blocks hat eine kleine Unschönheit, welche das “stylen” mit CSS etwas erschwert. Da keine Funktionalität daran hängt, hab ich in diesem Fall den Code im “Core” direkt modifiziert. Ev. wird das in einer zukünftigen Version geändert. Es betrifft die Datei “concrete/blocks/form/controller.php” in der Zeile 667:

Die Anweisung ’style=”width:95%”‘ ist zu entfernen.

Das Standard Layout

Wird ein Formular mit Concrete5 erstellt, sieht es standardmässig so aus:

Es funktioniert, sieht aber nicht wirklich hübsch aus.

Das neue Layout

In diesem Tutorial zeige ich, wie man ein Formular erstellen kann, bei dem die Labels nicht neben den Eingabefeldern stehen, sondern gleich im Feld. Dies kann besonders nützlich sein, wenn wenig Platz vorhanden ist, und ein grosses Formular einzufügen ist. Das PHP Template view.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<?php    
defined('C5_EXECUTE') or die(_("Access Denied."));
$survey=$controller; 
$miniSurvey=new MiniSurvey($b);
$miniSurvey->frontEndMode=true;
?>
<div class="ccm-form" id="ccm-form-id-<?php echo intval($bID)?>">
 
<?php  if ($invalidIP) { ?>
<div class="ccm-error">
<?php echo $invalidIP?></div>
<?php  } ?>
<form enctype="multipart/form-data" id="miniSurveyView<?php echo intval($bID)?>" class="miniSurveyView" method="post" action="<?php  echo $this->action('submit_form')?>">
	<?php   if( $_GET['surveySuccess'] && $_GET['qsid']==intval($survey->questionSetId) ){ ?>
<div id="msg"><?php  echo $survey->thankyouMsg ?></div>
<?php   }elseif(strlen($formResponse)){ ?>
<div id="msg">
			<?php  echo $formResponse ?>
			<?php  
			if(is_array($errors) && count($errors)) foreach($errors as $error){
				echo '
<div class="error">'.$error.'</div>
';
			} ?></div>
<?php  } ?>
	<input name="qsID" type="hidden" value="<?php echo  intval($survey->questionSetId)?>" />
	<input name="pURI" type="hidden" value="<?php echo  $pURI ?>" />
	<?php   	
	$questionsRS = $miniSurvey->loadQuestions($survey->questionSetId, intval($bID), 0);
	$surveyBlockInfo = $miniSurvey->getMiniSurveyBlockInfoByQuestionId($survey->questionSetId,intval($bID));
 
	$showEdit = false;
	$hideQIDs=array();
 
	while($questionRow=$questionsRS->fetchRow()) {	
		if(in_array($questionRow['qID'], $hideQIDs)) continue;
 
		$msqID=intval($questionRow['msqID']);
 
		$requiredClass=($questionRow['required'])?' required ':'';
		$requiredSymbol=($questionRow['required'])?' *':'';
 
		echo '
<div class="ccm-form-element'.$requiredClass.'">';
		$_REQUEST['Question'.$msqID] = $questionRow['question'] . $requiredSymbol;				
 
		echo $miniSurvey->loadInputType($questionRow,showEdit);
		echo "</div>
";	
	}	
 
	if($surveyBlockInfo['displayCaptcha']) {		
		$captcha = Loader::helper('validation/captcha');				
		echo "
<div class=\"ccm-form-captcha\">";
 
		echo '
<div class="required">';		
		echo '<input type="text" value="Sicherheitscode hier eingeben" name="ccmCaptchaCode" class="ccm-input-captcha"/>';
		// Please note that we need to style our captcha, we therefore create it manually!
		//$captcha->showInput();
		echo "</div>
";
 
		echo "
<div>";
		$captcha->display();
		echo "</div>
";
 
		echo "</div>
";
		echo '
<div style="clear:both"></div>
';
	}
 
	echo '<input class="formBlockSubmitButton button" name="Submit" type="submit" value="senden" />';
 
	?> 
</form></div>

Ich werde nicht jede Zeile erklären, da dies etwas umfangreich wäre. Ich geh davon aus, dass PHP Kenntnisse vorhanden sind.
Kurz aufgelistet, was geändert wurde:

• Einige Methoden vom Controller werden neu aus der View aufgerufen
• Das Tabellen Layout durch DIV’s ersetzt
• CSS Klassen eingefügt, welche für die JavaScript Checks verwendet werden
• $_REQUEST angepasst, damit die Labels im “value” Attribute ausgegeben werden

Nun haben wir ein Formular, bei dem die Labels in den Eingabefeldern ausgegeben werden. Wir müssen nun aber auch sicherstellen, dass diese vordefinierten Werte ersettz werden können, ansonsten kann es passieren, dass Formulare mit diesen Werten abgeschickt werden können.
Dazu werden verschiedene Events geprüft:

1
2
3

   $('.miniSurveyView input[type=text], textarea').click(onEnterField);
   $('.miniSurveyView input[type=text], textarea').focus(onEnterField);
   $('.miniSurveyView input[type=text], textarea').blur(onLeaveField);

Sobald ein Benutzer ein Feld aktiviert oder verlässt, werden diese Funktionen aufgerufen. Dort wird geprüft, ob der Wert zu ersetzen ist oder nicht:

1
2
3
4
5
6
7
8
9
10
11
12

function onEnterField() {
   if (this.origLabel == null)
      this.origLabel = this.value;
   if (this.origLabel == null || this.origLabel == this.value)
      this.value = '';
 
	$(this).prev(".formError").slideUp();
}
function onLeaveField() {	
   if (this.value == '' && this.origLabel != null)
      this.value = this.origLabel;
}

Zusätzlich kommen ein paar clientseitige Checks dazu, um dem Benutzer sofort einen Hinweis betreffend nicht ausgefüllten Feldern ausgeben zu können.

$(document).ready(function() {
 
   $('.miniSurveyView input[type=text], textarea').click(onEnterField);
   $('.miniSurveyView input[type=text], textarea').focus(onEnterField);
   $('.miniSurveyView input[type=text], textarea').blur(onLeaveField);
 
	$('.miniSurveyView').submit(function() {
		var formErrors = 0;
 
		$('.formError').remove();
		$('input[type=text], textarea', this).each(function() {
 
			if (($(this).attr('origLabel') == undefined || $(this).val() == $(this).attr('origLabel')) && $(this).parent().hasClass("required")) {
				formErrors++;
				$(this).before('
<div class="formError" id="formError'+formErrors+'" style="height:18px;color:red;font-size:10px;display:none;">Bitte Wert eingeben:</div>
')
				$("#formError" + formErrors).slideDown(200,function() {					
				});
			}
		})
 
		if (formErrors > 0)
			return false;
		else
			return true;
	})
 
});

Wir in einem Feld kein Wert eingegeben, wird ganz einfach oberhalb davon eine entsprechende Meldung ausgegeben.

Das Template enthält einige CSS Anweisungen, welche ich hier nicht weiter erkläre. Mit grundlegenden CSS Kenntnissen sind diese problemlos zu verstehen und können auch entsprechend angepasst/erweitert werden. Sämtliche Dateien finden sich in folgendem ZIP:

Template herunterladen

Den Inhalt der ZIP Datei ins Verzeichnis “blocks/form/templates” entpacken. Die Verzeichnisse “form” und “templates” müssen ev. vorgängig erstellt werden!
Viel Spass!

Dieser Artikel zeigt einen einfachen Ansatz, diese Problematik etwas eleganter zu lösen!

Textlänge messen

PHP bietet verschiedene Methoden um die Länge eines Textes zu messen. Zum Beispiel die Methode ImageFontWidth welche die Länge der PHP internen Schriften einfach und gut messen kann. Möchte man ein einfaches Captcha erstellen, das die internen Schriften verwendet, ist diese Methode sicherlich eine gute Wahl.

Allerdings gibt’s noch eine andere Methode, welche die komplette “Bounding Box” errechnet. Sie lautet imagettfbbox. Der Rückgabe-Wert ist eine Array welches sämtliche Werte für die “Bounding Box” enthält.

Die Methode

Wie zu Beginn des Artikels gezeigt, wollte ich eine Methode die den Text kürzt und am Ende einen weiteren Text (in diesem Fall “…”) anhängt um zu zeigen, dass der Text nicht vollständig ist.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function trim_by_width($text,$width,$font_file,$font_size=7,$append_string = '...')
{
	$append_string_box = imagettfbbox($font_size,0,$font_file,$append_string);
	$append_string_width = $append_string_box[2];
 
	$str_len = strlen($text);
	for ($i = 0; $i<=$str_len; $i++)
	{
		$trimmed_text = substr($text,0,$i);
		$bounding_box = imagettfbbox($font_size,0,$font_file,$trimmed_text);
		$trimmed_text_width = $bounding_box[2];
		if ($trimmed_text_width + $append_string_width > $width && $i > 0)
		{
			$str_to_return = substr($trimmed_text,0,strlen($trimmed_text)-1);
			if ($trimmed_text_width != $str_len)
			{
				$str_to_return .= $append_string;
			}
			return $str_to_return;
		}
	}
	return $text;
}

$trimmed_text = trim_by_width($text, $width, $font_file, $font_size, $append_string='...');

$text:
Der Text der zu kürzen

$width:
Die maximale Länge des Textes in Pixel!

$font_file:
Die True Type Schriftendatei

$font_size:
Die Schriftgrösse. Bitte beachten Sie, dass die Einheiten je nach GD Version anders sind. GD1 verwendet Pixel, GD2 hingegen Punkte./code>

echo trim_by_width('this is a long text',55,dirname(__FILE__) . '/verdana.ttf',8);