Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:09 [2021/05/09 18:52] alexandru.hogea [Exercitii] |
pw:laboratoare:09 [2021/05/09 19:53] (current) alexandru.hogea [Exercitii] |
||
|---|---|---|---|
| Line 59: | Line 59: | ||
| ===== Exercitii ===== | ===== Exercitii ===== | ||
| + | |||
| + | {{ :pw:laboratoare:brief.png?nolink&700 |}} | ||
| + | |||
| + | {{ :pw:laboratoare:lab_4_-_register.png?nolink&700 |}} | ||
| + | |||
| + | {{ :pw:laboratoare:lab_4_-_login.png?nolink&700 |}} | ||
| + | |||
| + | {{ :pw:laboratoare:lab_4_-_books.png?nolink&700 |}} | ||
| + | |||
| + | {{ :pw:laboratoare:lab_4_-_authors.png?nolink&700 |}} | ||
| + | |||
| + | <note tip>Pentru vizualizarea detaliilor, puteti intra pe acest [[https://xd.adobe.com/view/7ba0a1d7-2e62-45d7-b27b-f74a16e55876-2ef3/screen/47f00dd6-0679-4cbb-b4ae-abe03f8445fc/specs/|link]] si alegand optiunea **</>** din meniul vertical aflat in dreapta.</note> | ||
| + | |||
| + | <note tip>Pentru ilustratie puteti folosi [[https://undraw.co|Undraw]]. Ilustratia folosita in design poate fi gasita cautand 'Tree swing'.</note> | ||
| 1. Creati o componenta **Autentificare** care sa contina un formular cu **doua campuri text si un buton de Submit** respectiv **Register**. | 1. Creati o componenta **Autentificare** care sa contina un formular cu **doua campuri text si un buton de Submit** respectiv **Register**. | ||
| Line 83: | Line 97: | ||
| </note> | </note> | ||
| - | 2. Creati doua componente, **Book** si **Author**, care sa afiseze detaliile despre fiecare carte, respectiv autor. Stilizarea poate sa urmeze design-ul de mai sus. Nu este obligatoriu copierea exacta a design-ului, importanta este afisarea datelor. | + | 2. Creati doua componente, **Book** si **Author**, care sa afiseze detaliile despre fiecare carte, respectiv autor. Stilizarea poate sa urmeze design-ul de mai sus. Nu este obligatorie copierea exacta a design-ului, importanta este afisarea datelor. |
| - | 3. Creati o componenta **BooksList** care sa contina o lista cu toate cartile existente, respectiv **AuthorsList** care sa contina o lista cu toati autorii existenti in baza de date. Pentru afisarea tuturor cartilor, respectiv autorilor, se vor folosi componentele create anterior, **Book** si **Author**. Aceste componente pot fi reprezentate de paginile Books si Authors din design. Din nou, nu este obligatorie respectarea design-ului. | + | 3. Creati o componenta **BooksList** care sa contina o lista cu toate cartile existente, respectiv **AuthorsList** care sa contina o lista cu toti autorii existenti in baza de date. Pentru afisarea tuturor cartilor, respectiv autorilor, se vor folosi componentele create anterior, **Book** si **Author**. Aceste componente pot fi reprezentate de paginile Books si Authors din design. Din nou, nu este obligatorie respectarea design-ului. |
| 4. Componentele **BooksList** si **AuthorsList** trebuie sa trimita cate un request de HTTP Get pentru a aduce toate intrarile din baza de date. | 4. Componentele **BooksList** si **AuthorsList** trebuie sa trimita cate un request de HTTP Get pentru a aduce toate intrarile din baza de date. | ||
| <note important>Cererile catre server pot fi date fie la apasarea pe un buton, fie atunci cand se incarca componenta (hint, useEffect)</note> | <note important>Cererile catre server pot fi date fie la apasarea pe un buton, fie atunci cand se incarca componenta (hint, useEffect)</note> | ||
| - | <note important>Pentru transmiterea unui parametru prin intermediul React Router se va folosi: | + | |
| - | <code> | + | |
| - | <Route path="/:id" component={Author} /> | + | |
| - | </code></note> | + | |
