Materiały LinEtc

Materiały zawarte w tym repozytorium zawierają ćwiczenia, poradniki oraz dokumentację związaną z zagadnieniami technologii informacyjnej i informatyki.

Spis treści:

Narzędzia

Poniżej znajdziesz instrukcje instalacji, konfiguracji oraz wskazówki użycia narzędzi programistycznych. Pamiętaj o konwencjach stosowanych w różnych systemach operacyjnych.

Konwencje

Linux

Dystrybucji systemu Linux jest bardzo dużo, nasze instrukcje dotyczą systemów opartych na Debianie, np. Linux Mint, MX Linux, Ubuntu, i używających menedżera pakietów apt.

Katalog główny w systemie Linux oznaczany jest znakiem / (ukośnik, ang. slash ). Znak ten jest również separatorem katalogów w ścieżkach, np. /home/user/.config.

Większość działań polega na wpisywaniu poleceń w terminalu. Terminali w Linuksie jest wiele, domyślny dla danego systemu znajdziesz pod nazwą “Terminal”.

Prefiks ~S nie jest częścią polecenia, ale znakiem zachęty. Symbol ~ oznacza katalog domowy użytkownika, znak $ wskazuje, że terminal uruchomiony jest z uprawnieniami zwykłego użytkownika. Znak zachęty może opcjonalnie zawierać katalog, w którym należy wydać polecenie, np. ~/projekt$.

Jeżeli jakieś działanie wymaga uprawnień administracyjnych, polecenie będzie poprzedzone wywołaniem sudo, np. sudo apt install geany.

Windows

W systemie Windows podstawowym terminalem jest wiersz poleceń uruchamiany komendą cmd. Lepszym wyborem jest PowerShell, a w przypadku repozytoriów Git Bash – terminal instalowany razem z klientem Git.

W systemie Windows partycja systemowa (w pewnym stopniu odpowiednik katalogu głównego) oznaczana jest jako C:\. Separatorem katalogów w ścieżkach jest znak \ (odwrócony ukośnik, ang. backslash ).

Jeżeli jakieś polecenie wymaga uprawnień administracyjnych, należy wydać je w terminalu uruchomionym po wybraniu opcji “Uruchom jako administrator”.


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Interpreter Pythona

Aktualnie zalecaną i wspieraną wersją interpretera Pythona jest 3.x.

Linux

W systemach Linux Python 3 jest szeroko stosowany i dostępny w standardowej instalacji. W termnalu uruchomimy interpreter po wydaniu polecenia:

~$ python3

Windows

Informacja

Przed rozpoczęciem instalacji Pythona zaktualizuj system. Przed instalacją nowszej wersji interpretera, odinstaluj starą.

Na stronie Python Releases for Windows klikamy link Last Python 3 Release - ..., pobieramy instalator Windows installer (64-bit) Recommended i uruchamiamy instalację.

_images/python01.png

Ostrzeżenie

Podczas instalacji zaznaczamy opcję “Add Python 3.x to Path” i wybieramy “Customize installation”.

_images/python02.png
_images/python03.png

Można zaznaczyć opcje “Install for all users” i “Precompile standard library” (prekompilacja biblioteki standardowej).

_images/python04.png

W ostatnim oknie klikamy “Close”.

Informacja

Jeżeli podczas pierwszego uruchomienia zobaczymy komunikat zapory systemowej, zezwalamy na dostęp wybierając sieci prywatne.

Po instalacji uruchom wiersz poleceń (cmd lub PowerShell) i sprawdź poprawność instalacji uruchamiając interpreter:

_images/python05.jpg

Dodatkowe narzędzia i pakiety

Podczas tworzenia większych aplikacji i projektów bardzo przydatne są dodatkowe narzędzia. Do instalowania i zarządzania dodatkowymi pakietami używa się menedżera pip3 oraz środowisk wirtualnych. W terminalu wydajemy polecenie, które zainstaluje odpowiednie pakiety:

~$ sudo apt-get install python3-pip python3-venv

Pakiety można instalować ogólnosystemowo za pomocą polecenia:

~$ sudo pip3 install nazwa_pakietu

– przy czym sudo używamy tylko w systemie Linux, ale nie w Windows. W taki sposób można zainstalować rozszerzony interpreter IPython i/lub aplikację Jupyter QtConsole:

~$ sudo pip3 install ipython3 qtconsole

Pakiety wykorzystywane na potrzeby konkretnej aplikacji lepiej instalować w katalogu użytkownika – wystarczy, że do polecenia dodamy opcję –user:

~$ pip3 install nazwa_pakietu --user

– lub w wirtualnym środowisku, czyli osobnym katalogu.

Środowisko wirtualne
  1. Uruchom terminal (wiersz poleceń). Jeżeli chcesz, przejdź do katalogu, w którym chcesz utworzyć środowisko wirtualne.

  2. Wydaj polecenie:

    python3 -m venv pve
    

    Informacja

    Przełącznik -m wskazuje moduł, którego chcemy użyć, pve to umowna nazwa katalogu, który zostanie utworzony i do którego zostaną skopiowane podstawowe pliki Pythona.

  3. Jeżeli chcesz skorzystać z wirtualnego środowiska, musisz go aktywować:

    ~$ source pve/bin/activate
    

    Informacja

    W systemie Windows: pve\Scripts\activate.bat

    Po udanej aktywacji przed ścieżką zobaczymy nazwę katalogu z wirtualnym środowiskiem w okrągłych nawiasach, np. (pve).

  4. Po aktywacji środowiska warto zaktualizować menedżer pakietów:

    pip install pip --upgrade
    
  5. W środowisku wirtualnym można instalować dowolne pakiety bez uprawnień administracyjnych:

    pip install nazwa_pakietu
    
_images/pve_linux.png
  1. Listę zainstalowanych pakietów wyświetlisz poleceniem: pip list
Frameworki

Poniżej lista często używanych pakietów dodatkowych. ALternatywne polecenia działają w systemach Linux opartych na Debianie (Ubuntu, Linux Mint).

  1. Aplikacje WWW Django: pip3 install django
  2. Aplikacje Flask: pip3 install flask flask-wtf peewee
  3. Aplikacje okienkowe PyQt5: pip3 install pyqt5 albo apt install python3-pyqt5
  4. Wykresy z Matplotlib: pip3 install matplotlib albo apt install python3-matplotlib

Problemy w systemie Windows

Jeżeli możesz, zainstaluj system Linux, unikniesz wielu poniższych problemów. Jeżeli musisz używać systemu Windows, wcześniej czy później zetkniesz się z problemami. Poniżej kilka wskazówek, które mogą pomóc je rozwiązać.

  1. Przed instalacją interpretera Pythona odinstaluj ewentualne starsze wersje i zrestartuj system.
  2. W przypadku błędów odmowa dostępu (ang. access denied) podczas aktualizowania menedżera pip lub instalowania wypróbuj następujące sposoby:
    1. spróbuj zrestartować system, aby zakończyć ewentualne zadania wykorzystujące Pythona, i ponów instalację
    2. podczas aktualizacji użyj opcji –user, np.: python -m pip install --upgrade --user pip
    3. podczas instalacji użyj opcji –user, np.: python -m pip install --user pyqt5
    4. uruchom wiersz poleceń (cmd lub PowerShell) jako administrator i dopiero wtedy wydaj polecenie

Materiały

  1. Język Python

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Kompilator C/C++

Linux

W systemie Linux potrzebne narzędzia są zazwyczaj obecne, ale w razie potrzeby wystarczy doinstalować pakiet g++ odpowiednim menedżerem pakietów, np.:

~$ sudo apt-get install g++

Windows

Code::Blocks

W systemie Windows możemy zainstalować środowisko IDE Code::Blocks, które zawiera kompilator. Ze strony Download the binary release pobieramy instalator codeblocks-20.03mingw-setup.exe zawierający kompilator MinGW w wersji 64-bitowej lub odpowiednią wersję 32-bitową. Podczas próby instalacji Windows 10 może chwalić się, że ochronił nasz komputer. Ignorujemy tę mądrość i wybieramy “Uruchom mimo to”:

_images/cb01.png

Instalujemy z domyślnymi ustawieniami. Podczas pierwszego uruchomienia powinniśmy wskazać domyślny kompilator. Niestety Windows może go nie wykryć, pozostaje kliknąć “OK.

_images/cb02.png

Aplikację można ewentualnie powiązać z plikami typu C/C++ – ale jeżeli planujemy używać innego edytora, warto zaznaczyć “No, leave everything as it is”.

Ustawienia kompilatora

Jeżeli podczas pierwszego uruchomienia Windows nie wykrył kompilatora, wybieramy z menu polecenie “Settings / Compiler...”. W wyświetlonym oknie klikamy zakładkę “Toolchain executables”. Wskazujemy odpowiednią ścieżkę i pliki w kolejnych polach:

_images/cb05.png
  1. “Compiler’s installation directory” – klikamy trzy kropki i wskazujemy katalog z plikami kompilatora, najczęściej: C:\Program Files (x86)\CodeBlocks\MinGW\bin.
  2. “C compiler”, “C++ compiler”, “Linker...” – w razie potrzeby zamieniamy nazwy wersji 32-bitowe na 64-bitowe dopisując x86_64-w64-, np.: x86_64-w64-mingw32-gcc.exe.
  3. Zatwierdzamy zmiany klikając “OK”.

Warto dodać katalog kompilatora do ścieżki systemowej, żeby można go było łatwo używać w innych edytorach kodu, np. Geany. Otwieramy wiersz poleceń (cmd lub PowerShell) i wydajemy polecenie:

setx PATH "%PATH%;C:\Program Files (x86)\CodeBlocks\MinGW\bin"

Restartujemy wiersz poleceń i wydajemy komendę:

g++ --version

Powinniśmy zobaczyć odpowiedź, czyli informację o wersji kompilatora.

Programowanie

Pisanie prostych, jednoplikowych programów w Code::Blocks nie jest specjalnie wygodne, o wiele lepszym wyborem są tutaj inne edytory, np. Geany. Jednak jeżeli chcesz spróbować programować w Code::Blocks po uruchomieniu środowiska kliknij “Create a new project”.

_images/cb06.png

Następnie mamy dwie możliwości: utworzenie całego projektu lub pojedynczego pliku. W pierwszym przypadku wybieramy Projects / Console applications, w kolejnych oknach wskazujemy język C++, podajemy nazwę projektu, katalog z projektami, wybieramy kompilator i wersje do stworzenia:

_images/cb07.png
_images/cb08.png
_images/cb09.png

Na koniec plik główny projektu o nazwie main.cpp znajdziesz po lewej stronie okna głównego w panelu “Projects”.

Druga możliwość to dodanie pojedynczego pliku. W tym celu w oknie “New from template” wybierz Files / C/C++ Source, a dalej wskaż ścieżkę i nazwę dodawanego pliku.

_images/cb10.png
_images/cb11.png

Niestety, plik dodany w ten sposób będzie pusty i musisz szablon programu C++ skądś skopiować.

Wskazówka

Polecenia kompilacji, budowania i uruchamiania razem z przypisanymi im skrótami klawiaturowymi znajdziesz w menu “Build”.

Kmpilator MinGw

Innym rozwiązaniem jest instalacja kompilatora z projektu MinGw bez środowiska IDE. W tym celu pobieramy instalator mingw-get-setup.exe i uruchamiamy.

_images/mingw01.jpg

W oknie wyboru pakietów zaznaczamy widoczne poniżej paczki, w tym przede wszystkim mingw32-gcc-g++, a następnie wybieramy polecenie Installation/Apply.

_images/mingw02.jpg

Po pobraniu i rozpakowaniu wskazanych narzędzi oraz zakończeniu instalatora (Close) trzeba dodać do ścieżki systemowej położenie kompilatora i linkera; dzięki temu będzie można korzystać z tych i innych narzędzi bezpośrednio z Geany lub okienka konsoli tekstowej. W oknie “Uruchamianie” (WIN+R) wpisujemy polecenie wywołujące okno “Zmienne środowiskowe” – można je również uruchomić z okna właściwości komputera:

_images/mingw03.jpg
_images/mingw04.jpg

Klikamy przycisk Nowa i tworzymy nową zmienną użytkownika zgodnie z podanym zrzutem:

_images/mingw05.jpg
_images/mingw06.jpg

Wskazówka

Powyżej przedstawiliśmy instalację narzędzi MinGw z konta zwykłego użytkownika. Można w razie potrzeby czynności te wykonać również z konta administratora, co pozwoli udostępnić narzędzia wszystkim użytkownikom. Podobnie ścieżkę do kompilatora itd. można dopisać do zmiennej systemowej PATH, dzięki czemu wszyscy użytkownicy będą mogli wywoływać narzędzia bez podawania pełnej ich lokalizacji.

Materiały

  1. MinGw

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Edytory

Edytory programistyczne to edytory plików źródłowych zapisywanych w postaci tekstu. Wszystkie oferują mechanizmy ułatwiające kodowanie, takie jak kolorowanie składni, wsparcie standardów kodowania, automatyczne domykanie nawiasów, cudzysłowów, tagów, autowcięcia, dopełnianie poleceń, czy wreszcie kompilowanie, budowanie i uruchamianie tworzonego kodu. Wymienione poniżej edytory mają budowę modułową, tzn. obsługują wtyczki, za pomocą których rozszerzamy możliwości programu.

Geany

_images/geany01.png

Geany to proste i lekkie środowisko IDE dostępne na licencji GNU General Public Licence.

Linux

W systemach linuksowych korzystamy z dedykowanych menedżerów, np. w systemach opartych na Debianie (MX Linux, Ubuntu, Linux Mint) wystarczy wpisać w terminalu:

~$ sudo apt-get install geany geany-plugins

W Ubuntu można też skorzystać z graficznego instalatora “Oprogramowanie”.

_images/geany02.png
Windows

Ze strony Download / Releases ściągamy instalator geany-1.38_setup.exe (wersja może być nowsza) i uruchamiamy. Podczas instalacji nic nie musimy zmieniać. Następnie ze strony Download Geany-Plugins pobieramy geany-plugins-1.38_setup.exe (wersja może być nowsza) i doinstalowujemy wtyczki. Podczas instalacji niczego nie musimy zmieniać.

Konfiguracja

Dodatkowe schematy kolorowania składni można pobrać ze strony Geany Themes on GitHub. Katalog colorschemes należy skopiować do katalogu konfiguracyjnego edytora, np. w systemie Linux będzie to ~/.config/geany. Wyboru schematu kolorowania dokonujemy w menu Widok / Schematy kolorów.

Wtyczki włączamy w menu Narzędzia / Menedżer wtyczek. Warto zaznaczyć przynajmniej “Addons” i “Przeglądarka plików”. Zanim wyjdziemy z okna naciskamy przycisk “Preferencje” i na zakładce “Przeglądarka plików” zaznaczamy opcję “Podążanie za ścieżką do bieżącego pliku”.

W menu Edycja / Preferencje CTRL+ALT+P w zakładce Edytor / Wcięcia zaznaczamy opcje, jak na zrzucie poniżej:

_images/geany03.png

W następnej zakładce Auto-uzupełnianie zaznaczmy m.in. domykanie nawiasów:

_images/geany04.png

Czcionki można dostosować w Edycja / Preferencje / Interfejs.

Kodowanie

W zależności od języka programowania nowe pliki można tworzyć na podstawie szablonów: Plik / Nowy z szablonu. Menu Zbuduj zawiera polecenia kompilacji (F8), budowania (F9) oraz uruchamiania kodu (F5). Narzędzia wykorzystywane do wykonywania tych akcji definiujemy w Zbuduj / Zdefiniuj polecenia budowania. Np. dla kodu Pythona warto (zwłaszcza w systemie Linux) wskazać interpreter w wersji 3:

_images/geany05.png

Wcięcia wstawiają się automatycznie lub poprzez naciśnięcie klawisza TAB. Jeżeli chcielibyśmy wciąć od razu cały blok kodu, zaznaczamy go i również używamy TAB lub CTRL+I, zmniejszenie wcięcia uzyskamy naciskając CTRL+U.

Sublime Text

_images/st301.png

Sublime Text to szybki, lekki i elastyczny edytor dla programistów. Wybrane narzędzia:

  • szybkie i wygodne otwieranie plików: CTRL+P,
  • wielokrotna selekcja i edycja: po zaznaczeniu zmiennej CTRL+D,
  • zaznaczenie wszystkich wystąpień i jednoczesna edycja: ALT+F3,
  • lista wszystkich poleceń: CTRL+SHIFT+P,
  • lista wszystkich definicji: CTRL+R,
  • równoczesna edycja kilku plików: View / Layout,
  • pokazanie / ukrycie panelu bocznego: CTRL+K, CTRL+B.
Linux

W systemach opartych na Debianie (MX Linux, Ubuntu, Linux Mint) wchodzimy na stronę Linux Package Manager Repositories i wykonujemy instrukcje dla menedżera apt wybierając wersję stabilną (ang. stable).

_images/st302.png
W Windows

Po wejściu na stronę Sublime Text – Download pobieramy instalator. Instalujemy standardowo dwukrotnie klikając pobrany plik.

Konfiguracja

Konfiguracja wszystkich ustawień wymaga przeczytania dokumentacji programu oraz instalowanych wtyczek. Zamiast tego możesz spróbować wgrać przygotowane archiwa, które znajdziesz w serwisie GitHub pod adresem lo1cgsan/konfig.

Archiwum dla Linuksa (st3-linux.tgz) po pobraniu wypakuj poleceniem:

~/Pobrane$ tar xzvf st3-linux.tgz -d ~/.config

Archiwum dla Windowsa (st3-windows.zip) wypakuj przy użyciu wbudowanego lub zainstalowanego menedżera archiwum do katalogu: C:\Użytkownicy\nazwa_użytkownika\Dane aplikacji lub C:\Users\nazwa_użytkownika\AppData\Roaming.

Systemy budowania

Do kompilacji (budowania) i uruchamiania Sublime Text wykorzystuje tzw. systemy budowania. Dostępne systemy sprawdzisz i wybierzesz w Tools / Build System. W archiwach konfiguracyjnych dodane zostały systemy budowania języka Python. Jeżeli z nich skorzystasz:

  • szkielet skryptu Pythona wstawisz wpisując “py” i naciskając klawisz TAB;
  • skrypty Pythona uruchomisz naciskając CTRL+SHIFT+R;
  • interaktywną konsolę otworzysz po naciśnięciu CTRL+SHIFT+P, wpisaniu python3 i wybraniu “SublimeREPL: Python3”
  • lokalne pliki HTML otworzysz w przeglądarce (domyślnie Mozilla Firefox) naciskając CTRL+B i wybierając “Browser”
  • pliki źródłowe C++ skompilujesz / uruchomisz naciskając CTRL+SHIFT+B i wybierając “C++” / “C++ - Uruchom”.
