„Interaktywne narzędzie do prezentacji i wykorzystania...

AKADEMIA GÓRNICZO-HUTNICZA IM. STANISŁAWA STASZICA W KRAKOWIE

Wydział Inżynierii Metali i Informatyki Przemysłowej

PRACA DYPLOMOWA MAGISTERSKA

pt.

„Interaktywne narzędzie do prezentacjii wykorzystania badań

naukowo dydaktycznych”

Imię i nazwisko dyplomanta: Krzysztof Kabała

Kierunek studiów: Informatyka Stosowana

Specjalność: Systemy Informatyki Przemysłowej

Nr albumu: 240148

Promotor: dr. Magdalena Kopernik

Recenzent: prof. dr hab. Mirosław Głowacki

Podpis dyplomanta: Podpis promotora:

Kraków 2015

Oświadczam, świadomy(-a) odpowiedzialności karnej za poświadczenie nieprawdy,że niniejszą pracę dyplomową wykonałem(-am) osobiście i samodzielnie i że niekorzystałem(-am) ze źródeł innych niż wymienione w pracy.

Kraków, dnia …… Podpis dyplomanta…………….

Strona: 1/52

Spis treści1. Wstęp.......................................................................................................................................4

1.1. Informacje o pracy i motywacja podjęcia tematu...........................................................41.2. Wymagania i założenia....................................................................................................4

2. Zastosowana technologia........................................................................................................62.1. Back-end..........................................................................................................................62.2. Front-end.........................................................................................................................82.3. Opis wybranych elementów Yii Framework 2..............................................................10

2.3.1. ActiveDataProvider................................................................................................10 2.3.2. ActiveRecord..........................................................................................................10

2.4. Opis wybranych technologii Front-End........................................................................12 2.4.1. Bootstrap grid.........................................................................................................12 2.4.2. Two way binding w AngularJS..............................................................................13

2.5. Opis wybranych algorytmów........................................................................................14 2.5.1. DCT Perceptual Image Hash..................................................................................14 2.5.2. Algorytm porównywania ciągów znaków - Levenshtein.......................................17 2.5.3. Algorytm wyszukiwania obszarów w tabeli PHP..................................................173. Postawione cele.....................................................................................................................194. Struktura aplikacji.................................................................................................................20

4.1. Zarządzanie użytkownikami..........................................................................................204.2. Zarządzanie projektami.................................................................................................224.3. Zarządzanie plikami......................................................................................................24

4.3.1. Wstępna analiza dodanego pliku............................................................................264.4. Komunikacja synchroniczna i asynchroniczna.............................................................274.5. Analiza dokumentów.....................................................................................................284.6. Porównywanie dokumentów.........................................................................................304.7. Porównywanie arkuszy kalkulacyjnych........................................................................33

5. Wyniki i analiza pracy systemu.............................................................................................395.1. Scenariusz testu systemu...............................................................................................395.2. Wynik pracy systemu....................................................................................................40

6. Podsumowanie i wnioski......................................................................................................496.1. Realizacja założeń i spełnienie oczekiwań....................................................................496.2. Rozwój systemu............................................................................................................506.3. Wnioski..........................................................................................................................51

7. Bibliografia...........................................................................................................................52

Strona: 2/52

1. Wstęp

1.1. Informacje o pracy i motywacja podjęcia tematuRealizacja tematu pracy to opracowanie aplikacji webowej, będącej jednocześnie

systemem do zarządzania projektami, jak i narzędziem do analizy przesłanych plików.Użytkownicy systemu to zarówno pracownicy uczelni jak i studenci, więc aplikacja spełniswoją rolę jako pełnowartościowy asystent podczas wykonywania zajęć dydaktycznych lubteż podczas badań naukowych.

Motywacją do stworzenia systemu były zajęcia laboratoryjne z przedmiotu „Metodyoptymalizacji”, na których studenci wykonywali w ramach każdych zajęć projekt, którypóźniej musiał zostać wysłany prowadzącemu na adres e-mail. Przykładowy projekt składałsię z arkusza kalkulacyjnego, w którym był duży zestaw danych oraz tabelka z wynikami douzupełnienia przez studentów, dodatkowo pliki graficzne wykresów, daneobliczeniowe/dodatkowe oraz sprawozdanie. Odpowiednio nazwane pliki prowadzący zajęciaodczytywał ze skrzynki mailowej, sprawdzając poprawność wyników, analizując sposóbrozwiązania i przeglądając sprawozdanie, mając cały czas na uwadze poszukiwanieduplikatów. Podczas zaliczenia projektu, powstawało małe zakłopotanie, gdy okazywało się,że część studentów wysyłało uszkodzone lub niekompletne projekty lub też nie wysłałoswoich prac w ogóle, cześć z tych wysłanych było duplikatem a dla części nie zgadzały sięwyniki.

Projektowany system pozwala na znaczne usprawnienie pracy na tego typuprzedmiotach, oferując zautomatyzowanie procesu zarządzania projektem od samegopoczątku do samego końca, prezentując wyniki w postaci łatwej i zrozumiałej dla każdego.Prowadzący zaoszczędza czas, mogąc poświęcić go studentom, natomiast studenci w tymsamym momencie mogą zobaczyć ocenę swojej pracy.

1.2. Wymagania i założeniaProjektowany system porusza szeroką tematykę systemów współbieżnych do

zarządzania projektami, jak i aplikacji do analizy i przetwarzania danych.Podstawowymi wyznacznikami systemu współbieżnego są:

• zarządzanie projektami,• zarządzanie użytkownikami,• zarządzanie plikami,• komunikacja synchroniczna i asynchroniczna.

Ważnymi elementami współczesnych systemów jest również ich mobilność i łatwośćobsługi. Od aplikacji wymagać się będzie, aby była dostępna z poziomu dowolnegourządzenia: smartphone, laptop, desktop, oraz działała prawidłowo na wyświetlaczach oróżnej rozdzielczości.Jednak najważniejszymi wymaganiami systemu będą wytyczne związane z analizą danych.

System powinien umożliwiać sprawne zarządzanie plikami inżynierskimi, w tym: • arkuszami kalkulacyjnymi: xls(x) – pakiet Microsoft Office, ods –

Libreoffice/Openoffice, CSV),• plikami graficznymi: jpg, png, bmp, gif,• dokumentami: pdf, doc(x) – pakiet Microsoft Office, odt – Libreoffice/Openoffice.

1. Wstęp Strona: 3/52

Dodatkowo system musi zapewnić wspólny interface dostępowy dla każdej zwymienionych grup, umożliwić odczyt meta-danych plików (rozdzielczość zdjęć, ilość strondokumentu, itd.), a także odczytywać poprawnie zawartość archiwum: zip, rar, tar, gz.

Moduł analizy plików powinien być podatny na wszelkiego rodzaju nieprawidłowości,w tym:

• uszkodzenie pliku (brak możliwości odczytania jako całość, uszkodzone archiwum),• zainfekowany plik (potrzebna ochrona antywirusowa),• niezgodność formatu pliku (rozszerzenie inne niż minetype).

Ostatecznie, pliki rozpoznane jako duplikaty, powinny być odpowiednio oznakowanew możliwie jak najwcześniejszej fazie analizy, w celu uniknięcia niepotrzebnego ichprzetwarzania.

System powinien również posiadać warstwę prezentacji danych, gdziekierownik/prowadzący będzie mógł zobaczyć w sposób jasny i zrozumiały wyniki pracysystemu, dodatkowo użytkownicy, będą mogli w panelu zarządzać swoimi pracami.

1. Wstęp Strona: 4/52

2. Zastosowana technologiaPrace nad systemem można podzielić na dwa główne etapy: budowa aplikacji do

zarządzania projektami, oraz implementacja modułu analizy plików. Wiodącym językiemprogramowania był PHP (wersja 5.6), ze względu na jego prostą budowę oraz dostępnośćwielu narzędzi wspomagających prace nad aplikacjami webowymi, m.in. frameworki, czyomawiany w dalszej części pracy composer. Środowiskiem pracy był: Linux Ubuntu 15,natomiast usługą HTTP: Apache2. Pomocniczo, wykorzystano też język: Perl i JAVA, którepozwalają na bardziej zaawansowane działania z zakresu operacji na plikach.

2.1. Back-endBack-end aplikacji (PHP) oparto o framework Yes It Is Framework 2[1] (Yii2).

Zdecydowano się na użycie tego frameworka ze względu na jego prostą budowę a co za tymidzie zwięzłą i dobrze zorganizowaną dokumentacje. Dodatkowym atutem jest wykorzystanieprzez framework najnowszych udogodnień języka PHP, takich jak: namespace[2] czy LateState Bingings[3], co znacznie ułatwia zarządzanie klasami w projekcie oraz przyspieszatworzenie obiektów klas potomnych.

Narzędziem użytym do zarządzania projektem oraz dodatkowymi modułami PHP był:composer[4], który umożliwia dołączenie modułu do projektu jednym poleceniem wydanym zpoziomu konsoli, ukrywając przed użytkownikiem proces pobierania paczki, orazdostarczając narzędzia kontroli wersji, dzięki czemu możliwa jest automatyczna aktualizacjacałego projektu. Warunkiem koniecznym do użycia pakietu jest jego obecność w serwisiegithub.com, pod adresem, który następnie używany jest jako identyfikator modułu.

W projekcie wykorzystano między innymi takie komponenty jak:• PHPImap[5] – klient pocztowy, działający poprzez protokół IMAP, umożliwiając

połączenie ze skrzynką e-mail i zarządzanie wiadomościami oraz ich załącznikami.• PHPExcel[6] – zaawansowane narzędzie do odczytu i zapisu plików w formacie

arkusza kalkulacyjnego, w tym plików Excel, LibreOffice i CSV. Odczytane daneudostępniane są z poziomu zwykłej, dwu wymiarowej tabeli w PHP.

Jako silnik bazy danych wybrano: MySQL, głównie ze względu na łatwość i szybkośćinstalacji oraz wygodną pracę z bazą z poziomu panelu administracyjnego PhpMyAdmin[7].

Konieczne było również wykorzystanie programów zewnętrznych, uruchamianych zpoziomu polecenia konsolowego (exec) w aplikacji PHP:

ClamAV[8] – program antywirusowy dostępny dla systemu operacyjnego linux iwykrywający większość z najbardziej popularnych typów zagrożeń, m.in.: trojan, spyware,adware, scareware. Wybrano ten program ze względu na jego wysoką popularność wśródspołeczności internetowej[9]. Dodatkowe atuty to darmowa licencja oraz bardzo częsteaktualizacje. Przykład użycia programu:

clamscan --quiet "SCIEZKA-DO-PLIKU"

Wyjaśnienie użytych symboli:• --quiet – brak wyświetlania dodatkowych informacji (zakończony powodzeniem skan

pliku – oznaczający brak zainfekowania, oznaczany jest poprzez brak wyniku).

Pdftohtml[10] – program konwertujący pliki w formacie PDF na plik HTML,formatując wstępnie czcionkę (rozmiar, pogrubienia) oraz dołączając obrazki w zadanymformacie (np. PNG). Wybrano ten program ze względu na występowanie w domyślnymrepozytorium programów systemu Linux Ubuntu, oraz ze względu na sprawne i bezbłędnedziałanie (program przetestowano na kilku różnych plikach PDF). Przykład użycia:

2. Zastosowana technologia Strona: 5/52

pdftohtml -q -s -zoom 1.0 -fmt png "SCIEZKA-DO-PDF" "SCIEZKA-DO-HTML";

Wyjaśnienie użytych symboli:• -q – brak wyświetlania komunikatów (prawidłowe działanie zakończone brakiem

wyniku),• -s – generowanie jednego dokumentu HTML zawierającego wszystkie strony,• -zoom 1.0 – domyślny rozmiar czcionki w pliku HTML (brak powiększenia),• -fmt png – format zapisu obrazków.

Unoconv[11] – program używający pakietu LibreOffice do konwertowania typówplików obsługiwanych przez ten pakiet. Możliwa jest konwersja dwukierunkowa dla m.in.takich typów jak: doc, docx, odt, pdf. W aplikacji wykorzystywana jest konwersja typówtekstowych (doc, odt) do PDF. Przykład działania:

unoconv -f pdf -o "SCIEZKA-DO-PDF" "SCIEZKA-DO-DOCX";

Wyjaśnienie użytych symboli:• -f pdf – format wyjściowy: PDF• -o – ścieżka do pliku wyjściowego

Konieczność użycia tego programu jest uzasadniona, ze względu na problemy zprawidłowym otwarciem i przetwarzaniem plików doc, docx w PHP. Natomiast po udanychpróbach przekształcenia PDF do formatu bardzo łatwo obsługiwanego przez PHP, czyliHTML (program „pdftohtml”), wystarczyło wszystkie nieobsługiwane pliki przekonwertowaćdo PDF. Wadą tego rozwiązania jest występowanie „podwójnej konwersji”, gdzie plik PDFjest jedynie etapem do dalszego działania, który po skończonej pracy musi zostać usunięty.

Kolejną grupę narzędzi, tworzą programy, napisane na potrzeby aplikacji w językach:Perl lub JAVA, wykorzystując zewnętrzne biblioteki lub inne programy.

Unpack.pl – skrypt Perl, który potrzebuje lokalizacji do archiwum oraz ścieżki dotymczasowego pustego katalogu, po czym po sprawdzeniu rozszerzenia archiwum,wypakowuje je do zadanego katalogu. Program posiada jedynie warunek sprawdzający, czyplik istnieje, dlatego konieczne jest upewnienie się, że rozszerzenie pliku jest prawidłowe, bona tej podstawie podejmowana jest dalsze działanie. Używane programy to: tar, unrar, gunzip,uncompress, 7z, co pozwala na obsługę zdecydowanej większości najpopularniejszych typówpaczek: rar, zip, tar, gz, 7z, itd. Spodziewanym rezultatem działania programu jest pustywynik. W przypadku zwrócenia wiersza wynikowego, traktowany jest on jako błąd.

fileChecker.jar – program napisany w JAVA, który po otrzymaniu ścieżki do pliku,sprawdza stan pliku (możliwość poprawnego otwarcia), następnie ustala minetype napodstawie zawartości (założeniem jest, że rozszerzenie pliku może być nieprawidłowe), nakońcu pobiera wszystkie meta-tagi oraz generuje sumę kontrolną md5. Wynikiem programujest tabela kluczy i wartości zapisana w postaci JSON, które następnie jest odczytywane przezaplikacje. Program używa zależności: ApacheTika[12] do obsługi meta-danych. Dozarządzania projektem programu i jego zależnościami użyto narzędzia Maven[13], któredziała bardzo podobnie do swojego odpowiednika w języku PHP, czyli composer. Napodstawie zapisu skrótowego (ID modułu) pobiera odpowiednie pliki i instaluje w projekcie,dodatkowo dba o aktualizacje, dzięki systemowi kontroli wersji.

