październik 2024 – EDU aktualizacja

Quest: Wyświetlanie komentarzy

Do strony z galerią dodaj wyświetlanie komentarzy (bez możliwości dodawania):

Etap 1

Zaplanuj i utwórz tablicę, która będzie przechowywać komentarze do zdjęć. Każdy komentarz musi być przypisany do konkretnego zdjęcia poprzez id zdjęcia. Każdy komentarz musi mieć ocenę 1-5. Każdy komentarz musi mieć treść. Wygeneruj kilkanaście komentarzy.

Etap 2

Dokończ funkcję która przeszuka tablicę z komentarzami i wyświetli te dotyczące wybranego zdjęcia:

function photo_comment($photo_id, $comments_table) {
  foreach (................) {
    echo ".............. <br>";
  }
}

Możesz też dodać wyświetlanie oceny za pomocą gwiazdek.

Etap 3

Dodaj funkcję do strony i w odpowiednich miejscach wykorzystaj ją.

Quest: Katalog rozwiązań IT

Problem

Niektóre problemy ze sprzętem komputerowym są typowe i ich rozwiązania warto zapamiętać. W internecie takie problemy są omawiane wiele razy – nie zawsze dobrze. Ten quest jest zachętą by w formie strony internetowej utworzyć katalog dobrze opisanych rozwiązań, a przy okazji przeczytać o typowych rozwiązaniach.

Opis

Strona ma być katalogiem. Najważniejsze jest więc znalezienie odpowiedniej ilości opisów problemów wraz z rozwiązaniami. Mogą to być artykuły, wątki na forach czy filmy.
W waszym katalogu każdy problem ma być odpowiednio opisany:
- Tytuł – krótki i komunikatywnie wyjaśniający o czym będzie mowa
- Opis – jedno lub dwa zdania na temat problemu
- Link
- Kategoria (komputer, peryferia, oprogramowanie,…)
- Zdjęcie lub grafika ułatwiająca szybkie odnalezienie treści (opcjonalnie)
- Imię osoby która wybrała daną treść i ją poleca
Strona internetowa może być prosta, ale ma wyglądać przyzwoicie. Istotna jest:
- merytoryczna treść strony
- logiczny podział problemów na kategorie
- wybrana technologia i jakość wykonania strony
- brak niewartościowego spamu
Technicznie stronę można wykonać na jeden z trzech sposobów omówionych w tutaj w sekcji „Możliwe rozwiązania” (pomijając githuba).
Na przygotowani strony jest miesiąc. Cała grupa otrzymuje identyczną ocenę. Jeśli ktoś z zespołu nie angażuje się, to rolą zespołu jest zaangażować niezaangażowanego lub zrobić za niego : )

Quest: React – początek

Problem

Chcemy tworzyć aplikacje webowe z bogatym frontendem łatwiej niż w surowym JS. Jedną z opcji jest React. React wymaga użycie Node.js. Nowy projekt warto postawić przy pomocy Vite.

Instalacja środowiska i tworzenie projektu:

Zainstaluj Node.js
Uruchom Node z wiersza poleceń i upewnij się że działa na przykład poleceniami
node -v
npm -v
Utwórz przykładowy projekt:
cd folder_projektu
npm create vite@latest (wybieramy: nazwa>React>JavaScript)
cd nazwa
npm install
npm run dev
Otwórz w przeglądarce utworzony gotowiec oraz przeanalizuj kod. Jeśli kod Cię nie zniechęcił…

Tutorial

Proponuję swoje początki Reacta oprzeć na tym tutorialu. Mi zajął on kilka dni : )

Treść questa

Utwórz podobny, ale nie identyczny projekt.

Quest: Git i GitHub

Git to system kontroli wersji, który umożliwia śledzenie zmian w kodzie, ułatwiając współpracę w zespołach programistycznych oraz zarządzanie różnymi wersjami projektu. Działa lokalnie na komputerze i pozwala między innymi na łatwe odzyskiwanie wcześniejszych wersji kodu.

GitHub to platforma do hostowania zdalnych repozytoriów Git, która umożliwia programistom współpracę, przeglądanie kodu i zarządzanie projektami w chmurze. Alternatywami dla GitHub są m.in. GitLab, Bitbucket czy SourceForge.

Podstawowe pojęcia