Repozytoria Git-a

Repozytoria obsłużymy za pomocą:

  • wtyczki GitSavvy (jest zawarta w archiwach) – wciśnij CTRL+SHIFT+P, wpisz “git” i wybierz “git:status”;

  • lub dedykowanego programu Sublime Merge. W systemie Linux Ubuntu itp., jeżeli dodaliśmy wcześniej repozytoria dla SublimeText3, wystarczy wydać polecenie:

    $ sudo apt install sublime-merge
    

    W Windows pobieramy instalator ze strony Download i instalujemy.

    Poprawnie zainstalowany program można wywołać z poziomu SublimeText, jeżeli otworzyliśmy katalog zawierający repozytorium. Wystarczy kliknąć charakterystyczną dla Gita rozgałęzioną ikonę na dolnym pasku statusu.

Wtyczki

Poniżej uwagi dla tych, którzy chcą samodzielnie instalować wtyczki.

Wtyczki do ST przechowywane są w repozytorium Package Control, zarządzamy nimi z poziomu edytora. Instalacja każdej wtyczki polega na wywołaniu listy poleceń CTRL+SHIFT+P i wpisaniu Install Package. Na początku trzeba zainstalować wtyczkę Package Control: wpisz Install Package Control i zatwierdź Enter.

W podobny sposób instalujemy inne wtyczki. Na początek warto zainstalować następujące:

  • Anaconda – podstawowy dodatek do programowania w Pythonie dostępny w menu podręcznym podczas edycji plików ”.py”
  • SublimeREPL – pozwala uruchamiać kod Pythona w terminalu osadzonym w edytorze za pomocą skrótu CTRL+SHIFT+R
  • Emmet – rozszerzanie / uzupełnianie składni HTML, CSS itp.
  • View in Browser – otwiera edytowane dokumenty HTML w przeglądarce (domyślnie Firefox), ale można to zmienić w konfiguracji: Preferences > Package Settings > View In Browser
  • Color Picker – dodaje próbnik kolorów wywoływany skrótem CTRL+SHIFT+C

Ustawienia wtyczek opisane są w dokumentacji. Globalne ustawienia edytora definiujemy w Preferences > Settings – User. Ustawienia dla wybranego języka programowania dostępne są po wybraniu Preferences > Settings – More > Syntax Specific – User, ewentualne zmiany należy zapisać pod nazwą LANGUAGE.sublime-settings, np. Python.sublime-settings w podkatalogu Packages/User.

Wskazówka

Położenie i zawartość katalogu, o którym mowa powyżej, możesz sprawdzić wybierając Preferences / Browse Packages i wchodząc do katalogu User.

VS Code

_images/vscodium.png

Visual Studio Code to otwartoźródłowy edytor programistyczny firmy Microsoft. Wykorzystuje framework Electron napisany w języku Java Script, dlatego zajmuje relatywnie dużo miejsca i jest wolniejszy od aplikacji tworzonych w innych językach. Oferuje jednak wiele przydatnych narzędzi (m. in. wbudowana obsługa Gita) i ułatwień, działa na różnych systemach.

Linux

Wersje binarne przygotowywane przez Microsoft nie są zgodne z zasadami licencji FLOSS, zawierają również telemetrię. Dlatego lepiej użyć wersji przygotowanych w ramach projektu VSCodium. W systemach opartych na Debianie (MX Linux, Ubuntu, Linux Mint) na stronie projektu klikamy “INSTALL” i postępujemy zgodnie z instrukcjami z sekcji “Install with Package Manager (Linux) -> Debian / Ubuntu (deb package)”.

Windows

Ze strony Download Visual Studio Code pobieramy wersję “User” (instalacja dla jednego użytkownika) lub “System installer” (instalacja ogólnosystemowa) i instalujemy.

Konfiguracja

Jak każdy profesjonalny edytor programistyczny, program wymaga poznania odpowiednich skrótów klawiaturowych i doinstalowania dodatków zależnych od używanego języka programowania. Pomaga w tym bardzo dobrze przygotowana dokumentacja dla większości języków, np.:

Dostępne są również przewodniki omawiające programnowanie w wybranych językach, np.:

Wspomnieć można, że wersja dla Windowsa pozwala zainstalować dodatek umożliwiający pracę na projektach zapisanych w środowisku WSL (Windows Subsystem for Linux). Nie jest to co prawda rozwiązanie dorównujące wygodzie programowania w Linuksie, ale jako proteza wystarczy.

Python
  • Po zainstalowaniu rozszerzenia Microsoft “Python” i otwarciu skryptu Pythona, możesz zobaczyć komunikat typu “Linter pylint is not installed”, wybierz wtedy “Install”.
  • Błędy składniowe w skryptach zobaczysz po naciśnięciu CTRL+SHIFT+M
  • Skrypty Pythona uruchomisz używając ikony w prawym górnym rogu okna edytora lub z menu podręcznego “Run Python File in Terminal”.
  • Interaktywny interpreter Pythona wywołasz po naciśnięciu CTRL+SHIFT+P i wpisaniu “Python: Start REPL”.
C++
  • Po zainstalowaniu rozszerzenia Microsoft “C/C++” trzeba utworzyć nowe zadanie budowania plików C++, należy postąpić zgodnie z instrukcjami na stronie dokumentacji C++ Edytora (zobacz wyżej). Po utworzeniu zadania kompilację wywołujemy naciśnięciem CTRL+SHIFT+B, natomiast pliki wynikowe uruchamiamy ręcznie w terminalu.

PyCharm

_images/pycharm2022.png

PyCharm to profesjonalne, komercyjne środowisko programistyczne dostępne za darmo do celów szkoleniowych. Interfejs nie został na razie spolszczony.

To IDE doskonale wspiera proces uczenia się. Udostępnia nawigację po kodzie, podpowiedzi, wykrywa błędy i ma wbudowanych wiele innych udogodnień.

Najprościej zainstalować

Zarówno w systemach Linux, jak i MS Windows, na początku pobieramy i instalujemy aplikację Toolbox App. Po jej uruchomieniu wybieramy instalację PyCharma w wersji Professional (po okresie próbnym wymaga rejestracji) lub Community (darmowa).

Bezpłatna licencja

Każdy nauczyciel może wystąpić o klucz licencyjny przy pomocy formularza dostępnego na stronie producenta.

Polski słownik

W programie możemy włączyć sprawdzanie polskiej pisowni. Naciskamy Ctrl+Alt+S i wyszukujemy “languages” i na zakładce “Natural Languages” dodajemy język polski.


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Git

Git Source Code Mirror – to rozproszony system wersjonowania kodów źródłowych napisany przez Linusa Torvaldsa, twórcę jądra Linux. Skrót SCM bywa również rozwijany jako software configuration management, co oznacza “zarządzanie konfiguracją oprogramowania”. Gita można używać do rozwijania zarówno małych, jak i dużych projektów (np. Arch Linux, GIMP, jQuery).

Repozytorium zdalne

Przede wszystkim wchodzimy na stronę https://github.com/ i zakładamy konto podając: nazwę użytkownika, email i hasło. Następnie tworzymy nowe repozytorium. Możemy postępować wg poniższych instrukcji:

_images/git_repo01.jpg
_images/git_repo02.jpg

W ten sposób założyliśmy repozytorium zdalne.

Klient Gita

Treściami projektu można zarządzać bezpośrednio w serwisie GitHub za pomocą przeglądarki. Częściej jednak pracujemy w repozytorium lokalnym, obsługiwanym za pomocą jakiegoś programu. Do nauki Gita najlepszy jest podstawowy klient tekstowy działający w terminalu.

W systemie Linux instalacja sprowadza się do użycia odpowiedniego menedżera pakietów:

w Debianie (Ubuntu, Mint):
~$ sudo apt-get install git
w Archu (Manjaro, Antergos):
~# pacman -S git

Podczas pracy w Linuksie:

  • polecenia mogą być wydawane w dowolnym terminalu;
  • ~$ – oznacza katalog domowy użytkownika, czyli ścieżkę /home/nazwa_użytkownika;
  • ~/mojprojekt$ – to podkatalog projektu utworzony w katalogu domowym.

W systemie Windows tego samego klienta tekstowego pobieramy ze strony http://git-scm.com/download/win i instalujemy z konta zwykłego użytkownika zaznaczając wskazane na poniższym zrzucie opcje:

_images/git_shell_install.jpg

Podczas pracy w Windows:

  • używamy konsoli Git Bash (dostępna po zainstalowaniu klienta);
  • katalog projektu proponujemy utworzyć na partycji innej niż systemowa (zob. zrzut w nast. sekcji);
  • jeżeli Git Bash nie działa, używamy standardowej konsoli cmd, ale wtedy musimy pamiętać o kilku różnicach.

Informacja

  • Poniższy scenariusz napisano w oparciu o system Linux, który dla Gita jest środowiskiem naturalnym. Nie ma jednak problemów z jego realizacją w Windows.
  • Na potrzeby scenariusza katalogi i pliki tworzone będą za pomocą poleceń konsoli, w codziennej pracy użyjemy oczywiście menedżera plików i edytora tekstu.
  • Po zrozumieniu podstaw Gita repozytoria można obsługiwać za pomocą dedykowanych programów, np. SmartGit, lub z poziomu narzędzi programistycznych, np. Sublime Text 3 czy PyCharm.

Konfiguracja

W terminalu wydajemy polecenia:

~$ git config --global user.name "nazwa_użytkownika"
~$ git config --global user.email email_użytkownika
~$ git config --global push.default simple
~$ git config --list

W powyższych poleceniach ustawiamy nazwę użytkownika i e-mail, które będą wykorzystywane do podpisywania wprowadzanych w projekcie zmian. Ustawienie push.default simple określa sposób synchronizowania repozytorium lokalnego ze zdalnym.

Wskazówka

W Windows można ustawić opcję: git config --global core.autocrlf true, jeśli nie wyświetliła się w podglądzie konfiguracji. Dzięki temu Git będzie automatycznie konwertował znaki końca linii, o czym informują komunikaty typu LF will be replaced by CRLF.

Klonowanie repozytorium

Repozytorium lokalne można tworzyć od podstaw (zob. dalej), ale prościej jest sklonować repozytorium zdalne utworzone wcześniej w serwisie GitHub.

W terminalu wydajemy polecenie:

~$ git clone https://github.com/nazwa_użytkownika/nazwa_repozytorium.git [nazwa_katalogu]

Najważniejszy jest argument Git URL, czyli schematyczny adres repozytorium, który kopiujemy ze strony głównej repozytorium po kliknięciu w przycisk “Clone or download”:

_images/git_repo03.jpg
_images/git_bash_win.jpg

Początek pracy z Gitem i klonowanie repozytorium w Git-Bash pod Windows

W rezultacie w bieżącym katalogu utworzony zostanie katalog o nazwie repozytorium lub o nazwie podanej w opcjonalnym argumencie [nazwa_katalogu].

W ten sposób utworzyliśmy repozytorium lokalne.

Stany plików

Podczas pracy nad projektem stan pliku zależy od miejsca, w którym się on znajduje. Git wyróżnia trzy przestrzenie:

  • katalog roboczy (ang. working directory);
  • poczekalnia (ang. staging area);
  • repozytorium (katalog .git).
_images/areas.png

Możliwe stany plików to:

  • nieśledzony (ang. untracked) – nowe pliki w katalogu roboczym;
  • śledzony (ang. tracked):
    • niezmieniony (ang. unmodified) w katalogu roboczym;
    • zmieniony (ang. modified) w katalogu roboczym;
    • pliki w poczekalni (ang. staged) czekające na zatwierdzenie w migawce (ang. snapshot).
_images/lifecycle.png

Typowy przebieg pracy z Gitem polega na:

  • dodawaniu i zmienianiu plików w katalogu roboczym;
  • przenoszeniu ich do poczekalni – git add;
  • sprawdzaniu stanu repozytorium – git status;
  • zatwierdzaniu zmian z poczekalni w migawce tworzonej w repozytorium – git commit.

Przećwiczymy to wydając polecenia:

~/mojprojekt$ echo "Moje pierwsze repozytorium" > repo.txt
~/mojprojekt$ git status
~/mojprojekt$ git add repo.txt
~/mojprojekt$ git status
~/mojprojekt$ git commit -m "Opis projektu"

Informacja

Każda migawka powinna być opatrzona informacją o dokonanych zmianach. Umożliwia to opcja -m. Jeżeli ją pominiemy, Git otworzy domyślny edytor, w którym należy zmiany opisać.

_images/git_init.jpg

Zmiany zdalne

Wprowadźmy kilka przykładowych zmian w projekcie za pomocą interfejsu serwisu GitHub:

  • Zmieniamy plik README.md. Klikamy jego nazwę, a następnie ikonę edycji w prawym górnym rogu obok przycisku “History”. Dopisujemy coś, przewijamy w dół, wpisujemy opis zmiany i zatwierdzamy klikając “Commit changes”.
  • Następnie tworzymy nowy plik pierwszy.txt klikając przycisk “Create new file” w głównym widoku repozytorium. Wpisujemy coś i zatwierdzamy zmiany.
_images/git_zdalne.jpg

Pobranie i scalenie

Ponieważ dokonaliśmy zmian w repozytorium zdalnym, repozytorium lokalne jest nieaktualne. Sytuacja taka może być częsta, zwłaszcza gdy projekt rozwijany jest zespołowo. Dlatego codzienną pracę warto rozpoczynać od ściągnięcia (ang. fetch) zmian zdalnych i scalenia ich (ang. merge) z wersją lokalną:

~$ cd mojprojekt
~/mojprojekt$ git pull [origin] [master]

Opcjonalne argumenty określają nazwy repozytorium zdalnego i lokalnej gałęzi. Ewentualny komunikat “Already up-to-date.” oznacza brak zmian na serwerze.

_images/git_pull.jpg

Zmiany lokalne

Praca w repozytorium lokalnym jest najwygodniejsza. Przećwiczmy typowe sytuacje. Zmienimy treść pliku README.md i utworzymy plik drugi.txt.

~/mojprojekt$ echo "Pierwsza zmiana lokalna" >> README.md
~/mojprojekt$ echo "Drugi plik" > drugi.txt
~/mojprojekt$ git status
~/mojprojekt$ git diff
~/mojprojekt$ git add --all
~/mojprojekt$ git diff
~/mojprojekt$ git diff --staged
  • git diff – pokazuje różnice między katalogiem roboczym a poczekalnią, ale bez plików nieśledzonych;
  • git add --all – dodaje do poczekalni wszystkie zmiany z katalogu roboczego;
  • git diff --staged – pokaże zmiany między poczekalnią a ostatnią migawką projektu.

Zauważmy, że po dodaniu zmian do poczekalni polecenie git diff nie pokazuje żadnych różnic.

Zróbmy teraz kolejną zmianę w pliku README.md i sprawdźmy status:

~/mojprojekt$ echo "Druga zmiana lokalna" >> README.md
~/mojprojekt$ git status
~/mojprojekt$ git diff
~/mojprojekt$ git diff --staged
_images/git_status.jpg

Jak widać, plik README.md ma dwie wersje! Jedna (poprzednia) znajduje się w poczekalni, a aktualna w katalogu roboczym i ma status zmienionej. Chcąc włączyć ją do najbliższej migawki, należałoby ją ponownie dodać poleceniem git add. Zrobimy inaczej, zatwierdzimy zmiany:

~/mojprojekt$ git commit -m "Zmiana pliku README i inne"
~/mojprojekt$ git status -vv
~/mojprojekt$ git diff HEAD
_images/git_status2.jpg

Która wersja pliku README.md trafiła do migawki? Oczywiście ta z poczekalni, o czym upewniają nas ostatnie polecenia:

  • git status -vv – pokazuje stan repozytorium oraz wszystkie zmiany w śledzonych plikach;
  • git diff HEAD – pokazuje wszystkie różnice między ostatnią migawką a śledzonymi plikami.

Zatwierdzanie z pominięciem poczekalni można zrobić tak:

~/mojprojekt$ git commit -am "Druga zmiana README.md"
~/mojprojekt$ git status
_images/git_commit_am.jpg
  • git commit -am "komentarz" – zatwierdza zmiany wszystkich śledzonych plików (opcja -a).

Informacja

Komunikaty statusu typu: Your branch is ahead of ‘origin/master’ by 2 commits. – oznaczają, że mamy zatwierdzone lokalne zmiany nieprzesłane do repozytorium zdalnego.

Cofanie zmian

Wycofanie z poczekalni: utworzymy teraz katalog doc, a w nim pliki index.rst i slownik.txt z przykładową treścią.

~/mojprojekt$ mkdir doc
~/mojprojekt$ echo "Dokumenty" > doc/index.rst
~/mojprojekt$ echo "Słownik" > doc/slownik.txt
~/mojprojekt$ git add .
~/mojprojekt$ git status
~/mojprojekt$ git reset HEAD doc/slownik.txt
~/mojprojekt$ git status
  • git add . – dodaje wszystkie nowe i zmienione pliki do poczekalni;
  • git reset HEAD nazwa_pliku – usuwa plik z poczekalni, w tym wypadku plik wraca do stanu “nieśledzony”.
_images/git_reset.jpg

Zmiana i wycofanie zatwierdzenia – załóżmy, że po zatwierdzeniu zmian dokonaliśmy kolejnych poprawek i uznaliśmy, że powinny zostać uwzględnione w ostatniej migawce:

~/mojprojekt$ git commit -m "Początek dokumentacji"
~/mojprojekt$ echo "Spis treści" >> doc/index.rst
~/mojprojekt$ git add .
~/mojprojekt$ git commit --amend -m "Początek dokumentacji poprawiony"
~/mojprojekt$ git reset --soft HEAD~1
  • git commit --amend – poprawia (ang. amend) poprzednie zatwierdzenie, tj. dodaje zmiany z poczekalni i ewentualnie zmienia komentarz;
  • git reset --soft HEAD~1 – wycofuje ostatnią migawkę.

Informacja

HEAD podobnie jak master jest nazwą wskaźnika, ale odnosi się do aktualnej migawki. Zazwyczaj wskaźniki master i HEAD oznaczają to samo miejsce, ale jeżeli przełączymy się do innej gałęzi, albo cofniemy do wcześniejszej migawki wskaźnik HEAD zostanie przesunięty.

_images/git_reset2.jpg

Wycofanie zmian z katalogu roboczego: wykonamy teraz kolejne polecenia, aby zobaczyć, jak cofać zmiany niedodane do poczekalni:

