Dynamische database met drag and drop functie

[N34X]

Beste tweakers,

Kan iemand me wat op weg helpen met mijn projectje? Ik ken HTML, CSS, Javascript, SQL en PHP, maar ik programmeer maar sporadisch. Daardoor weet ik soms niet hoe ik verder moet...

Ik wil een dynamische database met een simpele drag en drop functie voor de gebruikers.
De gebruiker ziet bijvoorbeeld een bepaalde week van de maand in een tabel, hij kan activiteiten toevoegen, verwijderen, aanpassen, maar graag ook simpelweg slepen naar een ander uur/andere dag.

Een soort gelijke tabel heb ik hier al gevonden:
Drag and drop table

Zeker bruikbare code. Hoe bouw ik hierop verder? Is het mogelijk met Javascript een update aan de database te triggeren met SQL wanneer een item wordt versleept?

Misschien heeft iemand al iets gelijkaardig gemaakt, en kan me even op weg helpen?
Op termijn zou ik verschillende gebruikers tezelfdertijd willen laten inloggen. Dit is pas voor later, maar misschien toch belangrijk om te vermelden. (Dagen "freezen" voor User2 als User1 al met iets bezig is op die dag...)


Alvast bedankt!

[Verwijderd]

Je wilt dat alle handelingen gedaan kunnen worden zonder de pagina te herladen. AJAX is hier de oplossing, dus het lijkt me handig dat je je daarin verdiept. Je kan dan een functie maken in javascript waarbij je zegt dat de database aangepast moet worden op het moment dat je een activiteit verplaatst/aangepast hebt. Er wordt dus verbinding met de database gemaakt en gegevens kunnen zo worden ingevoerd/aangepast/verwijderd. Je kan alles wat met PHP/MySQL ook kan als je een form submit (en nog veel meer).

Wat betreft het "freezen" van data. Dat kan je dan ook in de database zetten, dus welke gebruiker met welke data bezig is. Met een timer kan je dan die gegevens om de zoveel tijd uit de database halen en die data "freezen" voor de andere gebruiker.

[Verwijderd]

Ik neem aan dat er een "ondrop" event is die word aangeroepen wanneer er iets geplaatst wordt. Je kunt hieraan dan een AJAX request hangen die alle velden naar een PHP script stuurt, die op zijn beurt een SQL query uitvoert.

Voor het toevoegen en verwijderen kun je gewoon knoppen gebruiken, of de "trash" functie.

[N34X]

Dank voor de snelle reacties.

Ik zal me eens in AJAX verdiepen!

[TJHeuvel]

Wat probeer je nou precies te maken? Een agenda, zoals Google Calendar?
Wat is specifiek je probleem, wat lukt er niet? Wat je nu doet is wat features neerplempen en vragen hoe zou ik dit aanpakken. Schrijf eens voor jezelf op wat je nou echt wilt maken, en ga het daarna maken.
Kom je dan nog tegen specifieke problemen aan kan je deze altijd stellen.

[Janoz]

Je moet het vormgevings element tabel niet verwarren met het database concept tabel. Dat zijn twee compleet verschillende dingen. Het is de vormgegeven tabel met drag en drop functionaliteit die je waarschijnlijk in javascript wilt implementeren. het resultaat wil je vervolgens naar de server sturen zodat dit in een database opgeslagen kan worden. Die database hoeft daarvoor helemaal niet 'dynamisch' te zijn en al helemaal niet over drag 'n drop functionaliteit te beschikken. Daarvoor kun je gewoon standaard php + mysql achtige dingetjes voor gebruiken.

[Verwijderd]

@Janoz: Dat is inderdaad een belangrijk verschil. Maar hij heeft AJAX wel degelijk nodig, als hij wil voorkomen dat er door twee gebruikers tegelijk aan het zelfde element wordt gewerkt. Je kan dit natuurlijk wel oplossen door voor elk element een aparte url te gebruiken. Op die manier kan je dan de server updaten en weet je wie waar mee bezig is. Maar het is natuurlijk mooier/overzichtelijker als het dynamisch is en je alles op een pagina kan aanpassen.

[kwaakvaak_v2]

@Melay, kun je met ajax een push event versturen naar een browser als iemand anders in een andere browser een element aanpast? Of begrijp ik jouw uitleg nu gewoon niet?

[Verwijderd]

@kwaakvaak_v2, zover ik weet kan dat niet. Maar je kan wel een interval instellen in javascript die elke keer met AJAX een request stuurt naar de database om te kijken wie waar mee bezig is. Dan kan je een functie maken die het element wat in gebruik is door een andere gebruiker "freezed". Elke keer dat je een ander element gaat bewerken wordt dat ook in de database gezet. Op die manier kan je met meerderen de kalender bewerken, zonder elkaar in de weg te zitten.

[djluc]

Qua pushen is dit relevant wellicht: http://www.ape-project.org/

Dat is echter een level verder dan wat de TS wil.

De TS heeft het over een afspraak, waarschijnlijk een ding wat de volgende data bevat:

ID: Uniek nummer van de afspraak
Titel: De beschrijving
Locatie: De locatie van de afspraak (optioneel)
Startdatum/tijd: Datum + tijd aanvang van de afspraak
Einddatum/tijd: Datum + tijd einde van de afspraak

Op het moment dat TS een nieuwe afspraak wil doet hij een INSERT in de tabel. Indien de gebruiken al een tijdsvlak heeft aangeklikt stuurt hij die automatisch mee.

Als een bestaande afspraak heeft en de gebruiker versleept deze zal hij een UPDATE doen op de tabel. Dat wordt dan iets als:
UPDATE meetings SET startdate=2011-01-25 20:37, enddate=2011-01-25 20:37+$tijdsduurAfspraak WHERE id=123

[YopY]

kwaakvaak_v2 schreef op dinsdag 25 januari 2011 @ 17:45:
@Melay, kun je met ajax een push event versturen naar een browser als iemand anders in een andere browser een element aanpast? Of begrijp ik jouw uitleg nu gewoon niet?

Met AJAX niet, maar met technieken als Comet en Websockets is het mogelijk. Traditioneel gebeurt het door regelmatig te pollen, echter, ook aangezien websockets bijvoorbeeld nog niet klaar zijn om in productieomgevingen gebruikt te worden.

[Cartman!]

YopY schreef op dinsdag 25 januari 2011 @ 21:00:
[...]


Met AJAX niet, maar met technieken als Comet en Websockets is het mogelijk. Traditioneel gebeurt het door regelmatig te pollen, echter, ook aangezien websockets bijvoorbeeld nog niet klaar zijn om in productieomgevingen gebruikt te worden.

Het hier bovengenoemde APE is wel klaar voor productie, enkele grote sites werken daar mee. Facebook gebruikt ook een soortgelijke techniek, open je firebug net-tab maar eens

[cyberstalker]

Pushen met AJAX kan trouwens wel, in browsers die die ondersteunen. Hiervoor maak je een script die een 'Content-Type: multipart/x-mixed-replace' header meestuurt. Vervolgens kun je meerdere keren een document versturen wat iedereen een onreadystatechange in het XmlHttpRequest object veroorzaakt.

Het enige wat je hoeft te doen is een boundary tussen de documenten op te geven, zodat de browser weet wanneer één document ophoudt en de volgende begint.