Repository (repozytorium) – Miejsce, gdzie przechowywane są wszystkie wersje projektu. Może być lokalne (na komputerze) lub zdalne (na serwerze).
Commit – Zatwierdzenie zmian w repozytorium. Każdy commit zapisuje migawkę stanu projektu w danym momencie.
Branch (gałąź) – Oddzielna linia rozwoju projektu. Umożliwia pracę nad różnymi funkcjami lub wersjami jednocześnie bez wpływu na główną wersję kodu (domyślnie master lub main).
Merge – Łączenie zmian z jednej gałęzi do drugiej. Zazwyczaj używane, aby scalić zmiany z gałęzi pobocznej do głównej (np. feature do main).
Staging (index) – Proces przygotowania zmian do zatwierdzenia. Pliki, które są w obszarze staging, będą uwzględnione w następnym commicie.
Pull – Pobieranie najnowszych zmian zdalnego repozytorium i scalanie ich z lokalnym.
Push – Wysłanie lokalnych commitów do zdalnego repozytorium.
Clone – Skopiowanie istniejącego zdalnego repozytorium do lokalnej maszyny.
Fork – Kopiowanie zdalnego repozytorium do własnego konta na GitHubie (lub innym hostingu Git), co pozwala na niezależną pracę nad projektem.
Origin – Domyślna nazwa dla zdalnego repozytorium, z którego projekt został sklonowany.
Remote – Zdalne repozytorium, z którym połączone jest lokalne repozytorium.

Szybki start

Najpierw zainstaluj Git na komputerze: git-scm.com.

Wszystkie typowe funkcje można łatwo wyklikać, ale warto przynajmniej przeczytać jakie polecenia są wykonywane w tle w czasie klikania. Na początek wystarczy rozumieć to co w filmie i umieć wyklikać to co poniżej.

Jeśli chcesz używać poleceń – wykonuj je w wierszu poleceń swojego systemu (cmd, terminal) lub w wierszu poleceń swojego edytora kodu. Na początek potrzebna jest minimalna konfiguracja:

git config --global user.email "adres@poczty.pl"<br>
git config --global user.name "piotrek"<br>

git config --global user.email "adres@poczty.pl"<br>
git config --global user.name "piotrek"<br>

Przykładowe polecenia GIT

git init                 # Inicjalizuje nowe repozytorium
git clone <url>          # Klonuje zdalne repozytorium
git status               # Pokazuje stan plików
git add <plik>           # Dodaje plik do staging area
git add .                # Dodaje wszystkie zmienione pliki
git commit -m "wiadomość" # Zapisuje zmiany z komentarzem
git push                 # Wysyła commity do zdalnego repo
git pull                 # Pobiera i scala zmiany ze zdalnego repo
git branch               # Wyświetla listę gałęzi
git branch <nazwa>       # Tworzy nową gałąź
git checkout <gałąź>     # Przełącza na inną gałąź
git checkout -b <nazwa>  # Tworzy i przełącza na nową gałąź
git merge <gałąź>        # Scala gałąź z obecną
git log                  # Pokazuje historię commitów
git diff                 # Pokazuje niezapisane zmiany
git reset <plik>         # Usuwa plik ze staging area
git rm <plik>            # Usuwa plik i dodaje zmianę do staging
git stash                # Tymczasowo zapisuje niezacommitowane zmiany
git stash pop            # Przywraca ostatnie stash
git remote -v            # Pokazuje zdalne repozytoria

git init                 # Inicjalizuje nowe repozytorium
git clone <url>          # Klonuje zdalne repozytorium
git status               # Pokazuje stan plików
git add <plik>           # Dodaje plik do staging area
git add .                # Dodaje wszystkie zmienione pliki
git commit -m "wiadomość" # Zapisuje zmiany z komentarzem
git push                 # Wysyła commity do zdalnego repo
git pull                 # Pobiera i scala zmiany ze zdalnego repo
git branch               # Wyświetla listę gałęzi
git branch <nazwa>       # Tworzy nową gałąź
git checkout <gałąź>     # Przełącza na inną gałąź
git checkout -b <nazwa>  # Tworzy i przełącza na nową gałąź
git merge <gałąź>        # Scala gałąź z obecną
git log                  # Pokazuje historię commitów
git diff                 # Pokazuje niezapisane zmiany
git reset <plik>         # Usuwa plik ze staging area
git rm <plik>            # Usuwa plik i dodaje zmianę do staging
git stash                # Tymczasowo zapisuje niezacommitowane zmiany
git stash pop            # Przywraca ostatnie stash
git remote -v            # Pokazuje zdalne repozytoria

