Web & Programmierung

Form-Submit per Enter-Taste erzwingen

Posted on by marcus

Im Zusammenhang mit Userinteraktion via Formular gibt es ab und an die Anforderung, dass man unbedingt eine vom User gedrückte Enter-Taste in Textfeldern oder Textareas erkennen muss. Mit der Möglichkeit, dieses bestimmte Keyboard-Event zu erkennen, kann man dann das Formular direkt und in allen Fällen senden, wenn die Enter-Taste gedrückt wurde, ohne das man den üblichen standardmäßigen Limitierungen unterworfen wäre.

Das nachfolgende Script zeigt wie das funktioniert:

<script language="javascript" type="text/javascript">
<!--
function checkEnter(e){
var characterCode;
var e;
if(e && e.which){
e = e;
characterCode = e.which;
}
else{
e = event;
characterCode = e.keyCode;
}
if(characterCode == 13){ //if generated character code equal to ascii 13 (enter key)
filterByGameTitle();
return false;
}
else{
return true;
}
}
//-->
</script>

Auaführliche Beschreibung ist unter http://jscript.psend.com/162/examples/stringEnterKeyDetector.php zu finden, nur drauf achten, dass da noch kleine Fehler im Script sind.

mySQL Backups auf Konsole

Posted on by marcus

Sichern von Datenbanken ist eine Sache, die man täglich braucht – bzw. täglich brauchen sollte. Es gibt wie immer viele Wege, diesen Job zu erledigen, aber am schnellsten läßt sich das sicherlich direkt in der Kommandozeile erledigen, damit ist man dann auch unabhängig von GUI-basierten Tools wie dem mySQL-Administrator oder phpMyadmin.
Das Kommando ist sehr übersichtlich:

mysqldump -u mysqluser -p mysqldatabase

Zur Erklärung: mysqldump ist das Programm, das wir benutzen, um das Backup zu erstellen. Das Programm kann verschiedene Paramter entgegennehmen, wir verwenden hier diese:

„-u“ bedeutet, dass wir die Aktion mit einem bestimmten User durchführen, der Username muss dem -u nachfolgen wie oben im Beispiel gezeigt.
„-p“ bedeutet, dass ein Passwort mitübergeben wird, das eebenfalls direkt nach -p eingetippt wird. Wird es nicht angegeben, wird ein Promt erscheinen, wo man das Passwort eingibt.

Eine vollständige Liste der Parameter kann übrigens mit mysql –help oder dem Aufruf der Manpage des Tools eingesehen werden:

man mysqldump

Ok, wenn man das Kommando oben ausführt, sieht man die Aktionen direkt in der Konsole vorbeihuschen – das ist schön, denn wir wissen damit, dass unser Kommando funktioniert, allerdings fehlt eine entscheidende Information: wo ist unsere Sicherung? Die Antwort ist: nirgends, denn wir haben das Backup nicht in ein File geschrieben. Um das nachzuholen, benutzt man zusätzlich zum oberen Kommando eine Redirection, was sehr einfach ist:

mysqldump -u mysqluser -p mysqldatabase > my_DB_backup.sql

Nun wird das Backup in das File mit dem spezifiziertem Namen geschrieben. Wenn man das File mit der Endung .sql in einem Text-Editor öffnet, sieht man alle SQL-Anweisungen zum Erstellen der Struktur und Inhalte der Datenbank. Was jetzt möglicherweise noch sinnvoll wäre, ist das Backup-File auch gleich komprimiert zu haben. Dazu benutzen wir Piping, mittels Piping übergeben wir den Output von mysqldump an das Tool gzip, welches dann die Komprimierung für uns übernimmt:

mysqldump -u mysqluser -p mysqldatabase | gzip > my_DB_backup.sql.gz

Statt gzip kann natürlich analog auch ein anderes Tool wie zip oder tar verwendet werden.

MS SQL-Server: einfache Hochkammata escapen in SQL-Statement

Posted on by marcus

nur am Rande: falls mal jemand ein Update-Statement auf einen char- oder text-Feld machen muss, dann ist es hilfreich zu wissen, dass eventuell vorkommende einfache Anführungszeichen nicht, wie man natürlich intuitiv vermuten würde, mit Backshlash maskiert werden,  sondern im Statement gedoppelt werden müssen. Der String für die Update-Anwesung muss ja ebenfalls in einzelne Anführungszeichen gesteckt werden, das verursacht das Problem. Hier ein Beispiel:

