Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:09 [2021/05/09 16:53] alexandru.hogea [Premisa] |
pw:laboratoare:09 [2021/05/09 19:53] (current) alexandru.hogea [Exercitii] |
||
|---|---|---|---|
| Line 56: | Line 56: | ||
| - | <note important>Pe langa HOST (localhost in cazurile de mai sus), trebuie mentionat si portul si protocolul. Pentru lab 6 o sa fie http://localhost:3000</note> | + | <note important>Pe langa HOST (localhost in cazurile de mai sus), trebuie mentionat si portul si protocolul. Pentru acest laborator o sa fie http://localhost:3000</note> |
| ===== Exercitii ===== | ===== Exercitii ===== | ||
| - | 1. Creati o componenta **Autentificare** care sa contina un formular cu **doua campuri text si un buton de Submit** respectiv **Register**. | + | {{ :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**. | ||
| <note important>Componenta Autentificare va fi responsabila de a trimite un request de tip POST catre API, avand in body datele necesare autentificarii respectiv inregistrarii utilizatorului. | <note important>Componenta Autentificare va fi responsabila de a trimite un request de tip POST catre API, avand in body datele necesare autentificarii respectiv inregistrarii utilizatorului. | ||
| Line 83: | Line 97: | ||
| </note> | </note> | ||
| - | 2. Creati doua componente, **Book** si **Author**, care sa afiseze detaliile despre fiecare carte, respectiv autor. Stilizarea nu este momentan importanta, ne vom concentra pe acest aspect in laboratorul urmator. Este destul sa afiseze chiar si un simplu JSON. | + | 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**. Din nou, stilizarea nu reprezinta o prioritate. | + | 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> | + | |