Zadanie

Wybierz prosty projekt z kilkoma plikami napisanymi w dowolnym języku.
Zainicjuj folder projektu w git.
Dodaj pliki.
Utwórz startowy commit. Pamiętaj o sensownym opisie.
Wprowadź zmiany w kodzie.
Utwórz kolejny commit. Pamiętaj o sensownym opisie.
Dodaj nowy plik do projektu i znów utwórz nowy commit. Pamiętaj o sensownym opisie.
Utwórz zdalne repozytorium (np. na GitHubie) i połącz je z lokalnym repozytorium.
Wprowadź zmiany w kodzie.
Utwórz kolejny commit. Pamiętaj o sensownym opisie.
Zsynchronizuj zdalne i lokalne repozytorium.
Ustaw repozytorium zdalne jako publiczne i wyślij mi linka
Teraz możesz używać swojego konta na GitHubie jako quasi-bloga : )

Quest: Responsywna tabela

Ta prosta tabela nie jest responsywna. Możesz to sprawdzić zmniejszając okno przeglądarki.

Lorem ipsum 1	Lorem ipsum 2	Lorem ipsum 3	Lorem ipsum 4	Lorem ipsum 5	Lorem ipsum 6	Lorem ipsum 7
8	9	10	11	12	13	14
15	15	17	18	19	20	21

ale jeśli przetestujesz poniższy kod…

