1) Tato uloha je predpriprava na nasledovnu.
Sprav jednoduchy index.php subor. Don vyrob jeden HTML formular s jednym inputom.
Don zadas cislo. Po odoslani formularu vyrob OL zoznam s tolkymi LI elementami, ake cislo si zadal. Vypise sa nieco nasledovne:
1. zaznam 1, edit, delete
2. zaznam 2, edit, delete
S tym, ze su to 3 linky.
Ked kliknem na "1. hodnota", hodi ma to na show.php?id=1
Ked kliknem na "edit", hodi ma to na edit.php?id=1
Ked kliknem na "delete", hodi ma to na delete.php?id=1
Pre druhy zoznam na konci budu dvojky.
Vyrob podstranky show.php a edit.php a delete.php.
Na show.php sa zobrazi "Zobrazujem 2. zaznam.".
Na edit.php sa zobrazi. "Editujem 2. zaznam".
Na delete.php sa zobarazi "Mazem 2. zaznam".
Cislo bude podla toho, na ktory link kliknem.
2) Prerob zapisnik na todoappku. Dorob moznost editovat a vymazat specificky zaznam. V zozname bude vedla todo item aj link na edit a delete.
HTML pre zobrazenie zoznamu moze vyzera takto:
<ul class="list-group col-sm-6">
<li class="list-group-item">
todo item
<div class="controls pull-right">
<a href="edit.php?id=1" class="edit-link">edit</a>
<a href="delete.php?id=1" class="delete-link text-muted glyphicon glyphicon-remove"></a>
</div>
</li>
</ul>Aby edit a delete linky vyzerali krajsie, do CSS pridaj toto:
.controls a {
font-size: 13px;
margin-left: 8px;
text-decoration: none;
}
.delete-link {
position: relative;
top: 2px;
}Edit a Delete podstranky mozu vyzerat takto:
Ked si nechas vylistovat ulozene data, kazdy zoznam bude v poli. Z pola napriklad cez unset( $data[2] ) vies vymazat treti zoznam pola. Toto bude zrejme jednoduchsia cast ulohy. Najskor skus spravit vymazanie. Potom sprav editovanie zaznamu.
Pozor: ked z $data odstranim polozku vznikne diera v cislovani klucov. A funkcia json_encode() evidentne ma problem s podobne deravymi polami. Pred vykonanim json_encode treba na pole zavolat array_values($data), co prepocita kluce a "odstrani diery" v poli a potom je to ok.
3) Stiahni si pics-new.zip. Su tam obrazky s nazvami ako:
dexters_lab.jpg
Super-mario-3.png
dredd.jpg
Duken_Nuken_3D.jpg
Papers_Please.jpg
Vyrob z nich HTML zoznam (ol, li), ktory (pomocou glob()) zobrazi ich nazvy takto nejak:
1. Dexters Lab
2. Super Mario 3
3. Dredd
A tak dalej.
Cize pomlcka alebo podtrznik sa zmeni na medzeru (cez str_replace()) a prve pismena sa zmenia na velke (cez ucfirst()). A odreze sa pripona suboru.
Pozor, niektore subory pouzivaju pomlcky. Niektore pouzivaju podtrzniky. Niektore subory su jpg, niektore png. Ma to fungovat so vsetkymi subormi.
Z toho isteho zoznamu suborov vyrob toto:
{ type: 'quiz', title: '12 Honkeys', pic: 'twelve-monkeys.jpg' },
{ type: 'quiz', title: 'La Jetee', pic: 'la-jetee.jpg' },
{ type: 'quiz', title: 'Back To The Future 2', pic: 'back-to-the-future-2.jpg' },
{ type: 'quiz', title: 'Foor', pic: 'foor.jpg' },
{ type: 'quiz', title: 'Pool', pic: 'pool.jpg' },V title je ludsky nazov suboru. V pic je nazov suboru.
4) Stiahni si produkty.zip. Su tam adresare ako brany, postele, univerzalna-kovovyroba. V kazdom z nich su 2 adresare. Jeden, ktory obsahuje velke obrazky produktov. Druhy obsahuje male thumbnails. Sprav jednoduchu stranku, ktora funguje takto nejak:
Dizajnom sa velmi nezaoberaj. Dolezite je, ze su tam linky na rozne "kategorie" produktov. Nazvy tychto linkov sa odvijaju od nazvu adresara. Cize musis cez napr. glob() prebehnut adresare, najst z nich nazvy, zmenit ich na slovenskejsie vyzerajuce nazvy.
Napriklad "univerzalna-kovovyroba" sa zmeni na "Univerzalna Kovovyroba".
Cize pomlcka sa zmeni na medzeru (cez str_replace()) a prve pismena sa zmenia na velke (cez ucfirst()).
Potom pre kazdu sekciu sa zobrazia spadajuce obrazky.
S tym, ze obrazok bude maly thumbnail a bude to link, ked nan kliknem, zobrazi sa mi velka verzia obrazka.
Ak to nevies spravit presne podla obrazka, nevadi. Sprav to najlepsie, ako sa podari. Dolezite je pre kazdy adresar vylistovat produkty.
Ak fakt nevies, najskor skus vylistovat nazvy adresarov pod seba. Potom zmenit nazvy na krajsie nazvy. Alebo skus iba vyrobit linky s malym obrazkom smerujuce na velky obrazok. A tak dalej. Kazdy kusok, ktory vies spravit, je dobry. Len nesprav to, ze si povies "Ja neviem, ako spravit celu tuto ulohu" a vyseres sa na to:) Skus spravit tu cast, na ktoru si trufas.
5) (Tato uloha je viac hardcode.) Skus z tychto stranok vytiahnut obrazky triciek:
- https://teebusters.com/
- http://shirt.woot.com/
- https://www.riptapparel.com/
- https://www.qwertee.com/
- http://www.othertees.com/
Ukazoval som, ze cez file_get_content('http://stranka.sk') sa da stiahnut HTML kod stranky. Z neho sa potom daju vytiahnut img elementy. Ale to sa robi na hovno.
Skus radsej pouzit nieco ako: