Archiv für Kategorie Entwicklung
Probleme und Lösungen mit JS/jQuery
Verfasst von dreiling unter Entwicklung, JS / AJAX am 23. Juli 2010
Nachdem ich mich die letzte Woche mit jQuery etwas beschäftigt habe, möchte ich hier einmal kurz die aufgetretenen Probleme und die damit verbundenen Lösungen festhalten:
Parallele Abläufe
Da es in Javascript und somit auch in jQuery keine Threads gibt und eine endlose while Schleife keine Parallelität bietet (und ausserdem den Browser abstürzen lässt) muss ein anderes Konstrukt herhalten. Die Lösung hier lautet Rekursion (schön erklärt von Markus Kühle auf Javathreads).
setTimeout mit Parametern
Auf anhieb findet man für die Rekursion viele Beispiele mit der setTimeout Methode, leider aber immer ohne Parameterübergabe (in meinem Beispiel der CountUp):
setTimeout("countUp()", 1000);
Sobald nun countUp() mit einem Parameter übergeben werden soll, funktioniert dieser Aufruf nicht mehr. Die Lösung war, den ersten Parameter der setTimeout Methode durch eine Funktion zu ersetzen:
setTimeout(function(){ countUp(date); }, 1000);
Countup und die Zeit
Ich hatte eigentlich erwartet dass mich Google mit kleinen Codeschnipseln überhäuft wenn es um einen Simplen Countup für Zeit geht. Gefunden habe ich ein paar wenige, die aber so unschön anzuschauen waren, dass ich mir kurzerhand was kleines Simples selbst zusammengeschrieben habe:
//Parameter inzwischen global um einfach und dynamisch zur Laufzeit zu ändern var year, month, day; function countUp(){ //month-1 da die Monate von 0-11 codiert sind var startDate = new Date(year, month-1, day, 0, 0, 0); var currentDate = new Date(); var diff = new Date(currentDate.getTime() - startDate.getTime()); //(diff.getYear()-70) da der Zeitliche Nullpunkt bei 1970 liegt, und wir nur die Anzahl der Jahre benötigen var diffString = "Years " + (diff.getYear()-70) + " Months " + diff.getMonth() + " Days " + diff.getDate() + " Hours " + diff.getHours() + " Minutes " + diff.getMinutes() + " Seconds " + diff.getSeconds(); //String schreiben $('#countUpDiv').html(diffString); //rekursiver Aufruf setTimeout(function(){ countUp(); }, 1000); }
noch ein Tip zum Schluss
Um die komplette jQuery Doku auch offline (solls ja ab und zu geben…) nutzen zu können, gibts diese auch als PDF oder sogar als Windows Help File zum Download.
Link
Nichtraucher mit jQuery
Verfasst von dreiling unter Entwicklung, JS / AJAX, PHP am 22. Juli 2010
Nachdem ich seit inzwischen 3 Wochen dem Laster des Rauchens trotze und in meiner freien Zeit vor Praxisphase und Bachelorarbeit noch etwas sinnvolles machen wollte, habe ich mich etwas mit dem Javascript/AJAX Framework jQuery beschäftigt. Beides kombiniert, kommt bei mir eine kleine Nichtraucher”Uhr” raus:
Zur Zeit wird das Datum der letzten Zigarette (, durchschnittliches Gerauche und Preis einer Schachtel erfasst und daraus die Zeit als Nichtraucher und das dabei gesparte Geld errechnet.
In Zukunft wird die Toplist noch um das gesparte Geld erweitert, eine kleine API gebastelt die die “Uhr” ausgeben kann (ohne angemeldet zu sein) und bei ganz viel Laune wird noch das Standarddesign ersetzt.
Wer sich nicht registrieren will, kann sich mit test/test auch das innenleben mal amschauen.
Eine schöne Sache dieses jQuery 
RESTful Redirect über onchange Javascript Event
Verfasst von dreiling unter Entwicklung, Tech am 10. Juni 2010
Für unser “Projekt Systementwicklung” basteln wir grade ein Web Frontend für die weTravel iPad App. In diesem Zusammenhang wollten wir über eine Select-Box zwischen verschiedenen, hochgeladenen Reports wechseln.
Eigentlich keine große Sache:
<select onchange="javascript:window.location=this.value"> <option value="url" >anderer Beitrag</option> </select>
Aber: mit diesem Skript wird in REST nur der letzte Parameter (also zB beitrag/3/kommentar/8… ) geändert, also die 8 einfach durch die url ersetzt und somit ist es nicht möglich nur den Beitrag (in meinem Beispiel) zu ändern.
Die Lösung ist denkbar simpel: wir schreiben die komplette URL und konstruieren uns den kompletten Pfad neu. Über einen Slash vor this.value im kleinen Javascript können wir nun die komplette URL löschen:
onchange="javascript:window.location= '/' + this.value"
und die url im value Parameter entsprechend nachzukonstruieren, bei uns in Rails hätte es so aussehen:
<option value=<%= "beitrag/" + beitrag.id.to_s + "/kommentar" %>
Wie immer, wenn mans einmal gesehen hat ist es eine total simple Geschichte, der Trick der uns gefehlt hatte war der Slash im onchange um die komplette URL zu löschen
Little School Helper – Zeugnis schreiben leicht gemacht
Verfasst von dreiling unter CSS, Entwicklung, PHP am 6. Juni 2010
Sodale,
nach ca 1 Jahr Freizeitentwicklung, vielen Pausen, einem kompletten Neustart aufgrund fehlender Planung und der Weitsicht im Datenbankdesign, möchte ich nun den “Little School Helper” vorstellen.
Die Idee entstand durch meine Mutter: Zuzuschauen wie die heutigen Grundschullehrer Zeugnisse schreiben macht jeden Informatiker traurig. Das werden Wordtemplates auf USB Sticks ausgetauscht um sich im schlimmsten Fall gegenseitig das Geschriebene zu überschreiben oder im Klassensaal zu vergessen.
Es musste also ein System her was zentralisiert die Zeugnisse speichert und jedem, auch den gleichzeitigen Zugriff auf ein Zeugnis, von Zuhause aus ermöglicht. Da kam die Idee: ich will das Zeugnisschreiben für Grundschullehrer vereinfachen! Das Ziel war also gesteckt, nix großes, doch das Vorgenommene gut zu machen war der Anspruch an mich selbst.
Nach einer Version mit der Grundfunktionalität war ich dann 2 Tage bei einem guten Freund (Link) im Büro um das Design auch entsprechend ansprechend zu bauen. Unschönerweise muss ich mich da die Tage noch mit den ganzen CSS Hacks auseinandersetzen, da der IE zT einfach nicht im Kontext bleibt und ganz andere Parents / Childs anspricht als mein Freund der Firefox… steht also noch auf der TODO Liste.
Inzwischen wurde der Little School Helper einem kleineren Kreis an Lehrern und Direktoren vorgestellt und noch einige Wünsche / Änderungen realisiert und stelle Ihn nun hier vor um vieleicht noch mehr Feedback von Fachfremden, aber technisch versierterem Publikum zu bekommen.
Die Featureliste ist inzwischen auch um einiges angewachsen, über Statistiken, automatisierte Schuljahreswechsel, eine komplette Rechteverwaltung der Kollegen, bis hin zu PDF Generierung von echten Zeugnis Templates (bisher nur für RLP). Eine Doku ist noch nicht fertig, deshalb ists am einfachsten sich das ganze mal selber anzuschauen:
Eine Testversion gibts hier, mit Benutzername: admin und Passwort: test kann man sich anmelden und die komplette Funktionalität testen.
Übrigens: ich suche zur Zeit eine Grundschule die sich den Little School Helper mal genauer anschauen, und vieleicht sogar im produktiven Zeugnisschreiben benutzen/testen möchte. Wer also selbst als lehrendes Organ tätig ist oder jemanden kennt für den es von Interesse sein könnte: meldet euch bitte unter littleschoolhelper@drailing.net
Wie immer, über Feedback egal welcher Form freue ich mich sehr
Grüße,
Christian
Umlautefix für das Adminpanel
So einfach kanns sein, wenn man weiß wies geht
Um mit meinem Adminpanel auch Umlaute schreiben zu können muss nur eine kleine Zeile (in Zeile 307) eingefügt werden:
306 - $input = $input."?>"; 307 - $input = utf8_encode($input); 308 - fwrite($datei, $input);
Den Downloadlink habe ich inzwischen auch im Ursprungspost ersetzt.
Adminpanel für blueimp AjaxChat
Hiho,
auf blueimp.net gibts einen Open Source Ajax Chat der auf jedem Webserver mit php und MySql ganz einfach installiert werden kann. Das ist ne super Sache um sich schnell mit mehreren Menschen abzustimmen ohne ICQ Nummern oder Emailadressen austauschen zu müssen. Bei mir kommt er zB für ein Browserspiel zum Einsatz.
Leider ist die Verwaltung noch etwas unkonfortabel, alle Benutzer müssen über eine “users.php” Datei in ein Array eingepflegt werden. (je nach Konfiguration kann man sich auch ohne Passwort einloggen)
Dazu habe ich mir was kleines einfallen lassen um die Benutzer über eine Datenbanktabelle zu pflegen und ein kleines funktionales Adminpanel gebastelt
Kurze Featureliste:
* Adminaccount:
– Benutzer anlegen (auch Moderator)
– Benutzer löschen
– Passwort für Benutzer zurücksetzen
* Useraccount
– eigenes Passwort ändern
Die Idee dahinter ist ganz simpel:
Wir legen alle Benutzer in einer Datenbank ab und schreiben die Datei (users.php), die Benutzer verwaltet bei Änderungen neu.
Um diese Administration zu ermöglichen brauchen wir Schreibrechte auf CHAT_ROOT/lib/data/users.php und müssen eine Benutzertabelle in der Datenbank anlegen:
Im INSERT Statement kann ein beliebiger Adminbenutzer angelegt werden, hier als Standard als Benutzername und Passwort “admin”.
CREATE TABLE `ajax_chat_user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` text, `password` text, `role` text, PRIMARY KEY (`id`) ) INSERT INTO `ajax_chat_user` VALUES ('1', 'admin', 'admin', 'AJAX_CHAT_ADMIN');
In der Datei “admin.php” muss dann noch die entsprechende Datenbankverbindung an mehreren Stellen eingetragen werden.
$db = new mysqli( 'localhost', 'db-user-name', 'db-pw', 'db-name' );
Am einfachsten über suchen / ersetzen:
“db-user-name” -> eigener Datenbankbenutzer
“db-pw” -> zugehöriges Datenbankpasswort
“db-name” -> Datenbankname
Falls der Adminbenutzer einen anderen Namen als “admin” bekommen hat, müsst ihr in der Datei auch noch an 2 Stellen den entsprechend gewählten Namen eintragen (Zeile 289 und 325), einmal für das schreiben der users.php, und einmal um das evtl versehentliche Löschen zu verhindern.
Die admin.php dannach einfach ins Rootverzeichnis des Chats legen, und über www.url-to-chat.net/admin.php einloggen.
Bekannte Fehler:
- Beim Schreiben der Datei werden Umlaute nicht richtig dargestellt, daher können zur Zeit keine Benutzer/Passwörter mit Umlauten verwendet werden.
Kommentiert ist so gut wie nix, dafür sollte der Code recht sprechend und leicht zu verstehen sein.
Zum Download gehts hier: ajaxchat_adminpanel_fix
Über Feedback jeglicher Art würde ich mich natürlich freuen
Grüße,
Christian
Nachtrag:
ACHTUNG!
Falls ihr die kleine Erweiterung benutzen wollt: Es wird die Datei in der die Benutzer zuvor verwaltet wurden gnadenlöse überschrieben!
Bedeutet: Wenn zuvor Benutzer in der Datei gepflegt wurden, sollte man sich ein Backup machen und diese dann über die Oberfläche in die Datenbank eintragen.
Ruby on Rails / Sqlite3 unter Windows (Netbeans)
Verfasst von dreiling unter Entwicklung, Tech am 31. März 2010
Nach unendlichen Stunden und noch mehr Fehlermeldungen hats endlich getan! Da evtl noch andere vor ähnlichem Problem stehen fasse ich hier kurz zusammen:
Der erste Versuch startete mit dem integrierten JRuby 1.4 – das ist aber ganz großer Mist, übel verbuggt und nicht fähig c-Skripte auszuführen, was aber für manche Gems wichtig ist… Also Ruby erstmal einrichten:
Da es für mich den einfachsten Weg darstellte habe ich mich bei Ruby für den One-Click Installer entschieden ( Link ) – der meint es nett mit uns und setzt uns auch gleich die Systemvariabeln.
Um die sqlite3-ruby gem zu installieren brauchts aber noch Sqlite3 ( Link ). Davon die dlls und die exe (2 Archive!) in einen Ordner entpacken und den Pfad dazu in die Path Systemvariable eintragen.
Dannach einfach in der Konsole (cmd) die restliche Installation durchführen:
gem update --system
gem install sqlite3-ruby
gem install rails
Mein Netbeans 6.8 hat über das Autodetect im Anlegen eines neuen Ruby Projekts (Ruby Plattform – Manage) alles richtig erkannt und mit der oben eingerichteten Version von Sqlite3 funktionieren auch endlich die rake Comands!
Und für alle die dann gleich durchstarten wollen hier noch der Link zu den RailsGuides
Hoffe ich konnte dem Ein oder Anderen ein bisschen helfen!
PHP Schnipsel I
Guten Morgen,
da sich inzwischen auch EWA mit den etwas interessanteren Themen beschäftigt und sich im laufe der Zeit auch ausserhalb von EWA etwas nützliches angesammelt hat, hier ein paar kleine Codeschnipsel auf die ich immer wieder gerne zurückgreiffe:
Komplettes POST Array auslesen und ausgeben:
foreach($_POST as $key => $value) { print(htmlspecialchars("Name: [$key] Wert: [$value]")."<br>"); }
Komplettes POST Array unescapen:
if (get_magic_quotes_gpc()) { $_POST = array_map('stripslashes', $_POST); }
Includes als Dateinamen managen:
if ($_GET && is_file("files/".$_GET["site"].".php")) include ("files/".$_GET["site"].".php"); else include ("welcome.php");
Letzte Besuche von Google Bot registrieren:
$host = gethostbyaddr($_SERVER['REMOTE_ADDR']); $domain = explode(".", $host); $domain_array = count($domain)-2; if ($domain["$domain_array"] == "googlebot"){ //information verwalten, insert oder ausgabe }
Und kennt evtl irgendjemand ein WordpressPlugin was es erlaubt den Code schön formatiert zu posten?
Für Tips bin ich sehr dankbar 
Grüße,
Christian
EWA Tools (Entwicklung Webbasierter Anwendungen)
Guten Morgen!
Da EWA ja langsam mit der eigentlichen Entwicklung beginnt, dachte ich mir dass es vielleicht sinnvoll ist mal die gängigsten Tools zusammenzufassen:
- Aptana: Link
sehr komfortabler Editor auf Eclipsebasis
- XAMPP: Link
eine Distribution aus Apache Webserver, PHP und MySQL – sehr einfach zu installieren und super praktisch zum lokalen Entwickeln.
Firefox Plugins:
– Firebug: Link
einfach DAS Werkzeug ohne das wohl kein Webentwickler mehr leben möchte. Ermöglicht das genaue Analysieren und Debuggen von HTML, CSS und Javascript.
- IE Tab: Link
erlaubt das Darstellen der Seite in der Internet Explorer Engine in einem eigenen Firefox Tab.
- HTML Validator: Link
prüft jede Webseite auf Standardkonformität und zeigt dabei Warnings und Fehler an.
- Dust-Me Selectors: Link
scannt das CSS (auf Wunsch automatisch) und erstellt eine Liste mit genutzen und ungenutzen CSS Klassen
Internet Explorer:
IE Developer Toolbar: Link
ähnlich wie Firebug für Internet Explorer, leider bei weitem nicht so komfortabel.
Und zum Schluss noch ein Link zum “Werkzeugkoffer für Webentwickler” – eine sehr umfangreiche und gut sortierte Linksammlung in der man immer mal wieder was nützliches neues finden kann.
(gefunden bei Webthreads )
Ich glaube für den Moment habe ich nix vergessen, vielleicht hilfts ja dem ein oder anderen etwas weiter
Grüße,
Christian
Ikariam Spio Manager [Update 23.07]
Wies eben so läuft, braucht jeder zwischen Uni, letzten Klausurzulassungen und lernen irgendwas um sich den Kopf frei zu machen. Ein netter Nebeneffekt dabei ist dass zwischen guter Musik und Battlefield Heroes auch noch was produktives entstanden ist. Ich buche die Zeit mal auf “Java vertiefen”
Am ende kam ein kleiner “Explorer” für Spionageberichte für das Browserspiel Ikariam dabei raus.
Die erste Version funktioniert in Deutsch für Lager und Garnisonsberichte und sieht folgendermaßen aus:
kleines Update (10.07):
- Koordinaten können nun mit angegeben werden
- daher ist die alte spio.dat nicht mehr brauchbar
- in der Garnisonsansicht werden vorhandene Truppen nun rot hervorgehoben.
- eine Operakompatible Version erstellt (noch nicht sehr ausgiebig getestet…)
nochmal ein kleines Update (23.07):
- auf Wunsch einen “In die Zwischenablage kopieren” Button für Lager und Garnsionsberichte eingebaut. Funktioniert wie erwartet, der aktuell geöffnete Bericht wird in die Zwischenablage kopiert um auch einzelne Berichte wieder aus dem Manager herauszubekommen und zu posten oder weiterzuschicken.
- special Feature: weil “In die Zwischenablage kopieren” viel zu lange ist und nicht mehr auf den Button gepasst hätte, habe ich kurzerhand eine richtig nerdige Abkürzung erfunden “CTC” -> Copy to Clipboard, was sich eben immernoch besser anschauen lässt als “IDZK”
Firefox:
Download
VirusTotal Scan
Opera:
Download
VirusTotal Scan
Über Verbesserungsvorschläge(, Bugs) oder allgemeines Feedback freu ich mich natürlich immernoch.
In diesem Sinne, //jetzt wird wieder OberPrima genötigt!
//Mathe is inzwischen vorbei!
Mathe vs Christian: 0:1 – mit 2,3 bestanden!
Christian
Letzte Kommentare