~/mojprojekt$ echo "Katalog projektu" > doc/katalog.rst
~/mojprojekt$ echo "Słownik" > doc/slownik.rst
~/mojprojekt$ git add .
~/mojprojekt$ echo "Dokumentacja projektu" >> doc/katalog.rst
~/mojprojekt$ git diff
~/mojprojekt$ git checkout -- doc/katalog.rst
~/mojprojekt$ cat doc/katalog.rst
_images/git_checkout.jpg

Ostrzeżenie

Polecenie git checkout -- nazwa_pliku usuwa wprowadzone zmiany bezpowrotnie.

Historia zmian

Zatwierdzimy dotychczasowe zmiany, przejrzymy listę i sprawdzimy, jak wyglądała pierwsza wersja pliku README.md:

~/mojprojekt$ git commit -m "Dodanie katalogu doc"
~/mojprojekt$ git log
~/mojprojekt$ git checkout 869d7
~/mojprojekt$ cat README.md
~/mojprojekt$ git checkout master
~/mojprojekt$ cat README.md
_images/git_log.jpg
  • git log – pokazuje historię zmian, każda zmiana oznaczona jest unikalnym skrótem typu commit 869d7...; wypróbuj: git log --pretty=oneline --decorate oraz git log --pretty=format:"%h - %s";
  • git checkout 869d7 – przełącza nas do migawki oznaczonej podanym początkiem skrótu;
  • git checkout master – powracamy do ostatniej migawki w głównej gałęzi.

Synchronizacja

Pozostaje przesłanie zatwierdzonych zmian do repozytorium zdalnego:

~/mojprojekt$ git status
~/mojprojekt$ git push
  • git push – przesyła zmiany lokalne do repozytorium zdalnego; wymaga podania nazwy użytkownika i hasła do konta na GitHubie.
_images/git_push.jpg

Operacje na plikach

Wskazówka

Nie należy usuwać śledzonych plików/katalogów lub zmieniać ich nazw za pomocą narzędzi systemowych, np. menedżera plików, ponieważ Git nie będzie nic o tym wiedział i zasypie nas wieloma komunikatami podczas sesji.

Usuwanie plików i zmiany nazw realizujemy za pomocą następujących poleceń:

~/mojprojekt$ git rm --cached pierwszy.txt
~/mojprojekt$ git mv doc/katalog.rst doc/projekt.rst
~/mojprojekt$ git status
~/mojprojekt$ git rm -f "*.txt"
~/mojprojekt$ git status
~/mojprojekt$ git commit -am "Porządki  w projekcie"
  • git rm --cached – usuwa pliki śledzone z poczekalni, ale nie z dysku;
  • jeżeli mają być usunięte również z dysku, używamy tylko git rm;
  • git mv – pozwala przenieść lub zmienić nazwę pliku;
  • git rm -f – usuwa śledzone pliki z poczekalni i z dysku, wymaga przełącznika -f, jeżeli usuwany plik ma niezatwierdzone zmiany.
_images/git_rm_mv.jpg

Konflikty wersji

W czasie pracy nad projektem zdarzyć się może, że jakiś plik został zmieniony zarówno w repozytorium zdalnym, np. przez współpracownika, jak i lokalnie przez nas. Jeżeli nie ściągnęliśmy ostatniej zdalnej wersji pliku, próba wysłania naszych zmian na serwer wywoła komunikat o konflikcie. Przećwiczmy taką możliwość.

  • W repozytorium zdalnym zmieniamy plik pierwszy.txt,
  • lokalnie dodajemy usunięty wcześniej plik pierwszy.txt i wprowadzamy zmiany,
  • zatwierdzamy zmiany i próbujemy wgrać je na serwer:
~/mojprojekt$ git status
~/mojprojekt$ git add .
~/mojprojekt$ echo "Zmiana lokalna w pierwszym" >> pierwszy.txt
~/mojprojekt$ git commit -am "Zmiana w pierwszym"
~/mojprojekt$ git push
_images/git_push2.jpg

Powyższy komunikat zawiera sugestię, co zrobić. Zastosujemy się do niej i pobierzemy zmiany z serwera:

~/mojprojekt$ git pull
_images/git_pull2.jpg

Konflikt dotyczy pliku pierwszy.txt. Zawartość pobrana z serwera nie zgadza się z lokalną. Zgodnie z podpowiedzią: fix conflicts and then commit the result – rozwiążemy konflikty i zatwierdzimy rezultat. W dowolnym edytorze otwieramy zatem plik:

_images/git_edit.jpg

Git używa znaczników, aby wskazać różnice:

  • <<<<<<< HEAD – początek różnic;
  • ======= – separator zmian lokalnych i zdalnych;
  • >>>>>>> skrót – znacznik końca bloku różnic.

Usuwamy znaczniki, zapisujemy ostateczną wersję pliku, następnie zatwierdzamy i wysyłamy zmiany na serwer:

~/mojprojekt$ cat pierwszy.txt
~/mojprojekt$ git commit -am "Rozwiązanie konfliktu w pierwszy.txt"
~/mojprojekt$ git push

Gałęzie

Gałąź (ang. branch) służą testowaniu nowego kodu. Można utworzyć wiele gałęzi, rozwijać kod w każdej z nich niezależnie, a następnie scalać wybrane zmiany.

Informacja

Formalnie gałąź jest wskaźnikiem, czyli nazwą odsyłającą do któregoś z zestawu zmian zachowanych w repozytorium. Domyślna gałąź nazywa się master i tworzona jest przez polecenie git init. Podczas zatwierdzania zmian wskaźnik master przesuwany jest tak, aby wskazywał na ostatnią migawkę.

Utworzymy teraz nową gałąź, przełączymy się do niej, wprowadzimy kilka zmian i zatwierdzimy je:

~/mojprojekt$ git branch testy
~/mojprojekt$ git checkout testy
~/mojprojekt$ git branch -vv
~/mojprojekt$ git status
~/mojprojekt$ echo "Zmiany testowe" > test.txt
~/mojprojekt$ echo "Eksperyment" >> pierwszy.txt
~/mojprojekt$ git add .
~/mojprojekt$ git commit -m "Test nowych funkcji"
~/mojprojekt$ ls
  • git branch nazwa_gałęzi – tworzy gałąź o podanej nazwie;
  • git checkout nazwa_gałęzi – przełącza na podaną gałąź;
  • git checkout -b testy – tworzy gałąź i przełącza do niej (zastępuje dwa poprzednie polecenia);
  • git branch -vv – wyświetla informacje o gałęziach.
_images/git_branch.jpg

Informacja

Git używa specjalnego wskaźnika HEAD wskazującego aktualną gałąź. Użyj git log --pretty=oneline --decorate, aby zobaczyć, na którą gałąź wskazuje.

Wrócimy teraz do gałęzi master i scalimy z nią zmiany z gałęzi testy:

~/mojprojekt$ git checkout master
~/mojprojekt$ ls
~/mojprojekt$ git merge testy
~/mojprojekt$ git branch -d testy
  • git merge nazwa_gałęzi – scala zmiany z podanej gałęzi z aktualną;
  • git branch -d nazawa_gałęzi – usuwa gałąź (jeśli jest już niepotrzebna).
_images/git_merge.jpg

Informacja

Zmiana aktywnej gałęzi przywraca katalog roboczy do stanu z ostatniej migawki w danej gałęzi. W naszym przykładzie zwróć uwagę, że po przełączeniu się do gałęzi master z gałęzi testy “zniknął” plik text.txt.

Pomijanie plików

Nie wszystkie typy plików powinny być synchronizowane między repozytorium lokalnym i zdalnym. Np. pliki pośrednie tworzone przez kompilatory i interpretery, pliki tymczasowe, wirtualne środowiska itp. zapychałyby nam niepotrzebnie repozytorium zdalne. Git pozwala zdefiniować listę ignorowanych plików za pomocą wyrażeń wieloznacznych zapisanych w ukrytym pliku (rozpoczyna się kropką!) .gitignore, który umieszczamy w głównym katalogu projektu.

Informacje dodatkowe

Możliwe jest utworzenie repozytorium lokalnego nie przez klonowanie, ale od podstaw. Na początku tworzymy katalog projektu i wchodzimy do niego:

~$ mkdir mojprojekt; cd mojprojekt
~/mojprojekt$ git init
  • git init – polecenie tworzy ukryty katalog .git, czyli repozytorium.

Położenie i nazwa katalogu, w którym tworzymy repozytorium są dowolne.

Repozytorium lokalne należy połączyć i zsynchronizować ze zdalnym, które musi być utworzone w serwisie GitHub. W terminalu wydajemy polecenia:

~/mojprojekt$ git remote add origin https://github.com/nazwa_konta/mojprojekt.git
~/mojprojekt$ git push -u origin master
  • git remote add – dodaje zdalne repozytorium określone przez Git URL do lokalnego;
  • git push – synchronizuje zawartość lokalnego repozytorium ze zdalnym. o domyślnej nazwie origin.
_images/git_remote.jpg

Informacja

Nazwa master jest domyślną gałęzią Gita tworzoną podczas inicjacji repozytorium. Technicznie jest to wskaźnik odnoszący się do ostatniej zatwierdzonej migawki. Po synchronizacji repozytoriów lokalna gałąź master zaczyna śledzić zdalną o takiej samej nazwie.

Nazwa origin to domyślne określenie repozytorium zdalnego.

Cheat Sheet

  • git config --global – konfiguruje ustawienia user.name, user.email, push.default;
  • git init – inicjuje repozytorium Gita;
  • git status – pokazuje stan repozytorium;
  • git status -vv – pokazuje stan repozytorium oraz zmiany;
  • git status -sb – pokazuje stan repozytorium oraz zmiany w skrócie;
  • git add nazwa_pliku/katalogu – rozpoczyna śledzenie pliku/katalogu, dodaje zmiany do poczekalni;
  • git -all lub -A – dodanie wszystkich zmian do poczekalni;
  • git add '*.txt' – dodanie do poczekalni wszystkich plików tekstowych;
  • git add . – dodanie plików nowych i zmienionych, ale nie usuniętych;
  • git -u – dodanie zmienionych i usuniętych, ale nie nowych;
  • git commit -m "opis zmiany" – tworzy migawkę ze zmian znajdujących się w poczekalni;
  • git -am "opis zmiany" – tworzy migawkę z wszystkich zmian pomijając poczekalnię;
  • git commit --amend -m "opis zmiany" – uzupełnia i aktualizuje ostatnią migawkę;
  • git remote add origin GitURL – dodaje repozytorium zdalne do lokalnego;
  • git clone GitURL [katalog] – klonuje repozytorium zdalne do katalogu lokalnego;
  • git push [-u] [origin] [master] – wysyła zmiany lokalne do repozytorium zdalnego;
  • git diff – pokazuje zmiany w katalogu roboczym;
  • git diff --staged – pokazuje zmiany pomiędzy katalogiem roboczym a poczekalnią;
  • git diff HEAD – pokazuje zmiany w porównaniu do ostatniej migawki;
  • git reset HEAD plik – wycofuje zmianę pliku z poczekalni;
  • git reset --soft HEAD~1 – wycofuje ostatnią migawkę;
  • git checkout -- plik – cofa zmianę pliku w katalogu roboczym;
  • git checkout skrót/tag/gałąź – pozwala przejść do stanu wskazanego przez skrót migawki, tag lub nazwę gałęzi, np. master;
  • git checkout -b gałąź – tworzy podaną gałąź i przełącza do niej;
  • git log – wyświetla historię zmian, opcja: --pretty=oneline --decorate, -p – historia zawartości zmian, --stat – lista zmienianych plików;
  • git rm --cached plik – usuwa plik z poczekalni, ale nie z katalogu roboczego;
  • git rm -f plik – usuwa plik z poczekalni i katalogu roboczego;
  • git mv stara nowa – zmienia starą nazwę na nową;
  • git branch gałąź – tworzy gałąź, opcje: -vv – informacje o gałęziach, -d gałąź – usuwa gałąź;
  • git merge gałąź – scala zmiany z podanej gałęzi do aktualnej;
  • git remote -v – lista zdalnych repozytoriów połączonych z lokalnym;
  • git remote add nazwa GitURL – dodanie zdalnego repozytorium jako nazwa do lokalnego.

Materiały

Wskazówka

  • Jeżeli podczas tworzenia repozytorium na GitHubie zaznaczymy opcję Initialize this repository with a README, utworzony zostanie plik, w którym umieszcza się opis projektu.
  • Do wygodnej pracy w systemie Windows można skonfigurować Git w powłoce PowerShell

Informacja

Uwagi dla użytkowników powłoki cmd.exe w Windows:

  • separatorem w ścieżkach jest znak backslash \, w wyrażeniach wieloznacznych używamy podwójnych cudzysłowów, np. "*.txt";
  • polecenia konsoli są inne:
    • md mojprojekt – utworzy katalog projektu (odpowiednik mkdir);
    • rd /s /q mojprojekt – usunie katalog projektu (odpowiednik rm -rf);
    • type doc\katalog.rst – pokaże zawartość pliku (odpowiednik cat).
Odwiedź
  1. Strona projektu Git.
  2. Pro Git v. 1 – wersja polska.
  3. Python 101 – Git (materiał w j. polskim)
  4. Git Cheat Sheet
  5. Pro Git v. 2 – wersja angielska.

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Serwer WWW

Do tworzenia i testowania aplikacji WWW wykorzystujących języki skryptowe i bazy danych potrzebujemy środowiska, na które składa się serwer WWW, interpreter języka skryptowego i system bazodanowy. Zestawy takiego oprogramowania określa się skrótami WAMP lub LAMP w zależności od wykorzystywanego systemu operacyjnego: W – Windows, L – Linux. Pozostałe litery rozwija się najczęściej jako:

  • A – Apache;
  • M – MariaDB lub MySQL <http://pl.wikipedia.org/wiki/MySQL>;
  • P – PHP lub Python, Perl.

Informacja

Wymienione oprogramowanie to najpopularniejsze, ale nie jedyne rozwiązania. Dostępnych jest wiele innych, równie dobrych serwerów czy baz danych.

Do tworzenia i testowania serwisów z bazą SQLite czy MariaDB wystarczą serwery deweloperskie wbudowane w instalacje interpreterów PHP lub Python.

XAMPP

Kompleksowym rozwiązaniem dostępnym dla wielu systemów (Linux, Windows, OS X), zawierającym serwer Apache, bazę MariaDB oraz interpreter PHP i Perl oraz narzędzia do zarządzania bazą danych jest XAMPP.

Instalator

Ze strony XAMPP Pobierz pobieramy instalator przeznaczony do naszego systemu.

W systemie Linux pobranemu i zapisanemu plikowi przyznajemy prawo do uruchamiania. Klikamy pobrany plik prawym klawiszem i we “Właściwościach”, na zakładce “Uprawnienia” zaznaczamy “Zezwolenie na wykonywanie pliku jako programu”.

_images/xampp_uprawnienia.png

Dwa razy klikamy pobrane pliki i uruchamiamy instalację z domyślnymi opcjami. W środowisku Windows pliki zainstalowane zostaną w katalogu C:\xampp, w Linuksie w katalogu /opt/lampp.

_images/xampp_04_win.png

Opcjonalny wybór składników w Windows.

_images/xampp_05_win.png

Instalacja w domyślnym katalogu.

_images/xampp_04_lin.png

Opcjonalny wybór składników w Linuksie.

_images/xampp_05_lin.png

Instalacja w domyślnym katalogu.

Uwaga

Po instalacji w systemie Windows mogą zostać wyświetlone komunikaty zapory Windows Defender, zezwalamy wtedy bazie danych i serwerowi WWW na działanie w sieci prywatnej lub publicznej.

_images/xampp_11_win.png

Komunikat Windows Defender o zablokowaniu serwera bazy danych.

Linux

Do uruchomienia środowiska używamy polecenia:

sudo /opt/lampp/lamp start

Zatrzymanie następuje po wydaniu polecenia:

sudo /opt/lampp/lamp stop

Możemy użyć narzędzia graficznego:

sudo /opt/lampp/manager-linux-x64.run
_images/xampp_12_win.png

Panel graficzny pozwalający na zarządzanie usługami XAMPP.

Wskazówka

Warto przeczytać Linux – Najczęściej zadawane pytania.

Windows

Do sterowania serwerami używamy aplikacji XAMPP Control Panel, która pozwala na uruchamianie, zatrzymywanie, a także konfigurowanie serwera WWW i bazy danych.

_images/xampp_12_win.png

Aplikacja XAMPP Control Panel, uruchomione serwery WWW i bazy danych.

Pliki źródłowe serwisów WWW, które będziemy tworzyli, umieszczamy w podkatalogach katalogu głównego, czyli C:\xampp\htdocs.

Wskazówka

Warto przeczytać Windows – Najczęściej zadawane pytania.


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Interpreter PHP

Poniżej opisujemy jak zainstalować i skonfigurować interpreter PHP.

Linux

W systemach opartych na Debianie (Ubuntu, Mint) używamy menedżera pakietów w linii poleceń:

~$ sudo apt-get install php-cli php-gd php-sqlite3 php-intl php-mbstring

Informacja

Poza interpreterem dostępnym w wierszu poleceń instalujemy rozszerzenia: gd, sqlite3, intl i mbstring.

Windows

Ze strony PHP for Windows – Downloads pobieramy archiwum zip z ostatnią 64-bitową wersją, np. php-7.4.12-nts-Win32-vc15-x64.zip. Pobrany plik rozpakowujemy do głównego katalogu wybranego dysku, np.: C:\php.

_images/c_php.png

Zawartość katalogu C:\php

W wybranym edytorze tekstowym otwieramy plik konfiguracyjny C:\php\php.ini-production, odkomentowujemy rozszerzenia: gd2, intl, mbstring i pdo_sqlite3. Na koniec plik zapisujemy pod nazwą C:\php\php-ini.

_images/vscode_php_ini.png

Odkomentowanie rozszerzeń PHP.

Otwieramy wiersz poleceń cmd i wydajemy polecenie, które katalog interpretera PHP doda do zmiennej środowiskowej PATH:

setx PATH "c:\php;%PATH%"

Restartujemy wiersz poleceń i poprawność instalacji sprawdzamy komendą:

php --version
_images/cmd_php.png

Informacja o wersji interpretera PHP.


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Linux LAMP

Alternatywą dla instalowania środowiska typu XAMPP jest zainstalowanie serwera Apache2, bazy danych MariaDB i interpretera PHP przy użyciu dedykowanych pakietów. W dystrybucjach Debian i pochodnych (Ubuntu, Linux Mint itd.) wydajemy polecenie typu:

