Abro, August 2008

Drag’n’Drop AJAX ToDo-Liste mit jQuery und PHP als Open Source

Hallo, Liebe Leser, die Ihr mehr oder minder zufällig auf diese Seite gestossen sein mögt. Ich dachte mir warum wieder so einen langweiligen, inhaltslosen eröffnungspost schreiben, wenn ich doch schon lange produktiveres plane. Kommen wir also gleich zur Sache.

Deutsch (Goto: #english-version | #download)

Als ich vor einiger Zeit zusammen mit Szascha unsere Internet- & Werbeagentur angemeldet habe, fiel mir schnell auf, dass eine gemeinsame ToDo-Liste unglaublich sinnvoll wäre. Insbesondere, da wir 140km auseinander wohnen (ich im Sauerland, sie im Rheinland). Also schaute ich ein bisschen herum und traf auf die Lösung von Erik, welche hier zu finden ist (, siehe auch Demo) auf codepost.org zu finden war, aber mittlerweile leider offline ist. Da haben sich schon reichlich leute beteiligt, allerdings konnten scheinbar einige ideen nicht umgesetzt werden und außerdem gefiel mir das handling nicht so super. Ergo nahm ich mir der Source mal zur Brust und lernte nebenbei noch JQuery. (Der JS-Teil sieht wirklich wüst aus, ich bitte das somit zu entschuldigen.)

Was das Script so mitbringt:

  • Es ist wirklich übersichtlich
  • Alle Bearbeitung funktioniert ohne Seitenrefresh
  • Inline-Editieren
  • Drag & Drop zum sortieren der Punkte
  • BB-Code (Aber nur ganz wenig, ist einfach zu sinnfrei)
  • Punkte als erledigt kennzeichnen
  • UTF-8
  • Leichte Internationalisierung
  • Leicht anpassbare MySQL-Einstellungen


Was ihr braucht zur Installation:

  • Ein Webserver (Ich empfehle Apache2)
  • PHP (Bei mir läuft noch 5.2)
  • MySQL (Die 5er sollte mittllerweile überall laufen… )

Wie man es installiert:

  • Ladet euch die Zip-Datei herunter
  • Entpackt sie in das htdocs-Verzeichnis (o.ä.) eures Webservers
  • Importiert den Inhalt der db.sql eure Datenbank, z.B. mit phpMyAdmin
  • Prüft nochmal, ob auch bei allen Datenbankeinstellungen “utf8_unicode_ci” steht !!
  • Öffnet die todolist.php und tragt in die Variablen $db_name, $db_user, $db_pass eure Werte ein
  • Jetzt könnt ihr die index.html im Browser öffnen (http://localhost/lm-open-todo/) und lostippseln

Ich bin jederzeit gerne da um euch bei Problemen zu helfen und natürlich auch stets für verbesserungsvorschläge offen. Bitte schreibt doch was ihr davon haltet.

[update 2008-08-31:] ich danke euch fürs herumexploiten an dem script, ich habe das jetzt notiert. auf der frontendseite gibts scheinbar noch etwas zu tun. jedoch sollte man daran denken, dass dies ja nur für privatzwecke gedacht ist. es wird wohl niemand bei sich selbst ein paar dieser anfälligen ungeschlossenen html-tags hinschreiben. bevor hier noch kein kommentar steht, sehe ich auch keine große veranlassung einen patch herauszubringen.

[update 2008-12-04:] gerade fand ich einen bug, der auftritt wenn die eintrags-id 255 überschreitet … macht sinn. leider wohl in den nächsten tagen keine zeit das zu fixen. eilt ja auch nicht ;O)

[update 2009-02-08:] sql-injection möglichkeit gefixt, dazu einen kleinen verarbeitungsfehler. danke an Ondřej von megous.com!

English (Goto: #deutsche-version | #download)

As Szascha and me came up with our web- & advertising agency, I realized that a shared ToDo-List would be incredible wise. Especially because we’re living 140km afar. So I googled around and found Erik’s solution, which is destinated here (see demo) was located at codepost.org until he finally took it offline. Well, lot’s of people already participated with that but it seemed that a lot of features couldn’t be implemented and I wasn’t very happy with the handling. So I took the source and some days of time to learn JQuery. (The JS-part looks really, really gross…so please excuse that)

Features and Improvements:

  • It’s really smart
  • Everything works without refreshing the page
  • Inline-edit
  • Drag & drop for the note’s sorting
  • BB-Code (Just a lil, it’s just too senseless)
  • Mark notes as done
  • UTF-8
  • Simple Internationalisation
  • Simple adjustable MySQL-Settings

What you need:

  • A webserver (Just take Apache2)
  • PHP (I’m running 5.2)
  • MySQL (Try 5, it’s time…)

HowTo install:

  • Download the Zip-file
  • Unpack it into Apache’s htdocs-folder (or sth.)
  • Import the contents from db.sql into your database (phpMyAdmin)
  • Check if every single charcode in DB is set to “utf8_unicode_ci” !!
  • Open todolist.php and enter your values for $db_name, $db_user, $db_pass
  • Now run index.html from your browser (http://localhost/lm-open-todo/) and add some points

I’m always there if you’re having troubles with my script and of course you may post a feature-request. So please just drop me a line what you think about it.

[update 2008-08-31:] thank you for playing around with the script. i noted that the frontend has a few security issues. but think about following: this was not intended for public usage. nobody would insert some of this creepy unclosed html-tags at his own app. so.. there’ll be a patchrelease after somebody comments this stuff. if nobody is interested i should save my time.

[update 2008-12-04:] a few minutes ago i saw that there’s a bug, when the entry-id reaches 255. sadly, there’s no time to fix it in the next days. if you’ve problems with that just drop me a line.

[update 2009-02-08:] fixed an sql-injection issue and a tiny processingbug. thanks to Ondřej from megous.com!

Finally(Goto: #top)

Further URL’s, similar projects:



19 kreative Kommentare

  1. oliver, 24.12.2008 18:49h

    cool stuff, thanks (=

  2. Christopher, 10.04.2009 21:38h

    Das ist endlich einmal ne vernümpfige Todo! Nich so kompliziert und so. Kannst du die Zeilen da vieleicht noch breiter machen?

  3. Abro, 11.04.2009 16:38h

    Das kannste dir selbst einstellen. Ich denke 50% Seitenbreite der Todo-Liste ist für alle ganz ok.

    Um das zu ändern einfach unter dem zweiten Selektor (“body div”) die 50% in der datei todolist.css auf 75% o.ä. ändern, dann hast du Platz satt.

    Eigentlich werden aber zu lange Zeilen sowieso umgebrochen, noch dazu kann man <br /> benutzen. Nur so ein Tip *schulterzuck*

  4. kedmond, 02.08.2009 06:08h

    I wish I read German, but I truly appreciate the English instructions. This is EXACTLY what I wanted. There’s a group of us working on different projects, and I have been wanting to add a page to our WordPress blog that lets people request items that need to be purchased. This might be the perfect thing. I want people to be able to make a request, and then someone else who can complete the purchase mark it as ordered or “[ ok ]” in your program’s case. I think this would really help us out. Thanks again.

    -kedmond

  5. Fof, 08.10.2009 02:23h

    Not bad! But i have no real time updates, isn’t it implemented, or is some kinda setup broken?

  6. Abro, 08.10.2009 02:33h

    Mhhh no, everything seems fine in the ToDo-List. No AJAX-Error, nothing.

    I got a failure notice from your mailaddress … do you like to give me some more information about your problem and the meaning of “realtime-updates” ?

  7. Jan, 22.10.2009 09:19h

    Das ganze in “ausgereifter”: http://www.pozdeev.com/mytinytodo/

  8. Abro, 22.10.2009 09:43h

    Schon wieder nah an dem was ich als “oversized” bezeichnen würde. (Obschon es mich freut, dass im gegensatz zu hier auf das aktuelle jQuery-UI zurückgegriffen wird.)

  9. haki, 06.11.2009 16:38h

    gibts ein update mit jquery.ui in nächster zeit? könnte evtl. behilflich sein..

  10. Abro, 06.11.2009 20:36h

    Hmja ich hab auch schon drüber nachgedacht in einer neuen Version die Sortables von jQuery-UI zu benutzen. Wenn da Interesse besteht, wär das auf jeden Fall sinnvoll. Allein schon um zu zeigen wie cool UI ist. (Und wenn einer von euch lust darauf hat, darf er mir auch gern Source zuschicken ;O)

  11. Andre, 01.02.2010 02:34h

    bischen unsicher nicht wahr? ;)
    javascript injection – proved.

    grüße da lass :)

  12. Abro, 01.02.2010 03:03h

    Wenn du den Post aufmerksam gelesen hast wirst du festgestellt haben, dass ich mir dessen bewusst bin und den Einsatz des Scripts auch nur für interne Zwecke empfehle. Ein Wikimäßiger gebrauch von Todo-Listen dürfte eh am Sinn vorbei gehen?

  13. Tom, 27.02.2010 21:04h

    Hi, cooles Script. Sowas in der Art such ich. Wie kann ich die liste um ein paar Spalten erweitern? Ich bräuchte die Uhrzeit beim erzeugen einer neuen Zeile die dann unveränderbar ist, Uhrzeit für fertigstellung die ich eingeben und ändern kann, die zeile die schon da ist für die Aufgabe und ein 5 stelliges textfeld ganz rechts. Wie kann ich sowas machen?

    MfG Tom!

  14. Abro, 27.02.2010 22:17h

    Naja indem du das vorhandene Aufgabenfeld kopierst , umbenennst und die vorausgefüllten Werte aus einer anderen DB-Spalte holst… das kann ich dir nicht in einem Satz komplett erklären, sorry. Im Zweifel kann man mich ab Ende März wieder buchen zwecks jQuery Programmierung *g* …bin allerdings überzeugt dass jeder solch kleine Änderungen mit etwas gutem Willen hinbekommt.

  15. Jacko, 18.06.2010 14:24h

    This only generates errors. The demo on your site and some of the linkeed sites.

    I am using Firefox 3.6.3

  16. Abro, 18.06.2010 15:17h

    Sorry, thats not enough information to reproduce your errors. Most of the todolist projects are completely independent, so i guess its a weird firefox-plugin or something.

  17. woodstock, 20.12.2010 01:52h

    Ja, das Ganze auf der Basis der jQuery-UI, das wär’s.

  18. greg, 10.09.2011 09:28h

    danke, geniales script!
    evtl. noch möglichkeit einen punkt andern unterzuordnen wäre toll, z.b.:
    einkauf
    -schokolade
    -kaffee
    -mehl

  19. Gunnar, 21.11.2013 11:59h

    Perfekt! Klein und anpassungsfähig. Vielen Dank für diese gute Grundlage die die meisten Wünsche bereits erfüllt.

Kommentare sind geschlossen.
Aufgrund interner Umstrukturierungsmaßnahmen ist es uns z.Zt. leider nicht
möglich auf neue Kommentare zu reagieren. Wir bitten dies zu entschuldigen.
Bei dringenden Rückfragen suchen Sie bitten den direkten Kontakt zu uns.
Das Unternehmen Lucido Media GbR wurde am 31.12.2013 stillgelegt. Diese Website existiert weiterhin zu Archivzwecken. Der Gesellschafter Daniel Abromeit führt seine Arbeit ab sofort unter dem Label 00SEO GbR fort. Zur Beauftragung von Arbeiten wenden Sie sich daher bitte an http://00seo.de/