comparer.jar – program napisany w JAVA, który przyjmuje 3 argumenty: dwa z nich tościeżki do plików, trzeci to rodzaj algorytmu. Zadaniem programu jest porównanie zawartościpodanych plików i zwrócenie wyniku w postaci liczby zmiennoprzecinkowej (od 0 do 1),oznaczającej stopień podobieństwa obu tekstów (0 – brak podobieństwa, 1 – duplikat).Program wykorzystuje jeden z dostępnych algorytmów (wybór algorytmu poprzez podanieargumentu): Levenshtein, Jaro-Winkler, Shingle. Używane przez aplikacje algorytmy zostałyopisane w dalszej części pracy. Implementacja algorytmów została zaczerpnięta z biblioteki


Java-string-simalirity[14], natomiast program jedynie normalizuje otrzymane wyniki doustalonego formatu wynikowego. W projekcie programu, podobnie jak w poprzedniku„fileChecker.jar” użyto narzędzia Maven do zarządzania zależnościami.

Ostatnią grupę narzędzi tworzą wtyczki do języka PHP, gdzie kod algorytmu napisanyw języku C++ został skompilowany do modułu, który po dodaniu do bazy rozszerzeń językaPHP jest możliwy do uruchomienia poprzez dodatkową funkcje globalną, dostępną z poziomuaplikacji.

Takim modułem jest implementacja algorytmu perceptual hash[15] (p-hash),występującego w czterech zastosowaniach: generowanie hash-a tekstu, obrazów, audio ivideo. Na potrzeby aplikacji wykorzystano tylko generowanie hash-a obrazów. Implementacjaalgorytmu napisana jest w postaci kodu C++, który należy skompilować, następnie wosobnym katalogu znajduje się kod rozszerzenia do języka PHP, który również należyskompilować i plik wynikowy w postaci biblioteki „pHash.so”, dodać do bazy wczytywanychrozszerzeń poprzez umieszczenie odpowiedniego wpisu w pliku konfiguracyjnym „php.ini”.Wynik algorytmu (16 znakowy hash) jest uzyskiwany z poziomu PHP poprzez wywołaniefunkcji „ph_dct_imagehash”, z argumentem w postaci ścieżki do pliku graficznego. Algorytmp-hash został opisany w dalszej części pracy.

2.2. Front-endWarstwę kliencką aplikacji oparto o framework HTML+CSS+JS Bootstrap[16] wersja

3.3.5 (BS), który dostarcza ciekawych i prostych narzędzi do stylizowania elementów nastronie (przyciski, nagłówki, boxy) ale przede wszystkim pozwala na budowę specjalnejstruktury blokowej strony - „grid”, która automatycznie dostosowuje się do rozdzielczościekranu. Opis tej struktury znajduje się w dalszej części pracy.

Do obsługi interakcji z użytkownikiem (kod JavaScript), użyto dwóch frameworków:jQuery[17] wersja 2.1 oraz AngularJS[18] wersja 1.4.5.

JQuery był potrzebny ze względu na użycie Bootstrap. Dodatkowo jest dobrze znaną icenioną biblioteką wśród społeczności internetowej. Potwierdzają statystyki używania tegoframeworka[16] do budowy stron internetowych. Wynika z nich, że ponad 65% stron używajQuery (stan na wrzesień 2015), co pozostawia pozostałe biblioteki daleko w tyle. JQueryumożliwia sprawne poruszanie się i modyfikowanie drzewa DOM dokumentu HTML,zapewnia m.in. możliwość animacji elementów dokumentu a także posiada wieledodatkowych wtyczek i ulepszeń. W projekcie są używane np. jQuery.inputmask[20], którepozwala na intuicyjne wprowadzanie przez użytkownika np. adresu e-mail lub daty, zzachowaniem zgodności wprowadzanego tekstu (walidacja) oraz w przyjaznej dlaużytkownika formie (użytkownik widzi „maskę” w postaci sformatowanego tekstu, natomiastpole formularza przechowuje faktyczną wartość).

AngularJS to narzędzie wspomagające prace nad zaawansowanymi aplikacjamiwebowymi. Najważniejszą funkcją tego frameworka jest „two way binding”[21], którezostało dokładnie opisane w dalszej części pracy. Dodatkowo AngularJS zapewnia wsparciedla szablonów (kod strony generowany z poziomu JavaScript a nie po stronie serwera, jak toma miejsce w klasycznych aplikacjach), oraz wiele innych udogodnień, takich jak:dyrektywy, walidacja formularzy czy wstrzykiwanie zależności. Dyrektywy pozwalają nawzbogacenie języka HTML o dodatkowe znaczniki lub atrybuty, które odczytane przezframework, wykonują określone zadania. Pozwala to uniknąć zbędnego pisania kodu wpostaci wielu zakotwiczonych wewnętrznie elementów „div”, z przypisanym do nich kodemJavaScript, zastępując go jednym znacznikiem, ukrywając przy tym skomplikowanąfunkcjonalość, co czyni kod bardziej zrozumiałym i przejrzystym.

Analiza kodu HTML, pozwala również na walidacje formularzy, używającwbudowanych w język HTML atrybutów, takich jak: min, max, require, co zwalnia


programistę z konieczności pisania dodatkowego kodu podczas weryfikacji danych zformularza. Użytkownik może być informowany na bieżąco o błędach, podczas uzupełnianiaformularza, co wymagało dużej ilości kodu, chcąc tego typu efekt uzyskać za pomocą samegojQuery.

W AngularJS zastosowano kontrolery, przenosząc cały wzorzec Model-Widok-Kontroler do poziomu JavaScript, co pozwoliło na zastosowanie wstrzykiwania zależności wpostaci modułów bezpośrednio do kontenera ($scope) w kontrolerze. Wstrzykiwaniezależności polega na swobodnym dostępie do wszystkich modułów/wtyczek, poprzezwzorzec projektowy singleton, ograniczając zbędne duplikowanie obiektów tego samegotypu. Realizacja tego zadania ogranicza się do zadeklarowania nazwy modułu, jakiegochcemy użyć w argumentach kontrolera.

Dodatkowymi modułami AngularJS, zastosowanymi w pracy były:• ui.tree[22] - obsługa struktury drzewo, pozwalająca na zarządzanie węzłami menu

wielopoziomowego,• angularFileUpload[23] – biblioteka obsługująca proces uploadu plików,

wykorzystując technologię AJAX (wysyłanie/odbieranie treści bez odświeżaniastrony) do przesyłania plików na serwer, wraz z obsługą paska postępu orazwyjątków/błędów.

• AngularMoment[24] – nakładka AngularJs na bibliotekę Moment.js[25], która jestzaawansowanym parserem daty, umożliwiając wyświetlanie godziny i w dowolnysposób sformatowanej daty. Dodatkowo posiada możliwość obliczania odstępówczasowych oraz wsparcie dla stref czasowych czy różnych języków. NakładkaAngularJS wprowadza do tej funkcjonaliści two-way binding (omawianej w dalszejczęści pracy), co pozwala na wyświetlanie dat i godzin aktualizowanych w czasierzeczywistym.

• PuElasticInput[26] – dodanie elastyczności do pól tekstowych typu input.Elastyczność ta polega na dostosowaniu szerokości pola (parametr „width”) wzależności od szerokości wpisywanego w tym polu tekstu.

• ui.select[27] – pole typu select, z wbudowana wyszukiwarką pozycji. Użytkownikmoże wybrać lub wyszukać odpowiedni element.


2.3. Opis wybranych elementów Yii Framework 2

2.3.1. ActiveDataProvider

Ciekawym komponentem frameworku Yii2 jest ActiveDataProvider, czyli klasa, którapozwala na generowanie danych w sposób uporządkowany, dostarczając możliwośćfiltrowania danych, np. w celu stronicowania lub sortowania. Ukryta logika klasyautomatycznie generuje odpowiednie zapytanie SQL do bazy, a programista musi jedyniepodać odpowiednie kryteria.

Przykład kodu pokazuje wybranie najnowszych prywatnych wiadomości dla danegoużytkownika:

$provider = new ActiveDataProvider([ 'query' => Message::find()->where(['id_user' => Yii::$app->user->id, 'id_receiver'=>$id_receiver])->with('receiver')->with('user')->asArray(), 'pagination' => [ 'pageSize' => 10, 'page' => $page ], 'sort' => [ 'defaultOrder' => [ 'id' => SORT_DESC, ] ],]);

Wywołanie metody „$provider->getModels()” powoduje zwrócenie listy rekordów wpostaci zwykłej tabeli.

Parametr „query” powinien zawierać obiekt typu ActiveQuery, więc można użyć wtym miejscu modelu typu ActiveRecord, omówionego w dalszej cześci pracy.

Parametr „pagination”, pozwala na określenie ilości rekordów na stronę oraz numerstrony z wynikami (domyślnie 0), natomiast parametr „sort”, pozwala na zdefiniowaniedomyślnego sortowania wyników.

Mechanizm uruchamiany przez klasę tworzy jeden obiekt zapytania do bazy, który jestpoczątkowo definiowany przez użytkownika (ActiveQuery), a następnie modyfikowany przezkolejne parametry klasy, tworząc w efekcie gotowe zapytanie wysyłane do bazy danych.

2.3.2. ActiveRecord

Model ActiveRecord odpowiada za mapowanie tabeli z bazy danych. Aby goprzedstawić, początkowo trzeba omówić standardowy, klasyczny model mapowania tabeli,który to zakłada, że wszystkie kolumny tabeli muszą mieć swój odpowiednik w postacizapisu/parametru w klasie, np. tabela „użytkownicy” mająca pola: ID, username i password,będzie mieć swoją klasę z trzema parametrami a każdy z nich będzie posiadał atrybuty takiejak typ danych, minimalna i maksymalna ilość znaków, komentarz, itd. łatwo możnazauważyć tutaj pewne problemy:

• w przypadku najdrobniejszej zmiany w bazie danych, musimy generować model nanowojorskiej

• w przypadku odświeżenia modelu, trzeba mieć na uwadze utratę wszystkich ręcznychzmian, np. własnych funkcji dopisanych do klasy.

• zbędne duplikowanie tych samych informacji


Rozwiązaniem tych problemów jest schemat ActiveRecord, który zakłada, żemiejscem przechowywania informacji o modelu jest tylko baza danych, natomiast warstwabiznesowa ogranicza się tylko to wskazania różnic lub dodatkowych informacji, np. własnychfunkcji lub relacji z innymi modelami.

Model tabeli zaimplementowany z użyciem ActiveRecord to obiekt zawierający tylkonazwę tabeli, z którą jest powiązany. Elementami dodatkowymi mogą być: opisy kolumn,scenariusze grupowego zarządzania danymi, czy dodatkowe akcje podczasodczytywania/zapisywania rekordów.

Jednak najciekawszym zastosowaniem ActiveRecord jest wbudowana obsługaActiveQuery, więc obiektu generującego zapytania SQL na podstawie przesłanychparametrów. Posłużymy się przykładem z poprzedniego punktu, gdzie omawiany byłActiveDataProvider:

//... 'query' => Message::find()->where(['id_user' => Yii::$app->user->id, 'id_receiver'=>$id_receiver])->with('receiver')->with('user')->asArray(),//...

Widzimy, że na rzecz obiektu „Message::find()”, wywołujemy szereg metod,mających na celu odpowiednią modyfikacje modelu, tak aby wywołać generowanieodpowiedniego kodu SQL. Metoda „where” określa wartość „id_user” na równą IDzalogowanego użytkownika, natomiast „id_reveiver” na ID użytkownika, z którymprowadzona jest rozmowa. Metoda „with” dokleja relacje z tabelami „receiver” i „user” takaby zwrócony rekord w postaci tabeli (metoda „asArray”), zawierał w sobie wszystkieniezbędne informacje o wiadomości.


2.4. Opis wybranych technologii Front-End

2.4.1. Bootstrap grid

Grid to dedykowany schemat projektowania struktury szablonu strony, który ma nacelu poprawne wyświetlanie strony na wszystkich rozdzielczościach ekranu, tworząc efekt„dostosowywania się” elementów szablonu do ekranu użytkownika. Założono, żenajpopularniejsze typy rozdzielczości: desktop „lg” (większe od 1200px), laptop „md”(większe od 992px), tablet „sm” (większe od 768px), mobile „xs” (mniejsze od 768px),można podzielić na abstrakcyjnych 12 pionowych bloków. Następnie określając liczbęwyświetlanych bloków w danej rozdzielczości, uzyskuje się efekt responsywności szablonu(dopasowania do rozdzielczości ekranu).

Przykładem może być struktura czterech bloków. W największej rozdzielczości,wszystkie cztery bloki mogą być wyświetlane w jednym rzędzie. W niższej rozdzielczości,powinny się wyświetlać po dwa w rzędzie, natomiast dla najniższych rozdzielczości powinienbyć tylko jeden box w rzędzie. Aby to osiągnąć, definiujemy ile „kolumn” ma zajmować danybox w konkretnej rozdzielczości. Zacznijmy od największej rozdzielczości.

<div class=”row”> <div class=”col-lg-3”> 1 </div> <div class=”col-lg-3”> 2 </div> <div class=”col-lg-3”> 3 </div> <div class=”col-lg-3”> 4 </div></div>

Powyższy kod oznacza, że każdy z elementów blokowych ma zajmować trzy zdwunastu kolumn. Rezultatem działania tego kodu (na ekranie monitora komputera owysokiej rozdzielczości) będą cztery bloki leżące obok siebie w 1 rzędzie. Jednak gdyuruchomimy ten sam kod na ekranie o rozdzielczości tabletu (od 768px do 992px),zobaczymy tylko po jednym bloku w rzędzie. Stanie się tak dlatego, ponieważ określiliśmytylko ilość kolumn dla największej rozdzielczości, natomiast domyślnym zachowaniemdanego elementu blokowego znajdującego się w kontenerze (klasa „row”), jest ustalenie jegoszerokości na 12 kolumn. Kod musi zostać zmodyfikowany do następującej postaci:

<div class=”row”> <div class=”col-lg-3 col-md-6 col-sm-12”> 1 </div> <div class=”col-lg-3 col-md-6 col-sm-12”> 2 </div> <div class=”col-lg-3 col-md-6 col-sm-12”> 3 </div> <div class=”col-lg-3 col-md-6 col-sm-12”> 4 </div></div>

Powyższy kod będzie dostosowany do najwyższej, średniej oraz niskiej rozdzielczościekranu. Zapis „col-sm-12”, jest w tym przypadku zbędny, bo domyślną akcją jest zajmowanieprzez dany blok 12 kolumn szerokości. W przypadku usunięcia zapisu „col-lg-3” zewszystkich elementów, zachowanie dla wyższej rozdzielczości pobierane jest z zapisu dlaniższej rozdzielczości, co spowoduje wyświetlenie się dwóch elementów blokowych wrzędzie zarówno dla najwyższej jak i średniej rozdzielczości.