Apache i PHP
~$ sudo apt-get install apache2 php7.0 php7.0-gd php7.0-sqlite3 php7.0-curl libapache2-mod-php7.0

Ostrzeżenie

Nazwy pakietów dla każdej dystrybujcji mogą różnić się od podanych. Właściwe nazwy można sprawdzić (w systemach opartych na Debianie) wydając w terminalu polecenie: apt-get search php | grep php.

Podstawowa konfiguracja sprowadza się do uaktywnienia odpowiednich modułów:

~$ sudo a2enmod userdir rewrite
~$ sudo systemctl restart apache2

– i odblokowania możliwości wykonywania skryptów w katalogach domowych użytkowników poprzez zakomentowanie następujących linii z pliku /etc/apache2/mods-available/php7.0.conf (Debian i pochodne):

# To re-enable PHP in user directories comment the following lines
# (from <IfModule ...> to </IfModule>.) Do NOT set it to On as it
# prevents .htaccess files from disabling it.
#<IfModule mod_userdir.c>
#    <Directory /home/*/public_html>
#        php_admin_flag engine Off
#    </Directory>
#</IfModule>

Tworzone serwisy WWW umieszczamy w podkatalogu public_html katalogu domowego. Wywołujemy je wpisując w przeglądarce adres: 127.0.0.1/~użytkownik lub 127.0.0.1/~użytkownik/serwis – gdzie:

  • użytkownik – oznacza nazwę zalogowanego użytkownika,
  • serwis – oznacza nazwę katalogu, w którym umieściliśmy pliki danego serwisu WWW.

Informacja

Domyślnie serwer szuka w podanej ścieżce plików index.php lub index.html.

MariaDB

[todo]


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

UwAmp w Windows

Alternatywą dla XAMPP-a jest zestaw aplikacji UwAmp. Po wejściu na stronę klikamy Download, a następnie link o nazwie Download Exe/Install.

_images/uwamp01.jpg

Ostrzeżenie

Do poprawnego działania Apache’a wymagana jest biblioteka Microsoftu Visual C++ 2012 Redistributable (VC++ 11.0) w wersji 32-bitowej (x86), z kolei do PHP 7 musimy zainstalować Visual C++ 2015 Redistributable.

Pobieramy wymienione wyżej biblioteki i instalujemy je na początku.

_images/vcredist2012.jpg
_images/vcredist2015.jpg

Następnie uruchamiamy instalację UwAmpa. Jako miejsce instalacji wybieramy główny katalog wybranego dysku, C:, D: itp.:

_images/uwamp02.jpg

Po zainstalowaniu i uruchomieniu aplikacji UwAmp zapora systemowa może poprosić o odblokowanie portów serwera www i bazy danych. Godzimy się, wybierając opcję dla sieci prywatnych i domowych.

_images/uwamp04_mysqld.jpg
_images/uwamp05_apache.jpg

Serwerami i narzędziami zarządzamy za pomocą wygodnego okna:

_images/uwamp06.jpg

Informacja

Korzystając z powyższego okna wybierz wersję PHP 7.

Serwery www (Apache2) i bazy danych (MySQL) startowane są automatycznie. Jeżeli nie korzystamy z serwera MySQL, możemy go zatrzymać klikając niebieską strzałkę obok przycisku “Stop” i wybierając go listy. Do obsługi baz SQLite dołączono bardzo wygodny interfejs graficzny SQLite Browser.

Strony czy projekty umieszczamy w katalogu www folderu, w którym zainstalowaliśmy UwAmpa, np. w C:\\UwAmp\www. W przeglądarce wpisujemy adres localhost lub localhost/podkatalog, jeżeli strony umieściliśmy w jakimś podkatalogu.

_images/uwamp07.jpg

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

CodeIgniter

CodeIgniter to framework do tworzenia aplikacji i serwisów WWW napisany w języku PHP. Cechuje go prostota, wydajność i duże możliwości. Do działania wymaga poprawnie zainstalowanego interpretera PHP wraz z rozszerzeniami (przynajmniej): intl i mbstring.

Instalacja

Możliwa jest instalacja przez menedżer pakietów PHP Composer oraz ręczna. Skorzystamy z drugiej możliwości. Ze strony głównej pobieramy archiwum zip o nazwie np.: framework-4.04.zip i rozpakowujemy w wybranym katalogu, np. C:\ci4. W katalogu z rozpakowanym frameworkiem otwieramy terminal lub wczytujemy go do wybranego edytora programistycznego, np. VSCode (VSCodium). Serwer deweloperski uruchamiamy poleceniem:

php spark serve
_images/vscode_php_spark.png

Uruchomienie serwera z poziomu edytora VSCode.

Po otwarciu strony localhost:8080 w przeglądarce powinniśmy zobaczyć:

_images/ci4_browser.png

Domyślna strona startowa CodeIgniter po poprawnej instalacji.


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Baza SQLite

W wielu projektach nie ma potrzeby wykorzystywania dużych i skomplikowanych systemów zarządzania bazami danych takich jak MySQL, MariaDB czy PostgreSQL. Lepiej skorzystać z prostszej bazy SQLite, która ma jednak duże możliwości. Do zarządzania bazami danych SQLite’a, które przechowywane są w pojednyczych plikach, wykorzystuje się interepreter działający w terminalu.

Linux

Do instalacji możemy użyć polecenia:

~$ sudo apt-get install sqlite3

Narzędzie uruchamiany komendą sqlite3. Podstawowe polecenia:

~$ sqlite3 baza.db // otwarcie pliku z bazą
~$ sqlite3 baza.db < schemat.sql // utworzenie bazy na podstawie pliku .sql
sqlite> .tables // lista tabel
sqlite> .help // lista poleceń interpretera
sqlite> .schema tabela // pokazuje klauzulę CREATE dla podanej tabeli
sqlite> .quit // wyjście z interpretera

Windows

Ze strony SQLite3 Download Page z sekcji Precompiled Binaries for Windows pobieramy archiwum sqlite-tools-win32-(...).zip. Następnie należy je rozpakować najlepiej do katalogu będącego w ścieżce systemowej. Interpreter uruchamiamy albo poleceniem sqlite3 albo podwójnym kliknięciem.

Narzędzia GUI

Bardzo dobrym narzędziem z interfejsem graficznym jest polski program SQLiteStudio. Najnowsze wersje pobierzemy ze strony repozytorium programu w serwisie Github.

W systemie Linux pobieramy pierwszy plik o nazwie InstallSQLiteStudio-3.2.1. Nadajemy mu uprawnnienia wykonywalności w menedżerze plików lub w terminalu:

~/Pobrane$ chmod a+x InstallSQLiteStudio-3.2.1

W systemie Windows pobieramy plik InstallSQLiteStudio-3.2.1.exe.

Instalatory uruchamiamy podwójnym kliknięciem i postępujemy wg instrukcji. Po zainstalowaniu program uruchamiamy poleceniem sqlitestudio.

_images/sqlitestudio.png

Inne programy obsługujące bazę SQLite3 to np. angielskojęzyczne DB Browser for SQLite i DBeaver Community Edition.

Materiały

  1. Interpreter SQLite3

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Biblioteka Qt

Qt to zestaw bibliotek przeznaczonych dla języka C++, QML i Java, który znakomicie ułatwia tworzenie graficznego interfejsu użytkownika. Zawiera również klasy udostępniające obsługę m.in. multimediów , sieci czy baz danych.

System i środowisko IDE

Bilioteka Qt jest przenośna z założenia, więc programować z jej wykorzystaniem można w wielu systemach i środowiskach. Proponujemy system Linux, np. dystrybucję Ubuntu lub Debian. Instalacja wymaganych narzędzi sprowadza się do wydania prostych poleceń w terminalu:

~$ sudo apt-get update
~$ sudo apt-get install qtcreator qt5-qmake qt5-default qt4-qtconfig

Pierwsze polecenie zaktualizuje repoytoria, czyli wersje dostępnego oprogramowania; drugie zainstaluje dedykowane środowisko IDE, które pozwala projektować interfejs graficzny, bardzo ułatwia edycję kodu, pozwala budować, uruchamiać i debugować różne wersje tworzonych aplikacji.

Qt5 w systemie Windows

Instalacja jest bardzo prosta. Pobieramy Qt Online Installer for Windows i uruchamiamy. Następnie przeprowadzamy standardową instalację z domyślnymi ustawieniami, podając w razie potrzeby hasło administratora.

_images/qtwin01.jpg
_images/qtwin02.jpg

Wygląd i działanie aplikacji Qt Creator w systemie Linux i Windows są takie same.

_images/qtcreator.png

Materiały

  1. Biblioteka Qt
  2. Qt Creator

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

ReStructuredText i Sphinx

Git dobrze nadaje się do prowadzenia projektów nie tylko typowo programistycznych, ale również dokumentacyjnych i szkoleniowych, a więc zawierających nie tylko kod, ale przede wszystkim instrukcje, poradniki, scenariusze, itp.

W katalogu naszego projektu zakładamy katalog podrzędny o nazwie np. docs, w którym tworzyć będziemy naszą dokumentację.

~/nazwa_projektu$ mkdir docs

Dokumenty zapisywane będą w formacie reStructuredText, czyli za pomocą tekstowego języka znaczników, w plikach z rozszerzeniem .rst. Zawartość tych plików może być później przetworzona do postaci formatów docelowych, takich jak HTML, PDF czy LaTeX. Zadanie to realizowane będzie przez narzędzie Sphinx napisane w Pythonie i służące m.in. do tworzenia dokumentacji tego języka.

Instalacja Sphinksa

Przede wszystkim potrzebujemy interpretera Pythona i narzędzia instalacji modułów dodatkowych pip – zobacz w sekcji Interpreter Pythona. Następnie wydajemy polecenia:

~$ sudo apt-get install mercurial
~$ sudo pip install sphinx_rtd_theme hg+https://bitbucket.org/birkenfeld/sphinx#sphinx

W Archu:
~# pacman -S mercurial
~# pip install sphinx_rtd_theme hg+https://bitbucket.org/birkenfeld/sphinx#sphinx

Informacja

Instalacja klienta systemu kontroli wersji Mercurial wynika z tego, że korzysta z niego projekt Sphinx. Instalacja tematu sphinx_rtd_theme jest opcjonalna, domyślny temat wygląda tak, jak w dokumentacji Pythona.

Teraz możemy przejść do konfiguracji Sphinksa, która sprowadza się do wygenerowania pliku z ustawieniami o nazwie conf.py. W głównym katalogu tworzonej dokumentacji, czyli docs, wydajemy polecenie:

~$ sphinx-quickstart

Na większość pytań kreatora odpowiadamy naciśnięciem Enter, przyjmując ustawienia domyślne. Zwrócić uwagę należy na:

  • Project name: – wpisujemy nazwę naszego projektu;
  • Author name(s): – wpisujemy autora;
  • Project version: – podajemy wersję, np. 1;
  • Project release: – podajemy wydanie, np. 0;
  • Project langiage [en]: – określamy język jako pl;
  • Please indicate... Sphinx extensions: – odpowiadając y dołączamy rozszerzenia, można włączyć: autodoc, doctest, pngmath i viewcode – przydają się w dokumentacji Pythona. Zobacz: lista rozszerzeń Sphinksa;
  • Create Makefile? – odpowiadamy y, dzięki czemu budowanie dokumentacji sprowadzi się do wydania polecenia make html.

Po skonfigurowaniu Sphinksa w katalogu docs powinny znaleźć się pliki: conf.py, Makefile, make.bat i index.rst, a także katalogi _build, _static, _templates.

Jeżeli chcemy używać tematu sphinx_rtd_theme na końcu pliku conf.py dopisujemy:

try:
    import sphinx_rtd_theme
    html_theme = "sphinx_rtd_theme"
    html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
except:
    pass

Tworzenie dokumentacji

Na początku warto dostosować plik główny, czyli index.rst. Jest on naszą “stroną główną”, zawiera m. in. dyrektywę tworzącą spis treści:

Welcome to Projekt ILO's documentation!
=======================================

Contents:

.. toctree::
   :maxdepth: 2

   Serwis eCG <http://ecg.vot.pl/>
   cwiczenia/index
   programowanie/index


Indices and tables
==================

* :ref:`genindex`
* :ref:`modindex`
* :ref:`search`

Jak widać domyślne komunikaty są w języku angielskim, należy więc je spolszczyć zmieniąjąc treść według uznania. Dyrektywa .. toctree:: generuje spis treści na podstawie wskazanych plików. W powyższym listingu dodano dwa przykładowe wpisy wskazujące pliki index.rst umieszczone we wskazanych podkatalogach. Sphinx odczytuje nagłówki z tych plików i umieszcza w spisie. Domyślnie sczytywane są dwa poziomy zagnieżdżenia (:maxdepth: 2). Gdybyśmy chcieli mieć numerację, dodalibyśmy opcję: :numbered:. Pokazano również, jak dodawać stałe linki w spisie (Serwis eCG ...).

Z sekcji indeksów (Indices ...) można usunąć wszystkie spisy lub zostawić wybrane, np. genindex udostępnia indeks zdefiniowanych terminów i pojęć.

Dokumenty w katalogu docs warto kategoryzować i umieszczać w osobnych katalogach. Nazwy plików mogą być dowolne, chociaż dobrze jest przyjąć jakąś przejrzystą konwencję. Poszczególne pliki należy traktować jako kolejne strony w wersji HTML.

Podstawy reST

Żeby zrozumieć proste w gruncie rzeczy zasady formatowania reST najlepiej podglądać kod gotowych stron! Wystarczy w nagłówku kliknąć link View page source, skopiować, wkleić i wypełnić własną treścią. Zacznij od strony, którą czytasz...

Jeżeli chcesz rozumieć, czytaj dalej. Podstawowe zasady są następujące:

  • Wcięcia są ważne!
  • Akapity itp. oddzielamy pustym wierszem.
  • *pochylenie*, **pogrubienie**
  • ``przykład kodu``
Nagłówki

Kolejne poziomy nagłówków tworzymy poprzez podkreślanie ich sekwencjami znaków:

Część 1
##############

Rozdział 2
**************

Sekcja 3
==============

Podsekcja 4
--------------

Podpodsekcja 5
^^^^^^^^^^^^^^

Akapit 6
""""""""""""""

Wybór znaków nie jest narzucony, ale najlepiej trzymać się jednej konwencji, np. powyższej.

Dyrektywy

Ogólna postać dyrektyw to:

.. <nazwa>:: <argumenty>
    :<opcja>: <wartość>

    treść

Użyteczne dyrektywy:

  • .. image:: ścieżka/plik.jpg – pozwala wstawić obrazek
  • .. figure:: ścieżka/plik.jpg – pozwala wstawić obrazek z etykietą
  • .. note:: – warte zauważenia
  • .. tip:: – wskazówka
  • .. warning:: – ostrzeżenie
  • .. highlight:: cpp – formatuj kod jako cpp (lub python, bash, html itd.)
  • .. literalinclude:: ścieżka/test.cpp – wstaw kod z podanego pliku
  • .. code block:: cpp – treść poniżej to kod w cpp (lub python, bash, html itd.)
  • .. raw:: html – interpretuj treść poniżej jako HTML
  • .. include:: ścieżka/plik.rst – wstaw treść z innego pliku
Listy

Aby uzyskać listę wypunktowaną lub numerowaną stosujemy:

* punkt
* punkt drugi zawiera
  dwie linie

1. punkt 1
2. punkt 2

#. automatyczne numerowanie
#. automatyczne numerowanie
Linki
  • `Nagłówek`_ – link do nagłówka w bieżącym dokumencie
  • .. _Strona Pythona: http:\\www.python.org – definicja linku, `Strona Pythona`_ – wstawienie linku
  • `Strona Pythona <http:\\www.python.org>`_ – tak też można
  • .. _nazwa-linku: – definicja linku w dokumentacji, :ref:`zobacz tutaj <nazwa-linku>` – wstawienie linku

Wskazówka

Powtórzmy, najlepszą metodą poznania składni reST jest przeglądanie źródeł gotowych plików.

Budowanie dokumentacji

W katalogu głównym dokumentacji, czyli docs wydajemy polecenie:

~/projekt/docs$ make html

W terminalu zobaczymy komunikaty, niektóre z nich będą informacją o błędach w formatowaniu, które musimy usunąć. Gotowa wersja zostanie umieszczona w katalogu _build/html. Możemy go wgrać do sieci, możemy spakować i udostępnić – po otwarciu pliku index.html w przeglądarce zobaczymy efekt naszej pracy.

Od czasu do czasu, zwłaszcza po wielu zmianach położenia plików i katalogów, budowanie dokumentacji warto poprzedzić usunięciem poprzedniej wersji HTML:

~/projekt/docs$ make clean

Dokumentacja online

Projekty hostowane w serwisie GitHub łatwo podpiąć do serwisu Read the Docs, który umożliwia automatyczne generowanie wersji HTML, PDF, a nawet Epub (chociaż przy wykorzystaniu stabilnej, a nie testowej wersji Sphinksa) i udostępnianie jej online.

W tym celu trzeba założyć konto na stronie Read the Docs – Sign Up. Po zalogowaniu importujemy projekt z GitHuba (ang. Import a Project – Import from GitHub) i po potwierdzeniu domyślnych opcji możemy cieszyć wersją online dostępną pod adresem typu: http://nazwa_projektu.readthedocs.org. Wersję PDF ściągniemy po zalogowaniu, wejściu na stronę projektu, wybraniu zakładki Downloads i linku latest PDF.

_images/rtfd.jpg

Słownik

