Grafika komputerowa - test

Projekt KOMIKS

 Praca graficzna - komiks

Do wykonania pracy użyjemy narzędzi informatycznych: generatory obrazu i tekstu, programy do grafiki komputerowej, platformy Canva.

Definicja: (https://pl.wikipedia.org/wiki/Komiks)

Komiks – sekwencyjna historia obrazkowa, z dodanym tekstem, publikowana w prasie lub w formie osobnych zeszytów, która wykształciła się jako odrębna forma wydawnicza na przełomie XIX i XX wieku z gazetowej grafiki satyrycznej.  
Komiczny, satyryczny charakter obecnie nie jest obowiązkowy, w formie zeszytów z obrazkami przedstawia się dziś horrory, kryminały i inne formy fabularne.

Komiks z roku 1920 w gazetce dla dzieci.

Mimo że Amerykanie uważają komiks za swój wynalazek, jednak forma narracji za pomocą serii obrazków z ew. dodatkiem tekstu była znana już w dawnych wiekach...

Obraz z tekstem, XV wiek

https://pl.wikipedia.org/wiki/Rysunki_naskalne_z_Alty
datowane są na okres ok. 4200–500 p.n.e

Kajko i Kokosz. Autor: Janusz Christa.

Kapitan Żbik. Serial komiksowy

Komiksy na stałe weszły do światowej popkultury, 

u nas przykładowy "Kapitan Żbik" pojawił się  w styczniu 1968 r. i kolejno w gazetach. Komiksy te zaczęły następnie wychodzić w zeszytach; ukazały się 53 numery, dzięki czemu jest to najdłuższa polska seria komiksowa. Ich nakład wynosił w okresie największej popularności 100-200 tys. egzemplarzy, połowa zeszytów doczekała się wznowienia w podobnej liczbie egzemplarzy. 

Sztuczna inteligencja SI (AI) 

Stała się integralną częścią naszego życia, rewolucjonizując różne branże i zmieniając sposób, w jaki pracujemy. Dlatego trzeba coś o tym wiedzieć. Jednym z kluczowych elementów sztucznej inteligencji jest oprogramowanie AI, czyli zestaw programów i algorytmów, które umożliwiają maszynom symulowanie inteligencji podobnej do ludzkiej i wykonywanie zadań, które zazwyczaj wymagają ludzkiej inteligencji. Obejmuje szeroką gamę technologii, takich jak uczenie maszynowe, przetwarzanie języka naturalnego, grafika i animacja komputerowa, robotyka i inne.

Nasz projekt

• Jest to projekt grupowy. Klasa wybiera bohatera: Batman, czarny kot, Yoda lub cokolwiek, co często występuje w Internecie i generator będzie wiedział o co chodzi, Może być jakaś znana postać, rzeczywista lub fikcyjna. Chodzi o to, żeby
  u każdego z was postać główna była podobna i rozpoznawalna. W zależności od wybranego stylu obrazu generator czerpie z dostępnych rysunków w tym stylu i może nie rozpoznawać naszej postaci.
• Kierownik projektu: zakłada folder w kanwie.
• Uczniowie udostępniają kierownikowi swoje gotowe strony komiksu.
• Kierownik wkleja prace do swojego dokumentu jako kolejne strony. Dodaje stronę tytułową. Udostępnia nauczycielowi do oceny.
• Wynikiem będzie broszura - zeszyt komiksowy. Można go wydrukować, udostępnić w mediach internetowych itp.

Wykonanie:

1. Utwórz folder roboczy projektu. 
2. Zastosuj program SI do wygenerowania kilku obrazków.
   Można skorzystać z narzędzia Canva canva.com, ChatGPT (słabe), TalkAI https://talkai.info/pl/image/  (słabe), ja polecam https://www.imagine.art/dashboard/tool/from-text lub https://perchance.org, dobre narzędzie oferuje wiele stylów obrazu do wyboru. Tu przykład użycia https://perchance.org/ai-character-generator, jak widać programy AI lepiej działają gdy wpiszesz po angielsku! Wybrany kształt "square", styl "painted anime", dodano też efekt.
   
   
   
   
   
3. Zwykle programy generują 2 lub więcej obrazków do wyboru, zapisz te, które pasują. Na stronę komiksu potrzeba 4 do 8 obrazków, które układają się w logiczny ciąg.
4. Otwórz każdy obrazek w programie graficznym, dokonaj potrzebnych modyfikacji, np. pokoloruj, usuń zbędne elementy, ew. wklej bohatera historyjki. Jak widać wygenerowany kot ma 2 ogony! Jeśli chcemy zachować ten obraz, to trzeba to poprawić.
5. Zastosuj program SI do wygenerowania tekstu dla każdego obrazka. Program powinien obsługiwać język polski, 
   Przygotuj teksty dialogu, opisu scenki itp. Zapisz w pliku tekstowym, np. w Notatniku, popraw teksty, np. usuń zbędne elementy, dodaj coś...
   Jest wiele narzędzi do tego, można skorzystać z Canva - funkcja magiczny tekst, TalkAI , 
   Więcej o tym: Artykuł o generatorach tekstu. Przykład:
   
   
   
   
   
6. Zaloguj się na swoje konto Canva, utwórz nowy dokument, format A4 pionowo, można użyć szablonu typu biuletyn 210x297 mm, kolaż zdjęć 20x30 cm lub inne w tym formacie.
   Wklej kolejno obrazki. Dodaj dymki/ podpisy czyli teksty, skorzystaj z Menu> Elementy
   
   Zwróć uwagę na automatyczne prowadnice = linie pomocnicze, które pomagają ustawić elementy wg. jednej linii. Przestrzegaj marginesów strony: z lewej strony ok. 2 cm, pozostałe ok. 1 cm od krawędzi strony. Gotowy komiks ma się nadawać do druku i zszycia w zeszyt.
   Nie zapomnij ustawić tytuł dokumentu, czyli komiks_klasa_inicjał lub nr dziennika.
   Dopisz swoje nazwisko, klasa w marginesie strony, żeby można było określić czyja to praca do oceny.
   
   
7. Udostępnij kierownikowi projektu z prawem edytowania.

 

Tu wasze wyniki:

1. klasa 2TW: Spiderman
2. klasa 3TI: Skalmar, ang. Squidward
3. klasa 2TUF, 2TP:
4. klasa 2LOKO, 2LOKR: rudy pies, ang. Red Dog
5. klasa 1LKSA Batman:
6. klasa 1LKSB: Biedronka, ang. Ladybug
7. klasa 2TFIM: rudy kot ang. red cat
8. klasa 3TUF, TW: Scooby Doo
9. klasa 3TIE: Walter White
10. klasa 3TFIM: Śpiąca Królewna ang. Sleeping Beauty 
11. klasa 2TI:
12. klasa 1LKR: ludzik z DElmy. 
13. klasa 2TIE: różowa pantera, ang. Pink Panther

PREZENTACJE

 Grafika prezentacyjna 

– rodzaj prezentacji przy użyciu grafiki komputerowej, polegający na tworzeniu zestawów kolejno wyświetlanych slajdów w celu zilustrowania zagadnienia.

Pierwsze programy do grafiki prezentacyjnej powstały w latach 80. XX w. W środowisku MS Windows są to m.in. Microsoft PowerPoint, Corel Presentations, Freelance Graphics (Lotus), Harvard Graphics, Impress (lub Prezentacja, w wersji polskiej). W Linuksie najważniejszym programem jest Impress, wchodzący w skład pakietu biurowego OpenOffice.org. Zwolennicy systemu składu tekstu LaTeX mogą przygotowywać prezentacje w formacie PDF, stosując rozszerzenie Beamer.

Obecnie są dostępne nowe narzędzia bazujące na pracy on-line oraz zapisywaniu w chmurze.  Warto je poznać i stosować, unikamy problemu z odtwarzaniem, inną wersją systemu, inną wersją językową Windows itp.

Istotą tej grafiki jest wspomaganie prelekcji lub wykładu czytelnymi tekstami i obrazami, co pomaga przyswoić treści.

Etapy grafiki prezentacyjnej

1. Zaprojektowanie prelekcji i utworzenie odpowiedniej liczby slajdów, często na podstawie gotowych szablonów wbudowanych w program grafiki prezentacyjnej.
   Uwaga: pracę dobrze zacząć przechodząc do opcji wzorzec/szablon/template i modyfikując go do własnych potrzeb.
2. Wypełnienie slajdów elementami tekstowymi i graficznymi, jak ramki z tekstem, listy zagadnień, rysunki i fotografie, wykresy i diagramy, niekiedy także dźwięk i wideo, np. narracja autora pokazu.
3. Zdefiniowanie rozmaitych parametrów wyświetlania prezentacji, jak harmonogram wyświetlania slajdów (lub ich ręczne przewijanie), sposoby przechodzenia jednego slajdu w drugi (tzw. efekty przejścia).
4. Powiązanie slajdów ze sobą wzajemnie i z otoczeniem, np. z dokumentami w Internecie.
   Czyli można dodać interaktywny spis treści z linkami do wybranych slajdów oraz łącza do stron internetowych.
5. Utworzenie dodatkowych notatek komentujących slajdy (tzw. notatki prelegenta).
6. Możliwy jest eksport gotowej prezentacji do jednej z kilku możliwych postaci – plik wykonywalny poza macierzystym programem, zestaw dokumentów hipertekstowych, plik
   w formacie PDF, ciąg obrazków .jpg. To się przyda gdy zamierzamy pokazać prezentację w innym miejscu, na cudzym komputerze. Może nie mieć Power Pointa, Internetu, czy innego potrzebnego składnika do odtworzenia twojej pracy.
7. Gdy prowadzisz szkolenie -wydrukowanie slajdów na papierze, rozdawanych potem publiczności w trakcie prezentacji.

Microsoft Sway

Pierwsze wydanie 1 października 2014

Rodzaj edytor prezentacji

Strona internetowa: https://sway.cloud.microsoft/

Microsoft Sway – internetowa aplikacja opracowana przez przedsiębiorstwo Microsoft. Została uruchomiona 1 października 2014 jako część pakietu Microsoft Office.

Sway pozwala użytkownikom na łączenie tekstu i mediów w celu stworzenia prezentacji internetowej lub stron internetowych metodą WYSIWYG. Nie jest do tego wymagana wiedza na temat języków skryptowych, czy zasad tworzenia witryn. Podczas tworzenia użytkownicy mogą dodawać multimedia z urządzenia lub ze źródeł internetowych, jak Twitter, OneDrive, YouTube czy Facebook. Tworzone prezentacje lub witryny internetowe mogą być wyświetlane za pomocą przeglądarki internetowej lub aplikacji, wydanych na Windows Phone, iOS, Androida.

Aplikacja Sway wykorzystuje serwery Microsoftu. Pozwala to na renderowanie projektów w chmurze, jak również pomaga w samym procesie projektowania witryny. Sway pozwala na tworzenie natywnych wersji stron lub prezentacji. Przygotowanych zostaje kilka wersji projektu po stronie serwera, a każda wersja jest dostosowana do specyfikacji wybranych urządzeń. Zawartość jest wyświetlana w sposób responsywny.

Dlatego warto poznać ten program. Przykład: post o jednym z projektów - gra klasowa.

Canva

Autor Melanie Perkins

Pierwsze wydanie 16 lipca 2012 r.

Rodzaj Edytor grafiki

Strona internetowa: canva.com.

Canva – internetowe narzędzie umożliwiające tworzenie projektów graficznych powstałe w 2012 r. Witryna zawiera bibliotekę, w której zostają udostępniane obrazy, grafiki i czcionki. Program online posiada filtry domyślne oraz zaawansowane funkcje edycyjne. Canva pozwala na korzystanie z gotowych szablonów oraz tworzenie projektów, tj. okładki książek, prezentacji czy zaproszeń od podstaw.

Narzędzie zostało utworzone 16 lipca 2012 r. przez Melanie Perkins i Cliffa Obrechta. Początkowo było wykorzystywane w środowisku uniwersyteckim jako pomoc przy tworzeniu roczników w założonej przez M. Perkins firmie Fusion Books.

Canva zyskała w pierwszym roku użytkowania ponad 750 tys. użytkowników.

W 2015 r. utworzono Canva „Do pracy” umożliwiające projektowanie graficzne identyfikacji wizualnej i materiałów marketingowych dla firm. W 2018 r. firma Canva została wyceniona na 1 mld dolarów!

Dzięki darmowym kontom, opcji edukacyjnej, mnogości gotowych, udostępnionych narzędzi i łatwości tworzenia grafiki można śmiało uznać ten program za wiodący w branży i wart poznania i stosowania.

Zastosowania aplikacji on-line Canva

Canva jest na bieżąco z nowinkami i podjęła współpracę z twórcami aplikacji SI (AI) czyli sztucznej inteligencji. Więcej: Jak używać AI w Canvie? 

Projekt Gra - wskazówki do stron WWW

 Wasze prace możesz zobaczyć tu:

http://graiss.ugu.pl/index.html

Projekt robimy wg. instrukcji https://tebedukacja2022.blogspot.com/2023/11/projekt-gra-klasowa.html

Przeglądając wasze projekty mam następujące wskazówki, pomocne dla tych, którzy już zrobili lub jeszcze robią strony WWW.

• Wszystkie pliki i foldery projektu zapisujemy zgodnie z instrukcją: małymi literami, bez spacji i polskich literek ś, ć  itd. To ważne! A oto komunikat, gdy chcemy zobaczyć dlaczego nie widać obrazu Janka:
  
  
  
  A tymczasem:
  
  
  
  plik obrazu jest zapisany z małej litery janek.png, a w kodzie z dużej: Janek.png. 
  Jak wam wielokrotnie mówiłam, twój lokalny Windows nie odróżnia wielkości liter i potraktuje je tak samo, czyli obrazek wyświetli się poprawnie. Ale nie serwer hosta! 

• Na stronie dodatkowej opracowanej przez Dyrektora czyli reżysera powieści interaktywnej klasy 2TI (adres http://graiss.ugu.pl/Gra2TI/index.html) zostało zastosowane tło w. postaci cieniowanego obrazu bg.png, wielkość 1920x1080 pikseli, rozmiar pliku 1 558 322 bajtów.

W takim wypadku lepiej jest wyciąć fragment pionowy:

Nowe tło ma wielkość 127 184 bajtów, czyli ponad 10x mniej, a wygląda tak samo! Przeglądarka automatycznie powiela tło, ( kod CSS background: url(bg.png); ) chyba że chcemy mieć pojedynczy obrazek, wtedy w kodzie CSS wpisujemy tak jak w przykładzie: background: url(bg.png) no-reapeat; 

Wielkość obrazów ma wpływ na ilość przesyłanych danych, szybkość ładowania strony, a gdy masz limitowane miejsce na hostingu lub ograniczenie pobieranych danych z Internetu...

Dlatego wszystkie grafiki dostosowujemy do niezbędnej wielkości a tła w postaci grafiki rastrowej zmniejszamy. Na przykład tak (obraz tła półprzezroczysty do zastosowania jako podlew czyli dodatkowe tło pod tekstem): 

• Unikamy powtarzania tego samego kodu. Po to jest właśnie CSS. W dodatkowym pliku stylu 
  http://graiss.ugu.pl/Gra2TI/stylwww.css w kilku miejscach zastosowano: 
  

  font-family: Helvetica; /*wybór kroju czcionki i koloru */
  color: maroon;
  
  

  Tymczasem CSS czyli kaskadowy arkusz stylu oznacza że raz wprowadzony atrybut jest "dziedziczony" przez pozostałe selektory. Czyli wystarczy wpisać to jeden tylko raz w nadrzędnym selektorze: 

BODY {	...

		font-family: Helvetica;

		color: maroon;

}

a pozostałe elementy blokowe będą korzystać z tego atrybutu, chyba że celowo chcemy zmienić na inny. Jednak zalecany jest na stronie WWW jednolity krój czcionki oraz dopasowane kolory tekstu, tła, ramek.

• jeżeli mamy więcej niż jedną scenę, umieszczamy je tam, gdzie plik główny index.html, a wszystkie skorzystają z jednego pliku stylu. Folder /skrypty jest przeznaczony na skrypty w języku Java Script do robienia animacji oraz innych efektów dynamicznych.
  
  
• kolejne uwagi w miarę potrzeby dodam.

Projekt Gra klasowa

 Gra klasowa - 

przygodowa gra typu Novel Game.

Jaki to rodzaj gry? Zajrzyj https://pl.wikipedia.org/wiki/Powie%C5%9B%C4%87_wizualna

Rzecz jasna moglibyśmy robić to za pomocą innych narzędzi, jak np. język programowania Python, Java Script czy może Microsoft Visual Basic for Applications (VBA).

Ale to zostawmy programistom, natomiast skupimy się na realizacji programu nauczania, tyle że dodamy do tego element współpracy w ramach klasy, pobudzania kreatywności bo trzeba będzie coś wymyślić a na koniec rywalizacji, bo zobaczmy która klasa poradzi sobie najlepiej.

Co trzeba zrobić i jak? Zobaczmy w prezentacji Sway:

Uwaga: po każdej zmianie zapisuj swoją pracę. Na koniec lekcji spakuj swój folder roboczy do pliku .zip i wyślij e-mailem do dyrektora projektu lub zapisz na nośniku. Szkoła nie przechowuje prac uczniów!

Wasze wyniki:

1 - 2TFiM TechnikumP    

2 - 1 LKSB LO                

3 - 2LOKO, 2LOKR      

4 - 2TUF, 2TP         

5 - 2TW TechnikumP

6 - 3TI  TechnikumP

1  - 1 LKSA LO

2  - 1 LKR LO

3  - 2TI TechnikumP

4  - 2TIE TechnikumP

5  - 3TFiM TechnikumP

6  - 3TIE TechnikumP

7  - 3TUF, 3TW     

SQL - kwerendy złożone

 

Logika zapytań SQL

Kolejność kroków przetwarzania zapytań

Wykonywanie każdej kwerendy przez silnik bazodanowy odbywa się krokowo, w ściśle określonej kolejności. Reguły te są spójne dla wszystkich relacyjnych baz danych.

Podobnie jak w prawidłowym zdaniu w języku polskim, obowiązuje określona kolejność, aby zapytanie było zrozumiałe - dla serwera SQL.

W konstrukcji zapytań możemy wyszczególnić 6 głównych bloków logicznych.

1. (Step 5)   SELECT   -- określanie kształtu wyniku, selekcja pionowa (kolumn)
2. (Step 1)   FROM     -- określenie źródła (źródeł) i relacji między nimi
3. (Step 2)   WHERE    -- filtracja rekordów
4. (Step 3)   GROUP BY -- grupowanie rekordów
5. (Step 4)   HAVING   -- filtrowanie grup
6. (Step 6)   ORDER BY -- sortowanie wyniku

W ramach każdego z nich, możemy umieszczać proste lub złożone konstrukcje. Podzapytania, zapytania skorelowane, dodatkowe polecenia, takie jak operator DISTINCT czy TOP w SELECT.

Wynikiem przetwarzania każdego z kroków jest tabela wirtualna (VT) , będąca jednocześnie obiektem wejściowym kolejnego etapu. Do tabel wirtualnych, czyli produktów pośrednich kroków przetwarzania, nie mamy dostępu z zewnątrz. Są one logicznymi strukturami, które rozpatrujemy tylko w kontekście analizy teoretycznej.

Trzeba podkreślić, że faktyczny sposób realizacji zapytań, jest wykonywany za pomocą efektywnych i zoptymalizowanych przez silnik bazodanowy metod. W efekcie końcowym, pozwalają one na osiągnięcie dokładnie tego samego wyniku co w analizie teoretycznej.

Analiza przetwarzania kwerendy na przykładzie

1. Uruchom XAMPP>phpmyadmin

2. Utwórz bazę przykladXY (twoje inicjały), dodaj tabelę Pracownicy, 

Mamy wyświetlić informacje o liczbie pracowników, pracujących w zespołach wieloosobowych (więcej niż jeden pracownik) w ramach Działu IT. Końcowy wynik posortujemy rosnąco po liczbie pracowników.

IdPrac Nazwisko        Placa                 Zespol     Dzial

------ --------------- --------------------- ---------- ----------

1      Kasprzak        3000,00               DBA        IT

2      Norwid          2200,00               DBA        IT

3      Walewska        4000,00               Security   IT

4      Nowak           1300,00               Detal      Sprzedaz

5      Piotrowska      2300,00               Hurt       Sprzedaz

6      Lewandowski     3300,00               DBA        IT

7      Tusk            1100,00               HelpDesk   IT

8      Podemski        9500,00               Hurt       Sprzedaz

9      Gmoch           1750,00               Security   IT

10     Walendziak      1750,00               NULL       NULL

Krok 1 : FROM – określenie źródła (źródeł) i relacji między nimi

Na początku trzeba określić skąd będziemy czerpać dane. Dlatego pierwszym krokiem jest klauzula FROM. W naszym przykładzie zbiorem wejściowym jest jedna tabela – dbo.Pracownicy. Wynikiem przetwarzania pierwszego kroku będzie zatem tabela wirtualna VT1, zawierającą całą (tak, CAŁĄ !) zawartość tego zbioru.

Krok 2 : WHERE – filtrowanie rekordów

Krok ten, działa na wyniku poprzedniego. Czyli w naszym wypadku będzie operował na tabeli VT1. Może to się wydawać oczywiste, ale filtrować (wyszukiwać) możemy rekordy tylko takie, które są obecne w tabeli VT1.

W WHERE, dla każdego wiersza wyznaczany jest wynik logiczny zastosowanych wyrażeń (warunków). W naszym przykładzie stawiamy tylko jeden warunek. Interesują nas elementy zbioru VT1, dla których wartość kolumny Dział jest równa ciągowi znaków 'IT’.

Relacyjne systemy baz danych, w tym także SQL Server, bazują na logice trójwartościowej. Jak sama nazwa wskazuje, wynik porównań może przyjmować trzy wartości – TRUE, FALSE lub UNKNOWN. TRUE oraz FALSE nie trzeba tłumaczyć – albo jest coś równe czemuś, albo nie.

do kolejnego kroku, zostanie przekazana tabela VT2. Zawierać będzie tylko 6 rekordów – te dla których wynik wyrażeń wynosi TRUE.

Krok 3 – GROUP BY – grupowanie rekordów

Podobnie jak filtrowanie, GROUP BY jest blokiem opcjonalnym. W tym kroku tworzone są grupy rekordów. Definicję grupy tworzą kolumny (atrybuty) grupujące, wyszczególnione w GROUP BY.

W naszym prostym przykładzie, potrzebujemy znać informacje o liczbie pracowników w ramach zespołów. Grupować będziemy po kolumnie Zespol.

Krok 4 – HAVING – filtrowanie grup

HAVING jest bezpośrednio związany z operacjami na grupach. Jest więc logicznym, że ten krok przetwarzania nastąpi po etapie tworzenia grup czyli po GROUP BY. Ogólne zasady filtrowania są identyczne jak w WHERE. Do tabeli wynikowej VT4, trafią tylko takie rekordy (grupy), dla których wynik wyrażeń logicznych będzie TRUE.

Budując warunki filtracji grup rekordów, trzeba pamiętać o konsekwencji grupowania. Bezpośrednio odwoływać możemy się tylko do kolumn sekcji grupującej, do pozostałych za pośrednictwem funkcji agregujących.

W naszym scenariuszu, interesuje nas liczba elementów w sekcji danych surowych w obrębie grupy. Czyli z ilu pracowników składa się każda grupa. Wynik logiczny określony w HAVING, spełniają dwa rekordy i tylko te dwie grupy znajdą się w tabeli wynikowej VT4.

Krok 5 – SELECT – selekcja pionowa i kształtowanie wyniku

SELECT odpowiada za ostateczny kształt zbioru wynikowego czyli prezentowanie wyników. Możemy dokonać wyboru interesujących nas kolumn (selekcja pionowa), przekształceń (np. dodać do siebie wartości dwóch kolumn) czy wywoływać funkcje skalarne.

Krok 6 : ORDER BY – sortowanie wyniku

Sortujemy oczywiście efekt kroku SELECT, czyli tabelę VT5. Tylko tutaj w kwerendzie, możemy odwoływać się do zastosowanych w SELECT aliasów nazw kolumn.

SELECT Zespol , COUNT( IdPrac ) AS LiczbaPracowników

FROM dbo.Pracownicy 

WHERE Dzial = 'IT'

GROUP BY Zespol

HAVING COUNT ( IdPrac ) > 1 

ORDER BY LiczbaPracowników 

W tym kroku otrzymujemy finalny rezultat przetwarzania kwerendy – posortowany w określony sposób zbiór elementów (domyślnie rosnąco ASCending).

Opisany powyżej proces, ma zastosowanie do wszystkich typowych zapytań. Oczywiście można je mocno skomplikować, stosując np. zapytania skorelowane czy podzapytania. Jednak ich przetwarzanie i tak odbywa się zgodnie z opisanym powyżej sposobem.

https://www.sqlpedia.pl/logiczne-przetwarzanie-zapytan-sql/

https://www.sqlpedia.pl/logiczne-przetwarzanie-zapytan-sql-laczenie-wielu-tabel/

PHP w CMS, czyli gotowa strona

 Bardzo szybko programiści stworzyli liczne kompletne pakiety bazujące na PHP do łatwego zarządzania stroną WWW (CMS=Content Management System).

Istnieją 3 główne typy systemów CMS:

• systemy open-source, które najczęściej można wykorzystywać za darmo instalując na dowolnym hostingu WWW,

• komercyjne systemy CMS, za które trzeba zapłacić jak za zwykłe oprogramowanie lub odnawiać licencję, które też trzeba zainstalować na własnym serwerze.

• Serwisy SaaS czyli usługi, które zawierają już licencję wraz z usługą hostingową. W tym modelu działają liczne kreatory stron WWW.

A oto ranking: 

1. WordPress (65.0%, open-source) – napisany w PHP system zarządzania treścią pierwotnie przeznaczony do obsługi blogów. Jest od wielu lat najpopularniejszym systemem CMS co powoduje dużą dostępność gotowych szablonów i licznych wtyczek rozszerzających działanie systemu. Ciągły rozwój, przyjazność i prostota panelu powoduje, że jest szeroko wykorzystywany zarówno przez biznes, sklepy internetowe czy przez poczatkujących twórców stron i hobbystów.
2. Shopify (5.7%) – komercyjny serwis do prowadzenia sklepu internetowego.
3. Joomla (3.2%, open-source) – profesjonalny system CMS z natywną obsługą wielojęzyczności. W przeszłości stosowany w dużych skalowalnych portalach. Mniej intuicyjny interfejs i liczne problemy z bezpieczeństwem spowodowały znaczny spadek zainteresowania tym systemem.
4. Squarespace (2.6%) – komercyjny kreator stron online.
5. Wix (2.6%) – komercyjny kreator stron online.
6. Drupal (2.2%, open-source) – kolejny system open-source napisany w PHP. Stosowany na stronach ze stosunkowo większym ruchem od średniej. Duża złożoność i zaawansowane funkcje powodują, że tak jak Joomla! jest stosowany w specyficznych warunkach.
7. Bitrix – (1.5%) – właściwie 1C-Bitrix, rosyjski CMS znany w Rosji, Białorusi i Ukrainie.
8. Blogger (1.4%) – darmowy serwis blogowy.
9. Magento (1.1%, open-source) – napisany w PHP i w oparciu o Zend Framework system sklepowy popularny w Wielkiej Brytanii, Holandii, Niemczech i Australii.
10. OpenCart (1.0%, open-source) – napisany w PHP system sklepowy najbardziej popularny w Rosji, Ukrainie i Grecji.
11. PrestaShop (0.8%, open-source) – napisany w PHP system sklepowy najbardziej popularny we Francji, Polsce i Hiszpanii.
12. i wiele innych, mniej obecnie popularnych.

Jak skorzystać z takiego systemu i dostosować go do własnych potrzeb?

Zadanie wykonamy na przykładzie darmowego Quick CMS. 

Quick.Cms to jeden z najprostszych systemów CMS, mimo to wart uwagi. Skrypt działa świetnie z prostymi stronami firmowymi, ale są też bardzo zaawansowane implementacje.
Skrypt jest bezpłatny i jest wybierany przez projektantów i programistów, którzy chcą szybko i łatwo tworzyć swoje proste strony internetowe bez nadmiernego obciążenia serwera.
Można go pobrać i obejrzeć na stronie www.OpenSolution.org.

1. Pobierz pakiet ze strony https://opensolution.org/. Jest to plik spakowany .zip, przed użyciem trzeba go rozpakować.
2. Rozpakuj=wyodrębnij wszystko do folderu swojej strony WWW - w przypadku XAMPPa będzie to 

"C:\xampp\htdocs", 

lub katalog główny na hostingu.

3. Teraz przeglądamy zawartość, pobrane pliki. I jest instrukcja! Mamy dwie opcje: a/ zalogować się na stronie producenta i skorzystać z panelu administratora; lub b/ modyfikować stronę na piechotę.

4. Sprawdźmy najpierw jak wygląda nasza stronka - po uruchomieniu serwera PHP razem z Apache (serwer WWW) wystarczy zajrzeć na localhost.

5. Czas na modyfikacje: zmieniamy treść (ta łacina ...), style oraz grafikę. W tym celu najlepiej uruchomić panel administrator. Dokonamy tego wpisując w pasku adresu localhosta admin.php. Uruchomi się ten plik z oknem do wpisania danych weryfikacyjnych. Wpisz swój e-mail oraz dowolne hasło, którebędzie potrzebne aby skrypt logowania umożliwił zmiany. Przeczytaj instrukcje!

PHP język programowania stron WWW

 1. Prezentacja - podstawy

2. Więcej:  https://phpkurs.pl/

3. lub tu: https://www.phpdevs.pl/spis-tresci-kursu-php

Jak używać funkcji round()

Funkcja round() zwraca zaokrągloną wartość pierwszego argumentu z dokładnością do miejsca podaną w drugim argumencie. Drugi argument jest opcjonalny i domyślnie wynosi 0. Zaokrąglanie odbywa się zgodnie z regułami matematycznymi. Czyli:

<?php
echo round(13.4);
?>

wyświetli liczbę 13, a kod:

<?php
echo round(32.5);
?>

wyświetli liczbę 33. Podanie jawnie drugiego argumentu o wartości 0 nie wnosi niczego nowego w działaniu funkcji. Kod:

<?php
echo round(12.6, 0);
?>

wyświetli liczbę 13. Natomiast przy wartościach większych od zera, zaokrąglenia dokonuje się do części dziesiątych, setnych, tysięcznych…

<?php
echo round(3.976323, 2);
?>

Powyższy kod wyświetli nam 3.98. Przy wartościach mniejszych od zera drugiego argumentu, zaokrąglanie obywa się do dziesiątek, setek, tysięcy…

<?php
echo round(3421757, -3);
?>

Powyższy kod wyświetli 3422000

Obsługa formularzy w PHP

Do pobierania danych od użytkownika w HTML stosuje się formularze. W domyślnej konfiguracji PHP po przesłaniu danych formularza do skryptu PHP, konwertuje wszystkie elementy formularza na zmienne PHP. Poniższa strona HTML zawiera prosty formularz, do którego należy wpisać nazwę użytkownika i jego hasło. Po przesłaniu formularza do skryptu post1.phtml, zmienne $UserName i $Password będą zawierały wartości wpisane jako nazwę użytkownika i hasło.

<!-- To jest strona HTML, listing1.html -->

<html><head>
<title>Wydruk 3.1 - listing1.html</title>
</head>
<body>
  <form action="post1.phtml" method="post">

   Nazwa użytkownika: <input type="text" name="Username"><br>
   Hasło: <input type="password" name="Password"><br>
   <input type="submit" name="Submit" value="Wyślij">
  </form></body></html>

<!-- To jest skrypt PHP, post1.html -->

<html>
<head>
<title>Wydruk 3.1: post1.phtml</title>
</head>
<body>
<?php
  print( "Nazwa użytkownika: $Username<br>" );
  print( "Hasło: $Password<br>" );
?>
</body></html>

Skalarne i wielowartościowe elementy

Elementy formularzy HTML zawierają zwykle wartości skalarne. Zamieszczony na wydruku 1 przykład zawiera formularz z dwoma wartościami skalarnymi — nazwą użytkownika i hasłem. Można również tworzyć elementy formularza zawierające wiele wartości, na przykład listę wielokrotnego wyboru. Aby użyć nieskalarnych elementów formularza w PHP, należy dodać do nazwy nawiasy kwadratowe oznaczające zmienną tablicową. Formularz na wydruku 2 pokazuje takie wielowartościowe elementy formularza.

<form action="displayall.phtml" method="post">

  <table>

  <tr>

   <td valign="top">

   Wybierz kolory które lubisz:

   </td>
   <td valign="top">
    <!-- Nazwy są indeksami tablicy -->
    <select name="Colors[]" size="5" multiple>
     <option value="Red">Czerwony</option>
     <option value="Green">Zielony</option>
     <option value="Blue">Niebieski</option>
     <option value="Purple">Purpurowy</option>
     <option value="Yellow">Żółty</option>
    </select>
   </td>  </tr>
  <tr>
   <td valign="top">
    Wprowadź twój adres:
   </td>
   <td valign="top">
    <!-- Trzy linie na dane adresowe. Używamy notacji tablicowej aby zaznaczyć użycie wielu wierszy tablicy -->
    <input type="text" name="address[]"><br>
    <input type="text" name="address[]"><br>
    <input type="text" name="address[]"><br>
   </td>  </tr>
  <tr>
   <td colspan="2">
    <input type="submit" name="Submit" value="Wyślij">
   </td>  </tr>
  </table></form>

Po przesłaniu danych formularza z wydruku 2 do skryptu PHP, każda z tablic $Colors[] i $adress[] będzie zawierać zero lub więcej wartości.

Alternatywne metody odczytywania wartości z formularza

PHP posiada alternatywną metodę dostępu do danych przesłanych do skryptu. Predefiniowane zmienne tablicowe HTTP_GET_VARS i HTTP_POST_VARS zawierają tablice asocjacyjne elementów przesłanych do skryptu przy pomocy metod odpowiednio GET i POST. Skrypt wyświetlający dane z wydruku 1 może zostać przepisany w następujący sposób:

<!-- To jest skrypt PHP, post2.html -->
<html>
<head>
<title>Wydruk: post2.phtml</title>
</head>
 
<body>
<?php
  error_reporting( 255 );
  print( "Nazwa użytkownika: {$HTTP_POST_VARS['Username']}<br>" );
  print( "Hasło: {$HTTP_POST_VARS['Password']}<br>" );
?>
</body></html>

W niektórych przypadkach preferowane jest użycie zmiennych HTTP_GET_VARS lub HTTP_POST_VARS zamiast korzystania ze zmiennych globalnych. Na przykład możesz chcieć wyświetlić w czasie uruchamiania skryptu wartości wszystkich danych wysłanych z formularza. Jeżeli bardzo przejmujesz się wydajnością serwera WWW, można tu nieco zyskać, ponieważ PHP nie będzie musiał tworzyć zmiennych globalnych dla każdego z elementów formularza. Można więc tak skonfigurować PHP, aby nie udostępniał tych zmiennych globalnych i tak pisać skrypty, aby korzystały z wartości zawartych w tablicach HTTP_GET_VARS i HTTP_POST_VARS. Poniższa funkcja demonstruje użycie tablic HTTP_GET_VARS i HTTP_POST_VARS do wyświetlenia wszystkich danych przekazanych z formularza do skryptu:

function DisplayGetVars()

{

  global $HTTP_GET_VARS;

  DisplayArray( $HTTP_GET_VARS );
}
function DisplayPostVars()
{
  global $HTTP_POST_VARS;
  DisplayArray( $HTTP_POST_VARS );
}

Obie z tych funkcji opierają się o funkcję DisplayArray przedstawioną na wydruku 3.3. Jest to prosta funkcja wyświetlająca wszystkie elementy tablicy w tablicy HTML. Obsługuje ona rekurencyjnie elementy tablicy, które same są tablicami.

Wydruk 3.3. Funkcja DisplayArray

function DisplayArray( $aArray )
{
  // Upewniamy się, czy $aArray jest na pewno tablicą
  if ( is_array ($aArray ) && (count( $aArray ) > 0 ))
  {

  // Rozpoczęcie tabeli

  print ("<table border = \"1\">");
  // Wyświetlenie nagłówka tabeli
  print ( " <tr><th>Klucz</th><th>Wartość</th></tr>");
  // Wyświetlenie wszystkich par klucz/wartość z tabeli
  foreach( $aArray as $aKey => $aValue )
  {

  print( "<tr>" );

  // Jeżeli bieżąca wartość jest tablicą
  // wywołujemy rekurencyjnie funkcję
  // w przeciwnym wypadku wyświetlamy wartość

  if (!is_array( $aValue ))
  {

  // jeżeli wartość jest pusta, poinformujmy o tym

  if (empty( $aValue ))

  {

   print( "<td>$aKey</td><td><i>pusty</i></td>");

  }
  else
  {
   print( "<td>$aKey</td><td><i>$aValue</i></td>");
  }
  }
  else
  {
  print( "<td>$aKey(array)</td><td>");

  DisplayArray( $aValue );
  print ("</td>" );
  }
  print ("</tr>");
  }
  print ("</table>");
  }
  else
  {
  print("<i>pusty lub nieprawidłowy</i>");
  }
}

Używając tej funkcji można pisać własne skrypty PHP wyświetlające wartości wszystkich przesłanych elementów formularza. Poniższy skrypt, displayall.phtml powoduje wyświetlenie wszystkich danych przesłanych przez HTTP GET, HTTP POST i cookie odesłane przez przeglądarkę (cookie zostaną omówione w dalszej części tego rozdziału).

Wydruk 3.4. Skrypt displayall.phtml.

<html>
<head>
  <title>Wyświetlenie wszystkich elementów formularza</title>
</head>
<body>
<?php
  error_reporting( 255 );
  include( "../include/gen_form_funcs.php" );
?>
<h2>Cała zawartość HTTP_GET_VARS</h2>
<?php
  DisplayGetVars();

?> 

<br><br>
<h2>Cała zawartość HTTP_POST_VARS</h2>
<?php
  DisplayPostVars();
?> 
<br><br>
<h2>Cała zawartość HTTP_COOKIE_VARS</h2>
<?php
  DisplayCookieVars();
?> 

<br><br>
</body>
</html>

Kontrola poprawności danych formularza

Języki skryptowe działające na kliencie, takie jak JavaScript mogą być wykorzystywane do kontroli poprawności elementów formularza przed wysłaniem ich do serwera. Kontrola taka jest zalecana w przypadku tworzenia wysoce interaktywnych aplikacji WWW, ale nie jest ona całkowicie pewna, ponieważ może być niedostępna w wielu przeglądarkach i systemach operacyjnych. Dlatego dane muszą być kontrolowane na serwerze. PHP pozwala na stosowanie kilku metod kontroli poprawności danych, wykorzystując wyrażenia regularne, kontrolę typów danych lub przeszukiwanie słowników w bazie danych.

Funkcje wyrażeń regularnych w stylu POSIX to: ereg(), ereg_replace(), eregi(), eregi_replace() oraz split(). Do kontroli poprawności używa się funkcji ereg() i eregi(). Ogólna składnia tych funkcji jest następująca:

int ereg( string wzorzec, string ciag [, array dopasowanie] )

int eregi( string wzorzec, string ciag [, array dopasowanie] )

Obie funkcje wymagają wzorca wyrażenia regularnego, ciągu do przeszukania oraz opcjonalnej tablicy, która będzie zawierać dopasowania wzorca odnalezione w przeszukiwanym ciągu. Każda funkcja zwraca true, jeżeli wzorzec został odnaleziony w ciągu. Funkcja eregi() jest identyczna z ereg() poza tym, że przy przeszukiwaniu ignoruje ona wielkość liter.

Chociaż kontrola poprawności jest ważna, jeżeli nie musisz czegoś kontrolować, to nie rób tego. Zamiast tego można zastosować takie mechanizmy wprowadzania danych, które zmniejszają szansę pomyłki użytkownika. Na przykład zastosowanie listy rozwijalnej z miesiącami jest mniej pracochłonne niż kontrola poprawności wpisanych nazw. Zamiast wszędzie korzystać ze zwykłych pól tekstowych należy znaleźć miejsca, gdzie można zastosować listę, pole wyboru lub przyciski opcji.

Poniższy przykład pokazuje zastosowanie wyrażeń regularnych do kontroli poprawności amerykańskiego kodu pocztowego oraz dat w formacie ISO (YYYY-MM-DD). Zauważ, że w przykładach tych jest sprawdzany jedynie format a nie wartości.

<html>
  <head>
  <title>Kontrola poprawności amerykańskiego kodu pocztowego i daty ISO</title>
  </head>
 
  <body>
<?php
  $aCode1 = "83440";
  $aCode2 = "83440-1607";
  $aCode3 = "834";

  $aCode4 = "M6K 3E3";
  $aCodeFormat = "[0-9]{5}(-[0-9]{4})?";
  if ( ereg( $aCodeFormat, $aCode1 ) == True )
      print( "'$aCode1' jest poprawnym kodem pocztowym<br>" );
      else
      print( "'$aCode1' nie jest poprawnym kodem pocztowym<br>" );
  if ( ereg( $aCodeFormat, $aCode2 ) == True )
      print( "'$aCode2' jest poprawnym kodem pocztowym<br>" );
      else
  print( "'$aCode2' nie jest poprawnym kodem pocztowym<br>" );
  if ( ereg( $aCodeFormat, $aCode3 ) == True )
      print( "'$aCode3' jest poprawnym kodem pocztowym<br>" );
      else
  print( "'$aCode3' nie jest poprawnym kodem pocztowym<br>" );
  if ( ereg( $aCodeFormat, $aCode4 ) == True )

  print( "'$aCode4' jest poprawnym kodem pocztowym<br>" );
      else
      print( "'$aCode4' nie jest poprawnym kodem pocztowym<br>" );

 

  $aDate1 = "2000-06-29";
  $aDate2 = "2000-7-4";
  $aDate3 = "June 29, 2000";
  $aDate4 = "0000-99-99";
  $aDateFormat = "[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}";

  if ( ereg( $aDateFormat, $aDate1 ) == True )
      print( "'$aDate1' jest poprawnym formatem daty ISO<br>" );
      else
      print( "'$aDate1' nie jest poprawnym formatem daty ISO<br>" );
  if ( ereg( $aDateFormat, $aDate2 ) == True )
      print( "'$aDate2' jest poprawnym formatem daty ISO<br>" );
      else
      print( "'$aDate2' nie jest poprawnym formatem daty ISO<br>" );
  if ( ereg( $aDateFormat, $aDate3 ) == True )
      print( "'$aDate3' jest poprawnym formatem daty ISO<br>" );
      else
      print( "'$aDate3' nie jest poprawnym formatem daty ISO<br>" );

  if ( ereg( $aDateFormat, $aDate4 ) == True )
      print( "'$aDate4' jest poprawnym formatem daty ISO<br>" );
      else
      print( "'$aDate4' nie jest poprawnym formatem daty ISO<br>" );
?>
  </body>
</html>

Wyniki działania skryptu z wydruku 6 są następujące:

'83440' jest poprawnym kodem pocztowym
'83440-1607' jest poprawnym kodem pocztowym
'834' nie jest poprawnym kodem pocztowym
'M6K 3E3' nie jest poprawnym kodem pocztowym
'2000-06-29' jest poprawnym formatem daty ISO
'2000-7-4' jest poprawnym formatem daty ISO
'June 29, 2000' nie jest poprawnym formatem daty ISO
'0000-99-99' jest poprawnym formatem daty ISO

 

Aplikacja bazodanowa w MSAccess

 Aby system bazodanowy był funkcjonalny, nie wystarczą same tabelki. Potrzebujemy interfejs użytkownika, menu, formularze do modernizacji i wprowadzania danych a nawet dodatkowe moduły programowe.

Dlatego zrobimy sobie przykład takiej kompletnej aplikacji.

Etap I. Utworzenie bazy danych i tabel, wprowadzenie pierwszych danych.

Uruchom MS Access i utwórz pustą bazę danych. Wpisz nazwę: firma_XY (twoje inicjały), zapisz w folderze dokumenty, najlepiej w utworzonym do tego celu folderze roboczym.

Automatycznie utworzyła się pierwsza tabela. Dodajemy kolejne pola, nadając im nazwy:

imie, nazwisko, miasto, adres, pesel, stanowisko, uwagi.

i deklarując typ pola (krótki tekst). Pierwsze pole utworzyło się automatycznie i tego nie ruszamy. Jest to "klucz główny" typu "autoincrement" czyli autonumeracja. 

W nazwach tabel oraz pól stosujemy krótkie nazwy, na temat, bez spacji i polskich liter. Dopuszczalne są cyfry, np. imie1, imie2, lub podkreślenie, np. ulica_nr.

Teraz wprowadzamy kilka rekordów danych. Zamykamy tabelę - pojawi się monit o nazwę - nazwiemy ją "pracownicy". Nasza tabela pojawi się na liście z lewej strony.

Czas na modyfikację - dodanie czegoś co zabezpieczy przed prostymi błędami wpisywania. Dla naszej tabeli uruchamiamy widok projektu. Znajdziemy go w menu podręcznym lub w lewym górnym rogu - ekierka.

Teraz czas na zmodyfikowanie naszych pól. Zastosujemy tzw. maski wprowadzania. 

• Dla nr telefonu będzie to format liczbowy, maska 000000099 oznacza że 7 cyfr jest wymagane, a dwie ostatnie opcjonalne.
• Imię i nazwisko - decydujemy ile liter może mieć maksymalnie, np. 20 a do tego z dużej litery, czyli maska >L<??????????????????? oznacza, że pierwsza litera duża, pozostałe dowolne.
• Dla takich danych jak Pesel, NIP czy kod pocztowy mamy predefiniowane maski wprowadzania, należy wybrać z listy odpowiednie.
• Czy pole jest wymagane? decydujemy, które są obowiązkowe i ustawiamy na tak. Jeżeli pojawią się komunikaty o błędach, to należy zmodyfikować dane wg. ustawionych wymagań.

Po zapisaniu zmian i powrocie do widoku arkusza danych możemy wprowadzić kolejne rekordy danych - tym razem zaobserwujemy samoczynne modyfikowanie danych lub blokadę wprowadzania danych niepoprawnych. Poprzednie rekordy muszą być poprawione ręcznie.

W podobny sposób definiujemy kolejne dwie tabele -
Klienci - pola Nazwa_firmy, adres, telefon, przedstawiciel, typ. Typ firmy to będzie albo dostawca, albo odbiorca, i taki wymóg można zapisać w polu reguła poprawności w postaci "dostawca" or "odbiorca"
oraz Towary - Kod_towaru, nazwa_towaru, model, ilość, cena.

W przypadku towaru przyda się informacja od kogo go kupiliśmy, ale przecież tabela klienci już jest. Aby wybrać dostawcę z listy, a nie ponownie wpisywać, skorzystamy z listy rozwijanej. Zatem w widoku projektu w pozycji typ danych dla pola dostawca wybieramy "kreator odnośników". Kreator prowadzi nas po kolei i pozwala w intuicyjny sposób wybrać jakie dane i z  jakiej tabeli mają być wybierane, dodajmy jeszcze sortowanie alfabetycznie rosnąco. Wybierzmy tyko nazwa_firmy.