· 6 years ago · Oct 29, 2019, 08:20 AM
1ЛВ 01
2
3Потребно е да направите страница на која ќе се излистаат основни информации за студентите. При клик на секој од студентите, треба да се прикажат неговите детали.
4
5Упатство за изработка:
6
7 Креирајте нов проект според следното упатство: av-01-react-initialization
8 Отворете Command Prompt и навигирајте на локацијата каде е кериран проектот и стартувајте ја апликацијата (npm start)
9 Отворете ја локацијата со IntelliJ (изберете Trial доколку ве праша за лиценца)
10 Во src/ креирајте фолдер components
11 Kриерајте компонента <StudentsList students={students} /> која ќе се користи за табеларен приказ на низа од студенти, проследени преку students својството.
12 За студентите треба да се зачува: Име, Презиме, Индекс и Насока. (сите податоци се од тип String)
13 Секој од елементите на низата во StudentsList компонентата треба да се прикаже со нова компонента <StudentItem student={student}/>.
14 Оваа компонента треба да прикаже само име и презиме на студентот.
15 Во src креирајте нов фолдер repository и во него креирајте studentRepository.js датотека. Во оваа датотека креирајте метод со следната дефиниција:
16
17 export const listStudents = () => {
18 return []; // replace the empty array with actual array with at least 5 student objects
19 }
20
21 Во App.js иницирајте state кој ќе ги содржи студентите вратени со функцијата listStudents и ќе ги прикаже со помош на StudentsList компонентата.
22 Креирајте нова компонента за уредување на студентот <EditStudentDetails /> и додадете ја во App.js.
23 Оваа компонента иницијално е сокрирена и треба да се прикаже при клик на студент од листата.
24 Табелата треба да прикаже <input /> елемент за уредување на секое од својствата на студентот и submit копче
25 При клик на копчето, потребно е да се променат информациите за соодветниот студент во листата и да се сокрие компонентата EditStudentDetails
26
27Дел од деталите за изработка на вежбата се намерно изоставени. Дополнителни ресурси кои ќе помогнат при изработка на вежбата се кодот и документацијата од аудиториските вежби и секцијата Main Concepts од официјалнта документација за React.
28
29
30
31
32
33
34ЛВ 02
35
36Напомена: Делот што се однесува на JPA и Spring Data е за дома и треба да се сработи за наредната вежба.
37
38 Креирајте нов Spring boot проект и именувајте го students-api
39
40 Креирајте модел со следните ентитети
41 Student
42 String index; (primary key)
43 String name;
44 String lastName;
45 StudyProgram studyProgram; (foreign key)
46 StudyProgram
47 Long id; (primary key, auto increment)
48 String name;
49 Мапирајте ги ентитетите во релациона база на податоци (искористете ја конфигурацијата за HSQL in-memory од аудиториските вежби).
50 Потребно е да ги обезбедите следните сервиси:
51 GET /students
52 Сервис кој ги враќа сите студенти од базата на податоци, без својството studyProgram.
53 GET /students/{index}
54 Сервис кој ги враќа деталите за студентот со проследениот индекс.
55 GET /students/by_study_program/{id}
56 Сервис кој ги враќа сите студенти во студиската програма со даденото id.
57 POST /students
58 Сервис кој служи за креирање на студенти во базата на податоци
59 Се испраќаат следните параметри во телото на барањето:
60 index, name, lastName, studyProgramName (Сите параметри се од тип String)
61 Доколку некој параметар недостасува треба да се фрли исклучок (статус код 400)
62 Доколку индексот не е 6-цифрен број треба да се фрли исклучок (статус код 400)
63 Доколку не постои студиска програма со даденото име треба да се фрли исклучок (статус код 400)
64 Ако студентот е снимен, се враќа статус код 201 и во Location заглавјето се поставува патеката за преглед на деталите на студентот: {appUrl}/students/{index}.
65 PATCH /students/{index}
66 Сервис за промена на име, презиме и студиска програма на студентот
67 Како параметри се опционално се испраќаат name, lastName и studyProgramName
68 Доколку не постои студент со дадениот индекс да се врати грешка и статус код 404
69 Доколку не постои студиска програма со даденото име треба да се фрли исклучок (статус код 400)
70 DELETE /students/{index}
71 Го брише студентот со проследениот индекс
72 Ако не постои студент со дадениот индекс, да се фрли грешка (статус код 404)
73 GET /study_programs
74 Враќа листа од сите студиски програми
75 POST /study_programs
76 Метод за креирање на студиска програма (се испраќа само име)
77 DELETE /study_programs/{id}
78 Метод за бришење на студиска пограма
79 Апликацијата треба да има слоевита архитектура.
80 Валидациите се прават во имплементацијата на сервисниот слој. За секоја грешка креирајте посебна класа за исклучокот, за полесно справување во presentation (web) слојот.
81 Статус кодовите ги контролирате во presentation (web) слојот.
82 За дома: За имплементација на persistence (repository) слојот треба да ја искористите Spring Data JPA библиотеката.
83
84
85
86ЛВ 03
87
88Во оваа лабораториска вежба треба да овозможите преглед и уредување на студентите и студиските програми од претходната лабораториска вежба. Притоа треба да го искористите проектот од LV01 и да го проширите за да се овозможи повик на сервисите од REST API-то од LV02.
89
90Во апликацијата од LV01 треба да овозможите пристап до REST API-то со користење на javascript fetch api. Направете адаптација на апликацијата така што ќе ги овозможите следните функционалности:
91
92 Управување со студиски програми
93 Приказ на сите студиски програми
94 Додавање и уредување на студиска програма
95 Бришење на студиска програма
96 Да се дозволи бришење само ако нема студенти во студиската програма, а во спротивно да прикаже порака за грешка
97 Управување со студенти
98 Приказ на сите студенти од базата на податоци
99 Преглед на детали за студент
100 Додавање на нов студент и уредување на постоечки
101 Да може да се селектира студиска програма при креирарањето на студентот
102 Приказ на валидациските пораки од серверската страна
103 Да се користат API сервисите дефинирани во претходнат аудиториска вежба