Dotaz: Školní projekt - php/databáze

[luciny]

Dobrý den,

jsem začátečnice co se programování týče. Mám školní projekt: Uživatel si má na stránce do inputu postupně vkládat jména soutěžících a ta jména se budou vypisovat/přidávat níže na stránku pod sebe. Vedle nich mám i checkboxy na případné jejich odstranění pomocí js. (už mám hotové) Pak dalším tlačítkem bych potřebovala odeslat seznam těchto jmen. Jen nevím, jak na to. Mám si ta jména postupně házet do databáze? A šlo by to aj s tím, že ve výpisu jmen mám hned vedle ty checkboxy (zda by šel js kód upravit tak, aby se z databáze vymazala ta jména při kliknutí na odstranit?)?

Odpovědi

[Bherzet]

Pokud tomu správně rozumím, ke komunikaci se serverem (tedy tou částí v PHP) má dojít pouze jednou – za účelem odeslání celého toho seznamu soutěžících. Editaci toho seznamu (na straně klienta) máš hotovou. Chybí ti tedy jen to poslání seznamu na server a uložení do databáze.

V tom případě na straně klienta (prohlížeče) musíš napřed připravit ten seznam soutěžících (nejlépe asi jako pole). Tvou logiku, která se stará o přidávání nebo odebírání prvků ze stránky, tedy rozšiř tak, aby současně upravovala tento seznam. (Další možností by bylo vygenerovat seznam z DOMu, ale to nedoporučuji. Když už, tak generovat DOM ze seznamu, ale tím se netrap.)

Následně ta data potřebuješ odeslat na server. K tomu se asi nejlépe hodí XMLHttpRequest, WebSocket, nebo skrytý (neviditelný) formulář. Neznám úroveň tvých znalostí, ale pokud ti nic z toho nic neříká, odhadoval bych, že poslední zmíněné by pro tebe asi mohlo být nejjednodušší. Nejsem nicméně frontenďák, možná někdo poradí něco lepšího.

Konečně, na serveru musíš mít nějakou metodu, které ty data pošleš a ona je uloží do databáze. Konkrétní podoba této metody záleží na zvoleném způsobu odeslání. Pokud si tedy vybereš formulář odesílaný přes HTTP jako POST, na serveru musíš také akceptovat POST a umět ta data přečíst. Začni tím, že si jen někde vypíšeš všechna obdržená data – pak snadněji uvidíš, jak s nimi naložit dál.

[luciny]

Děkuji moc. Udělám to přes to pole, které se bude stále upravovat, podle toho, co si uživatel přidá či smaže. A za odkazy taky děkuju, projdu si to :)

[Bherzet]

Asi jsem měl ještě zmínit, že vhodnější strukturou by zde byl spíše spojový seznam než pole. Pole jsem doporučil proto, že implementace spojového seznamu ve standardní knihovně JavaScriptu buď není, nebo o ní nevím (možná, že je to v novějších verzích jinak).

Dejme tomu, že máš pole ["Adam", "Bára", "Cecílie"] a chceš odstranit Báru. Problém je, že z pole nemůžeš nějaký prvek prostě vyjmout. Představ si, že by ti lidé stáli v řadě a ty jsi toho prostředního odvedla. Zůstala by po něm mezera. V informatice by tou mezerou byla nejspíš nějaká speciální hodnota, třeba null. I mezera ale zabírá místo (a navíc je nesmysl je posílat ještě na server). Co s tím?

No, pokud si nechceš psát spojový seznam, nebo používat externí knihovnu, nejjednodušší asi bude napsat si funkci, která vytvoří nové pole a přidá do něj všechny prvky z původního pole kromě toho jediného (odebíraného).

Všimneš si, že na to už potřebuješ znát index (pořadí) té položky v poli. Nevím, jak funguje tvůj stávající kód, ale odhadoval bych, že nejlepší by bylo do HTML elementů, které reprezentují jména nebo checkboxy, schovat atribut, o jaký že index se jedná. Druhou možností by bylo to prostě dopočítat, za předpokladu že položky v DOMu (HTML stránce) i v poli jsou ve stejném pořadí.

Velký pozor ještě na jednu záludnost, která mi málem unikla. Pokud jsou vedle jmen checkboxy, soudím, že je možné odstranit více jmen najednou. Buď místo funkce, která vytvoří kopii pole bez jednoho prvku (jak jsem navrhoval výše) napiš obdobnou funkci, která to bude umět pro více prvků (to by bylo asi nejlepší, ale zase je to složitější), a nebo tu funkci, která to odstraňuje po jednotlivých prvcích, musíš volat od nejvyšších indexů po nejnižší. Jde o to, že když z pole ["Adam", "Bára", "Cecil"] budeš chtít odstranit prvky na indexech 0 a 2 a nedáš si pozor, tak ti po prvním kroku (odstranění nultého prvku) vznikne pole ["Bára", "Cecil"], které už žádný prvek na indexu 2 nemá (a i kdyby ho mělo, bude v něm něco jiného), a nebude ti to fungovat. Při postupu od nejvyšších prvků po nejnižší se ti to nestane (v tomto konkrétním případě bys vyrobila nejprve pole ["Adam", "Bára"] a poté ["Bára"], což je správně).

[Milan Uhrák]

Hm, nevím, jak moc je tazatelka zběhlá v JS, ale jako nejjednodušší se mi tedy jeví vstupní pole pro jméno a pod nim formulář s readonly polemi třeba v tabulce. Každé potvrzení jména vyvolá JS kód, který přidá řádek tabulky na konec ( po kontrole, zda není pole prázdné ).

readonly pole formuláře by mohlo být

<input type="text" readonly="readonly" name="list[index]" />      - index doplní JS kód

Na konci formuláře klasické submit. Teď si nejsem jistý zda se odesílají i readonly pole, pokud by to byl problém, JS to před odpálením přehodí na readolnly="false"

Takže

<input id="nameInput" type="text" maxlength="40" /> <input type="submit" onclick="addNameToList( nameInput )" />

pod tím

<form name="list" id="nameList" method="get" onsubmit="prehodVsechnyReadoly" action="uloz.php" />
<table id="listTable" /></table>
<input type="submit" name="submit" value="odeslat" />
</form>

v každém řádku tabulky readoly polí ještě jeden submit s onclickem na smazání toho řádku.

Tedy zhruba tak. PHP kód pak v $_GET dostane pole jmen, a je vymalováno.

[luciny]

Děkujuu moc!

[luciny]

Děkujii! :)

[debian+]

Mám si ta jména postupně házet do databáze?

nie (uzivatel sa zahraje, ked bude spokojny, odosle na server a tam sa to ulozi). Aspon tak chapem zadanie. Neskor mozes urobit priebezne ak ukladanie a ked zavrie/otvori - mate neulozene rozlozenie).

A šlo by to aj s tím, že ve výpisu jmen mám hned vedle ty checkboxy (zda by šel js kód upravit tak, aby se z databáze vymazala ta jména při kliknutí na odstranit?)?

ano

Nastuduj zoznam (hlavne si pozri priklady, lahke na pochopenie)

• HTML formulare
• PHP formulare server
• JavaScript getElementById()
• JavaScript .innerHTML alebo/a_aj JavaScript createElement()

[debian+]

• odstrani polozky - volas na polozku [- navratna hodnota getElementById()]