katalog domowy
katalog, w którym przechowywane są pliki konfiguracyjne i dokumenty zalogowanego użytkownika. W systemie Linux jest to katalog /home/nazwa_użytkownika, w systemie Windows C:Usersnazwa_użytkownika.
katalog konfiguracyjny
podkatalog katalogu domowego, w którym programy zapisują ustawienia. W systemie Linux jest to ukryty katalog o nazwie .config, można go wyświetlić naciskając w menedżerze plików skrót CTRL+H. W systemie Windows najczęściej będzie to katalog AppData (Dane aplikacji), który domyślnie jest ukryty, a żeby go zobczyć, trzeba włączyć pokazywanie ukrytych plików w Eksploratorze.
Qt
zestaw bibliotek programistycznych ułatwiających tworzenie aplikacji z interfejsem graficznym w językach C++, QML i Java.
środowisko IDE
zintegrowane środowisko programistyczne (ang. Integrated Development Environment, IDE), składające się z jednej lub wielu aplikacji, umożliwiające tworzenie, testowanie, budowanie i uruchamianie kodu.
Qt Creator
wieloplatformowe środowisko IDE dla aplikacji pisanych w językach C++, JavaScript i QML. Zawiera m.in. debugger i edytor GUI (graficznego interfejsu użytkownika).
Klasa
abstrakcyjny opis właściwości i działań obiektu, zawiera definicje atrybutów i metod związanych z obiektem.
Obiekt
instancja klasy, w której atrybuty uzyskują konkretne wartości.
public
operator widoczności, pola (właściwości) i metody (funkcje) klasy deklarowne po nim są dostępne z każdeg miejsca programu.
private
operator widoczności, pola (właściwości) i metody (funkcje) klasy deklarowne po nim są dostępne tylko w jej obrębie.
sygnały
zdarzenia generowane za pomocą graficznego interfejsu użytkownika, takie jak kliknięcie elementu, edycja, przeciągnięcie itp.
sloty
funkcje przypisane sygnałom, definiują działania podejmowane w przypadku zastnienia danego zdarzenia.
MinGw
ang. Minimalist GNU for Windows; minimalistyczne środowisko dostarczające narzędzia GNU (linker, kompilator itd.) pozwalające na kompilację natywnych plików wykonywalnych dla Windows z kodu pisanego w C/C++.
GNU Compiler Collection
zestaw kompilatorów do różnych języków programowania rozwijany w ramach projektu GNU i udostępniany na licencji GPL oraz LGPL. Zob. hasło w Wikipedii.
GPL
ang. GNU General Public License – licencja wolnego i otwartego oprogramowania stworzona w 1989 roku przez Richarda Stallmana i Ebena Moglena na potrzeby Projektu GNU. Ostatnia wersja, trzecia, opublikowana została 29 czerwca 2007 r. Zob. hasło w Wikipedii.
Debian
jedna z najstarszych, wiądących dystrybucji Linuksa, ceniona za stabilność i bezpieczeństwo, umożliwia elastyczną konfigurację systemu i dostosowanie go do własnych potrzeb. Jak większość dystrybucji, umożliwia wybór wielu środowisk graficznych, np. XFCE lub Gnome.
Ubuntu
jedna z najbardziej popularnych dystrybucji Linuksa oparta na Debianie, ceniona za dopracowany interfejs, łatwość obsługi i szeroki wybór oprogramowania.
środowisko graficzne
w systemach linuksowych zestaw oprogramowania tworzący GUI, czyli graficzny interfejs użytkownika, często zawiera domyślny wybór aplikacji przeznaczonych do wykonywania typowych zadań. Najpopularnijesze środowiska to XFCE, Gnome, KDE, LXDE, Cinnamon, Mate.
plik nagłówkowy
w języku C/C++ plik z rozszerzeniem .h zawierający deklaracje używanych struktur danych, np. klas, zmiennych i funkcji. Implementacja klas i funkcji umieszczana jest w plikach źródłowych. Więcej o pliku żródłowym:
plik źródłowy
w języku C/C++ plik z rozszerzeniem .c/.cpp zawierający implementację zadeklarowanych typów złożonych (np. klas) i używanych funkcji, w tym funkcji głównej (main()).
WWW
(ang. World Wide Web) – ogólnoświatowa sieć, jedna z najważniejszych usług sieciowych; hipertekstowy, internetowy sposób udostępniania informacji.
HTTP(S)
(ang. Hypertext Transfer Protocol) – protokół przesyłania dokumentów hipertekstowych, protokół sieci WWW za pomocą którego przesyłane są żądania udostępnienia lub modyfikacji zasobów, określa reguły komunikacji między klientem (np. przeglądarką) a serwerem, który zwraca odpowiedzi. Zalecane jest używanie wersji szyfrowanej tego protokołu oznaczanego https.
HTML
HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, wykorzystywany do tworzenia stron internetowych. Aktualnie zalecana wersja to HTML5.
XML
XML (ang. Extensible Markup Language) – rozszerzalny język znaczników, przeznaczony do strukturalnego i semantycznego opisu danych.
PHP
obiektowy, skryptowy język programowania, służący m. in. do generowania po stronie serwera dynamicznych stron internetowych.
Python
obiektowy język programowania wysokiego poziomu służący m. in. do tworzenia aplikacji internetowych, oferuje przyjazną składnię, czytelność i klarowność kodu.
CSS
(ang. Cascading Style Sheets, CSS) – kaskadowe arkusze stylów, język opisu wyglądu stron internetowych, stanowi dopełnienie HTML-a.
JavaScript
skryptowy język programowania służący m. in. do tworzenia aktywnych właściwości stron internetowych, działa po stronie klienta (tj. w przeglądarce).
AJAX
AJAX (ang. Asynchronous JavaScript and XML) – asynchroniczny JavaScript i XML, sposób tworzenia stron internetowych, które oferując dynamiczną zmianę zawartości, nie wymagają przeładowywania, ponieważ komunikują się z serwerm asynchronicznie.
CMS
(ang. Content Management System, CMS) – system zarządzania treścią, wykorzystujące różne technologie internetowe, służący do tworzenia serwisów internetowych i zarządzania nimi.
serwer WWW
(ang. web server) – oprogramowanie obsługujące protokół http, podstawowy protokół sieci WWW, służący przesyłaniu dokumentów hipertekstowych.
interpreter
program, który analizuje kod źródłowy, a następnie go wykonuje. Interpretery są podstawowym składnikiem języków wykorzystywanych do pisania skryptów wykonywanych po stronie klienta WWW (JavaScript) lub serwera (np. Python, PHP).
system bazodanowy
system zarządzania bazą danych (ang. Database Management System, DBMS) – oprogramowanie służące do zarządzania bazami danych, np. SQLite, MariaDB, MySQL, PostgreSQL.
framework
(ang. framework – struktura) – oprogramowanie będące zestawem narzędzi ułatwiających i przyśpieszających tworzenie aplikacji.
responsywny
(ang. responsive) – przymitonik związany z techniką projektowania stron internetowych określanej skrótem RWD (ang. responsive web design), oznacza dostosowywanie wyglądu i układu strony do rozmiaru okna przeglądarki w urządzeniach o różnej rozdzielczości.

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Biblioteka Qt

Poniżej przedstawiamy realizację przykładowej aplikacji w Qt 5.

Adresy (Qt5)

Niniejszy scenariusz pokazuje, jak zacząć programowanie z wykorzystaniem biblioteki Qt w wersji 5 przy użyciu dedykowanego środowiska IDE Qt Creator. Celem jest stworzenie prostej 1-okienkowej książki adresowej, w której można dodawać dane adresowe powiązane z określoną nazwą, np. imieniem i nazwiskiem.

Nowy projekt

Po uruchomieniu aplikacji Qt Creator wybieramy przycisk “New Project”, który uruchamia kreatora aplikacji.

W pierwszym oknie “Applications” i “Qt Widget Applications”, co oznacza, że chcemy utworzyć program z interfejsem graficznym oparty na klasie QWidget. W następnym oknie podajemy nazwę projektu, np, “adresy”, oraz wskazujemy ścieżkę do katalogu, w którym będą zapisywane pliki wchodzące w skład projektu. W następnym oknie wybieramy tzw. “kit”, czyli zestaw definiujący docelowe środowisko, kompilator itp. ustawienia. Dostępne zestawy muszą być wcześniej określone w ustawieniach Qt Creatora

Kolejne okno pozwala definiować nazwę klasy głównej i klasę podstawową, podajemy “adresy” i wybieramy “QWidget”. W następnym ostatnim oknie niczego nie zmieniamy, kończymy kliknięciem przycisku “Finish”.

Efektem działania kreatora będzie utworzenie następujących plików:

1) adresy.h - plik nagłówkowy, tutaj będziemy deklarować wszystkie używane w programie obiekty (elementy interfejsu), a także publiczne sloty, czyli funkcje powiązanie z określonymi sygnałami (zdarzeniami).

2) adresy.cpp - plik źródłowy, tu znajdzie się kod tworzący obiekty interfejsu, łączący sygnały ze slotami, a wreszcie implementacja slotów.

3) main.cpp - plik źródłowy, w którym tworzona i uruchamiana jest instancja naszej aplikacji.

4) adresy.ui - jak wskazuje rozszerzenie (“ui” - ang. user interface), plik zawierać będzie opis graficznego interfejsu aplikacji zapisany za pomocą znaczników XML.

Tworzenie interfejsu

Zaczniemy od utworzenia głównego okna naszej aplikacji. W tym celu dwa razy klikamy plik adresy.ui i przechodzimy do tworzenia formularza.

Na początku klikamy obiekt “Grid Layout” z kategorii “Layouts” i rysujemy prostokąt na formularzu tak, aby nie wypełniał go w całości. Dodana kontrolka umożliwia porządkowanie innych elementów tworzących interfejs w prostokątnej siatce. Dalej dodamy dwie etykiety, czyli obiekty “Label” z kategorii “Display Widgets”. Staramy się je umieścić jedna nad drugą w dodanej przed chwilą siatce.

Wskazówka

Po wybraniu obiektu i najechaniu na Grid Layout należy obserwować niebieskie podświetlenia, które pojawiają się w pionie i poziomie, wskazują one, gdzie umieszczony zostanie dodawany obiekt.

Po dwukrotnym kliknięciu na dodane etykiety możemy zmienić treść przez nie wyświetlaną. Modyfikujemy w ten sposób właściwość text danego obiektu. Etykieta górna powinna zawierać tekst “Nazwa”, dolna - “Adresy”.

Informacja

Lista wszystkich obiektów wyświetlana jest po prawej stronie na górze w oknie Hierarchia obiektów. W kolumnie Obiekt widzimy tam nazwy dodanych obiektów, a w kolumnie Klasa nazwy klas, które reprezentują. Po wskazaniu myszą dowolnego obiektu możemy edytować wszystkie jego właściwości poniżej. Np. nazwę obiektu zmienimy w polu objectName.

Nazwę etykiety górnej ustalamy na “nazwaLbl”, dolnej - na “adresyLbl”.

Wskazówka

Konwencji nazywania obiektów jest wiele, ważne żeby konsekwentnie trzymać się wybranej. Tutaj proponujemy uwzględnianie w nazwie typu obiektu przy użyciu skrótu pisanego z dużej litery, np. “nazwaLbl”.

Po prawej stronie etykiety “Nazwa” dodajemy kontrolkę Line Edit z grupy Input Widgets o nazwie “nazwaLine”. Poniżej, czyli w drugiej kolumnie, tworzymy obiekt Text Edit z tej samej grupy, co poprzedni o nazwie “adresText”. Powinniśmy uzyskać poniższy układ:

_images/qt5_08.png

Czas na dodanie przycisków pozwalających inicjować działanie aplikacji. Dodajemy więc 5 przycisków PushButton z kategorii Buttons po prawej stronie i poza(!) obiektem GridLayouts jeden pod drugim. Na samym dole umieszczamy kontrolkę Vertical Spacer z kategorii Spacers. Następnie zaznaczamy wszystkie dodane obiekty, obrysowując je myszką, i klikamy ikonę Rzmieść w pionie (CTRL+L) na pasku narzędziowym. Teraz stworzoną grupę przeciągamy na siatkę jako 3. kolumnę.

Musimy zmienić nazwy i tekst dodanych przycisków. Od góry ustawiamy kolejne właściwości (nazwa/tekst): “dodajBtn/Dodaj”, “zapiszBtn/Zapisz”, “anulujBtn/Anuluj”, “edytujBtn/Edytuj”, “usunBtn/Usuń”. W efekcie powinniśmy uzyskać następującą formatkę:

_images/qt5_09.png

Musimy dodać jeszcze 3 przyciski pozwalające na nawigację między adresami i wyjście z programu. Poniżej obiektu siatki umieszczamy więc 2 przyciski (PushButton), zaznaczamy je i klikamy ikonę Rozmieść poziomo w splitterze, następnie przeciągamy grupę na dół 2. kolumny siatki. Na koniec dodajemy jeszcze jeden przycisk na dole 3. kolumny. Dodanym obiektom zmieniamy właściwości (nazwa/tekst): “poprzBtn/Porzedni”, “nastBtn/Następny”, “koniecBtn/Koniec”.

Na koniec zaznaczamy formularz główny, na którym znajdują się wszystkie elementy interfejsu i klikamy przycisk Rozmieść w siatce (CTRL+G). Dzięki temu kontrolki będą skalowane wraz ze zmianą rozmiaru okna.

W sumie uzyskujemy poniższy projekt:

_images/qt5_10.png

Możemy uruchomić naszą aplikację, wybierając Budowanie/Uruchom (CTRL+R) lub klikając trzecią od dołu ikonę zielonego trójkąta w lewej kolumnie Qt Creatora. Powinniśmy zobaczyć podobne do poniższego okno:

_images/qt5_11.png

Deklaracje i implementacje

Po dodaniu elementów interfejsu musimy zadeklarować zmienne, za pomocą których będziemy mogli nimi manipulować. Przechodzimy do pliku adresy.h i wprowadzamy poniższe zmiany:

adresy.h nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#ifndef ADRESY_H
#define ADRESY_H

#include <QWidget>
#include <QLineEdit>
#include <QTextEdit>
#include <QPushButton>
#include <QTextCodec>

namespace Ui {
class adresy;
}

class adresy : public QWidget
{
    Q_OBJECT

public:
    explicit adresy(QWidget *parent = 0);
    ~adresy();

private:
    Ui::adresy *ui;
    QPushButton *dodajBtn;
    QPushButton *zapiszBtn;
    QPushButton *anulujBtn;
    QPushButton *poprzBtn;
    QPushButton *nastBtn;
    QPushButton *edytujBtn;
    QPushButton *usunBtn;
    QPushButton *koniecBtn;
    QLineEdit *nazwaLine;
    QTextEdit *adresText;
};

#endif // ADRESY_H

Na początku musimy zaimportować klasy, z których skorzystaliśmy przy budowie interfejsu. Najważniejszą jest klasa podstawowa wszystkich elementów interfejsu, czyli QWidget. Kolejne trzy odpowiadają wykorzystanym przez nas kontrolkom edycyjnym i przyciskom. Dodatkowa klasa QTextCodec pozwoli poprawnie wyświetlać polskie znaki. W wewnątrz naszej klasy głównej, której deklaracja rozpoczyna się w linii 14., deklarujemy prywatne (private) właściwości, których nazwy odpowiadają nazwom wcześniej dodanych elementów interfejsu graficznego. Formalnie każda zmienna jest wskaźnikiem do obiektu odpowiedniego typu.

W pliku adresy.cpp korzystamy ze zadekarowanych zmiennych, aby ustawić początkowe właściwości obiektów składających się na interfejs użytkownika.

adresy.cpp nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#include "adresy.h"
#include "ui_adresy.h"

adresy::adresy(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::adresy)
{
    ui->setupUi(this);

    QTextCodec::setCodecForLocale(QTextCodec::codecForName("UTF-8"));

    nazwaLine = new QLineEdit;
    nazwaLine = ui->nazwaLine;
    nazwaLine->setReadOnly(true);

    adresText = new QTextEdit;
    adresText = ui->adresText;
    adresText->setReadOnly(true);

    dodajBtn = new QPushButton;
    dodajBtn = ui->dodajBtn;

    zapiszBtn = new QPushButton;
    zapiszBtn = ui->zapiszBtn;
    zapiszBtn->hide();

    anulujBtn = new QPushButton;
    anulujBtn = ui->anulujBtn;
    anulujBtn->hide();

    nastBtn = new QPushButton;
    nastBtn = ui->nastBtn;
    nastBtn->setEnabled(false);

    poprzBtn = new QPushButton;
    poprzBtn = ui->poprzBtn;
    poprzBtn->setEnabled(false);

    edytujBtn = new QPushButton;
    edytujBtn = ui->edytujBtn;
    edytujBtn->setEnabled(false);

    usunBtn = new QPushButton;
    usunBtn = ui->usunBtn;
    usunBtn->setEnabled(false);

    koniecBtn = new QPushButton;
    koniecBtn = ui->koniecBtn;
    koniecBtn->setEnabled(true);

    setWindowTitle(trUtf8("Prosta książka adresowa"));
}

adresy::~adresy()
{
    delete ui;
}

W obrębie konstruktora głównej klasy naszej aplikacji o nazwie adresy, którego definicja rozpoczyna się w linii 4., tworzymy instancje klas użytych w interfejsie graficznym. Do zmiennych zadeklarownych w pliku adresy.h przypisujemy obiekty utworzone za pomocą operatora new, a następnie definiujemy ich początkowe właściwości.

Konstruktorowi odpowiada zawzwyczaj destruktur, a więc działanie, które usuwa stworzony obiekt, w tym wypadku interfejs użytkownika: adresy::~adresy().

Aby określić stan elementów interfejsu wykorzystujemy odpowiednie właściwości i metody reprezentujących je obiektów. Np. właściwość setReadOnly(true) blokuje edycję danego elementu, a właściwość setEnabled(false) uniemożliwia kliknięcie danego przycisku. Metoda hide() ukrywa obiekt.

Instrukcja QTextCodec::setCodecForLocale(QTextCodec::codecForName("UTF-8")) określa kodowanie komunikatów w standardzie “UTF-8” używanych w aplikacji, które wprowadzane są dalej za pomocą funkcji trUtf8(). Tak dzieje się np. podczas określania tytułu okna w wywołaniu setWindowTitle().

Wskazówka

W środowisku MS Windows kodowanie powinno zostać ustawione na Windows-1250.

Dzięki powyższym uzupełnieniom po uruchomieniu aplikacji pola nazwy i adresu będą nieaktywne, będziemy mogli natomiast użyć przycisków Dodaj, aby utworzyć nowy wpis, lub Koniec, aby zakończyć aplikację.

_images/qt5_12.png

Sygnały i sloty

Działanie aplikacji z interfejsem graficznym polega w uproszczeniu na reagowaniu na działania użytkownika, takie jak np. kliknięcie, naciśnięcie klawisza, przeciągnięcie itp. Wszystkie zdarzenia generowane z poziomu interfejsu użytkownika w terminologii biblioteki Qt emitują tzw. sygnały. Programista decyduje o tym, które z nich i jak są obsługiwane, definiując tzw. sloty, czyli funkcje powiązane z określonymi zdarzeniami. Mechanizm sygnałów i slotów umożliwia komunikację między obiektami aplikacji.

Każda z funkcji obsługujących zdarzenia musi zostać najpierw zadeklarowana w pliku adresy.h w sekcji public slots:, ich implementację musimy dopisać później do pliku adresy.cpp.

adresy.h nr
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public:
    explicit adresy(QWidget *parent = 0);
    ~adresy();

    enum Tryb { nawigujT, dodajT, edytujT };

public slots:
    void dodajKontakt();
    void koniec();