UPDATE TABLE SET MYTEXTFIELD = '<sometag someattribute=''something''></sometag><anothertag anotherattribute=''something''></anothertag>' WHERE PKID = 123

Beim Beispiel ist nur darauf zu achten, dass es sich hier um einfache Anführungszeichen handelt, nicht um die im Deutschen gebräuchlichen doppelten Anführungszeichen.

Javascript debuggen mit console.log und Firebug

Posted on by marcus

Firebug ist ja bekannterweise eine äußerst hilfreiche Extension für den beliebten Browser Mozilla Firefox.
Wenn in Javascript-Werte zu debuggen sind, dann ist die Konsolen-Ansicht in Firebug sehr hilfreich, wie ich festgestellt habe. Anstelle des oft verwendeten Vorgehens, einen alert() einzubauen, kann man hier viel schöner mit console.log arbeiten.

Hier eine kurze Demo anhand des nachstehenden HTML-Codes:

<html>
<head>
<title>testpage</title>
</head>
<body>
<p>dies ist die Testseite</p>
<script language="javascript" type="text/javascript">
var i = 'ich bin der zu debuggende String';
console.log('i value is %d', i);
</script>
</body>
</html>

Mittels dieser Technik kann man gut Variablen-Werte unter Live-Bedingungen debuggen, ohne störende Alert-Fenster einzublenden. Im Firebug ist der jeweilige Wert dann direkt zu sehen:

console.log in Firebug

console.log in Firebug

Links:
Mozilla Firefox
Firebug Extension

Icons im Web ohne Grafiken mittels @font-face

Posted on by marcus

Mit CSS3 ergeben sich viele neue Möglichkeiten: wie wäre es zum Beispiel, anstatt Grafiken auf einer Website nur noch Schrift zu verwenden? Ich finde die Idee cool. Und prinzipiell geht das so: zuerst wird @font-face im CSS verwendet, mit der nachfolgenden Deklaration werden alle Browser bedient, die Schriftart muss in mehreren Formaten vorliegen:

@font-face {
font-family: 'IconFont';
src: url('iconfont.eot');
src: local('IconFont'),
url('iconfont.woff') format('woff'),
url('iconfont.otf') format('opentype'),
url('iconfont.svg#IconFont') format('svg'); }

Nun wird wir die festgelegte Schriftart für eine Klasse definiert:

<style type="text/css">
.staricon { font-family: 'IconPack'; }
</style>

Um nun ein bestimmtes Icon aus dem Schriftsatz zu referenzieren,  wird die grade definierte Klasse normal auf ein Element angewendet:

<div class="staricon">a</div>

Einsatz von case when then in SQL (MS SQL Server)

Posted on by marcus

Manchmal ist es notwendig, auch in einem SQL-Statement eine Fallunterscheidung durchzuführen.
Die generelle Syntax dafür sieht folgendermaßen aus:

SELECT ProductId,
ProductCat =
CASE ProductBehavorial
WHEN 'R' THEN 'Road'
WHEN 'M' THEN 'Mountain'
WHEN 'T' THEN 'Touring'
ELSE 'Not for sale'
END,
ProductName
FROM ProductItems
ORDER BY ProductId

Das kann auch schnell etwas verschachtelter aussehen, wenn Subselects und weitere Funktionen wie isNull() mit in das Statement kommen, hier noch ein weiteres Beispiel dazu mit Verwendung von Untescheidungen anhand von integer-Werten:

SELECT col1,col2,col3,
CASE
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 90 THEN 'sehr gut'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 79 THEN 'gut'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 69 THEN 'befriedigend'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 59 THEN 'ausreichend'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 49 THEN 'mangelhaft'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 10 THEN 'ungenügend'
ELSE 'katastrophal'
END as myrating

Die CASE/WHEN Kombination kann auch in der ORDER BY-Klausel verwendet werden, das sieht dann so aus:

SELECT col1, col2
FROM HumanResources.Employee
ORDER BY
CASE col2 WHEN 1 THEN col1 END DESC,
CASE WHEN col2 = 0 THEN col1 END;

In einem UPDATE-Statement sieht die Verwendung so aus:

UPDATE table1
SET column1 =
( CASE
WHEN ((column1 - 10.00) < 0) THEN column1 + 15
ELSE (column1 + 20.00)
END
)
WHERE column2 = 0;

tolle Icons für alle Einsatz-Zwecke

Posted on by marcus

Icons braucht man immer, deswegen kann man nie genug gute Bookmarks haben: unter der Adresse http://findicons.com/ findet sich eine Icon-Sammlung, die es in sich hat. Egal ob ganze Icon-Packs oder einzelne Symbole, hier seid Ihr echt gut bedient.