Budowa elementów blokowych opiera się o wartości procentowe szerokości, wpisanena sztywno w styl CSS i uzależnione od rozdzielczości ekranu, pozwala to między innymi nazagnieżdżanie elementów w sobie. Element z klasą „row”, mając swoje własne 12 kolumnmoże być umieszczony w środku innego elementu o klasie „col-md-6”, należącego do innegoelementu „row”. Pozwala to na budowe zaawansowanych, responsywnych struktur szablonu.


2.4.2. Two way binding w AngularJS

W punkcie 2.2 pracy, wspomniano o technice dwukierunkowego wiązania danych(two-way binding) we frameworku AngularJS. Aby w pełni zobrazować jej zalety, należyprzeanalizować standardowy model prezentowania/wyświetlania danych (one-way binding) wdokumentach HTML przy użyciu JavaScript (po lewej stronie na rysunku 1).

Jednokierunkowe wyświetlanie danych, powszechnie używane ze względu na łatwośćimplementacji i szybkość działania, zakłada, że dane pochodzące z modelu „Model” są stałe,więc można je jednorazowo połączyć z szablonem „Template” i wysłać użytkownikowi„View”. Użytkownik w szybkim czasie zobaczy wynik w postaci gotowego kodu HTML, alejakakolwiek zmiana w modelu, wymagają rozpoczęcia procedury wyświetlania od nowa,generując ponownie cały kod HTML. Często też nie można jednocześnie określić w którymmomencie następuje zmiana modelu, co w skrajnych przypadkach może spowodować, żeużytkownik będzie miał wyświetlone nieaktualne dane, lub też cyklicznie aplikacja będziegenerowała niepotrzebnie ten sam kod HTML.

Rozwiązaniem problemu aktualizacji danych po stronie użytkownika jest technikatwo-way binding (po prawej stronie na rysunku 1). Widzimy, że warstwa widoku „View”ściśle współpracuje z warstwą danych „Model”, natomiast szablon „Template” jestwywoływany na wyraźne życzenie warstwy widoku. Zobaczmy co to oznacza w praktyce.Mając model/obiekt danych w JavaScript, w którym przechowujemy, np. wartość wpisanąprzez użytkownika w formularzu, chcemy, aby wartość ta była cały czas aktualna, podczasgdy użytkownik zmienia jej wartość w polu formularza.

Standardowe rozwiązanie zakłada, że musimy monitorować każdy ruch użytkownika,aby za każdym razem wygenerować na nowo fragment kodu HTML, odpowiedzialny zawyświetlenie wartości. Widzimy omawiane wcześniej problemy: niepotrzebne generowaniekodu, gdy użytkownik nie zmieni w danej chwili wartości a podejmie akcje np. kliknięcia wpole, lub też ryzyko niezaktualizowania szablonu podczas np. nadpisania wartości pola przezzewnętrzną wtyczkę.

Nowe rozwiązanie – two-way binding, wymusza, aby konkretne pole formularza byłona stałe połączone z odpowiadającym modelem w kontrolerze (JavaScript). Odbywa się topoprzez dodanie dyrektywy „ng-model” do pola, przez co AngularJS zaczyna monitorowanieobiektu i każdą zmianę automatycznie przekazuje do modelu. Jednak owo połączenie działarównież w przeciwną stronę. Jeśli wyświetlimy użytkownikowi wartość modelu w kodzieHTML, w przypadku zmiany wartości modelu, sam framework zadba o to, aby zaktualizowaćużytkownikowi wartość w szablonie. W efekcie użytkownik otrzymuje aktualne dane


Rysunek 1: One-way i Two-way binding w AngularJS

synchronizowane w czasie rzeczywistym z modelem, a programista ogranicza bardzo swojąpracę jedynie do nazwania zmiennej.Opisany przykład można przedstawić w postaci następującego kodu:

<form name=”f”><input type=”text” name=”pole” ng-model=”pole”>Wpisywana przeze mnie wartość: [[pole]]</form>

Każda zmiana w polu „pole” będzie automatycznie wyświetlona w odpowiednim miejscu wszablonie („[[pole]]”).

2.5. Opis wybranych algorytmów

2.5.1. DCT Perceptual Image Hash

Jednym z zastosowanych w systemie algorytmów jest „perceptual hash”, użyty dowygenerowania hash-a dla pliku graficznego, który mógłby być zapisany w bazie iporównywalny z innymi ciągami znaków, identyfikującymi daną grafikę. Wymogiem było,aby w przypadku stwierdzenia duplikatu obrazka, ich hash-e były takie same, natomiast wprzypadku zupełnie innego obrazka, hash-e muszą się znacznie różnić aby uniemożliwićpomyłkę w postaci wykazania podobieństwa w różnych grafikach. Dla sytuacji pośredniej,więc wykazania podobieństwa obrazów, hash-e powinny być zgodnie zgodnie z udziałemprocentowym stopnia podobieństwa.

Wynikiem algorytmu jest ciąg znaków o długości 16 elementów (litery lub cyfry).Zakłada się, że dla każdego obrazka, bez względu na rozmiar, kolorystykę czy kształty, da sięwygenerować hash, który będzie miał dokładnie 16 znaków.

Idea perceptularnego hash-a polega na utworzeniu takiego ciągu znaków, któryodpowiadałby ściśle zawartości. Mówiąc inaczej, należy tak przekształcić dane wejściowe,aby uzyskać ściśle określony objętościowo ciąg znaków, mocno uzależniony od tych danych.Tak więc przy małej modyfikacji danych wejściowych, otrzymamy małą zmianę danychwyjściowych, analogicznie dla dużych zmian. Ciekawie tą ideę przedstawił autor artykułu pt.„Perceptual Hashing”[28], gdzie porównuje hash klyptograficzny z perceptualnym (rysunek2):

Widzimy, że w przypadku użycia „cryptolographic hash”, nie mamy kontroli nadzmianami w źródle, ponieważ wygenerowany hash silnie odbiega od zawartości, tworzącefekt losowości podczas najmniejszych zmian w źródle. Natomiast „perceptular hash”


Rysunek 2: Porównanie cryptographic i perceptual hash

generuje hash silnie zależny od danych wejściowych, co też jest w naszym przypadkuoczekiwane.

Użyty w pracy sposób generowania hasha bazuje na metodzie DCT - Dyskretnatransformacja kosinusowa[29], używana również w procesie kompresji JPEG i MPEG. DCTprzekształca ciąg liczb rzeczywistych g(0),…,g(N-1), według wzoru 1:

gdzie: G(k) – współczynniki DCT, g(m) – kolejne liczby rzeczywiste, N – ilość liczb w ciągu, m,k – element ciągu.

Wynikiem są współczynniki, które często są bliskie zero i w procesie kwantyzacji,zerują się. Znacznie ogranicza to ilość bitów potrzebnych na reprezentacje danych, bezwnoszenia dużego błędu.

Generowanie hasha przebiega w kilku etapach: • konwersja obrazu do odcieni szarości, używając tylko jego luminacji,• podział na obszary 7x7px, użycie na nich funkcji normalizujących get_convolve() z

biblioteki Cimg,• przeskalowanie obrazu do rozmiaru 32 x 32px,• generowanie macierzy DCT, uzyskując współczynniki (wzór nr 1),• wybranie po 8 współczynników w 8 rzędach macierzy, gdzie pierwszy jest położony w

lewej górnej części, natomiast ostatni w prawej dolnej części macierzy,• powstały ciąg 64 współczynników zamieniany jest w hash poprzez obliczenie

mediany (wartości środkowej) i utworzenie ciągu binarnego według wzoru 2:

gdzie: hi – bit hash-a w pozycji „i”, Ci – wartość współczynnika w pozycji „i”,m – wartość mediany

Choć taki sposób generowania hasha jest niewystarczający aby odwzorować w pełnipodobieństwo obrazu, to daje bardzo dobry „skrót” źródła w postaci ID. Dodatkowo hash jestodporny na lekkie zakłócenia (małe obroty, skalowanie, lekkie rozmycie, kompresje).

Poniżej (tabela 1) zaprezentowano wyniki oraz ich porównanie dla oryginału grafikioraz jej różnych wersji, ostatecznie również dla zupełnie innego pliku.Obraz Hash Zgodność z oryginałem

oryginał

8b1ea749837171ae -


G(0)= 1√N

∑m=0

N−1

g (m)

G(k )=√ 2N∑m=0

N−1

g(m)cosπk (2m+1)

2N

dla k=1,2,…,N-1

Wzór 1

hi={0 ,Ci<m1 ,Ci≥m}

Wzór 2

Obraz Hash Zgodność z oryginałem

odcienie szarości

8b1ea749837171ae 100%

pół obrazka

ebf289a9591c14ab 44%

odbicie 90st. w prawo

5e237a13d4b44c6b 40%

Odbicie lustrzane

4e4b5a1a76b6a459 38%

rozmycie

8b16a54d8371f1ae 80%

miniaturka 5%

0b96a74c8371f1ae 71%

Inny obraz

fc7874da2e44c781 26%

Tabela 1 – porównanie hash dla różnych plików graficznych


Analizując tabelę 1 można zauważyć, że rozmycie i skalowanie spowodowałyniewielki spadek w rozpoznaniu podobieństwa obrazów. Przekonwertowanie kolorów obrazudo odcieni szarości nie powinno powodować żadnych zmian w wyniku, co ma tezpotwierdzenie w postaci zgodności hash-a 100%. Największe różnice zaobserwowano dlaodbicia i obrotu obrazu, co dowodzi faktu, że algorytm działa poprawnie pod warunkiem, żeorientacja treści na obrazie jest podobna.

W celu porównania hash-ów, zastosowano autorski algorytm różnicy kodów ASCI.Ciąg znaków (16 elementowa tablica) w każdym z hash-ów, zastąpiono na odpowiadające imkody ASCI. W pętli obliczono różnicę kodów dla każdego znaku, następnie wartość tąznormalizowano (biorąc pod uwagę ilość znaków alfabetu) aby otrzymać procent zgodnościpojedynczego kodu/znaku ASCI. W ten sposób wynikiem porównania znaku „a” i „a”, będzie100%, natomiast „a” i „d” zwróci wynik 80%. Wartości poniżej 50% odrzucano (uznając je za0%), ponieważ wynik taki oznacza, że znaki znajdują się po przeciwnych stronach alfabetu,co można potraktować jako brak zgodności.

2.5.2. Algorytm porównywania ciągów znaków - Levenshtein

W programie porównującym ciągi znaków (comparer.jar), opisanym w punkcie 2.1,wykorzystano algorytm Levenshteina[30] do obliczania „odległości” (czyli różnicy) międzyciągami znaków. Spodziewanym wynikiem jest liczba zmiennoprzecinkowa od 0 do 1, gdzie0 – brak podobieństwa, 1 – duplikat.

Idea algorytmu opiera się na policzeniu różnic pomiędzy dwoma ciągami znaków.Różnice (operacje) definiujemy jako usunięcie znaku, dodanie znaku lub zmianę znaku (wmiejscu, na którym powinien on wystąpić). Wynikiem jest najmniejsza ilość operacji, jakątrzeba wykonać aby jeden ciąg znaków zmienić w drugi. Aby znormalizować tę wartość(potrzebujemy wartości procentowej), dzielimy ilość operacji przez średnią arytmetycznądługości obu ciągów (nazwijmy tą liczbę „x”). Następnie wykonując operacje 1-x,otrzymujemy wynik w postaci stopnia podobieństwa.

Zobaczmy jak algorytm działa w praktyce. Mając 2 słowa „słowo” oraz „słowo”, ilośćoperacji zmiany jest równa zero, co daje 100% duplikatu. Natomiast słowa „słowo” oraz„slowa”, zwrócą wynik w postaci „2”, ponieważ musimy wykonać dwie operacje: zamienić„ł” na „l” oraz „o” na „a”. Spodziewany wynik to 60% podobieństwa.

2.5.3. Algorytm wyszukiwania obszarów w tabeli PHP.

System podczas analizy plików typu Excel (arkusze kalkulacyjne), otrzymuje jakodane wejściowe tablicę PHP z danymi. Tablica ta jest generowana w wyniku uruchomieniamodułu PHPExcel (opisanego w punkcie 2.1).

Tablica podzielona jest na arkusze, natomiast w ramach każdego arkuszu znajduje sięwygenerowana tablica dwuwymiarowa, której początek stanowi pierwsza komórka arkusza(1A), natomiast koniec tablicy stanowi ostatni niepusty element, będący najdalej wysuniętymw prawym dolnym narożniku. Zachowane są więc odległości pomiędzy komórkami orazodległość od początku arkusza aż do pierwszej zapełnionej komórki.


Przykładowa tabela wygenerowana z arkusza (rysunek 3):

Po przetworzeniu pliku, aplikacja otrzyma następującą tabelę:

( ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => a [3] => b [4] => c [5] => d [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => 123 [3] => 123 [4] => 123 [5] => 123 [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => [7] => [8] => [9] => ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => z [7] => x [8] => c [9] => c ), ( [0] => [1] => [2] => [3] => [4] => [5] => [6] => a [7] => 2324 [8] => 2324 [9] => 2324 ))

Algorytm znajdywania obszarów, musi na podstawie otrzymanych danych (tabela),określić jakie występują w niej obszary danych. Obszar danych identyfikujemy jako zbiórdanych oddzielony od pozostałych przynajmniej jedną kolumną lub jednym wierszem. Obszaridentyfikowany jest poprzez: arkusz na którym się znajduje, komórkę startową, komórkękońcową.

Zasada działania algorytmu opiera się na podwójnej pętli (pętla zewnętrzna powierszach, pętla wewnętrzna po kolumnach) oraz tymczasowej liście obszarów. W każdymkroku (w środku obu pętli) sprawdzane jest, czy dana komórka należy do jakiegoś ztymczasowych obszarów. Warunek przynależności polega na porównaniu współrzędnychkomórki ze skrajnymi komórkami w danym obszarze. Jeśli komórka jest styczna z obszarem,zostaje do niego dołączona a główna pętla kontynuuje prace. Jeśli po wykonaniu jednegocyklu pętli wewnętrznej (czyli po odczytaniu całego wiersza), żadna komórka nie zostałaprzydzielona do danego obszaru, zostaje on przeniesiony do listy wynikowej, zwalniającmiejsce na liście tymczasowej.

Przykładowym wynikiem działania tego algorytmu dla danych przedstawionych narysunku 3, jest kolekcja dwóch obszarów:

( [sheet] => Arkusz1 [start_x] => 2 [end_x] => 5 [start_y] => 7 [end_y] => 8),( [sheet] => Arkusz1 [start_x] => 6 [end_x] => 9 [start_y] => 10 [end_y] => 11)

Można zauważyć, że algorytm wyszukał obszary prawidłowo. Warto równieżzauważyć, że numeracja w obszarach jest prowadzona od zera, bo oznacza indeks elementu anie jego numer, jak to jest w przypadku widoku arkusza kalkulacyjnego.


Rysunek 3: Zrzut ekranu arkusza kalkulacyjnego

3. Postawione celeGłównym celem pracy jest opracowanie interaktywnego narzędzia do prezentacji

i wykorzystania badań naukowo dydaktycznych. Realizacja narzędzia wymaga praktycznegowykorzystania najnowszych technologii webowych. Zaprojektowany system powinienpolepszyć jakość i szybkość pracy dydaktycznej.

Utworzony zostanie moduł zarządzania plikami, który zawierał będzie wspólnyinterface dla całej grupy plików, co spowoduje możliwość odczytania zawartości pliku bezwzględu na jego rozszerzenie. Dodatkowo zostanie zaprojektowany algorytm analizowania iporównywania zawartości dokumentów. Opracowana zostanie metoda analizowania danych zarkuszy kalkulacyjnych. Ostatnim celem jest praktyczne wykorzystanie algorytmów hash-ujących.

3. Postawione cele Strona: 18/52

4. Struktura aplikacji

4.1. Zarządzanie użytkownikamiPodstawową funkcjonalnością systemu jest możliwość zarządzania użytkownikami.

Zgodnie z założeniami, system powinien umożliwiać utworzenie listy studentów, którzypóźniej mogą być przydzieleni do projektu. Administrator systemu – uczelnia, musi miećrównież możliwość zdefiniowania pracowników/kierowników projektów.

Użytkownik systemu jest definiowany poprzez: login, imię i nazwisko, adres e-mail,adres IP, user-agent przeglądarki i status. Adres IP i user-agent zapisywane są z myślą omożliwych późniejszych modyfikacjach systemu umożliwiających zabezpieczenie przedwłamaniem z innego komputera. Dodatkowymi parametrami są m.in. data ostatniej wizyty,używana przez moduł komunikacji użytkowników (stwierdzenie, że użytkownik jest „online”,jeśli był aktywny w ciągu ostatnich 5 minut).

Uprawnienia użytkowników zostały zaimplementowane zgodnie z modelem RBAC -Role-Based Access Control, zgodnie z zaleceniami dokumentacji frameworku Yii2,wspierającego ten model. Zakłada on istnienie globalnych ról, przydzielanych doużytkownika, w ramach których występują zezwolenia, na podstawie których systemdecyduje czy pozwolić użytkownikowi na dostęp. Tak więc admin dysponuje odpowiedniarolą, zawierającą zezwolenia nadawania rang, zarządzania panelem, itd. Natomiast zwykłyużytkownik dysponuje tylko rangą umożliwiającą zarządzanie swoimi plikami i wgląd dopodsumowania projektów, w których uczestniczy.

Zarządzanie użytkownikami przedstawiono na rysunku nr 4. Administrator, pracownikdydaktyczny może z poziomu panelu dodać nowego użytkownika oraz m.in. sprawdzić jegoostatnią aktywność. Zarządzanie rangami umieszczono poniżej formularza dodawania.

4. Struktura aplikacji Strona: 19/52

Rysunek 4: Interface - zarządzanie użytkownikami

Rejestracja użytkowników jest również dostępna dla każdego, więc studenci samimogą założyć swoje konto. Formularz dodawania nowego użytkownika (rysunek 5)uproszczono do podstawowych parametrów: nazwa użytkownika, email i hasło.

Po udanej rejestracji, użytkownik może się zalogować, używając danychrejestracyjnych. Opcja „zapamiętaj mnie”, widoczna na rysunku 6, przedłuża sesjeużytkownika (długość życia ciasteczka) do 30dni, co powoduje, że użytkownik nie musi sięlogować za każdym razem gdy wchodzi na stronę.

Oba omówione formularze: rejestracji i logowania, są formularzami publicznymi,dostępnymi z zewnątrz. Koniecznym więc było wprowadzenie odpowiedniegozabezpieczenia, aby wykluczyć włamanie do serwisu lub podszycie się pod innegoużytkownika.

Takim zabezpieczeniem jest ochrona przed CSRF[31] - Cross-Site Request Forgery(fałszowanie zapytania użytkownika), czyli sztucznym wykonaniem akcji zapisaniaformularza, czego efektem może być kradzież danych użytkownika lub tez całego konta.Ochrona przed tego typu atakami polega na każdorazowym wygenerowaniu unikalnego hasha


Rysunek 5: Rejestracja nowego użytkownika

Rysunek 6: Formularz logowania

przez serwer, który jest następnie wysyłany do użytkownika jako ciasteczko oraz zapisywanydo formularza w postaci pola ukrytego (typu hidden).

Podczas akcji wysłania formularza, serwer sprawdza zgodność hasha z ciasteczkiem,danymi formularza i bazą danych. W ten sposób otrzymujemy gwarancje, że dany formularzzostał wysłany w pełni świadomie przez użytkownika. Zabezpieczenie przed CSRF ma teżinne zalety, tzn. wykorzystuje pliki Cookie przeglądarki, co stanowi zabezpieczenie przedsporą częścią złośliwych skryptów (boty), które generują sztuczny ruch, między innymipoprzez wysyłanie formularzy ze spamem.

4.2. Zarządzanie projektami

Rysunek 7 przedstawia zakładkę zarządzania projektami. Odpowiedni rangąużytkownik (administrator, pracownik), może dodać nowy projekt, przydzielając do niegoużytkowników systemu. Oczywiście po dodaniu projektu, można go edytować, dodającnowych lub usuwając obecnych użytkowników.

Projekt jest definiowany poprzez nazwę, datę rozpoczęcia i zakończenia, dodatkowyopis, przypisanych użytkowników i status. Każdy projekt otrzymuje z chwilą dodaniaunikalne ID, które następnie jest składową grupy (rangi) projektowej, do której zostająprzydzieleni wszyscy uczestnicy projektu.

Przynależność do grupy umożliwia zarządzanie plikami, podgląd statusu projektu, czyrozmowę z jego członkami. Każdy użytkownik ma możliwość wglądu do wszystkichprojektów, do których został przydzielony, służy do tego specjalne pole typu „select”,znajdujące się w górnym panelu (rysunek 8):


Rysunek 7: Interface - zarządzanie projektami

Rysunek 8: Wybór projektu przez użytkownika

Widok szczegółowy pojedynczego projektu pokazano na rysunku 9. Po prawej stronieznajduje się formularz umożliwiający edycje projektu, natomiast po lewej podstawowe daneprojektu oraz listę użytkowników, wraz z ich plikami.

Listę plików danego użytkownika podzielono na 2 kolumny: „Pliki” oraz „Plikiwspólne”. Pliki wspólne to takie pliki, które posiadają „rodzica”, czyli inny plik, będącydodany do systemu wcześniej oraz mający tą samą zawartość (suma kontrolna md5) orazwagę, czyli mówiąc inaczej duplikaty. Rysunek 9 przedstawia sytuacje, w której użytkownik„Krzysztof K” (na samej górze), dodał do systemu kopie plików, które wcześniej umieścił już„Piotr Jaglany” (na samym dole).

W celach poprawy estetyki projektu, dodano również ikonki do plików, aby m.in.łatwo można było rozróżnić obraz od dokumentu tekstowego.


Rysunek 9: Interface - widok szczegółowy projektu

4.3. Zarządzanie plikamiUżytkownik systemu ma możliwość dodania plików w ramach danego projektu. Może

to zrobić na 2 sposoby:• skorzystać z formularza uploadu w panelu,• wysłać email z załącznikami na adres podany przez prowadzącego

Omówienie sposobu z e-mail znajduje się w dalszej części pracy, natomiast rysunek 10przedstawia formularz uploadu pliku. Plik należy dodać do odpowiedniego folderu – abyprzypisać plik do projektu, plik powinien znaleźć się w folderze związanym z projektem.Zarządzanie folderami znajduje się pod formularzem, natomiast w chwili utworzenia projektulub przypisania użytkownika do projektu, automatycznie na jego koncie tworzony jest folderpowiązany z projektem.

Użytkownik w danej chwili może wysłać plik tylko do jednego folderu, dlategowcześniej musi ten folder odznaczyć. Z pomocą przychodzi funkcja systemu, polegająca naautomatycznym wybraniu folderu projektu, którego użytkownik wybierze w górnym menu(wchodząc do zakładki upload, użytkownik ma domyślnie wybrany folder projektu). Plikoczywiście jest przypisany ściśle tylko do jednego folderu, również warto odnotować, żeoprócz samego użytkownika, tylko administrator lub pracownik/prowadzący zajęcia majądostęp do jego plików.

Plik jest reprezentowany poprzez: unikalne ID, nazwę, typ, datę dodania, folder,informacje i status. ID pliku jest jego nazwą na serwerze a generuje się w chwili dodawaniarekordu do bazy i zawiera w sobie na tyle szczegółowy zapis o dacie, aby nie było możliwedodanie dwóch lub więcej plików o tym samym ID. Jest to zabezpieczenie przed zdarzeniem,w którym wiele użytkowników wysyła plik o tej samej nazwie, oraz przed występowaniem wnazwie pliku znaków specjalnych. Proces analizy pliku, został szczegółowo omówiony wdalszej części pracy.

Proces uploadu pliku pokazano na rysunku 11, na którym można zobaczyćsumaryczny pasek postępu dla wszystkich plików, oraz osobny dla każdego z plików. Nowe


Rysunek 10: Interface - zarządzanie plikami

pliki można dodawać trakcie uploadu, natomiast już dodane można zatrzymywać (anulować)lub usuwac z listy.

Kolejną możliwością dodawania pliku do systemu jest wysłanie e-maila. W pierwszejkolejności administrator lub osoba przydzielona jako menager projektu, musi wprowadzićdane do skrzynki e-mail do specjalnego pliku konfiguracyjnego, tak aby system mógłzalogować się na skrzynkę. Po utworzeniu w niej dwóch folderów: „Accepted” oraz„Rejected”, skrzynka jest gotowa do obsługi przez system.

Proces wygląda następująco: użytkownik wysyła maila z załącznikami na wskazanyadres, wpisując jako temat wiadomości nazwę projektu (w przypadku niezgodności tematu,domyślną akcją jest przydzielenie plików do najnowszego projektu). System odczytujewszystkie nieprzeczytane maile i jeśli znajdzie e-mail nadawcy w bazie, próbuje wyszukaćprojekt zgodny z tematem wiadomości i z uprawnieniami użytkownika.

Jeśli procedura zakończy się powodzeniem, załącznik zostanie zapisany i dopisany doodpowiedniego folderu na koncie użytkownika, czego końcową fazą jest odznaczeniewiadomości jako przeczytanej i przeniesienie do folderu „Accepted”. W przeciwnymwypadku system ignoruje załączniki a wiadomość przenosi do folderu „Rejected”, gdzieprowadzący może w każdej chwili zweryfikować poprawność filtrowania e-maili. Widokprzykładowej wiadomości e-mail wraz załącznikami, przedstawiono na rysunku 12.


Rysunek 11: Pasek postępu uploadu pliku

Rysunek 12: Widok skrzynki e-mail z poziomu systemu

Po pomyślnej weryfikacji e-maila, pliki traktowane są na równi z tymi dodanymipoprzez formularz, więc są widoczne w panelu i przechodzą standardową procedurę analizy(opisaną w punkcie 4.3.1).

4.3.1. Wstępna analiza dodanego pliku

Każdy dodany przez użytkowników plik, musi przejść przez szereg metodweryfikacyjnych, tworzący pewien ciąg.

Pierwszą czynnością jest uruchomienie programu „clamscan” na pliku, więc skanantywirusowy. Spodziewany wynik to pusty wiersz. W przypadku otrzymania wierszawynikowego, który zawiera słowo „FOUND” (oznaczającego znalezienie jakiegokolwiekzagrożenia), plik jest automatycznie usuwany a proces walidacji się kończy.

Po pomyślnym teście bezpieczeństwa, system pozwala na otwarcie pliku i jegoanalizę. W tym celu został utworzony dedykowany program napisany w JAVA –fileCharcker.jar (opisany we wstępie). Program weryfikuje rozszerzenie pliku, odczytującminetype i jeśli napotka różnice, modyfikuje rozszerzenie na poprawne (np. plik JPEGmający rozszerzenie gif, będzie zmieniony na *.jpg).

Po upewnieniu się, że plik jest poprawny, odczytywane są wszystkie jego meta-tagi,obliczana jest suma MD5 oraz wszystkie dodatkowe wartości jak data modyfikacji czy waga.Dzięki zaawansowanym możliwością użytego modułu, możliwe jest odczytanie takich danychjak ilość stron w pdf, stopień kompresji plików graficznych czy tagi ID3 w plikach audio.Dane są oczywiście zapisywane do bazy.

Kolejny etap, bardzo istotny pod względem optymalizacji miejsca na serwerze, jestproces szukania „100 procentowych duplikatów” duplikatów, czyli takich plików, co doktórych nie ma wątpliwości, że mają taką samą zawartość. Stwierdzenie, że wystarczywyszukać plików o tej samej nazwie jest oczywiście błędne, więc w algorytmie brane są poduwagę takie parametry jak: waga pliku, minetpe (rozszerzenie) i suma MD5 (widzimy, żenazwa nie jest w ogóle brana pod uwagę, związane jest to również z omawianym dalejzagadnieniem generowania nowych ID). Na podstawie tych 3 wartości, algorytm stwierdza,że plik jest lub nie jest duplikatem a jeśli nim jest, trzeba go odpowiednio odznaczyć w bazie iusunąć, pozostawiając jedynie „link symboliczny” do rodzica.

Generowanie ID dla pliku, czyli jego nazwy, pod jaką jest przechowywany w kataloguna serwerze, polega na wywołaniu metody „uniqid”, generującej hash na podstawie dokładnejdaty, z dokładnością co do mikrosekundy. Wyklucza to możliwość wygenerowania dwóchidentycznych hash-tagów. Do wygenerowanego hash-a doklejane jest rozszerzenie i takpowstaje nowe ID pliku, czyli jego nazwa.

Po wstępnym uporządkowaniu informacji o pliku, możemy przejść do obsługisytuacji, w której plik jest archiwum. Dedykowany skrypt, napisany w Perl, biorąc pod uwagęrozszerzenie pliku (zweryfikowane), uruchamia odpowiedni program, który zawartośćarchiwum umieszcza w specjalnie przygotowanym wcześniej pustym katalogu. Pozakończeniu pracy, algorytm generuje listę wszystkich plików w tym katalogu i każdy z nichdodaje na nowo do bazy, traktując na równi z plikami wysłanymi przez użytkownika dosystemu.


4.4. Komunikacja synchroniczna i asynchronicznaWażnym elementem pracy przy projekcie jest komunikacja pomiędzy uczestnikami.

Przykładem komunikacji synchronicznej jest chat (rysunek 13). Jego zastosowanie wprojekcie można zauważyć w chwili, gdy np. prowadzący musi wysłać ważną wiadomość dlacałej grupy, lub też jeden z jego członków chce znaleźć osoby chętne do przejęcia części jegoobowiązków.

Wykonanie chatu od strony technicznej było znacznie ułatwione, dzięki technologii „2way binding” dostarczanej przez framework AngularJS. Przechowywany w pamięci obiekt wjavascript jest na bieżąco wyświetlany na stronie w formie wiadomości, natomiast kontrolermusi jedynie zadbać o cyklicze uaktualnienie danych.

Jednak są przypadki, gdy użytkownicy chcą porozumieć się między sobą zzachowaniem minimum prywatności, sytuacja może dotyczyć np. przesłania przez studentaprośby o ponowne sprawdzenie jego pracy lub pytanie o poprawę oceny. Z pomocąprzychodzi moduł komunikacji asynchronicznej – prywatne wiadomości (rysunek 14).

Przykład pobierania wiadomości przekazywanych później jako obiekty JSON dowarstwy widokowej, został omówiony szczegółowo w punkcie „2.3.1. ActiveDataProvider”.


Rysunek 13: Chat - komunikacja synchroniczna

Rysunek 14: Prywatne wiadomości - komunikacja asynchroniczna

4.5. Analiza dokumentówAnaliza dokumentów, czyli plików PDF, doc/x (Word) czy odt (LibreOffice), stanowi

jeden z ważniejszych elementów w aplikacji. Początkowo każdy dokument musi przejść przezstandardową procedurę wstępnego przetwarzania pliku, która została opisana w punkcie 4.3.1.

Kolejnym etapem jest „normalizacja” zawartości, czyli utworzenie wspólnegointerface dla różnych typów plików. Odbywa się to poprzez użycie programu Unoconv[11],opisanego we wstępie pracy, czego efektem jest plik wynikowy PDF. Oczywiście konwersjanie jest potrzebna w przypadku, gdy plikiem wejściowym jest już PDF, więc krok ten jestwtedy pomijany.

Aby system mógł odczytać poprawnie zawartość dokumentu, potrzebna jest jeszczekonwersja pliku PDF na kod HTML, co jest możliwe dzięki programowi Pdftohtml[10]. Powykonaniu tej czynności, otrzymujemy plik html z bardzo uproszczonym stylem CSS, zktórego wykorzystywana jest tylko wartość rozmiaru tekstu, oraz pliki obrazów, zapisane wkatalogu wyjściowym. Tymczasowy plik PDF, który powstał na skutek konwersji, może byćw tym momencie usunięty.

Końcowym etapem odczytywania dokumentu jest wygenerowanie odpowiedniejstruktury w PHP, przechowującej zawartość dokumentu. W tym celu założono, że dokumentskłada się z bloków tekstu oraz napisów dodatkowych, wchodzących w skład określonychparagrafów, które to paragrafy można przypisać do konkretnego tytułu (rozdziału).Dodatkowym kryterium dla nazw rozdziałów jest ich numeracja oraz wytłuszczenie w postacipogrubienia lub zmiany stylu na „nagłówek” (co sprowadza się do zmiany wielkości czcionkii pogrubienia).

Otrzymany dokument html zawiera jedynie informacje o pogrubieniu czcionki i jejrozmiarze, więc zauważono, że tekst o najmniejszym rozmiarze można zaklasyfikować jakonapisy dodatkowe (np. podpisy obrazków, tabel), natomiast tekst pogrubiony, jakopotencjalne tytuły rozdziałów. Pozostały tekst, o domyślnej wielkości czcionki, stanowigłówną treść rozdziału.

Moduł analizy dokumentu zaczyna się od wybrania wszystkich pogrubionych blokówtekstu (blokiem są przeważnie pojedyncze zdania zakończone przejściem do nowej linii lubcałe akapity). Następnie sprawdzane jest, czy w danym bloku występuje numeracja (cyfry zewentualną kropką w środku i/lub na końcu). Zrealizowano to poprzez utworzenie wyrażeniaregularnego w postaci:

function parseHeader($header) { $newHeader = ''; if ( preg_match('/^\s*[0-9\.]+\s*\.\s*(.+)$/i', $header, $m) ) { $newHeader = strtolower(trim($m[1],' .')); } return $newHeader;}

Jeśli funkcja zwróci wynik, zwrócony blok tekstu traktowany jest jako tytuł rozdziału(zapisywana jest wartość oryginalna bloku tekstu i wartość zwrócona przez funkcję).Zwracany napis jest już wstępnie przetworzony, to znaczy usunięta jest jego numeracja awszystkie jego litery zamienione są na mich „małe” odpowiedniki (lowercase).

Mając już wszystkie tytuły rozdziałów, można zacząć proceduręprzyporządkowywania tekstu do owych rozdziałów. Dzieje się to poprzez pętle po wszystkichblokach tekstowych i przypisywania ich do „tymczasowego” rozdziału, który zostajewybrany, gdy dany blok jest zgodny zawartością z wartością oryginalną nazwyktóregokolwiek z rozdziałów.


Najlepiej będzie pokazać tę procedurę na przykładzie.

Rysunek 15 przedstawia fragment przetworzonego dokumentu, widzimy w nim dwatytuły rozdziałów oraz kilka zwykłych bloków tekstu. Po odczytaniu przez moduł nazwrozdziałów (każdy z nich jest pogrubiony i zawiera liczbę z kropką na początku, więc zostaniezaklasyfikowany jako nazwa rozdziału), uruchamiana jest pętla po wszystkich blokach tekstu:warunki początkowe: pusty rozdział „tymczasowy”

• analiza bloku „1” - wykryto zgodność z tytułem rozdziału, przypisanie tego rozdziałujako „tymczasowego” i przejście do kolejnej iteracji pętli,

• analiza bloku „2” - stwierdzono, że zawartość bloku nie pasuje do żadnego zrozdziałów, dodatkowo rozdział „tymczasowy” nie jest pusty (not NULL), więcprzypisano do niego blok,

• analiza bloku „3” , analogicznie jak dla „2”, został on przypisany do rozdziałutymczasowego,

• analiza bloku „4”, stwierdzono, że zawartość bloku jest zgodna z jednym z tytułówrozdziałów, zmieniono więc wartość zmiennej „rozdział tymczasowy” na nowy blok,natomiast poprzednia wartość została przypisana wraz z całą zawartością poprzedniododanych bloków jako osobny rozdział,

• analiza bloku „5” i dalszych: analogiczna sytuacja jak w przypadku „2”.

Warto jeszcze zwrócić uwagę na moment dodawania danego bloku tekstu do rozdziału(np. blok „2”). Przypisanie polega na dodaniu nowego elementu do tymczasowej tablicy,której kluczem jest rozmiar tekstu całego bloku. W ten sposób oddzielamy w danym rozdzialebloki tekstu będące np. podpisami obrazków, od realnej zawartości.

Kolejną rzeczą, na którą trzeba zwrócić uwagę to fakt, że mogą występować blokitekstu nie będące w żadnym rozdziale, np. napisy na stronie tytułowej, czy dane osobowebędące jeszcze przed tytułem pierwszego rozdziału, czy też nazwa samego dokumentu. Owenapisy są przydzielane do tak zwanego „pustego rozdziału”, który nie bierze udziału w dalszejanalizie, ze względu na założenie, że wartościowa treść znajduje się tylko w środkurozdziałów.

W bloku tekstu mogą znajdować się znaki specjalne, które będą konwertowane doUTF-8 (np. symbole łacińskie), ale obiekty zewnętrzne, takie jak wykresy czy obiekty„OLE”, formuły, wtyczki, czy inne niestandardowe elementy dokumentu, które silnie zależąod programu biurowego, mogą nie zostać prawidłowo odczytane przez parser HTML, co


Rysunek 15: Bloki tekstu pokazane w widoku całego dokumentu

będzie skutkowało różnego rodzaju nieprawidłowościami, np. tabela może zostać odczytanajako grafika a wykres może być zapisany w postaci tekstowej jako legenda i opisy osi.Zauważono jednak, że niezgodności te nie występują często, czyli można założyć, żewiększość obiektów (tabele, wykresy) jest odczytywana prawidłowo.

Problem ten nie dotyczy obrazów, więc wszystkie pliki graficzne są odczytywanepoprawnie i system może je dalej przetwarzać.

Na obecnym etapie pracy, system dysponuje przetworzoną wersją dokumentu, gdziewszystkie obiekty zewnętrzne/niestandardowe są w postaci graficznej a sama treśćdokumentu, rozdzielona jest na rozdziały i przypisana do danej wielkości czcionki. Możnawięc przystąpić do porównywania dwóch dokumentów ze sobą.

4.6. Porównywanie dokumentówPo udanej analizie dokumentu (podrozdział 4.5), system zaczyna prace nad szukaniem

podobieństw między dokumentami. Procedura porównywania dokumentów polega nawybraniu ze wszystkich plików danego użytkownika tych, które są wspierane przez program„Unoconv[11]”, opisany we wstępie, lub są już w formacie PDF.

Następnie generowana jest lista porównań, gdzie każdy z plików danego użytkownikajest porównywany z plikami innych użytkowników. Poniżej omówiony zostanie procesporównywania dwóch dokumentów ze sobą.

Pierwszym etapem jest przygotowanie ciągu znaków do porównania. Wiemy już, żetekst jest w kodowaniu UTF-8, co wyklucza występowanie w nim nieobsługiwanych znakówz innego kodowania. Aby polepszyć efekty porównywania, wprowadzono mechanizmfiltrowania znaków specjalnych, konwertując wszystkie znaki do kodów standardu„ASCI[32]”, który dopuszcza jedynie 256 znaków alfabetu. Efektem konwersji jest pozbyciesię np. polskich znaków, niestandardowych znaków cytowania czy innych znaków niebędących główną zawartością danego rozdziału. Kod funkcji wykonującej tą czynnośćprzedstawiono poniżej:

function simpleText($text) { $text = transliterator_transliterate('Any-Latin; Latin-ASCII;', $text)

// remove Windows-1252 symbols like "TradeMark", "Euro"... $text = preg_replace('/[^(\x20-\x7F)]*/','', $text);

return strtolower($text); }

Widzimy, że dodatkowo usuwane są symbole występujące w kodowaniu „Windows-1252”, które jest używane powszechnie w dokumentach. Wynikowy ciąg znaków, możnaokreślić mianem „bezpiecznego”, czyli takiego, który daje gwarancje zawierania jedynienajważniejszego tekstu i może być dalej przetwarzany. Ostatnim etapem przetwarzania ciąguznaków jest przepuszczenie przez filtr „lowercase” więc zamiana wszystkich liter na małe.

Przykład działania funkcji „simpleText”:• dane wejściowe: „… Przykładowy – CIĄG znaków.”• dane wyjściowe: „… przykladowy - ciag znakow.”

Powyższe formatowanie tekstu jest potrzebne ze względu na chęć szukaniapodobieństw w samej treści z pominięciem ewentualnych „zakłóceń” w postaci dodatkowychznaków czy porównywania małych liter z dużymi.

Obowiązkowym elementem wymaganym przy porównywaniu tekstu jest słowniksynonimów. Na potrzeby pracy wykonano podstawową tablicę, w które klucze to słowa lub


znaki „główne”, natomiast elementami tablicy danego klucza są synonimy tego klucza. Funkcja zastępująca synonimy słowami głównymi jest następująca:

public $synonimy = [ 'i' => ['oraz','takze'], 'zadanie' => ['cwiczenie','labolatorium'], 'uruchomic' => ['wlaczyc','odpalic'], // ...];

public function parseSynonims($text) { if (!empty($this->synonimy)) foreach ($this->synonimy as $k=>$s) { if (!empty($s)) foreach ($s as $s_word) { $text = preg_replace("/(\s+|\A)($s_word)(\s+|\Z)/i", "$1$k$3", $text); } } return $text;}

Strukturę słownika przedstawiono jako zmienną „$synonimy”, gdzie umieszczonoprzykładowe słowa z kluczami. Funkcja używając wyrażenia regularnego, odszukuje słowaumieszczone w tablicy (jako wartość słowa głównego) i zastępuje je kluczem. Wyrażenieregularne użyto w celu zastąpienia tyko pojedynczych słów a nie ciągów znaków.Przykładowo ciąg znaków „iloraz działania wynosi”, mógłby być zastąpiony na „ili działaniawynosi”, co jest działaniem błędnym. Przed słowem musi wystąpić biały znak (\s+) lubpoczątek linii (\A), analogicznie po słowie musi być biały znak lub koniec linii (\Z).

Przykład działania słownika synonimów: ciąg znaków „iloraz równania oraz wynik,także suma..” zostanie zastąpiony na: „iloraz równania i wynik, i suma”.

Warto zauważyć, że w ciągu użyto polskich znaków, natomiast słownik zawiera tylkoich odpowiedniki (także – takze). Jest to związane z tym, że ciąg znaków przez funkcjąszukającą synonimów, przechodzi przez filtrowanie wszystkich znaków do prostej postaciASCI, w której nie ma znaków specjalnych. Dodatkowo filtr „to lower case” zwalnia zkonieczności używania w słowniku dużych liter.

Mając już wstępnie przetworzony ciąg znaków, system może zacząć procę, czyliporównywanie całych dokumentów. Wymóg stosowania rozdziałów we wszystkichdokumentach, wiąże się również z pewną segregacją treści. We wstępnie zakłada się, żewystępują dane teoretyczne, w rozdziale z wynikami spodziewamy się tabel, obrazów,wykresów, natomiast we wnioskach podsumowania pracy i kilku unikalnych zdańkomentarza. Rozdziały mogą więc posiadać różny poziom podobieństwa, wstęp teoretycznymoże być zbliżony do siebie w większej ilości prac, ale wnioski muszą już być unikalne dlakażdej pracy.

Zdecydowano się więc na porównywanie tylko samych rozdziałów w obu pracach anie całego dokumentu. Tak więc wstęp pracy/dokumentu/sprawozdania „A”, będzieporównywalny tylko ze wstępem dokumentu „B”. W tym celu potrzebne jest połączenie tychsamych rozdziałów ze sobą. Warto też odnotować, że numeracja np. wstępu może być różna,na przykład student 1 może nazwać rozdział „1. Wstęp”, ale inny zdecyduje się umieścić podjedynką informacje o pracy, a wstęp podpisze jako „2. Wstęp”. Algorytm musi połączyćbezbłędnie oba rozdziały. W tym celu zastosowano filtr rozdziałów opisany w punkcie „4.5”oraz opisane wyżej formatowanie. W obu przypadkach porównywalnym ciągiem znakówbędzie: „wstep”.

Konsekwencją tego typu rozwiązania jest fakt, że niektóre rozdziały w danej pracymogą zostać nie sprawdzone. Jednak głównym zadaniem systemu jest pomoc przyznajdywaniu duplikatów, dlatego umieszczenie dodatkowego rozdziału w pracy nie musi byćanalizowane, bo świadczy ono o unikalności dokumentu.


Po połączeniu ze sobą tytułów rozdziałów w dokumentach, następuje uruchomieniealgorytmu porównywania całej zawartości rozdziału. Treść rozdziałów, tak jak i ich tytułuzostaje przepuszczona przez filtrowanie „simpleText” oraz przesłane do funkcji zwracającejprocentowy stopień podobieństwa obu tekstów.

Wynikiem pracy porównywania dokumentów jest więc lista rozdziałów z przypisanądo każdego z nich kolejną listą, zawierającą elementy informujące o „adresie” do innegodokumentu, jego rozdziale, oraz liczbie będącej procentem duplikatu.

Na rysunku 16 widzimy prezentacje wyników porównania dwóch takich samychdokumentów, ale w jednym z nich zmieniono zawartość rozdziału „cel ćwiczenia” na inną,oraz dokonano niewielkich zmian w rozdziałach: „kod źródłowy i technologia” oraz „opiswykonania ćwiczenia i użytych algorytmów”. Widzimy, że zgodność rozdziału „celćwiczenia” jest zerowa, więc oba teksty można uznać za unikalne. Natomiast rozdział„podsumowanie i wnioski” został oznaczony jako stu procentowy duplikat, co też widać narysunku – teksty są identyczne. Pozostałe dwa rozdziały, w których dokonano niewielkichzmian, zostały rozpoznane w 75% jako unikalne.

Oprócz tekstu, w dokumencie występują również pliki graficzne. Wszystkie obrazy sązapisywane i porównywane z obrazami drugiego dokumentu. W przypadku grafiki, nie możnabyło jednoznacznie stwierdzić, które konkretnie obrazy powinny być ze sobą porównywane,dlatego domyślnie zastosowano tutaj zasadę „każdy z każdym”. Przeciwną zasadęzastosowano w przypadku porównywania rozdziałów, gdzie brano pod uwagę tylkoodpowiednik danego tytułu z sąsiedniego dokumentu.

Nawet, gdy obraz jest w 100% zgodny z aktualnie porównywanym z sąsiedniegodokumentu (czyli jest kopią – duplikatem), nie można stwierdzić, że poza nim w dokumencienie znajduje się również inny obraz, który należy przeanalizować, ze względu napodobieństwo. Oznacza to, że liczba porównań obrazów jest zdecydowanie większa niżrozdziałów – więcej wyników w postaci procentowej będzie widoczne w panelu.

Algorytm szukania podobieństw obrazów omówiono w punkcie „2.5.1”, przy okazjiwyjaśniania zasady działania algorytmu „pHash”.


Rysunek 16: Porównanie dokumentów

Wygląd wyniku porównania całego dokumentu pokazano na rysunku 17. W prawymgórnym rogu umieszczono tagi projektu, w ramach którego użytkownik wysłał danydokument. Tagi czyli słowa kluczowe, stanowiące opis projektu, są dodatkowąfunkcjonalnością, mającą na celu szybką identyfikacje dokumentu. Każdy z tagów jest osobnosprawdzany pod względem występowania w tekście. Umieszczając w tagach metodyrozwiązania danego problemu, osoba sprawdzająca, może zobaczyć, które metody zostałyużyte w danym dokumencie/sprawozdaniu.

Nie daje to oczywiście gwarancji użycia danej metody, bo wyrażenie „w mojej pracychciałem użyć metodę złotego podziału, ale ostatecznie zdecydowałem się na metodęFibonacciego”, spowoduje oznaczenie tagów „złotego podziału” oraz „fibonacciego”, co nieoznacza, że autor użył obu metod. Jednak dla części przypadków, sprawdzanie tagów możeokazać się przydatne.

4.7. Porównywanie arkuszy kalkulacyjnychOprócz dokumentów, system analizuje i porównuje ze sobą również arkusze

kalkulacyjne. Po wybraniu tych plików użytkownika, które posiadają rozszerzeniazidentyfikowane jako arkusz kalkulacyjny (xls, xlsx, ods), następuje procedura szukaniapodobieństw, składająca się z kilku etapów:

• wstępna analiza zawartości,• identyfikacja i serializacja obszarów danych,• szukanie podobieństw.

Analogicznie jak w przypadku dokumentów, każdy plik arkusza musi przejść przezwstępną analizę zawartości (opisaną w punkcie 4.3.1). Na tym etapie najważniejsza jestidentyfikacja typu (minetype) i upewnienie się, że rozszerzenie pliku jest poprawne.

Gdy plik zostanie pomyślnie odczytany w postaci tabeli PHP, można przystąpić doidentyfikacji obszarów danych (procedura opisana w punkcie 2.5.3). Przykładowy wynikdziałania tej procedury:


Rysunek 17: Wynik porównywania dokumentu

Array( [0] => app\service\xlsParser\xlsArea Object ( [sheet] => Arkusz1 [start_x] => 2 [end_x] => 5 [start_y] => 7 [end_y] => 8 [md5] => 052d39918ddaff7856bd8245799eb917 )

[1] => app\service\xlsParser\xlsArea Object ( [sheet] => Arkusz1 [start_x] => 6 [end_x] => 9 [start_y] => 10 [end_y] => 11 [md5] => cb37c58dd31aa987749d3c170c0489f8 )

)

Każdy obiekt obszaru („app\service\xlsParser\xlsArea”), posiada opróczwspółrzędnych tabeli, hash md5, który pozwala na bardzo szybką identyfikacje zbiorudanych. Jego rozwinięciem, czyli danymi wejściowymi do algorytmu md5, jest zapis,zawierający całość danych danego obszaru w formacie CSV. Kod CSV jest równieżgenerowany w przypadku konieczności porównywania obszarów algorytmem stosowanympodczas szukania podobieństw w dokumentach - „Levenshtein” (opisany w punkcie 2.5.2).

Do zapisu zawartości, można było użyć dwóch metod: CSV i JSON. Wybrano CSV zewzględu na zwięzłość zapisu. JSON dodaje dodatkowe znaki jak: „[ i ]”, „{ i }”, którezgodnie z zasadami działania algorytmu Levenshtein traktowane są jako „dodatkowaoperacja”, co może zniekształcić wynik, poprzez zawyżanie ilości znaków potrzebnych dozgodności ciągów. Porównanie zapisów JSON i CSV przedstawiono pod rysunkiem nr 18:

// *** obszar 1 – CSV *** //a,b,c,d123,123,123,123

// *** obszar 1 – JSON *** //[["a","b","c","d"],[123,123,123,123]]

// *** obszar 2 – CSV *** //z,x,c,ca,2324,2324,2324

// *** obszar 2 – JSON *** //[["z","x","c","c"],["a",2324,2324,2324]]

Podsumowując, zapis CSV jest wykonywany w celu porównywania obszarów międzysobą, natomiast hash z zapisu CSV w postaci md5, służy do szybkiego wyszukiwaniaduplikatów.


Rysunek 18: Przykładowa tabela z dwoma obszarami danych

Ostatnim parametrem identyfikującym dany obszar jest „label” czyli lista wszystkichnapisów (w postaci CSV), występujących w danym obszarze, ale tylko w pierwszej kolumnielub pierwszym wierszu. Celem takiej operacji jest uzyskanie nagłówka tabeli, aby późniejmóc wykorzystać go jako wyznacznik decydujący o podobieństwie obszarów (gdy tylko jedenz ich wymiarów będzie zgodny).

W przypadku, gdy użytkownik doda jeden wiersz do istniejącej tabeli, suma kontrolnabędzie inna, rozmiar również, ale jeden wymiar tabeli (ilość kolumn), będzie zgodny, więc„label” będzie miał decydujący wpływ na oznaczenie obszarów jako zgodnych, czyli takich,które jest sens dalej porównywać.

Zasada porównania obszarów w arkuszach kalkulacyjnych jest analogiczna doporównywania rozdziałów w dokumentach. Poszczególny obszar z jednego arkuszasprawdzany jest pod względem zgodności z pozostałymi obszarami drugiego arkusza, dopierowtedy przeprowadzana jest procedura szukania podobieństw na podstawie zawartości.

Zgodność obszarów ustalana jest na podstawie schematu:• sprawdzenie wymiaru (szukam obszarów przynajmniej jednym zgodnym parametrze –

szerokość lub wysokość),• sprawdzam sumę kontrolną md5, jeśli jest zgodna – zwracam prawdę,• sprawdzam „label” (nagłówek tabeli), jeśli jest zgodny, zwracam prawdę,• w przeciwnym wypadku zwracam fałsz.

Zwrócenie prawdy oznacza powiązanie obszarów ze sobą, analogicznie do powiązaniarozdziałów w dokumentach. Zwrócenie fałszu to uznanie, że obszary są różne i nie trzebaporównywać ich zawartości.

Powiązane obszary są porównywane ze sobą poprzez uruchomienie algorytmuLevenshtein-a na danych CSV. Procentowy wynik określa stopień duplikatu obszaru.Spodziewany wynik to wartości mniejsze od 100% (duplikat powinien być zidentyfikowanypoprzez zgodność sumy kontrolnej md5), oraz większe od 0% (co najmniej „labele” musząbyć zgodne).

Przykład działania porównywania arkuszy kalkulacyjnych, obejmuje trzy pliki, każdyzawierający przynajmniej jeden obszar. Pierwszy plik (rysunek 19) posiada dwie tabele otakich samych wymiarach, ale innych nagłówkach.

Drugi plik zawiera dwa arkusze, w jednym tabelka z większą ilością danych (rysunek20), natomiast w drugim arkuszu nagłówek tabeli umieszczono pionowo (rysunek 21).


Rysunek 19: Arkusz kalkulacyjny - plik 1

Ostatni, trzeci plik (rysunek 22), zawiera duplikat tabeli z pliku 2 (rysunek 20), oraztabelę w takim samym układzie oraz nagłówkiem jak w pliku 2 (rysunek 21), ale z innymidanymi.

Wynik działania modułu porównywania arkuszy, przedstawiono na rysunku 23. Dlakażdego arkusza istnieje możliwość podglądu danych, poprzez rozwinięcie (kliknięcie) tytułuobszaru. Podgląd ten uruchomiono dla pierwszego z góry obszaru.


Rysunek 20: Arkusz kalkulacyjny - plik 2 - arkusz 1

Rysunek 21: Arkusz kalkulacyjny - plik 2 - arkusz 2

Rysunek 22: Arkusz kalkulacyjny - plik 3

Przy każdym obszarze są widoczne oznaczenia określające stopień duplikatu z innymobszarem, który został uznany za zgodny. Pierwsza tabela (rysunek 19 po lewej stronie)została porównywana tylko z tabelami o nagłówku „a, b, c, d”. Takich tabel, biorąc poduwagę wszystkie pliki, jest jeszcze dwie, w obu pozostałych plikach, ale występują tam zinnymi danymi. Algorytm obliczył, że zgodność pierwszej tabeli w stosunku do pozostałychwynosi 11%.

Aby zidentyfikować obszar, do którego odnosi się oznaczenie procentowe widoczneobok tytułu obszaru, wystarczy nakierować myszką na pole z liczbą procentów. Pojawiającysię komunikat zawiera informacje o użytkowniku oraz konkretnym arkuszu, z którymporównywano dane. Komunikat ten widoczny jest na rysunku 24. Plik „wynik3.xls” zawierarównież tabelę z nagłówkiem „z, x, c, c”, który nie został znaleziony w żadnej innej tabeli,jest więc unikalny i nie wymaga porównań – nie zawiera oznaczeń procentowych.


Rysunek 23: Porównanie arkuszy kalkulacyjnych

Plik drugi i trzeci (rysunki 20 i 22), zawierają identyczną tabelę, więc posiadająatrybuty „100%” oznaczające duplikat wśród obszarów innych plików.

Natomiast tabele z takim samym pionowym nagłówkiem: „wyniki2.xls - Arkusz2 - 2 x5”, oraz „wyniki1 - Arkusz1 - 2 x 5”, ale zawierające różne dane, zostały porównane zwynikiem 55% podobieństwa.


Rysunek 24: Porównanie arkuszy kalkulacyjnych - informacje szczegółowe

5. Wyniki i analiza pracy systemu

5.1. Scenariusz testu systemu.Test sprawności systemu będzie wykonany zgodnie z poniższym scenariuszem,

będącym realnym zagadnieniem na jednym z przedmiotów w ramach studiów, jednak jegotreść zmodyfikowano tak, aby uprościć prezentacje wyników. Dane (dokumenty, arkusze,obrazki) prezentowane w pracy zostały wygenerowane tylko na potrzeby pracy magisterskiej inie zawierają wyczerpującego rozwiązania przedstawionego problemu.

Pomyślnym zakończeniem testów będzie wykazanie, że system ułatwił pracę nadprojektem. Natomiast w przypadku wykazania poważniejszych uchybień w pracy systemu,test zostanie zakończony niepowodzeniem.

Na przedmiocie „Metody optymalizacji”, studenci otrzymują zadaniezoptymalizowania wymiarów poprzecznych belki tak, aby jej ugięcie wskutek działającej siłybyło jak najmniejsze.

Przekrój belki jest prostokątny o wymiarach: a i b, podano wzór na ugięcie belki podwpływem działającej siły, określono moduł Younga, moment bezwładności, maksymalneugięcie oraz przedziały wartości dla wymiarów a i b, oraz wszystkie potrzebne parametry, jakdługość belki L czy siła nacisku P.

Metoda rozwiązania jest dowolna (jedna z poznanych na zajęciach metod, m.in.: Złotypodział, Fibonacci), studenci są jedynie zobligowani do zastosowania określonego układudokumentu przy pisaniu sprawozdania. Mianowicie powinno ono zawierać tabelkę i wykresprzedstawiający ugięcie belki w zależności od wymiarów a i b (wymuszono określonenazewnictwo oraz krok iteracji), wyniki, dyskusję wyników oraz wnioski. Obowiązkowymjest również numerowanie rozdziałów oraz zachowanie ustalonego nazewnictwa: „wstęp”,„technologia wykonania”, „wyniki”, „wnioski”.

Efektem pracy studentów są więc pliki typu Excel, dokument tekstowy zesprawozdaniem, kod programu/algorytm rozwiązania, oraz dodatkowe pliki pomocnicze dozastosowanej metody rozwiązania.

Prowadzący zauważa, że wynik pracy studentów, powinien wpisywać się w pewienschemat. Plik excel powinien zawierać taką samą tabelę, z danymi ugięcia, kodprogramu/algorytm nie powinien być identyczny u dwóch lub więcej osób (wymogiem byłapraca samodzielna nad implementacją algorytmu), natomiast sprawozdanie powinno zawieraćczęści wspólne, jak wykres ugięcia oraz części unikalne, jak omówienie wyników czywnioski.

Prowadzący również zauważa, że zdecydowana większość czasochłonnej pracy topowtarzające się czynności, które można zautomatyzować, „wyciągając” i analizując z

5. Wyniki i analiza pracy systemu Strona: 38/52

Rysunek 25: Ugięcie belki

projektów tylko elementy unikalne, jak omówienie wyników i wnioski, mając oczywiściegwarancje unikalności pracy i występowania w niej wymaganych elementów.

Od systemu będzie się wymagać widocznego usprawnienia pracy nad projektem orazwszystkich założeń wymienionych w punkcie „1.2. Wymagania i założenia.”.

5.2. Wynik pracy systemuProwadzący zajęcia, nazywany dalej jako „prowadzący”, poprosił studentów, zwanych

dalej „użytkownikami”, o założenie konta w systemie, podając link rejestracyjny. Wmiędzyczasie zakłada konto e-mailowe, na które studenci będą wysyłać swoje prace, orazdodaje je do systemu, uzupełniając specjalny plik konfiguracyjny. Informuje równieżstudentów, że warunkiem poprawnego odczytania maila jest umieszczenie w temacie nazwyprojektu. Po kilku chwilach studenci mogą już zalogować się do systemu a prowadzący widziich na liście użytkowników, więc dodaje nowy projekt „Dwukryterialna optymalizacja belki”(rysunek 26):

Prowadzący wybiera wszystkich użytkowników, wpisuje tagi w miejsce opisuprojektu, aby później móc szybciej identyfikować te słowa kluczowe w sprawozdaniach.Następnie zapisuje formularz i po chwili użytkownicy na swoim profilu mają wgląd dopodsumowania i listy pozostałych uczestników.

Okazuje się jednak, że jednej osoby nie było na pierwszych zajęciach i nie założyłakonta. Prowadzący postanowił utworzyć konto studentowi poprzez panel administracyjny,dodać do projektu i przesłać mu dane do logowania. Tak więc pierwszy problem zostałrozwiązany.

Gdy już wszyscy użytkownicy mają dostęp do systemu, prowadzący może rozesłać docałej grupy adres e-mail projektu. Najszybsza metoda to skorzystanie z chat-u. Dodatkowo


Rysunek 26: Dodawanie nowego projektu

jeden ze studentów zapytał o termin oddania projektu, na co prowadzący mógł odpowiedziećon-line, dzięki wymianie danych bez przeładowania strony.

Pozostali studenci również widzą wszystkie wiadomości. Każdy z nich ma teżmożliwość wysłania prywatnej wiadomości np. do prowadzącego z pytaniem o szczegółowewarunki oceniania.

Rysunek 27 przedstawia widok podsumowania projektu, widoczny dla wszystkichużytkowników, będących w grupie projektowej.

Każdy ze studentów powinien przesłać następujące pliki:• sprawozdanie w formie dokumentu: Word, LibreOffice, PDF, z zachowaniem

odpowiedniej struktury• arkusz kalkulacyjny: Excel, LibreOffice• pliki dodatkowe: wykresy, pliki wykonawcze programów, inne

Po upływie około dwóch tygodni, prowadzący zaczyna obserwować dużą aktywnośćwśród użytkowników związaną z przesyłanymi plikami. Część użytkowników wybrałometodę wysłania plików przez e-mail, inni woleli przesłać dokumenty formularzem uploaduw panelu.


Rysunek 27: Widok podsumowania projektu

Rysunek 28: Widok skrzynki odbiorczej e-mail

Rysunek 28 przedstawia widok folderu „INBOX.Accepted”, gdzie trafiają wiadomościzaakceptowane przez system. Pierwszą wiadomością jest email od jednego z użytkowników,który na podstawie adresu email został zidentyfikowany jako istniejący w systemie. Popoprawnej weryfikacji nazwy tematu, czyli tytułu projektu, system pobrał wszystkiezałączniki i dodał je na konto użytkownika do odpowiedniego folderu, połączonego zprojektem.

Z poziomu użytkownika, zaraz po wykryciu nowych plików przez system, widocznesą one w zakładce „moje pliki”, gdzie można je jeszcze nadpisać, usuwając stary i dodającnowy (rysunek 29). Po prawej stronie widoczne jest zarządzanie folderami, folder nazwanytytułem projektu wybierany jest domyślnie po wejściu użytkownika do zakładki „moje pliki”.

Na liście plików widoczna jest kolumna „informacje”, gdzie wyświetlana jest ikonka„zegarka”. Oznacza ona, że plik jest w trakcie analizy przez system i po zakończonejweryfikacji, plik będzie miał status aktywnego, co widoczne jest poprzez uzupełnienie pola„typ” (rysunek nr 30).

Poprawna weryfikacja plików, oznacza pomyślne przejście przez proces opisany wpunkcie „4.3.1”.


Rysunek 29: Przetwarzanie plików przez system - poziom użytkownika

Rysunek 30: Pliki po udanej weryfikacji przez system

Powracając do scenariusza, po kilku chwilach kolejni użytkownicy rozpoczęlidodawanie plików do systemu. Jednak tym razem, jeden użytkowników wysłał plikiskompresowane w postaci paczki RAR, z czego jeden z plików ma niewłaściwe rozszerzenie,tzn. plik ma rozszerzenie .pdf, podczas gdy jest to plik .doc.

Natomiast inny użytkownik miał zainfekowany komputer i do pliku dokumentudokleił się wirus.

W obu przypadkach system poradził sobie z problemem, paczkę rozpakował awypakowane pliki po chwili zostały dodane na konto użytkownika. Plik z niewłaściwymrozszerzeniem został oznaczony poprawnym dla niego rozszerzeniem: DOC. Natomiastzainfekowany plik innego użytkownika został oznaczony przez system jako nieaktywny, coużytkownik zobaczy poprzez czerwone tło danej pozycji na liście plików.

Część użytkowników nie zdążyło z oddaniem projektu i nie wysłało plików, jednakczęść z nich, postąpiła niewłaściwie. W ostatnich chwili poprosili kolegów o przesłanie ichprac, które już zostały wysłane do systemu a następnie, pod presją czasu, wysłali duplikat,podpisując się pod nie swoją pracą własnym imieniem i nazwiskiem.

Po upływie zadeklarowanego czasu na wysłanie plików, prowadzący uruchomiłpodsumowanie projektu, w celu oceny wyników pracy studentów.

Rysunek 31 przedstawia pliki każdego użytkownika z podziałem na „pliki wspólne”czyli duplikaty, oraz „pliki”, będące przynajmniej w minimalnym stopniu unikalne (algorytmfiltrowania opisany w punkcie 4.2).

Prowadzący wysłał studentom plik „INSTRUKCJA-WYTYCZNE.pdf” z treściązadania oraz wytycznymi do pisania sprawozdania. System automatycznie pogrupował tepliki, separując je od pozostałych, ułatwiając prowadzącemu skupienie się tylko na faktycznejpracy studentów.

Warto jednak odnotować, że jeden z plików „Newton.m” został oznaczony jakoduplikat. Oznacza to, że użytkownik „Mirek Gryczany” posłużył się kodem koleżanki „Ola


Rysunek 31: Podsumowanie projektu

Kukurydziana”, lub też obaj korzystają z zewnętrznego źródła. Problem ten musi zostaćrozwiązany przez prowadzącego indywidualnie.

Na obecnym etapie nie jest możliwe stwierdzenie, które sprawozdania są do siebiepodobne, lub też stanowią duplikat, dlatego prowadzący decyduje się na uruchomienie„porównywania dokumentów”.

Rysunek 32 przedstawia listę wszystkich plików, które nie zaliczają się do grupy „plikiwspólne” (rysunek 31). Tak więc plik z instrukcją i wytycznymi do projektu(„INSTRUKCJA-WYTYCZNE.pdf”) został przeanalizowany tylko raz, będąc przypisanymdo konta prowadzącego (pierwsza pozycja u góry). Zawiera on tylko kilka punktów, bezukładu specyficznego dla sprawozdania, więc system nie wykrył w nim żadnych rozdziałów,które później można by było porównywać (rysunek 33). System nie znalazł w tymdokumencie również żadnych słów kluczowych projektu.

Pozostałe pięć plików zostało przeanalizowane przez system, prowadzący klikającokno z danym plikiem, rozwija panel z informacjami szczegółowymi danego dokumentu:rozdziałami oraz plikami graficznymi.


Rysunek 32: Analiza Word/PDF plików

Rysunek 33: Widok szczegółowy pliku "INSTRUKCJA-WYTYCZNE.pdf"

Na rysunku 34 po lewej stronie, przedstawione zostały rozdziały analizowanegodokumentu. Można wyróżnić trzy grupy rozdziałów: duplikaty (100% podobieństwa),zbliżone do siebie (50-70%) i unikalne (20% i mniej). Prowadzący z łatwością zauważa, że„cel ćwiczenia” jest na pewno duplikatem w pozostałych pracach, ale jest to sytuacjaplanowana, bo studenci kopiują cel z treści zadania, jaką otrzymali. Unikalne fragmentyprzykuwają początkowo najmniejsza uwagę, prowadzący najbardziej zainteresowany jestrozdziałami, które cechują się dużym stopniem podobieństwa. Po najechaniu myszka naramkę z wartością procentową, prowadzący może zobaczyć z którą konkretnie osobą, pracą irozdziałem dana treść została porównywana.

Różna ilość ramek z procentami (obok tytułu rozdziału), oznacza, że system niektórerozdziały znalazł w większości dokumentów, inne natomiast tylko w niektórych. Przykłademjest „cel ćwiczenia”, gdzie znaleziono tylko dwa odpowiedniki tego rozdziału, natomiast„podsumowanie i wnioski”, znalazły się we wszystkich czterech pozostałych dokumentach.

Dokument „sprawozdanie-optymalizacja.odt” zawiera również dwa pliki graficzne,obrazek umieszczony z instrukcji do ćwiczenia, oraz wykres. Wartości „100%” w ramce obokgrafiki oznaczają, że w innych pracach studenci użyli dokładnie tego samego obrazka – coanalogicznie jak w przypadku „celu ćwiczenia” jest sytuacją spodziewaną. Wykres natomiast,posiada średnio niecałe 40% podobieństwa z pozostałymi plikami, co pozwala nastwierdzenie, że inni studenci nie umieścili duplikatu tego wykresu.

Końcowym spostrzeżeniem prowadzącego jest wykrycie tagu „pareto” w dokumencie,co pozwala przypuszczać, że student rozwiązał prawidłowo zadanie, umieszczając w swojejpracy stosowne wyjaśnienie rozwiązania pareto.


Rysunek 34: Informacje szczegółowe dokumentu

Rysunek 35: Porównanie dwóch dokumentów - podobne rozdziały

Rysunek 35 przedstawia sytuacje, która zaciekawiła prowadzącego, mianowiciewysoki stopień podobieństwa pomiędzy rozdziałami w dwóch pracach: „sprawko.odt” oraz„moje-sprawozdanie.docx”. Obie prace zawierają taki sam układ rozdziałów, inny odpozostałych, dlatego prowadzący postanowił przeanalizować zawartość rozdziałów uznanychza bardzo podobne „opracowanie wynikow” i „podsumowanie i wnioski”, mając na uwadzesprawdzenie również pozostałej części pracy.

Dzięki szybkiej i wygodnej metodzie nawigacji po rozdziałach, prowadzącypotrzebował tylko kilku chwil aby zorientować się, że prace są najprawdopodobniejduplikatami. Jeden ze studentów pousuwał tylko niektóre zdania ze sprawozdania kolegi iwysłał pracę jako swoją własną.

Rysunki 36 i 37 pokazują zawartość porównywanych rozdziałów. Można zauważyć, żetreść jednego jest kopią drugiego rozdziału, w minimalnym stopniu zmienioną, poprzezusunięcie pojedynczych zdań.

W analogiczny sposób prowadzący znalazł pozostałe duplikaty rozdziałów innychstudentów, którzy co prawda napisali sprawozdanie samodzielnie, ale umieścili duplikat„wstępu teoretycznego”, czyli opisu zastosowanych metod. Sytuację tą, prowadzący będziemusiał rozwiązać bezpośrednio ze studentami przy omawianiu prac.


Rysunek 36: Rozwinięcie rozdziału "podsumowanie i wnioski" w pliku "sprawko.odt"

Rysunek 37: Rozwinięcie rozdziału "podsumowanie i wnioski" w pliku "moje-sprawozdanie.docx"

Ostatnim etapem oceny przesłanych przez użytkowników plików, jest analiza arkuszykalkulacyjnych. Zgodnie z instrukcjami, studenci powinni wygenerować wykres na podstawiedanych przedstawiających wygięcie belki w zależności od podanych wymiarów „a” i „b”, zzachowaniem określonego kroku iteracji.

Rysunek 38 przedstawia wyszczególnione wszystkie obszary poszczególnych arkuszykalkulacyjnych. Prowadzący spodziewa się dużego podobieństwa obszarów, bo tabelepowinny zawierać takie same dane. Dwie tabele (obszary) są takie same – 100% zgodności,natomiast trzecia wykazuje 96% podobieństwa oraz trochę mniejszy rozmiar. Posiada 42wiersze zamiast 44. Po szybkim podglądzie, okazuje się, że użytkownik pominął dwa skrajnepomiary – pierwszy i ostatni, co poskutkowało mniejszym rozmiarem.

Jeden z użytkowników w pliku „wyniki1.xls”, umieścił dodatkową tabelę „Arkusz2 2x 5”, która nie posiada żadnej innej zgodnej tabeli, co pozwala przypuszczać, że są to danepomocnicze wygenerowane przez studenta na potrzeby wykonania pracy.

Prowadzący nie musiał przeglądać wszystkich tabel w każdym pliku. Wystarczy, żeuruchomił podgląd jednej z nich (rysunek 39). Pozostałe obszary mają taką samą zawartość.


Rysunek 38: Wynik analizy arkuszy kalkulacyjnych

Po udanej weryfikacji wszystkich plików, prowadzący może zapisać sobie wybrane znich aby skonsultować je indywidualnie ze studentami, natomiast w pozostałych przypadkachpodgląd treści okazał się wystarczający.

Studenci, którzy nie wysłali plików, lub wysłali je niekompletne, bez żadnychproblemów zostali zidentyfikowani i odznaczeni przez prowadzącego.

Sprawdzanie projektu zakończyło się. Prowadzący może zakończyć pracę z systemem.Studenci natomiast mogą zostać przydzieleni do kolejnych projektów.


Rysunek 39: Podgląd fragmentu tabeli - obszar "Arkusz1 4 x 44"

6. Podsumowanie i wnioski

6.1. Realizacja założeń i spełnienie oczekiwańSystem powinien spełniać pewne wymagania, które zostały zdefiniowane w punkcie

„1.2” pracy. W pierwszej kolejności były to wyznaczniki systemu do zarządzania projektem.Są to: zarządzanie projektem, plikami i użytkownikami oraz komunikacja pomiędzyczłonkami projektu.

Przedstawiony w punkcie „5.2” proces analizy i oceny projektu przez prowadzącego,był dowodem, że system może znacznie pomóc na każdym etapie zarządzania projektem.

Przede wszystkim prowadzący otrzymał łatwe w obsłudze i intuicyjne narzędzie, którepomogło mu zdefiniować nowy projekt i dodać go do systemu, opisując jego tagi orazprzypisując do niego użytkowników. Użytkownicy nie musieli być wprowadzani ręcznieprzez administratora, każdy z nich mógł się samodzielnie zarejestrować, co już na tym etapiezaoszczędziło czas prowadzącemu. W sytuacji wyjątkowej, gdy użytkownik nie mógł założyćkonta, administrator utworzył je w swoim panelu, mając jednocześnie pełny dostęp dopozostałych profili.

Bardzo ważną funkcją systemu okazał się być moduł komunikacji, który pozwolił nasprawne przesłanie wszystkich uczestnikom projektu niezbędnych informacji. Dodatkowostudenci mogli wysłać prywatną wiadomość do prowadzącego, z pominięciem zewnętrznejpoczty elektronicznej, co podniosło komfort użytkowania systemu.

Jednak najważniejszym elementem aplikacji jest moduł przetwarzania i analizyplików. W klasycznym podejściu administrator musi przeglądać każdy z plików, którzyużytkownicy wyślą, zapoznać się z dokumentem i zapamiętać jego układ i zawartość, abyporównać ewentualne duplikaty z pozostałymi pracami. Jeśli student wysłał archiwum,potrzebne jest poświęcenie dodatkowego czasu, natomiast w przypadku uszkodzenia lubzainfekowania pliku, prowadzący traci bardzo dużo czasu i narażony jest nawet nauszkodzenie komputera.

Zaprojektowany system ułatwia, przyspiesza i zabezpiecza procedurę zarządzaniaplikami. Początkowo, dostarcza wygodnej dla obu stron metody przesyłania plików:formularz uploadu lub poprzez wysłanie e-mail, z którego odczytywane są załączniki.

Na kolejnym etapie sprawdzana jest poprawność pliku, odczytywane są meta-dane,uruchamiany jest skaner antywirusowy, oraz w przypadku archiwum, jego zawartość jestwypakowywana. Wszystkie te operacje są wykonywane w tle, więc zarówno użytkownicy jaki administrator po kilku chwilach widzą gotowy wynik w postaci listy zweryfikowanychplików.

Po udanej weryfikacji, system analizuje pliki pod względem podobieństw. Odbywa sięto na dwóch poziomach: sumy kontrolnej md5 (szybkie porównywanie dużej ilości plików),oraz na podstawie zawartości (bardzo dokładne szukanie podobieństw obu plików).

Dzięki wykorzystaniu md5, system bardzo szybko znajduje ewentualne duplikatyplików, co pozwala również na oszczędzenie miejsca na serwerze, bo zapisywany jest tylkolink symboliczny do zasobu. Użytkownikom daje to natomiast komfort wysyłania warchiwum dowolnej zawartości, czyli całego projektu jaki mają na dysku, bez obawy o to, żeadministrator będzie musiał ręcznie filtrować pliki i szukać w nich tych unikalnych.

Analiza zawartości pozwala natomiast administratorowi na zdecydowanie szybszeprzeglądanie treści i brak konieczności jej ręcznego porównywania. Po uruchomieniu widokuszczegółowego danego dokumentu, administrator od razu widzi jaki procent podobieństwa makażdy z rozdziałów pracy. Dodatkowo wszystkie pliki graficzne są osobno porównywane

6. Podsumowanie i wnioski Strona: 48/52

między sobą, co daje możliwość weryfikacji, czy studenci nie używają tych samychwykresów lub obrazów.

6.2. Rozwój systemuPodstawową zaletą ale jednocześnie też wadą systemu jest fakt, że porównywanie

zawartości plików, zarówno arkuszy kalkulacyjnych jak i dokumentów, odbywa się wzakresie jednego konkretnego projektu. Pliki będące w innym projekcie, nie są brane poduwagę.

W przypadku, gdy prowadzący w kolejnych latach będzie chciał przeprowadzić tensam projekt, studenci korzystający z gotowych prac poprzedników, będą mieć wolną rękę wdziałaniu. System nie wykryje duplikatów. Propozycją rozwoju systemu jest więc dodaniemożliwości porównywania plików również pomiędzy projektami. Wymagałoby towygospodarowania dodatkowego miejsca w widoku szczegółów, ze względu nazdecydowanie większa liczbę ramek z liczbą procentów oznaczających stopień podobieństwa.Proces generowania wyników przebiegałby również zdecydowanie dłużej, co też łączy się zkolejną perspektywą rozwoju – utworzeniem nowej warstwy obliczeniowej.

Zwiększenie ilości analizowanych plików generuje problem wydajności systemu.Metoda przetwarzania danych „na żądanie”, więc w chwili uruchamiania przez użytkownikadanej strony, może okazać się zawodna. Wszystkie operacje, które mogą okazać sięczasochłonne, powinny zostać przeniesione do osobnego modułu, tworząc warstwęobliczeniową systemu.

W chwili obecnej, system analizuje w ten sposób jedynie ogólne informacje o pliku, wtym sprawdzanie poprawności, pobieranie meta danych oraz skanowanie antywirusowe. Poprzeniesieniu wszystkich operacji na plikach do zadań cyklicznych CRON, przetwarzaniedanych odbywałoby się w tle, natomiast użytkownik wchodząc na daną stronę, widziałbygotowy wynik.

Warto zwrócić też uwagę na moduł zarządzania plikami. W chwili obecnej,użytkownik usuwając plik i dodając nowy, zastępuje go całkowicie, co powodujebezpowrotną utratę poprzednich danych. Rozwiązaniem tego problemu byłby system kontroliwersji, który umożliwiałby nadpisanie pliku a tym samym detekcje zmian przez system.Użytkownik aktualizując obszerny dokument, pozostawiłby w systemie ślad, któryadministrator będzie w stanie zauważyć i odpowiednio zareagować, nanosząc komentarz lubkontaktując się bezpośrednio z autorem.

Zarządzanie projektem również można udoskonalić. Dodając dodatkowe pole „status”,możliwe do zmiany przez administratora, można wprowadzić możliwość czasowegowstrzymania prac nad projektem, co skutkowałoby wyłączeniem możliwości dodawaniaplików przez użytkowników. Administrator zmieniając status projektu na „zamrożony /nieaktywny”, mógłby łatwo zablokować możliwość dodania nowych plików, lub usunięciaobecnych. Powstałaby gwarancja niezmienności w trakcie prac analitycznych nad projektem.

Ostatnią propozycją poprawy systemu jest zwiększenie poprawności porównywaniazawartości, poprzez możliwość wyboru algorytmu porównywania ciągu znaków.Zastosowany w systemie algorytm „Levenshtein”, mógłby być porównany z innymimetodami, co skutkowałoby zwiększeniem szybkości działania systemu lub uzyskaniemlepszej dokładności wyników.


6.3. WnioskiZaprojektowany system dostarczył pełnego wsparcia dla procesu zarządzania

projektem, na całej długości ścieżki jego rozwoju. Zaczynając od definicji projektu orazprzydzielenia użytkowników, poprzez wzajemną komunikację, po zarządzanie plikami i ichanalizę.

Postawione cele zostały osiągnięte. Założenia i wymagania stawiane aplikacji, zostałyspełnione. Najbardziej czasochłonne procesy zostały zautomatyzowane, natomiast pracawykonywana sekwencyjne w tradycyjnych podejściu, teraz może być zrównoleglona, poprzezmiędzy innymi wstępną analizę plików w tle.

Trzeba wziąć pod uwagę również pewne niedociągnięcia systemu, które zostałyporuszone w punkcie „6.2. Rozwój systemu”. Porównywanie zawartości plików tylko wobszarze danego projektu może być w pewnych sytuacjach problematyczne, szczególnie przyco roku powtarzających się projektach. Brak kontroli wersji również wyklucza możliwośćmonitorowania zmian w plikach projektu, co może skutkować pewnymi nadużyciami zestrony użytkowników.

Jednak pomimo pewnych wad, system można uznać za bardzo pomocny wzarządzaniu projektem. Dodatkowo, struktura aplikacji pozwala na wykorzystanie jej równieżw innych sytuacjach. Często spotyka się sytuacje, w której występuje potrzeba porównaniazawartości obszernych dokumentów, na przykład artykułów naukowych, które w skrajnychprzypadkach w większości bazują na cytatach lub zaczerpniętych treściach z poprzednichwydań prac. Po dodaniu tych dokumentów, tworząc nowy „projekt” dla pewnej grupy plików,możemy śledzić na bieżąco tylko nowe treści w dokumencie, mając do nich bezpośrednidostęp z systemu (podgląd zawartości poprzez kliknięcie tytułu rozdziału). Treści bardzopodobne lub duplikaty, błyskawicznie zostaną przez administratora wychwycone poprzezwartość procentową podobieństwa, umieszczoną obok tytułu rozdziału.

Podobna sytuacja dotyczy plików graficznych. Szybki podgląd na wszystkie obrazydanego dokumentu, wraz z porównaniem stopnia podobieństwa z obrazami innychdokumentów, pozwala przyspieszyć pracę nad analizą „przydatności” danej pracy lubartykułu. Zastosowanie tego mechanizmu można znaleźć między innymi w dokumentach,które opisują to samo urządzenie, ale na różne sposoby. Jeśli administrator szuka opisu kilkuurządzeń, mając do dyspozycji wiele artykułów, wystarczy, że na podstawie obrazówgraficznych wybierze te dokumenty, które mają unikalne pliki graficzne, odrzucając te, którewykorzystują grafikę innych prac a jedynie używają innych słów do opisu.

Podsumowując, wykonana aplikacja pomyślnie przeszła przez test użyteczności iokazała się przydatnym narzędziem pracy nad projektami. Dodatkowo jej zastosowaniemożna rozszerzyć o zarządzanie pracami naukowymi czy artykułami, co dodatkowo podnosijej wartość. Wykorzystana technologia i sposób wykonania umożliwiają natomiast łatwąrozbudowę i modyfikację systemu, co w efekcie może prowadzić do utworzeniarozbudowanego i zaawansowanego systemu e-learingowego.


7. Bibliografia

[1] http://www.yiiframework.com/ [dostęp 01.09.2015r][2] http://php.net/manual/en/language.namespaces.php [dostęp: 01.09.2015r][3] http://php.net/manual/en/language.oop5.late-static-bindings.php [dostęp: 01.09.2015r][4] https://getcomposer.org/ [dostęp: 01.09.2015r][5] https://github.com/barbushin/php-imap [dostęp 01.09.2015r][6] https://github.com/PHPOffice/PHPExcel [dostęp 01.09.2015r][7] https://www.phpmyadmin.net/ [dostęp: 01.09.2015r][8] http://www.clamav.net/about.html [dostęp 01.09.2015r][9] "Malware and Antivirus Systems for Linux" DevynCJohnson, źródło on-line: http://www.linux.org/threads/malware-and-antivirus-systems-for-linux.4455/ [dostęp: 01.09.2015r][10] http://manpages.ubuntu.com/manpages/raring/man1/pdftohtml.1.html [dostęp 01.09.2015r][11] https://github.com/dagwieers/unoconv [dostęp 01.09.2015r][12] https://tika.apache.org/1.10/parser_guide.html [dostęp 01.09.2015r][13] https://maven.apache.org/ [dostęp 01.09.2015r][14] https://github.com/tdebatty/java-string-similarity [dostęp 01.09.2015r][15] http://phash.org/ [dostęp 01.09.2015r][16] http://getbootstrap.com/ [dostęp 01.09.2015r][17] https://jquery.com/ [dostęp 01.09.2015r][18] https://angularjs.org/ [dostęp 01.09.2015r][19] "Usage of JavaScript libraries for websites", w3techs.com, źródło on-line: http://w3techs.com/technologies/overview/javascript_library/all [dostęp 01.09.2015r][20] http://robinherbots.github.io/jquery.inputmask/ [dostęp 01.09.2015r][21] "Effects of two-way data binding on better user experience and easier development of Clinical information systems", N Omerbegović, N Omerbegović, żródło on-line: http://ceur-ws.org/Vol-1320/paper_21.pdf [dostęp 01.09.2015r][22] https://github.com/angular-ui-tree/angular-ui-tree [dostęp 01.09.2015r][23] https://github.com/nervgh/angular-file-upload [dostęp 01.09.2015r][24] https://github.com/urish/angular-moment [dostęp 01.09.2015r][25] http://momentjs.com/ [dostęp 01.09.2015r][26] http://jacek-pulit.github.io/angular-elastic-input/ [dostęp 01.09.2015r][27] https://github.com/angular-ui/ui-select [dostęp 01.09.2015r][28] „Perceptual Hashing”, bertolami.com, żródło on-line: http://bertolami.com/index.php?engine=blog&content=posts&detail=perceptual-hashing [dostęp 01.09.2015r][29] Zauner, Christoph: "Implementation and Benchmarking of Perceptual Image Hash Functions." Master's thesis, Upper Austria University of Applied Sciences, Hagenberg Campus, 2010. [30] "Mechanizm identyfikacji i klasyfikacji treści", A Niewiarowski, M Stanuszek - Studia Informatica, 2013, źródło on-line: http://studiainformatica.polsl.pl/index.php/SI/article/viewFile/60/58 [dostęp 01.09.2015r][31] „Cross-Site Request Forgery (CSRF)”, OWASP.org, źródło on-line: https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF) [dostęp 01.09.2015r][32] http://www.ascii-code.com/ [dostęp 01.09.2015r]

7. Bibliografia Strona: 51/52

„Interaktywne narzędzie do prezentacji i wykorzystania...

Documents

Transcript of „Interaktywne narzędzie do prezentacji i wykorzystania...