private:
    Ui::adresy *ui;
    QPushButton *dodajBtn;
    QPushButton *zapiszBtn;
    QPushButton *anulujBtn;
    QPushButton *poprzBtn;
    QPushButton *nastBtn;
    QPushButton *edytujBtn;
    QPushButton *usunBtn;
    QPushButton *koniecBtn;
    QLineEdit *nazwaLine;
    QTextEdit *adresText;

    Tryb aktTryb;
    void aktGui(Tryb tryb);
    QString staraNazwa;
    QString staryAdres;
    QMap<QString,QString> kontakty;

};

#endif // ADRESY_H

Oprócz deklaracji slotów w liniach 24-26 dopisujemy deklaracje kilku potrzebnych zmiennych. Definiujemy więc typ wyliczeniowy Tryb, z którego korzystamy deklarując zmienną aktTryb oraz prywatną funkcję pomocniczą aktGui. Posłużą one do określania 1 z 3 stanów działania aplikacji, takich jak: przeglądanie wpisów, dodawanie i ich edycja.

Dalej dopisujemy deklaracje zmiennych pomocniczych staraNazwa i staryAdres. Korzystamy tu z typu QString oznaczającego dane tekstowe. Na końcu deklarujemy specjalną zmienną kontakty, która posłuży do przechowywania nazw i skojarzonych z nimi adresów w postaci słownika typu QMap. Poszczególne elementy takiej listy mają postać skojarzonych ze sobą par (klucz, wartość).

adresy.cpp nr
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
    connect(dodajBtn, SIGNAL(clicked()), this, SLOT(dodajKontakt()));
    connect(koniecBtn,SIGNAL(clicked()),this, SLOT(koniec()));
}

adresy::~adresy()
{
    delete ui;
}

void adresy::dodajKontakt() {
    staraNazwa = nazwaLine->text();
    staryAdres = adresText->toPlainText();

    nazwaLine->clear();
    adresText->clear();

    aktGui(dodajT);
}

void adresy::aktGui(Tryb tryb) {
    aktTryb=tryb;
    switch (aktTryb) {
        case dodajT:
        case edytujT:
            nazwaLine->setReadOnly(false);
            nazwaLine->setFocus(Qt::OtherFocusReason);
            adresText->setReadOnly(false);

            dodajBtn->setEnabled(false);
            edytujBtn->setEnabled(false);
            usunBtn->setEnabled(false);

            zapiszBtn->show();
            anulujBtn->show();

            nastBtn->setEnabled(false);
            poprzBtn->setEnabled(false);
        break;
        case nawigujT:
            if (kontakty.isEmpty()) {
                nazwaLine->clear();
                adresText->clear();
            }
            nazwaLine->setReadOnly(true);
            adresText->setReadOnly(true);
            dodajBtn->setEnabled(true);

            int ile=kontakty.size();
            edytujBtn->setEnabled(ile >= 1);
            usunBtn->setEnabled(ile >=1 );
            nastBtn->setEnabled(ile > 1);
            poprzBtn->setEnabled(ile > 1);

            zapiszBtn->hide();
            anulujBtn->hide();
        break;
    }
}

void adresy::koniec() {
    adresy::close();
}

Powiązania między sygnałami i slotami ustalamy w pliku adresy.cpp za pomocą poleceń typu: connect(dodajBtn, SIGNAL(clicked()), this, SLOT(dodajKontakt()));. Funkcja conect() jako pierwszy argument wymaga zmiennej wskazującej obiekt, który emituje sygnał określony w 2. argumencie (np. SIGNAL(clicked()), czyli kliknięcie), 3. argument określa obiekt, który zostaje powiadomiony o zdarzeniu, w ostatnim argumencie podajemy funkcję, która ma zostać wykonana (SLOT(dodajKontakt())).

Jak widać powyżej, na końcu konstruktora naszej klasy adresy wiążemy kliknięcia przycisków dodajBtn i koniecBtn z funkcjami dodajKontakt() i koniec().

Funkcja dodajKontakt() przygotowuje aplikację do przełączenia w stan dodawania nowych danych. W tym celu najpierw zapamiętujemy dotychczasową nazwę i adres, a następnie wywołujemy funkcję pomocniczą z argumentem typu Tryb oznaczającym wymagany stan aplikacji: aktGui(dodajT).

Działanie funkcji aktGui(), obsługującej stany aplikacji, polega na uaktywnianiu lub wyłączaniu określonych elementów interfejsu w zależności od przeprowadzanej przez użytkownika czynności. Np. w trybie dodawania i edycji odblokowujemy możliwość wprowadzania tekstu w polach nazwy (nazwaLine->setReadOnly(false);) i adresu (adresText->setReadOnly(false);), pokazujemy przyciski pozwlające na zapis lub anulowanie wywołując metodę show(). Wyłączamy również nawigację, blokując odpowiednie przyciski (metoda setEnabled(false)). Po wejściu w tryb nawigacji czyścimy (clear()) zawartość pól nazwy i adresu, o ile lista kontaktów jest pusta (if (kontakty.isEmpty())). Następnie uaktywniamy przyciski edycji, usuwania i przeglądania, jeżeli mamy jakieś kontakty. Ilość kontaktów zapisujemy wcześniej w osobnej zmiennej (int ile=kontakty.size();). Na koniec przyciski zapisu i anulowania zostają zablokowane.

Slot koniec() wywoływany jest po kliknięciu przycisku Koniec i powoduje zamknięcie aplikacji przy użyciu metody close(). Wywołuje ona m.in. destruktor klasy, co powoduje – w naszym przypadku – usunięcie instancji obiektu interfejsu graficznego (delete ui;).

Dodawanie adresów

Pora zaimplementować obsługę trybu dodawania danych adresowych. Najpierw do pliku nagłówkowego dopisujemy deklaracje odpowiednich slotów:

adresy.h nr
25
26
27
28
29
public slots:
    void dodajKontakt();
    void koniec();
    void zapiszKontakt();
    void anuluj();

Musimy też na początku pliku dodać import klasy QMessageBox pozwalającej wyświetlać informacje użytkownikowi.

Następnie przechodzimy do pliku adresy.cpp, w którym trzeba powiązać sloty zapiszKontakt() i anuluj() ze zdarzeniem kliknięcia przycisków zapiszBtn i anulujBtn. Zadanie to proponujemy wykonać samodzielnie :-).

Na końcu pliku musimy dopisać definicje powiązanych funkcji:

adresy.cpp nr
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
void adresy::zapiszKontakt() {
    QString nazwa = nazwaLine->text();
    QString adres = adresText->toPlainText();

    if (nazwa == "" || adres == "") {
        QMessageBox::information(this, trUtf8("Puste pole"),trUtf8("Proszę wpisać nazwę i adres."));
        return;
    }

    if (aktTryb == dodajT) {
        if (!kontakty.contains(nazwa)) {
            kontakty.insert(nazwa, adres);
            QMessageBox::information(this, trUtf8("Dodano wpis"),
                                     trUtf8("Kontakt \"%1\" dodano do książki adresowej.").arg(nazwa));
        } else {
            QMessageBox::information(this, trUtf8("Nie dodano wpisu"),
                                     trUtf8("Przykro, ale kontakt \"%1\" jest już w książce adresowej.").arg(nazwa));
        }
    }

    aktGui(nawigujT);
}

void adresy::anuluj() {
    nazwaLine->setText(staraNazwa);
    adresText->setText(staryAdres);
    aktGui(nawigujT);
}

Funkcja zapiszKontakt() pobiera tekst wpisany w pola edycyjne za pomocą metod text() oraz toPlainText() i zapisuje je w zmiennych tekstowych. Następnie sprawdza, czy użytkownik wprowadził obydwie informacje. Jeżeli nie, wyświetla odpowiedni komunikat przy użyciu metody QMessageBox::information(). Pierwszy tekst, który przekazujemy do tej funkcji to tytuł okna dialogowego, drugi – właściwy komunikat. Następnie, jeżeli aplikacja jest w trybie dodawania, sprawdza, czy podana nazwa nie została zapisana wcześniej na liście kontakty. Jeśli nie (if (!kontakty.contains(nazwa))), dodaje nowe dane (kontakty.insert(nazwa, adres);) i wyświetla potwierdzenie. W przeciwnym razie informuje użytkownika o duplikacie. Na końcu aktywuje tryb nawigacji (aktGui(nawigujT);).

Jeżeli użytkownik rozmyśli się i kliknie odpowiedni przycisk, wywoływana jest funkcja anuluj(). Jak widać, przywraca ona w polach edycyjnych poprzednio wprowadzane dane i również aktywuje tryb nawigacji.

Tryb nawigacji

Obsługa nawigacji wymaga napisania funkcji obsługujących naciśnięcie przycisków Następny i Poprzedni, które stają się aktywne, jeżeli mamy więcej niż 1 dodany adres. Jak zwykle, zaczynamy od zadeklarowania publicznych slotów nast() i poprz() w pliku nagłówkowym. Dopisanie tych 2 linijek pozostawiamy do samodzielnego wykonania. Podobnie powiązanie zadeklarowanych slotów z sygnałami (kliknięciami) obiektów nastBtn i poprzBtn w konstruktorze klasy adresy.

Następnie dopisujemy implementację zadeklarowanych funkcji na końcu pliku adresy.cpp:

Na końcu pliku musimy dopisać definicje powiązanych funkcji:

adresy.cpp nr
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
void adresy::nast() {
    QString nazwa = nazwaLine->text();
    QMap<QString, QString>::iterator i = kontakty.find(nazwa);
    if (i != kontakty.end()) i++;
    if (i == kontakty.end()) i = kontakty.begin();
    nazwaLine->setText(i.key());
    adresText->setText(i.value());
}

 void adresy::poprz() {
    QString nazwa = nazwaLine->text();
    QMap<QString, QString>::iterator i = kontakty.find(nazwa);
    if (i == kontakty.begin()) i = kontakty.end();
    i--;
    nazwaLine->setText(i.key());
    adresText->setText(i.value());
 }

Wyświetlając kolejną parę powiązanych danych, tzn. nazwę i przypisany jej adres(y), musimy sprawdzić w fukcji nast(), czy mamy kolejny wpis, czy też aktualny jest ostatni. Wtedy należałoby wyświetlić wpis pierwszy. W tym celu pobieramy nazwę aktualnie wyświetlonego wpisu i tworzymy obiekt tzw. iteratora inicjowanego przez metodę find() i przypisanego do zmiennej i: QMap<QString, QString>::iterator i = kontakty.find(nazwa);. Iterator umożliwia łatwe poruszanie się po liście słowników zapisanych w zmiennej kontakty. Metoda i.key() zwraca nam klucz, a i.value() przypisaną mu wartość.

Jeżeli bieżący wpis nie jest ostatnim inkrementujemy wartość iteratora (if (i != kontakty.end()) i++;). W przeciwnym wypadku ustawiamy go na pierwszy wpis (i = kontakty.begin();); Na koniec pozostaje wczytanie nazwy (i.key()) i przypisanych jej danych (i.value()) do odpowiednich pól interfejsu.

Funkcja poprz() zaczyna się tak samo jak poprzednia, czyli od utworzenia iteratora wskazującego na bieżący wpis. Jeżeli jesteśmy na początku listy, ustawiamy iterator na element końcowy. Następnie przechodzimy do elementu końcowego (i--) i wyświetlamy odpowiednie dane.

Informacja

Metoda .end() klasy QMap zwraca iterator wskazujący na wirtualny (!) element po ostatnim elemencie listy. Dlatego, aby uzyskać dostęp do niego, musimy iterator dekrementować (i--).

Edycja i usuwanie

Do oprogramowania zostay jeszcze dwa przyciski: btnEdytuj, którego kliknięcie powinno wywołać funkcję edytujKontakt(), oraz btnUsun, który wywołuje funkcję usunKontakt(). Samodzielnie dopisujemy deklaracje funkcji do pliku nagłówkowego, a ich powiązania z sygnałami umieszczamy w pliku źródłowym.

Następnie implementujemy funkcje:

adresy.cpp nr
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
void adresy::edytujKontakt() {
    staraNazwa = nazwaLine->text();
    staryAdres = adresText->toPlainText();
    aktGui(edytujT);
}

void adresy::usunKontakt() {
    QString nazwa = nazwaLine->text();
    QString adres = adresText->toPlainText();

    if (kontakty.contains(nazwa)) {
        int button = QMessageBox::question(this,trUtf8("Potwierdź usunięcie"),
                                           trUtf8("Czy na pewno usunąć kontakt \"%1\"?").arg(nazwa),
                                           QMessageBox::Yes|QMessageBox::No);
        if (button == QMessageBox::Yes) {
            poprz();
            kontakty.remove(nazwa);
            QMessageBox::information(this,trUtf8("Usunięto"),
                                 trUtf8("Usunięto kontakt \"%1\".").arg(nazwa));
        }
    }
    aktGui(nawigujT);
}

Przejście do trybu edycji, czyli działanie funkcji edytujKontak(), polega na zapisaniu aktualnie wyświetlanych danych (przydatne, jeżeli użytkownik anuluje zmiany) i uaktywnieniu trybu (aktGui(edytujT);), tzn. odblokowaniu pól tekstowych i odpowiednich przycisków.

Usuwanie kontaktów również jest proste. Na początku pobieramy nazwę i związany z nim adres(y). Metoda .contains(nazwa) pozwala sprawdzić, czy lista kontaktów zawiera słownik o podanym kluczu. Natępnie prosimy użytkownika o potwierdzenie operacji. Po jego uzyskaniu najpierw wyświetlamy w aplikacji dane poprzedniego wpisu dzięki wywołaniu zdefiniowanej wcześniej funkcji poprz(), później dopiero usuwamy wpis za pomocą metody .remove(nazwa) i wyświetlamy potwierdzenie. Na koniec aktywujemy tryb nawigacji.

Poćwicz sam
Spróbuj rozszerzyć napisaną aplikację o możliwość przechowywania danych w pliku lub w bazie na dysku.

Zadania (Qt5)

Po zrealizowaniu scenariusza “Adresy” powinieneś być w stanie tworzyć przy użyciu biblioteki Qt proste prohgramy z interfejsem graficznym. Poniżej zamieszczamy kilka propozycji do samodzielnego opracowania.

Kalkulator

Stwórz kalkulator pozwalający na wykonywania co najmniej podstawowych działań. Rozwijając go, możesz pomyśleć o zaimplementowaniu historii obliczeń.

Konwerter liczb

Napisz program pozwalający na konwersję liczb wprowadzanych w systemach liczbowych o podstawie 2, 6, 8, 10 i 16.

Konwerter jednostek

Napisz program pozwalający na konwersję jednostek używanych w informatyce, np. bity na kilobajty, megabity na kilobajty itp.

Równanie kwadratowe

Napisz program, który po wprowadzeniu wymaganych danych wyświetla i rozwiązuje równanie kwadratowe.

Szyfr

Napisz program, który szyfruje i deszyfruje wprowadzony tekst wybraną metodą, np. szyfrem Cezara lub Vigenère’a.

Twój pomysł

Wymyśl i zaimplementuj program własnego pomysłu.


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Technologie WWW

WWW (ang. World Wide Web – ogólnoświatowa sieć) w celu dostarczania użytkownikom hipertekstowych dokumentów wykorzytuje wiele technologii, do których należą m. in.: protokół HTTP(S), języki opisu stron HTML, XML, języki generujące strony PHP, Python, arkusze stylów CSS, język skryptowy JavaScript czy technika AJAX.

Spis treści:

HTML&CSS – ćwiczenie 1

Pobierz archiwum html_css_cw1.zip i rozpakuj w dowolnym katalogu. W katalogu html_css_cw1 znajdziesz pliki:

  • index.html – szkielet strony HTML, tu wprowadzaj wszystkie zmiany,
  • style.css – podstawowy arkusz stylów CSS, tu dodawaj definicje stylów,
  • norwid.jpg – obrazek potrzebny w części drugiej,
  • index_done.png – zrzut gotowej strony index.html,
  • norwid_done.png – zrzut gotowej strony norwid.html.

Część pierwsza

Twoim zadaniem jest przygotowanie strony HTML, która wygląda jak poniżej.

_images/index_done.png

Kliknij, aby zobaczyć większy obrazek

Treści (tekst i obrazki) zawarte w dokumencie index.html kopiuj (pobieraj) ze strony Romantyzm umieszczonej na Wikipedii.

W pliku index.html dokonaj następujących zmian:

  1. Wstaw taki sam tytuł strony i zawartość nagłówka pierwszego stopnia.

  2. W menu wstaw dwa odnośniki:

    1. jeden o treści “Romantyzm” do strony zapisanej w pliku index.html,
    2. drugi o treści “Norwid” do strony zapisanej w pliku norwid.html.
  3. Wstaw dwa akapity, a w każdym wstaw obrazek.

  4. Wstaw akapit z tekstem “Źródło” i odnośnikiem do Wikipedii.

  5. Wstaw poziomą linię.

  6. Wstaw nagłówek stopnia drugiego.

  7. Wstaw listę wypunktowaną.

  8. Ostatni element listy powinien być odnośnikiem do konkretnej strony w Internecie.

  9. W stopce wstaw znacznik nagłówka trzeciego poziomu.

  10. Wstaw listę wypunktowaną zawierającą dwa odnośniki do stron w Internecie.

  11. Dołącz do dokumentu arkusz stylów CSS o nazwie style.css.

  12. W pliku style.css dodaj:

    1. definicję ustawiającą marginesy zewnętrzne strony (poza marginesem górnym) na 20px
    2. definicję powiększającą czcionkę nagłówka stopnia pierwszego do 26px
    3. definicje zmieniające kolor tła (wybierz) i wewnętrzne marginesy (wypełnienie) elementu <section> na 20px
    4. definicje zmieniające kolor tła (wybierz), kolor czcionki (wybierz) i wewnętrzne marginesy (wypełnienie) elementu footer na 20px
    5. klasę .obrazek definiującą szerokość (250px), obramowanie (2px solid grey) i marginesy zewnętrzne obrazków (10px)
    6. klasy .nalewo, .naprawo pozwalające wyrównywać elementy do lewej i prawej strony
    7. klasę .źródlo podkreślającą tekst, pochylającą czcionkę i wyrównującą tekst akapitu “Źródło” do prawej strony
  13. Przypisz odpowiednim elementom zdefiniowane klasy CSS.

Część druga

Twoim zadaniem jest przygotowanie strony HTML, która wygląda podobnie do poniższej.

_images/norwid_done.png

Kliknij, aby zobaczyć większy obrazek