<!DOCTYPE html>
<html lang="pl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="grid responsywność">
<meta name="description" content="Tabela dopasowuje sie do szerokości ekranu.">
<title>Responsywna tabela - lista sprzętu</title>
<style type="text/css">

	/* dla telefonów i tabletów */
	div.status {display: none;}
	.kontener-grida {grid-template-columns: auto auto auto auto auto;}
	.uwiw {grid-row: span 4;}
	.sala {grid-column: span 2;}
	.kategoria {grid-column: span 2;}
	.model {grid-column: span 4;}
	.obudowa {grid-column: span 2;}
	.data-zakupu {grid-column: span 2;}
	.operacje4x {grid-column: span 4;}
	.szeroki-div-grida {display: none;}
		
	/* dla wszystkich */
	.kontener-grida {display: grid;grid-gap: 1px;background-color: #adadad;padding: 1px;}
	.kontener-grida > div {background-color: rgba(255, 255, 255, 0.8);padding: 5px;}

/* dla komputerów */
@media only screen and (min-width: 1200px) {
	.kontener-grida {grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;}
	.uwiw {grid-row: span 1;}
	.sala {grid-column: span 1;}
	.kategoria {grid-column: span 1;}
	.model {grid-column: span 1;}
	.obudowa {grid-column: span 1;}
	.data-zakupu {grid-column: span 1;}
	.szeroki-div-grida {grid-column: 1 / span 11; display: block;}
	.operacje4x {grid-column: span 4;}
	div.status {display: block;}
	}
/* dla dużych monitorów */
@media only screen and (min-width: 1300px) {
	.kontener-grida {width:1260px; margin:0 auto 0 auto;}
	}
	.button {
		background-color: #868686;border: none;color: white;padding: 3px 2px;
		text-align: center;text-decoration: none;display: inline-block;margin: 1px 1px;
		cursor: pointer;background-color: white;color: black; border: 1px solid #8b8b8b;
		}
</style>
</head>
<body style=" font-family: Yanone, Verdana, sans-serif; font-size:12px;  background: #ffffff"><form action="#">
		<div class="kontener-grida">
		<div class="szeroki-div-grida">
			<span style="padding: 10px 0 10px 10px; width:48%; display: inline-block; text-align: left;">
			<a href="#operacja=instr" class="button">Instrukcja</a> <a href="#operacja=users" class="button">Użytkownicy</a> <a href="#operacja=device_add" class="button">Dodaj urządzenie</a>
			<a href="#n=10000&sort=wiek&uwiw=bezstarych&sala=0&kateg=0&model=0&status=0" class="button">Resetuj filtry</a>
			</span>
			<span style="padding: 10px 0 10px 0; width:49%; display: inline-block; text-align: right;">Ranga: admin,
			 użytkownik: maciej 
			<a href="#operacja=password" class="button">Zmiana hasła</a>
			<a href="#operacja=logout" class="button">Wyloguj</a></span>
			<span style="padding: 10px 0 10px 10px; width:97%; display: inline-block; text-align: left;"><a href="#operacja=notatki" class="button">Notatki</a> Ilość: <select name="n">
					<option value="50">50</option>
					<option value="200">200</option>
					<option value="800">800</option>
					<option value="10000" selected="selected">10 000</option>
				</select>  
			Sortuj wg: <select name="sort">
					<option value="sala">sala</option>
					<option value="kategoria">kategoria</option>
					<option value="wiek" selected="selected">wiek</option>
					<option value="uwiw">uwiw</option>
					<option value="kasacja">data kasacji</option>
				</select>     
			<input type="checkbox" name="szczeg" checked=""> Szczegóły      
			<input type="submit" value="Wyświetl" class="button">
			</span>
		</div>
		<div class="uwiw">
		Ewidencja</div>
		<div class="sala">Sala</div>
		<div class="kategoria">Kategoria</div>
		<div class="model">Model</div>
		<div class="obudowa">Obudowa</div>
		<div class="data-zakupu">Data zakupu</div>
		<div class="status">Status</div>
		<div class="operacje operacje4x">Operacje</div>
					<div class="uwiw">UW/8134</div>
					<div class="sala">235</div>
					<div class="kategoria">monitor</div>
					<div class="model">Model: BenQ GW2270<br></div>
					<div class="obudowa"></div>
					<div class="data-zakupu">2019-02-13</div>
					<div class="status">2021-11-09 potwierdzony</div> 
					<div class="operacje"><a href="#operacja=edit&id=728" class="button">Edytuj</a></div>
					<div class="operacje"><a href="#operacja=przen&id=728" class="button">Przenieś</a></div>
					<div class="operacje"><a href="#operacja=del&id=728" class="button">Kasacja</a></div>
					<div class="operacje"><a href="#operacja=hist&id=728" class="button">Historia</a></div> 
					<div class="uwiw">UW/7172</div>
					<div class="sala">235</div>
					<div class="kategoria">monitor</div>
					<div class="model">Model: Philips 223V5L<br>Przekątna: 21,5<br></div>
					<div class="obudowa">czarny</div>
					<div class="data-zakupu">2018-07-01</div>
					<div class="status">2021-09-27 potwierdzony</div> 
					<div class="operacje"><a href="#operacja=edit&id=660" class="button">Edytuj</a></div>
					<div class="operacje"><a href="#operacja=przen&id=660" class="button">Przenieś</a></div>
					<div class="operacje"><a href="#operacja=del&id=660" class="button">Kasacja</a></div>
					<div class="operacje"><a href="#operacja=hist&id=660" class="button">Historia</a></div> 
					<div class="uwiw">UW/7273</div>
					<div class="sala">235</div>
					<div class="kategoria">monitor</div>
					<div class="model">Model: Philips 223V5L<br>Przekątna: 21,5<br></div>
					<div class="obudowa">czarny</div>
					<div class="data-zakupu">2018-07-01</div>
					<div class="status">2021-09-27 potwierdzony</div> 
					<div class="operacje"><a href="#operacja=edit&id=659" class="button">Edytuj</a></div>
					<div class="operacje"><a href="#operacja=przen&id=659" class="button">Przenieś</a></div>
					<div class="operacje"><a href="#operacja=del&id=659" class="button">Kasacja</a></div>
					<div class="operacje"><a href="#operacja=hist&id=659" class="button">Historia</a></div> 
					<div class="uwiw">UW/1796</div>
					<div class="sala">235</div>
					<div class="kategoria">komputer</div>
					<div class="model">Model: stacjonarny i3-4500 MSI-B250<br></div>
					<div class="obudowa">czarny Silentium</div>
					<div class="data-zakupu">2018-06-27</div>
					<div class="status">2021-11-09 potwierdzony</div> 
					<div class="operacje"><a href="#operacja=edit&id=626" class="button">Edytuj</a></div>
					<div class="operacje"><a href="#operacja=przen&id=626" class="button">Przenieś</a></div>
					<div class="operacje"><a href="#operacja=del&id=626" class="button">Kasacja</a></div>
					<div class="operacje"><a href="#operacja=hist&id=626" class="button">Historia</a></div> 
					<div class="uwiw">UW/7917</div>
					<div class="sala">235</div>
					<div class="kategoria">komputer</div>
					<div class="model">Model: stacjonarny i3-4500 MSI-B250M<br>Płyta: MSI B250M PRO-VDH</div>
					<div class="obudowa">czarny Silentium</div>
					<div class="data-zakupu">2018-06-27</div>
					<div class="status">2021-11-09 potwierdzony</div> 
					<div class="operacje"><a href="#operacja=edit&id=625" class="button">Edytuj</a></div>
					<div class="operacje"><a href="#operacja=przen&id=625" class="button">Przenieś</a></div>
					<div class="operacje"><a href="#operacja=del&id=625" class="button">Kasacja</a></div>
					<div class="operacje"><a href="#operacja=hist&id=625" class="button">Historia</a></div> 
					<div class="uwiw">UW/1761</div>
					<div class="sala">235</div>
					<div class="kategoria">switch</div>
					<div class="model">Model: Tp-Link TL-SG3216<br>Inne: mobilna duża szafa<br></div>
					<div class="obudowa"></div>
					<div class="data-zakupu">2017-01-01</div>
					<div class="status">2018-10-24 potwierdzony</div> 
					<div class="operacje"><a href="#operacja=edit&id=583" class="button">Edytuj</a></div>
					<div class="operacje"><a href="#operacja=przen&id=583" class="button">Przenieś</a></div>
					<div class="operacje"><a href="#operacja=del&id=583" class="button">Kasacja</a></div>
					<div class="operacje"><a href="#operacja=hist&id=583" class="button">Historia</a></div> 
					<div class="uwiw">UW/3153</div>
					<div class="sala">235</div>
					<div class="kategoria">switch</div>
					<div class="model">Model: D-Link DGS-1224T <br>Inne: mobilna duża szafa</div>
					<div class="obudowa">19'</div>
					<div class="data-zakupu">2011-01-01</div>
					<div class="status">2019-02-28 potwierdzony</div> 
					<div class="operacje"><a href="#operacja=edit&id=580" class="button">Edytuj</a></div>
					<div class="operacje"><a href="#operacja=przen&id=580" class="button">Przenieś</a></div>
					<div class="operacje"><a href="#operacja=del&id=580" class="button">Kasacja</a></div>
					<div class="operacje"><a href="#operacja=hist&id=580" class="button">Historia</a></div> 
					<div class="uwiw">UW/1120</div>
					<div class="sala">235</div>
					<div class="kategoria">projektor</div>
					<div class="model">Model: Benq MP-735<br></div>
					<div class="obudowa"></div>
					<div class="data-zakupu">2010-12-30</div>
					<div class="status">2018-10-23 potwierdzony</div> 
					<div class="operacje"><a href="#operacja=edit&id=499" class="button">Edytuj</a></div>
					<div class="operacje"><a href="#operacja=przen&id=499" class="button">Przenieś</a></div>
					<div class="operacje"><a href="#operacja=del&id=499" class="button">Kasacja</a></div>
					<div class="operacje"><a href="#operacja=hist&id=499" class="button">Historia</a></div> <div class="szeroki-div-grida">Liość pozycji: 46</div>
					</div></form></body></html>

Zbuduj swoją responsywną tabelę wykorzystując display: grid; Możesz do tego użyć AI, jednak pamiętaj, że to Ty masz rozumieć kod. Następnie osadź tę tabelę wewnątrz sekcji <article> w „Prostym kodziku #2” z questa HTML i CSS beginner tak by strona wyświetlała się poprawnie zarówno na telefonie, tablecie jak i na komputerze PC

Quest: Galeria w PHP

Utwórz lub wygeneruj skrypt wyświetlający obrazy z tablicy w formie galerii. Prosta wersja galerii ma wyświetlać miniatury (3 w wierszu) wraz z opisem i kategorią, a po kliknięciu w miniaturę ma wyświetlać powiększony obraz wraz z opisem i kategorią. Ulepszona wersja ma dodatkowo po kliknięciu w kategorię wyświetlać galerię obrazów z tej kategorii. Poświęć czas na zrozumienie kodu i poeksperymentowanie z nim. Uprość go.

$photos = [
    ['img_id'=>1, 'img'=>'img/img1.jpg', 'opis'=>'A beautiful sunset.', 'category_id'=>1],
    ['img_id'=>2, 'img'=>'img/img2.jpg', 'opis'=>'A serene beach.', 'category_id' => 2],
    ['img_id'=>3, 'img'=>'img/img3.jpg', 'opis'=>'A blooming flower.', 'category_id' => 3],
    ['img_id'=>4, 'img'=>'img/img4.jpg', 'opis'=>'Snow-covered mountains.', 'category_id' => 1],
    ['img_id'=>5, 'img'=>'img/img5.jpg', 'opis'=>'A forest in autumn.', 'category_id' => 3],
    ['img_id'=>6, 'img'=>'img/img6.jpg', 'opis'=>'City skyline at night.', 'category_id' => 2],
    ['img_id'=>7, 'img'=>'img/img7.jpg', 'opis'=>'A waterfall flowing.', 'category_id' => 3],
    ['img_id'=>8, 'img'=>'img/img8.jpg', 'opis'=>'A boat on a calm lake.', 'category_id' => 1],
    ['img_id'=>9, 'img'=>'img/img9.jpg', 'opis'=>'A field of lavender.', 'category_id' => 2],
    ['img_id'=>10, 'img'=>'img/img10.jpg', 'opis'=>'A snowy forest.', 'category_id'=>1],
    ['img_id'=>11, 'img'=>'img/img11.jpg', 'opis'=>'Aerial view of coral.', 'category_id'=>3],
    ['img_id'=>12, 'img'=>'img/img12.jpg', 'opis'=>'Market square.', 'category_id' => 2],
];

$categories = [
    ['category_id'=>1, 'name'=>'Nature'],
    ['category_id'=>2, 'name'=>'Cityscapes'],
    ['category_id'=>3, 'name'=>'Wildlife'],
];

Dalszy etap to zintegrowanie galerii ze stroną z questa Prosta strona w PHP. Ten etap koniecznie zrób ręcznie. Galerię dodaj jak jedną z podstron w menu, tak by menu było widoczne zarówno na stronie kategorii jak i w widoku pojedynczego zdjęcia, ale tak, żeby nie była widoczna na wszystkich podstronach.

Dobrze byłoby rozdzielić kod na kilka plików:

dane.php – tablice z danymi
index.php główny plik strony
galeria.php – skrypt galerii
styl.css – arkusz styli

Przydatna będzie wtedy funkcja include() lub require().

Potrafisz się uczyć?

A jeśli potrafisz, to czy uczysz się na zawsze, czy na tydzień? Moim zdaniem (i nie tylko moim) warto uczyć się trwale. Ciągle czegoś nowego, bo wtedy jest…

Ciekawość to energia nauki. Pytaj: „Dlaczego?”
…i znajduj odpowiedzi, bo zapamiętujemy to, co racjonalne, logiczne.
Zamieniaj teorię w działanie.
Praktyka i ruch wzmacniają ślady w pamięci.
Rób sobie proste i bezstresowe testy.
Wtedy usilnie wydobywasz informacje i tworzysz trwały ślad pamięciowy.
Korzystaj z fiszek
Regularnie wracaj do nich po dniach i tygodniach.
Dziel czas nauki na sesje z długimi przerwami.
To eliminuje złudzenie, że już umiesz wynikające z bycia na świeżo z materiałem.
Zmieniaj miejsce nauki.
To tworzy dodatkowe ślady pamięciowe.
Głębokie przetwarzanie informacji jest kluczowe.
Inne spojrzenie, wypisanie punktów, znalezienie przykładów lub wyjątków, stworzenie grafiki to sposoby głębszego wgryzania się w tekst.
Samodzielnie twórz notatki.
Organizuj i przetwarzaj treści samodzielnie. Podkreślanie czy zakreślanie to za mało.
Przeplataj treści zamiast uczyć się temat po temacie.
To sprawi, że mózg będzie pracować na wysokich obrotach.
Robiąc notatki odfiltrowuj tylko ważne informacje.
To wymaga wysiłku, ale przyczynia się do głębszego przetwarzania.
Wykorzystaj mnemotechniki.
Czasem pomocne są sztuczki pamięciowe, takie jak metoda pałacu pamięci.
Otaczaj się bodźcami związanymi z nauką.
Wykorzystaj pamięć utajoną. W ten sposób dziecko uczące się mówić poznaje gramatykę.
Ucz się przez nauczanie innych.
Nawet jeśli uczysz się sam, wyjaśniaj informacje na głos.

Powyższe metody to streszczenie jednej książki o skutecznym uczeniu się. Polecam ją każdemu, kto nie lubi działać nieskutecznie.

Quest: Prosta strona w PHP

Problem

Używanie AI do rozbudowy kodu (a nie do wygenerowania całego kodu).

Zadanie

Zrozum kod. Dodaj do niego tablicę z reklamami, tablicę z linkami do socjal mediów oraz tablicę z adresami obrazków. Dodaj kod php wyświetlający losową reklamę, zestaw linków do mediów społecznościowych oraz trzy losowe zdjęcia z tablicy (zamiast stałego artykułu). Nie wolno wklejać całego kodu do AI. Sam połącz kody!

Kod początkowy

<?php
$podstrony = [
    1 => [
        'nazwa' => 'Strona główna',
        'tresc' => 'Witamy na naszej stronie głównej! Znajdziesz tutaj najnowsze informacje i aktualności.'
    ],
    2 => [
        'nazwa' => 'O nas',
        'tresc' => 'Jesteśmy firmą zajmującą się tworzeniem innowacyjnych rozwiązań dla biznesu.'
    ],
    3 => [
        'nazwa' => 'Kontakt',
        'tresc' => 'Skontaktuj się z nami przez formularz lub telefonicznie. Czekamy na Twoje wiadomości!'
    ],
];
// Pobieranie id podstrony z URL
$id = isset($_GET['id']) ? (int)$_GET['id'] : 1; // Domyślnie ustawiamy na 1

// Sprawdzanie, czy podstrona o danym ID istnieje
if (!isset($podstrony[$id])) {
    $id = 1; // Ustawienie domyślnej podstrony, jeśli ID jest nieprawidłowe
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Strona 1</title>
	<style type="text/css">
	@media only screen and (min-width: 900px) {
		#kontener { width: 850px; margin: 0 auto 0 auto; }
		main { float: left; width: 70%; }
		aside { float: right; width: 28%; }
		footer { clear: both; }
		}
	</style>
</head>
<body>
	<div id="kontener">
		<header>
			<h1>Witaj na mojej stronie!</h1>
		</header>
		<div>
			<main>
				<article>
					<h2><?php echo $podstrony[$id]['nazwa']; ?></h2>
					<p><?php echo $podstrony[$id]['tresc']; ?></p>
					
				</article>
				<article>
					<h2>Stały artykuł</h2>
					<p>Nam id rutrum velit. Ut gravida tristique neque et pretium. Sed eget viverra orci. </p>
                    <p>Praesent vulputate, mi id auctor commodo, sapien augue rhoncus justo, non malesuada nibh diam nec dolor. </p>
				</article>
			
			</main>
			<aside>
				<nav>
					<h3>Menu</h3>
					<ul>
                        <?php foreach ($podstrony as $key => $podstrona): ?>
                            <li><a href="?id=<?php echo $key; ?>"><?php echo $podstrona['nazwa']; ?></a></li>
                        <?php endforeach; ?>
                            <li><a href="http://zszwolsztyn.pl">ZSZ</a></li>
					</ul>
				</nav>
				<section>
					<h3>Reklamy</h3>
					<p>Lorem ipsum dolor sit emet...</p>
				</section>
				<section>
					<h3>Social media</h3>
					<p>Lorem ipsum dolor sit emet etc...</p>
				</section>
			</aside>
		</div>
		<footer>
			<div> pk.sth © 2024</div>
			<div>Strona o niczym by PK przygotowane specjalnie dla 4I. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
		</footer>
	</div>
</body>
</html>

EDU aktualizacja

Archiwum miesięczne: październik 2024

Quest: Wyświetlanie komentarzy

Etap 1

Etap 2

Etap 3

Quest: Katalog rozwiązań IT

Problem

Opis

Quest: React – początek

Problem

Instalacja środowiska i tworzenie projektu:

Tutorial

Treść questa

Quest: Git i GitHub

Podstawowe pojęcia

Szybki start

Przykładowe polecenia GIT

Zadanie

Quest: Responsywna tabela

Quest: Galeria w PHP

Potrafisz się uczyć?

Quest: Prosta strona w PHP

Problem

Zadanie

Kod początkowy

edu-update.pl

Napisz do mnie

Porozmawiajmy

Jeśli uważasz,