Die Suchemaske mit Suggest-Funktione ist schnell und funktioniert präzise – das Suchergebnis kann auch nochmals nach Keywords eingegrenzt werden, außerdem kann man Farbfilter verwenden oder die gewünschte Lizenz-Art auswählen.

Icons auf www.findicons.com

Darüberhinaus stehen weitere Filter wie Icons-Größe etc. zur Verfügung.

http://findicons.com/

Coldfusion: Dubletten in einer Liste entfernen (CFML)

Posted on by marcus

Aus aktuellem Anlass, weil ich’s grad mal wieder benötigt habe: ein kleines Code-Snippet zum Eliminieren von Dubletten in Listen. Es kommt ja immer wieder vor, dass man eine Liste hat, die doppelte Werte enthält. Manchmal benötigt man aber zum Weiterverarbeiten eine Liste, in der keine doppelten Einträge mehr vorhanden sind.
Das geht einfach und fix mit einem Loop über ein Struct:

<cfset myListWithDoubles = "1,1,5,4,6,1,4,6,12,4,5" />
<!--- elimate double values via struct --->
<cfset myStruct = StructNew()>
<cfloop index="idx" list="#myListWithDoubles#">
<cfset myStruct[idx] = "">
</cfloop>
<!--- convert back to a list --->
<cfset myListWithoutDoubles = StructKeyList(myStruct)>

Flash und das Attribut wmode: Ansicht von swf auf Websites

Posted on by marcus

Wer kennt es nicht: man bindet ein swf auf einer Website ein, standardmäßig überlappt die Flash-Animation dann aber auch alle anderen Elemente auf der Site, Javascript-Navigationen und (D)HTML-Elemente beissen sich mit dem swf und werden überlagert.
Die Lösung ist das wmode-Attribut, das beim param- und beim embed-Tag angegeben werden muss.

<param name='wmode' value='opaque'>

Weitere Informationen dazu direkt bei Adobe: http://livedocs.adobe.com/flash/9.0_de/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ba7.html

Hier nachstehend ein kleines komplettes Beispiel:

<div style="padding-top: 10px; padding-bottom: 10px; padding-left: 8px;"> <object width="306" height="150" classid="clsid:27CDB6E-AE6D-11cf-96B8-1941085" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">
<param name="movie" rel="nofollow" value="/flash/yourfile.swf"/>
<param name="quality" value="high"/>
<param name="wmode" value="opaque"/>
<param name="bgcolor" value="#bfbfbf"/> <embed width="306" height="150" wmode="opaque" src="/flash/yourfile.swf" rel="nofollow" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object> </div>

So eingebunden sollte die Animation keine anderen Elemente mehr überlappen.

CSS-Optimierung mit dem Firebug-Plugin CSS Usage

Posted on by marcus

Ich muss sagen, das sieht ziemlich vielversprechend aus auf die ersten paar Blicke zum CSS-Optimieren. Der dazugehörige Tipp kam vom Kollegen Michael Hnat von Bluegras: das Firebug-Plugin „CSS-Usage“ (erhältlich unter https://addons.mozilla.org/en-US/firefox/addon/10704). CSS-Usage erweitert Firebug um einen zusätzlichen Tab, wenn man den ausgewählt hat, kann man die Website scannen.

CSS Usage

CSS Usage

Nachdem der Scan beendet ist, sieht man die einzelnen Klassen aller beteiligten Stylesheets mit verschiedenen Farben gekennzeichnet. So sind zum Beispiel nicht verwendete Klassen mit rot markiert, was einem durchaus gut helfen kann, Altlasten loszuwerden. Hellgrün markierte Klassen wurden auf der momentan gescannten Seite gefunden, dunkelgrüne Klassen auf einer der vorher besuchten, man kann sich also größere Teile einer Website anschauen und übereinander scannen.

Man kann sich dann auch noch eine bereinigte Version des CSS exportieren, wo die nicht benutzten Klassen direkt auskommentiert sind, auf dieser Basis kann man die Stylesheets schon recht gut ausmisten. Momentan klappt die Anzeige der Zeilennummern noch nicht richtig, aber die Anhaltspunkte, die man durch das Add-On bekommt, sind wirklich sehr hilfreich. Wenn Ihr noch mehr darüber wissen wollt, könnt Ihr auch mal auf http://spaghetticoder.org/cssusage/ vorbeischauen.