Drag&Drop z zapisem do bazy danych MySQL

Demo:

Sprawy do załatwienia

  • zrobić zakupy
  • zapłacić za gaz
  • zapłacić za prąd
  • wywiadówka dziecka
  • posprzątać dom
  • urodziny szwagra
  • spotkanie z szefem
  • przegląd techniczny auta

Moje zadania:

    Przeciągnij tutaj


Wybrałeś: zadań

Wykorzystanie funkcji jQuery UI (drag&drop) jako lista spraw z zapisem do bazy danych
Funkcje drag&drop są powszechne w użytku. Zazwyczaj ich zawartość zapisywana jest do bazy danych, choć nie zawsze. Bazowy skrypt pokazuje gotowe zastosowanie, w tym przypadku listę spraw do załatwienia.

Krok 1 – import odpowiednich plików

W pierwszej kolejności tworzymy plik index.html. W części body dodajemy źródła niezbędnych nam plików:

  • jquery-ui.css
  • jquery-ui.js – umieszczamy w stopce strony
  • jquery.js

Krok 2 – stworzenie odpowiedniego kodu z listą spraw

W części głównej index.html tworzymy potencjalną listę spraw do załatwienia.

<ul id="sortable1" class="connectedSortable">
		<li>
			zrobić zakupy
			<input type="hidden" name="lista_spraw[]" value="zrobić zakupy">
		</li>
		<li>
			zapłacić za gaz
			<input type="hidden" name="lista_spraw[]" value="zapłacić za gaz">
		</li>
		<li>
			zapłacić za prąd
			<input type="hidden" name="lista_spraw[]" value="zapłacić za prąd">
		</li>
		<li>
			wywiadówka dziecka
			<input type="hidden" name="lista_spraw[]" value="wywiadówka dziecka">
		</li>
		<li>
			posprzątać dom
			<input type="hidden" name="lista_spraw[]" value="posprzątać dom">
		</li>
		<li>
			urodziny szwagra
			<input type="hidden" name="lista_spraw[]" value="urodziny szwagra">
		</li>
		<li>
			spotkanie z szefem
			<input type="hidden" name="lista_spraw[]" value="spotkanie z szefem">
		</li>
		<li>
			przegląd techniczny auta
			<input type="hidden" name="lista_spraw[]" value="przegląd techniczny auta">
		</li>
	</ul>

Listę można układać według własnych upodobań i potrzeb. Ważne, aby w każdym znaczniku znajdowało się pole typu input z wartościami:

  • name – taka sama dla każdego elementu, z końcowym znacznikiem []
  • value – wartość, która będzie zapisywana do naszej bazy

Krok 3 – dodanie formularza i konteneru na wybrane elementy

Aby lista mogła się zapisywać do bazy należy utworzyć formularz a polami action plikiem, który będzie przetwarzał listę i zapisywał je oraz metodą wysyłania zmiennych.
Stworzona przez nas lista to dopiero połowa sukcesu. Teraz należy stworzyć obszar, do którego te elementy można przerzucać i następnie elementy te będą zapisane do naszej bazy.

<form action="dragdrop-zapis.php" method="post">

<h3>Moje zadania:</h3>
<div id="ewd_dragdrop" class="forward">
		<ul id="sortable2" class="connectedSortable">
			<span>Przeciągnij tutaj</span>
		</ul>
</div>

<br style="clear:both;" /><br />
Wybrałeś: <input id="count" type="text" value="0" /> zadań <br />
<input id="wiz" type="submit" value="zapisz" style="display:none;" />
</form>

Ostatnie pola w naszym formularzu to pola typu input, które kolejno zliczają nasze wybrane elementy, natomiast drugie to przycisk do zapisu, który pojawia się po wybraniu (w moim przypadku) min. 5 elementów.

Krok 4 – dodanie funkcji jquery i css

Etap budowy naszej list zadań jest już zakończony. Teraz należy tchnąć życie w nasz formularz poprzez funkcje drag&drop (jQuery UI) oraz wygląd naszej listy poprzez style css.

$(function() {
	$( "#sortable1, #sortable2" ).sortable({
	connectWith: ".connectedSortable",
	receive: function(event, ui) {
			var numrelated = $('#sortable2 > li').length;
			if ( numrelated > 0 )
				{
					$('#sortable2 span').hide();
				} else if (numrelated == 0)
					{
						$('#sortable2 span').show();
					}
		$('input#count').val(numrelated); 
		if ( numrelated > 4 )
			{
				$('#wiz').show();
			} else 
				{
					$('#wiz').hide();
				}
	}
	}).disableSelection();
	});

Wcześniej pisałem, że przycisk zapisz pojawia się po wybraniu min. 5 elementów. Można to zmienić w lini:
if ( numrelated > 4 ).
Szata graficzna, układ zamieszczamy do pliku style.css

#ewd_dragdrop {
    float: left;
    margin-right: 20px;
    width: 100%;
}
#ewd_dragdrop.forward {
    border: 1px solid #DDDDDD;
}
#count {
    border: 0 none;
    color: #B3CE1E;
    padding: 1px;
    width: 15px;
}
#ewd_dragdrop ul#sortable1 li {
    background: #333;
    border: 1px solid #DD0055;
}
#ewd_dragdrop ul#sortable2 li {
background: none repeat scroll 0 0 #000000;
    border: 1px solid #DDDDDD;
    color: #DD0055;
    font-weight: bold;
}
#ewd_dragdrop #sortable1, #ewd_dragdrop #sortable2 {
    cursor: all-scroll;
    list-style-type: none;
    margin: 0 10px 0 0;
    padding: 0 0 2.5em;
}
#ewd_dragdrop #sortable1 li, #ewd_dragdrop #sortable2 li {
    float: left;
    font-size: 12px;
    margin: 7px;
    padding: 9px;
    width: 140px;
}

Krok 5 – stworzenie pliku zapisującego dane do bazy

Ostatnim krokiem jest stworzenie pliku dragdrop-zapis.php, który będzie przetwarzać nasze dane i zapisze je do bazy danych.
Zanim jeszcze stworzymy funckcję dodania do bazy trzeba stworzyć samą bazę. Moja tabela ma najprostszy ukad i wygląda następująco:

CREATE TABLE IF NOT EXISTS `dragdrop` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `data` text NOT NULL,
  `zadanie` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

Mając gotową bazę wraz z przygotowaną tabelką zabieramy się za funkcję dodania naszej listy do tabeli.

	$data = date('Y-m-d');
	foreach($_POST['lista_spraw'] as $zadania)
	{
		$zapis_do_bazy = mysql_query("INSERT INTO dragdrop SET data='$data' , zadanie='$zadania' ");		
	}

Dodałem sobie jeszcze jedno pole tekstowe o nazwie data, które może okazać się przydatne podczas wyciągania danych. Można także poprzedzić funkcję dodawania do bazy inną funkcją sprawdzającą poprawność danych. Jednak to już całkiem inny temat.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code