Opis aplikacji
Aplikacja ma być bazą informacji o sprzęcie IT używanym w firmie. Gromadzone informacje mają obejmować:
- Szczegółowe informacje o parametrach sprzętu
- Informacje o lokalizacji sprzętu w budynku
- Podstawowe informacje o użytkownikach aplikacji i uprawnieniach
- Historię operacji wykonywanych w aplikacji
Stara wersja aplikacji wyglądała tak:
Nowa wersja ma działać na tej samej bazie danych. Stara baza danych wygląda tak:
CREATE TABLE `urzadzenia` (
`id` int(11) NOT NULL,
`uwiw` text NOT NULL,
`kategoria` text NOT NULL,
`sala` text NOT NULL,
`lpwsali` text NOT NULL,
`model` text NOT NULL,
`wyglad` text NOT NULL,
`procesor` text NOT NULL,
`ram` text NOT NULL,
`plyta` text NOT NULL,
`dysk` text NOT NULL,
`przekatna` text NOT NULL,
`mac` text NOT NULL,
`licencje` text NOT NULL,
`inne` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin2;
CREATE TABLE `uzytkownicy` (
`id` int(9) NOT NULL AUTO_INCREMENT,
`login` text NOT NULL,
`imie` text NOT NULL,
`nazwisko` text NOT NULL,
`ranga` text NOT NULL,
`has` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=latin2;
CREATE TABLE `wydarzenia` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`id_urzadzenia` int(11) NOT NULL,
`data` date DEFAULT NULL,
`typ_wydarzenia` text NOT NULL,
`opis` text NOT NULL,
`status` text NOT NULL,
`ip` text,
`user` text,
`dataczas` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4243 DEFAULT CHARSET=latin2;
//Fragment przykładowych danych
INSERT INTO `urzadzenia` VALUES (1,'S_UW/IW/367','serwer','324 zapl','1','','Serwer Dell','Xeon','1GB','','','','','ws2003',''),(2,'ZZS S_UWIW 218','serwer','308z','1','','Serwer Dell','Xeon','1GB','','','','','ws2003',''),(3,'S_UW/IW/176','serwer','308z','2','','Serwer SkĹadak','','','','2 hdd 160GB','','','',''),(4,'S_UWIW','serwer','308z','','MAC serwer Model A1186 EMC No: 2113','Srebrny MAC','','1GB?','','hdd 160GB?','','','OSX',''),(5,'UWIW 459,457,456','serwer','308z','3','NAS Qnap TS-219P?','NAS','','','','2 hdd 1TB','','','QOS',''),(6,'UW/IW/632','serwer','308z','4','NAS Qnap TS-669PRO','NAS','Intel Atom D2700 2130 MHz','1GB','','6 hdd 2TB','','','QOS',''),(7,'UW/IW/633','serwer','308z','5','HP ML310eGen8v2','','Xeon E3-1240v3','16GB','','2 hdd 2TB','','','ws2012 HyperVcore',''),(8,'UWIW/552','komputer','322','1','stacjonarny i5-4430 GA-B85M','Brutus','i5 4430 3GHz','8GB','Gigabyte GA-B85M-HD3','HDD 500GB wcc1u3907310','','94-DE-80-B5-77-92','w7hoem','Kupione z obudowami Logic teraz obudowy Brutus');)
INSERT INTO `wydarzenia` VALUES (1,1,'1980-01-01','zakup','data niepewna','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(2,2,'1980-01-01','zakup','data niepewna','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(3,3,'1980-01-01','zakup','data niepewna','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(4,4,'2007-01-01','zakup','data niepewna','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(5,5,'2012-01-01','zakup','','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(6,6,'2015-01-01','zakup','','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(7,7,'2015-01-01','zakup','','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(8,8,'2013-09-01','zakup','','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(9,9,'2013-09-01','zakup','','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(10,10,'2013-09-01','zakup','','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00'),(11,11,'2013-09-01','zakup','','potwierdzony','10.1.1.1','admi','2018-01-01 07:00:00');)
Etap 1 – API
- Utwórz instalator tworzący bazą danych wraz z danymi testowymi.
- Zaprojektuj i napisz REST API w PHP. Dane przekazywać będziemy jako json. Wykonaj testy.
Etap 2 – Szkielet frontendu
Utwórz w HTML i CSS layout zgodny z layoutem starej wersji:
- Wykorzystaj bibliotekę Bootstrap
- Wypełnij statycznymi danymi
- Zbuduj wygląd głównej tabeli (dynamiczne komponenty aplikacji utworzymy później). Użyj css grid w oparciu o Bootstrapa lub np. tak jak w tym queście
- W nagłówku zaplanuj miejsce na komponent nawigacji i na komponent filtrów
- W stopce zaplanuj miejsce na komponent statystyk/liczników
- Zadbaj o responsywność
Etap 3 – Struktura aplikacji React
Na bazie przygotowanego szkieletu HTML utwórz strukturę aplikacji React (Vite):
- plik index.html
- plik src/index.css
- plik src/main.jsx
- plik src/App.jsx
- plik src/App.css
- Komponenty należy tworzyć w src/components. Nazwa pliku to nazwa komponentu – zawsze zaczyna się od dużej litery. Style css komponentu wstawiaj w osobnych plikach o tej samej nazwie.
Przenieś statyczne treści ze szkieletu do odpowiednio nazwanych komponentów. Podziel też css.
Etap 4 – połączanie z API
Główną tabelę aplikacji napełnij danymi z bazy danych poprzez API.
Twój komentarz