Treści (tekst i obrazki) zawarte w dokumencie norwid.html kopiuj (pobieraj) z Wikipedii.

  1. Zapisz plik index.html pod nazwą norwid.html.
  2. Upewnij się, że działają odnośniki w menu.

W pliku norwid.html dokonaj następujących zmian:

  1. Zmień tytuł dokumentu i zawartość nagłówka strony.
  2. Z elementu <section> usuń wszystko poza nagłówkiem.
  3. Wstaw 2-komórkową tabelę, szerokość lewej komórki ustaw na 10%.
  4. W lewej komórce umieść obrazek, w prawej akapity z tekstem oraz akapit “Źródło”.
  5. Zmień treść i url odnośnika na dole strony.
  6. Za pomocą stylów CSS ustaw prawy zewnętrzny margines tabeli na 100px.
  7. Utwórz klasę CSS .tdright, która definiuje 5% wewnętrzne marginesy (wypełnienie) oraz prawe obramowanie (2px solid grey).
  8. Zastosuj utworzoną klasę do prawej komórki tabeli.

GetSimple CMS

GetSimple jest przykładem systemu zarządzania treścią (ang. Content Management System, CMS). Zadaniem CMS-ów jest wspomaganie tworzenia serisów intenetowych WWW i zarządzania nimi przy wykorzystaniu przyjaznych dla użytkownika interfejsów. Inne przykłady popularnych CMS-ów to: Drupal, Joomla! czy WordPress.

Pobranie archwium

Informacja

GetSimple wymaga działającego serwera WWW, przy czym serwery bazodanowe typu MySQL itp. nie są koniecznie, ponieważ GS przechowuje pliki w formacie XML. Zob. materiał Serwer deweloperski WWW.

Pobieramy archiwum GS i umieszczamy w podkatalogu public_html katalogu domowego (Linux) lub w podkatalogu www folderu instalacyjnego UwAmp (Windows). Rozpakowujemy je, a nazwę utworzonego katalogu zmieniamy na gs.

Ostrzeżenie

W Linuksie folderowi gs musimy nadać uprawnienia do zapisu i odczytu nie tylko dla właściciela, ale i dla grupy oraz innych. Robimy to z poziomu menedżera plików po kliknięciu prawym klawiszem myszy nazwy katalogu i wybraniu “Właściwości/Uprawnienia” (zob. zrzut poniżej). Uwaga: na pytanie typu “Zastosować rekursywnie” odpowiadamy twierdząco. Można też w katalogu public_html wydać w terminalu polecenie: chmod -R 777 gs.

_images/gs01.jpg

Instalacja

Uruchamiamy przeglądarkę i rozpoczynamy instalację wpisując w polu adresu: http://localhost/~nazwa_użytkownika/gs/admin (Linux) lub http://localhost/gs/admin (Windows). Jeżeli skorzystałeś z udostępnionego przez nas archiwum GetSimple, na stronie instalacyjnej wybieramy od razu język polski. Później klikamy “Continue with Setup” (“Kontynuuj instalację”).

_images/gs02.jpg

Informacja

W środowisku Linux ewentualne błędy chmod ignorujemy.

Na następnej stronie wpisujemy nazwę strony, login i email administratora.

_images/gs03.jpg

Po naciśnięciu “Install Now!” (“Instaluj”) może zostać wyświetlona strona z błędem ze względu na brak możliwości wysłania wiadomości e-mail z danymi logowania. To normalne. Wyświetlone hasło możemy ewentualnie skopiować, po czym kilkamy link “login here”.

_images/gs04.jpg

Spolszczenie

Jeżeli jest taka potrzeba, pobieramy plik spolszczenia i rozpakowujemy go w podkatalogu gs/admin/lang.

_images/gs06.jpg

Konfiguracja

W panelu administracyjnym (http://localhost/~nazwa_użytkownika/gs/admin) wybieramy w prawym górnym rogu Settings (Ustawienia). Ustawiamy: strefę czasową (“Local Timezone”), język interfejsu admina (“Language”) oraz nowe hasło (“New Password”) – i klikamy “Save settings” (“Zapisz”).

_images/gs07.jpg

Wtyczki

Za pomocą wtyczek (ang. plugins) rozszerzamy funkcjonalność GetSimple’a. Pobieramy przygotowany przez nas zestaw wtyczek i rozpakowujemy w podfolderze gs/plugins.

Zawartość przykładowego folderu plugins powinna wyglądać następująco:

_images/gs08.jpg

Wskazówka

W Linuksie po umieszczeniu archiwów zip w podkatalogu gs/plugins wygodnie je rozpakujesz wydając w terminalu polecenie typu: unzip nazwa_archiwum.zip.

Użycie polecenia “Rozpakuj tutaj” w menedżerze plików może umieścić pliki w dodatkowym i niepotrzebnym podfolderze, z którego trzeba je będzie przenieść do folderu nadrzędnego (plugins).

Przykładowe wtyczki:

  • I18N – wsparcie dla stron w różnych językach oraz bardzo użyteczne hierarchiczne menu;
  • I18N Gallery – tworzenie galerii zdjęć;
  • DynPages – wykonywanie kodu php umieszczonego w komponentach;
  • I18N Search – wyszukiwanie tekstu na stronach serwisu, tworzenie list zasobów oznaczonych tagami;
  • I18N Special Pages – tworzenie stron specjalnych typu newsy, artykuły, karty produktów itp.

Wtyczkami zarządzamy w sekcji “Wtyczki” panelu administracyjnego. Po instalacji należy wtyczkę(i) włączyć.

_images/gs09.jpg

Strona główna

Domyślnie dodana zostanie demonstracyjna strona główna widoczna w panelu “Strony”, którą wyświetlimy w przeglądarce, jeżeli klikniemy nazwę serwisu w lewym górnym rogu panelu administracyjnego. Strona główna dostępna jest pod adresem: http://localhost/~nazwa_użytkownika/gs/ (Linux) lub http://localhost/gs/ (Windows).

_images/gs10.jpg

Materiały

  1. Download GetSimple CMS – najnowsze wersje GS;

  2. Extend – najnowsze wersje tłumaczenia i wtyczek; w polu “Serach Repository” wpisujemy hasło “polish” i wybieramy link do ostatniej wersji:

    _images/gs05.jpg
  3. Wiki – dokumentacja.


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Bootstrap

Bootstrap to otwartoźródłowy zestaw narzędzi do tworzenia responsywnych (zob.: responsywny) stron WWW przy użyciu języków HTML, CSS i JS. Framework ten dostarcza gotowych klas CSS i szablonów związanych z typografią, formularzami, przyciskami, tabelami, oknami dialogowymi i innymi elementami.

Instalacja

Instalacja w tym wypadku oznacza podłączenie arkuszy CSS i skryptów JS Bootstrapa do kodu tworzonej strony. Najprościej skorzystać z zasobów przechowywanych w CDN-ach (ang. content delivery network, rozproszony sieciowy system dostarczania treści).

Typowy szablon HTML 5 używający Bootstrapa wygląda następująco:

index.html nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Szablon HTML 5 Bootstrap v.4</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  </head>
  <body>

    <div class="container">
      <h1>Szablon HTML 5 Bootstrap v.4</h1>
    </div>

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

W zaznaczonych liniach dołączane są komponenty CSS i JS Bootstrapa.

Informacja

Jeżeli korzystamy tylko z CSS-a i nie potrzebujemy komponentów JavaScript, skryptów JS nie musimy dołączać.

Układ strony

Do tworzenia układu strony używamy systemu siatkowego (ang. grid system). Wykorzystuje on dwie klasy kontenerów:

  • container – responsywny kontener o stałej szerokości z marginesami po lewej i prawej,
  • container-fluid – kontener wykorzystujący całą dostępną szerokość

– oraz klasy definiujące podział na rzędy:

  • row – definiuje rząd (wiersz) zawierający kolumny,
  • col- – definuje kolumnę

– i kolumny (maksymalna ilość kolumn w wierszu to 12). Kolumny można grupować w zależności od rozdzielczości za pomocą odpowiednich klas:

  • .col- – szerokość ekranu < 576px (extra small, xs),
  • .col-sm- – szerokość => 576px (small devices, sm),
  • .col-md- – szerokość => 768px (medium devices, md),
  • .col-lg- – szerokość => 992px (large devices, lg),
  • .col-xl- – szerokość => 1200px (xlarge devices, xl).

Przykładowy layout z dwoma równymi węższymi kolumnami bocznymi oraz kolumną środkową o szerokości równej 50%, tj. 6 kolumnom z 12 dostępnych, od rozdzielczości >= 576px:

layout.html nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col-3">
      kolumna lewa
    </div>
    <div class="col-sm-6">
      kolumna środkowa
    </div>
    <div class="col-3">
      kolumna prawa
    </div>
  </div>
</div>

Wskazówka

Przetetuj powyższy kod. Zwróć uwagę, że w rozdzielczości poniżej 576px kolumny wyświetlane są jedna pod drugą, a w innych rozdzielczościach szerokość kolumn dostosowywana jest automatycznie.

Narzędzia Pokaż/ukryj

Schemat nazewnictwa klas zmieniających właściwość display:

  • .d-{value} – dla xs
  • .d-{breakpoint}-{value} – dla sm, md, lg i xl.

Możliwe wartości (ang. value): none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex.

Przykłady:

  • .d-block .d-sm-none – pokaż tylko na xs
  • .d-none .d-lg-block .d-xl-none – pokaż tylko na lg
  • .d-none .d-sm-block – ukryj tylko na xs
  • .d-md-none .d-lg-block – ukryj tylko na md

Marginesy i wypełnienia

Schemat nazewnictwa klas zmieniających właściwości margin i padding:

  • {property}{sides}-{size} – dla xs
  • {property}{sides}-{breakpoint}-{size} - dla sm, md, lg, xl
  • property: m – marginesy lub p – wypełnienie
  • sides: t – góra, b – dół, l – lewo, r – prawo, x – lewo i prawo, y – góra i dół
  • sizes0 – brak, 1 – 1/4 odstępu, 2 – 1/2 odstępu, 3 – pełny odstęp, 4 – półtora odstępu, 5 – potrójność odstępu, auto – odstęp automatyczny.

Przykłady:

Materiały

  1. Dokumentacja Bootstrapa v.4;
  2. Podstawy flexbox (Mozilla Developer Network);
  3. Przykłady flexbox (w3schools.com);
  4. Przykłady układów (Bootstrap grid examples);

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Linux

Materiały o systemach operacyjnych Linux.

Spis treści:

Linux Live USB

Linuksa najłatwiej przetestować i zainstalować z klucza USB, na który nagrywamy obraz instalacyjny wybranej dystrybucji. W ten sposób otrzymujemy system w wersji live. Przygotowany klucz może posłużyć również jako system przenośny, który będzie zapisywał zmiany ustawień i tworzone dokumenty.

Polecamy dystrybucje oparte na Debianie, np.:

Przygotowanie klucza USB

  1. Pobierz obraz ISO wybranej dystrybucji.
  2. Przygotuj klucz USB – jeżeli planujesz używać Linuksa jako systemu przenośnego i chcez żeby system zapamiętywał ustawienia i dokumenty, użyj odpowiednio dużego napędu, np. 32 GB.
  3. W systemie Windows pobierz program Rufus. W systemie Linux do nagrania Linux Minta, Debiana itp. użyj programu Etcher lub UNetbootin. Do nagrania MX Linuksa pobierz program Live USB Maker.
  4. Włóż pendrajwa do gniazda USB, uruchom pobrany program.
  5. Wskaż obraz ISO i naciśnij odpowiedni przycisk (START, Ok, Dalej – zobacz zrzuty poniżej).
_images/rufus.jpg

Rufus

_images/etcher.png

Etcher

_images/unetbootin.png

UNetbootin

_images/live_usb_maker.png

MX Live USB Maker

Uruchomienie systemu Linux Live

Przygotowany klucz USB wkładamy do portu, uruchamiamy komputer naciskając podczas startu kilka razy odpowiedni dla naszego komputera klawisz, np. F12 lub F10 (może być inny), aby przygotować listę urządzeń startowych. Na liście wskazujemy nazwę wykrytego pendrive’a i klikamy myszą lub naciskamy Enter.

Informacja

Niekiedy trzeba uruchomić komputer kilkukrotnie, żeby wykrył naciśnięcie odpowiedniego klawisza.


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Porteus

Porteus jest odmianą Linuksa typu live zoptymalizowaną do uruchamiania z nośników wymiennych, np. kluczy USB. Oparty jest na najstarszej dystrybucji Linuksa – Slackware. System błyskawicznie startuje i pozwala na zachowanie wprowadzanych zmian, tj. konfiguracji, oprogramowania czy dokumentów użytkownika w pliku zapisu.

Przygotowaliśmy 64-bitowe spolszczone wersje ze środowiskiem graficznym XFCE lub Cinnamon, które bardzo dobrze nadają się m. in. do nauki programowania i realizacji materiałów Python101.

_images/porteus322X.jpg

Porteus 3.2.2 XFCE 64-bit

_images/porteus322C.jpg

Porteus 3.2.2 Cinnamon 64-bit

Klucz USB

Przygotowanie pendrajwa z systemem jest bardzo proste:

  1. Pobieramy obraz iso systemu: porteus322XFCE.iso [środowisko XFCE, 17.06.2017] lub porteus322Cinnamon.iso [środowisko Cinnamon, 13.02.2017].
  2. Przygotowujemy pustego pendrajwa o pojemności min. 2GB. Im szybszy, tym lepszy!

W systemie Windows:

  1. Do nagrania Porteusa na pendrajwa polecamy program Rufus. Pobierz, uruchom, wskaż plik iso i nagraj.
_images/rufus_porteus01.jpg

W systemie Linux:

  1. Montujemy pobrany obraz z uprawnieniami administratora (roota) w katalogu /mnt/loop:
~$ sudo mkdir /mnt/loop
~S sudo mount -o loop /path/to/Porteus-XFCE-v3.2.2-x86_64.iso /mnt/loop
  1. Wkładamy klucz USB, który powinien zostać wykryty jako partycja /dev/sdb1 lub /dev/sdc1 i zamontowany w katalogu /media/nazwa_użytkownika/etykieta_klucza. Sprawdzimy to poleceniem mount|grep "sdb" lub otwierając menedżer plików.
  2. Kopiujemy zawartość zamontowanego obrazu na pendrajwa za pomocą polecenia (lub menedżera plików):
~$ cp -r /mnt/loop/* /media/nazwa_użytkownika/etykieta_klucza
  1. Wchodzimy do katalogu boot na pendrajwie(!) i wydajemy polecenie z uprawnieniami roota:
/media/nazwa_użytkownika/etykieta_klucza$ sudo bash Porteus-installer-for-Linux.com

– upewniamy się, że wyświetlona została partycja klucza USB (np. /dev/sdb1), wpisujemy ok i potwierdzamy.

_images/porteus_usb_install_linux.jpg

Pierwsze uruchomienie

Po włożeniu pendrajwa do gniazda USB i włączeniu komputera należy nacisnąć klawisz wywołujący Boot menu. Zazwyczaj jest to któryś z klawiszy funkcyjnych, np.: F12. Czasem trzeba wywołać BIOS i dopiero wtedy wybrać wpis typu USB Device oznaczający naszego pendrajwa.

Podczas pierwszego uruchomienia zobaczymy komunikat “couldn’t find /porteus.dat” informujący, że system nie może znaleźć pliku zapisu. Tak ma być, naciskamy Enter.

Po uruchomieniu tworzymy plik zapisu, w którym przechowywane będą wszystkie zmiany.

  1. Wybieramy Start/System/Porteus Setings Centre, podajemy hasło roota (tj. “toor”), klikamy ikonę dyskietki (1), następnie ikonę Porteus Save Changes (2), a w następnym oknie wybieramy przycisk Create.
_images/psc02.png
  1. W polu “Savefile name” wpisujemy nazwę pliku: porteus.dat.

    W polu Location klikamy ikonę folderu i wskazujemy napęd USB, zazwyczaj “sdb1” lub “sdc1”. (Po wybraniu nazwy napędu powinniśmy widzieć na nim katalog porteus).

    Rozmiar zostawiamy domyślny lub podajemy większy, np. 768 lub 1024 MB. Klikamy “OK” i czekamy na utworzenie pliku.

_images/savefile_02a.png
  1. Na koniec ponownie uruchomiamy system!

Uwaga

Domyślna nazwa pliku zapisu, porteus.dat, wpisana jest w pliku boot/syslinux/porteus.cfg. Jeżeli zapis nie działa albo utworzyliśmy plik o innej nazwie i chcielibyśmy go użyć, należy otworzyć wspomniany plik, np. klikając przycisk Edit porteus.cfg (3) w oknie “Porteus Settings Centre” i wpisać właściwą ścieżkę do pliku zapisu: changes=/nazwa_pliku_zapisu.dat. Uwaga: / oznacza główny katalog pendrajwa!

_images/porteus_cfg0.png

Moduły

Porteus ma budowę modularną, składa się ze skompresowanych paczek w formacie xzm, zawierających system plików SquashFS. Na kluczu USB (płycie CD) znajduje się katalog porteus zawierający wszystkie moduły w podkatalogach:

  • base – moduły systemu bazowego,
  • modules – tu umieszczamy moduły ładowane automatycznie podczas startu,
  • optional – oprogramowanie dodatkowe, ładowane na żądanie.

Uwaga

Moduły są aktualizowane, aby usunąć ewentualne błędy lub dodać funkcjonalności:

Obraz iso, katalog potrteus/modules, zawiera :

  1. 01-devel – podstawowe narzędzia deweloperskie (kompilatory);
  2. 02-pl-locales – spolszczenie ze słownikami;
  3. 02-tcltk – biblioteki Tcl/Tk wymagane przez Pythona;
  4. 04-python2 – Python 2.7.13 (XFCE) lub 2.7.11 (Cinnamon) + PyQt5;
  5. 05-python3 – Python 3.6.1 (XFCE) lub 3.5.2 (Cinnamon) + PyQt5;
  6. 06-qt5 – biblioteka Qt 5.7 (XFCE) lub 5.6 (Cinnamon);
  7. 09-fonts-msubuinf – dodatkowe czcionki;
  8. 10-palemoon – przeglądarka Palemoon 27.3.1;
  9. 15-flashplayer-plugin – wtyczka Flash Player 25.0.0.148;
  10. 50-git – system kontroli wersji Git 2.9;
  11. 55-keepassx – menedżer haseł KeePassX 2.0.3;
  12. 90-tools – narzędzia lxrandr (zarządzanie ekranami), xmag, tree;
  13. 91-geany – Geany 1.29, programistyczne IDE;
  14. 95-sublime_text_3 – zaawansowany edytor programistyczny Sublime-Text 3 (3126);
  15. 99-home-guest – prekonfiguracja środowiska XFCE lub Cinnamon.

W katalogu porteus/optional znajdziesz:

  • biblioteki-py2.xzm – biblioteki potrzebne do realizacji scenariuszy Python101: Django, Django registration, Flask, Peewee, Sqlalchemy, flask-sqlalchemy, /home/guest/robot, /home/guest/mcpi-sim.

Informacja

Pakiety Pythona 2 i 3 zawierają: IPython (+QtConsole), Matplotlib, PyGame, Turtle, PyQt. Przyrostki -x i -c odróżniają wersje dla XFCE i Cinnamona.

Dodatkowe moduły

Moduły opcjonalne po pobraniu można wgrać do katalogu potrteus/optional:

  • libreoffice-5.2.3.3 – spolszczony pakiet biurowy LibreOffice;
  • sqlitestudio3.1.1 – menedżer baz danych SQLite;
  • etherpad-lite-1.5.7 – notatnik uruchamiany w przeglądarce umożliwiający współpracę nad dokumentami, polecenia: sudo /etc/rc.d/rc.etherpad-lite start, sudo /etc/rc.d/rc.etherpad-lite stop;
  • vsftpd-3.0.3 – serwer FTP, polecenia: sudo rc.ftp start, sudo rc.ftp stop;
  • php-5.6.23-hiawatha-10.5 – serwer WWW Hiawatha + PHP, polecenia: sudo lamp.sh start, sudo lamp.sh stop;
  • gimp-2.8.18 – zaawansowany edytor graficzny;
  • ghostscript-9.19 – narzędzia do przetwarzania języka PostScript i fomatu PDF;
  • sylpheed-3.5.1 – klient pocztowy z filtrem spamu;
  • xnview-0.8.4 – wielofunkcyjny menedżer plików graficznych;
  • faenza-icon-1.3 – zestaw ikon Faenza;
  • firefox-52.0b1 – przeglądarka WWW Firefox;
  • qt-creator-4.2.0 – lekkie środowisko programistyczne dla biblioteki Qt5.
  • kivy-1.9.1 – międzyplatformowy framework do projektowania aplikacji wykorzystujących naturalny interfejs użytkownika, w tym aplikacji mobilnych;
  • pycharm-2016.3-prof – profesjonalne zaawansowane środowisko IDE dla Pythona w wersji Professional Trial;
  • django-1.10.5 – wirtualne środowisko .pve z frameworkiem Django i biblioteką django-registration;
  • mcpi – biblioteki do konstruowania świata w Minecraft Pi Edition;
  • robobt-game – wirtualne środowisko env z bibliotekami do Robot Game;
  • biblioteki-py2 – zob. wyżej.
Zarządzanie modułami

Moduły z katalogu optional mogą być (de)aktywowane na żądanie. Służy do tego Menedżer modułów. W menu podręcznym modułów (po kliknięciu ich prawym klawiszem) znajdziesz również polecenia “Activate” i “Deactivate”.

_images/menedzer_modulow.png

Wskazówki

  1. Domyślne konta i hasła: root (administratora) => toor, guest => guest. Konto guest skonfigurowano do wykonywania poleceń z prawami roota za pomocą komendy sudo. Jeżeli po podaniu hasła roota jakaś operacja nie chce się wykonać, podaj hasło guest.
  2. Jeżeli chcesz, aby jakiś moduł był wczytywany podczas startu systemu, umieść go w katalogu porteus/modules. Z kolei moduł usunięty z tego katalogu nie będzie domyślnie dostępny.
  3. Ilość dostępnego miejsca w pliku zapisu sprawdzimy za pomocą poleceń:
~$ du -sh /mnt/live/memory/changes (poda ilość zajętego miejsca)
~$ df -h /mnt/live/memory/changes (poda ilość wolnego miejsca)
  1. Informacje o komputerze: Start/System/Porteus system info, np. o miejscu instalacji: Porteus/Boot_info.
_images/psi.png
  1. Możesz korzystać z wielu plików zapisu umieszczonych na pendrajwie. Nazwę aktualnego wpisujesz w pliku boot/syslinux/porteus.cfg:
_images/porteus_cfg1.png
  1. Plik zapisu możesz powiększyć:
  • start systemu w trybie “Always Fresh mode”;
  • następnie Start/System/Porteus save file manager i “I want to resize a save file”:
_images/resf.png

Uwaga

Tworzony jest nowy plik zapisu w podanej lokalizacji zawierający dotychczasowe zmiany. Nowym plikiem trzeba nadpisać dotychczasowy!

  1. Plik zapisu można przenosić między różnymi pendrajwami. Można go archiwizować i przeglądać w dowolnym systemie opartym na Linuksie. W tym celu montujemy plik z uprawnieniami roota np. do katalogu /mnt:
~$ sudo mount -o loop ścieżka_do_pliku/porteussave.dat /mnt
  1. Jeżeli masz problem z ustawieniem jasności ekranu laptopa, spróbuj polecenia z opcjonalnym argumentem:
~$ setbright.sh 190
  1. Skróty klawiszowe (Super oznacza klawisz Windows):
  • Super+T lub CTRL+AL+T – terminal, np. Terminator;
  • Super+F – menedżer plików;
  • Super+E – edytor Geany;
  • Super+S – edytor Sublime Text;
  • Super+Y – IDE PyCharm Professional (moduł opcjonalny);
  • Super+W – przeglądarka, np. Palemoon;
  • Super+R – Lxrandr (zarządzanie ekranami);
  • Super+K – Keepassx (menedżer haseł).

Problemy

  1. Jeżeli Rufus w MS Windows nie zadziała, rozpakowujemy zawartość obrazu na pendrajwa, np. za pomocą menedżera archiwów 7zip. Wchodzimy do katalogu boot na pendrajwie(!) i uruchamiamy plik Porteus-installer-for-Windows, upewniamy się, że wyświetlona została litera wskazująca na pendrajwa i potwierdzamy.
_images/porteus_usb_install_windows.jpg
  1. Nie każdy komputer da się uruchomić z pendrajwa. Możliwe przyczyny:
  • BIOS komputera nie obsługuje bootowania z urządzeń USB – to dotyczy starych maszyn (>10 lat?);
  • BIOS nie obsługuje konkretnego pendrajwa – to zdarza się z pendrajwami noname;
  • BIOS wymaga zapisania pendrajwa na liście dysków – trzeba wejśc do BIOSU i ustawić pendrajwa jako pierwsze urządzenie startowe na liście dysków twardych;
  • BIOS UEFI – na początku spróbujmy trybu generic, później dopiero UEFI.
  1. Jeżeli polecenie “Otwórz Terminal tutaj” otwiera ciągle ten sam katalog, kliknij prawym klawiszem okno Terminatora, wybierz “Preferencje” i odznacz opcję “SerwerDbus”.

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Python

Polecamy dokumentację Python101, która towarzyszy projektowi “Koduj z Klasą” realizowanemu pod patronatem Centrum Edukacji Obywatelskiej. Tam m. in:

Oprócz tego:

Algorytmy

Poniżej kody klasycznych algorytmów w Pythonie. [Komentarz do dopisania]

Trójkąt

Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
# Badanie możliwości zbudowania trójkąta i obliczanie jego pola
# za pomocą wzoru Herona
# <eCG>

import math  # dołączamy bibliotekę matematyczną

op = "t"  # deklarujemy i inicjujemy zmienną pomocniczą
while op != "n":  # dopóki wartość zmiennej op jest inna niż znak "n"
    a, b, c = input("Podaj 3 boki trójkąta (oddzielone przecinkami): ")
    # alternatywna forma pobrania danych
    # a, b, c = [int(x) for x in raw_input(
    #     "Podaj 3 boki trójkąta (oddzielone spacjami): ").split()]

    if a + b > c and a + c > b and b + c > a:  # warunek złożony
        print "Z podanych boków można zbudować trójkąt."
        # czy boki spełniają warunki trójkąta prostokątnego?
        if (a**2 + b**2 == c**2 or
                a**2 + c**2 == b**2 or
                b**2 + c**2 == a**2):
            print "Do tego prostokątny!"

        # na wyjściu możemy wyprowadzać wyrażenia
        print "Obwód wynosi:", (a + b + c)
        p = 0.5 * (a + b + c)  # obliczmy współczynnik wzoru Herona
        # liczymy pole ze wzoru Herona
        P = math.sqrt(p * (p - a) * (p - b) * (p - c))
        print "Pole wynosi:", P
        op = "n"  # ustawiamy zmienną na "n", aby wyjść z pętli while
    else:
        print "Z podanych odcinków nie można utworzyć trójkąta prostokątnego."
        op = raw_input("Spróbujesz jeszcze raz (t/n): ")

print "Do zobaczenia..."

Silnia

Wersja iteracyjna i rekurencyjna.

Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
# Obliczanie silni metodą iteracyjną i rekurencyjną
# <eCG>


def sil_rek(n):
    if n == 0:
        return 1
    return sil_rek(n - 1) * n


def sil_iter(n):
    wynik = 1
    for i in range(1, n + 1):
        wynik = wynik * i
    return wynik


def main(args):
    n = int(raw_input("Podaj liczbę: "))
    print "sil_iter(%s) = %s" % (n, sil_iter(n))
    print "sil_rek(%s) = %s" % (n, sil_rek(n))
    return 0


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))

Algorytm Euklidesa

Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
# Algorytm Euklidesa – znajdowanie najwększego wspólnego dzielnika
# <eCG>


def nwd_klasyczny(a, b):
    while a != b:
        if a > b:
            a -= b
        else:
            b -= a

    return a


def nwd_optymalny(a, b):
    while a > 0:
        a = a % b
        b = b - a

    return b


def main(args):
    a = int(input("Podaj liczbę a: "))
    b = int(input("Podaj liczbę b: "))

    print("Nwd(%, %) klasyczny =", nwd_klasyczny(a, b))
    print("Nwd(%, %) optymalny =", nwd_optymalny(a, b))

    return 0


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))

Ciąg Fibonacciego

Wersja iteracyjna i rekurencyjna.

Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
#
# Ciąg Fibonacciego
# <eCG>


def fib_iter0(n):
    """Funkcja zwraca n-ty wyraz ciągu Fibonacciego
       F(0) = 0
       F(1) = 1
       F(n) = F(n-2) + F(n-1) dla n > 1
    """
    if n == 0:
        return 0
    elif n == 1:
        return 1
    a, b = (0, 1)
    for i in range(1, n - 1):
        a, b = b, a + b
    return b


def fib_iter1(n):  # definicja funkcji
    """
        Funkcja drukuje kolejne wyrazy ciągu Fibonacciego
        aż do wyrazu n-tego, który zwraca.
        Wersja iteracyjna z pętlą while.
    """
    # dwa pierwsze wyrazy ciągu zapisane w tupli
    a, b = (0, 1)  # przypisanie wielokrotne, rozpakowanie tupli
    print(a, end=' ')
    while n > 1:
        print(b, end=' ')
        a, b = b, a + b  # przypisanie wielokrotne
        n -= 1


def fib_iter2(n):
    """
        Funkcja drukuje kolejne wyrazy ciągu Fibonacciego
        aż do wyrazu n-tego, który zwraca.
        Wersja iteracyjna z pętlą for.
    """
    a, b = 0, 1
    print("wyraz", 1, a)
    print("wyraz", 2, b)
    for i in range(1, n - 1):
        # wynik = a + b
        a, b = b, a + b
        print("wyraz", i + 2, b)

    print()  # wiersz odstępu
    return b


def fib_rek(n):
    """
        Funkcja zwraca n-ty wyraz ciągu Fibonacciego.
        Wersja rekurencyjna.
    """
    if n < 1:
        return 0
    if n < 2:
        return 1
    return fib_rek(n - 1) + fib_rek(n - 2)


def main(args):
    n = int(input("Podaj nr wyrazu: "))
    print("Wyraz {:d}: {:d}".format(n, fib_iter0(n)))
    print("=" * 40)
    fib_iter1(n)
    print()
    print("=" * 40)
    fib_iter2(n)
    print("=" * 40)
    print(fib_rek(n - 1))
    return 0


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))

Sortowanie

Przez wybór
Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
# Sortowanie przez wybór
# <eCG>


from random import randint


def sort_wybor(lista):
    n = len(lista)
    for i in range(n):
        k = i
        for j in range(i + 1, n):
            if lista[j] < lista[k]:
                k = j
        # pythonowy składnia dla zamiany wartości
        lista[i], lista[k] = lista[k], lista[i]

    return lista


def main(args):
    lista = []
    for i in range(10):
        lista.append(randint(0, 100))
    print lista
    print sort_wybor(lista)


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))

Konwersja liczby

Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
# Konwersja liczby dziesiętnej na system o podanej podstawie
# <eCG>

cyfry = {10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F'}
cyfry2 = {v: k for k, v in cyfry.items()}


def do10(liczba, podst):
    """
    Funkcja konwertuje liczbę o podanej podstawie na system dziesiętny
    Liczba konertowana jest na napis
    """
    p = len(str(liczba)) - 1
    liczba10 = 0
    for l in str(liczba):
        if l.isdigit():
            liczba10 += int(l) * podst**p
        else:
            liczba10 += cyfry2[l] * podst**p
        p -= 1
    print liczba10


def konwertuj(liczba, podst):
    """
    Funkcja konwertuje podaną liczbę dziesiętną na system o podanej podstawie
    wykorzystując dzielenie z resztą, zwraca listę reszt.
    """

    global cyfry

    # słownik ze znakami cyfr większych od 9
    reszty = []  # pusta lista
    while liczba > 0:
        reszty.append(liczba % podst)
        liczba = liczba / podst

    reszty.reverse()  # odwrócenie elemnetów listy
    if podst > 10:  # zamiana cyfr większych od 9
        reszty = [cyfry[x] if x > 9 else x for x in reszty]
    return reszty


def main(args):
    liczba = raw_input("Podaj liczbę: ")
    podst = int(raw_input("Podaj podstawę (2-16): "))
    # cel = raw_input("Podaj podstawę systemu docelowego: ")
    do10(liczba, podst)
    # liczbaP = "".join(str(x) for x in konwertuj(int(liczba), podst))
    # print "Liczba(10):", liczba10
    # print "Liczba(%s): %s" % (podst, liczbaP)

    return 0


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))

Szyfr Cezara

Wersja ze stałym kluczem.

Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
# Implementacja klasycznego szyfru Cezara
# <eCG>

"""
    ZADANIE
    Pobierz od użytkownika ciąg znaków, zaszyfruj go przy wykorzystaniu
    szyfru Cezara o kluczu podanym przez użytkownika,
    wyświetl zaszyfrowany ciąg. Następnie zdeszyfruj go
    i ponownie wyświetl wynik operacji.
"""


def szyfruj(tekst, klucz):
    szyfrogram = ""
    for znak in tekst:
        znak = znak.lower()
        if znak == ' ':
            pass
        elif ord(znak) + klucz > 122:
            znak = chr(ord(znak) + klucz - 26)
        else:
            znak = chr(ord(znak) + klucz)
        szyfrogram += znak
    return szyfrogram


def deszyfruj(szyfrogram, klucz):
    tekst = ""
    for znak in szyfrogram:
        if znak == ' ':
            pass
        elif ord(znak) - klucz < 97:
            znak = chr(ord(znak) - klucz + 26)
        else:
            znak = chr(ord(znak) - klucz)
        tekst += znak
    return tekst


def main(args):
    tekst = raw_input("Podaj tekst do zaszyfrowania:\n")
    try:
        klucz = int(raw_input("Podaj klucz:\n"))
        klucz = klucz % 26
        szyfrogram = szyfruj(tekst, klucz)
        deszyfr = deszyfruj(szyfrogram, klucz)
        assert deszyfr == tekst.lower()
        print "Szyfrogram:\n", szyfrogram
        print "Deszyfracja:\n", deszyfr
    except ValueError:
        print "Błędny klucz!"
    return 0


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))


"""
    JAK TO DZIAŁA
    try ... except to konstrukcja która przechwytuje błędy: w bloku try
    użytkownik może wprowadzić niewłaściwy klucz, np. literę, wtedy wykona się
    kod w bloku except.
    def nazwa_funkcji(argumenty): – tak definiujemy funkcje
    return zmienna – instrukcja zwraca wartość przypisaną zmiennej
    nazwa_funkcji(argumenty) – tak wywołujemy funkcje.
    Napisy mogą być indeksowane (od 0), co daje dostęp do pojedynczych znaków.
    Funkcja len(str) zwraca długość napisu, wykorzystana jako argument funkcji
    range() pozwala iterować po znakach napisu.
    Operator += oznacza dodanie argumentu z prawej strony do wartości z lewej.
"""

Pierwiastek kwadratowy

Użycie metody Herona.

Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
# Obliczanie wartości pierwiastka kwadratowego z podanej liczby
# przy użyciu metody Herona: a(n) = (a(n-1) + x / a(n-1)) / 2
# <eCG>


def pierwiastek(x, d):
    a = x  # inicjalizacja szkuanej wartości
    while abs(a - (x / a)) > d:
        a = (a + (x / a)) / 2
    return a


def main(args):
    # liczba dla której szukamy pierwiastka
    x = float(raw_input("Podaj liczbę: "))
    # dokładność obliczeń
    d = float(raw_input("Podaj dokładność: "))
    # drukujemy wynik z dokładnością do 6 miejsc
    print "Pierwiastek kwadratowy: {:.6f}".format(pierwiastek(x, d))
    return 0


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))

Pole obszaru

Całka nieoznaczona Riemanna. [Sprawdzić poprawność obliczeń.]

Kod nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
# Obliczanie pola obszaru ograniczoneg wykresem funkcji:
# y = x^2, prostymi x = a, x = b i osią OX
# (oznaczona całka Riemanna)
# <eCG>


def funkcja(x):
    return x * x


def pole(a, b, n):
    p = 0  # wyliczane pole
    d = (b - a) / n  # długość przedziałów w zakresie <a;b>
    for i in range(n):
        x = a + (d * i) + (d / 2)  # punkty pośrednie przedziałów
        p += abs(funkcja(x))  # suma pól prostokątów
    return p


def main(args):
    a = int(raw_input("Podaj lewy kraniec: "))
    b = int(raw_input("Podaj prawy kraniec: "))
    n = int(raw_input("Podaj liczbę przedziałów: "))
    print "Pole: {:.3f}".format(pole(a, b, n))
    return 0


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Linki

Programy

  • I-Nex – informacje o systemie
  • CPU-X – informacje o systemie

Galerie

GetSimple CMS

Instalacja


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5

Indeks


Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5