diff --git a/.github/list_languages b/.github/list_languages new file mode 100755 index 00000000000..5bc27d43f0c --- /dev/null +++ b/.github/list_languages @@ -0,0 +1,20 @@ +#!/usr/bin/env python3 + +import json +import os +from pathlib import Path + + +def main(): + directory = Path(__file__).absolute().parent.parent + languages = sorted(x.name for x in directory.iterdir() + if x.is_dir() and len(x.name) == 2 and x.name != 'en') + + if 'GITHUB_ACTION' in os.environ: + print(f'::set-output name=languages::{json.dumps(languages[:2])}') + for language in languages[:2]: + print(language) + + +if __name__ == '__main__': + main() diff --git a/.github/workflows/translations.yml b/.github/workflows/translations.yml new file mode 100644 index 00000000000..a1c52ae845b --- /dev/null +++ b/.github/workflows/translations.yml @@ -0,0 +1,52 @@ +name: Update translations + +on: + workflow_dispatch: + schedule: + - cron: '4 4 * * 0' + +env: + GIT_AUTHOR_NAME: Django Girls Automation + GIT_AUTHOR_EMAIL: automation@theforeman.org + +jobs: + list_languages: + name: List languages + runs-on: ubuntu-latest + if: github.repository_owner == 'ekohl' + outputs: + languages: ${{ steps.set_list.outputs.languages }} + steps: + - name: Checkout + uses: actions/checkout@v2 + - name: Set the language list + id: set_list + run: ./.github/list_languages + + update_language: + name: 'Update ${{ matrix.language }} translations from Crowdin' + needs: list_languages + if: ${{ needs.list_languages.outputs.languages != '[]' }} + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + language: ${{ fromJson(needs.list_languages.outputs.languages) }} + steps: + - name: Checkout + uses: actions/checkout@v2 + - name: Update language + run: | + wget https://crowdin.com/backend/download/project/django-girls-tutorial/${{ matrix.language }}.zip + unzip ${{ matrix.language }}.zip + find ${{ matrix.language }} -name '*.md' -delete + rsync -av master/${{ matrix.language }}*/* ${{ matrix.language }}/ + rm -rf ${{ matrix.language }}.zip master + - name: Open a PR + uses: peter-evans/create-pull-request@v3 + with: + commit-message: "Update ${{ matrix.language }} translations from Crowdin" + branch: "update_translations/${{ matrix.language }}" + title: "Update ${{ matrix.language }} translations from Crowdin" + body: '' + delete-branch: true diff --git a/cs/GLOSSARY.md b/cs/GLOSSARY.md old mode 100755 new mode 100644 diff --git a/cs/README.md b/cs/README.md old mode 100755 new mode 100644 index 5ad33b27ddd..1ac284e7d6e --- a/cs/README.md +++ b/cs/README.md @@ -1,53 +1,51 @@ # Django Girls Tutoriál -[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) > Tento návod je licencován pod Creative Commons Attribution-ShareAlike 4.0 mezinárodní licencí. Chcete-li zobrazit kopii této licence, navštivte https://creativecommons.org/licenses/by-sa/4.0/ -## Úvod +## Vítej -Už jsi někdy měla pocit, že svět stále více a více používá technologie a ty zůstáváš nějak pozadu? Přemýšlela jsi někdy, jak vytvořit webové stránky, ale nikdy jsi neměla dostatek motivace začít? Přemýšlela jsi někdy, že svět softwaru je pro tebe příliš složitý na to, abys zkusila něco naprogramovat sama? +Vítej v Django Girls Tutoriálu! We are happy to see you here. :) In this tutorial, we will take you on a journey under the hood of web technologies, offering you a glimpse of all the bits and pieces that need to come together to make the web work as we know it. -Máme pro tebe dobrou zprávu! Programování není tak těžké, jak se zdá, a zde ti chceme ukázat, jak zábavné to může být. +As with all unknown things, this is going to be an adventure - but no worries, since you already worked up the courage to be here, you'll be just fine. :) -Tento návod tě magicky nepromění v programátora. Jestli chceš být dobrá programátorka, budeš potřebovat měsíce nebo dokonce roky učení a praxe. Ale chceme ti ukázat, že programování nebo tvorba webových stránek není tak složitá, jak se zdá. Budeme se snažit ti vysvětlit různé kousky a střípky tak jednoduše, jak dokážeme, aby ses necítila technologiemi zastrašena. +## Úvod -Doufáme, že se nám podaří přiblížit ti tuto technologii tak, abys ji měla stejně ráda jako my! +Have you ever felt that the world is more and more about technology to which you cannot (yet) relate? Přemýšlela jsi někdy, jak vytvořit webové stránky, ale nikdy jsi neměla dostatek motivace začít? Přemýšlela jsi někdy, že svět softwaru je pro tebe příliš složitý, aby jsi zkusila něco naprogramovat sama? -## Co se naučíš během kurzu? +Máme pro tebe dobrou zprávu! Programování není tak těžké jak se zdá, a zde ti chceme ukázat, jak zábavné to může být. -Po dokončení kurzu budeš mít jednoduchou, fungující webovou aplikaci: vlastní blog. Ukážeme ti, jak ho zprovoznit online tak, aby se ostatní mohli na tvoji práci podívat! +This tutorial will not magically turn you into a programmer. Jestli chceš být dobrý programátor, budeš potřebovat měsíce nebo dokonce roky učení a praxe. Ale chceme ti ukázat, že programování nebo tvorba webových stránek není tak složitá, jak se zdá. Budeme se snažit ti vysvětlit různé kousky a střípky, tak jednoduše jak dokážeme, aby jsi se necítila zastrašena technologií. -Tvá aplikace bude (více či méně) vypadat takto: +Doufáme, že se nám podaří ti přiblížit tuto technologii tak, aby jsi ji měla stejně ráda jako my! -![Figure 0.1][2] +## Co se naučíš během kurzu? - [2]: images/application.png +Once you've finished the tutorial, you will have a small working web application: your own blog. We will show you how to put it online, so others will see your work! -> Pokud budeš procházet kurz sama bez učitele, který ti by ti pomáhal v případě, že narazíš na nějaký problém, máme pro tebe chat: [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge). Požádali jsme kouče a předchozí účastníky kurzu, aby čas od času pomáhali ostatním s tímto kurzem. Neboj se zde zeptat na jakoukoliv otázku! +Tvá aplikace (více či méně) bude vypadat takto: -OK, [začněme od začátku...][3] +![Figure 0.1](images/application.png) - [3]: ./how_the_internet_works/README.md +> If you work with the tutorial on your own and don't have a coach who will help you in case of any problem, we have a chat system for you: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Požádali jsme kouče a předchozí účastníky kurzu, aby čas od času pomáhali ostatním s tímto kurzem! Neboj se zde zeptat na jakoukoliv otázku! -## O kurzu a přispěvatelích +OK, [let's start at the beginning…](./how_the_internet_works/README.md) + +## Following the tutorial at home -Tento kurz je provozován organizací [DjangoGirls][4]. Pokud najdeš nějaké chyby, nebo chceš aktualizovat návod, prosím, [postupuj podle pokynů pro přispívající][5]. +It is amazing to take part in a Django Girls workshop, but we are aware that it is not always possible to attend one. This is why we encourage you to try following this tutorial at home. For readers at home, we are currently preparing videos that will make it easier to follow the tutorial on your own. It is still a work in progress, but more and more things will be covered soon at the [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) YouTube channel. - [4]: https://djangogirls.org/ - [5]: https://github.com/DjangoGirls/tutorial/blob/master/README.md +In every chapter already covered, there is a link that points to the correct video. -## Český překlad +## O kurzu a přispěvatelích -Původní DjangoGirls tutoriál přeložila do češtiny skupina dobrovolníků. Poděkování patří hlavně: -Davidovi (dakf), Kristýně Kumpánové, Veronice Gabrielové, Tomáši Ehrlichovi, -Aničce Jaegerové, Matějovi Stuchlíkovi, Filipovi Sivákovi a Juraji M. Bezručkovi. +Tento kurz je provozován [DjangoGirls](https://djangogirls.org/). Pokud najdeš nějaké chyby, nebo chceš aktualizovat návod, prosím,[postupuj podle pokynů pro přispívající](https://github.com/DjangoGirls/tutorial/blob/master/README.md). -## Chtěla bys nám pomoci přeložit návod do jiných jazyků? +## Would you like to help us translate the tutorial into other languages? -V současné době jsou překlady provozovány na platformě crowdin.com na adrese: +Currently, translations are being kept on crowdin.com platform at: https://crowdin.com/project/django-girls-tutorial -Pokud tvůj jazyk není uveden v seznamu na crowdin, prosím, [založ nový požadavek][6] pro přidání dalšího jazyka. - - [6]: https://github.com/DjangoGirls/tutorial/issues/new +If your language is not listed on [crowdin](https://crowdin.com/), please [open a new issue](https://github.com/DjangoGirls/tutorial/issues/new) informing us of the language so we can add it. \ No newline at end of file diff --git a/cs/SUMMARY.md b/cs/SUMMARY.md old mode 100755 new mode 100644 index 44793ad9d19..080c990996d --- a/cs/SUMMARY.md +++ b/cs/SUMMARY.md @@ -1,26 +1,35 @@ # Shrnutí -* [Úvod](README.md) -* [Instalace](installation/README.md) -* [Jak funguje internet](how_the_internet_works/README.md) -* [Úvod do příkazové řádky](intro_to_command_line/README.md) -* [Instalace Pythonu](python_installation/README.md) -* [Editor zdrojového kódu](code_editor/README.md) -* [Úvod do Pythonu](python_introduction/README.md) -* [Co je Django?](django/README.md) -* [Instalace Django](django_installation/README.md) -* [Tvůj první Django projekt!](django_start_project/README.md) -* [Django modely](django_models/README.md) -* [Django admin](django_admin/README.md) -* [Nasazení!](deploy/README.md) -* [Django URL](django_urls/README.md) -* [Django views -- je čas začít tvořit!](django_views/README.md) -* [Úvod do HTML](html/README.md) -* [Django ORM (tvorba dotazů)](django_orm/README.md) -* [Dynamická data v šablonách](dynamic_data_in_templates/README.md) -* [Django šablony](django_templates/README.md) -* [CSS - udělejte svou aplikaci hezčí](css/README.md) -* [Rozšíření šablon](template_extending/README.md) -* [Rozšíření vaší aplikace](extend_your_application/README.md) -* [Django formuláře](django_forms/README.md) -* [Co dál?](whats_next/README.md) +* [Úvod](README.md) +* [Instalace](installation/README.md) + * [Command Line](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [Code Editor](installation/README.md#code-editor) + * [Virtual Environment](installation/README.md#virtualenv) + * [Django](installation/README.md#django) + * [Git](installation/README.md#git) + * [GitHub](installation/README.md#github-account) + * [PythonAnywhere](installation/README.md#pythonanywhere-account) +* [Installation (chromebook)](chromebook_setup/README.md) +* [Jak funguje Internet](how_the_internet_works/README.md) +* [Úvod do příkazové řádky](intro_to_command_line/README.md) +* [Instalace Pythonu](python_installation/README.md) +* [Editor zdrojového kódu](code_editor/README.md) +* [Úvod do Pythonu](python_introduction/README.md) +* [Co je Django?](django/README.md) +* [Instalace Django](django_installation/README.md) +* [Tvůj první Django projekt!](django_start_project/README.md) +* [Django modely](django_models/README.md) +* [Django admin](django_admin/README.md) +* [Nasazení!](deploy/README.md) +* [Django URLs](django_urls/README.md) +* [Django views – time to create!](django_views/README.md) +* [Úvod do HTML](html/README.md) +* [Django ORM (tvorba dotazů)](django_orm/README.md) +* [Dynamická data v šablonách](dynamic_data_in_templates/README.md) +* [Django šablony](django_templates/README.md) +* [CSS – make it pretty](css/README.md) +* [Rozšiřování šablon](template_extending/README.md) +* [Rozšíření tvé aplikace](extend_your_application/README.md) +* [Django formuláře](django_forms/README.md) +* [Co dál?](whats_next/README.md) \ No newline at end of file diff --git a/cs/chromebook_setup/README.md b/cs/chromebook_setup/README.md new file mode 100644 index 00000000000..802d9c77ac9 --- /dev/null +++ b/cs/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Chromebook setup + +> **Poznámka** Pokud jsi již prošla [instalačními kroky](../installation/README.md), není třeba to znovu dělat – můžeš přeskočit přímo vpřed na [Úvod do Pythonu](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/cs/chromebook_setup/instructions.md b/cs/chromebook_setup/instructions.md new file mode 100644 index 00000000000..7b9ff79bfee --- /dev/null +++ b/cs/chromebook_setup/instructions.md @@ -0,0 +1,158 @@ +Pokud nepoužíváš Chromebook, můžeš [přeskočit přímo na tuto sekci](http://tutorial.djangogirls.org/en/installation/#install-python). Pokud Chromebook používáš, postup instalace se bude trochu lišit. Takže zbytek návodu k instalaci můžeš ignorovat. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com) + +Cloud IDE je nástroj, který ti umožňuje využívat editor kódu a přístup k počítači běžícím na internetu, kde můžeš instalovat, psát a spouštět software. V průběhu tutoriálu se Cloud IDE bude chovat jako tvůj *lokální počítač*. Příkazy budeš psát stále pomocí příkazové řádky v terminálu stejně jako tví spolužáci na OS X, Ubuntu nebo Windows, ale tvůj terminál bude propojený s počítačem běžícím někde jinde, což je řešeno pomocí Cloud IDE. Zde jsou instrukce pro cloud IDEs (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com). Můžeš si vybrat jedno z Cloud IDE řešení a následovat instrukce nastavení pro zvolený typ. + +#### PaizaCloud ID + +1. Jdi na [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Zaregistruj se nebo se přihlaš ke svému účtu, pokud již registrovaná jsi. +3. Klikni na *Nový Server* a vyber možnost Django App. +4. Klikni na tlačítko Terminál (na levé straně okna). + +Nyní bys měla vidět rozhraní s postranním panelem a tlačítka nalevo. Klikni na tlačítko Terminál, kde po otevření příkazové řádky uvidíš něco jako: + +{% filename %}Terminal{% endfilename %} + + $ + + +Terminál v PaizaCloud IDE je připraven a čeká na tvé příkazy. Můžeš měnit velikost okna, pokud ti nevyhovuje velikost zobrazení. + +#### AWS Cloud9 + +Momentálně Cloud9 vyžaduje, aby ses přihlásila pomocí AWS účtu a zadala jako platební metodu tvou platební kartu. + +1. Nainstaluj si Cloud9 z odkazu [Chrome webový obchod](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Běž na [c9.io](https://c9.io) a klikni na *Get started with AWS Cloud9* +3. Přihlaš se pomocí svého AWS účtu (vyžaduje zadání platebních údajů, ale bude možné využívat jej zdarma bez placení). +4. V AWS nástěnce vlož *Cloud9* ve vyhledávacím políčku a dej vyhledat. +5. Na Cloud9 nástěnce klikni na *Vytvořit prostředí* +6. Pojmenuj to jako *django-girls* +7. Zatímco se konfiguruje nastavení, pro "Typ prostředí" vyber možnost *Vytvořit novou instanci pro prostředí (EC2)* a jako "Typ instance" zvol *t2.micro* (mělo by zmiňovat ""Free-tier eligible."). Výchozí nastavení plateb a výdajů lze nechat tak, jak je a stejně pokračovat i u dalších nastavení. +8. Klikni na *Další krok* +9. Klikni na *Vytvořit prostředí* + +Nyní bys měla vidět rozhraní s postranním panelem a velkým hlavním oknem, kde bude nějaký text a malé okno v dolní části stránky, které vypadá přibližně takto: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +Tato dolní část je tvůj terminál. Můžeš jej použít pro zadání příkazů pro vzdálený Cloud9 počítač. Můžeš měnit velikost okna, jak potřebuješ. + +#### Glitch.com Cloud IDE + +1. Go to [Glitch.com](https://glitch.com/) +2. Sign up for an account (https://glitch.com/signup) or use your GitHub account if you have one. (See GitHub instructions below.) +3. Click *New Project* and choose *hello-webpage* +4. Click on the Tools dropdown list (at the bottom left side of the window), then on Terminal button to open terminal tab with a prompt like this: + +{% filename %}Terminal{% endfilename %} + + app@name-of-your-glitch-project:~ + + +When using Glitch.com as your Cloud IDE, you don't have to create a virtual environment. Instead, create the following files manually: + +{% filename %}glitch.json{% endfilename %} + +```json +{ + "install": "pip3 install -r requirements.txt --user", + "start": "bash start.sh", + "watch": { + "throttle": 1000 + } +} +``` + +{% filename %}requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +{% filename %}.bash_profile{% endfilename %} + +```bash +alias python=python3 +alias pip=pip3 +``` + +{% filename %}start.sh{% endfilename %} + +```bash +chmod 600 .bash_profile +pip3 install -r requirements.txt --user +python3 manage.py makemigrations +python3 manage.py migrate +python3 manage.py runserver $PORT +``` + +Once these files are created, go to the Terminal and execute the following commands to create your first Django project: + +{% filename %}Terminal{% endfilename %} + + django-admin.py startproject mysite . + refresh + + +In order to see detailed error messages, you can activate Django debug logs for your Glitch application. Simply add the following at the end of the `mysite/settings.py` file. + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LOGGING = { + 'version': 1, + 'disable_existing_loggers': False, + 'handlers': { + 'file': { + 'level': 'DEBUG', + 'class': 'logging.FileHandler', + 'filename': 'debug.log', + }, + }, + 'loggers': { + 'django': { + 'handlers': ['file'], + 'level': 'DEBUG', + 'propagate': True, + }, + }, +} +``` + +This will create a `debug.log` file detailing Django operations and any error messages that might come up, making it much easier to fix if your website does not work. + +The initial restarting of the Glitch project should fail. (If you click on the top dropdown button `Show` then click on `In a New Window`, you will receive a `DisallowedHost` error message.) Do not worry about it at this stage, the tutorial will fix this as soon as you update the Django settings of your project in the `mysite/settings.py` file. + +### Virtuální prostředí + +A virtual environment (also called a virtualenv) is like a private box we can stuff useful computer code into for a project we're working on. We use them to keep the various bits of code we want for our various projects separate so things don't get mixed up between projects. + +Run: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3 -m venv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(note that on the last line we use a tilde followed by an equal sign: `~=`). + +### GitHub + +Make a [GitHub](https://github.com) account. + +### Python Anywhere + +The Django Girls tutorial includes a section on what is called Deployment, which is the process of taking the code that powers your new web application and moving it to a publicly accessible computer (called a server) so other people can see your work. + +This part is a little odd when doing the tutorial on a Chromebook since we're already using a computer that is on the Internet (as opposed to, say, a laptop). However, it's still useful, as we can think of our Cloud 9 workspace as a place for our "in progress" work and Python Anywhere as a place to show off our stuff as it becomes more complete. + +Thus, sign up for a new Python Anywhere account at [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/cs/code_editor/README.md b/cs/code_editor/README.md old mode 100755 new mode 100644 index f91d7968087..8ce898b2940 --- a/cs/code_editor/README.md +++ b/cs/code_editor/README.md @@ -1,7 +1,11 @@ # Editor zdrojového kódu +> Čtení na doma: tato kapitola je pokryta ve videu [Instalujeme pro Python & Editor kódu](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + Právě se chystáš napsat svůj první řádek kódu, takže je čas sáhnout po editoru kódu! -> **Poznámka** Mohla jsi to udělat už dříve v kapitole o instalaci - jestli je to tak, prostě jen tuhle kapitolu přeskoč a vrhni se na další! +> **Poznámka** POkud používáš Chromebook přeskoč tuto kapitolu a ujisti se, že následuješ pokyny pro [Nastavení Chromebooku](../chromebook_setup/README.md). Cloudové IDE, které si vybereš (Paiza Cloud nebo AWS Cliud9) zahrnuje editor kódu a když otevřeš soubor ve tvém IDE z nabídky souborů, automaticky použije editor kódu. +> +> **Poznámka** Je možné, že jsi to již udělala dříve v [kapitole o instalaci](../installation/README.md) – pokud ano, můžeš přeskočit rovnou an další kapitolu!! {% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/cs/code_editor/instructions.md b/cs/code_editor/instructions.md old mode 100755 new mode 100644 index 3b8fcc902ec..e6816a35790 --- a/cs/code_editor/instructions.md +++ b/cs/code_editor/instructions.md @@ -1,7 +1,13 @@ -Existuje mnoho různých editorů a z velké části se výběr scvrkává na osobní preference. Většina programátorům v Pythonu používá složité, ale mimořádně mocné IDE (integrovaná vývojová prostředí), například PyCharm. Pro začátečníka to může být pravděpodobně méně vhodné; naše doporučení jsou stejně mocná, ale mnohem jednodušší. +Existuje mnoho různých editorů a z velké části se výběr scvrkává na osobní preference. Většina programátorů v Pythonu používá složité, ale mimořádně mocné IDE (integrovaná vývojová prostředí), například PyCharm. Pro začátečníka to může být pravděpodobně méně vhodné, naše doporučení jsou stejně mocná, ale mnohem jednodušší. Naše návrhy jsou napsané níže, ale neváhejte se zeptat svého kouče, jaké jsou jeho preference - poté bude i jednodušší získat od něj pomoc s prací v editoru. +## Visual Studio Code + +XPath: /p[3]. Zahrnuje technickou podporu pro tzv. debugging, kompletní možnost práce s Gitem, zvýrazňování syntaxe jazyka, inteligentní pomoc pro psaní kódu, napovědu a možnost refactorovat kód. + +[Stáhnout si jej můžeš zde](https://code.visualstudio.com/) + ## Gedit Gedit je open-source editor. Je k dispozici zdarma pro všechny operační systémy. @@ -10,22 +16,22 @@ Gedit je open-source editor. Je k dispozici zdarma pro všechny operační syst ## Sublime Text -Sublime Text je velmi oblíbený editor s bezplatnou zkušební dobou. Lze jej snadno nainstalovat a používat. Je k dispozici pro všechny operační systémy. +Sublime je velmi oblíbený a známý editor s možností využít zkušební verzi zdarma a je dostupný pro všechny operační systémy. [Stáhnout si jej můžeš zde](https://www.sublimetext.com/) ## Atom -Atom je velmi nový editor kódu vytvořen [GitHub](https://github.com/)em. Je zdarma, je open-source a má snadnou instalaci a snadné použití. Je k dispozici pro Windows, OS X a Linux. +Atom je další populární editor. Je zdarma, open-source a je k dispozici pro Windows, OS X a Linux. Atom byl vyvinut firmou [GitHub](https://github.com/). -[Stáhnout si jej můžeš zde](https://atom.io/) +[Stáhnout si jej můžete zde](https://atom.io/) -## Proč jsme instalovali editor kódu? +## Proč instalujeme editor kódu? -Možná přemýšlíš, proč instalujeme speciální editor kódu a proč raději nezvolíme něco jako Notepad nebo Word. +Možná přemýšlíte, proč instalujeme speciální editor a proč raději nezvolíme něco jako Notepad nebo Word. -První důvod je, že kód musí být **prostý text** a programy jako Word a Textedit ve skutečnosti produkují bohatý text (s fonty a formátováním), používají vlastní formáty jako [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). +První důvod je, že kód musí být **prostý text** a problém s programy jako Word a Textedit je ten, že ve skutečnosti neprodukují prostý text ale bohatý text (s fonty a formátováním), používají vlastní formáty jako [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). -Druhým důvodem je, že editory kódu se specializují na editaci kódu, takže mohou poskytovat užitečné funkce, jako je barevné zvýraznění kódu podle jeho významu nebo automatické ukončování uvozovek apod. +Druhým důvodem je, že editory kódu jsou pro tuto práci uzpůsobené tak, že poskytují užitečné pomůcky jako je barevné zvýrazňování různých částí kódu podle jejich významu či automatické uzavírání uvozovek. -Vše to uvidíme v akci později. Brzy ti přijde tvůj oblíbený editor kódu jako jeden z tvých nejlepších nástrojů :) +V akci to uvidíme později. Brzy budeš na svůj editor kódu nahlížet jako na jeden ze svých oblíbených nástrojů. :) \ No newline at end of file diff --git a/cs/css/README.md b/cs/css/README.md old mode 100755 new mode 100644 index acc0961ec20..e6217e32fe0 --- a/cs/css/README.md +++ b/cs/css/README.md @@ -1,135 +1,135 @@ -# CSS - aby byla tvoje aplikace krásná! +# CSS - zkrášli svou stránku! Náš blog nevypadá stále dost pěkně, že? Je na čase ho udělat hezčí! Použijeme na to CSS. ## Co je to CSS? -CSS (neboli Cascading Style Sheets) je jazyk používaný pro popis vzhledu a formátování webové stránky. Je to značkovací jazyk (jako HTML). Ber ho jako make-up pro náš web ;). +Kaskádové styly (Cascading Style Sheets, CSS) je jazyk používáný pro popis vzhledu a formátu webové stránky napsané ve značkovacím jazyce (jako například HTML). Berte to jako make-up pro naši webovou stránku. ;) -Nechceme ale zase začínat úplně od začátku, že? Opět použijeme něco, co již bylo vytvořeno jinými programátory a sdíleno zdarma na internetu. Vymýšlet znovu, co již před námi někdo vymyslel, to by nebyla žádná legrace. +Ale nechceme začínat od nuly, že? Znovu použijeme něco, co už někdo vytvořil a umístil na Internet aby to mohli ostatní programátoři používat zdarma. Vymýšlení už vymyšlených věcí není zábava. ## Použijme Bootstrap! -Bootstrap je jedním z nejpopulárnějších HTML a CSS frameworků pro vývoj pěkné webové stránky: https://getbootstrap.com/ +Bootstrap je jeden z nejpopulárnějších frameworků pro HTML a CSS na vytváření krásných webových stránek: https://getbootstrap.com/ -Napsali ho programátoři, kteří pracovali pro Twitter, a nyní ho vyvíjí dobrovolníci z celého světa. +Byl vytvořen programátory, kteří pracovali pro Twitter. Nyní je Bootstrap vyvíjen dobrovolníky po celém světě! ## Instalace Bootstrapu -Chceš-li nainstalovat Bootstrap, je třeba přidat do `< head >` v souboru `.html` (`blog/templates/blog/post_list.html`): +Pro instalaci Bootstrapu otevři svůj `.html` soubor v kódovém editoru a přidej tohle do `` sekce: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html - - + ``` -To nepřidá žádné soubory do projektu. Jen to odkazuje na soubory, které existují na internetu. Jen do toho, otevři tvůj web a aktualizuj stránku. Hurá! - -![Obrázek 14.1][1] +Nepřidá to žádné soubory do tvého projektu. Jen to ukazuje na soubory, které existují na Internet. Takže do toho, otevři svoji webovou stránku a obnov ji. To je ono! - [1]: images/bootstrap1.png +![Obrázek 14.1](images/bootstrap1.png) Hned to vypadá lépe! ## Statické soubory v Djangu -Konečně se podíváme zblízka na téma, které jsme již zmínili, **statické soubory**. Statické soubory jsou všechny naše CSS soubory a obrázky, které nejsou dynamické, takže jejich obsah není závislý na kontextu požadavku a budou pro každého uživatele stejné. +Konečně se podíváme zblízka na téma, které jsme již zmínili, **statické soubory**. Statické soubory jsou všechna tvá CSS a obrázky. Jejich obsah nezávisí na kontextu požadavku a bude stejný pro každého uživatele. ### Kam umístit statické soubory pro Django -Jak jsi viděla, když jsme spustili `collectstatic` na serveru, Django už ví, kde najít statické soubory pro vestavěnou aplikaci "admin". Teď jen musíme přidat nějaké statické soubory pro vlastní aplikaci, `blog`. +Django již ví, kde najít statické soubory pro vestavěnou "admin" aplikaci. Nyní potřebujeme přidat nějaké statické soubory do naší vlastní aplikace, `blog`. Uděláš to tak, že vytvoříš složku s názvem `static` uvnitř aplikace blog: -``` -djangogirls -├── blog -│ ├── migrations -│ ├── static -│   └── templates -└── mysite -``` + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite + -Django automaticky najde všechny složky s názvem "static" uvnitř vašich složek aplikací a bude moci využívat jejich obsah jako statické soubory. +Django bude automaticky hledat jakékoliv složky nazvané "static" uvnitř tvých složek v aplikaci. Poté bude schopný použít jejich obsah jako statické soubory. ## Tvůj první soubor CSS! -Pokud chceš na webovou stránku přidat svůj vlastní styl, vytvoř css soubor. Vytvoř nový adresář s názvem `css` uvnitř adresáře `static`. Vytvoř nový soubor s názvem `blog.css` uvnitř tohoto adresáře `css`. Připraveno? - -``` -djangogirls -└─── blog - └─── static - └─── css - └─── blog.css -``` - -Čas napsat nějaké CSS! Otevři soubor `blog/static/css/blog.css` v editoru kódu. +Pojďme vytvořit nějaký CSS soubor a přidat vlastní styly pro tvou webovou stránku. Vytvoř nový adresář s názvem `css` uvnitř adresáře `static`. Vytvoř nový soubor s názvem `blog.css` uvnitř tohoto adresáře `css`. Připraveno? -Nepůjdeme příliš hluboko do tématu přizpůsobení webu a učení o CSS, protože je to docela snadné a můžeš se o tom naučit více sama po tomto workshopu. Opravdu můžeme doporučit [Codeacademy HTML & CSS kurz][2], kde se dozvíš vše, co potřebuješ vědět, aby tvoje stránky s CSS vypadaly dobře. + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + - [2]: https://www.codecademy.com/tracks/web +Čas k napsání nějakého CSS! Otevři soubor `blog/static/css/blog.css` v editoru kódu. -Ale pojďme něco málo udělat. Co třeba změnit barvu našeho záhlaví? Pro interpretaci barev počítače používají speciální kódy. Začínají `#` a následuje 6 písmen (A-F) a číslic (0-9). Kódy barev můžeš najít například zde: http://www.colorpicker.com/. Můžeš také použít [předdefinované barvy][3], `červená/red` a `zelená/green`. +Zde nebudeme zacházet příliš do detailů a učit se CSS nebo jej přizpůsobovat. Pokud se budeš chtít naučit více o CSS, na konci této stránky najdeš doporučení na CSS kurz zdarma. - [3]: http://www.w3schools.com/cssref/css_colornames.asp +Ale pojďme něco málo udělat. Možná bychom mohli změnit barvu našich nadpisů? Pro interpretaci barev, počítače používají speciální kódy. Tyto kódy začínají `#` a následuje 6 písmen(A-F) a číslic(0-9). Například kód pro modrou barvu bude vypadat takto: `#0000FF`. Kódy všech barev můžeš najít například zde: http://www.colorpicker.com/. Můžeš také použít [předdefinované barvy](http://www.w3schools.com/colors/colors_names.asp), `červená/red` a `zelená/green`. V souboru `blog/static/css/blog.css` přidej následující kód: +{% filename %}blog/static/css/blog.css{% endfilename %} + ```css -h1 a { - color: #FCA205; +h1 a, h2 a { + color: #C25100; } -``` -`h1` je CSS selector. To znamená, že budeme aplikovat naše styly na jakýkoliv `a` element uvnitř `h1` (např. když máme v kódu něco jako: `< h1 > odkaz < /a >< / h1 >`). V takovém případě sdělujeme, že barvu elementu měníme na `#FCA205`, což je oranžová. Samozřejmě sem můžeš vložit vlastní barvu! +``` + +`h1` je CSS selector. Toto znamená, že aplikujeme naše styly na každý element `a` uvnitř elementu `h1` , selektor `h2` dělá to samé pro elementy `h2`. Takže když máme něco jako `

odkaz

`, použije se styl `h1`. V tomto případě říkáme, že barvu elementu měníme na `#C25100`, což je oranžová. Nebo zde můžeš vložit vlastní barvu, ale ujisti se, že bude kontrastní vůči bílé barvě pozadí stránky. -V CSS souboru určujeme styly pro prvky v souboru HTML. Prvky jsou identifikovány pomocí názvu prvku (tj, `a`,`h1`, `body`), atributem `class` nebo atributem `id`. Třídy/Class a id jsou jména, která pojmenovávají samotný prvek. Třídy definují skupiny prvků a id poukazují na konkrétní prvky. Například následující tag může identifikovat pomocí CSS tag `a`, třídu `external_link` nebo id `link_to_wiki_page`: +V CSS souboru určujeme styly pro prvky v souboru HTML. První způsob, jak identifikovat prvky je pomocí názvu elementu. Možná si vzpomeneš na tyto tagy ze sekce HTML. Věci jako `a`, `h1` a `body`jsou všechny příklady názvů elementů. Také identifikujeme elementy podle atributu `class` nebo atributu `id`. Třídy/Class a id jsou jména, které pojmenovávají samotný prvek. Třídy definují skupiny prvků a Id poukazují na konkrétní prvky. Například můžete určit následující prvek pomocí názvu prvku `a`, třída `external_link`nebo id `link_to_wiki_page`: ```html -``` +``` -Přečti si o [CSS selektorech ve w3schools][4]. +Více si můžeš přečíst [CSS Selectoryna w3schools](http://www.w3schools.com/cssref/css_selectors.asp). - [4]: http://www.w3schools.com/cssref/css_selectors.asp +Pak je třeba také říct naší HTML šabloně, že jsme přidali nějaké CSS. Otevři soubor `blog/templates/blog/post_list.html` a přidej tento řádek na úplný začátek: -Pak je třeba také říct naší HTML šabloně, že jsme přidali nějaké CSS. Otevři soubor `blog/templates/blog/post_list.html` a přidej tento řádek na samý začátek: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html -{% load staticfiles %} -``` +{% load static %} +``` + +Právě zde načítáme statické soubory. :) mezi značkami `` a `` , po odkazech na Bootstrap CSS soubory přidejte tento řádek: -Právě nahráváme statické soubory :). Pak mezi `< head >` a `< / head >` za odkazy na soubory Bootstrap CSS (prohlížeč načte soubory v pořadí, ve kterém jsou zapsány, takže kód v našem souboru může přepsat kód v Bootstrap souborech) přidejte tento řádek: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html ``` -Právě jsi řekla naší šabloně, kde je umístěn náš soubor CSS. +Prohlížeč čte soubory v pořadí, ve kterém jsou zadány, takže se musíme ujistit, že jsme na správném místě. V opačném případě může být kód v našem souboru přepsán kódem z Bootstrap souborů. Právě jsi řekla naší šabloně, kde je umístěn náš soubor CSS. Soubor by měl nyní vypadat takto: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + ```html -{% load staticfiles %} +{% load static %} + Django Girls blog - - + -
+

Django Girls Blog

-
+ {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

+
+ +

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} @@ -137,161 +137,194 @@ Soubor by měl nyní vypadat takto: OK, ulož soubor a aktualizuj stránky! -![Obrázek 14.2][5] +![Obrázek 14.2](images/color2.png) - [5]: images/color2.png +Dobrá práce! Možná bychom také chtěli provzdušnit náš web a zvětšit okraj na levé straně? Pojďme to zkusit! -Dobrá práce! Co kdybychom také chtěli provzdušnit náš web a zvětšit okraj na levé straně? Pojďme to zkusit! +{% filename %}blog/static/css/blog.css{% endfilename %} ```css body { padding-left: 15px; } -``` +``` Přidej toto do svého CSS souboru, ulož soubor a koukni se, jak to funguje! -![Obrázek 14.3][6] +![Obrázek 14.3](images/margin2.png) - [6]: images/margin2.png +Možná můžeme také chtít přizpůsobit písmo v našem záhlaví? Vlož mezi tag `< head >` v souboru `blog/templates/blog/post_list.html`: -Možná můžeme také chtít přizpůsobit písmo v našem záhlaví. Vlož za tag `< head >` v souboru `blog/templates/blog/post_list.html`: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html - -``` + +``` -Tento řádek bude importovat písmo s názvem *Lobster* z Google písem (https://www.google.com/fonts). +Stejně jako předtím, zkontroluj pořadí a místo před odkazem na `blog/static/css/blog.css`. Tento řádek importuje font s názvem *Lobster* z Google Fonts (https://www.google.com/fonts). -Nyní přidej řádek `font-family: "Lobster";` do CSS souboru `blog/static/css/blog.css` uvnitř deklarace `h1` bloku (kód mezi závorkami `{` a `}`) a aktualizuj stránky: +Najdi blok `h1 deklarací` (kód mezi závorkami `{` a `}`) v CSS souboru `blog/static/css/blog.css`. Nyní přidej řádek `font-family: 'Lobster';` mezi závorkami a obnov stránku: + +{% filename %}blog/static/css/blog.css{% endfilename %} ```css -h1 a { - color: #FCA205; +h1 a, h2 a { + color: #C25100; font-family: 'Lobster'; } -``` - -![Obrázek 14.3][7] +``` - [7]: images/font.png +![Obrázek 14.3](images/font.png) Skvěle! -Jak jsme si řekli výše, CSS má koncept tříd, který v podstatě umožňuje pojmenovat části kódu HTML a styly aplikovat pouze na tyto části bez ovlivnění ostatních částí. Je to zvlášť užitečné, pokud máš dva div tagy, ale každý dělá něco jiného (jako záhlaví a příspěvek), takže nechceš, aby vypadaly stejně. +Jak bylo uvedeno výše, CSS má koncepci tříd. Ty ti umožňují pojmenovat část HTML kódu a aplikovat styly pouze na danou část, aniž by to ovlivnilo ostatní části. To může být super užitečné! Možná máš dva prvky 'div' , které dělají něco jiného (jako je hlavička a tvůj příspěvek). Třída ti může pomoci, aby element vypadal jinak. + +Go ahead and name some parts of the HTML code. Replace the `header` that contains your header with the following: -Pokračuj a pojmenuj některé části kódu HTML. Přidáš třídu s názvem `page-header` do tvého `div` tagu, který obsahuje záhlaví, jako je tento: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html -
-

Django Girls Blog

-
+
+
+

Django Girls Blog

+
+
``` -A nyní přidej třídu `post` do svého `div` obsahující blog post. +And now add a class `post` to your `article` containing a blog post. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text|linebreaksbr }}

-
-``` +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` Nyní přidáme deklaraci bloků pro jiné selektory. Selektory začínající `.` se týkají tříd. Existuje mnoho skvělých návodů a vysvětlení CSS na webu, které ti pomohou pochopit následující kód. Pro tuto chvíli stačí zkopírovat a vložit do souboru `blog/static/css/blog.css`: +{% filename %}blog/static/css/blog.css{% endfilename %} + ```css .page-header { - background-color: #ff9400; - margin-top: 0; - padding: 20px 20px 20px 40px; + background-color: #C25100; + margin-top: 0; + margin-bottom: 40px; + padding: 20px 20px 20px 40px; } -.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { - color: #ffffff; - font-size: 36pt; - text-decoration: none; +.page-header h1, +.page-header h1 a, +.page-header h1 a:visited, +.page-header h1 a:active { + color: #ffffff; + font-size: 36pt; + text-decoration: none; } -.content { - margin-left: 40px; +h1, +h2, +h3, +h4 { + font-family: 'Lobster', cursive; } -h1, h2, h3, h4 { - font-family: 'Lobster', cursive; +.date { + color: #828282; } - .date { - float: right; - color: #828282; +.save { + float: right; } -.save { - float: right; +.post-form textarea, +.post-form input { + width: 100%; +} + +.top-menu, +.top-menu:hover, +.top-menu:visited { + color: #ffffff; + float: right; + font-size: 26pt; + margin-right: 20px; } - .post-form textarea, .post-form input { - width: 100%; +.post { + margin-bottom: 70px; } - .top-menu, .top-menu:hover, .top-menu:visited { - color: #ffffff; - float: right; - font-size: 26pt; - margin-right: 20px; +.post h2 a, +.post h2 a:visited { + color: #000000; } - .post { - margin-bottom: 70px; +.post > .date, +.post > .actions { + float: right; } - .post h1 a, .post h1 a:visited { - color: #000000; +.btn-secondary, +.btn-secondary:visited { + color: #C25100; + background: none; + border-color: #C25100; } -``` -Pak obklopující HTML kód, který zobrazuje příspěvek s deklaracemi tříd, nahraď tímto: +.btn-secondary:hover { + color: #FFFFFF; + background-color: #C25100; +} +``` + +Pak obklopující HTML kód, který zobrazuje příspěvek s deklaracemi tříd. Nahraď tímto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text|linebreaksbr }}

-
+
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
{% endfor %} -``` +``` v `blog/templates/blog/post_list.html` tímto: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + ```html -
-
-
- {% for post in posts %} -
-
- {{ post.published_date }} -
-

{{ post.title }}

-

{{ post.text|linebreaksbr }}

-
- {% endfor %} -
-
-
-``` +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` Tyto soubory ulož a aktualizuj své webové stránky. -![Obrázek 14.4][8] - - [8]: images/final.png +![Obrázek 14.4](images/final.png) -Woohoo! Vypadá to super, ne? Kód, který jsme vložili, opravdu není tak těžké pochopit. Měla bys být schopna pochopit většinu z něj jen jeho čtením. +Jupí! To je paráda, co? Podívej se na kód, který jsme právě vložili, abychom našli místa, kde jsme přidali třídy v HTML a používali je v CSS. Kde bys provedla změnu, pokud chceš, aby datum bylo tyrkysové? -Neobávej se trochu poupravit CSS a pokusit se změnit některé věci. Když něco rozbiješ, můžeš to vždy vrátit zpět! +Neboj se trochu pohrát s tímto CSS a pokus se některé věci změnit. Hraní s CSS ti pomůže pochopit, co dělají různé věci. Pokud něco rozbiješ, nedělej si starosti - vždy to můžeš vrátit zpět! -Mimochodem opravdu doporučujeme tento bezplatný online [Codeacademy HTML & CSS kurz][2] jako post-workshop úkol, naučíš se vše, co potřebuješ vědět, aby tvoje stránky byly díky CSS hezčí. +Opravdu doporučujeme vzít zdarma online kurzy "Základní HTML & HTML5" a "Základní CSS" na [freeCodeCamp](https://learn.freecodecamp.org/). Mohou ti pomoci naučit se, jak udělat tvé webové stránky hezčí pomocí HTML a CSS. -Připravena na další kapitolu?! :) +Připravena na další kapitolu?! :) \ No newline at end of file diff --git a/cs/deploy/README.md b/cs/deploy/README.md old mode 100755 new mode 100644 index 1d5221569d7..495ecb92e92 --- a/cs/deploy/README.md +++ b/cs/deploy/README.md @@ -1,317 +1,181 @@ # Nasazení! -> **Poznámka:** Projít následující kapitolu může být někdy trochu těžké. Vydrž a dokonči to; nasazení je důležitou součástí procesu vývoje webových stránek. Tato kapitola je umístěna uprostřed kurzu, aby ti tvůj kouč mohl pomoci s mírně složitějším procesem nasazení tvého webu online. To znamená, že stále můžeš dokončit kurz později sama, pokud to nestihneš teď. +> **Poznámka:** Projití následující kapitoly, může být někdy trochu těžké. Vydrž a dokonči to; nasazení je důležitou součástí procesu vývoje webových stránek. Tato kapitola je umístěna uprostřed kurzu, aby ti tvůj kouč mohl pomoci s mírně složitějším procesem nasazení tvého webu online. To znamená, že stále můžeš dokončit kurz později sama, pokud ti dojde čas. -Až dosud byly tvoje webové stránky k dispozici pouze ve tvém počítači, nyní se naučíš je nasadit! Nasazení je proces publikování aplikace na internetu, takže si lidé konečně mohou prohlédnout tvou webovou aplikaci :). +Until now, your website was only available on your computer. Now you will learn how to deploy it! Nasazení je proces publikování aplikace na internetu, takže lidé konečně mohou najít a vidět tvou webovou aplikaci. :) -Jak jsi se dozvěděla, webové stránky musí být umístěny na serveru. Na internetu existuje mnoho poskytovatelů serverů. My budeme používat jednoho, který má relativně jednoduchý proces nasazení: [PythonAnywhere][1]. PythonAnywhere je zdarma pro malé aplikace, které nemají příliš mnoho návštěvníků, takže to pro tebe bude teď stačit. +Jak jsi se dozvěděla, webové stránky musí být umístěny na serveru. There are a lot of server providers available on the internet, we're going to use [PythonAnywhere](https://www.pythonanywhere.com/). PythonAnywhere is free for small applications that don't have too many visitors so it'll definitely be enough for you now. - [1]: https://www.pythonanywhere.com/ +Další externí službu, kterou budeme používa je [GitHub](https://www.github.com), což je hostingová služba pro zdrojové kódy. Na interntu existují i jiné služby, ale téměř všichni programátoři mají účet na GitHubu nyní ho budeš mít také! -Další externí službu, kterou budeme používat, je [GitHub][2], což je hostingová služba pro zdrojové kódy. Na internetu existují i jiné služby, ale téměř všichni programátoři mají účet na GitHubu. Nyní ho budeš mít také! - - [2]: https://www.github.com - -Budeme používat GitHub jako odrazový můstek k přesunu našeho kódu do a z PythonAnywhere. +These three places will be important to you. Your local computer will be the place where you do development and testing. When you're happy with the changes, you will place a copy of your program on GitHub. Your website will be on PythonAnywhere and you will update it by getting a new copy of your code from GitHub. # Git -Git je "systém pro správu verzí" používaný spoustou programátorů. Tento software může sledovat změny v souborech v průběhu času tak, že konkrétní verze můžeš později znovu zobrazit. Trochu jako funkce "sledování změn" v aplikaci Microsoft Word, ale mnohem mocnější. - -## Instalace Git - -> **Poznámka:** Pokud jsi již prošla instalační kroky, není třeba se k tomu vracet - můžeš přeskočit k další části a začít vytvářet Git repozitář. +> **Note** If you already did the [installation steps](../installation/README.md), there's no need to do this again – you can skip to the next section and start creating your Git repository. {% include "/deploy/install_git.md" %} ## Spuštění Git repositáře -Git sleduje změny v sadě souborů v takzvaném úložišti kódu/repository (nebo zkráceně "repo"). Založme si jedno repo pro náš projekt. Otevři konzoli a v `djangogirls` adresáři spusť tyto příkazy: - -> **Poznámka:** Zkontroluj si svůj aktuální pracovní adresář pomocí `pwd` (OS x/Linux) nebo příkazem `cd` (Windows) před inicializací úložiště. Měla bys být ve složce `djangogirls`. - -``` -$ git init - Initialized empty Git repository in ~/djangogirls/.git/ -$ git config --global user.name "Your Name" -$ git config --global user.email you@example.com -``` - -Inicializace úložiště git je něco, co musíme udělat jednou za projekt (a nebudeš muset znovu zadávat uživatelské jméno a e-mailovou adresu). - -Git bude sledovat změny souborů a složek v tomto adresáři, ale jsou tam některé soubory, které chceme ignorovat. Uděláme to tak, že vytvoříš soubor s názvem `.gitignore` v základním adresáři. Otevři editor a vytvoř nový soubor s následujícím obsahem: - -``` -*.pyc -__pycache__ -myvenv -db.sqlite3 -.DS_Store -``` - -A ulož ho jako `.gitignore` ve složce nejvyšší úrovně "djangogirls". - -> **Poznámka:** Tečka na začátku názvu souboru je důležitá! Pokud budeš mít jakékoliv potíže s vytvořením (například Mac nerad vytváří soubory, které začínají tečkou, přes Finder), tak použij funkci "Uložit jako" v editoru, což je neprůstřelné. - -Je vhodné použít příkaz `git status` před použitím příkazu `git add`, anebo vždy, když si nejsi jistá, co se změnilo. To pomůže předejít jakýmkoliv překvapením, například přidání nesprávných souborů. Příkaz `git status` vrátí informace o všech souborech nesledovaných (untracked), upravených (modified) a připravených ke commitu (staged), stav větve a mnoho dalšího. Výstup by měl být podobný tomuto: - -``` -$ git status - On branch master - - No commits yet - -Untracked files: - (use "git add ..." to include in what will be committed) - .gitignore - blog/ - manage.py - mysite/ - - nothing added to commit but untracked files present (use "git add" to track) -``` - -A nakonec uložíme naše změny. Přejdi do konzole a spusť tyto příkazy: - -``` -$ git add --all . -$ git commit -m "My Django Girls app, first commit" -[...] -13 files changed, 200 insertions(+) - create mode 100644 .gitignore -[...] -create mode 100644 mysite/wsgi.py -``` - -## Přenesení našeho kódu na GitHub - -Přejdi na [GitHub.com][2] a zaregistruj si zdarma nový uživatelský účet. (Pokud jsi to již dříve ve workshopu udělala, tak je to skvělé!) - -Potom vytvoř nové úložiště, dej mu název "my-first-blog". Ponech zaškrtávací políčko "initialise with a README" nezaškrtlé, ponechej prázdnou možnost .gitignore (to už jsme udělaly ručně) a ponech licenci jako None. - -![][3] - - [3]: images/new_github_repo.png - -> **Poznámka:** Název `my-first-blog` je důležitý – mohla by sis vybrat něco jiného, ale použijeme ho ještě mnohokrát později a musela bys ho pokaždé nahrazovat. Tak je zatím snazší se držet názvu `my-first-blog`. - -Na další obrazovce se zobrazí klon URL tvého repo. Zvol verzi "HTTPS", zkopíruj ji a za chvilku ji použijeme v terminálu: - -![][4] - - [4]: images/github_get_repo_url_screenshot.png - -Teď potřebujeme spojit úložiště Git na tvém počítači s úložištěm na GitHub. - -Zadej následující příkaz do konzole (nahraď `< your-github-username >` uživatelským jménem, které jsi zadala, když jsi vytvořila svůj účet na GitHub, ale bez ostrých závorek): - -``` -$ git remote add origin https://github.com//my-first-blog.git -$ git push -u origin master -``` - -Zadej své uživatelské jméno a heslo pro GitHub a měla bys vidět něco takového: - -``` -Username for 'https://github.com': hjwp -Password for 'https://hjwp@github.com': -Counting objects: 6, done. -Writing objects: 100% (6/6), 200 bytes | 0 bytes/s, done. -Total 3 (delta 0), reused 0 (delta 0) -To https://github.com/hjwp/my-first-blog.git -* [new branch] master -> master -Branch master set up to track remote branch master from origin. -``` - - - -Tvůj kód je nyní na GitHubu. Můžeš se na něj jít podívat! Zjistíš, že je v dobré společnosti - [Django][5], [Django girls tutorial][6] a mnoha dalších velkých open source software projektů, které také hostí svůj kód na GitHubu :) - - [5]: https://github.com/django/django - [6]: https://github.com/DjangoGirls/tutorial - -# Vytvoření našeho blogu na PythonAnywhere - -> **Poznámka:** Možná, že jsi vytvořila účet PythonAnywhere již dříve během instalačních kroků - pokud ano, nemusíš to nyní dělat znovu. - -{% include "/deploy/signup_pythonanywhere.md" %} - -## Natáhnutí našeho kódu na PythonAnywhere - -Jakmile se zaregistruješ na PythonAnywhere, budeš přesměrována na dashboard nebo na stránku "Konzole". Zvol možnost spustit konzoli "Bash" – je to PythonAnywhere verze konzole, stejná jako na tvém počítači. - -> **Poznámka:** PythonAnywhere je založen na Linuxu, takže pokud jsi na Windows, konzole bude vypadat trochu jinak, než ta, která je na tvém počítači. - -Pojďme natáhnout náš kód z GitHubu na PythonAnywhere vytvořením "klonu" našeho repo. Zadej následující příkaz do konzole na PythonAnywhere (nezapomeň používat GitHub uživatelské jméno namísto ``): - -``` - $ git clone https://github.com//my-first-blog.git -``` - -Tento příkaz nahraje kopii tvého kódu na PythonAnywhere. Zkontroluj to zadáním `tree my-first-blog`: - -``` -$ tree my-first-blog -my-first-blog/ -├── blog -│ ├── __init__.py -│ ├── admin.py -│ ├── migrations -│ │ ├── 0001_initial.py -│ │ └── __init__.py -│ ├── models.py -│ ├── tests.py -│ └── views.py -├── manage.py -└── mysite - ├── __init__.py - ├── settings.py - ├── urls.py - └── wsgi.py -``` - -### Vytvoření virtualenv na PythonAnywhere - -Stejně jako na tvém počítači můžeš na PythonAnywhere vytvořit virtualenv. V Bash konzoli zadej postupně následující příkazy: - -``` -$ cd my-first-blog - -$ virtualenv --python=python3.4 myvenv -Running virtualenv with interpreter /usr/bin/python3.4 -[...] -Installing setuptools, pip...done. - -$ source myvenv/bin/activate - -(mvenv) $ pip install django whitenoise -Collecting django -[...] -Successfully installed django-1.8.2 whitenoise-2.0 -``` - -> **Poznámka:** Krok `pip install` může trvat několik minut. Trpělivost, trpělivost! Ale pokud to trvá déle než 5 minut, něco není v pořádku. Zeptej se svého kouče. - - - -### Shromažďování statických souborů - -Byla jsi zvědavá, co bylo to "whitenoise" vlastně zač? Je to nástroj pro obsluhu takzvaných "statických souborů". Statické soubory jsou soubory, které se pravidelně nemění nebo nespouštějí programový kód, například soubory HTML nebo CSS. Na serverech fungují odlišně než na tvém osobním počítači a proto potřebujeme nástroj jako "whitenoise" k jejich obsloužení. - -O statických souborech zjistíme trochu více později v tomto kurzu, až budeme upravovat CSS pro naše stránky. - -Nyní jen musíme spustit další příkaz na serveru s názvem `collectstatic`. Ten řekne Djangu, aby posbíral všechny statické soubory, které potřebuje na serveru. V současnosti jsou to hlavně soubory, které upravují vzhled admin stránky. - -``` -(mvenv) $ python manage.py collectstatic - -You have requested to collect static files at the destination -location as specified in your settings: - /home/edith/my-first-blog/static - -This will overwrite existing files! -Are you sure you want to do this? - -Type 'yes' to continue, or 'no' to cancel: yes -``` - -Zadej "yes" a pokračujeme! Také máš ráda, když ti počítač začne vypisovat ty dlouhé stránky kódu? Já jsem to vždy doprovázela tichými zvuky. Brp, brp, brp... - -``` -Copying '/home/edith/my-first-blog/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/js/actions.min.js' Copying '/home/edith/my-first-blog/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/js/inlines.min.js' [...] Copying '/home/edith/my-first-blog/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/css/changelists.css' Copying '/home/edith/my-first-blog/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/css/base.css' 62 static files copied to '/home/edith/my-first-blog/static'. -``` - -### Vytvoření databáze na PythonAnywhere - -Zde je další věc, která se liší mezi tvým počítačem a serverem: server používá jinou databázi. Takže uživatelské účty a příspěvky mohou být jiné na serveru a na tvém počítači. - -Můžeme inicializovat databázi na serveru, stejně jako jsi to udělala v počítači, pomocí příkazů `migrate` a `createsuperuser`: - -``` -(mvenv) $ python manage.py migrate -Operations to perform: -[...] - Applying sessions.0001_initial... OK - - -(mvenv) $ python manage.py createsuperuser -``` - -## Publikování našeho blogu jako webové aplikace - -Nyní je náš kód na PythonAnywhere a náš virtualenv je připraven, statické soubory jsou shromážděny a databáze inicializována. Jsme připraveni zveřejnit blog jako webovou aplikaci! +Git sleduje změny v sadě souborů v takzvaném úložišti kódu/repository (nebo zkráceně "repo"). Založme si jeden pro náš projekt. Otevři konzoli a v `djangogirls` adresáři spusť tyto příkazy: + +> **Note** Check your current working directory with a `pwd` (Mac OS X/Linux) or `cd` (Windows) command before initializing the repository. Měla by jsi být ve složce `djangogirls`. + +{% filename %}command-line{% endfilename %} + + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config --global user.name "Your Name" + $ git config --global user.email you@example.com + + +Initializing the git repository is something we need to do only once per project (and you won't have to re-enter the username and email ever again). + +### Adjusting your branch name + +If the version of Git that you are using is older than **2.28**, you will need to change the name of your branch to "main". To determine the version of Git, please enter the following command: + +{% filename %}command-line{% endfilename %} + + $ git --version + git version 2.xx... + -Běž zpět na dashboard PythonAnywhere kliknutím na logo a poté klikni na kartu **Web**. Nakonec klikni na **Add a new web app**. +Only if the second number of the version, shown as "xx" above, is less than 28, will you need to enter the following command to rename your branch. If it is 28 or higher, please continue to "Ignoring files". As in "Initializing", this is something we need to do only once per project, as well as only when your version of Git is less than 2.28: -Po potvrzení tvého názvu domény zvol **manual configuration** (NB *není* "Django" volba) v dialogovém okně. Dále zvol **Python 3.4** a klepni na tlačítko Next pro dokončení průvodce. +{% filename %}command-line{% endfilename %} -> **Poznámka:** Ujisti se, že volíš možnost "Manual configuration", nikoliv "Django". Jsme příliš cool na to, abychom používali výchozí nastavení PythonAnywhere Django ;-) + $ git branch -M main + -### Nastavení virtualenv +### Ignoring files -Budeš přesměrována na PythonAnywhere konfigurační obrazovku pro tvou webovou aplikaci, sem budeš muset jít pokaždé, když budeš chtít provést změny aplikace na serveru. +Git will track changes to all the files and folders in this directory, but there are some files we want it to ignore. We do this by creating a file called `.gitignore` in the base directory. Open up your editor and create a new file with the following contents: -![][7] +{% filename %}.gitignore{% endfilename %} - [7]: images/pythonanywhere_web_tab_virtualenv.png + # Python + *.pyc + *~ + __pycache__ + + # Env + .env + myvenv/ + venv/ + + # Database + db.sqlite3 + + # Static folder at project root + /static/ + + # macOS + ._* + .DS_Store + .fseventsd + .Spotlight-V100 + + # Windows + Thumbs.db* + ehthumbs*.db + [Dd]esktop.ini + $RECYCLE.BIN/ + + # Visual Studio + .vscode/ + .history/ + *.code-workspace + -V části "Virtualenv" klepni na červený text, který říká "Enter the path to a virtualenv" a zadej: `/home/ /my-first-blog/myvenv/`. Klikni na modré zaškrtávací políčko, čímž uložíš cestu předtím, než budeš pokračovat. +And save it as `.gitignore` in the "djangogirls" folder. -> **Poznámka:** Nahraď své vlastní uživatelské jméno podle potřeby. Pokud uděláš chybu, PythonAnywhere Ti zobrazí malé varování. +> **Poznámka:** Tečka na začátku názvu souboru je důležitá! If you're having any difficulty creating it (Macs don't like you to create files that begin with a dot via the Finder, for example), then use the "Save As" feature in your editor; it's bulletproof. And be sure not to add `.txt`, `.py`, or any other extension to the file name -- it will only be recognized by Git if the name is just `.gitignore`. Linux and MacOS treat files with a name that starts with `.` (such as `.gitignore`) as hidden and the normal `ls` command won't show these files. Instead use `ls -a` to see the `.gitignore` file. +> +> **Note** One of the files you specified in your `.gitignore` file is `db.sqlite3`. That file is your local database, where all of your users and posts are stored. We'll follow standard web programming practice, meaning that we'll use separate databases for your local testing site and your live website on PythonAnywhere. The PythonAnywhere database could be SQLite, like your development machine, but usually you will use one called MySQL which can deal with a lot more site visitors than SQLite. Either way, by ignoring your SQLite database for the GitHub copy, it means that all of the posts and superuser you created so far are going to only be available locally, and you'll have to create new ones on production. You should think of your local database as a good playground where you can test different things and not be afraid that you're going to delete your real posts from your blog. -### Konfigurace souboru WSGI +It's a good idea to use a `git status` command before `git add` or whenever you find yourself unsure of what has changed. This will help prevent any surprises from happening, such as wrong files being added or committed. The `git status` command returns information about any untracked/modified/staged files, the branch status, and much more. The output should be similar to the following: -Django používá "WSGI protokol", standard pro obsluhu webových stránek pomocí Pythonu, který PythonAnywhere podporuje. Aby PythonAnywhere poznal a mohl používat náš Django blog, upravme WSGI konfigurační soubor. +{% filename %}command-line{% endfilename %} -Klikni na odkaz "WSGI configuration file" (v sekci "Code" v horní části stránky – bude pojmenována nějak takto `/var/www/_pythonanywhere_com_wsgi.py`) a budeš přesměrována do editoru. + $ git status + On branch main + + No commits yet + + Untracked files: + (use "git add ..." to include in what will be committed) + + .gitignore + blog/ + manage.py + mysite/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + -Odstraň veškerý obsah a nahraď jej upraveným následujícím kódem: +And finally we save our changes. Go to your console and run these commands: -```python -import os -import sys +{% filename %}command-line{% endfilename %} -path = '/home//my-first-blog' # use your own username here -if path not in sys.path: - sys.path.append(path) + $ git add . + $ git commit -m "My Django Girls app, first commit" + [...] + 13 files changed, 200 insertions(+) + create mode 100644 .gitignore + [...] + create mode 100644 mysite/wsgi.py + -os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings' +## Pushing your code to GitHub -from django.core.wsgi import get_wsgi_application -from whitenoise.django import DjangoWhiteNoise -application = DjangoWhiteNoise(get_wsgi_application()) -``` +Go to [GitHub.com](https://www.github.com) and sign up for a new, free user account. (If you already did that in the workshop prep, that is great!) Be sure to remember your password (add it to your password manager, if you use one). -> **Poznámka:** Nezapomeň nahradit své vlastní uživatelské jméno za `` +Then, create a new repository, giving it the name "my-first-blog". Leave the "initialize with a README" checkbox unchecked, leave the .gitignore option blank (we've done that manually) and leave the License as None. -Úkolem tohoto souboru je říct PythonAnywhere, kde je naše webová aplikace a jaký je název souboru nastavení Djanga. Také nastavuje nástroj pro statické soubory "whitenoise". +![](images/new_github_repo.png) -Klikni na **Save** a přejdi zpět na kartu **Web**. +> **Note** The name `my-first-blog` is important – you could choose something else, but it's going to occur lots of times in the instructions below, and you'd have to substitute it each time. It's probably easier to stick with the name `my-first-blog`. -Zvládly jsme to! Klikni na velké zelené tlačítko **Reload**, čímž zobrazíš svou aplikaci. Odkaz na to najdeš v horní části stránky. +On the next screen, you'll be shown your repo's clone URL, which you will use in some of the commands that follow: -## Ladící tipy +![](images/github_get_repo_url_screenshot.png) -Pokud se ti zobrazí chyba při pokusu zobrazit web, první místo, kam se podívat na nějaké informace o ladění, je v **error log**. Odkaz na něj najdeš na PythonAnywhere v [kartě Web][8]. Zkontroluj, jestli tam nejsou nějaké chybové zprávy; nejnovější záznamy jsou na konci. Mezi běžné problémy patří: +Now we need to hook up the Git repository on your computer to the one up on GitHub. - [8]: https://www.pythonanywhere.com/web_app_setup/ +Type the following into your console (replace `` with the username you entered when you created your GitHub account, but without the angle-brackets -- the URL should match the clone URL you just saw). -* Často zapomínané kroky jsou ty, které jsme dělaly v konzoly: vytvoření virtualenv, aktivace, instalace Djanga, spuštění collectstatic, přenesení databáze. +{% filename %}command-line{% endfilename %} -* Chyba k cestě virtualenv na kartě Web – bude obvykle označená malou červenou zprávou na stejném místě. + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin main + -* Chyba v konfiguračním souboru WSGI – máš cestu do složky my-first-blog v pořádku? +When you push to GitHub, you'll be asked for your GitHub username and password (either right there in the command-line window or in a pop-up window), and after entering credentials you should see something like this: + +{% filename %}command-line{% endfilename %} + + Counting objects: 6, done. + Writing objects: 100% (6/6), 200 bytes | 0 bytes/s, done. + Total 3 (delta 0), reused 0 (delta 0) + To https://github.com/ola/my-first-blog.git + + * [new branch] main -> main + Branch main set up to track remote branch main from origin. + -* Vybrala jsi stejnou verzi Pythonu pro svůj virtualenv stejně jako pro svoji webovou aplikaci? Obe verze by měly být 3.4. + -* Existují některé [obecné tipy ladění na PythonAnywhere wiki][9]. +Your code is now on GitHub. Go and check it out! You'll find it's in fine company – [Django](https://github.com/django/django), the [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial), and many other great open source software projects also host their code on GitHub. :) - [9]: https://www.pythonanywhere.com/wiki/DebuggingImportError +{% include "/deploy/pythonanywhere.md" %} -A pamatuj si, že tvůj kouč je tady, aby ti pomohl! +# Check out your site! -# Jsme online! +The default page for your site should say "It worked!", just like it does on your local computer. Try adding `/admin/` to the end of the URL, and you'll be taken to the admin site. Log in with the username and password, and you'll see you can add new Posts on the server -- remember, the posts from your local test database were not sent to your live blog. -Výchozí stránka tvé webové aplikace by měla ukázat "Welcome to Django", stejně jako to dělá na tvém počítači. Zkus přidat `/admin/` na konec adresy URL a budeš přesměrována na admin stránku. Přihlas se pomocí uživatelského jména a hesla a uvidíš, že můžeš přidávat nové příspěvky na server. +Once you have a few posts created, you can go back to your local setup (not PythonAnywhere). From here you should work on your local setup to make changes. This is a common workflow in web development – make changes locally, push those changes to GitHub, and pull your changes down to your live Web server. This allows you to work and experiment without breaking your live Web site. Pretty cool, huh? -Poplácej sama sebe *po zádech*! Nasazení serveru je jednou z nejsložitější částí vývoje webových aplikací a trvá lidem často i několik dní, než je funkční. Ale ty máš své stránky online na internetu už teď! +Give yourself a *HUGE* pat on the back! Server deployments are one of the trickiest parts of web development and it often takes people several days before they get them working. But you've got your site live, on the real Internet! \ No newline at end of file diff --git a/cs/deploy/install_git.md b/cs/deploy/install_git.md old mode 100755 new mode 100644 index 0e9d9d7c282..9c84975cb46 --- a/cs/deploy/install_git.md +++ b/cs/deploy/install_git.md @@ -1,19 +1,83 @@ -### Windows +Git je "systém pro správu verzí" používaný spoustou programátorů. Tento software může sledovat změny v souborech v průběhu času tak, že konkrétní verze můžeš později znovu zobrazit. Trochu jako funkce "sledovat změny" ve slovních procesorových programech (např. Microsoft Word nebo LibreOffice spisovatel), ale mnohem silnější. -Git si můžeš stáhnout z [git-scm.com](https://git-scm.com/). Klikej na "další" ve všech krocích s výjimkou 5. kroku s názvem "Nastavení prostředí PATH", zvol "Spustit Git a související Unixové nástroje z příkazového řádku systému Windows" (spodní možnost). Ostatní výchozí hodnoty jsou v pořádku. Odškrtni Windows-style konce řádků, pro commit je Unixový styl konce řádků správný. +## Instalace Git -### MacOS + -Stáhni Git z [git-scm.com](https://git-scm.com/) a postupuj podle pokynů. +Git si můžeš stáhnout z [git-scm.com](https://git-scm.com/). Klikej na "další další další" ve všech krocích s vyjímkou 5. kroku s názvem "Nastavení prostředí PATH", zvol "Spustit Git a související Unixové nástroje, z příkazového řádku systému Windows" (spodní možnost). Ostatní výchozí hodnoty jsou v pořádku. Odškrtni Windows-style konce řádků, pro commit je Unixový styl konce řádků správný. -### Linux +During installation, if you are presented with the option of "Adjusting the name of the initial branch in new repositories", please choose to "Override the default" and use "main". This will align your installation of Git with the broad direction of the global developer community, and the "main" branch will be used through the remainder of this tutorial. Please see https://sfconservancy.org/news/2020/jun/23/gitbranchname/ and https://github.com/github/renaming for further discussion of this subject. -Pokud ho již nemáš nainstalovaný, git měl by být k dispozici pomocí Správce balíčků, zkus: +Do not forget to restart the command prompt or PowerShell after the installation finished successfully. + + +Download Git from [git-scm.com](https://git-scm.com/) and follow the instructions. + +During installation, if you are presented with the option of "Adjusting the name of the initial branch in new repositories", please choose to "Override the default" and use "main". This will align your installation of Git with the broad direction of the global developer community, and the "main" branch will be used through the remainder of this tutorial. Please see https://sfconservancy.org/news/2020/jun/23/gitbranchname/ and https://github.com/github/renaming for further discussion of this subject. + +> **Note** If you are running OS X 10.6, 10.7, or 10.8, you will need to install the version of git from here: [Git installer for OS X Snow Leopard](https://sourceforge.net/projects/git-osx-installer/files/git-2.3.5-intel-universal-snow-leopard.dmg/download) + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo apt install git ``` -sudo apt install git -# or -sudo yum install git -# or -sudo zypper install git + +### Adjusting your default branch name + +This will align your installation of Git with the broad direction of the global developer community, and the "main" branch will be used through the remainder of this tutorial. Please see https://sfconservancy.org/news/2020/jun/23/gitbranchname/ and https://github.com/github/renaming for further discussion of this subject. + +{% filename %}command-line{% endfilename %} + + $ git config --global --add init.defaultBranch main + + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git ``` + +### Adjusting your default branch name + +This will align your installation of Git with the broad direction of the global developer community, and the "main" branch will be used through the remainder of this tutorial. Please see https://sfconservancy.org/news/2020/jun/23/gitbranchname/ and https://github.com/github/renaming for further discussion of this subject. + +{% filename %}command-line{% endfilename %} + + $ git config --global --add init.defaultBranch main + + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + +### Adjusting your default branch name + +This will align your installation of Git with the broad direction of the global developer community, and the "main" branch will be used through the remainder of this tutorial. Please see https://sfconservancy.org/news/2020/jun/23/gitbranchname/ and https://github.com/github/renaming for further discussion of this subject. + +{% filename %}command-line{% endfilename %} + + $ git config --global --add init.defaultBranch main + + + \ No newline at end of file diff --git a/cs/deploy/pythonanywhere.md b/cs/deploy/pythonanywhere.md new file mode 100644 index 00000000000..d3d63ae6ae4 --- /dev/null +++ b/cs/deploy/pythonanywhere.md @@ -0,0 +1,88 @@ +# Setting up our blog on PythonAnywhere + +## Sign up for a PythonAnywhere account + +> **Note** You might have already created a PythonAnywhere account earlier during the install steps – if so, no need to do it again. +> +> {% include "/deploy/signup_pythonanywhere.md" %} + + +## Configuring our site on PythonAnywhere + +Go back to the main [PythonAnywhere Dashboard](https://www.pythonanywhere.com/) by clicking on the logo, and choose the option to start a "Bash" console – that's the PythonAnywhere version of a command line, just like the one on your computer. + +![The 'New Console' section on the PythonAnywhere web interface, with a button for 'bash'](images/pythonanywhere_bash_console.png) + +> **Note** PythonAnywhere is based on Linux, so if you're on Windows, the console will look a little different from the one on your computer. Deploying a web app on PythonAnywhere involves pulling down your code from GitHub, and then configuring PythonAnywhere to recognise it and start serving it as a web application. There are manual ways of doing it, but PythonAnywhere provides a helper tool that will do it all for you. Let's install it first: + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ pip{{ book.pa_py_version }} install --user pythonanywhere +``` + +That should print out some things like `Collecting pythonanywhere`, and eventually end with a line saying `Successfully installed (...) pythonanywhere- (...)`. + +Now we run the helper to automatically configure our app from GitHub. Type the following into the console on PythonAnywhere (don't forget to use your GitHub username in place of ``, so that the URL matches the clone URL from GitHub): + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ pa_autoconfigure_django.py --python={{ book.pa_py_version }} https://github.com//my-first-blog.git +``` + +As you watch that running, you'll be able to see what it's doing: + +- Downloading your code from GitHub +- Creating a virtualenv on PythonAnywhere, just like the one on your own computer +- Updating your settings file with some deployment settings +- Setting up a database on PythonAnywhere using the `manage.py migrate` command +- Setting up your static files (we'll learn about these later) +- And configuring PythonAnywhere to serve your web app via its API + +On PythonAnywhere all those steps are automated, but they're the same steps you would have to go through with any other server provider. + +The main thing to notice right now is that your database on PythonAnywhere is actually totally separate from your database on your own computer, so it can have different posts and admin accounts. As a result, just as we did on your own computer, we need to initialize the admin account with `createsuperuser`. PythonAnywhere has automatically activated your virtualenv for you, so all you need to do is run: + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +(ola.pythonanywhere.com) $ python manage.py createsuperuser +``` + +Type in the details for your admin user. Best to use the same ones as you're using on your own computer to avoid any confusion, unless you want to make the password on PythonAnywhere more secure. + +Now, if you like, you can also take a look at your code on PythonAnywhere using `ls`: + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +(ola.pythonanywhere.com) $ ls +blog db.sqlite3 manage.py mysite requirements.txt static +(ola.pythonanywhere.com) $ ls blog/ +__init__.py __pycache__ admin.py apps.py migrations models.py +tests.py views.py +``` + +You can also go to the "Files" page and navigate around using PythonAnywhere's built-in file browser. (From the Console page, you can get to other PythonAnywhere pages from the menu button in the upper right corner. Once you're on one of the pages, there are links to the other ones near the top.) + + +## You are now live! + +Your site should now be live on the public Internet! Click through to the PythonAnywhere "Web" page to get a link to it. You can share this with anyone you want. :) + + +> **Note** This is a beginners' tutorial, and in deploying this site we've taken a few shortcuts which aren't ideal from a security point of view. If and when you decide to build on this project, or start a new project, you should review the [Django deployment checklist](https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/) for some tips on securing your site. + +## Debugging tips + + +If you see an error while running the `pa_autoconfigure_django.py` script, here are a few common causes: + +- Forgetting to create your PythonAnywhere API token. +- Making a mistake in your GitHub URL +- If you see an error saying *"Could not find your settings.py"*, it's probably because you didn't manage to add all your files to Git, and/or you didn't push them up to GitHub successfully. Have another look at the Git section above +- If you previously signed up for a PythonAnywhere account and had an error with collectstatic, you probably have an older version of SQLite (eg 3.8.2) for your account. In that case, sign up for a new account and try the commands in the PythonAnywhere section above. + + +If you see an error when you try to visit your site, the first place to look for some debugging info is in your **error log**. You'll find a link to this on the PythonAnywhere ["Web" page](https://www.pythonanywhere.com/web_app_setup/). See if there are any error messages in there; the most recent ones are at the bottom. + +There are also some [general debugging tips on the PythonAnywhere help site](http://help.pythonanywhere.com/pages/DebuggingImportError). + +And remember, your coach is here to help! diff --git a/cs/deploy/signup_pythonanywhere.md b/cs/deploy/signup_pythonanywhere.md old mode 100755 new mode 100644 index fe6e67a8fe7..555e36731dd --- a/cs/deploy/signup_pythonanywhere.md +++ b/cs/deploy/signup_pythonanywhere.md @@ -1,5 +1,19 @@ -Dále je čas přihlásit se zdarma k účtu "Beginner" na PythonAnywhere. +PythonAnywhere is a service for running Python code on servers "in the cloud". We'll use it for hosting our site, live and on the Internet. - * [www.pythonanywhere.com](https://www.pythonanywhere.com/) +We will be hosting the blog we're building on PythonAnywhere. Sign up for a "Beginner" account on PythonAnywhere (the free tier is fine, you don't need a credit card). -> **Poznámka:** Při výběru svého uživatelského jména měj na paměti, že adresa URL tvého blogu bude mít tvar `yourusername.pythonanywhere.com`, takže si pro svůj blog zvol vlastní přezdívku nebo jiné jméno. +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![The PythonAnywhere signup page showing button to create a free 'Beginner' account](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Note** When choosing your username here, bear in mind that your blog's URL will take the form `yourusername.pythonanywhere.com`, so choose either your own nickname or a name for what your blog is all about. Also, be sure to remember your password (add it to your password manager, if you use one). + +## Creating a PythonAnywhere API token + +This is something you only need to do once. When you've signed up for PythonAnywhere, you'll be taken to your dashboard. Find the link near the top right to your "Account" page: + +![Account link on the top right on the page](../deploy/images/pythonanywhere_account.png) + +then select the tab named "API token", and hit the button that says "Create new API token". + +![The API token tab on the Account page](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/cs/django/README.md b/cs/django/README.md old mode 100755 new mode 100644 index 3663ae96264..ae991cd6c8d --- a/cs/django/README.md +++ b/cs/django/README.md @@ -1,27 +1,27 @@ # Co je Django? -Django (*jang-goh/ˈdʒæŋɡoʊ /*) je svobodný a open source webový aplikační framework napsaný v Pythonu. Webový framework je sada komponent, která pomáhá vyvíjet webové stránky rychleji a snadněji. +Django (/ˈdʒæŋɡoʊ/ *jang-goh*) is a free and open source web application framework, written in Python. Webový framework je sada komponent, která pomáhá vyvíjet webové stránky rychleji a snadněji. -Když vytváříš webové stránky, vždy potřebuješ podobnou sadu komponent: způsob, jak zpracovat ověření uživatele (registraci, přihlášení, odhlášení), administrační panel pro tvé webové stránky, formuláře, způsob, jak nahrávat soubory, atd. +Když vytváříš webové stránky, vždy potřebuješ podobnou sadu komponent: způsob, jak zpracovat ověření uživatele (registraci, přihlášení, odhlášení), administrační panel pro tvé webové stránky, formuláře, způsob jak nahrávat soubory, atd. -Naštěstí si ostatní lidé již dávno všimli, že vývojáři čelí stejným problémům při vytváření nových stránek. Takže se spojili a vytvořili frameworky (Django je jedním z nich), které obsahují sadu hotových, snadno použitelných komponent. +Luckily for you, other people long ago noticed that web developers face similar problems when building a new site, so they teamed up and created frameworks (Django being one of them) that give you ready-made components to use. -Frameworky existují, aby ti ušetřily čas a ty jsi nemusela znovu vynalézat, co už někdo zdlouhavě vymýšlel. Stejně tak by ti měly ušetřit čas při vytváření nových webových stránek. +Frameworks exist to save you from having to reinvent the wheel and to help alleviate some of the overhead when you’re building a new site. ## Proč potřebuješ framework? -Abychom pochopili, co ve skutečnosti Django je, musíme se blíže podívat na to, co dělá server. První věcí je, že server musí vědět, že chceš obsloužit tebou zvolenou webovou stránkou. +To understand what Django is actually for, we need to take a closer look at the servers. The first thing is that the server needs to know that you want it to serve you a web page. -Představ si poštovní schránku (port), která na zvoleném portu sleduje příchozí zprávy (požadavky). Podobně se chová webový server. Webový server čte požadavky od uživatele a odešle odpověď v podobě webové stránky. Ale když chceš něco poslat, musíš mít nějaký obsah. A Django je to, co ti pomůže vytvořit tento obsah. +Představ si poštovní schránku (port). Ta sleduje příchozí zprávy (požadavky). Podobně se chová webový server. The web server reads the letter and then sends a response with a webpage. Ale když chceš něco poslat, musíš mít nějaký obsah. A Django je něco, co ti pomůže vytvořit tento obsah. ## Co se stane, když někdo požaduje webové stránky ze serveru? -Pokud přijde žádost na webový server, je předána Django frameworku, který se snaží přijít na to, co vlastně uživatel požaduje. Nejprve vezme adresu webové stránky a snaží se přijít na to, co udělat. Tuto část provádí Django **urlresolver** (všimni si, že adresa webové stránky se nazývá URL - Uniform Resource Locator - proto jméno *urlresolver* dává smysl). Tato činnost není složitá - bere si seznam vzorů a v něm se pokouší vyhledat shodu s URL. Django kontroluje seznam vzorů od shora dolů a pokud některý odpovídá, pak Django předá žádost související funkci, která se nazývá *view*. +When a request comes to a web server, it's passed to Django which tries to figure out what is actually requested. It takes a web page address first and tries to figure out what to do. This part is done by Django's **urlresolver** (note that a website address is called a URL – Uniform Resource Locator – so the name *urlresolver* makes sense). It is not very smart – it takes a list of patterns and tries to match the URL. Django checks patterns from top to bottom and if something is matched, then Django passes the request to the associated function (which is called *view*). -Představ si pošťáka s dopisem. Kráčí po ulici a kontroluje každé číslo domu, jestli odpovídá adrese na dopisu. Pokud adresa odpovídá, dopis vloží do schránky. Stejným způsobem funguje urlresolver! +Představ si pošťáka s dopisem. Kráčí po ulici a kontroluje každé číslo domu jestli odpovídá adrese na dopisu. Pokud adresa odpovídá, dopis vloží do schránky. Stejným způsobem funguje urlresolver! -Ve funkci *view* se provádí všechny zajímavé věci: můžeme se podívat do databáze a vyhledat nějaké informace. Co když chce uživatel změnit něco v datech? Dopis může říkat "prosím změňte popis mé práce." *View* může zkontrolovat, zda máš povolení tuto změnu provést, pak aktualizuje popis práce a odešle ti zprávu: "Hotovo!". V tuto chvíli *view* vygeneruje odpověď a Django ji může odeslat tvému webovému prohlížeci. +In the *view* function, all the interesting things are done: we can look at a database to look for some information. Možná, že uživatel chtěl změnit něco v datech? Like a letter saying, "Please change the description of my job." The *view* can check if you are allowed to do that, then update the job description for you and send back a message: "Done!" Then the *view* generates a response and Django can send it to the user's web browser. -Samozřejmě, že výše uvedený popis je trochu zjednodušený, ale prozatím není nutné znát všechny technické detaily. Pro obecnou představu to postačí. +The description above is a little bit simplified, but you don't need to know all the technical things yet. Having a general idea is enough. -Takže místo studování přílišných podrobností jednoduše začneme něco vytvářet pomocí Djanga, čímž se naučíme všechny důležité části! +So instead of diving too much into details, we will start creating something with Django and we will learn all the important parts along the way! \ No newline at end of file diff --git a/cs/django_admin/README.md b/cs/django_admin/README.md old mode 100755 new mode 100644 index 7ddfc186a3e..f76e4a109a1 --- a/cs/django_admin/README.md +++ b/cs/django_admin/README.md @@ -1,49 +1,57 @@ # Django admin -Chceš-li přidávat, upravovat a mazat příspěvky, které jsme právě vymodelovaly, použijeme Django admin. +To add, edit and delete the posts we've just modeled, we will use Django admin. -Otevřeme soubor `blog/admin.py` a nahradíme jeho obsah následujícím kódem: +Let's open the `blog/admin.py` file in the code editor and replace its contents with this: + +{% filename %}blog/admin.py{% endfilename %} ```python from django.contrib import admin from .models import Post admin.site.register(Post) -``` +``` -Jak vidíš, importujeme (vkládáme) Post model definovaný v předchozí kapitole. Pro zviditelnění našeho modelu na admin stránce musíme zaregistrovat model pomocí `admin.site.register(Post)`. +Jak vidíš, importujeme (vkládáme) Post model definovaný v předchozí kapitole. Pro zviditelnění našeho modelu na admin stránce, musíme zaregistrovat model pomocí `admin.site.register(Post)`. -OK, je čas se podívat na náš Post model. Nezapomeň spustit `Pythonu manage.py runserver` v konzoli www serveru. Přejdi do prohlížeče a zadej adresu http://127.0.0.1:8000/admin/. Uvidíš přihlašovací stránku jako je tato: +OK čas se podívat na náš Post model. Nezapomeň spustit `Pythonu manage.py runserver` v konzoli www serveru. Go to your browser and type the address http://127.0.0.1:8000/admin/. You will see a login page like this: -![Login page][1] +![Login page](images/login_page2.png) - [1]: images/login_page2.png +To log in, you need to create a *superuser* - a user account that has control over everything on the site. Go back to the command line, type `python manage.py createsuperuser`, and press enter. -Chceš-li se přihlásit, musíš vytvořit *superusera* - uživatele, který má kontrolu nad celou webovou stránkou. Vrať se do příkazového řádku, zadej `python manage.py createsuperuser` a stiskni klávesu enter. Po zobrazení výzvy zadej své uživatelské jméno (malá písmena, bez mezer), e-mailovou adresu a heslo. Nedělej si starosti, že nevidíš heslo, které zadáváš - tak to má být. Jen ho napiš a stiskni `enter` pro pokračování. Výstup by měl vypadat takto (kde uživatelské jméno a e-mail by měly být tvé vlastní): +> Remember, to write new commands while the web server is running, open a new terminal window and activate your virtualenv. We reviewed how to write new commands in the **Your first Django project!** chapter, in the **Starting the web server** section. -``` -(myvenv) ~/djangogirls$ python manage.py createsuperuser -Username: admin -Email address: admin@admin.com -Password: -Password (again): -Superuser created successfully. -``` +{% filename %}Mac OS X or Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + -Vrať se do svého prohlížeče. Přihlas se pomocí pověření superuživatele, kterého jsi právě vytvořila; měla bys vidět Django admin dashboard/nástěnku. +When prompted, type your username (lowercase, no spaces), email address, and password. **Don't worry that you can't see the password you're typing in – that's how it's supposed to be.** Type it in and press `enter` to continue. The output should look like this (where the username and email should be your own ones): -![Django admin][2] + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + - [2]: images/django_admin3.png +Return to your browser. Log in with the superuser's credentials you chose; you should see the Django admin dashboard. -Klikni na příspěvky/Posts a trochu si s nimi pohraj. Přidej pět nebo šest příspěvků blogu. Nedělej si starosti s obsahem - pro ušetření času můžeš jednoduše kopírovat a vložit nějaký text z tohoto kurzu :). +![Django admin](images/django_admin3.png) -Ujisti se, že alespoň dva nebo tři příspěvky (ale ne všechny) mají nastavené datum publikování. Později to bude užitečné. +Go to Posts and experiment a little bit with it. Add five or six blog posts. Don't worry about the content –- it's only visible to you on your local computer -- you can copy-paste some text from this tutorial to save time. :) -![Django admin][3] +Make sure that at least two or three posts (but not all) have the publish date set. It will be helpful later. - [3]: images/edit_post3.png +![Django admin](images/edit_post3.png) -Pokud chceš vědět více o Django admin, koukni se do Django dokumentace: https://docs.djangoproject.com/en/1.8/ref/contrib/admin/ +If you want to know more about Django admin, you should check Django's documentation: https://docs.djangoproject.com/en/3.2/ref/contrib/admin/ -V tuto chvíli je asi dobrý čas dát si pro trochu vzpruhy kávu, čaj nebo něco k jídlu. Vytvořila jsi svůj první model Django - zasloužíš si malý oddech! +This is probably a good moment to grab a coffee (or tea) or something to eat to re-energize yourself. You created your first Django model – you deserve a little break! \ No newline at end of file diff --git a/cs/django_forms/README.md b/cs/django_forms/README.md old mode 100755 new mode 100644 index 8ea26f584c1..0cb5d35b2db --- a/cs/django_forms/README.md +++ b/cs/django_forms/README.md @@ -1,222 +1,260 @@ # Django formuláře -Poslední věc, kterou chceme udělat na našich webových stránkách, je vytvořit pohodlný způsob, jak přidávat a upravovat příspěvky na blogu. Django `admin` je super, ale je těžké ho přizpůsobit a upravit do hezčí podoby. S `formuláři` budeme mít absolutní moc nad naším rozhraním - můžeme dělat téměř cokoliv, co si dokážeme představit! +Poslední věc, kterou chceme udělat na našich webových stránkách, je vytvořit příjemný způsob, jak přidávat a upravovat příspěvky na blogu. Django `admin` je super, ale je to dost těžko přizpůsobitelné a upravitelné do hezčí podoby. With `forms` we will have absolute power over our interface – we can do almost anything we can imagine! Pěkná věc na Django formulářích je, že je můžeme definovat úplně od počátku nebo vytvořit `ModelForm`, který uloží výsledek z formuláře pomocí modelu. To je přesně to, co chceme udělat: vytvoříme formulář pro náš model `Post`. -Stejně jako všechny důležité části Djanga mají formuláře své vlastní soubory: `forms.py`. +Stejně jako všechny důležité části Djanga, formuláře mají své vlastní soubory: `forms.py`. -V našem adresáři potřebujeme vytvořit soubor s názvem `blog`. +Potřebujeme vytvořit soubor s tímto názvem v našem adresáři `blog`. -``` -blog - └── forms.py -``` + blog + └── forms.py + + +OK, let's open it in the code editor and type the following code: -OK, otevři ho a zadej následující kód: +{% filename %}blog/forms.py{% endfilename %} ```python - from django import forms +from django import forms + +from .models import Post - from .models import Post +class PostForm(forms.ModelForm): - class PostForm(forms.ModelForm): - class Meta: - model = Post - fields = ('title', 'text',) -``` + class Meta: + model = Post + fields = ('title', 'text',) +``` -Musíme nejdříve importovat Django formuláře (`from django import forms`) a samozřejmě náš `Post` model (`from .models import Post`). +We need to import Django forms first (`from django import forms`) and our `Post` model (`from .models import Post`). -`PostForm`, jak asi předpokládáš, je jméno našeho formuláře. Musíme říct Djangu, že tento formulář je `ModelForm` (tak pro nás bude moci Django udělat něco magického) - zodpovědný za to bude `forms.ModelForm`. +`PostForm`, jak asi předpokládáš, je jméno našeho formuláře. We need to tell Django that this form is a `ModelForm` (so Django will do some magic for us) – `forms.ModelForm` is responsible for that. -Dále zde máme `třídu Meta`, kde řekneme Djangu, který model by měl být použit k vytvoření tohoto formuláře (`model = Post`). +Dále zde máme `třídu Meta`, kde řekneme Djangu, který model by měl být použít k vytvoření tohoto formuláře (`model = Post`). -Nakonec můžeme Djangu říct, co se má stát s jednotlivými poli našeho formuláře. V tomto případě chceme pouze zobrazit pole `nadpis/title` a `text` - `autor` by měl být člověk, který je aktuálně přihlášen (ty!) a `created_date` by mělo být automaticky nastaveno, když vytvoříme příspěvek (tj. v kódu). +Nakonec můžeme Djangu říct co se má stát s jednotlivými poli našeho formuláře. In this scenario we want only `title` and `text` to be exposed – `author` should be the person who is currently logged in (you!) and `created_date` should be automatically set when we create a post (i.e. in the code), right? -A je to! Vše, co teď musíme udělat, je použít formulář ve *view* a zobrazit ho v šabloně. +A je to! Vše, co musíme udělat, je použít formulář ve *view* a zobrazit ho v šabloně. -Takže ještě jednou: budeme vytvářet odkaz na stránky, URL, pohled a šablonu. +So once again we will create a link to the page, a URL, a view and a template. ## Odkaz na stránku s formulářem -Je tedy čas otevřít soubor `blog/templates/blog/base.html`. Přidáme odkaz do `div` s názvem `page-header`: +Before we add the link, we need some icons to use as buttons for the link. For this tutorial, download [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/` + +> Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there. + +It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follows. In the `div` element inside `header` section, we will add a link before the `h1` element: + +{% filename %}blog/templates/blog/base.html{% endfilename %} ```html - -``` + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Note that we want to call our new view `post_new`. The [SVG icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a Django template directive called `include`. This will inject the file's content into the Django template. The web browser knows how to handle this type of content without any further processing. -Všimni si, že chceme zavolat náš nový view `post_new`. +> You can download all the Bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the SVG image files into a new folder inside `blog/templates/blog/` called `icons`. That way you can access an icon like `pencil-fill.svg` using the file path `blog/templates/blog/icons/pencil-fill.svg` -Po přidání řádku by měl tvůj html soubor vypadat takto: +After editing the line, your HTML file should now look like this: + +{% filename %}blog/templates/blog/base.html{% endfilename %} ```html -{% load staticfiles %} +{% load static %} + - - Django Girls blog - - - - - - -
- -

Django Girls Blog

-
-
-
-
- {% block content %} - {% endblock %} -
-
-
- + + Django Girls blog + + + + + +
+
+ + {% include './icons/file-earmark-plus.svg' %} + +

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ -``` +``` -Po uložení a obnovení stránky http://127.0.0.1:8000 patrně uvidíš známou `NoReverseMatch` chybu. +After saving and refreshing the page http://127.0.0.1:8000 you will see a familiar `NoReverseMatch` error. Is that the case? Good! ## URL -Otevři `blog/urls.py` a přidej řádek: +We open `blog/urls.py` in the code editor and add a line: + +{% filename %}blog/urls.py{% endfilename %} ```python -url(r'^post/new/$', views.post_new, name='post_new'), -``` +path('post/new/', views.post_new, name='post_new'), +``` + +And the final code will look like this: -Výsledný kód bude vypadat takto: +{% filename %}blog/urls.py{% endfilename %} ```python - from django.conf.urls import url - from . import views +from django.urls import path +from . import views urlpatterns = [ - url(r'^$', views.post_list, name='post_list'), - url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'), - url(r'^post/new/$', views.post_new, name='post_new'), + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), ] -``` +``` -Po aktualizaci webu vidíme `AttributeError`, protože nemáme implementovaný `post_new` view. Přidáme ho právě teď. +After refreshing the site, we see an `AttributeError`, since we don't have the `post_new` view implemented. Let's add it right now. ## post_new view -Musíme otevřít soubor `blog/views.py` a přidat následující řádky: +Time to open the `blog/views.py` file in the code editor and add the following lines with the rest of the `from` rows: + +{% filename %}blog/views.py{% endfilename %} ```python from .forms import PostForm -``` +``` -a náš *view*: +And then our *view*: + +{% filename %}blog/views.py{% endfilename %} ```python def post_new(request): - form = PostForm() - return render(request, 'blog/post_edit.html', {'form': form}) -``` + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` -Chceš-li vytvořit nový formulář `Post`, musíš zavolat `PostForm()` a předat ho do šablony. Za chvilku se vrátíme k tomuto *view*, ale teď pojďme rychle vytvořit šablonu formuláře. +To create a new `Post` form, we need to call `PostForm()` and pass it to the template. We will go back to this *view*, but for now, let's quickly create a template for the form. ## Šablona -Musíme vytvořit soubor `post_edit.html` v adresáři `blog/templates/blog`. Pro vytvoření formuláře potřebujeme udělat několik věcí: +We need to create a file `post_edit.html` in the `blog/templates/blog` directory, and open it in the code editor. To make a form work we need several things: -* musíme zobrazit formulář. Můžeme to udělat například jednoduchým `{% raw %}{{ form.as_p }}{% endraw %}`. -* formulář musíme obalit HTML značkou (přidej řádek nad formulář): `< method="POST" >... < / form >` -* potřebujeme tlačítko `Uložit`. Vytvoříme HTML tlačítko: `< button type="submit"> Uložit < / button>` -* a nakonec těsně za otevírací značku `< form... >` musíme přidat `{% raw %}{% csrf_token %}{% endraw %}`. Toto je velmi důležité, protože tak vytvoříme bezpečnější formulář! Django si bude stěžovat v okamžiku, kdy se pokusíš uložit formulář, pokud zapomeneš na tuto část: +* We have to display the form. We can do that with (for example) {% raw %}`{{ form.as_p }}`{% endraw %}. +* The line above needs to be wrapped with an HTML form element: `
...
`. +* Potřebujeme tlačítko `Uložit`. Vytvoříme HTML tlačítko: `< button type="submit"> Uložit < / button>`. +* And finally, just after the opening `
` tag we need to add {% raw %}`{% csrf_token %}`{% endraw %}. Toto je velmi důležité, protože tak vytvoříme bezpečnější formulář! If you forget about this bit, Django will complain when you try to save the form: -![CSFR zakázaná stránka][1] +![CSFR Forbidden page](images/csrf2.png) - [1]: images/csrf2.png +OK, so let's see how the HTML in `post_edit.html` should look: -Pojďme se nyní podívat, jak by mělo vypadat HTML v `post_edit.html`: +{% filename %}blog/templates/blog/post_edit.html{% endfilename %} ```html {% extends 'blog/base.html' %} {% block content %} -

New post

- {% csrf_token %} - {{ form.as_p }} - -
+

New post

+
{% csrf_token %} + {{ form.as_p }} + +
{% endblock %} -``` - -Čas aktualizovat naší stránku! Hurá! Zobrazil se formulář! +``` -![Nový formulář][2] +Time to refresh! Yay! Your form is displayed! - [2]: images/new_form2.png +![New form](images/new_form2.png) -Ale ještě chvilku počkej! Když něco zadáš do polí `titulek` a `text` a pokusíš se formulář uložit - co se stane? +But, wait a minute! When you type something in the `title` and `text` fields and try to save it, what will happen? -Nic! Jsme opět na stejné stránce, náš text je pryč... a nepřidal se žádný nový příspěvek. Tak co se stalo? +Nothing! We are once again on the same page and our text is gone… and no new post is added. So what went wrong? -Odpověď je: nic. Musíme ještě trochu zapracovat na našem *view*. +The answer is: nothing. We need to do a little bit more work in our *view*. ## Ukládání formuláře -Otevři znovu `blog/views.py`. Vše, co máme aktuálně v `post_new`, je toto: +Open `blog/views.py` once again in the code editor. Currently all we have in the `post_new` view is the following: + +{% filename %}blog/views.py{% endfilename %} ```python def post_new(request): - form = PostForm() - return render(request, 'blog/post_edit.html', {'form': form}) -``` + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` -Když odešleme formulář, vrátíme se zpět na ten samý view, ale tentokrát obdržíme nějaká další data v `request`, přesněji v `request.POST` (pojmenování nemá nic společného s naším "post" v blogu, vychází to z toho, že "zasíláme" data). Pamatuješ si, že v našem HTML souboru ve `
` jsme definovali proměnnou `method="POST"`? Všechna pole z formuláře jsou nyní k dispozici v proměnné `request.POST`. Neměla bys přejmenovávat `POST` na něco jiného (jediná další platná hodnota proměnné `method` je `GET`, ale teď tady nebudeme vysvětlovat rozdíly). +When we submit the form, we are brought back to the same view, but this time we have some more data in `request`, more specifically in `request.POST` (the naming has nothing to do with a blog "post"; it's to do with the fact that we're "posting" data). Remember how in the HTML file, our `` definition had the variable `method="POST"`? All the fields from the form are now in `request.POST`. You should not rename `POST` to anything else (the only other valid value for `method` is `GET`, but we have no time to explain what the difference is). -Takže v našem *view* máme dvě samostatné situace ke zpracování. První: když načteme stránku poprvé a chceme dostat prázdný formulář. Druhou: když se vrátíme zpět do našeho *view* s vyplněnými daty formuláře. Takže musíme přidat podmínku (použijeme na to `if`). +So in our *view* we have two separate situations to handle: first, when we access the page for the first time and we want a blank form, and second, when we go back to the *view* with all form data we just typed. So we need to add a condition (we will use `if` for that): + +{% filename %}blog/views.py{% endfilename %} ```python if request.method == "POST": - [...] + [...] else: - form = PostForm() -``` + form = PostForm() +``` + +It's time to fill in the dots `[...]`. If `method` is `POST` then we want to construct the `PostForm` with data from the form, right? We will do that as follows: -Teď je čas k vyplnění mezer `[...]`. Je-li `method` `POST`, chceme vytvořit `PostForm` s údaji z formuláře, že? Udělejme to: +{% filename %}blog/views.py{% endfilename %} ```python form = PostForm(request.POST) -``` +``` + +The next thing is to check if the form is correct (all required fields are set and no incorrect values have been submitted). We do that with `form.is_valid()`. -Snadné! Další věcí je zjistit, zda-li je formulář v pořádku (všechna požadovaná pole jsou vyplněna a neobsahují špatné hodnoty). Uděláme to pomocí `form.is_valid()`. +We check if the form is valid and if so, we can save it! -Zkontrolujeme, je-li formulář platný, a pokud ano, můžeme ho uložit! +{% filename %}blog/views.py{% endfilename %} ```python if form.is_valid(): - post = form.save(commit=False) - post.author = request.user - post.published_date = timezone.now() - post.save() -``` + post = form.save(commit=False) + post.author = request.user + post.published_date = timezone.now() + post.save() +``` -V podstatě, tady máme dvě věci: ukládáme formulář pomocí `form.save` a přidáváme autora (vzhledem k tomu, že v `PostForm` nebylo žádné pole `Autor` a toto pole je požadováno!). `commit=False` znamená, že ještě nechceme `Post` uložit pomocí modelu - chceme nejdříve přidat autora. Většinu času budeš používat `form.save()`, bez `commit=False`, ale v tomto případě to potřebujeme takto udělat. `post.save()` zachová změny (přidá autora) a vytvoří nový příspěvek na blogu! +Basically, we have two things here: we save the form with `form.save` and we add an author (since there was no `author` field in the `PostForm` and this field is required). `commit=False` means that we don't want to save the `Post` model yet – we want to add the author first. Most of the time you will use `form.save()` without `commit=False`, but in this case, we need to supply it. `post.save()` will preserve changes (adding the author) and a new blog post is created! -A nakonec by bylo úžasné, pokud bychom okamžitě přešli na stránku `post_detail` s nově vytvořeným příspěvkem, že ano? K tomu potřebujeme jeden další import: +Finally, it would be awesome if we could immediately go to the `post_detail` page for our newly created blog post, right? To do that we need one more import: + +{% filename %}blog/views.py{% endfilename %} ```python from django.shortcuts import redirect -``` +``` -Přidej to na samý začátek souboru. A nyní můžeš říci: Jdi na stránku `post_detail` s nově vytvořeným příspěvkem. +Add it at the very beginning of your file. And now we can say, "go to the `post_detail` page for the newly created post": + +{% filename %}blog/views.py{% endfilename %} ```python return redirect('post_detail', pk=post.pk) -``` +``` + +`post_detail` is the name of the view we want to go to. Remember that this *view* requires a `pk` variable? To pass it to the views, we use `pk=post.pk`, where `post` is the newly created blog post! -`post_detail` je název pohledu, na který chceme jít. Pamatuj si, že tento *view* vyžaduje proměnnou `pk`. Pro předání do view použijeme `pk=post.pk`, kde `post` je nově vytvořený příspěvek! +OK, we've talked a lot, but we probably want to see what the whole *view* looks like now, right? -Už jsme si toho řekly hodně, ale pravděpodobně chceš vidět, jak nyní celý *view* vypadá nyní, nemám pravdu? +{% filename %}blog/views.py{% endfilename %} ```python def post_new(request): @@ -231,165 +269,211 @@ def post_new(request): else: form = PostForm() return render(request, 'blog/post_edit.html', {'form': form}) -``` - -Pojďme se podívat, jestli to funguje. Přejdi na stránku http://127.0.0.1:8000/post/new/, přidej `title` a `text`, ulož jej... a hle! Byl přidán nový příspěvek na blog a my jsme přesměrovány na stránku `post_detail`! +``` -Možná jsi si všimla, že jsme nastavili proměnnou publish_date před uložením postu. Později si ukážeme *tlačítko Publikovat* v **Django girls tutorial: rozšíření**. +Let's see if it works. Go to the page http://127.0.0.1:8000/post/new/, add a `title` and `text`, save it… and voilà! The new blog post is added and we are redirected to the `post_detail` page! -## Ověření formuláře +You might have noticed that we are setting the publish date before saving the post. Later on, we will introduce a *publish button* in **Django Girls Tutorial: Extensions**. -A teď ti ukážeme, jak cool jsou formuláře v Djangu. Blog příspěvek musí mít `title` a `text` pole. V našem modelu `Post` jsme neřekly (na rozdíl od `published_date`), že jsou tato pole nepovinná, takže Django ve výchozím nastavení očekává, že budou vyplněná. +That is awesome! -Pokus se uložit formulář bez `nadpisu` a `textu`. Hádej, co se stane! +> As we have recently used the Django admin interface, the system currently thinks we are still logged in. There are a few situations that could lead to us being logged out (closing the browser, restarting the DB, etc.). If, when creating a post, you find that you are getting errors referring to the lack of a logged-in user, head to the admin page http://127.0.0.1:8000/admin and log in again. This will fix the issue temporarily. There is a permanent fix awaiting you in the **Homework: add security to your website!** chapter after the main tutorial. -![Ověření formuláře][3] +![Logged in error](images/post_create_error.png) - [3]: images/form_validation2.png +## Ověření formuláře -Django se stará o ověřování, že všechna pole v našem formuláři jsou správně. Není to skvělé? +Now, we will show you how cool Django forms are. A blog post needs to have `title` and `text` fields. In our `Post` model we did not say that these fields (as opposed to `published_date`) are not required, so Django, by default, expects them to be set. -> Jelikož jsme nedávno použily Django admin rozhraní, systém si v současné době myslí, že jsme přihlášeni. Existuje několik situací, které by mohly vést k našemu odhlášení (zavření prohlížeče, restartováním DB, atd.). Pokud při vytváření příspěvku dostaneš chybu, upozorňující na nepřihlášeného uživatele, zamiř na http://127.0.0.1:8000/admin a přihlas se znovu. Tím se dočasně vyřeší tento problém. Existuje trvalá oprava, která na tebe čeká v **domácím úkolu: zabezpeč svůj web!** v kapitole za hlavním tutorialem. +Try to save the form without `title` and `text`. Guess what will happen! -![Chyba přihlášení][4] +![Form validation](images/form_validation2.png) - [4]: images/post_create_error.png +Django is taking care to validate that all the fields in our form are correct. Isn't it awesome? ## Upravit formulář -Teď víme, jak přidat nový formulář. Ale co když chceme upravit stávající? Je to velmi podobné tomu, co jsme před chvílí dělaly. Vytvoříme teď rychle některé důležité věci (pokud něčemu neporozumíš, měla bys požádat svého kouče nebo se podívat do předchozích kapitol, protože jsme již všechny tyto kroky probíraly). +Now we know how to add a new post. But what if we want to edit an existing one? This is very similar to what we just did. Let's create some important things quickly. (If you don't understand something, you should ask your coach or look at the previous chapters, since we covered all these steps already.) + +First, let's save the icon which represents the edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`. -Otevři `blog/templates/blog/post_detail.html` a přidej následující řádek: +Open `blog/templates/blog/post_detail.html` in the code editor and add the following code inside `article` element: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html - -``` + +``` -tak, aby šablona vypadala takto: +so that the template will look like this: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html {% extends 'blog/base.html' %} + {% block content %} -
- {% if post.published_date %} -
- {{ post.published_date }} -
- {% endif %} - -

{{ post.title }}

-

{{ post.text|linebreaksbr }}

-
+ {% endblock %} -``` +``` -V `blog/urls.py` přidej tento řádek: +Open `blog/urls.py` in the code editor, and add this line: + +{% filename %}blog/urls.py{% endfilename %} ```python - url(r'^post/(?P[0-9]+)/edit/$', views.post_edit, name='post_edit'), -``` + path('post//edit/', views.post_edit, name='post_edit'), +``` + +We will reuse the template `blog/templates/blog/post_edit.html`, so the last missing thing is a *view*. -Znovu použijeme šablonu `blog/templates/blog/post_edit.html`, takže jediné, co chybí, je *view*. +Let's open `blog/views.py` in the code editor and add this at the very end of the file: -Otevři `blog/views.py` a přidej na samý konec souboru: +{% filename %}blog/views.py{% endfilename %} ```python def post_edit(request, pk): - post = get_object_or_404(Post, pk=pk) - if request.method == "POST": - form = PostForm(request.POST, instance=post) - if form.is_valid(): - post = form.save(commit=False) - post.author = request.user - post.published_date = timezone.now() - post.save() - return redirect('blog.views.post_d etail', pk=post.pk) - else: - form = PostForm(instance=post) - return render(request, 'blog/post_edit.html', {'form': form}) -``` - -Vypadá to téměř úplně stejně jako náš view `post_new`. Ale ne zcela. Za prvé: máme navíc parametr `pk` z adresy URL. Za druhé: získáme model `Post`, který chceme upravit, pomocí `get_object_or_404 (Post, pk = pk)`. Když potom vytvoříme formulář, předáme tento post jako parametr `instance`, když ukládáme formulář: + post = get_object_or_404(Post, pk=pk) + if request.method == "POST": + form = PostForm(request.POST, instance=post) + if form.is_valid(): + post = form.save(commit=False) + post.author = request.user + post.published_date = timezone.now() + post.save() + return redirect('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +This looks almost exactly the same as our `post_new` view, right? But not entirely. For one, we pass an extra `pk` parameter from `urls`. Next, we get the `Post` model we want to edit with `get_object_or_404(Post, pk=pk)` and then, when we create a form, we pass this post as an `instance`, both when we save the form… + +{% filename %}blog/views.py{% endfilename %} ```python form = PostForm(request.POST, instance=post) -``` +``` + +…and when we've just opened a form with this post to edit: -a když jsme otevřely formulář s tímto příspěvkem pro úpravu: +{% filename %}blog/views.py{% endfilename %} ```python form = PostForm(instance=post) -``` - -Ok, vyzkoušejme si, jestli to funguje! Pojďme na stránku `post_detail`. Tam by mělo být tlačítko Edit v pravém horním rohu: - -![Tlačítko Upravit][5] +``` - [5]: images/edit_button2.png +OK, let's test if it works! Let's go to the `post_detail` page. There should be an edit button in the top-right corner: -Po klepnutí na něj se zobrazí formulář s naším příspěvkem: +![Edit button](images/edit_button2.png) -![Upravit formulář][6] +When you click it you will see the form with our blog post: - [6]: images/edit_form2.png +![Edit form](images/edit_form2.png) -Neboj se změnit název nebo text a ulož změny! +Feel free to change the title or the text and save the changes! -Blahopřejeme! Tvoje aplikace je skoro kompletní! +Congratulations! Your application is getting more and more complete! -Pokud potřebuješ více informací o Django formulářích, měla by sis přečíst dokumentaci: https://docs.djangoproject.com/en/1.8/topics/forms/ +If you need more information about Django forms, you should read the documentation: https://docs.djangoproject.com/en/3.2/topics/forms/ ## Zabezpečení -Být schopná vytvářet nové příspěvky pouhým klepnutím na odkaz je super! Právě teď ale každý, kdo přijde na tvé stránky, je schopen odeslat nový příspěvek na blog a to asi nechceš. Udělejme to tak, že se tlačítko zobrazí tobě, ale nezobrazí se nikomu jinému. +Being able to create new posts by clicking a link is awesome! But right now, anyone who visits your site will be able to make a new blog post, and that's probably not something you want. Let's make it so the button shows up for you but not for anyone else. + +Open `blog/templates/blog/base.html` in the code editor, find our `div` inside `header` and the anchor element you put in there earlier. It should look like this: -V `blog/templates/blog/base.html` najdeš naši `page-header`, `div` a tag `a`, který jsme tam dali dříve. Řádek by měl vypadat nějak takto: +{% filename %}blog/templates/blog/base.html{% endfilename %} ```html - -``` + + {% include './icons/file-earmark-plus.svg' %} + +``` -Chceme přidat další `{% if %}` příkaz, který zajistí, že se odkaz zobrazí pouze pro uživatele, kteří jsou přihlášeni jako admin. Ve skutečnosti jsi jím pouze ty! Změň tag `< a >`, aby vypadal takto: +We're going to add another `{% if %}` tag to this, which will make the link show up only for users who are logged into the admin. Right now, that's just you! Change the `` element to look like this: + +{% filename %}blog/templates/blog/base.html{% endfilename %} ```html {% if user.is_authenticated %} - + + {% include './icons/file-earmark-plus.svg' %} + {% endif %} -``` +``` -Tento `{% if %}` způsobí, že odkaz bude odeslán do prohlížeče, pouze pokud je uživatel, který požaduje stránku, přihlášený. To zcela nezabrání možnosti vytvářet nové záznamy, ale je to dobrý první krok. Lepší zabezpečení vysvětlíme v rozšířené lekci. +This `{% if %}` will cause the link to be sent to the browser only if the user requesting the page is logged in. This doesn't protect the creation of new posts completely, but it's a good first step. We'll cover more security in the extension lessons. -Vzhledem k tomu, že jsi pravděpodobně přihlášená, neuvidíš žádnou změnu, pokud aktualizuješ stránku. Při načtení stránky v novém prohlížeči nebo anonymním okně se odkaz již neukáže! +Remember the edit icon we just added to our detail page? We also want to add the same change there, so other people won't be able to edit existing posts. -## Ještě jedna věc: čas nasadit aplikaci! +Open `blog/templates/blog/post_detail.html` in the code editor and find this line: -Uvidíme, jestli to funguje na PythonAnywhere. Čas na další nasazení! - -* Za prvé commitni nový kód a pošli ho na GitHub +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html + + {% include './icons/pencil-fill.svg' %} + ``` -$ git status -$ git add --all . -$ git status -$ git commit -m "Added views to create/edit blog post inside the site." -$ git push -``` -* Pak v [Bash konzoli PythonAnywhere][7]: +Change it to this: - [7]: https://www.pythonanywhere.com/consoles/ +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html +{% if user.is_authenticated %} + + {% include './icons/pencil-fill.svg' %} + +{% endif %} ``` -$ cd my-first-blog -$ source myvenv/bin/activate -(myvenv)$ git pull -[...] -(myvenv)$ python manage.py collectstatic -[...] -``` -* Nakonec skoč na [kartu Web][8] a klikni na **Reload**. +Since you're likely logged in, if you refresh the page, you won't see anything different. Load the page in a different browser or an incognito window (called "InPrivate" in Windows Edge), though, and you'll see that the link doesn't show up, and the icon doesn't display either! + +## Ještě jedna věc: čas nasadit aplikaci! + +Let's see if all this works on PythonAnywhere. Time for another deploy! + +* First, commit your new code, and push it up to GitHub: + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + + +* Pak v [Bash konzoli PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Remember to substitute `` with your actual PythonAnywhere subdomain, without the angle-brackets.) - [8]: https://www.pythonanywhere.com/web_app_setup/ +* Finally, hop on over to the ["Web" page](https://www.pythonanywhere.com/web_app_setup/) (use the menu button in the upper right of the console) and hit **Reload**. Refresh your https://subdomain.pythonanywhere.com blog to see the changes. -A mělo by to být! Gratulujeme :) +And that should be it. Congrats! :) \ No newline at end of file diff --git a/cs/django_installation/README.md b/cs/django_installation/README.md old mode 100755 new mode 100644 index 1c0841641c6..e16030a81af --- a/cs/django_installation/README.md +++ b/cs/django_installation/README.md @@ -1,5 +1,7 @@ # Instalace Django -> **Poznámka:** Pokud ses již propracovala přes kroky instalace - můžeš jít rovnou na další kapitolu! +> **Note** If you're using a Chromebook, skip this chapter and make sure you follow the [Chromebook Setup](../chromebook_setup/README.md) instructions. +> +> **Note** If you already worked through the [installation steps](../installation/README.md) then you've already done this – you can go straight to the next chapter! -{% include "/django_installation/instructions.md" %} +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/cs/django_installation/instructions.md b/cs/django_installation/instructions.md old mode 100755 new mode 100644 index a3a34413b65..0507a52ae9b --- a/cs/django_installation/instructions.md +++ b/cs/django_installation/instructions.md @@ -1,122 +1,229 @@ -> Část této kapitoly je založena na tutorialu Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). -> -> Další část této kapitoly je založena na [django-marcador tutorial](http://django-marcador.keimlink.de/) licencováno pod Creative Commons Attribution-ShareAlike 4.0, mezinárodní licenci. Ochranou známku pro Django-marcador drží Markus Zapke-Gründemann et al. +> Part of this section is based on tutorials by Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Part of this section is based on the [django-marcador tutorial](http://django-marcador.keimlink.de/) licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. Ochranou známku pro Django-marcador drží Markus Zapke-Gründemann et al. ## Virtuální prostředí Než začneme instalovat Django, nainstalujeme si velmi užitečný nástroj, který pomůže udržet pořádek ve vývojovém prostředí na tvém počítači. Je možné tento krok přeskočit, ale je doporučován. Začít s nejlepším možným nastavením ti ušetří spoustu starostí v budoucnosti! -Takže pojďme vytvořit **virtuální prostředí** (tzv. *virtualenv*). Virtualenv bude izolovat nastavení Python/Django na základě projektu. To znamená, že změny provedené v jedné webové stránce neovlivní ostatní, které vyvíjíš. Elegantní, že? +Takže pojď vytvořit **virtuální prostředí** (tzv. *virtualenv*). Virtualenv bude izolovat nastavení Python/Django na základě projektu. To znamená, že změny provedené v jedné webové stránce neovlivní ostatní, které vyvíjíš. Elegantní, že? -Vše, co musíš udělat je jít do adresáře, ve kterém chceš vytvořit `virtualenv`; Například tvůj domovský adresář. V systému Windows by to mohlo vypadat takto `C:\Users\Name` (kde `Name` je jméno tvého uživatelského účtu). +Vše, co musíš udělat je jít do adresáře, ve kterém chceš vytvořit `virtualenv`; Například tvůj domovský adresář. On Windows, it might look like `C:\Users\Name` (where `Name` is the name of your login). + +> **NOTE:** On Windows, make sure that this directory does not contain accented or special characters; if your username contains accented characters, use a different directory, for example, `C:\djangogirls`. Pro tento kurz budeme používat nový adresář `djangogirls` vytvořený v domovském adresáři: -``` -mkdir djangogirls -cd djangogirls -``` +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + Vytvoříme virtualenv, s názvem `myvenv`. Obecný příkaz bude vypadat takto: -``` -python3 -m venv myvenv -``` +{% filename %}command-line{% endfilename %} + + $ Python3 -m venv myvenv + + + + +To create a new `virtualenv`, you need to open the command prompt and run `python -m venv myvenv`. It will look like this: -### Windows +{% filename %}command-line{% endfilename %} -Chceš-li vytvořit nový `virtualenv`, je potřeba otevřít konzoli (mluvili jsme o tom v dřívější kapitole - vzpomínáš?) a spusť `C:\Python34\python -m venv myvenv`. Celý příkaz bude vypadat takto: + C:\Users\Name\djangogirls> python -m venv myvenv + -``` -C:\Users\Name\djangogirls > C:\Python34\python -m venv myvenv -``` +Where `myvenv` is the name of your `virtualenv`. Můžeš použít i jiné jméno, ale používej malá písmena a nepoužívej mezery, diakritiku nebo speciální znaky. It is also a good idea to keep the name short – you'll be referencing it a lot! -kde `C:\Python34\python` je adresář, kam jsme dříve nainstalovali Python a `myvenv` je název `virtualenv`. Můžeš použít i jiné jméno, ale používej malá písmena a nepoužívej mezery, diakritiku nebo speciální znaky. Je také dobrý nápad, abys zvolila krátké jméno - budeš ho používat častokrát! + -### Linux a OS X + -Vytvoření `virtualenv` na Linux a OS X je stejně jednoduché - spusť`python3 -m venv myvenv`. Celý příkaz bude vypadat takto: +We can create a `virtualenv` on both Linux and OS X by running `python3 -m venv myvenv`. It will look like this: -``` -~/djangogirls$ python3 -m venv myvenv -``` +{% filename %}command-line{% endfilename %} -`myvenv` je název `virtualenv`. Můžeš použít i jiné jméno, ale drž se těchto pravidel - používej v názvech malá písmena a bez mezer. Je dobrý nápad zvolit krátké jméno - budeš ho používat častokrát! + $ Python3 -m venv myvenv + -> **POZNÁMKA:** Vytvoření virtuálního prostředí na Ubuntu 14.04, v současné době vyhazuje následující chybu: -> +`myvenv` je název `virtualenv`. Můžeš použít i jiné jméno, ale drž se těchto pravidel - používej v názvech malá písmena a bez mezer. It is also a good idea to keep the name short as you'll be referencing it a lot! + +> **NOTE:** On some versions of Debian/Ubuntu you may receive the following error: +> +> {% filename %}command-line{% endfilename %} +> +> The virtual environment was not created successfully because ensurepip is not available. On Debian/Ubuntu systems, you need to install the python3-venv package using the following command. +> apt install python3-venv +> You may need to use sudo with that command. After installing the python3-venv package, recreate your virtual environment. +> +> +> In this case, follow the instructions above and install the `python3-venv` package: {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **NOTE:** On some versions of Debian/Ubuntu initiating the virtual environment like this currently gives the following error: +> +> {% filename %}command-line{% endfilename %} +> > Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 > -> +> > Chceš-li se tomuto vyhnout, použij tento příkaz `virtualenv`. -> -> ~/djangogirls$ sudo apt install python-virtualenv -> ~/djangogirls$ virtualenv --python=python3.4 myvenv +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python{{ book.py_version }} myvenv +> +> +> **NOTE:** If you get an error like +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv > +> +> then instead run: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python{{ book.py_version }}-venv +> + + ## Práce s virtualenv -Výše uvedený příkaz vytvoří adresář s názvem `myvenv` (či jiným jménem, které jsi zvolila), který obsahuje tvé virtuální prostředí (v podstatě svazek adresářů a souborů). +The command above will create a directory called `myvenv` (or whatever name you chose) that contains our virtual environment (basically a bunch of directories and files). -#### Windows + Spusť virtuální prostředí: -``` -C:\Users\Name\djangogirls> myvenv\Scripts\activate -``` +{% filename %}command-line{% endfilename %} -#### Linux a OS X + C:\Users\Name\djangogirls> myvenv\Scripts\activate + -Spusť virtuální prostředí: +> **NOTE:** On Windows 10 you might get an error in the Windows PowerShell that says `execution of scripts is disabled on this system`. In this case, open another Windows PowerShell with the "Run as Administrator" option. Then try typing the following command before starting your virtual environment: +> +> {% filename %}command-line{% endfilename %} +> +> C:\WINDOWS\system32> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned +> Execution Policy Change +> The execution policy helps protect you from scripts that you do not trust. Changing the execution policy might expose you to the security risks described in the about_Execution_Policies help topic at http://go.microsoft.com/fwlink/?LinkID=135170. Do you want to change the execution policy? [Y] Yes [A] Yes to All [N] No [L] No to All [S] Suspend [?] Help (default is "N"): A +> + + + +> **NOTE:** For users of the popular editor VS Code, which comes with an integrated terminal based off windows PowerShell, if you wish to stick with the integrated terminal, you may run the following command to activate your virtual environment: +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> The advantage is that you don't have to switch between editor windows and command-line windows + + + + -``` -~/djangogirls$ source myvenv/bin/activate -``` +Start your virtual environment by running: -Nezapomeň nahradit `myvenv` tvým zvoleným jménem `virtualenv`! +{% filename %}command-line{% endfilename %} -> **Poznámka:** někdy příkaz `source` nemusí být k dispozici. V těchto případech, zkus raději: -> -> ~/djangogirls$ . myvenv/bin/activate + $ source myvenv/bin/activate + + +Remember to replace `myvenv` with your chosen `virtualenv` name! + +> **NOTE:** If the command `source` is not available, try doing this instead: +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate > -Že je `virtualenv` spuštěné, poznáš pokud vidíš výzvu konzole vypadající takto: + + +You will know that you have `virtualenv` started when you see that the prompt in your console is prefixed with `(myvenv)`. + +When working within a virtual environment, `python` will automatically refer to the correct version so you can use `python` instead of `python3`. + +OK, we have all important dependencies in place. We can finally install Django! + +## Installing Django {#django} + +Now that you have your `virtualenv` started, you can install Django. + +Before we do that, we should make sure we have the latest version of `pip`, the software that we use to install Django: + +{% filename %}command-line{% endfilename %} -``` -(myvenv) C:\Users\Name\djangogirls> -``` + (myvenv) ~$ python -m pip install --upgrade pip + -nebo: +### Installing packages with requirements -``` -(myvenv) ~/djangogirls$ -``` +A requirements file keeps a list of dependencies to be installed using `pip install`: -Upozornění předpona `(myvenv)` se zobrazí! +First create a `requirements.txt` file inside of the `djangogirls/` folder, using the code editor that you installed earlier. You do this by opening a new file in the code editor and then saving it as `requirements.txt` in the `djangogirls/` folder. Your directory will look like this: -Pracuješ-li ve virtuálním prostředí, `python` bude automaticky odkazovat na správnou verzi, takže můžeš použít `python` místo `python3`. + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + -OK máme všechny důležité závislosti na místě a konečně můžeme nainstalovat Django! +In your `djangogirls/requirements.txt` file you should add the following text: -## Instalace Django +{% filename %}djangogirls/requirements.txt{% endfilename %} -Máš své `virtualenv` nastartované a můžeš nainstalovat Django pomocí příkazu `pip`. V konzoli, spusť `pip install django == 1.8` (<0>Poznámka: , používáme zde dvojité rovnítko: `==`). + Django~={{ book.django_version }} + -``` -(myvenv) ~$ pip install django==1.8 -Downloading/unpacking django==1.8 -Installing collected packages: django -Successfully installed django -Cleaning up... -``` +Now, run `pip install -r requirements.txt` to install Django. + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ pip install -r requirements.txt + Collecting Django~={{ book.django_version }} (from -r requirements.txt (line 1)) + Downloading Django-{{ book.django_version }}-py3-none-any.whl (7.9MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> If you get an error when calling pip on Windows, please check if your project pathname contains spaces, accents or special characters (for example, `C:\Users\User Name\djangogirls`). If it does, please consider using another place without spaces, accents or special characters (suggestion: `C:\djangogirls`). Create a new virtualenv in the new directory, then delete the old one and try the above command again. (Moving the virtualenv directory won't work since virtualenv uses absolute paths.) + + + + + +> Your command line might freeze when you try to install Django. If this happens, instead of the above command use: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> -v systému Windows + -> Pokud se ti ukáže chyba při volání pip na platformě Windows, zkontroluj prosím, zda tvoje cesta k projektu neobsahuje mezery, diakritiku a speciální znaky (tj. `C:\Users\User Name\djangogirls`). Pokud ano zvaž přesunutí do jiného místa bez mezer, diakritiky a speciálních znaků (návrh je: `C:\djangogirls`). Po přesunutí opakuj výše uvedený příkaz. + -na Linuxu +> If you get an error when calling pip on Ubuntu 12.04 please run `python -m pip install -U --force-reinstall pip` to fix the pip installation in the virtualenv. -> Pokud se zobrazí chyba při volání pip na Ubuntu 12.04, prosím zkus spustit `python -m pip install -U --force-reinstall pip` k opravě instalace pip ve virtualenv. + -A je to! Teď jsi (konečně) připravena k vytvoření aplikace Django! +That's it! You're now (finally) ready to create a Django application! \ No newline at end of file diff --git a/cs/django_models/README.md b/cs/django_models/README.md old mode 100755 new mode 100644 index a4c75b25aed..3299016428b --- a/cs/django_models/README.md +++ b/cs/django_models/README.md @@ -1,113 +1,127 @@ # Django modely -Nyní chceme vytvořit něco, co bude ukládat všechny příspěvky na náš blog. Ale abychom to mohly udělat, musíme si nejdříve říct něco o `objektech`. +Nyní chceme vytvořit něco, co bude ukládat všechny příspěvky na našem blogu. Ale aby jsme to mohli udělat, musíme si nejdříve říct něco o `objektech`. ## Objekty -V programování se používá koncept zvaný `objektově orientované programování`. Tato myšlenka předpokládá, že místo psaní všeho jako nudný sled programovacích instrukcí můžeme modelovat věci a definovat, jak komunikují mezi sebou navzájem. +There is a concept in programming called `object-oriented programming`. The idea is that instead of writing everything as a boring sequence of programming instructions, we can model things and define how they interact with each other. Co tedy je objekt? Je to kolekce vlastností a činností. Zní to divně, ale dáme ti příklad. -Pokud chceme modelovat kočku, vytvoříme objekt `kočka`, který má nějaké vlastnosti, například `barva`, `věk`, `nálada` (ta je dobrá, špatná, ospalá ;)), `vlastník` (který je objektem `osoba` nebo je možný případ zatoulané kočky, kde bude tato vlastnost prázdná). +If we want to model a cat, we will create an object `Cat` that has some properties such as `color`, `age`, `mood` (like good, bad, or sleepy ;)), and `owner` (which could be assigned a `Person` object – or maybe, in case of a stray cat, this property could be empty). -`Kočka` má také některé akce: `předení`, `škrábání` nebo `žraní` (v němž dáváme kočce nějaké `kočičí granule`, které by mohlo být samostatný objekt s vlastnostmi, například `chuť`). +Then the `Cat` has some actions: `purr`, `scratch`, or `feed` (in which case, we will give the cat some `CatFood`, which could be a separate object with properties, like `taste`). -``` -Cat --------- -color -age -mood -owner -purr() -scratch() -feed(cat_food) - - -CatFood --------- -taste -``` + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + Základní představa je popsat skutečné věci v kódu vlastnostmi (nazývané `vlastnosti objektu/object properties`) a akcemi (nazývané `metody/methods`). -Jak tedy bude vypadat model blogu? +Jak tedy bude vypadat model blogu? Chceme vytvořit blog, ne? Musíme odpovědět na otázku: Co je blog post/příspěvek? Jaké by měl mít vlastnosti? -Určitě budeme v naše blogu potřebovat nějaký text s jeho obsahem a titulkem, že? Bylo by také dobré vědět, kdo příspěvek napsal, takže potřebujeme autora. Nakonec také chceme vědět, kdy byl příspěvek vytvořen a publikován. +Určitě budeme v naše blogu potřebovat nějaký text s jeho obsahem a titulkem, že? It would be also nice to know who wrote it – so we need an author. Nakonec také chceme vědět, kdy byl příspěvek vytvořen a publikován. -``` -Post --------- -title -text -author -created_date -published_date -``` + Post + -------- + title + text + author + created_date + published_date + -Jaký druh věcí můžeme s příspěvkem dělat? Bylo by hezké mít nějakou `metodu`, která publikuje příspěvek. +Jaký druh věcí můžeme s příspěvkem dělat? Bylo by hezké mít nějakou `metodu`, která publikuje příspěvek, že ano? Takže budeme potřebovat metodu `publish`. -Vzhledem k tomu, že už víme, čeho chceme dosáhnout, můžeme začít modelování v Djangu! +Vzhledem k tomu, že už víme, co chceme dosáhnout, můžeme začít modelování v Django! ## Django model -Nyní víme, jaký objekt chceme vytvořit, takže můžeme přistoupit k tvorbě Django modelu pro náš příspěvek v blogu. +Nyní víme jaký objekt chceme vytvořit, tak můžeme přistoupit k tvorbě Django modelu pro náš příspěvek v blogu. -Model v Django je zvláštní druh objektu - který je uložen v `databázi`. Databáze je soubor dat. Je to místo, kam budeš ukládat informace o uživatelích a tvých příspěvcích v blogu, atd. Budeme používat SQLite databázi k ukládání dat. To je výchozí databázový adaptér v Djangu – to nám bude nyní stačit. +A model in Django is a special kind of object – it is saved in the `database`. Databáze je soubor dat. Je to místo, ve kterém budeš ukládat informace o uživatelích a tvých příspěvcích v blogu, atd. Budeme používat SQLite databázi k ukládání dat. This is the default Django database adapter – it'll be enough for us right now. Model v databázi si lze představit jako tabulku s řádky (data) a sloupci (údaje). ### Vytvoření aplikace -Abychom udržely pořádek, vytvoříme si samostatnou aplikaci uvnitř našeho projektu. Je velmi příjemné mít všechno zorganizované od samého začátku. Chceš-li vytvořit novou aplikaci, je třeba spustit následující příkaz v konzoli (z `djangogirls` adresáře, kde je `manage.py` soubor): +Abychom udrželi pořádek, vytvoříme si samostatnou aplikaci uvnitř našeho projektu. Je velmi příjemné mít všechno zorganizované od samého začátku. Chceš-li vytvořit novou aplikaci, je třeba spustit následující příkaz v konzoli (z `djangogirls` adresáře, kde je `manage.py` soubor): -``` -(myvenv) ~/djangogirls$ python manage.py startapp blog -``` +{% filename %}Mac OS X and Linux:{% endfilename %} -Zjistíš, že nový adresář `blog` nyní obsahuje řadu souborů. Adresáře a soubory v našem projektu by měly vypadat následovně: + (myvenv) ~/djangogirls$ python manage.py startapp blog + -``` -djangogirls -├── mysite -| __init__.py -| settings.py -| urls.py -| wsgi.py -├── manage.py -└── blog - ├── migrations - | __init__.py - ├── __init__.py - ├── admin.py - ├── models.py - ├── tests.py - └── views.py -``` - -Po vytvoření aplikace musíš také Djangu říct, že by ji měl použít. Uděláme to v souboru `mysite/settings.py`. Musíme najít `INSTALLED_APPS` a přidat řádek, který bude obsahovat `"blog",` `)`. Takže konečná konfigurace by měla vypadat takto: +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +You will notice that a new `blog` directory is created and it contains a number of files now. The directories and files in our project should look like this: + + djangogirls + ├── blog + │   ├── admin.py + │   ├── apps.py + │   ├── __init__.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── asgi.py + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + + +After creating an application, we also need to tell Django that it should use it. We do that in the file `mysite/settings.py` -- open it in your code editor. We need to find `INSTALLED_APPS` and add a line containing `'blog',` just above `]`. So the final product should look like this: + +{% filename %}mysite/settings.py{% endfilename %} ```python -INSTALLED_APPS = ( - 'django.contrib.admin', - 'django.contrib.auth', - 'django.contrib.contenttypes', - 'django.contrib.sessions', - 'django.contrib.messages', - 'django.contrib.staticfiles', - 'blog', -) -``` +INSTALLED_APPS = [ + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', + 'blog', +] +``` ### Vytvoření modelu pro blog post -V souboru `blog/models.py` budeme definovat všechny objekty nazývané `modely` - na tomto místě budeme definovat náš blog post. +In the `blog/models.py` file we define all objects called `Models` – this is a place in which we will define our blog post. + +Let's open `blog/models.py` in the code editor, remove everything from it, and write code like this: -Otevři `blog/models.py`, odstraň vše, co v něm je, a vlož následující kód: +{% filename %}blog/models.py{% endfilename %} ```python from django.conf import settings @@ -119,10 +133,8 @@ class Post(models.Model): author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE) title = models.CharField(max_length=200) text = models.TextField() - created_date = models.DateTimeField( - default=timezone.now) - published_date = models.DateTimeField( - blank=True, null=True) + created_date = models.DateTimeField(default=timezone.now) + published_date = models.DateTimeField(blank=True, null=True) def publish(self): self.published_date = timezone.now() @@ -132,53 +144,59 @@ class Post(models.Model): return self.title ``` -> Dvakrát si zkontroluj, že jsi použila dva znaky podtržítko(`_`) na každé straně `str`. Tato konvence se v Pythonu používá často. Někdy je také nazýváme "dunder" (zkratka pro "Double-UNDERscore"). +> Double-check that you use two underscore characters (`_`) on each side of `str`. Tato konvence se v Pythonu používá často. Někdy je také nazýváme "dunder" (zktratka pro "Double-UNDERscore"). + +It looks scary, right? But don't worry – we will explain what these lines mean! -Vypadá to děsivě, že? Ale žádný strach, vysvětlíme ti, co tyto řádky znamenají! +All lines starting with `from` or `import` are lines that add some bits from other files. So instead of copying and pasting the same things in every file, we can include some parts with `from ... import ...`. -Všechny řádky začínající `from` nebo `import` jsou řádky, které přidávají některé kousky z jiných souborů. Takže namísto kopírování a vkládání stejných věcí v každém souboru, můžeš zahrnout některé části s `from... import...`. +`class Post(models.Model):` – this line defines our model (it is an `object`). -`class Post(models.Model):` - Tento řádek definuje náš model (Jedná se o `objekt`). +- `class` je speciální klíčové slovo, které říká, že definujeme objekt. +- `Post` is the name of our model. We can give it a different name (but we must avoid special characters and whitespace). Always start a class name with an uppercase letter. +- `models. Model` znamená, že Post je Django Model, takže Django ví, že by to mělo být uloženo v databázi. -* `class` je speciální klíčové slovo, které říká, že definujeme objekt. -* `Post` je jméno našeho modelu, můžeme mu dát jiné jméno (ale musíme se vyvarovat speciálních znaků a bílých znaků). Název třídy vždy začínej velkým písmenem. -* `models. Model` znamená, že Post je Django Model, takže Django ví, že by to mělo být uloženo v databázi. +Now we define the properties we were talking about: `title`, `text`, `created_date`, `published_date` and `author`. To do that we need to define the type of each field (Is it text? A number? A date? A relation to another object, like a User?) -Nyní definujeme vlastnosti, mluvily jsme o: `title`, `text`, `created_date`, `published_date` a `autor`. To uděláš tak, že definuješ typ každého pole (Je to text? Číslo? Datum? Vztah k jinému objektu, například uživateli?). +- `models.CharField` – this is how you define text with a limited number of characters. +- `models.TextField` – this is for long text without a limit. Sounds ideal for blog post content, right? +- `models.DateTimeField` – this is a date and time. +- `models.ForeignKey` – this is a link to another model. -* `models. CharField` - takto definuješ text s omezeným počtem znaků. -* `models. TextField` - toto použiješ na dlouhý text bez omezení. To zní ideálně pro obsah blog post, ne? -* `models. DateTimeField` - definuje datum a čas. -* `models. ForeignKey` - definuje odkaz do jiného modelu. +We will not explain every bit of code here since it would take too much time. You should take a look at Django's documentation if you want to know more about Model fields and how to define things other than those described above (https://docs.djangoproject.com/en/3.2/ref/models/fields/#field-types). -Nebudeme vysvětlovat každý kousek kódu, vzhledem k tomu, že by trvalo příliš dlouho. Měla bys se podívat do Django dokumentace, pokud se chceš dozvědět víc o polích modelu a jak definovat jiné věci než výše uvedené (https://docs.djangoproject.com/en/1.8/ref/models/fields/#field-types). +What about `def publish(self):`? This is exactly the `publish` method we were talking about before. `def` means that this is a function/method and `publish` is the name of the method. You can change the name of the method if you want. The naming rule is that we use lowercase and underscores instead of spaces. For example, a method that calculates average price could be called `calculate_average_price`. -Co je `def publish(self):`? Je to `publish` metoda, o které jsme mluvili dříve. `def` znamená, že definuješ funkci/metodu, a `publish` je název metody. Název metody můžeš změnit, pokud chceš. Pravidlo pro pojmenovávání je, že používáme malá písmena a podtržítka místo mezer. Například metoda, která vypočítá průměrnou cenu, se bude jmenovat `calculate_average_price`. +Methods often `return` something. There is an example of that in the `__str__` method. In this scenario, when we call `__str__()` we will get a text (**string**) with a Post title. -Metody často něco `vrací/return`. Zde je příklad metoda `__str__`. V tomto případě, když zavoláme metodu `__str__()`, dostaneme text (**řetězec/string**) s názvem Postu. +Also notice that both `def publish(self):` and `def __str__(self):` are indented inside our class. Because Python is sensitive to whitespace, we need to indent our methods inside the class. Otherwise, the methods won't belong to the class, and you can get some unexpected behavior. -Pokud ti něco stále ještě není jasné o modelech, neváhej se zeptat svého kouče! Víme, že je to složité, zvláště, když se dozvíte, co jsou objekty a funkce takto naráz. Doufejme, že to je nyní pro tebe trochu méně magické! +If something is still not clear about models, feel free to ask your coach! We know it is complicated, especially when you learn what objects and functions are at the same time. But hopefully it looks slightly less magic for you now! ### Vytvoření tabulek pro modely v databázi -V posledním kroku přidáš náš nový model do databáze. Nejprve musíme dát Djangu vědět, že mám nějaké změny v modelu (které jsme právě vytvořily!). Napiš `Python manage.py makemigrations blog`. Celý příkaz bude vypadat takto: +The last step here is to add our new model to our database. Nejprve musíme dát Djangu vědět, že máme nějaké změny v modelu (které jsme právě vytvořili). (We have just created it!) Go to your console window and type `python manage.py makemigrations blog`. It will look like this: -``` -(myvenv) ~/djangogirls$ python manage.py makemigrations blog -Migrations for 'blog': - 0001_initial.py: - - Create model Post -``` +{% filename %}command-line{% endfilename %} -Django pro nás připravil soubor migrace, který budeme muset aplikovat na naši databázi. Napiš `Python manage.py migrate blog` a výstup by měl vypadat takto: + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py + + - Create model Post + -``` -(myvenv) ~/djangogirls$ python manage.py migrate blog -Operations to perform: - Apply all migrations: blog -Running migrations: - Rendering model states... DONE - Applying blog.0001_initial... OK -``` - -Hurá! Náš Post model je nyní v naší databázi! Bylo by hezké vidět ho v akci, že ano? Přeskoč na další kapitolu a podívej se, jak vypadá tvůj příspěvek! +**Note:** Remember to save the files you edit. Otherwise, your computer will execute the previous version which might give you unexpected error messages. + +Django prepared a migration file for us that we now have to apply to our database. Type `python manage.py migrate blog` and the output should be as follows: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate blog + Operations to perform: + Apply all migrations: blog + Running migrations: + Applying blog.0001_initial... OK + + +Hurray! Our Post model is now in our database! It would be nice to see it, right? Jump to the next chapter to see what your Post looks like! \ No newline at end of file diff --git a/cs/django_orm/README.md b/cs/django_orm/README.md old mode 100755 new mode 100644 index 5f8e383fea2..2104d6e5fe1 --- a/cs/django_orm/README.md +++ b/cs/django_orm/README.md @@ -1,180 +1,221 @@ # Django ORM a QuerySets -V této kapitole se naučíš, jak se Django spojuje s databází a jak do ní ukládá data. Pojďme na to! +V této kapitole se naučíš jak se Django spojuje s databází a jak do ní ukládá data. Pojďme na to! ## Co je QuerySet? -QuerySet je v podstatě seznam objektů daného modelu. QuerySet ti umožňuje číst data z databáze, filtrovat je a řadit je. +A QuerySet is, in essence, a list of objects of a given Model. QuerySets allow you to read the data from the database, filter it and order it. -Je snazší naučit se to na příkladu. Pojďme to zkusit. +Je snazší naučit se to na příkladu. Pojďme to zkusit, můžeme? ## Django shell -Otevři svou lokální konzoli (ne na Python Anywhere) a napiš tento příkaz: +Otevři svou lokání konzoli (ne na Python Anywhere) a napiš tento příkaz: -``` -(myvenv) ~/djangogirls$ python manage.py shell -``` +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + Mělo by to mít takovýto efekt: -``` +{% filename %}command-line{% endfilename %} + +```python (InteractiveConsole) >>> -``` +``` -Nyní jsi v Django interaktivní konzoli. Je to stejné jako Python konzole, ale s nějakými přídavnými Django kouzly :). Tady můžeš samozřejmě používat i všechny Python příkazy. +You're now in Django's interactive console. It's just like the Python prompt, but with some additional Django magic. :) You can use all the Python commands here too. ### Všechny objekty Pojďme zkusit zobrazit všechny naše příspěvky. To můžeš udělat následujícím příkazem: -``` +{% filename %}command-line{% endfilename %} + +```python >>> Post.objects.all() Traceback (most recent call last): File "", line 1, in NameError: name 'Post' is not defined -``` +``` -Ale ne! Ukázala se chybová hláška. Říká nám, že tu není žádný Post objekt (příspěvek). To je správně – zapomněly jsme je importovat! +Oops! An error showed up. It tells us that there is no Post. It's correct – we forgot to import it first! -``` +{% filename %}command-line{% endfilename %} + +```python >>> from blog.models import Post -``` +``` -Tohle je jednoduché: importujeme model `Post` z `blog.models`. Pojďme znovu zkusit zobrazit všechny příspěvky: +We import the model `Post` from `blog.models`. Let's try displaying all posts again: -``` +{% filename %}command-line{% endfilename %} + +```python >>> Post.objects.all() -, ]> -``` +, ]> +``` -To je seznam příspěvků, které jsme dříve vytvořily pomocí Django administrátorského rozhraní. Teď nicméně chceme vytvořit příspěvky použitím Pythonu, tak jak na to? +This is a list of the posts we created earlier! We created these posts using the Django admin interface. But now we want to create new posts using Python, so how do we do that? ### Vytvoř objekt Takhle vytvoříš nový Post objekt v databázi: +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=ja, title='titulek', text='Test') ``` ->>> Post.objects.create(author=me, title='titulek', text='Test') -``` -Ale chybí nám tu jedna ingredience: proměnná `me`. Jako autorku potřebujeme vložit instanci `User` (tj. "uživatelka") modelu. Jak to uděláme? +But we have one missing ingredient here: `me`. We need to pass an instance of `User` model as an author. How do we do that? Nejdříve pojďme importovat User model: -``` +{% filename %}command-line{% endfilename %} + +```python >>> from django.contrib.auth.models import User -``` +``` Jaké uživatele máme v naší databázi? Zkus tohle: -``` +{% filename %}command-line{% endfilename %} + +```python >>> User.objects.all() ]> -``` +``` + +This is the superuser we created earlier! Let's get an instance of the user now (adjust this line to use your own username): -Tohle je superuser, kterého jsme vytvořily dříve! Pojďme si teď vzít instanci tohoto uživatele: +{% filename %}command-line{% endfilename %} ```python -me = User.objects.get(username='ola') +>>> me = User.objects.get(username='ola') ``` -Jak vidíš, dostaly (tj. `get`) jsme uživatele (tj. `user`) s uživatelským jménem (tj. `username`) 'ola'. Pěkný! Samozřejmě ty si to musíš upravit na své jméno. +As you can see, we now `get` a `User` with a `username` that equals 'ola'. Neat! Teď můžeme konečně vytvořit příspěvek: +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + ``` ->>> Post.objects.create(author=me, title='titulek', text='Test') -``` -Hurá! Chceš se podívat, jestli to fungovalo? +Hurá! Chceš se podívat jestli to fungovalo? -``` +{% filename %}command-line{% endfilename %} + +```python >>> Post.objects.all() , , ]> -``` +``` A je to tu, další příspěvek v seznamu! ### Přidej více příspěvků -Teď si můžeš trochu pohrát a přidat více příspěvků, abys viděla, jak to funguje. Přidej 2 až 3 nové příspěvky a pusť se do další části. +You can now have a little fun and add more posts to see how it works. Add two or three more and then go ahead to the next part. ### Filtrování objektů -Důležitá součást QuerySetů je možnost je filtrovat. Řekněme, že chceme najít všechny příspěvky, jejichž autorem je uživatel (user) ola. V `Post.objects.all()` použijeme `filter` místo `all`. V závorkách stanovíme podmínky, které musí příspěvek splňovat, aby skončil v našem querysetu. V našem případě je to tak, že `author` se rovná `ja`. Způsob, jakým se to v Django zapisuje, je: `author=ja`. Teď náš kus kódu vypadá takhle: +A big part of QuerySets is the ability to filter them. Let's say we want to find all posts that user ola authored. V `Post.objects.all()` použijeme `filter` místo `all`. In parentheses we state what condition(s) a blog post needs to meet to end up in our queryset. In our case, the condition is that `author` should be equal to `me`. The way to write it in Django is `author=me`. Teď náš kus kódu vypadá takhle: +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> ``` ->>> Post.objects.filter(author=ja) -[, , , ] -``` -Nebo možná chceme vidět všechny příspěvky, jež mají slovo 'titulek' v poli `title`? +Or maybe we want to see all the posts that contain the word 'title' in the `title` field? + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.filter(title__contains='title') +, ]> ``` ->>> Post.objects.filter(title__contains='titulek') -[, ] -``` -> **Poznámka** Mezi `title` a `contains` jsou dvě podtržítka (`_`). Django ORM používá tuto syntaxi k rozlišení názvů ("title") a operací nebo filterů ("contains"). Pokud použiješ pouze jedno podtržítko, dostaneš chybovou hlášku "FieldError: Cannot resolve keyword title_contains". +> **Poznámka** Mezi `title` a `contains` jsou dvě podtržítka (`_`). Django's ORM uses this rule to separate field names ("title") and operations or filters ("contains"). If you use only one underscore, you'll get an error like "FieldError: Cannot resolve keyword title_contains". -Také můžeš získat seznam všech publikovaných příspěvků. Uděláme to vyfiltrováním všech příspěvků, které mají nastavené `published_date` na nějaké uplynulé datum: +You can also get a list of all published posts. We do this by filtering all the posts that have `published_date` set in the past: -``` +{% filename %}command-line{% endfilename %} + +```python >>> from django.utils import timezone >>> Post.objects.filter(published_date__lte=timezone.now()) -[] + ``` -Bohužel příspěvek, který jsme přidali pomocí Python konzole, ještě není publikován. To můžeme změnit! Nejdřív vezmeme instanci příspěvku, který chceme publikovat: +Unfortunately, the post we added from the Python console is not published yet. But we can change that! First get an instance of a post we want to publish: -``` +{% filename %}command-line{% endfilename %} + +```python >>> post = Post.objects.get(title="Sample title") -``` +``` -A ten publikujeme pomocí naší metody `publish`! +A ten publikujeme pomocí naší metody `publish`: -``` +{% filename %}command-line{% endfilename %} + +```python >>> post.publish() -``` +``` -Teď se znovu pokus získat seznam publikovaných příspěvků (3krát zmáčkni šipku nahoru a zmáčkni `enter`): +Now try to get list of published posts again (press the up arrow key three times and hit `enter`): -``` +{% filename %}command-line{% endfilename %} + +```python >>> Post.objects.filter(published_date__lte=timezone.now()) -[] -``` +]> +``` ### Řazení objektů QuerySety ti také umožňují seřadit seznam objektů. Pojďme je zkusit seřadit podle data vytvoření (`created_date`): -``` +{% filename %}command-line{% endfilename %} + +```python >>> Post.objects.order_by('created_date') -[, , , ] -``` +, , , ]> +``` Můžeme je také seřadit obráceně přidáním `-` na začátek: -``` +{% filename %}command-line{% endfilename %} + +```python >>> Post.objects.order_by('-created_date') -[, , , ] -``` +, , , ]> +``` -### Řetězení QuerySetů +### Complex queries through method-chaining -QuerySety můžeš také kombinovat dohromady pomocí **řetězení**: +As you saw, some methods on `Post.objects` return a QuerySet. The same methods can in turn also be called on a QuerySet, and will then return a new QuerySet. Thus, you can combine their effect by **chaining** them together: -``` +```python >>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') -``` +, , , ]> +``` -Je to mocný nástroj, který ti umožňuje psát docela komplexní query. +Je to mocný nástroj který ti umožňuje psát docela komplexní query. -Cool! Teď jsi připravená na další část! Pro zavření shell konzole zadej toto: +Cool! Teď jsi připravená na další část! Pro zavření shell konzoli zadej toto: -``` +{% filename %}command-line{% endfilename %} + +```python >>> exit() $ -``` +``` \ No newline at end of file diff --git a/cs/django_start_project/README.md b/cs/django_start_project/README.md old mode 100755 new mode 100644 index 89cab58e432..723c0220cc2 --- a/cs/django_start_project/README.md +++ b/cs/django_start_project/README.md @@ -1,143 +1,266 @@ # Tvůj první Django projekt! -> Část této kapitoly je založena na kurzu Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). -> -> Části této kapitoly jsou založeny na [django-marcador tutorial][1] licencováno pod Creative Commons Attribution-ShareAlike 4.0 mezinárodní licencí. Ochranou známku pro Django-marcador drží Markus Zapke-Gründemann et al. +> Part of this chapter is based on tutorials by Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Parts of this chapter are based on the [django-marcador tutorial](http://django-marcador.keimlink.de/) licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. Ochranou známku pro Django-marcador drží Markus Zapke-Gründemann et al. - [1]: http://django-marcador.keimlink.de/ +We're going to create a small blog! -Chceme vytvořit jednoduchý blog! +Prvním krokem je začít s novým projektem Django. V podstatě to znamená, že budeš spouštět některé skripty z Django, které vytvoří kostru Django projektu pro tebe. To je jen halda adresářů a souborů, které budeme později používat. -Prvním krokem je začít s novým projektem Django. V podstatě to znamená, že budeš spouštět některé skripty z Djanga, které vytvoří kostru Django projektu pro tebe. To je jen halda adresářů a souborů, které budeme později používat. +Názvy některých souborů a adresářů jsou pro Django velmi důležité. Neměla by jsi přejmenovávat soubory, které vytvoříme. Přesouvat je na jiné místo také není dobrý nápad. V Django je třeba zachovat určitou strukturu, aby jsme mohli najít důležité věci. -Názvy některých souborů a adresářů jsou pro Django velmi důležité. Neměla bys přejmenovávat soubory, které vytvoříme. Přesouvat je na jiné místo také není dobrý nápad. V Django je třeba zachovat určitou strukturu, abychom mohli najít důležité věci. +> Nezapomeň spouštět vše ve svém virtualenv. If you don't see a prefix `(myvenv)` in your console, you need to activate your virtualenv. Jak se to dělá jsme vysvětlili v kapitole **Django instalace** v části **práce s virtualenv**. Typing `myvenv\Scripts\activate` on Windows or `source myvenv/bin/activate` on Mac OS X or Linux will do this for you. -> Nezapomeň spouštět vše ve svém virtualenv. Pokud nevidíš předponu `(myvenv)` ve své konzoli, je potřeba aktivovat virtualenv. Jak se to dělá jsme si vysvětlily v kapitole **Django instalace** v části **práce s virtualenv**. Napiš `myvenv\Scripts\activate` na systému Windows nebo `source myvenv/bin/activate` na systému Mac OS / Linux. + -V MacOS a Linux konzoli bys měla spustit následující příkaz; **nezapomeň přidat tečku `.` na konci**: +In your Mac OS X or Linux console, you should run the following command. **Don't forget to add the period (or dot) `.` at the end!** -``` -(myvenv) ~/djangogirls$ django-admin startproject mysite . -``` +{% filename %}command-line{% endfilename %} -V systému Windows; **nezapomeň přidat tečku `.` na konci**: + (myvenv) ~/djangogirls$ django-admin startproject mysite . + -``` -(myvenv) C:\Users\Name\djangogirls> django-admin.py startproject mysite . -``` +> Tečka `.` je zásadní, protože říká že skript pro instalaci Django se má provést v aktuálním adresáři (pro který je tečka `.` zkratkou - odkazem). +> +> **Note** When typing the command above, remember that you only type the part which starts by `django-admin`. The `(myvenv) ~/djangogirls$` part shown here is just example of the prompt that will be inviting your input on your command line. + + + + + +On Windows you should run the following command. **(Don't forget to add the period (or dot) `.` at the end)**: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + -> Tečka `.` je zásadní, protože říká, že skript pro instalaci Django se má provést v aktuálním adresáři (pro který je tečka `.` zkratkou - odkazem) -> -> **Poznámka:** Při zadávání těchto příkazů nezapomeň zadat pouze část, která začíná `django admin` nebo `django-admin.py`. `(myvenv) ~/djangogirls$` a `(myvenv) C:\Users\Name\djangogirls>` – tyto části jsou jen příklad cesty, kam budeš zadávat své příkazy. +> Tečka `.` je zásadní, protože říká že skript pro instalaci Django se má provést v aktuálním adresáři (pro který je tečka `.` zkratkou - odkazem). +> +> **Note** When typing the command above, remember that you only type the part which starts by `django-admin.exe`. The `(myvenv) C:\Users\Name\djangogirls>` part shown here is just example of the prompt that will be inviting your input on your command line. + + `django-admin.py` je skript, který za tebe vytvoří adresáře a soubory. Nyní bys měla mít adresářovou strukturu, která vypadá následovně: -``` -djangogirls -├───manage.py -└───mysite - settings.py - urls.py - wsgi.py - __init__.py -``` + djangogirls + ├── manage.py + ├── mysite + │   ├── asgi.py + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + +> **Note**: in your directory structure, you will also see your `myvenv` directory that we created before. -`manage.py` je skript, který slouží k řízení tvé webové stránky. S ním bude možné kromě jiného spustit webový server na tvém počítači bez instalovaní čehokoli jiného. +`manage.py` is a script that helps with management of the site. With it we will be able (amongst other things) to start a web server on our computer without installing anything else. Soubor `settings.py` obsahuje konfiguraci tvé webové stránky. -Pamatuješ, jak jsme mluvili o pošťákovi, který zjišťuje kam doručit dopis? Soubor `urls.py` obsahuje seznam vzorů, které používá `urlresolver`. +Pamatuješ, jak jsme mluvili o pošťákovi který zjišťuje kam doručit dopis? Soubor `urls.py` obsahuje seznam vzorů, které používá `urlresolver`. -Prozatím budeme ignorovat ostatní soubory - nechceme v nich nic měnit. Jediná věc, na kterou nezapomeň, je, že žádný ze souborů se nemaže! +Prozatím budeme ignorovat ostatní soubory - nechceme v nich nic měnit. Jediná věc, kterou nezapomeň, žádný ze souborů se nemaže! ## Změna nastavení Pojďme udělat nějaké změny v `mysite/settings.py`. Otevři soubor pomocí editoru kódu, který jsi si nainstalovala dříve. -Bylo by hezké mít na svých stránkách správný čas. Přejdi na [wikipedia timezones list][2] a zkopíruj příslušné časové pásmo (TZ). (např. `Europe/Prague`) +**Note**: Keep in mind that `settings.py` is a regular file, like any other. You can open it from inside the code editor, using the "file -> open" menu actions. This should get you the usual window in which you can navigate to your `settings.py` file and select it. Alternatively, you can open the file by navigating to the djangogirls folder on your desktop and right-clicking on it. Then, select your code editor from the list. Selecting the editor is important as you might have other programs installed that can open the file but will not let you edit it. - [2]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones +Bylo by hezké mít správný čas na našich stránkách. Go to [Wikipedia's list of time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) and copy your relevant time zone (TZ) (e.g. `Europe/Berlin`). -V settings.py najdi řádek, který obsahuje `TIME_ZONE`, a uprav jej tak, aby obsahoval tvoje vlastní časové pásmo: +In `settings.py`, find the line that contains `TIME_ZONE` and modify it to choose your own timezone. For example: + +{% filename %}mysite/settings.py{% endfilename %} ```python -TIME_ZONE = 'Europe/Prague' -``` +TIME_ZONE = 'Europe/Berlin' +``` + +A language code consist of the language, e.g. `en` for English or `de` for German, and the country code, e.g. `de` for Germany or `ch` for Switzerland. If English is not your native language, you can add this to change the default buttons and notifications from Django to be in your language. So you would have "Cancel" button translated into the language you defined here. [Django comes with a lot of prepared translations](https://docs.djangoproject.com/en/3.2/ref/settings/#language-code). -Uprav "Europe/Prague" podle potřeby. +If you want a different language, change the language code by changing the following line: -Budeme také muset přidat cestu pro statické soubory (o statických souborech a CSS se dozvíme dále v tutorialu). Přejdi na *konec* souboru a pod položkou `STATIC_URL`, přidej nový název `STATIC_ROOT`: +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +We'll also need to add a path for static files. (We'll find out all about static files and CSS later in the tutorial.) Go down to the *end* of the file, and just underneath the `STATIC_URL` entry, add a new one called `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} ```python STATIC_URL = '/static/' -STATIC_ROOT = os.path.join(BASE_DIR, 'static') -``` +STATIC_ROOT = BASE_DIR / 'static' +``` -## Nastavení databáze +When `DEBUG` is `True` and `ALLOWED_HOSTS` is empty, the host is validated against `['localhost', '127.0.0.1', '[::1]']`. This won't match our hostname on PythonAnywhere once we deploy our application so we will change the following setting: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Note**: If you're using a Chromebook, add this line at the bottom of your settings.py file: `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Also add `.amazonaws.com` to the `ALLOWED_HOSTS` if you are using cloud9 +> +> If you are hosting your project on `Glitch.com`, let us protect the Django secret key that needs to remain confidential (otherwise, anyone remixing your project could see it): +> +> - First, we are going to create a random secret key. Open the Glitch terminal again, and type the following command: +> +> {% filename %}command-line{% endfilename %} +> +> ```bash +> python -c 'from django.core.management.utils import get_random_secret_key; \ +> print(get_random_secret_key())' +> ``` +> +> This should display a long random string, perfect to use as a secret key for your brand new Django web site. We will now paste this key into a `.env` file that Glitch will only show you if you are the owner of the web site. +> +> - Create a file `.env` at the root of your project and add the following property in it: +> +> {% filename %}.env{% endfilename %} +> +> ```bash +> # Here, inside the single quotes, you can cut and paste the random key generated above +> SECRET='3!0k#7ds5mp^-x$lqs2%le6v97h#@xopab&oj5y7d=hxe511jl' +> ``` +> +> - Then update the Django settings file to inject this secret value and set the Django web site name: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> import os +> +> SECRET_KEY = os.getenv('SECRET') +> ``` +> +> - And a little further down in the same file, we inject the name of your new Glitch website: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> ALLOWED_HOSTS = [os.getenv('PROJECT_DOMAIN') + ".glitch.me"] +> ``` +> +> The `PROJECT_DOMAIN` value is automatically generated by Glitch. It will correspond to the name of your project. + +## Set up a database Existuje mnoho různých databázových softwarů, které mohou ukládat data pro tvůj web. My budeme používat výchozí `sqlite3`. Ta je již nastavena v konfiguračním souboru `mysite/settings.py`: +{% filename %}mysite/settings.py{% endfilename %} + ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', - 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), + 'NAME': BASE_DIR / 'db.sqlite3', } } -``` +``` -Chceš-li vytvořit databázi pro náš blog, spusť následující příkaz v konzoli: `python manage.py migrate` (pro spuštění musíš být v adresáři `djangogirls`, který obsahuje soubor `manage.py`). Pokud vše půjde dobře, měla bys uvidět něco takového: +Chceš-li vytvořit databázi pro náš blog, spusť následující příkaz v konzoli: `python manage.py migrate` (pro spuštění musíš být v adresáři `djangogirls`, který obsahuje soubor `manage.py`). Pokud vše půjde dobře, měla bys vidět něco takového: -``` -(myvenv) ~/djangogirls$ python manage.py migrate -Operations to perform: - Synchronize unmigrated apps: messages, staticfiles - Apply all migrations: contenttypes, sessions, admin, auth -Synchronizing apps without migrations: - Creating tables... - Running deferred SQL... - Installing custom SQL... -Running migrations: - Rendering model states... DONE Applying contenttypes.0001_initial... OK - Applying auth.0001_initial... OK - Applying admin.0001_initial... OK - Applying contenttypes.0002_remove_content_type_name... OK - Applying auth.0002_alter_permission_name_max_length... OK - Applying auth.0003_alter_user_email_max_length... OK - Applying auth.0004_alter_user_username_opts... OK - Applying auth.0005_alter_user_last_login_null... OK - Applying auth.0006_require_contenttypes_0002... OK - Applying sessions.0001_initial... OK -``` - -A máme hotovo! Čas spustit webový server a měla bys vidět naše fungující webové stránky! - -Pro spuštění musíš být v adresáři, který obsahuje soubor `manage.py` (adresář `djangogirls`). V konzoli spustíš webový server zadáním `python manage.py runserver`: +{% filename %}command-line{% endfilename %} -``` -(myvenv) ~/djangogirls$ python manage.py runserver -``` + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: admin, auth, contenttypes, sessions + Running migrations: + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... OK + Applying admin.0003_logentry_add_action_flag_choices... OK + Applying contenttypes.0002_remove_content_type_name... OK + Applying auth.0002_alter_permission_name_max_length... OK + Applying auth.0003_alter_user_email_max_length... OK + Applying auth.0004_alter_user_username_opts... OK + Applying auth.0005_alter_user_last_login_null... OK + Applying auth.0006_require_contenttypes_0002... OK + Applying auth.0007_alter_validators_add_error_messages... OK + Applying auth.0008_alter_user_username_max_length... OK + Applying auth.0009_alter_user_last_name_max_length... OK + Applying auth.0010_alter_group_name_max_length... OK + Applying auth.0011_update_proxy_permissions... OK + Applying auth.0012_alter_user_first_name_max_length... OK + Applying sessions.0001_initial... OK + -Pokud pracuješ v systému Windows a nezdaří se to s chybovou zprávou `UnicodeDecodeError`, použij tento příkaz: +A máme hotovo! Čas spustit webový server a měla by jsi vidět naše fungující webové stránky! -``` -(myvenv) ~/djangogirls$ python manage.py runserver 0:8000 -``` +## Starting the web server -Nyní vše, co musíš udělat, je zkontrolovat, zda naše webové stránky běží - otevři svůj prohlížeč (Firefox, Chrome, Safari, Internet Explorer nebo co používáš) a zadej adresu: +Pro spuštění musíš být v adresáři, který obsahuje soubor `manage.py` (adresář `djangogirls`). V konzoli spustíš webový server zadáním `pythonu manage.py runserver`: -``` -http://127.0.0.1:8000/ -``` +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +If you are on a Chromebook, use this command instead: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +or this one if you are using Glitch: + +{% filename %}Glitch.com terminal{% endfilename %} + + $ refresh + + + +If you are on Windows and this fails with `UnicodeDecodeError`, use this command instead: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Now you need to check that your website is running. Open your browser (Firefox, Chrome, Safari, Internet Explorer or whatever you use) and enter this address: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +If you're using a Chromebook and Cloud9, instead click the URL in the pop-up window that should have appeared in the upper right corner of the command window where the web server is running. The URL will look something like: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +or on Glitch: + + https://name-of-your-glitch-project.glitch.me + + +Congratulations! You've just created your first website and run it using a web server! Isn't that awesome? -Webový server ti znemožní použít příkazovou řádkou, dokud jej nezastavíš. Chceš-li zadat další příkazy, spusť nové okno terminálu a aktivuj svůj virtualenv. Chceš-li zastavit server WWW, přepni se zpět do okna, ve kterém je spuštěn, a kombinací kláves CTRL + C - tlačítka CTRL a C, které stiskneš dohromady (na Windows, možná musíš stisknout kombinaci kláves Ctrl + Break) – ukončíš proces. +![Install worked!](images/install_worked.png) -Blahopřejeme! Právě jsi vytvořila svůj první web a spustila jej pomocí webového serveru! Není to super? +Note that a command window can only run one thing at a time, and the command window you opened earlier is running the web server. As long as the web server is running and waiting for additional incoming requests, the terminal will accept new text but will not execute new commands. -![Fungovalo to!][3] +> We reviewed how web servers work in the **How the Internet works** chapter. - [3]: images/it_worked2.png +To type additional commands while the web server is running, open a new terminal window and activate your virtualenv -- to review instructions on how to open a second terminal window, see [Introduction to the command line](../intro_to_command_line/README.md). To stop the web server, switch back to the window in which it's running and press CTRL+C - Control and C keys together (on Windows, you might have to press Ctrl+Break). -Připravena pro další krok? Je tu čas k vytvoření nějakého obsahu! +Ready for the next step? It's time to create some content! \ No newline at end of file diff --git a/cs/django_templates/README.md b/cs/django_templates/README.md old mode 100755 new mode 100644 index 97c487fcdd7..6d24472ec79 --- a/cs/django_templates/README.md +++ b/cs/django_templates/README.md @@ -1,108 +1,108 @@ # Django šablony -Je čas zobrazit nějaká data! Django nám k tomuto účelu poskytuje užitečné vestavěné **šablonové tagy**. +Je čas zobrazit nějaká data! Django nám k tomuto účelu poskytuje užitečné, vestavěné **šablonové tagy**. ## Co jsou šablonové tagy? -V HTML ve skutečnosti nemůžeš použít Python kód, protože prohlížeče mu nerozumí. Znají pouze HTML. Víme, že HTML je spíše statické, zatímco Python je mnohem dynamičtější. +You see, in HTML, you can't really write Python code, because browsers don't understand it. They know only HTML. We know that HTML is rather static, while Python is much more dynamic. -**Django šablonové tagy** nám umožňují přenést věci podobné Pythonu do HTML, abys mohla postavit dynamickou webovou stránku rychleji a snadněji. +**Django template tags** allow us to transfer Python-like things into HTML, so you can build dynamic websites faster. Cool! ## Zobraz šablonu se seznamem příspěvků -V předchozí kapitole jsme daly naší šabloně seznam příspěvků v proměnné `posts`. Teď to zobrazíme v HTML. +V předchozí kapitole jsme dali naší šabloně seznam příspěvků v proměnné `posts`. Teď to zobrazíme v HTML. V Django šabloně se proměnná vypíše pomocí dvojitých složených závorek s názvem proměnné uvnitř. Takhle: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + ```html {{ posts }} -``` - -Zkus to ve své šabloně `blog/templates/blog/post_list.html`. Nahraď vše od druhého `
` do třetího `
` řádkou `{{ posts }}`. Ulož soubor a obnov stránku, aby sis prohlédla výsledek: +``` -![Figure 13.1][1] +Zkus to ve své šabloně `blog/templates/blog/post_list.html`. Open it up in the code editor, and replace the existing `
` elements with `{{ posts }}`. Ulož soubor a obnov stránku, abys viděla výsledek: - [1]: images/step1.png +![Figure 13.1](images/step1.png) Jak vidíš, dostali jsme toto: -``` +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html , ]> -``` +``` To znamená, že to Django chápe jako seznam objektů. Vzpomínáš si z kapitoly **Úvod do pythonu**, jak můžeme zobrazit seznam? Ano, pomocí for smyček! V Django šabloně je použiješ takto: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + ```html {% for post in posts %} {{ post }} {% endfor %} -``` +``` Zkus udělat tohle ve své šabloně. -![Figure 13.2][2] +![Figure 13.2](images/step2.png) - [2]: images/step2.png +Funguje to! But we want the posts to be displayed like the static posts we created earlier in the **Introduction to HTML** chapter. Můžeš smíchat HTML tagy se šablonovými. Naše `body` bude vypadat takhle: -Funguje to! Ale chceme, aby se zobrazovaly jako ty statické příspěvky, které jsme vytvořili dříve v kapitole **Úvod do HTML**. Můžeš smíchat HTML tagy se šablonovými. Naše `body` bude vypadat takhle: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html - + {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

+
+ +

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+
{% endfor %} -``` - -{% raw %}Všechno, co dáš mezi `{% for %}` a `{% endfor %}`, se zopakuje pro každý objekt v seznamu. Obnov svou stránku:{% endraw %} +``` -![Figure 13.3][3] +{% raw %}Všechno co dáš mezi `{% for %}` a `{% endfor %}` se zopakuje pro každý objekt v seznamu. Obnov svou stránku:{% endraw %} - [3]: images/step3.png +![Figure 13.3](images/step3.png) -Všimla sis, že jsme tentokrát použily lehce odlišnou notaci (`{{ post.title }}` nebo `{{ post.text }}`)? Přistupujeme k datům v každém poli definovaném v našem `Post` modelu. Dále `|linebreaksbr` posílá text příspěvku filtrem, aby převedl zalomení řádků na odstavce. +Have you noticed that we used a slightly different notation this time (`{{ post.title }}` or `{{ post.text }}`)? Přistupujeme k datům v každém poli defnovaném v našem `Post` modelu. Also, the `|linebreaksbr` is piping the posts' text through a filter to convert line-breaks into paragraphs. ## Ještě jedna věc -Bylo by dobré vidět, jestli tvá webová stránka bude stále fungovat i na webu, že? Pojďme zkusit další nasazení/deploy na PythonAnywhere. Tady je rekapitulace postupu... +It'd be good to see if your website will still be working on the public Internet, right? Let's try deploying to PythonAnywhere again. Here's a recap of the steps… -* Nejdřív hoď svůj kód na GitHub +* First, push your code to GitHub -``` -$ git status -[...] -$ git add --all . -$ git status -[...] -$ git commit -m "Modified templates to display posts from database." -[...] -$ git push -``` +{% filename %}command-line{% endfilename %} -* Pak se přihlaš do [PythonAnywhere][4] a jdi do **Bash konzole** (nebo vytvoř novou) a zadej: + $ git status + [...] + $ git add . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + - [4]: https://www.pythonanywhere.com/consoles/ +* Pak se přihlaš do [PythonAnywhere](https://www.pythonanywhere.com/consoles/) s jdi do **Bash konzole** (nebo vytvoř novou) a zadej: -``` -$ cd my-first-blog -$ git pull -[...] -``` +{% filename %}PythonAnywhere command-line{% endfilename %} -* Nakonec jdi na záložku [Web][5] a klikni na **Reload**. Tvá stránka by měla být aktuální! + $ cd .pythonanywhere.com + $ git pull + [...] + - [5]: https://www.pythonanywhere.com/web_app_setup/ +(Remember to substitute `` with your actual PythonAnywhere subdomain, without the angle-brackets.) -Gratulujeme! Teď zkus přidat nové příspěvky ve tvém Django administračním rozhraní (nezapomeň přidat published_date!), potom obnov stránku a podívej se, jestli se nové příspěvky zobrazí. +* Finally, hop on over to the ["Web" page](https://www.pythonanywhere.com/web_app_setup/) and hit **Reload** on your web app. (To reach other PythonAnywhere pages from the console, use the menu button in the upper right corner.) Your update should be live on https://subdomain.pythonanywhere.com -- check it out in the browser! If the blog posts on your PythonAnywhere site don't match the posts appearing on the blog hosted on your local server, that's OK. The databases on your local computer and Python Anywhere don't sync with the rest of your files. -Funguje to dokonale? Jsme hrdí! Odpočiň si na chvíli od počítače, zasloužíš si přestávku :) +Congrats! Now go ahead and try adding a new post in your Django admin (remember to add published_date!) Make sure you are in the Django admin for your pythonanywhere site, https://subdomain.pythonanywhere.com/admin. Then refresh your page to see if the post appears there. -![Figure 13.4][6] +Works like a charm? We're proud! Step away from your computer for a bit – you have earned a break. :) - [6]: images/donut.png +![Figure 13.4](images/donut.png) \ No newline at end of file diff --git a/cs/django_urls/README.md b/cs/django_urls/README.md old mode 100755 new mode 100644 index 456b3d95a5b..0287a6230a5 --- a/cs/django_urls/README.md +++ b/cs/django_urls/README.md @@ -1,126 +1,115 @@ -# Django URL +# Django URLs -Chystáme se napsat naši první webovou stránku: homepage pro tvůj blog! Ale nejdřív si něco málo řekneme o Django URL. +We're about to build our first webpage: a homepage for your blog! But first, let's learn a little bit about Django URLs. ## Co je adresa URL? -Adresa URL je jednoduše webová adresa. Adresu URL můžeš vidět pokaždé, když navštívíš webové stránky - je vidět v adresním řádku tvého prohlížeče (Ano! `127.0.0.1:8000` je adresa URL! A `https://djangogirls.org` je také adresa URL): +A URL is a web address. You can see a URL every time you visit a website – it is visible in your browser's address bar. (Yes! `127.0.0.1:8000` je adresa URL! And `https://djangogirls.org` is also a URL.) -![Url][1] +![URL](images/url.png) - [1]: images/url.png - -Každá stránka na internetu potřebuje svou vlastní URL. Tímto způsobem aplikace ví, co by měla ukázat uživateli, který otevře URL. V Djangu používáme takzvaný `URLconf` (URL konfigurace). URLconf je sada vzorů, podle kterých Django zpracuje URL a pokusí se najít správné view. +Každá stránka na internetu potřebuje svou vlastní URL. This way your application knows what it should show to a user who opens that URL. In Django, we use something called `URLconf` (URL configuration). URLconf is a set of patterns that Django will try to match the requested URL to find the correct view. ## Jak fungují URL v Djangu? -Pojďme otevřít soubor `mysite/urls.py` v tvém zvoleném editoru kódu a uvidíme, jak vypadá: +Pojďme otevřít `mysite/urls.py` soubor v tvém zvoleném editoru kódu a uvidíme, jak vypadá: + +{% filename %}mysite/urls.py{% endfilename %} ```python -from django.conf.urls import include, url +"""mysite URL Configuration + +[...] +""" from django.contrib import admin +from django.urls import path urlpatterns = [ - # Examples: - # url(r'^$', 'mysite.views.home', name='home'), - # url(r'^blog/', include('blog.urls')), - - url(r'^admin/', include(admin.site.urls)), + path('admin/', admin.site.urls), ] -``` - -Jak vidíš, Django už má tady něco pro nás připravené. - -Řádky, které začínají na `#`, jsou komentáře - to znamená, že tyto řádky nebudou spuštěny v Pythonu. Docela užitečný nástroj, ne? - -Admin URL, které jsi navštívila v předchozí kapitole, už je tady: - -```python - url(r'^admin/', include(admin.site.urls)), -``` +``` -To znamená, že pro každou adresu URL, která začíná na `admin/`, bude Django hledat odpovídající *view*. V tomto případě je zde vložen odkaz na soubor s admin URL, takže není vše zabaleno v jednom souboru – je to mnohem čitelnější a jednodušší. +As you can see, Django has already put something here for us. -## Regex +Lines between triple quotes (`'''` or `"""`) are called docstrings – you can write them at the top of a file, class or method to describe what it does. They won't be run by Python. -Zajímá tě, jak Django porovnává URL pro views? No, tato část je složitější. Django používá `regex`, což je zkratka pro "regulární výrazy". Regex má hodně (hodně!) pravidel, ze kterých tvoří vzorek pro vyhledávání. Vzhledem k tomu, že regex jsou hodně pokročilou záležitostí, nepůjdeme do podrobností, jak fungují. +The admin URL, which you visited in the previous chapter, is already here: -Pokud chceš porozumět tomu, jak jsme vytvořili vzory, zde je příklad procesu - budeme potřebovat pouze omezenou sadu pravidel pro vyjádření vzoru, který hledáme, jmenovitě: +{% filename %}mysite/urls.py{% endfilename %} +```python + path('admin/', admin.site.urls), ``` -^ pro začátek textu -$ pro konec textu -\d číslice -+ označuje poslední položku, které by měla být zopakována -() k zachycení/ohraničení části vzoru -``` - -Cokoliv jiného v definici URL budeme brát doslovně. - -Nyní si představ, že máš webové stránky s adresou: `http://www.mysite.com/post/12345/`, kde `12345` je číslo tvého příspěvku. -Psaní oddělených views pro všechna čísla příspěvků by bylo opravdu otravné. S regulárními výrazy můžeme vytvořit vzor, který bude odpovídat adrese URL a extrahovat z něj číslo, které potřebujeme: `^ post/(\d+) / $`. Pojďme si rozebrat kousek po kousku, co zde děláme: +This line means that for every URL that starts with `admin/`, Django will find a corresponding *view*. In this case, we're including a lot of admin URLs so it isn't all packed into this small file – it's more readable and cleaner. -* **^ post/** říká Djangu: vezmi cokoliv, co má začátku adresy URL text `post/` (hned za `^`) -* **(\d+)** znamená, že bude následovat číslo (jedno nebo více číslic) a že chceme číslo zachytit a extrahovat -* **/** říká djangu, že by měl následovat další znak `/` -* **$** pak označuje konec adresy URL, což znamená, že pouze řetězce s `/` na konci budou odpovídat tomuto vzoru +## Your first Django URL! -## Tvoje první Django URL! +Time to create our first URL! We want 'http://127.0.0.1:8000/' to be the home page of our blog and to display a list of posts. -Čas na vytvoření našeho prvního URL! Chceme, aby ' http://127.0.0.1:8000 /' bylo domovskou stránkou našeho blogu a zobrazilo seznam postů. +We also want to keep the `mysite/urls.py` file clean, so we will import URLs from our `blog` application to the main `mysite/urls.py` file. -Chceme také, aby soubor `mysite/urls.py` zůstal čistý, takže budeme importovat adresy URL z našeho `blogu` do hlavního souboru `mysite/urls.py`. +Go ahead, add a line that will import `blog.urls`. You will also need to change the `from django.urls…` line because we are using the `include` function here, so you will need to add that import to the line. -Odstraň zakomentované řádky (řádky začínající `#`) a přidej řádek, který bude importovat `blog.urls` do hlavní URL('').`''`). +Your `mysite/urls.py` file should now look like this: -Tvůj `Mysite/urls.py` soubor by měl nyní vypadat takto: +{% filename %}mysite/urls.py{% endfilename %} ```python -from django.conf.urls import include, url from django.contrib import admin +from django.urls import path, include urlpatterns = [ - url(r'^admin/', include(admin.site.urls)), - url(r'', include('blog.urls')), + path('admin/', admin.site.urls), + path('', include('blog.urls')), ] -``` - -Django nyní bude přesměrovávat vše, co přichází na ' http://127.0.0.1:8000/', do `blog.urls ` a hledat zde další instrukce. +``` -Při psaní regulárních výrazů v Pythonu se vždy přidává `r` před řetězec. To je užitečný tip pro Python, že řetězec může obsahovat zvláštní znaky, které nejsou určeny přímo pro Python samotný, ale pro regulární výraz namísto toho. +Django will now redirect everything that comes into 'http://127.0.0.1:8000/' to `blog.urls` and looks for further instructions there. ## blog.urls -Vytvoř nový prázdný soubor `blog/urls.py`. Přidej tyto dvě první řádky: +Create a new empty file named `urls.py` in the `blog` directory, and open it in the code editor. All right! Add these first two lines: + +{% filename %}blog/urls.py{% endfilename %} ```python -from django.conf.urls import url +from django.urls import path from . import views ``` -Zde jsme jen importovaly Django metody a všechny naše `views` z aplikace `blogu` (zatím žádné nemáme, ale dostaneme se k tomu za chvíli). +Here we're importing Django's function `path` and all of our `views` from the `blog` application. (We don't have any yet, but we will get to that in a minute!) + +After that, we can add our first URL pattern: -Poté můžeme přidat náš první URL vzor: +{% filename %}blog/urls.py{% endfilename %} ```python urlpatterns = [ - url(r'^$', views.post_list, name='post_list'), + path('', views.post_list, name='post_list'), ] -``` - -Jak vidíš, právě jsme přiřadili `view` nazvané `post_list`, k URL `^$`. Tento regulární výraz znamená `^` (začátek řetězce), následuje `$` (konec řetězce) - výrazu bude odpovídat pouze prázdný řetězec. Tak je to správně, protože v Django URL překladači/resolveru, část adresy ' http://127.0.0.1:8000 /' není součástí adresy URL. Tento vzor řekne Djangu, že `views.post_list` je správné místo, kam jít, když někdo vstoupí na tvé webové stránky na adrese ' http://127.0.0.1:8000 /'. +``` -Poslední část `name = 'post_list'` je název adresy URL, která bude použita k identifikaci view. Název URL může být stejný jako název view, ale také může být úplně jiný. Pojmenované URL budeme používat později v projektu, proto je důležité pojmenovat všechny adresy URL v aplikaci. Také by ses měla snažit udržet názvy adres URL jedinečné a snadno zapamatovatelné. +As you can see, we're now assigning a `view` called `post_list` to the root URL. This URL pattern will match an empty string and the Django URL resolver will ignore the domain name (i.e., http://127.0.0.1:8000/) that prefixes the full URL path. This pattern will tell Django that `views.post_list` is the right place to go if someone enters your website at the 'http://127.0.0.1:8000/' address. -Všechno v pořádku? Otevři http://127.0.0.1:8000 / v prohlížeči a uvidíš výsledek. +The last part, `name='post_list'`, is the name of the URL that will be used to identify the view. This can be the same as the name of the view but it can also be something completely different. We will be using the named URLs later in the project, so it is important to name each URL in the app. We should also try to keep the names of URLs unique and easy to remember. -![Error][2] +If you try to visit http://127.0.0.1:8000/ now, then you'll find some sort of 'web page not available' message. This is because the server (remember typing `runserver`?) is no longer running. Take a look at your server console window to find out why. - [2]: images/error1.png +{% filename %}{{ warning_icon }} command-line{% endfilename %} -Stránka přestala fungovat, co? Neboj se, je to chyba, které se nemusíš obávat! Tyto hlášky jsou vlastně docela užitečné: + return _bootstrap._gcd_import(name[level:], package, level) + File "", line 1030, in _gcd_import + File "", line 1007, in _find_and_load + File "", line 986, in _find_and_load_unlocked + File "", line 680, in _load_unlocked + File "", line 850, in exec_module + File "", line 228, in _call_with_frames_removed + File "/Users/ola/djangogirls/blog/urls.py", line 5, in + path('', views.post_list, name='post_list'), + AttributeError: module 'blog.views' has no attribute 'post_list' + -Můžeš si v ní přečíst, že neexistuje **žádný atribut/no attribute "post_list"**. Připomíná ti *post_list* něco? Tak jsme nazvali naše view! Znamená to, že vše je na svém místě, ale prostě jsme ještě nevytvořili naše *view*. Žádný strach, vytvoříme ho za chvilku. +Your console is showing an error, but don't worry – it's actually pretty useful: It's telling you that there is **no attribute 'post_list'**. That's the name of the *view* that Django is trying to find and use, but we haven't created it yet. At this stage, your `/admin/` will also not work. No worries – we will get there. If you see a different error message, try restarting your web server. To do that, in the console window that is running the web server, stop it by pressing Ctrl+C (the Control and C keys together). On Windows, you might have to press Ctrl+Break. Then you need to restart the web server by running a `python manage.py runserver` command. -> Pokud chceš vědět více o Django URLconfs, podívej se na oficiální dokumentaci: https://docs.djangoproject.com/en/1.8/topics/http/urls/ +> If you want to know more about Django URLconfs, look at the official documentation: https://docs.djangoproject.com/en/3.2/topics/http/urls/ \ No newline at end of file diff --git a/cs/django_views/README.md b/cs/django_views/README.md old mode 100755 new mode 100644 index 18d8e531d5a..55d5f9a5fa4 --- a/cs/django_views/README.md +++ b/cs/django_views/README.md @@ -1,38 +1,44 @@ -# Django views – je čas začít tvořit! +# Django views – time to create! -Nejdříve se musíme zbavit chyb, které jsme vytvořily v předchozí kapitole :) +Nejdříve se musíme zbavit chyb, které jsme vytvořili v předchozí kapitole! :) -*View* je místo, kam píšeme "logiku" naší aplikace. Bude požadovat informace z `modelu`, který jsi vytvořila dříve, a předá je `šabloně`. Šablonu vytvoříme v příští kapitole. View jsou vlastně jen Python funkce, které jsou o trochu složitější než funkce z kapitoly **Úvod do Pythonu**. +*View* je místo, kam píšeme "logiku" naší aplikace. Bude požadovat informace z `modelu` který jsi vytvořila dříve a předá je `šabloně`. Šablonu vytvoříme v příští kapitole. Views are just Python functions that are a little bit more complicated than the ones we wrote in the **Introduction to Python** chapter. View se dávají do souboru `views.py`. My si teď přidáme naše vlastní *view* do souboru `blog/views.py`. ## blog/views.py -OK, pojďme otevřít tento soubor a podívat se, co tam je: +OK, let's open up this file in our code editor and see what's in there: + +{% filename %}blog/views.py{% endfilename %} ```python from django.shortcuts import render # Create your views here. -``` +``` + +Not too much stuff here yet. + +Remember that lines starting with `#` are comments – this means that those lines won't be run by Python. -Zatím zde není příliš informací. Nejjednodušší *view* může vypadat následovně. +Let's create a *view* as the comment suggests. Add the following minimal view below it: + +{% filename %}blog/views.py{% endfilename %} ```python def post_list(request): return render(request, 'blog/post_list.html', {}) -``` +``` -Jak vidíš vytvořily, jsme metodu (`def`) nazvanou `post_list`, která přebírá `request`(žádost) a `return` (vrací) metodu `render`, která bude vykreslovat naši šablonu `blog/post_list.html`. +As you can see, we created a function (`def`) called `post_list` that takes `request` and will `return` the value it gets from calling another function `render` that will render (put together) our template `blog/post_list.html`. -Ulož soubor, přejdi na http://127.0.0.1:8000/ a podívej se, co se nám nyní zobrazí. +Save the file, go to http://127.0.0.1:8000/ and see what we've got. Další chyba! Přečti si, co je špatně nyní: -![Error][1] - - [1]: images/error.png +![Error](images/error.png) -Je to jednoduché: *TemplateDoesNotExist*. Musíme opravit tuto chybu a v následující kapitole vytvořit šablonu! +This shows that the server is running again, at least, but it still doesn't look right, does it? Don't worry, it's just an error page, nothing to be scared of! Just like the error messages in the console, these are actually pretty useful. You can read that the *TemplateDoesNotExist*. Let's fix this bug and create a template in the next chapter! -> Další informace ohledně Django views získáš v oficiální dokumentaci na: https://docs.djangoproject.com/en/1.8/topics/http/views/ +> Learn more about Django views by reading the official documentation: https://docs.djangoproject.com/en/3.2/topics/http/views/ \ No newline at end of file diff --git a/cs/domain/README.md b/cs/domain/README.md deleted file mode 100755 index 45882b8235f..00000000000 --- a/cs/domain/README.md +++ /dev/null @@ -1,71 +0,0 @@ -# Doména - -Heroku ti přidělil doménu, ale je dlouhá, těžce zapamatovatelná a ošklivá. Bylo by super mít krátký a snadno zapamatovatelný název domény, ne? - -V této kapitole tě naučíme, jak si koupit doménu a nasměrovat ji na Heroku! - -## Kde si zaregistrovat doménu? - -Typická doména stojí kolem 15 dolarů ročně. Existují levnější a dražší varianty, podle poskytovatele. Existuje mnoho společností, které nabízejí koupi domény: jednoduše pomocí [vyhledávání google][1] nalezneš stovky možností. - - [1]: https://www.google.com/search?q=register%20domain - -Naše oblíbená je [I want my name][2]. Inzerují se jako "bezbolestný doménový management" a je to opravdu bezbolestné. - - [2]: https://iwantmyname.com/ - -## Jak si zaregistrovat doménu na IWantMyName? - -Přejdi na [iwantmyname][3] a zadej doménu, kterou chceš zaregistrovat, do pole Search/Hledat. - - [3]: https://iwantmyname.com - -![][4] - - [4]: images/1.png - -Nyní bys měla vidět seznam všech dostupných domén s termínem, který jsi vložila do pole Hledat. Jak vidíš, veselý obličej znamená, že doména je k dispozici pro tvůj nákup, a smutná tvář znamená, že je již obsazená. - -![][5] - - [5]: images/2.png - -Rozhodli jsme se koupit `djangogirls.in`: - -![][6] - - [6]: images/3.png - -Přejdi k pokladně/checkout. Nyní by ses měla přihlásit do iwantmyname, pokud ještě nemáš účet. Poté poskytneš informace o kreditní kartě a koupíš doménu! - -Pak klepni na tlačítko `domény` v menu a vyber nově zakoupenou doménu. Vyber ji a klepni na odkaz `Spravovat záznamy DNS/manage DNS record`: - -![][7] - - [7]: images/4.png - -Nyní je třeba najít tento formulář: - -![][8] - - [8]: images/5.png - -A vyplnit jej s následujícími podrobnosti: - Hostname: www - typ: CNAME - hodnota: vaši doménu z Heroku (například djangogirls.herokuapp.com) - TTL: 3600 - -![][9] - - [9]: images/6.png - -Klepni na tlačítko Přidat a změny se uloží - uvidíš je v dolní části. - -Změny se mohou projevit až za několik hodin, než začne fungovat tvá doména, tak buď trpělivá! - -## Konfigurace domény v Heroku - -Musíš také říci Heroku, kterou doménu chceš použít jako vlastní. - -Přejdi na [Heroku Dashboard][10], přihláš se k účtu Heroku a vyber si aplikaci. Poté přejdi do aplikace nastavení a přidej doménu v sekci `domény` a ulož provedené změny. - - [10]: https://dashboard.heroku.com/apps - -A je to! diff --git a/cs/dynamic_data_in_templates/README.md b/cs/dynamic_data_in_templates/README.md old mode 100755 new mode 100644 index a75c2805c2e..571f19216fc --- a/cs/dynamic_data_in_templates/README.md +++ b/cs/dynamic_data_in_templates/README.md @@ -1,44 +1,50 @@ # Dynamická data v šablonách -Máme různé části na svém místě: `Post` model je definován v `models.py`, `post_list` máme v `views.py` a máme přidanou šablonu. Ale jak skutečně přinutíme naše příspěvky objevit se v naší HTML šabloně? Protože to je to, co chceme: Vzít nějaký obsah (modely uložené v databázi) a zobrazit je hezky v naší šabloně, správně? +Máme různé části na svém místě: `Post` model je definován v `models.py`, `post_list` máme v `views.py` a máme přidanou šablonu. Ale jak skutečně přinutíme naše příspěvky objevit se v naší HTML šabloně? Because that is what we want to do – take some content (models saved in the database) and display it nicely in our template, right? -To je přesně to, co *views* mají dělat: spojovat modely a šablony. Do našeho `post_list` *view* budeme potřebovat vzít modely, které chceme zobrazit a předat je šabloně. Takže v podstatě se ve *view* rozhodneme, co (model) bude zobrazeno v šabloně. +To je přesně to, co *views* mají dělat: spojovat modely a šablony. In our `post_list` *view* we will need to take the models we want to display and pass them to the template. In a *view* we decide what (model) will be displayed in a template. -OK, tak jak toho dosáhneme? +OK, so how will we achieve this? -Potřebujeme otevřít `blog/views.py`. Prozatím `post_list` *view* vypadá takhle: +We need to open our `blog/views.py` in our code editor. So far `post_list` *view* looks like this: + +{% filename %}blog/views.py{% endfilename %} ```python from django.shortcuts import render def post_list(request): return render(request, 'blog/post_list.html', {}) -``` +``` + +Vzpomínáš si, jak jsme mluvili o zahrnování kódu napsaného v různých souborech? Now is the moment when we have to include the model we have written in `models.py`. We will add the line `from .models import Post` like this: -Vzpomínáš si, jak jsme mluvily o zahrnování kódu napsaného v různých souborech? Teď je ten moment, kdy musíme zahrnout model, který jsme napsaly do `models.py`. Přidáme tuto řádku `from .models import Post`: +{% filename %}blog/views.py{% endfilename %} ```python from django.shortcuts import render from .models import Post -``` +``` -Tečka po `from` znamená *aktuální adresář* nebo *aktuální aplikace*. Protože se `views.py` a `models.py` nachází ve stejném adresáři, můžeme jednoduše použít `.` a jméno souboru (bez `.py`). Potom importujeme název modelu (`Post`). +The dot before `models` means *current directory* or *current application*. Both `views.py` and `models.py` are in the same directory. This means we can use `.` and the name of the file (without `.py`). Potom importujeme název modelu (`Post`). -Ale co dál? Abychom mohly vzít skutečné příspěvky z `Post`, potřebujeme něco, čemu říkáme `QuerySet`. +But what's next? To take actual blog posts from the `Post` model we need something called `QuerySet`. ## QuerySet -Už bys měla mít povědomí o tom, jak QuerySety fungují. To jsme probraly v kapitole [Django ORM (QuerySets)][1]. +You should already be familiar with how QuerySets work. We talked about them in [Django ORM (QuerySets) chapter](../django_orm/README.md). - [1]: ../django_orm/README.md +So now we want published blog posts sorted by `published_date`, right? We already did that in QuerySets chapter! -Takže teď nás zajímá seznam příspěvků, které jsou publikovány a setříděny podle `published_date`, že? To jsme už udělaly v kapitole na QuerySety! +{% filename %}blog/views.py{% endfilename %} ```python Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') -``` +``` -Teď tento kousek kódu vložíme do souboru `blog/views.py` do funkce `def post_list(request)`: +So, let's open the `blog/views.py` file in the code editor, and add this piece of code to the function `def post_list(request)` -- but don't forget to first add `from django.utils import timezone`: + +{% filename %}blog/views.py{% endfilename %} ```python from django.shortcuts import render @@ -48,18 +54,21 @@ from .models import Post def post_list(request): posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') return render(request, 'blog/post_list.html', {}) -``` +``` -Vezmi, prosím, na vědomí, že jsme vytvořily *proměnnou* pro QuerySet: `posts`. Považuj to za název našeho QuerySetu. Od teď k němu budeme referovat tímto názvem. +To display our QuerySet on our blog's post list, we have two things left to do: -Kód také používá funkci `timezone.now()`, takže potřebujeme přidat import pro `timezone`. +1. Pass the `posts` QuerySet to the template context, by changing the `render` function call. We'll do this now. +2. Modify the template to display the `posts` QuerySet. We'll cover this in a later chapter. -Poslední chybějící část je předat `posts` QuerySet do šablony (jak ho zobrazit si ukážeme v další kapitole). +Vezmi, prosím, na vědomí, že jsme vytvořili *proměnnou* pro QuerySet: `posts`. Považuj to za název našeho QuerySetu. Od teď k němu budeme referovat tímto názvem. -Ve funkci `render` už máme parametr `request` (všechno, co přijmeme od uživatele přes internet) a šablonu `'blog/post_list.html'`. Poslední parametr, který vypadá takhle: `{}`, je místo, kam můžeme přidat nějaké věci, u kterých chceme, aby je šablona mohla používat. Potřebujeme je pojmenovat (teď zůstaneme u `'posts'` :)). Mělo by to vypadat takhle: `{'posts': posts}`. Všimni si, prosím, že část před `:` je string: musíš ho obalit uvozovkami `''`. +In the `render` function we have one parameter `request` (everything we receive from the user via the Internet) and another giving the template file (`'blog/post_list.html'`). The last parameter, `{}`, is a place in which we can add some things for the template to use. Potřebujeme je pojmenovat (teď zůstaneme u `'posts'`). :) Mělo by to vypadat takhle: `{'posts': posts}`. Please note that the part before `:` is a string; you need to wrap it with quotes: `''`. A nakonec by náš `blog/views.py` soubor měl vypadat takhle: +{% filename %}blog/views.py{% endfilename %} + ```python from django.shortcuts import render from django.utils import timezone @@ -68,8 +77,8 @@ from .models import Post def post_list(request): posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') return render(request, 'blog/post_list.html', {'posts': posts}) -``` +``` A je to! Čas jít zpět do šablony a zobrazit tento QuerySet! -Pokud si chceš přečíst něco víc o QuerySetech v Django, měla by ses podívat sem: https://docs.djangoproject.com/en/1.8/ref/models/querysets/ +Want to read a little bit more about QuerySets in Django? You should look here: https://docs.djangoproject.com/en/3.2/ref/models/querysets/ \ No newline at end of file diff --git a/cs/extend_your_application/README.md b/cs/extend_your_application/README.md old mode 100755 new mode 100644 index 55c33681cff..f2d72a05730 --- a/cs/extend_your_application/README.md +++ b/cs/extend_your_application/README.md @@ -1,197 +1,226 @@ +{% set warning_icon = '' %} + # Rozšíření tvé aplikace -Dokončily jsme již všechny kroky potřebné k vytvoření našeho webu: víme, jak napsat model, url, view a šablonu. Víme také, jak udělat naše webové stránky pěkné. +We've already completed all the different steps necessary for the creation of our website: we know how to write a model, URL, view and template. We also know how to make our website pretty. -Čas na procvičení! +Time to practice! -První věc, kterou potřebujeme v našem blogu, je pochopitelně stránka, která zobrazí jeden příspěvek, že ano? +The first thing we need in our blog is, obviously, a page to display one post, right? -Již máme `Post` model, takže nebudeme muset přidávat nic k `models.py`. +We already have a `Post` model, so we don't need to add anything to `models.py`. ## Vytvoření šablony odkazu na post detail -Začneme s přidáním odkazu do `blog/templates/blog/post_list.html` souboru. Zatím by měl vypadat takto: +We will start with adding a link inside `blog/templates/blog/post_list.html` file. Open it in the code editor, and so far it should look like this: {% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html {% extends 'blog/base.html' %} {% block content %} {% for post in posts %} -
-
+
+
-

{{ post.title }}

+ +

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} {% endblock %} -``` +``` +{% raw %}We want to have a link from a post's title in the post list to the post's detail page. Let's change `

{{ post.title }}

` so that it links to the post's detail page:{% endraw %} -{% raw %}Chceme mít odkaz ze seznamu příspěvků na stránku detail příspěvku. Změňme `< h1 >< href ="">{{ post.title }}< /a>` tak, aby odkazoval na stránku detailu příspěvku:{% endraw %} +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} ```html -

{{ post.title }}

-``` +

{{ post.title }}

+``` -{% raw %}Čas k vysvětlení tajemného `{% url 'post_detail' pk=post.pk %}`. Jak asi tušíš, `{% %}` tato notace znamená, že používáme Django šablonovací značky. Tentokrát použijeme jednu, která pro nás vytvoří adresu URL.{% endraw %} +{% raw %}Time to explain the mysterious `{% url 'post_detail' pk=post.pk %}`. As you might suspect, the `{% %}` notation means that we are using Django template tags. This time we will use one that will create a URL for us!{% endraw %} -`blog.views.post_detail` je cesta k `post_detail` *view*, který chceme vytvořit. Poznámka: `blog` je název naší aplikace (adresář `blog`), `views` je jméno ze souboru, `views.py` a poslední kousek - `post_detail` - je název *view*. +The `post_detail` part means that Django will be expecting a URL in `blog/urls.py` with name=post_detail -Teď, když půjdeme na: http://127.0.0.1:8000/, dostaneme chybu (což očekáváme, protože nemáme adresu URL nebo *view* pro `post_detail`). View bude vypadat takto: +And how about `pk=post.pk`? `pk` is short for primary key, which is a unique identifier for each record in a database. Every Django model has a field which serves as its primary key, and whatever other name it has, it can also be referred to as "pk". Because we didn't specify a primary key in our `Post` model, Django creates one for us (by default, a field named "id" holding a number that increases for each record, i.e. 1, 2, 3) and adds it as a field to each of our posts. We access the primary key by writing `post.pk`, the same way we access other fields (`title`, `author`, etc.) in our `Post` object! -![NoReverseMatch error][1] +Now when we go to http://127.0.0.1:8000/ we will have an error (as expected, since we do not yet have a URL or a *view* for `post_detail`). It will look like this: - [1]: images/no_reverse_match2.png +![NoReverseMatch error](images/no_reverse_match2.png) ## Vytváříme adresu URL na detail příspěvku -Pojďme vytvořit adresu URL v `urls.py` pro náš `post_detail` *view*! +Let's create a URL in `urls.py` for our `post_detail` *view*! -Chceme, aby se detail našeho prvního příspěvku zobrazil na této **URL**: http://127.0.0.1:8000/post/1/ +We want our first post's detail to be displayed at this **URL**: http://127.0.0.1:8000/post/1/ -Pojďme vytvořit adresu URL v souboru `blog/urls.py` odkazující Django na *view* s názvem `post_detail`, který bude zobrazovat celý příspěvek blogu. Přidej řádek `url (r'^post/(?)P< pk>[0-9]+)/$', views.post_detail, name='post_detail'),` do souboru `blog/urls.py`. Tento soubor by měl vypadat takto: +Let's make a URL in the `blog/urls.py` file to point Django to a *view* named `post_detail`, that will show an entire blog post. Open the `blog/urls.py` file in the code editor, and add the line `path('post//', views.post_detail, name='post_detail'),` so that the file looks like this: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} ```python - from django.conf.urls import url - from . import views +from django.urls import path +from . import views urlpatterns = [ - url(r'^$', views.post_list, name='post_list'), - url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'), - ] -``` + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` -Tato část `^post/(?)P[0-9] +)/$` vypadá děsivě, ale bez obav - my ti to vysvětlíme: - začíná to `^` – "to znamená začátek řetězce" - `post/` znamená pouze to, že po začátku by adresa URL měla obsahovat slovo **post** a **/**. Zatím dobré. - `(?P[0-9]+)` - Tato část je složitější. Znamená to, že Django vezme vše, co zde bude umístěné, a přesune to do view do proměnné s názvem `pk`. `[0-9]` nám také říká, že to může být pouze číslo, ne písmeno (takže cokoliv mezi 0 a 9). `+` znamená, že je zde má být jedna nebo více číslic. Takže něco jako `http://127.0.0.1:8000/post //` není platné URL, ale `http://127.0.0.1:8000/post/1234567890/` je naprosto v pořádku! -`/` - pak potřebujeme **/** znovu znak / - `$` - znamená "konec" řetězce! +This part `post//` specifies a URL pattern – we will explain it for you: -Znamená to, že pokud zadáte `http://127.0.0.1:8000/post/5/` do prohlížeče, Django pochopí, že hledáte *view* s názvem `post_detail` a přenese informaci, že `pk` se rovná `5` do *view*. +- `post/` means that the URL should begin with the word **post** followed by a **/**. So far so good. +- `` – this part is trickier. It means that Django expects an integer value and will transfer it to a view as a variable called `pk`. +- `/` – then we need a **/** again before finishing the URL. -`pk` je zkratka pro `primární klíč`. Tento název se často používá v Django projektech. Ale můžeš si své proměnné pojmenovat jak chceš (nezapomeň: malá písmena a `_` namísto mezer!). Například namísto `(?. P [0-9]+)` máme proměnnou `post_id`, takže tento kousek pak vypadá takto: `(?P< post_id> [0-9]+)`. +That means if you enter `http://127.0.0.1:8000/post/5/` into your browser, Django will understand that you are looking for a *view* called `post_detail` and transfer the information that `pk` equals `5` to that *view*. -OK, přidaly jsme nový vzor adresy URL do `blog/urls.py`! Musíme obnovit stránku: http://127.0.0.1:8000/. Ještě další chyba, jak jsme čekaly! +OK, we've added a new URL pattern to `blog/urls.py`! Let's refresh the page: http://127.0.0.1:8000/ Boom! The server has stopped running again. Have a look at the console – as expected, there's yet another error! -![AttributeError][2] +{% filename %}{{ warning_icon }} command-line{% endfilename %} - [2]: images/attribute_error2.png + return _bootstrap._gcd_import(name[level:], package, level) + File "", line 1030, in _gcd_import + File "", line 1007, in _find_and_load + File "", line 986, in _find_and_load_unlocked + File "", line 680, in _load_unlocked + File "", line 850, in exec_module + File "", line 228, in _call_with_frames_removed + File "/Users/ola/djangogirls/blog/urls.py", line 6, in + path('post//', views.post_detail, name='post_detail'), + AttributeError: module 'blog.views' has no attribute 'post_detail' + -Pamatuješ si, jaký je další krok? Jistě: Přidat view! +Do you remember what the next step is? It's adding a view! ## Přidání view pro detail příspěvku -Tentokrát má náš *view* uveden dodatečný parametr `pk`. Náš *view* potřebuje tento parametr zachytit, že? Takže definujeme naši funkci jako `def post_detail (request, pk):`. Všimni si, že musíme použít přesně stejný název jako ten, který jsme určili v URL (`pk`). Vynechání této proměnné je nesprávné a bude mít za následek chybu! +This time our *view* is given an extra parameter, `pk`. Our *view* needs to catch it, right? So we will define our function as `def post_detail(request, pk):`. Note that this parameter must have the exact same name as the one we specified in `urls` (`pk`). Also note that omitting this variable is incorrect and will result in an error! -A teď chceme dostat jeden a pouze jeden příspěvek z blogu. K tomu můžeme použít querysets jako je tento: +Now, we want to get one and only one blog post. To do this, we can use querysets, like this: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} ```python Post.objects.get(pk=pk) -``` +``` -Ale tento kód má problém. Pokud neexistuje žádný `Post` s `primárním klíčem` (`pk`), dostaneme velice nepěknou chybu! +But this code has a problem. If there is no `Post` with the given `primary key` (`pk`) we will have a super ugly error! -![DoesNotExist error][3] +![DoesNotExist error](images/does_not_exist2.png) - [3]: images/does_not_exist2.png +We don't want that! But luckily Django comes with something that will handle that for us: `get_object_or_404`. In case there is no `Post` with the given `pk`, it will display much nicer page, the `Page Not Found 404` page. -A to my nechceme! Ale samozřejmě Django přichází s něčím, co nám to pomůže ošetřit za nás: `get_object_or_404`. V případě, že neexistuje žádný `Post` s daným `pk`, zobrazí se mnohem hezčí stránka (nazývaná `Page Not Found 404`). +![Page not found](images/404_2.png) -![Page not found][4] +The good news is that you can actually create your own `Page not found` page and make it as pretty as you want. But it's not super important right now, so we will skip it. - [4]: images/404_2.png +OK, time to add a *view* to our `views.py` file! -Dobrou zprávou je, že můžeš skutečně vytvořit vlastní stránku `Page Not Found 404` a udělat ji tak pěkně, jak jen chceš. Ale to teď není tak důležité, takže to přeskočíme. +In `blog/urls.py` we created a URL rule named `post_detail` that refers to a view called `views.post_detail`. This means that Django will be expecting a view function called `post_detail` inside `blog/views.py`. -Ok, čas k přidání *view* do našeho souboru `views.py`! +We should open `blog/views.py` in the code editor and add the following code near the other `from` lines: -Měla bys otevřít `blog/views.py` a přidat následující kód: +{% filename %}blog/views.py{% endfilename %} ```python from django.shortcuts import render, get_object_or_404 -``` +``` -Poblíž jiné řádky `from`. A na konec souboru přidáme náš *view*: +And at the end of the file we will add our *view*: + +{% filename %}blog/views.py{% endfilename %} ```python def post_detail(request, pk): - post = get_object_or_404(Post, pk=pk) - return render(request, 'blog/post_detail.html', {'post': post}) -``` - -Ano. Je na čase aktualizovat stránku: http://127.0.0.1:8000 / + post = get_object_or_404(Post, pk=pk) + return render(request, 'blog/post_detail.html', {'post': post}) +``` -![Post list view][5] +Yes. It is time to refresh the page: http://127.0.0.1:8000/ - [5]: images/post_list2.png +![Post list view](images/post_list2.png) -Fungovalo to! Ale co se stane, když klepneš na odkaz v názvu příspěvku? +It worked! But what happens when you click a link in blog post title? -![TemplateDoesNotExist error][6] +![TemplateDoesNotExist error](images/template_does_not_exist2.png) - [6]: images/template_does_not_exist2.png +Oh no! Another error! But we already know how to deal with it, right? We need to add a template! -Ach ne! Další chyba! Ale my už víme, jak s tím naložit správně. Musíme přidat šablonu. +## Create a template for the post details -## Vytvoření šablony pro detail příspěvku +We will create a file in `blog/templates/blog` called `post_detail.html`, and open it in the code editor. -Vytvoříme soubor `blog/templates/blog` s názvem `post_detail.html`. +Enter the following code: -Celý příkaz bude vypadat takto: +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} ```html {% extends 'blog/base.html' %} {% block content %} -
+
{% if post.published_date %} -
+
+ {% endif %} -

{{ post.title }}

+

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endblock %} -``` +``` -Opět rozšiřujeme `base.html`. V bloku `content` chceme zobrazit published_date příspěvku (pokud existuje), název a text. Ale měli bychom probrat některé důležité věci. +Once again we are extending `base.html`. In the `content` block we want to display a post's published_date (if it exists), title and text. But we should discuss some important things, right? -{% raw %} `{% if ... %} ... {% endif %}` je značka šablony, kterou můžeme použít, když chceme něco zkontrolovat (nezapomeň `, if... else...` v kapitole **Úvod do Pythonu**?). V tomto případě chceme zjistit, jestli `published_date` příspěvku není prázdný.{% endraw %} +{% raw %}`{% if ... %} ... {% endif %}` is a template tag we can use when we want to check something. (Remember `if ... else ...` from **Introduction to Python** chapter?) In this scenario we want to check if a post's `published_date` is not empty.{% endraw %} -OK, teď můžeme aktualizovat naše stránky a uvidíš, jestli `Page Not Found` je pryč. +OK, we can refresh our page and see if `TemplateDoesNotExist` is gone now. -![Post detail page][7] +![Post detail page](images/post_detail2.png) - [7]: images/post_detail2.png +Yay! It works! -Hurá! Funguje to! +# Deploy time! -## Ještě jedna věc: čas nasadit aplikaci! +It'd be good to see if your website still works on PythonAnywhere, right? Let's try deploying again. -Bylo by dobré zjistit, jestli naše webové stránky budou stále fungovat na PythonAnywhere. Zkusme je znovu nasadit. +{% filename %}command-line{% endfilename %} -``` -$ git status -$ git add --all . -$ git status -$ git commit -m "Added view and template for detailed blog post as well as CSS for the site." -$ git push -``` + $ git status + $ git add . + $ git status + $ git commit -m "Added view and template for detailed blog post as well as CSS for the site." + $ git push + -* Pak v [Bash konzoli PythonAnywhere][8]: +Then, in a [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/): - [8]: https://www.pythonanywhere.com/consoles/ +{% filename %}PythonAnywhere command-line{% endfilename %} -``` -$ cd my-first-blog -$ source myvenv/bin/activate -(myvenv)$ git pull -[...] -(myvenv)$ python manage.py collectstatic -[...] -``` + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Remember to substitute `` with your actual PythonAnywhere subdomain, without the angle-brackets.) + +## Updating the static files on the server + +Servers like PythonAnywhere like to treat "static files" (like CSS files) differently from Python files, because they can optimise for them to be loaded faster. As a result, whenever we make changes to our CSS files, we need to run an extra command on the server to tell it to update them. The command is called `collectstatic`. + +Start by activating your virtualenv if it's not still active from earlier (PythonAnywhere uses a command called `workon` to do this, it's just like the `source myenv/bin/activate` command you use on your own computer): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + -* Nakonec jdi na [kartu Web][9] a klikni na **Reload**. +The `manage.py collectstatic` command is a bit like `manage.py migrate`. We make some changes to our code, and then we tell Django to *apply* those changes, either to the server's collection of static files, or to the database. - [9]: https://www.pythonanywhere.com/web_app_setup/ +In any case, we're now ready to hop on over to the ["Web" page](https://www.pythonanywhere.com/web_app_setup/) (from the menu button in the upper right of the console) and hit **Reload**, and then look at the https://subdomain.pythonanywhere.com page to see the result. -A mělo by to být! Gratulujeme :) +And that should be it. Congrats! :) \ No newline at end of file diff --git a/cs/how_the_internet_works/README.md b/cs/how_the_internet_works/README.md old mode 100755 new mode 100644 index 3543d4bd56a..14d703d6b28 --- a/cs/how_the_internet_works/README.md +++ b/cs/how_the_internet_works/README.md @@ -1,53 +1,47 @@ # Jak funguje internet -> Tato kapitola je inspirována přednáškou "How the Internet works", kterou přednesla Jessica McKellar (http://web.mit.edu/jesstess/www/). +> For readers at home: this chapter is covered in the [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc) video. +> +> This chapter is inspired by the talk "How the Internet works" by Jessica McKellar (http://web.mit.edu/jesstess/www/). -Internet jistě používáš každý den. Ale víš ve skutečnosti co se stane, když do prohlížeče napíšeš adresu jako https://djangogirls.org a zmáčkneš `enter`? +We bet you use the Internet every day. But do you actually know what happens when you type an address like https://djangogirls.org into your browser and press `enter`? -První věc, které musíš rozumět, je, že webová stránka je jen pár souborů uložených na hard disku. Přesně jako tvé filmy, hudba nebo obrázky. Je tu ale něco, co dělá webové stránky unikátními: obsahují počítačový kód nazývaný HTML. +The first thing you need to understand is that a website consists of a bunch of files saved on a hard disk -- just like your movies, music, or pictures. However, there is one part that is unique for websites: they include computer code called HTML. -Pokud je ti programování zcela cizí, z počátku pro tebe může být těžké HTML pochopit, ale tvé webové prohlížeče (jako Chrome, Safari, Firefox atd.) jej milují. Webové prohlížeče jsou navrženy tak, aby tomuto kódu rozuměly, plnily instrukce a zobrazovaly soubory, ze kterých je tvá stránka vytvořena, přesně tak, jak chceš. +If you're not familiar with programming, it can be hard to grasp HTML at first, but your web browsers (like Chrome, Safari, Firefox, etc.) love it. Webové prohlížeče jsou navrženy tak, aby tomuto kódu rozuměly, následovaly instrukce a prezentovaly soubory, ze kterých je tvá stránka vytvořena, přesně tak jak chceš. -Jako každý soubor potřebujeme HTML soubory ukládat někam na hard disk. Pro internet používáme speciální, mocné počítače nazývané *servery*. Nemají obrazovku, myš ani klávesnici, protože jejich hlavním účelem je skladovat data a servírovat je. Proto je nazýváme *servery* -- protože ti *servírují* data. +Jako s každým souborem, potřebujeme HTML soubory ukládat někam na hard disk. Pro internet používáme speciální, mocné počítače nazývané *servery*. Nemají obrazovku, myš ani klávesnici, protože jejich hlavním účelem je skladovat data a servírovat je. That's why they're called *servers* – because they *serve* you data. -OK, ale chceš vědět jak internet vypadá, že ano? +OK, but you want to know how the Internet looks, right? Nakreslili jsme pro tebe obrázek! Vypadá takhle: -![Figure 1.1][1] +![Figure 1.1](images/internet_1.png) - [1]: images/internet_1.png +Vypadá to jako pěkný bordel, že? In fact it is a network of connected machines (the above-mentioned *servers*). Stovek tisíc strojů! Mnoho, mnoho kilometrů kabelů kolem celého světa! Můžeš navštívit stránku mapování podmořských kabelů (http://submarinecablemap.com/) abys viděla jak komplikovaná tato síť je. Tady je screenshot z té stránky: -Vypadá to jako pěkný bordel, že? Ve skutečnosti je to síť propojených strojů (výše zmíněných *serverů*). Stovek tisíc strojů! Mnoho, mnoho kilometrů kabelů kolem celého světa! Můžeš navštívit stránku mapování podmořských kabelů (http://submarinecablemap.com/), abys viděla, jak komplikovaná tato síť je. Tady je screenshot z té stránky: +![Figure 1.2](images/internet_3.png) -![Figure 1.2][2] - - [2]: images/internet_3.png - -Není to fascinující? Samozřejmě není možné mít dráty mezi každými dvěma stroji připojenými k internetu. Proto abychom získaly přístup ke konkrétnímu počítači (třeba k tomu, na kterém je uložena stránka https://djangogirls.org), musí být požadavek postupně předáván mezi mnoha různými stroji. +Není to fascinující? But it is not possible to have a wire between every machine connected to the Internet. So, to reach a machine (for example, the one where https://djangogirls.org is saved) we need to pass a request through many, many different machines. Vypadá to takhle: -![Figure 1.3][3] - - [3]: images/internet_2.png - -Představ si, že když napíšeš https://djangogirls.org, pošleš dopis, ve kterém stojí "Drahé Django Girls, chci si prohlédnout stránku djangogirls.org. Pošlete mi ji, prosím!" +![Figure 1.3](images/internet_2.png) -Tvůj dopis se pošle na tvou nejbližší poštu. Potom se pošle na jinou poštu, která je trochu blíže tvému adresátovi, potom na další a další, až se doručí do cílové destinace. Jediná unikátní věc je, že když pošleš hodně dopisů (*data paketů*) na stejné místo, můžou se tam dostat přes naprosto jiné pošty (*routery*). To závisí na tom, jak jsou na každé poště distribuovány. +Imagine that when you type https://djangogirls.org, you send a letter that says: "Dear Django Girls, I want to see the djangogirls.org website. Send it to me, please!" -![Figure 1.4][4] +Tvůj dopis se pošle na tobě nejbližší poštu. Potom se pošle na jinou poštu, která je trochu blíže tvému adresátovi, potom na další a další, až se doručí do cílové destinace. Jediná unikátní věc je, že když pošleš hodně dopisů (*data paketů*) na stejné místo, můžou se tam dostat přes naprosto jiné pošty (*routery*). To závisí na tom, jak jsou na každé poště distribuovány. - [4]: images/internet_4.png +![Figure 1.4](images/internet_4.png) -Ano, je to takhle jednoduché. Odešleš zprávu a očekáváš nějakou odpověď. Samozřejmě, místo papíru a pera používáš byty dat, ale princip je stejný! +That's how it works - you send messages and you expect some response. Instead of paper and pen you use bytes of data, but the idea is the same! -Místo adres s názvem ulice, města a poštovním kódem používáme IP adresy. Tvůj počítač nejprve požádá DNS server (Domain Name System) o překlad djangogirls.org do IP adresy. Funguje to trochu jako staromódní telefonní seznam, kde sis mohla vyhledat jméno člověka, na kterého potřebuješ kontakt, a najít jeho telefonní číslo a adresu. +Místo adres s názvem ulice, města a poštovním kódem používáme IP adresy. Tvůj počítač nejprve požádá DNS server (Domain Name System) o překlad djangogirls.org do IP adresy. It works a little bit like old-fashioned phonebooks where you can look up the name of the person you want to contact and find their phone number and address. -Když posíláš dopis, musí mít určité náležitosti, aby mohl být správně doručen: adresu, známku atp. Také používáš jazyk, kterému adresát rozumí, že? Stejné platí o *data paketech*, které posíláš, abys viděla webovou stránku. My používáme protokol zvaný HTTP (Hypertext Transfer Protocol). +When you send a letter, it needs to have certain features to be delivered correctly: an address, a stamp, etc. Také používáš jazyk kterému adresát rozumí, že ano? Stejné platí o *data paketech* které posíláš abys viděla webovou stránku. My používáme protokol zvaný HTTP (Hypertext Transfer Protocol). -Takže když máš webovou stránku, potřebuješ *server* (stroj), na kterém může žít. Když *server* přijme přicházející *požadavek/request* (v dopise), pošle zpátky tvoji webovou stránku (v dalším dopise). +Takže když máš webovou stránku, potřebuješ *server* (stroj) na kterém může žít. Když *server* přijme přicházející *požadavek/request* (v dopise), pošle zpátky tvoji webovou stránku (v dalším dopise). -Jelikož je toto Django tutoriál, budeš se ptát, co Django dělá. Když odesíláš odpověď, ne vždy chceš, aby se všem odeslala stejná věc. Je mnohem lepší, když jsou tvé dopisy personalizované, obzvláště pro osobu, která ti právě napsala, že? Django ti pomáhá s vytvářením těchto personalizovaných, zajímavých dopisů :). +Since this is a Django tutorial, you might ask what Django does. Když odesíláš odpověď, ne vždy chceš, aby se všem odeslala stejná věc. Je mnohem lepší, když jsou tvé dopisy personalizované, obzvláště pro osobu, která ti právě napsala, že? Django ti pomáhá s vytvářením těchto personalizovaných, zajímavých dopisů. :) -Dost řečí, je čas tvořit! +Enough talk – time to create! \ No newline at end of file diff --git a/cs/html/README.md b/cs/html/README.md old mode 100755 new mode 100644 index 929acd7ff9b..e87a7908033 --- a/cs/html/README.md +++ b/cs/html/README.md @@ -1,216 +1,227 @@ # Úvod do HTML -Co je to šablona? +Co je to šablona, se ami ptáš? -Šablona je soubor, který můžeme opakovaně použít pro prezentaci různých informací v konzistentním formátu - například bys mohla šablonu použít pro psaní dopisu, protože ačkoli každý dopis může obsahovat jinou zprávu a být adresován jiné osobě, všechny dopisy budou sdílet stejný formát. +A template is a file that we can re-use to present different information in a consistent format – for example, you could use a template to help you write a letter because although each letter might contain a different message and be addressed to a different person, they will share the same format. -Formát Django šablony je popsán v jazyku nazývaném HTML (Je to to stejné HTML, které jsme zmínili v první kapitole **Jak funguje internet**). +A Django template's format is described in a language called HTML (that's the HTML we mentioned in the first chapter, **How the Internet works**). ## Co je HTML? -HTML je jednoduchý kód, který je interpretován tvým webovým prohlížečem - jako je Chrome, Firefox nebo Safari - aby se uživateli zobrazila webová stránka. +HTML is a code that is interpreted by your web browser – such as Chrome, Firefox or Safari – to display a web page for the user. -HTML je zkratka od "HyperText Markup Language". **HyperText** znamená, že je to typ textu, který podporuje hypertextové odkazy mezi stránkami. **Markup** znamená, že jsme vzali dokument a označili ho kódem, abychom něčemu (v tomto případě prohlížeči) řekli, jak interpretovat stránku. HTML kód se vytváží pomocí **tagů**. Každý začíná znakem `<` a končí znakem `>`. Tyto tagy představují **elementy** značkovacího jazyka (Markup). +HTML je zkratka od "HyperText Markup Language". **HyperText** znamená, že je to typ textu, který podporuje hypertextové odkazy mezi stránkami. **Markup** znamená, že jsme vzali dokument a označili ho kódem, abychom něčemu (v tomto případě prohlížeči) řekli, jak interpretovat stránku. HTML kód se vytváží pomocí **tagů**. Každý začíná znakem `<` a končí znakem `>`. Tyto tagy representují **elementy** značkovacího jazyka (Markup. ## Tvá první šablona! -Vytvoření šablony znamená vytvoření souboru šablony. Všechno je soubor, že? Toho sis už asi všimla. +Vytvoření šablony znamená vytvoření souboru šablony. Všechno je soubor, dobře? Toho sis už asi všimla. Šablony jsou uloženy v adresáři `blog/templates/blog`. Takže nejdříve vytvoř adresář `templates` uvnitř tvé blog složky. Potom vytvoř další složku nazvanou `blog` uvnitř templates složky: -``` -blog -└───templates - └───blog -``` + blog + └───templates + └───blog + -(Mohlo by tě zajímat proč potřebujeme dva adresáře s názvem `blog` - jak později zjistíš, je to pouze užitečná konvence, která dělá život jednodušším, když věci začnou být komplikovanější.) +(You might wonder why we need two directories both called `blog` – as you will discover later, this is a useful naming convention that makes life easier when things start to get more complicated.) -A teď vytvoř soubor `post_list.html` uvnitř adresáře `blog/templates/blog`. Prozatím ho nech prázdný. +A teď vytvoř soubor `post_list.html` (pro teď ho nech prázdný) uvnitř adresáře `blog/templates/blog`. -Podívej se, jak tvá stránka vypadá teď: http://127.0.0.1:8000/ +Podívej se jak tvá stránka vypadá teď: http://127.0.0.1:8000/ -> Pokud máš stále chybu `TemplateDoesNotExists`, zkus restartovat server. Běž do příkazové řádky, zastav server zmáčknutím Ctrl+C (Control a C zároveň) a znovu ho rozběhni pomocí příkazu `python manage.py runserver`. +> Pokud se ti stále zobrazuje chyba`TemplateDoesNotExists`, zkus restartovat server. Go to the command line, stop the server by pressing Ctrl+C (Control and C keys together) and start it again by running a `python manage.py runserver` command. -![Figure 11.1][1] +![Figure 11.1](images/step1.png) - [1]: images/step1.png +No error anymore! Congratulations! :) However, your website isn't actually publishing anything except an empty page, because your template is empty too. We need to fix that. -Žádná chybová hláška! Gratulujeme :) Nicméně na tvé stránce se ještě nezveřejnilo nic kromě prázdné stránky, protože tvá šablona je také prázdná. To musíme napravit. +Open the new file in the code editor, and add the following: -Do souboru šablony (template) přidej následující: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html + -

Ahoj!

-

Funguje to!

+ +

Hi there!

+

It works!

+ -``` +``` -Tak jak tvá stránka vypadá teď? Klikni a zjisti to: http://127.0.0.1:8000/ +So how does your website look now? Visit it to find out: http://127.0.0.1:8000/ -![Figure 11.2][2] +![Figure 11.2](images/step3.png) - [2]: images/step3.png +It worked. Nice work there! :) -Fungovalo to! Pěkná práce :) +* The line `` is not a HTML tag. It only declares the document type. Here, it informs the browser that document type is [HTML5](https://html.spec.whatwg.org/#the-doctype). This is always the beginning of any HTML5 file. +* The most basic tag, ``, is always the beginning of html content and `` is always the end. As you can see, the whole content of the website goes between the beginning tag `` and closing tag `` +* `

` is a tag for paragraph elements; `

` closes each paragraph -* Nejzákladnější tag, ``, je vždy na začátku jakékoli stránky a `` na jejím konci. Jak vidíš, celý obsah stránky je mezi otevíracím tagem `` a zavíracím tagem `` -* `

` je tag pro element paragraf; `

` každý paragraf ukončuje +## Head and body -## Head & body +Každá HTML stránka je také rozdělena na dva elementy: **head** (hlavu) a **body** (tělo. -Každá HTML stránka je také rozdělena na dva elementy: **head** (hlavu) a **body** (tělo). +* **head** je element, který obsahuje informace o dokumentu, které se nezobrazují na webu. -* **head** je element, který obsahuje informace o dokumentu, které se nezobrazují na webu. +* **body** je element který obsahuje vše ostatní, co se zobrazuje jakou součást webové stránky. -* **body** je element, který obsahuje vše ostatní, co se zobrazuje jakou součást webové stránky. +`` používáme abychom prohlížeči sdělili konfiguraci stránky, `` abychom sdělili co na té stránce skutečně je. -`` používáme, abychom prohlížeči sdělili konfiguraci stránky, ``, abychom řekli, co na té stránce skutečně je. +For example, you can put a web page title element inside the ``, like this: -Například dovnitř `` můžeš dát element title (titulek), třeba takhle: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html + Ola's blog -

Ahoj!

-

Funguje to!

+

Hi there!

+

It works!

-``` +``` Ulož soubor a načti znovu svou stránku. -![Figure 11.3][3] - - [3]: images/step4.png +![Figure 11.3](images/step4.png) Všimla sis, že prohlížeč už ví, že "Ola's blog" je titulek stránky? Interpretoval `Ola's blog` a umístil text jako název záložky. -Pravděpodobně sis také všimla, že každý otevírací tag je doplněn *zavíracím tagem* se znakem `/`, a že elementy jsou *vnořené* (tzn. že nemůžeš zavřít daný tag, dokud nejsou zavřeny všechny tagy uvnitř). +Pravděpodobně jsi si také všimla, že každý otevírací tag je doplněn *zavíracím tagem* se znakem `/`, a že elementy jsou *vnořené* (tzn. že nemůžeš zavřít daný tag dokud nejsou zavřeny všechny tagy uvnitř). -Je to jako dávat věci do krabic. Máš jednu velkou krabici, ``; uvnitř je ``. A ta obsahuje další, menší krabice: `

`. +Je to jako dávat věci do krabic. Máš jednu velkou krabici, ``; uvnitř je ``, A ta obsahuje další, menší krabice: `

`. -Musíš dodržovat pravidlo *zavíracích* tagů a *vnořených* elementů - pokud ne, prohlížeč je nemusí správně interpretovat a tvá webová stránka se bude zobrazovat nesprávně. +You need to follow these rules of *closing* tags, and of *nesting* elements – if you don't, the browser may not be able to interpret them properly and your page will display incorrectly. ## Přizpůsob si šablonu Teď si můžeš užít trochu zábavy a pokusit se přizpůsobit si svou šablonu! Tady je pár užitečných tagů: -* `

Hlavní nadpis

` - Pro tvůj nejdůležitější nadpis -* `

Pod-nadpis

` pro nadpis na nižší úrovni -* `

Pod-pod-nadpis

` ... a tak dále, až k `
` -* `text` zvýrazňuje tvůj text -* `text` zvýrazňuje tvůj text silnějji -* `
` vkládá novou řádku (dovnitř br nemůžeš nic dát) -* `link` vytváří odkaz -* `
  • První položka seznamu
  • druhá položka seznamu
` vytváří seznam, zrovna jako tento! -* `
` definuje sekce stránky - -Zde je příklad celé šablony: +* `

A heading

` for your most important heading +* `

Pod-nadpis

` pro nadpis na nižší úrovni +* `

A sub-sub-heading

` …and so on, up to `
` +* `

A paragraph of text

` +* `text` zvýrazňuje tvůj text +* `text` hodně zvýrazňuje tvůj text +* `
` goes to another line (you can't put anything inside br and there's no closing tag) +* `link` vytváří odkaz +* `
  • První položka seznamu
  • second item
` vytváří seznam, zrovna jako tento! +* `
` definuje sekce stránky +* `` defines a set of navigation links +* `
` specifies independent, self-contained content +* `
` defines a section in a document +* `
` specifies a header for a document or section +* `
` specifies the main content of a document +* `` defines some content aside from the content it is placed in (like a sidebar) +* `
` defines a footer for a document or section +* `` defines a specific time (or datetime) + +Here's an example of a full template, copy and paste it into `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html + Django Girls blog - +
+

Django Girls Blog

+
-
-

published: 14.06.2014, 12:14

-

Můj první příspěvek

+
+ +

My first post

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
+ -
-

published: 14.06.2014, 12:14

-

Můj druhý příspěvek

-

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

-
+
+ +

My second post

+

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.

+
-``` - -Tady vytvoříme tři `div` sekce. +``` -* První `div` element obsahuje titulek našeho blogu - jeho nadpis a odkaz -* Další dva `div` elementy obsahují naše příspěvky s datem zveřejnění, na `h2` s titulkem příspěvku se dá kliknout a dva `p` (paragrafy) obsahují text, jeden datum a druhý samotný příspěvek. +We've created one `header` section and two `article` section here. -To nám dá následující výsledek: +* The `header` element contains the title of our blog – it's a heading and a link +* The two `article` elements contain our blog posts with a published date in a `time` element, a `h2` element with a post title that is clickable and a `p` (paragraph) element for text of our blog post. -![Figure 11.4][4] +To nám dá následující efekt: - [4]: images/step6.png +![Figure 11.4](images/step6.png) -Jupííí! Ale teď naše šablona zobrazuje jen **neměnné informace** - dříve jsme ovšem mluvily o tom, že šablony nám umožňují zobrazovat **různé** informace ve **stejném formátu**. +Jupííí! But so far, our template only ever displays exactly **the same information** – whereas earlier we were talking about templates as allowing us to display **different** information in the **same format**. -Co ve skutečnosti chceme, je zobrazit opravdové příspěvky přidané v našem Django administrátorském rozhraní - a to se chystáme udělat za chvilku. +What we really want to do is display real posts added in our Django admin – and that's where we're going next. ## Ještě jedna věc: nasaďme to! -Bylo by fajn vidět všecho tohle venku a živě na internetu, že ano? Pojďme udělat další PythonAnywhere nasazení (deploy): +Bylo by fajn vidět všecho tohle venku a živé na internetu, že jo? Pojďme udělat další PythonAnywhere nasazení (deploy): -### Commitni a hoď svůj kód na GitHub +### Commit, and push your code up to GitHub -Nejdříve se podívejme, které soubory se změnily od posledního nasazení (deploy). Zadej tyto příkazy lokálně (ne na PythonAnywhere): +Nejdříve se podívejme které soubory se změnily od posledního nasazení (deploy). Zadej tyto příkazy lokálně (ne na PythonAnywhere): -``` -$ git status -``` +{% filename %}command-line{% endfilename %} -Ujisti se, že jsi v `djangogirls` adresáři a řekni `gitu`, ať zahrne všechny nové změny v adresáři: + $ git status + -``` -$ git add --all . -``` +Make sure you're in the `djangogirls` directory and let's tell `git` to include all the changes in this directory: -> **Poznámka** `-A` (zkratka pro "all", tj. "vše") znamená, že `git` také rozpozná, jestli jsi smazala nějaké soubory (defaultně rozpoznává pouze nové a modifikované soubory). Taky si vzpomeň (ze 3. kapitoly), že `.` znamená aktuální adresář. +{% filename %}command-line{% endfilename %} -Než nahrajeme všechny soubory, zkontrolujme, co bude `git` nahrávat (všechny soubory, které bude `git` nahrávat, se zobrazí zeleně): + $ git add . + -``` -$ git status -``` +Než nahrajeme všechny soubory, zkontrolujme co bude `git` nahrávat (všechny soubory, které bude `git` nahrávat, se zobrazí zeleně): -Jsme skoro u konce, teď je čas uložit změny do historie. Vytvoříme "commit zprávu", kde popíšeme, co jsme změnily. Můžeš napsat, cokoli tě napadne, ale je užitečné napsat něco popisného, aby sis v budoucnosti mohla vzpomenout, cos udělala. +{% filename %}command-line{% endfilename %} -``` -$ git commit -m "Změněn HTML kód stránek." -``` + $ git status + -> **Poznámka** Ujisti se, že používáš dvojité uvozovky kolem zprávy. +Jsme skoro u konce, teď je čas uložit změny do historie. Vytvoříme "commit zprávu" kde popíšeme co jsme změnili. Můžeš napsat cokoli tě napadne, ale je užitečné napsat něco popisného, aby sis v budoucnosti mohla vzpomenout cos udělala. -Jakmile jsme s tímto hotovy, nahrajeme (push) naše změny na GitHub: +{% filename %}command-line{% endfilename %} -``` -git push -``` + $ git commit -m "Změněn HTML kód stránek." + + +> **Note** Make sure you use double quotes around the commit message. + +Once we've done that, we upload (push) our changes up to GitHub: + +{% filename %}command-line{% endfilename %} + + $ git push + ### Stáhni svůj nový kód na PythonAnywhere a načti webovou aplikaci -* Otevři [stránku s konzolí na PythonAnywhere][5] a jdi do své **Bash konzole** (nebo začni novou). Potom zadej: +* Otevři [stránku s konzolí na PythonAnywhere](https://www.pythonanywhere.com/consoles/) a jdi do své **Bash konzole** (nebo začni novou). Potom zadej: - [5]: https://www.pythonanywhere.com/consoles/ +{% filename %}PythonAnywhere command-line{% endfilename %} -``` -$ cd ~/my-first-blog -$ source myvenv/bin/activate -(myvenv)$ git pull -[...] -(myvenv)$ python manage.py collectstatic -[...] -``` + $ cd ~/.pythonanywhere.com + $ git pull + [...] + -A sleduj svůj kód, jak se stahuje. Pokud si chceš zkontrolovat, že se kód opravdu nahrál, můžeš skočit do záložky **Files** a podívat se na svůj kód na PythonAnywhere. +You'll need to substitute `` with your actual PythonAnywhere subdomain name, without the angle-brackets. Your subdomain name is normally your PythonAnywhere user name, but in some cases it might be a bit different (such as if your user name contains capital letters). So if this command doesn't work, use the `ls` (list files) command to find your actual subdomain/folder name, and then `cd` to there. -* A konečně, skoč na záložku [Web][6] a klikni na **Reload** (Znovu načíst). +Now watch your code get downloaded. If you want to check that it's arrived, you can hop over to the **"Files" page** and view your code on PythonAnywhere (you can reach other PythonAnywhere pages from the menu button on the console page). - [6]: https://www.pythonanywhere.com/web_app_setup/ +* Finally, hop on over to the ["Web" page](https://www.pythonanywhere.com/web_app_setup/) and hit **Reload** on your web app. -Tvůj update by měl běžet živě! Obnov svou stránku v prohlížeči. Měla bys vidět změny :) +Your update should be live! Go ahead and refresh your website in the browser. Changes should be visible. :) \ No newline at end of file diff --git a/cs/installation/README.md b/cs/installation/README.md old mode 100755 new mode 100644 index cdd38b9c502..0cee7612e07 --- a/cs/installation/README.md +++ b/cs/installation/README.md @@ -1,49 +1,68 @@ # Pokud děláš tutoriál doma -Pokud děláš tento tutorial doma, ne na jedné z [Django girls akcí](https://djangogirls.org/events/), můžeš zcela vynechat tuto kapitolu a jít rovnou na kapitolu [jak funguje Internet](../how_the_internet_works/README.md). +If you're doing the tutorial at home, not at one of the [Django Girls events](https://djangogirls.org/events/), you can completely skip this chapter now and go straight to the [How the Internet works](../how_the_internet_works/README.md) chapter. -To proto, že zde uvedené věci stejně vysvětlíme v průběhu celého kurzu a tato stránka pouze shromažďuje všechny pokyny pro instalaci na jednom místě. Jedna z Django Girls událostí "Instalační večer" se zaobírá instalováním všeho, co budeme potřebovat, což nás už nebude zdržovat během samotného worshopu. To je pro nás užitečná úspora času. +This is because we cover installing things as they are needed in the tutorial -- this is just an additional page that gathers all of the installation instructions in one place (which is useful for some workshop formats). You can choose to install everything that is on this page right now if you wish. But if you want to start learning things before installing a bunch of stuff on your computer, skip this chapter and we will explain the installation parts to you later on, as they are needed. -Pokud myslíš, že je pro tebe tato kapitola užitečná, můžeš si ji projít. Ale pokud se chceš začít učit ještě před instalací hromady věcí do tvého počítače, přeskoč tuto kapitolu a my ti vysvětlíme proces instalace později. +Good luck! -Hodně štěstí! +# If you're attending a workshop -# Instalace +If you are attending one of the [Django Girls events](https://djangogirls.org/events/): -Při workshopu budeme vytvářet blog, přičemž zde existuje několik nastavení, která se budou během kurzu hodit před tím, než začneš programovat. +* Your workshop may have an "installation party" before the main workshop. If you are at an installation party, this page is for you! Follow the instructions here to get everything you need for the workshop installed, with the help of the coaches if needed. Then at the main workshop, you'll be able to skip installation instructions you'll encounter in the main tutorial when you get to them. +* The organizers of your workshop may have asked you to try at home to install everything on your computer before the workshop starts. If you have been asked to do that, this page is for you! Follow the instructions here, as best you can. Then at the main workshop, when you get to an installation step in the main tutorial, if you were not able to get that piece installed you can get help from your coach. +* If your workshop does not have an installation party (or you couldn't attend), and if the organizers didn't ask you to try to install everything before you arrived, skip this page and go straight to the [How the Internet works](../how_the_internet_works/README.md) chapter. You'll be installing everything you need as you work through the tutorial. -# Instalace Pythonu +# Installation -{% include "/python_installation/instructions.md" %} +In this tutorial you will be building a blog. In order to do that, as you go through the tutorial you'll be instructed on how to install various software on your computer and set up some online accounts as they are needed. This page gathers all of the installation and sign-up instructions in one place (which is useful for some workshop formats). -# Nastavení virtualenv a instalace Django + {% include "/chromebook_setup/instructions.md" %} -{% include "/django_installation/instructions.md" %} + + +# Brief intro to the command line {#command-line} + +Many of the steps below reference the "console", "terminal", "command window", or "command line" -- these all mean the same thing: a window on your computer where you can enter commands. When you get to the main tutorial, you'll learn more about the command line. For now, the main thing you need to know is how to open a command window and what it looks like: {% include "/intro_to_command_line/open_instructions.md" %} + +# Install Python {#python} + +{% include "/python_installation/instructions.md" %} -# Instalace editoru kódu +# Install a code editor {#code-editor} {% include "/code_editor/instructions.md" %} -# Instalace Git +# Set up virtualenv and install Django {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Install Git {#git} {% include "/deploy/install_git.md" %} -# Vytvoření účtu na GitHub +# Create a GitHub account {#github-account} -Přejděte na [GitHub.com](https://www.github.com) a vytvořte si zdarma uživatelský účet. +Go to [GitHub.com](https://www.github.com) and sign up for a new, free user account. Be sure to remember your password (add it to your password manager, if you use one). -# Vytvoření účtu PythonAnywhere +# Create a PythonAnywhere account {#pythonanywhere-account} {% include "/deploy/signup_pythonanywhere.md" %} -# Začni číst +# Start reading + +Congratulations, you are all set up and ready to go! If you still have some time before the workshop, it would be useful to start reading a few of the beginning chapters: + +* [How the internet works](../how_the_internet_works/README.md) -Gratulujeme, právě sis zřídila všechny účty a nastavila vše, co potřebuješ! Pokud máš ještě nějaký čas před workshopem, bylo by užitečné začít číst některou z prvních kapitol: +* [Introduction to the command line](../intro_to_command_line/README.md) - * [Jak funguje internet](../how_the_internet_works/README.md) +* [Introduction to Python](../python_introduction/README.md) - * [Úvod do příkazového řádku](../intro_to_command_line/README.md) +* [What is Django?](../django/README.md) - * [Úvod do Pythonu](../python_introduction/README.md) +# Enjoy the workshop! - * [Co je Django?](../django/README.md) +When you begin the workshop, you'll be able to go straight to [Your first Django project!](../django_start_project/README.md) because you already covered the material in the earlier chapters. \ No newline at end of file diff --git a/cs/intro_to_command_line/README.md b/cs/intro_to_command_line/README.md old mode 100755 new mode 100644 index 2bdd6c0f5de..b5de37b6941 --- a/cs/intro_to_command_line/README.md +++ b/cs/intro_to_command_line/README.md @@ -1,305 +1,440 @@ # Úvod k příkazové řádce -Hm, to je vzrušující, že? Napíšeš svůj první řádek kódu za pouhých pár minut :) +> For readers at home: this chapter is covered in the [Your new friend: Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8) video. + +It's exciting, right?! You'll write your first line of code in just a few minutes! :) **Dovol nám, abychom ti představili tvého prvního nového přítele: příkazovou řádku! ** Následující kroky ti ukážou, jak používat černé okno, které všichni počítačoví odborníci používají. Může to na první pohled vypadat trochu děsivě, ale opravdu je to jen okno, které čeká na tvé příkazy. -> **Poznáma** Ber, prosím, na vědomí, že v tomto tutoriálu používáme termíny 'adresář' a 'složka', ale je to jedna a ta samá věc. +> **Note** Please note that throughout this book we use the terms 'directory' and 'folder' interchangeably but they are one and the same thing. ## Co je příkazová řádka? -Okno, které se obvykle nazývá **příkazová řádka** nebo **rozhraní příkazové řádky**, je textová aplikace pro zobrazování, zpracovávání a manipulaci se soubory na tvém počítači. Docela jako Windows Explorer nebo Finder na Mac, ale bez grafického rozhraní. Další jména pro příkazovou řádku jsou: *cmd*, *prompt*, *command line*, *konzole* nebo *terminál*. +Okno, které se obvykle nazývá **příkazová řádka** nebo **rozhraní příkazové řádky**, je textová aplikace pro zobrazování, zpracovávání a manipulaci se soubory na tvém počítači. It's much like Windows Explorer or Finder on the Mac, but without the graphical interface. Další jména pro příkazovou řádku jsou: *cmd*, *prompt*, *command line*, *konzole* nebo *terminál*. ## Otevři rozhraní příkazové řádky -Chceš-li začít experimentovat, je třeba nejprve otevřít naše rozhraní příkazové řádky. +To start some experiments we need to open our command-line interface first. -### Windows +{% include "/intro_to_command_line/open_instructions.md" %} -Jdi na menu Start → Všechny programy → Příslušenství → Příkazová řádka. +## Příkazová řádka -### Mac OS X +You now should see a white or black window that is waiting for your commands. -Aplikace → Nástroje → Terminál. + -### Linux +If you're on Mac or Linux, you probably see a `$`, like this: -Pravděpodobně ji nalezneš pod Aplikace → Příslušenství → Terminál, ale závisí to na tvém systému. Pokud to tam není, prostě to vygoogli :) +{% filename %}command-line{% endfilename %} -## Příkazová řádka + $ + + + + + + +On Windows, you probably see a `>`, like this: -Nyní bys měla vidět bílé nebo černé okno, které čeká na tvé příkazy. +{% filename %}command-line{% endfilename %} -Pokud jsi na Mac nebo na Linuxu, pravděpodobně uvidíš výzvu začínající tímto znakem `$`, právě takhle: + > + -``` -$ -``` +Take a look at the Linux section just above now -- you'll see something more like that when you get to PythonAnywhere later in the tutorial. -V systému Windows je to tento znak `>`: + -``` -> -``` +Each command will be prepended by a `$` or `>` and one space, but you should not type it. Your computer will do it for you. :) -Každý příkaz budeš psát za tento znak a jednu mezeru, ale není nutné to zadávat. Tvůj počítač to udělá za tebe :) +> Just a small note: in your case there may be something like `C:\Users\ola>` or `Olas-MacBook-Air:~ ola$` before the prompt sign, and this is 100% OK. -> Jen malá Poznámka: někteří mohou vidět něco jako `C:\Users\ola >` nebo `Olas-MacBook-Air: ~ ola$` před znakem $. To je naprosto v pořádku. V tomto kurzu se jen snažíme vše zjednodušit na minimum. +The part up to and including the `$` or the `>` is called the *command line prompt*, or *prompt* for short. It prompts you to input something there. + +In the tutorial, when we want you to type in a command, we will include the `$` or `>`, and occasionally more to the left. Ignore the left part and only type in the command, which starts after the prompt. ## Tvůj první příkaz (hurá!) -Pojďme začít s něčím jednoduchým. Zadej tento příkaz: +Let's start by typing this command: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + -``` -$ whoami -``` + -nebo +{% filename %}command-line{% endfilename %} -``` -> whoami -``` + > whoami + -A zmáčkni `enter`. Tohle je výsledek: + -``` -$ whoami -olasitarska -``` +And then hit `enter`. This is our result: -Jak vidíš, počítač právě vypsal tvé uživatelské jméno. Pěkný, co?:) +{% filename %}command-line{% endfilename %} -> Zkus každý příkaz zadat, nekopíruj ho prostým vyjmout/vložit. Zapamatuješ si tak více! + $ whoami + olasitarska + + +As you can see, the computer has just printed your username. Neat, huh? :) + +> Try to type each command; do not copy-paste. You'll remember more this way! ## Základy -Každý operační systém má mírně odlišnou sadu příkazů na příkazové řádce, takže se ujisti, že sleduješ pokyny pro tvůj operační systém. Zkusme to, ano? +Each operating system has a slightly different set of commands for the command line, so make sure to follow instructions for your operating system. Let's try this, shall we? ### Aktuální složka -Bylo by hezké vědět, kde právě jsme, ne? Podívejme se. Zadej následující příkaz a stiskni `enter`: +It'd be nice to know where are we now, right? Let's see. Type this command and hit `enter`: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + -``` -$ pwd -/Users/olasitarska -``` +> Note: 'pwd' stands for 'print working directory'. -Pokud jsi v systému Windows: + -``` -> cd -C:\Users\olasitarska -``` + -Pravděpodobně se ti zobrazí něco podobného. Jakmile otevřeš příkazovou řádku, obvykle začínáš ve svém domovském adresáři. +{% filename %}command-line{% endfilename %} -> Poznámka: 'pwd' je zkratka pro "print working directory / zobrazení cesty pro pracovní adresář". + > cd + C:\Users\olasitarska + + +> Note: 'cd' stands for 'change directory'. With PowerShell you can use pwd just like on Linux or Mac OS X. + + + +You'll probably see something similar on your machine. Once you open the command line you usually start at your user's home directory. * * * -### Seznam souborů a adresářů +### Learn more about a command + +Many commands you can type at the command prompt have built-in help that you can display and read! For example, to learn more about the current directory command: + + -Tak co je v něm? Bylo by fajn zjistit, co je v našem adresáři. Podívejme se: +OS X and Linux have a `man` command, which gives you help on commands. Try `man pwd` and see what it says, or put `man` before other commands to see their help. The output of `man` is normally paged. Use the space bar to move to the next page, and `q` to quit looking at the help. -``` -$ ls -Aplikace -Desktop -Stažené soubory -Hudba... -``` + -Windows: + -``` -> dir -Directory of C:\Users\olasitarska -05/08/2014 07:28 PM Applications -05/08/2014 07:28 PM Desktop -05/08/2014 07:28 PM Downloads -05/08/2014 07:28 PM Music -... -``` +Adding a `/?` suffix to most commands will print the help page. You may need to scroll your command window up to see it all. Try `cd /?`. + + + +### List files and directories + +So what's in it? It'd be cool to find out. Let's see: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Aplikace + Desktop + Stažené soubory + Hudba... + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + Directory of C:\Users\olasitarska + 05/08/2020 07:28 PM Applications + 05/08/2020 07:28 PM Desktop + 05/08/2020 07:28 PM Downloads + 05/08/2020 07:28 PM Music + ... + + +> Note: In PowerShell you can also use 'ls' like on Linux and Mac OS X. * * * -### Změna aktuálního adresáře +### Change current directory + +Now, let's go to our Desktop directory: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Note that the directory name "Desktop" might be translated to the language of your Linux account. If that's the case, you'll need to replace `Desktop` with the translated name; for example, `Schreibtisch` for German. + + -Teď pojďme do adresáře plochy: + -``` -$ cd Desktop -``` +{% filename %}command-line{% endfilename %} -Windows: + > cd Desktop + -``` -> cd Desktop -``` + -Zkontroluj, zda-li se adresář skutečně změnil: +Check if it's really changed: -``` -$ pwd -/Users/olasitarska/Desktop -``` + -Windows: +{% filename %}command-line{% endfilename %} -``` -> cd -C:\Users\olasitarska\Desktop -``` + $ pwd + /Users/olasitarska/Desktop + -A je to! + -> PRO tip: Pokud zadáš `cd D` a poté stiskneš klávesu `tab` na klávesnici, příkazová řádka automaticky předvyplní zbytek názvu, tak můžeš adresáře procházet rychleji. Pokud existuje více než jedna složka od "D", musíš tlačítko `tab` zmáčknout dvakrát a zobrazí se ti seznam dostupných možností. + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Here it is! + +> PRO tip: if you type `cd D` and then hit `tab` on your keyboard, the command line will automatically fill in the rest of the name so you can navigate faster. If there is more than one folder starting with "D", hit the `tab` key twice to get a list of options. * * * -### Jak vytvořit složku +### Create directory + +How about creating a practice directory on your desktop? You can do it this way: -Co si vytvořit pokusnou složku na ploše? Můžeš to udělat tímto způsobem: + -``` -$ mkdir pokus -``` +{% filename %}command-line{% endfilename %} -Windows: + $ mkdir practice + -``` -> mkdir pokus -``` + -Tento malý příkaz vytvoří složku s názvem `pokus` na ploše. Zda se na ploše složka vytvořila můžeš zkontrolovat pouhým pohledem na pracovní plochu nebo spuštěním příkazu `ls` nebo `dir`! Zkus to :) + -> PRO tip: Pokud nechceš znovu a znovu zadávat stejné příkazy, zkus stisknutím `šipka nahoru` a `šipka dolů` na klávesnici přepínat mezi nedávno použitými příkazy. +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +This little command will create a folder with the name `practice` on your desktop. You can check if it's there by looking on your Desktop or by running a `ls` or `dir` command! Try it. :) + +> PRO tip: If you don't want to type the same commands over and over, try pressing the `up arrow` and `down arrow` on your keyboard to cycle through recently used commands. * * * -### Cvičení! +### Exercise! -Malá výzva: v nově vytvořeném adresáři `pokus` vytvoř adresář s názvem `test`. Použij příkazy `cd` a `mkdir`. +A small challenge for you: in your newly created `practice` directory, create a directory called `test`. (Use the `cd` and `mkdir` commands.) #### Řešení: -``` -$ cd pokus -$ mkdir test -$ ls -test -``` + + +{% filename %}command-line{% endfilename %} -Windows: + $ cd practice + $ mkdir test + $ ls + test + -``` -> cd pokus -> mkdir test -> dir -05/08/2014 07:28 PM test -``` + -Gratulujeme! :) + + +{% filename %}command-line{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2020 07:28 PM test + + + + +Congrats! :) * * * -### Jak odstranit složku +### Clean up -Nechceme si nechat nepořádek v počítači, takže musíme odstranit vše, co jsme až do tohoto okamžiku dělaly. +We don't want to leave a mess, so let's remove everything we did until that point. -Za prvé se potřebujeme dostat zpátky na plochu: +First, we need to get back to Desktop: -``` -$ cd .. -``` + -Windows: +{% filename %}command-line{% endfilename %} -``` -> cd .. -``` + $ cd .. + -Použití `..` s příkazem `cd` změní tvůj aktuální adresář na rodičovský adresář (adresář, který obsahuje tvůj aktuální adresář). + -Zkontroluj, kde se nacházíš: + -``` -$ pwd -/Users/olasitarska/Desktop -``` +{% filename %}command-line{% endfilename %} -Windows: + > cd .. + -``` -> cd -C:\Users\olasitarska\Desktop -``` + -Teď je čas vymazat adresář `pokus`: +Using `..` with the `cd` command will change your current directory to the parent directory (that is, the directory that contains your current directory). -> **Pozor**: odstraňování souborů pomocí `del`, `rmdir` nebo `rm` je nevratné, což znamená, *že odstraněné soubory budou navždy pryč*! Takže buď s tímto příkazem velmi opatrná. +Check where you are: -``` -$ rm -r pokus -``` + -Windows: +{% filename %}command-line{% endfilename %} -``` -> rmdir /S pokus -Are you sure ? Y -``` + $ pwd + /Users/olasitarska/Desktop + -Hotovo! Vše je skutečně odstraněno. Pojďme to zkontrolovat: + -``` -$ ls -``` + -Windows: +{% filename %}command-line{% endfilename %} -``` -> dir -``` + > cd + C:\Users\olasitarska\Desktop + -### Zavření příkazové řádky + -To je pro tuto chvíli vše! Bezpečně můžeš nyní zavřít příkazovou řádku. Uděláme to hackerským stylem, ano? :) +Now time to delete the `practice` directory: -``` -$ exit -``` +> **Attention**: Deleting files using `del`, `rmdir` or `rm` is irrecoverable, meaning *the deleted files will be gone forever*! So be very careful with this command. -Windows: + -``` -> exit -``` +{% filename %}command-line{% endfilename %} -Suprový, co? :) + $ rm -r practice + -## Shrnutí + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +Done! To be sure it's actually deleted, let's check it: -Zde je přehled některých užitečných příkazů: + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Exit + +That's it for now! You can safely close the command line now. Let's do it the hacker way, alright? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Cool, huh? :) + +## Shrnutí -| Příkaz (Windows) | Příkaz (Mac OS / Linux) | Popis | Příklad | -| ---------------- | ----------------------- | ------------------------ | ------------------------------------------------- | -| exit | exit | Zavřít okno | **exit** | -| cd | cd | změnit adresář | **cd test** | -| dir | ls | seznam adresářů/souborů | **dir** | -| copy | cp | kopírovat soubor | **copy c:\test\test.txt c:\windows\test.txt** | -| move | mv | přesunout soubor | **move c:\test\test.txt c:\windows\test.txt** | -| mkdir | mkdir | vytvořit nový adresář | **mkdir testdirectory** | -| del | rm | odstranit adresář/soubor | **del c:\test\test.txt** | +Here is a summary of some useful commands: -Toto je jen velmi malá část příkazů, které lze spustit v příkazovém řádku, ale pro dnešek to bude stačit. +| Příkaz (Windows) | Příkaz (Mac OS / Linux) | Popis | Příklad | +| ----------------------- | ----------------------- | -------------------------- | -------------------------------------------------- | +| zavření příkazové řádky | zavření příkazové řádky | Zavřít okno | **zavření příkazové řádky** | +| cd | cd | změnit adresář | **cd test** | +| cd | pwd | show the current directory | **cd** (Windows) or **pwd** (Mac OS / Linux) | +| dir | ls | seznam adresářů/souborů | **dir** | +| copy | cp | kopírovat soubor | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | přesunout soubor | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | vytvořit nový adresář | **mkdir testdirectory** | +| rmdir (or del) | rm | delete a file | **del c:\test\test.txt** | +| rmdir /S | rm -r | delete a directory | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | get help for a command | **cd /?** (Windows) or **man cd** (Mac OS / Linux) | -Pokud jsi zvědavá, na [ss64.com][1] je úplný přehled příkazů pro všechny operační systémy. +These are just a very few of the commands you can run in your command line, but you're not going to use anything more than that today. - [1]: http://ss64.com +If you're curious, [ss64.com](http://ss64.com) contains a complete reference of commands for all operating systems. -## Připravena? +## Připraveno? -Pojďme se ponořit do Pythonu! +Let's dive into Python! \ No newline at end of file diff --git a/cs/intro_to_command_line/open_instructions.md b/cs/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..c4d21aa67e4 --- /dev/null +++ b/cs/intro_to_command_line/open_instructions.md @@ -0,0 +1,28 @@ + + +Depending on your version of Windows and your keyboard, one of the following should open a command window (you may have to experiment a bit, but you don't have to try all of these suggestions): + +- Go to the Start menu or screen, and enter "Command Prompt" in the search field. +- Go to Start menu → Windows System → Command Prompt. +- Go to Start menu → All Programs → Accessories → Command Prompt. +- Go to the Start screen, hover your mouse in the lower-left corner of the screen, and click the down arrow that appears (on a touch screen, instead flick up from the bottom of the screen). The Apps page should open. Click on Command Prompt in the Windows System section. +- Hold the special Windows key on your keyboard and press the "X" key. Choose "Command Prompt" from the pop-up menu. +- Hold the Windows key and press the "R" key to get a "Run" window. Type "cmd" in the box, and click the OK key. + +![Type "cmd" in the "Run" window](../python_installation/images/windows-plus-r.png) + +Later in this tutorial, you will need to have two command windows open at the same time. However, on some versions of Windows, if you already have one command window open and you try to open a second one using the same method, it will instead point you to the command window you already have open. Try it now on your computer and see what happens! If you only get one command window, try one of the other methods in the list above. At least one of them should result in a new command window being opened. + + + + + +Go to Applications → Utilities → Terminal. + + + + + +It's probably under Applications → Accessories → Terminal, or Applications → System → Terminal, but that may depend on your system. If it's not there, you can try to Google it. :) + + \ No newline at end of file diff --git a/cs/python_installation/README.md b/cs/python_installation/README.md old mode 100755 new mode 100644 index 42f150debad..84715c1173f --- a/cs/python_installation/README.md +++ b/cs/python_installation/README.md @@ -2,12 +2,14 @@ Konečně jsme u něj! -Nejdříve si pojďme říci, co Python je. Python je velmi populární programovací jazyk, který lze použít k vytváření webových stránek, her, vědeckého software, grafického software a mnoho, mnoho dalšího. +Nejdříve si pojďme říci co Python je. Python je velmi populární programovací jazyk, který lze použít k vytváření webových stránek, her, vědeckého software, grafického software a mnoho, mnoho dalšího. -Python vznikl na konci 80. let a jeho hlavním cílem je být pro lidské bytosti čitelný (nejen pro stroje!). Právě proto vypadá mnohem jednodušeji než jiné programovací jazyky. Díky tomu je snadné se ho naučit, ale neboj, Python je opravdu mocný! +Python vznikl na konci 80. let a jeho hlavním cílem je být čitelný lidským bytostem (nejen strojům!). This is why it looks simpler than other programming languages, but don't worry – Python is also really powerful! # Instalace Pythonu -> **Poznámka:** Pokud jsi již prošla přes kroky instalace, není třeba se k tomu znovu vracet - můžeš přeskočit přímo vpřed na další kapitolu! +> **Note** If you're using a Chromebook, skip this chapter and make sure you follow the [Chromebook Setup](../chromebook_setup/README.md) instructions. +> +> **Note** If you already worked through the [installation steps](../installation/README.md), there's no need to do this again – you can skip straight ahead to the next chapter! -{% include "/python_installation/instructions.md" %} +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/cs/python_installation/instructions.md b/cs/python_installation/instructions.md old mode 100755 new mode 100644 index 8d0e2d0f37b..592aafe0b5d --- a/cs/python_installation/instructions.md +++ b/cs/python_installation/instructions.md @@ -1,64 +1,117 @@ -> Tato podkapitola čerpá z Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) +> For readers at home: this chapter is covered in the [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA) video. +> +> This section is based on a tutorial by Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) -Django je napsán v Pythonu. Na to, abys mohla cokoliv dělat v Djangu, potřebuješ Python. Začněme s instalací! Chceme, aby sis nainstalovala verzi Python 3.4, takže pokud máš starší verzi, musíš ji upgradovat. +Django is written in Python. We need Python to do anything in Django. Let's start by installing it! We want you to install the latest version of Python 3, so if you have any earlier version, you will need to upgrade it. If you already have version {{ book.py_min_version }} or higher you should be fine. -### Windows +Please install normal Python as follows, even when you have Anaconda installed on your computer. -Python pro Windows můžeš stáhnout z webové stránky https://www.python.org/downloads/release/python-343/. Po stažení **msi** souboru, bys jej měla spustit (poklepáním na něj) a postupovat podle uvedených pokynů. Je důležité si zapamatovat cestu (k adresáři), kam jsi Python nainstalovala. Později jej budeš potřebovat! + -Pozor na jednu věc: na druhé obrazovce průvodce instalací, označené "Přizpůsobit", se ujisti, že máš zvolenou možnost "Add python.exe to the Path": +First check whether your computer is running a 32-bit version or a 64-bit version of Windows, on the "System type" line of the System Info page. To reach this page, try one of these methods: -![Nezapomeň přidat Python do cesty](../python_installation/images/add_python_to_windows_path.png) +* Press the Windows key and Pause/Break key at the same time +* Open your Control Panel from the Windows menu, then navigate to System & Security, then System +* Press the Windows button, then navigate to Settings > System > About +* Search the Windows Start menu for "System Information". To do that, click the Start button or press the Windows key, then begin to type `System Information`. It will start making suggestions as soon as you type. You can select the entry once it shows up. -### Linux +You can download Python for Windows from the website https://www.python.org/downloads/windows/. Click on the "Latest Python 3 Release - Python x.x.x" link. If your computer is running a **64-bit** version of Windows, download the **Windows x86-64 executable installer**. Otherwise, download the **Windows x86 executable installer**. After downloading the installer, you should run it (double-click on it) and follow the instructions there. -Je velmi pravděpodobné, že již máš Python nainstalován v základní instalaci. Chceš-li zkontrolovat, zda jej máš nainstalován (a o jakou verzi se jedná), otevři konzoli a zadej následující příkaz: +One thing to watch out for: During the installation, you will notice a window marked "Setup". Make sure you tick the "Add Python {{ book.py_version }} to PATH" or 'Add Python to your environment variables" checkbox and click on "Install Now", as shown here (it may look a bit different if you are installing a different version): -``` -$ python3 --version -Python 3.4.2 -``` +![Don't forget to add Python to the Path](../python_installation/images/python-installation-options.png) -Pokud Python nemáš nainstalovaný nebo pokud chceš nainstalovat jinou verzi, můžeš postupovat takto: +When the installation completes, you may see a dialog box with a link you can follow to learn more about Python or about the version you installed. Close or cancel that dialog -- you'll be learning more in this tutorial! -#### Debian nebo Ubuntu +Note: If you are using an older version of Windows (7, Vista, or any older version) and the Python {{ book.py_version }} installer fails with an error, then install all Windows Updates and try to install Python again. If you still have the error, try installing Python version {{ book.py_min_release }} from [Python.org](https://www.python.org/downloads/windows/). -Použij tento příkaz v konzoli: +> Django {{ book.django_version }} needs Python {{ book.py_min_version }} or greater, which does not support Windows XP or earlier versions. -``` -sudo apt install python3.4 -``` + -#### Fedora + -Použij tento příkaz v konzoli: +> **Note** Before you install Python on OS X, you should ensure your Mac settings allow installing packages that aren't from the App Store. Go to System Preferences (it's in the Applications folder), click "Security & Privacy," and then the "General" tab. If your "Allow apps downloaded from:" is set to "Mac App Store," change it to "Mac App Store and identified developers." -``` -$ sudo dnf nainstalovat python3.4 -``` +You need to go to the website https://www.python.org/downloads/mac-osx/ and download the latest Python installer: -#### openSUSE +* Download the *Mac OS X 64-bit/32-bit installer* file, +* Double click *python-{{ book.py_release }}-macosx10.9.pkg* to run the installer. -Použij tento příkaz v konzoli: + -``` -$ sudo zypper install python3 -``` + -### OS X +It is very likely that you already have Python installed out of the box. To check if you have it installed (and which version it is), open a console and type the following command: -Musíš jít na web https://www.python.org/downloads/release/python-342/ a stáhnout si instalátor Python: +{% filename %}command-line{% endfilename %} - * Stáhni *Mac OS X 64-bit/32-bit installer* soubor, - * Poklepej na *python-3.4.3-macosx10.6.pkg*, chceš-li spustit instalační program. + $ python3 --version + Python {{ book.py_release }} + -Ověř, zda instalace proběhla úspěšně, otevři aplikaci *Terminal* a spusť příkaz `python3`: +If you have a different version of Python installed, at least {{ book.py_min_version }} (e.g. {{ book.py_min_release }}), then you don't have to upgrade. If you don't have Python installed, or if you want a different version, first check what Linux distribution you are using with the following command: -``` -$ python3 – version -Python 3.4.2 -``` +{% filename %}command-line{% endfilename %} + + $ grep '^NAME=' /etc/os-release + + +Afterwards, depending on the result, follow one of the following installation guides below this section. + + + + + +Type this command into your console: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Use this command in your console: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +If you're on older Fedora versions you might get an error that the command `dnf` is not found. In that case, you need to use `yum` instead. + + + + + +Use this command in your console: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Verify the installation was successful by opening a command prompt and running the `python3` command: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +The version shown may be different from {{ book.py_release }} -- it should match the version you installed. + +**NOTE:** If you're on Windows and you get an error message that `python3` wasn't found, try using `python` (without the `3`) and check if it still might be a version of Python that is {{ book.py_min_version }} or higher. If that doesn't work either, you may open a new command prompt and try again; this happens if you use a command prompt left open from before the Python installation. * * * -Pokud máš nějaké pochybnosti nebo se něco při instalaci nepovedlo a ty nemáš ponětí, co dělat dál - zeptej se svého kouče! Někdy se věci nevyvíjejí hladce a je lepší požádat o pomoc někoho s více zkušenostmi. +If you have any doubts, or if something went wrong and you have no idea what to do next, please ask your coach! Sometimes things don't go smoothly and it's better to ask for help from someone with more experience. \ No newline at end of file diff --git a/cs/python_introduction/README.md b/cs/python_introduction/README.md old mode 100755 new mode 100644 index 6a197344f9d..034ca300394 --- a/cs/python_introduction/README.md +++ b/cs/python_introduction/README.md @@ -1,202 +1,236 @@ +{% set warning_icon = '' %} + # Úvod do Pythonu -> Část této kapitoly je založena na kurzu Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> Part of this chapter is based on tutorials by Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). -Pojďme napsat nějaký kód! +Let's write some code! -## Interaktivní režim Pythonu +{% include "/python_introduction/prompt.md" %} -Chceš-li si začít hrát s Pythonem, musíme otevřít *příkazový řádek* v počítači. Již bys měla vědět jak na to – naučily jsme se to v kapitole [Úvod do příkazového řádku][1]. +## Your first Python command! - [1]: ../intro_to_command_line/README.md +After running the Python command, the prompt changed to `>>>`. For us this means that for now we may only use commands in the Python language. You don't have to type in `>>>` – Python will do that for you. -Jakmile budeš připravena, postupuj podle níže uvedených pokynů. +If you want to exit the Python console at any point, type `exit()` or use the shortcut `Ctrl + Z` for Windows and `Ctrl + D` for Mac/Linux. Then you won't see `>>>` any longer. -Chceme otevřít Python konzoli, takže napiš `python` na Windows nebo `python3` na Mac a OS/Linuxu a zmáčkni `enter`. +For now, we don't want to exit the Python console. We want to learn more about it. Let's start by typing some math, like `2 + 3` and hitting `enter`. -``` -$ python3 -Python 3.4.3 (...) -Type "help", "copyright", "credits" or "license" for more information. ->>> -``` +{% filename %}command-line{% endfilename %} -## Tvůj první příkaz v Pythonu! +```python +>>> 2 + 3 +5 +``` -Po spuštění interaktivního režimu Python se výzva na řádku změní na `>>>`. Pro nás to znamená, že pro tuto chvíli můžeme používat pouze příkazy v jazyce Python. Není nutné zadávat `>>>` - Python to udělá za tebe. +Nice! See how the answer popped out? Python knows math! You could try other commands like: -Pokud chceš ukončit Python konzoli, kdykoliv stačí zadat `exit()` nebo použít zkratku `Ctrl + Z` na Windows a `Ctrl + D` pro Mac/Linux. Pak již neuvidíš `>>>`. +- `4 * 5` +- `5 - 1` +- `40 / 2` -Pro tuto chvíli nechceme Python konzoli opustit. Chceme se o ní naučit více. Začněme s něčím opravdu jednoduchým. Například zkusme napsat nějakou matematiku. Napiš třeba `2 + 3` a zmáčkni `enter`. +To perform exponential calculation, say 2 to the power 3, we type: {% filename %}command-line{% endfilename %} -``` ->>> 2 + 3 -5 +```python +>>> 2 ** 3 +8 ``` -Hezké! Vidíš, jak se zobrazila odpověď? Python umí matematiku! Můžeš zkusit jiné příkazy typu: `4 * 5` ; `5-1` ; `40 / 2` +Have fun with this for a little while and then get back here. :) -Chvíli si s tím hraj a pak se sem vrať zpátky :). +As you can see, Python is a great calculator. If you're wondering what else you can do… -Jak vidíš, Python je skvělá kalkulačka. Pokud tě zajímá, co jiného můžeš dělat... +## Strings -## Řetězce +How about your name? Type your first name in quotes like this: -A co tvé jméno? Zadej své jméno do uvozovek, jak vidíš níže: +{% filename %}command-line{% endfilename %} -``` +```python >>> "Ola" -"Ola" +'Ola' ``` -Nyní jsi vytvořila svůj první řetězec! Je to posloupnost znaků, které mohou být zpracovány počítačem. Řetězec musí vždy začínat a končit stejným znakem. To může být jednoduchá (`'`) nebo dvojitá (`"`) uvozovka (neexistuje žádný rozdíl!) Uvozovkami Pythonu říkáš, že co je uvnitř, je řetězec. +You've now created your first string! It's a sequence of characters that can be processed by a computer. The string must always begin and end with the same character. This may be single (`'`) or double (`"`) quotes (there is no difference!) The quotes tell Python that what's inside of them is a string. -Řetězce mohou být spojovány. Zkus toto: +Strings can be strung together. Try this: -``` ->>> "Ahoj " + "Ola" -'Ahoj Ola' +{% filename %}command-line{% endfilename %} + +```python +>>> "Hi there " + "Ola" +'Hi there Ola' ``` -Také můžeš násobit řetězce s číslem: +You can also multiply strings with a number: -``` +{% filename %}command-line{% endfilename %} + +```python >>> "Ola" * 3 'OlaOlaOla' ``` -Pokud budeš chtít dát apostrof dovnitř svého řetězce, máš dvě možnosti, jak to udělat. +If you need to put an apostrophe inside your string, you have two ways to do it. -Pomocí dvojité uvozovky: +Using double quotes: -``` +{% filename %}command-line{% endfilename %} + +```python >>> "Runnin' down the hill" "Runnin' down the hill" ``` -nebo použít escape sekvenci - před apostrof napsat zpětné lomítko (\`): +or escaping the apostrophe with a backslash (`\`): -``` +{% filename %}command-line{% endfilename %} + +```python >>> 'Runnin\' down the hill' "Runnin' down the hill" ``` -Pěkné, co? Chceš-li vidět své jméno velkými písmeny, jednoduše zadej: +Nice, huh? To see your name in uppercase letters, type: -``` +{% filename %}command-line{% endfilename %} + +```python >>> "Ola".upper() 'OLA' ``` -Právě jsi použila `upper` **funkci** na svém řetězci! Funkce (jako `upper()`) je sled instrukcí, které Python provádí na daném objektu (`"Ola"`) poté, co ji zavoláš. +You just used the `upper` **method** on your string! A method (like `upper()`) is a sequence of instructions that Python has to perform on a given object (`"Ola"`) once you call it. -Pokud chceš znát počet písmen ve svém jméně, tak pro to má Python také funkci! +If you want to know the number of letters contained in your name, there is a **function** for that too! -``` +{% filename %}command-line{% endfilename %} + +```python >>> len("Ola") 3 ``` -Zajímá tě, proč někdy voláš funkce s `.` na konci řetězce (jako `"Ola".upper()`) a někdy nejprve zavoláš funkci a vložíš řetězec do závorek? V některých případech funkce patří do objektů, jako `upper()`, což lze provést pouze u řetězců. V tomto případě nazýváme funkci **metodou**. Jindy, funkce nepatří k ničemu konkrétnímu a lze ji použít na různé typy objektů, stejně jako `len()`. To je důvod, proč předáváme `"Ola"` jako parametr pro funkci `len`. +Wonder why sometimes you call functions with a `.` at the end of a string (like `"Ola".upper()`) and sometimes you first call a function and place the string in parentheses? Well, in some cases, functions belong to objects, like `upper()`, which can only be performed on strings. In this case, we call the function a **method**. Other times, functions don't belong to anything specific and can be used on different types of objects, just like `len()`. That's why we're giving `"Ola"` as a parameter to the `len` function. ### Shrnutí -OK, dost bylo řetězců. Co ses zatím naučila: +OK, enough of strings. So far you've learned about: -* **interaktivní režim Pythonu** - zadávání příkazů (kódu) do Pythonového interaktivního režimu a zobrazení výsledku/odpovědi v Pythonu -* **čísla a řetězce** - v Pythonu se čísla používají pro matematiku a řetězce pro textové objekty -* **operátor** - jako + a * kombinuje hodnoty a vytvoří nové -* **funkce** - jako upper() a len() provádí akce u objektů. +- **the prompt** – typing commands (code) into the Python prompt results in answers in Python +- **numbers and strings** – in Python numbers are used for math and strings for text objects +- **operators** – like `+` and `*`, combine values to produce a new one +- **functions** – like `upper()` and `len()`, perform actions on objects. -To jsou základy každého programovacího jazyka. Připravena na něco dalšího? Vsadíme se, že ano! +These are the basics of every programming language you learn. Ready for something harder? We bet you are! -## Chyby +## Errors -Pojďme zkusit něco nového. Můžeme zkusit zjistit délku čísla stejným způsobem, jakým jsme zjišťovali délku našeho jména? Zadej `len(304023)` a stiskni klávesu `Enter`: +Let's try something new. Can we get the length of a number the same way we could find out the length of our name? Type in `len(304023)` and hit `enter`: -``` +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python >>> len(304023) Traceback (most recent call last): -File "", -line 1, in + File "", line 1, in TypeError: object of type 'int' has no len() ``` -Zobrazila se ti naše první chyba! Ta říká, že objekty typu "int" (integers, celá čísla) nemají délku. Tak co můžeme udělat teď? Možná můžeme zkusit napsat naše číslo jako řetězec? Řetězce mají délky, že? +We got our first error! The {{ warning_icon }} icon is our way of giving you a heads up that the code you are about to run won't work as expected. Making mistakes (even intentional ones) are an important part of learning! -``` +It says that objects of type "int" (integers, whole numbers) have no length. So what can we do now? Maybe we can write our number as a string? Strings have a length, right? + +{% filename %}command-line{% endfilename %} + +```python >>> len(str(304023)) 6 ``` -Funguje to! Použili jsme funkci `str` uvnitř funkce `len`. `str()` vše převádí na řetězec. +It worked! We used the `str` function inside of the `len` function. `str()` converts everything to strings. -* Funkce `str`převede věci do **řetězců** -* Funkce `int` převede věci na **celá čísla** +- Funkce `str`převede věci do **řetězců** +- Funkce `int` převede věci na **celá čísla** -> Důležité upozornění: můžeme převést čísla na text, ale nemůžeme jen tak převést text na čísla - co by se stalo, kdybychom se pokusily o toto: `int('hello')`? +> Important: we can convert numbers into text, but we can't necessarily convert text into numbers – what would `int('hello')` be anyway? -## Proměnné +## Variables -Důležitým konceptem v programování jsou proměnné. Proměnná není nic jiného než pojmenování něčeho, co budeme chtít použít později. Programátoři proměnné používají k ukládání dat, aby byl jejich kód čitelnější a nemuseli si pamatovat, co dané věci jsou. +An important concept in programming is variables. A variable is nothing more than a name for something so you can use it later. Programmers use these variables to store data, make their code more readable and so they don't have to keep remembering what things are. -Řekněme, že chceme vytvořit novou proměnnou s názvem `name`: +Let's say we want to create a new variable called `name`: -``` +{% filename %}command-line{% endfilename %} + +```python >>> name = "Ola" ``` -Vidíš? Je to snadné! Jednoduše napíšeš: name se rovná Ola. +We type name equals Ola. -Jak sis jistě všimla, tvůj program nevrátil nic jako předtím. Jak tedy víme, že proměnná skutečně existuje? Jednoduše zadejte `name` a stiskni klávesu `Enter`: +As you've noticed, your program didn't return anything like it did before. So how do we know that the variable actually exists? Enter `name` and hit `enter`: -``` +{% filename %}command-line{% endfilename %} + +```python >>> name 'Ola' ``` -Hurá! První proměnná :)! Kdykoli můžeš změnit to, na co daná proměnná ukazuje: +Yippee! Your first variable! :) You can always change what it refers to: -``` +{% filename %}command-line{% endfilename %} + +```python >>> name = "Sonja" >>> name 'Sonja' ``` -Můžeš ji také použít ve funkcích: +You can use it in functions too: -``` +{% filename %}command-line{% endfilename %} + +```python >>> len(name) 5 ``` -Super, ne? Samozřejmě proměnná může obsahovat cokoliv, například také čísla! Zkus tohle: +Awesome, right? Now, variables can be anything – numbers too! Try this: -``` +{% filename %}command-line{% endfilename %} + +```python >>> a = 4 >>> b = 6 >>> a * b 24 ``` -Ale co když použijeme nesprávné jméno? Dokážeš odhadnout, co se stane? Pojďme to zkusit! +But what if we used the wrong name? Can you guess what would happen? Let's try! -``` +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python >>> city = "Tokyo" >>> ctiy -Traceback (most recent call last): File "", line 1, in +Traceback (most recent call last): + File "", line 1, in NameError: name 'ctiy' is not defined ``` -Chyba! Jak vidíš, Python má různé typy chyb a tato se nazývá **NameError**. Python ti vrátí tuto chybu, pokud se pokusíš použít proměnnou, která nebyla dosud definována. Pokud někdy dojde k této chybě, zkontroluj svůj kód, abys zjistila, jestli jsi nezadala nějaké jméno nesprávně. +An error! As you can see, Python has different types of errors and this one is called a **NameError**. Python will give you this error if you try to use a variable that hasn't been defined yet. If you encounter this error later, check your code to see if you've mistyped any names. -Chvilku si s tím, ať vidíš, co se s tím dá dělat! +Play with this for a while and see what you can do! -## Funkce print +## The print function -Zkus toto: +Try this: -``` +{% filename %}command-line{% endfilename %} + +```python >>> name = 'Maria' >>> name 'Maria' @@ -204,227 +238,276 @@ Zkus toto: Maria ``` -Zadáš-li jen `name`, interpretr Pythonu reaguje na řetězcovou *reprezentaci* proměnné "name", což jsou písmena M-a-r-i-a, obklopená jednoduchými uvozovkami ''. Když napíšeš `print(name)`, Python vypíše obsah proměnné na obrazovku bez uvozovek, což vypadá lépe. +When you just type `name`, the Python interpreter responds with the string *representation* of the variable 'name', which is the letters M-a-r-i-a, surrounded by single quotes, ''. When you say `print(name)`, Python will "print" the contents of the variable to the screen, without the quotes, which is neater. -Jak uvidíme později, funkce `print()` je také užitečná, když chceme vypsat věci uvnitř funkce nebo na více řádcích. +As we'll see later, `print()` is also useful when we want to print things from inside functions, or when we want to print things on multiple lines. -## Seznamy +## Lists -Vedle řetězců a celých čísel má Python další druhy různých typů objektů. Teď se podíváme na jeden, který se nazývá **list**. Seznamy jsou přesně to, co si myslíš, že jsou: jsou to objekty, které obsahují seznam ostatních objektů :) +Beside strings and integers, Python has all sorts of different types of objects. Now we're going to introduce one called **list**. Lists are exactly what you think they are: objects which are lists of other objects. :) -Nestyď se a vytvoř seznam: +Go ahead and create a list: -``` +{% filename %}command-line{% endfilename %} + +```python >>> [] [] ``` -Ano, tento seznam je prázdný. Není moc užitečný, že? Pojďme vytvořit seznam čísel z loterie. Nechceme se stále opakovat, takže seznam uložíme také do proměnné: +Yes, this list is empty. Not very useful, right? Let's create a list of lottery numbers. We don't want to repeat ourselves all the time, so we will put it in a variable, too: -``` +{% filename %}command-line{% endfilename %} + +```python >>> lottery = [3, 42, 12, 19, 30, 59] ``` -Dobrá máme seznam! Co s ním můžeme dělat? Uvidíme, kolik čísel loterie je v seznamu. Máš nějakou představu, jakou funkci bys měla použít? Už to přeci víš! +All right, we have a list! What can we do with it? Let's see how many lottery numbers there are in a list. Do you have any idea which function you should use for that? You know this already! -``` +{% filename %}command-line{% endfilename %} + +```python >>> len(lottery) 6 ``` -Ano! Funkce `len()` ti zjistí počet objektů v seznamu. Šikovné, že? Možná bychom je teď měli zkusit seřadit: +Yes! `len()` can give you a number of objects in a list. Handy, right? Maybe we will sort it now: -``` +{% filename %}command-line{% endfilename %} + +```python >>> lottery.sort() ``` -Tato funkce nic nevrátí, jen změní pořadí čísel v seznamu. Pojďme ho znovu vypsat a uvidíme co se stalo: +This doesn't return anything, it just changed the order in which the numbers appear in the list. Let's print it out again and see what happened: -``` +{% filename %}command-line{% endfilename %} + +```python >>> print(lottery) [3, 12, 19, 30, 42, 59] ``` -Jak můžeš vidět, čísla v seznamu jsou nyní seřazena od nejnižší k nejvyšší hodnotě. Gratulujeme! +As you can see, the numbers in your list are now sorted from the lowest to highest value. Congrats! -Můžeme také zkusit obrátit pořadí? Udělejme to! +Maybe we want to reverse that order? Let's do that! -``` +{% filename %}command-line{% endfilename %} + +```python >>> lottery.reverse() >>> print(lottery) [59, 42, 30, 19, 12, 3] ``` -Snadné, že? Pokud chceš něco přidat do svého seznamu, můžeš to provést zadáním tohoto příkazu: +If you want to add something to your list, you can do this by typing this command: -``` +{% filename %}command-line{% endfilename %} + +```python >>> lottery.append(199) >>> print(lottery) [59, 42, 30, 19, 12, 3, 199] ``` -Pokud chceš zobrazit pouze první číslo, můžeš to udělat pomocí **indexů**. Index je číslo, které říká, kde se v seznamu položka najde. Programátoři preferují počítání od 0, takže první objekt v seznamu je v indexu 0, druhý je v indexu 1 a tak dále. Zkus toto: +If you want to show only the first number, you can do this by using **indexes**. An index is the number that says where in a list an item occurs. Programmers prefer to start counting at 0, so the first object in your list is at index 0, the next one is at 1, and so on. Try this: -``` +{% filename %}command-line{% endfilename %} + +```python >>> print(lottery[0]) 59 >>> print(lottery[1]) 42 ``` -Jak vidíš, pro přístup k různým objektům ve tvém seznamu použiješ jméno seznamu a index objektu uvnitř hranatých závorek. +As you can see, you can access different objects in your list by using the list's name and the object's index inside of square brackets. -Chceš-li odstranit něco ze svého seznamu, budeš muset použít **indexy**, jak jsme se dozvěděli výše, a příkaz `pop()`. Zkusme to, co jsme se naučily dříve; budeme odstraňovat první číslo našeho seznamu. +To delete something from your list you will need to use **indexes** as we learned above and the `pop()` method. Let's try an example and reinforce what we learned previously; we will be deleting the first number of our list. -``` +{% filename %}command-line{% endfilename %} + +```python >>> print(lottery) [59, 42, 30, 19, 12, 3, 199] >>> print(lottery[0]) 59 >>> lottery.pop(0) +59 >>> print(lottery) [42, 30, 19, 12, 3, 199] ``` -Funguje to všechno skvěle! +That worked like a charm! -Pro další zábavu zkus nějaké jiné indexy: 6, 7, 1000, -1, -6 nebo -1000. Pokus se předpovědět výsledek před zadáním příkazu. Jsou výsledky správné? +For extra fun, try some other indexes: 6, 7, 1000, -1, -6 or -1000. See if you can predict the result before trying the command. Do the results make sense? -Seznam všech dostupných metod pro seznam nalezneš v této kapitole Python dokumentace: https://docs.python.org/3/tutorial/datastructures.html +You can find a list of all available list methods in this chapter of the Python documentation: https://docs.python.org/3/tutorial/datastructures.html -## Slovníky +## Dictionaries -Slovník je podobný seznamu, ale pro přístup k hodnotám se používá klíč místo indexu. Klíč může být jakýkoli řetězec nebo číslo. Syntaxe pro definování prázdného slovníku je: +> For readers at home: this part is covered in the [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c) video. -``` +A dictionary is similar to a list, but you access values by looking up a key instead of a numeric index. A key can be any string or number. The syntax to define an empty dictionary is: + +{% filename %}command-line{% endfilename %} + +```python >>> {} {} ``` -Vidíš, že jsi právě vytvořila prázdný slovník. Hurá! +This shows that you just created an empty dictionary. Hurray! -A teď zkus napsat následující příkaz (zkus nahradit vlastními informacemi): +Now, try writing the following command (try substituting your own information, too): -``` +{% filename %}command-line{% endfilename %} + +```python >>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} ``` -Tímto příkazem jsi právě vytvořila proměnnou s názvem `participant` s třemi dvojicemi klíčů hodnot: +With this command, you just created a variable named `participant` with three key–value pairs: -* Klíč `name` odkazuje na hodnotu `"Ola"` (`string/řetězcový` objekt), -* klíč`country`, ukazuje na `"Polsko"` (další `řetězec`)), -* a `favorite_numbers` ukazuje `[7, 42, 92]` (`list/seznam` obsahující 3 čísla). +- Klíč `name` odkazuje na hodnotu `"Ola"` (`string/řetězcový` objekt), +- Klíč`country`, ukazuje na `"Polsko"` (další `řetězec`), +- a `favorite_numbers` ukazuje `[7, 42, 92]` (`list/seznam` obsahující 3 čísla). -Můžeš zkontrolovat obsah jednotlivých klíčů následující syntaxí: +You can check the content of individual keys with this syntax: -``` +{% filename %}command-line{% endfilename %} + +```python >>> print(participant['name']) Ola ``` -Je to podobné seznamu. Ale není nutné si pamatovat index - jen jméno. +See, it's similar to a list. But you don't need to remember the index – just the name. -Co se stane, když se zeptáme Pythonu na hodnotu klíče, který neexistuje? Zkus hádat! Pojďme to vyzkoušet a uvidíš! +What happens if we ask Python the value of a key that doesn't exist? Can you guess? Let's try it and see! -``` +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python >>> participant['age'] Traceback (most recent call last): -File "", line 1, in + File "", line 1, in KeyError: 'age' ``` -Podívej, další chyba! Toto je **KeyError**. Python ti napomáhá a řekne ti, že klíč `"věk"` v tomto slovníku neexistuje. - -Kdy použít slovník a kdy seznam? To je dobrý postřeh k zamyšlení. Kdy použít jakou variantu pochopíš, až si přečteš následující řádky. +Look, another error! This one is a **KeyError**. Python is helpful and tells you that the key `'age'` doesn't exist in this dictionary. -* Potřebuješ jen seřazenou sekvenci položek? Použij seznam. -* Pokud potřebuješ přiřadit hodnotám klíče, abys je mohla později efektivně vyhledávat (klíčem)? Používej slovník. +When should you use a dictionary or a list? Well, that's a good point to ponder. Think about the answer before looking at it in the next line. -Slovníky stejně jako seznamy jsou *mutable/proměnlivé*, což znamená, že je lze změnit po jejich vytvoření. Do slovníku můžeš přidat nové páry klíč/hodnota po jeho vytvoření: +- Potřebuješ jen seřazenou sekvenci položek? Použij seznam. +- Pokud potřebuješ přiřadit hodnotám klíče, aby jsi je mohla později efektivně vyhledávat (klíčem)? Používej slovník. -``` ->>> participant['favorite_language'] = 'Python' -``` +Like lists, using the `len()` function on the dictionaries returns the number of key–value pairs in the dictionary. Go ahead and type in this command: -Stejně jako u seznamů můžeš použít metodu `len()` na slovníky, vrací počet párů klíč/hodnota ve slovníku. Nestyď se a zadej příkaz: +{% filename %}command-line{% endfilename %} -``` +```python >>> len(participant) -4 +3 ``` -Doufám, že ti to nyní dává větší smysl. :) Připravena na více zábavy se slovníky? Pojďme na další řádek a další úžasné věci. +Dictionaries, like lists, are *mutable*, meaning that they can be changed after they are created. You can add new key–value pairs to a dictionary after it is created, like this: -Příkazem `pop()` odstraníš položky ve slovníku. Například pokud chceš odstranit záznam, kterému odpovídá klíč `"favorite_numbers"`, zadej následující příkaz: +{% filename %}command-line{% endfilename %} +```python +>>> participant['favorite_language'] = 'Python' ``` + +I hope it makes sense up to now. :) Ready for some more fun with dictionaries? Read on for some amazing things. + +You can use the `pop()` method to delete an item in the dictionary. Say, if you want to delete the entry corresponding to the key `'favorite_numbers'`, type in the following command: + +{% filename %}command-line{% endfilename %} + +```python >>> participant.pop('favorite_numbers') +[7, 42, 92] >>> participant {'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} ``` -Jak vidíš, z výstupu byla odstraněna odpovídající dvojice klíč hodnota 'favorite_numbers'. +As you can see from the output, the key–value pair corresponding to the 'favorite_numbers' key has been deleted. -Kromě toho můžeš také změnit hodnotu přidruženou k již vytvořenému klíči ve slovníku. Napiš: +As well as this, you can also change a value associated with an already-created key in the dictionary. Type this: -``` +{% filename %}command-line{% endfilename %} + +```python >>> participant['country'] = 'Germany' >>> participant {'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} ``` -Jak můžeš vidět, hodnota klíče `'country'` se změnila z `"Poland"` na `"Germany"`. :) Úžasné? Hurá! Právě jsi se naučila další úžasnou věc. +As you can see, the value of the key `'country'` has been altered from `'Poland'` to `'Germany'`. :) Exciting? Hurrah! You just learned another amazing thing. ### Shrnutí -Skvělé! Nyní víš o programování hodně. V této poslední části jsi se naučila o: +Awesome! You know a lot about programming now. In this last part you learned about: -* **errors/chyby** - nyní víš jak číst a pochopit chyby, které ti Python zobrazí, pokud nerozumí příkazu, který jsi zadala -* **proměnné/variables** - názvy pro objekty, které umožňují psát kód snadněji tak, aby byl čitelnější -* **seznamy/lists** - seznamy objektů uložených v určitém pořadí -* **slovníky/dictionaries** - objekty, které jsou uloženy jako dvojice klíč–hodnota +- **errors** – you now know how to read and understand errors that show up if Python doesn't understand a command you've given it +- **variables** – names for objects that allow you to code more easily and to make your code more readable +- **lists** – lists of objects stored in a particular order +- **dictionaries** – objects stored as key–value pairs -Jsi připravena na další část? +Excited for the next part? :) -## Porovnávání věcí +## Compare things -Velká část programování zahrnuje porovnání věci. Co je nejjednodušší věc k porovnání? Čísla, samozřejmě. Podívejme se, jak to funguje: +> For readers at home: this part is covered in the [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4) video. -``` +A big part of programming involves comparing things. What's the easiest thing to compare? Numbers! Let's see how that works: + +{% filename %}command-line{% endfilename %} + +```python >>> 5 > 2 True >>> 3 < 1 -False >>> 5 > 2 * 2 +False +>>> 5 > 2 * 2 True >>> 1 == 1 True >>> 5 != 2 True +>>> len([1, 2, 3]) > len([4, 5]) +True ``` -Dali jsme Pythonu nějaká čísla na porovnání. Jak vidíš, Python může porovnávat nejen čísla, ale může také porovnat výsledky metod. Pěkný, co? +We gave Python some numbers to compare. As you can see, not only can Python compare numbers, but it can also compare values of mathematical expressions like `2 * 2` and function results like the `2` returned by `len([4, 5])`. Nice, huh? -Zajímá tě, proč jsme daly dva symboly rovná se `==` vedle sebe pro porovnání, zda jsou čísla stejná? Jedno rovnítko `=` používáme pro přiřazení hodnoty do proměnné. Vždy, **vždy** musíte dát dvě rovnítka `==`, pokud chcete zkontrolovat, jestli se věci navzájem rovnají. Můžeme také zjišťovat, že se věci navzájem nerovnají. Pro takové porovnání můžeme použít symbol `!=`, jak je uvedeno v příkladu výše. +Do you wonder why we put two equal signs `==` next to each other to compare if numbers are equal? We use a single `=` for assigning values to variables. You always, **always** need to put two of them – `==` – if you want to check if things are equal to each other. We can also state that things are unequal to each other. For that, we use the symbol `!=`, as shown in the example above. -Dejme Pythonu dva další úkoly: +Give Python two more tasks: -``` +{% filename %}command-line{% endfilename %} + +```python >>> 6 >= 12 / 2 True >>> 3 <= 2 False ``` -`>` a `<` jsou pro použití snadné, ale co `> =` a `< =` - víš, co se tím myslí? Podívejme se na to: +We've seen `>` and `<`, but what do `>=` and `<=` mean? Read them like this: -* x `>` y znamená: x je větší než y -* x `<` y znamená: x je menší než y -* x `<=` y znamená: x je menší nebo rovno y -* x `>=` y znamená: x je větší nebo rovno y +- x `>` y znamená: x je větší než y +- x `<` y znamená: x je menší než y +- x `<=` y znamená: x je menší nebo rovno y +- x `>=` y znamená: x je větší nebo rovno y -Úžasné! Chceš zkusit ještě něco? Zkuste tohle: +Awesome! Wanna do one more? Try this: -``` +{% filename %}command-line{% endfilename %} + +```python >>> 6 > 2 and 2 < 3 True >>> 3 > 2 and 2 < 1 @@ -433,415 +516,541 @@ False True ``` -Pythonu můžeš dát porovnat tolik čísel kolik chceš a na vše ti dá odpověď! Je docela chytrý, že? +You can give Python as many numbers to compare as you want, and it will give you an answer! Pretty smart, right? -* **and** - Pokud použiješ operátor `and`, obě strany musí být pravdivé, aby celý příkaz byl pravdivý -* **or** - Pokud použiješ operátor `or`, stačí, aby jen jedna strana z porovnání byla pravdivá, aby celý příkaz byl pravdivý +- **and** – if you use the `and` operator, both comparisons have to be True in order for the whole command to be True +- **or** – if you use the `or` operator, only one of the comparisons has to be True in order for the whole command to be True -Už jsi někdy slyšela výraz "srovnávat jablka a hrušky"? Zkusme v Pythonu ekvivalent: +Have you heard of the expression "comparing apples to oranges"? Let's try the Python equivalent: -``` +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python >>> 1 > 'django' Traceback (most recent call last): -File "", line 1, in + File "", line 1, in TypeError: '>' not supported between instances of 'int' and 'str' ``` -Zde vidíš, že stejně jako nelze srovnávat "jablka a hrušky", Python není schopen porovnávat řetězce (`str`) a čísla (`int`). Místo toho zobrazí **TypeError** a říká nám, že tyto dva typy nelze srovnávat společně. +Here you see that just like in the expression, Python is not able to compare a number (`int`) and a string (`str`). Instead, it shows a **TypeError** and tells us the two types can't be compared together. -## Logic hodnoty/Booleany +## Boolean -Mimochodem právě jste se dozvěděly o novém typu objektu v Pythonu. Říká se mu **boolean** a je to asi nejjednodušší typ. +Incidentally, you just learned about a new type of object in Python. It's called **Boolean**. -Existují pouze dva logické objekty: - True - False +There are only two Boolean objects: -Aby Python pochopil, že se jedná o tento typ, je potřeba vždy psát jako True (první písmeno velké, zbytek malý). **true, TRUE, tRUE nebude fungovat – jedině True je správně.** (Totéž samozřejmě platí pro False.) +- True +- False -Pravdivostní hodnoty mohou být také v proměnné! Viz zde: +But for Python to understand this, you need to always write it as 'True' (first letter uppercase, with the rest of the letters lowercased). **true, TRUE, and tRUE won't work – only True is correct.** (The same applies to 'False' as well.) -``` +Booleans can be variables, too! See here: + +{% filename %}command-line{% endfilename %} + +```python >>> a = True >>> a True ``` -Rovněž to můžete provést takto: +You can also do it this way: -``` +{% filename %}command-line{% endfilename %} + +```python >>> a = 2 > 5 >>> a False ``` -Zkoušej a bav se s logickými hodnotami. Zkus spustit následující příkazy: +Practice and have fun with Booleans by trying to run the following commands: -* `True and True` -* `False and True` -* `True or 1 == 1` -* `1 != 2` +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` -Gratulujeme! Logické hodnoty jsou jedny z nejbezvadnějších vlastností v programování a vy jste se je právě naučily používat! +Congrats! Booleans are one of the coolest features in programming, and you just learned how to use them! # Ulož to! -Zatím jsme psaly všechny naše programy v konzoli v interaktivním režimu Pythonu, který nás omezuje na jeden řádek kódu v jednu chvíli. Normální programy jsou uloženy v souborech a spouští je **konzole** nebo **překladač** programovacího jazyku. Zatím jsme spouštěly naše programy po jednom řádku v **konzoli, v interaktivním režimu** Python. Pro příštích několik úkolů budeme potřebovat více než jeden řádek kódu, takže rychle musíme: +> For readers at home: this part is covered in the [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk) video. -* Ukončit interaktivní režim Pythonu -* Otevřít náš zvolený editor kódu -* Uložit nějaký kód do nového pythonovského souboru -* Spustit ho! +So far we've been writing all our python code in the interpreter, which limits us to entering one line of code at a time. Normal programs are saved in files and executed by our programming language **interpreter** or **compiler**. So far we've been running our programs one line at a time in the Python **interpreter**. We're going to need more than one line of code for the next few tasks, so we'll quickly need to: -Chceš-li opustit interaktivní režim Pythonu, který jsme dosud používaly, jednoduše zadejte ~ ~ ~ exit() ~ ~ ~ funkci: +- Ukončit interaktivní režim Pythonu +- Otevřít tvůj zvolený editor kódu +- Ulož nějaký kód do nového pythnovského souboru +- Spusť ho! -``` +To exit from the Python interpreter that we've been using, type the `exit()` function + +{% filename %}command-line{% endfilename %} + +```python >>> exit() $ ``` -Tak se dostaneš zpět do příkazové řádky. +This will put you back into the command prompt. -Dříve sis vybrala editor kódu v části [editor kódu][2]. Nyní potřebujeme editor otevřít a napsat vlastní kód do nového souboru: +Earlier, we picked out a code editor from the [code editor](../code_editor/README.md) section. We'll need to open the editor now and write some code into a new file (or if you're using a Chromebook, create a new file in the cloud IDE and open the file, which will be in the included code editor): - [2]: ../code_editor/README.md +{% filename %}editor{% endfilename %} ```python print('Hello, Django girls!') ``` -> **Poznámka:** Měla bys objevit jednu z nejúžasnější věcí na editorech kódu: barvy! V interaktivním režimu Pythonu mělo vše stejnou barvu, ale nyní bys měla vidět, že funkce `print` je jinou barvou než řetězec uvnitř. To se nazývá "zvýrazňování syntaxe" a je to opravdu užitečná funkce při kódování. Barvy ti napoví, že máš neuzavřený řetězce nebo překlep v názvu slova (jako `def` ve funkci, kterou uvidíš níže). To je jeden z důvodů, proč používáme editory kódu :) +Obviously, you're a pretty seasoned Python developer now, so feel free to write some code that you've learned today. -Samozřejmě teď jsi již pěkně ostřílená python programátorka, tak neváhej napsat nějaký kód, který ses dnes naučila. +Now we need to save the file and give it a descriptive name. Let's call the file **python_intro.py** and save it to your desktop. We can name the file anything we want, but the important part here is to make sure the file ends in **.py**. The **.py** extension tells our operating system that this is a **Python executable file** and Python can run it. -Teď potřebujeme uložit vytvořený soubor a dát mu popisný název. Pojďme ho nazvat **python_intro.py** a uložit jej na plochu. Soubor můžeš pojmenovat jakkoliv chceš, ale důležitá věc je, aby ses ujistila, že soubor končí na **.py**. Přípona **.py** říká našemu operačnímu systému, že jde o **spustitelný soubor Pythonu** a Python ho může spustit. +> **Note** You should notice one of the coolest thing about code editors: colors! In the Python console, everything was the same color; now you should see that the `print` function is a different color from the string. This is called "syntax highlighting", and it's a really useful feature when coding. The color of things will give you hints, such as unclosed strings or a typo in a keyword name (like the `def` in a function, which we'll see below). This is one of the reasons we use a code editor. :) -Pokud máš soubor uložen, je čas jej spustit! Pomocí dovedností, které jsi se naučila v sekci příkazová řádka, **změň adresář** pomocí terminálu na plochu. +With the file saved, it's time to run it! Using the skills you've learned in the command line section, use the terminal to **change directories** to the desktop. -Na Macu bude příkaz vypadat přibližně takto: + -``` -$ cd ~/Desktop -``` +On a Mac, the command will look something like this: -Na Linuxu to bude vypadat takto (slovo "Desktop" (Plocha) může být přeloženo do tvého jazyka): +{% filename %}command-line{% endfilename %} -``` -$ cd ~/Desktop -``` + $ cd ~/Desktop + -A na Windows to bude vypadat takto: + -``` -> cd %HomePath%\Desktop -``` + -Pokud nevíš jak dál, stačí požádat o pomoc kouče. +On Linux, it will be like this: -Nyní pomocí Pythonu spustíš kód v souboru takto: +{% filename %}command-line{% endfilename %} + $ cd ~/Desktop + + +(Remember that the word "Desktop" might be translated to your local language.) + + + + + +On Windows Command Prompt, it will be like this: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +And on Windows Powershell, it will be like this: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +If you get stuck, ask for help. That's exactly what the coaches are here for! + +Now use Python to execute the code in the file like this: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Note: on Windows 'python3' is not recognized as a command. Instead, use 'python' to execute the file: + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py ``` -$ python3 python_intro.py -Hello, Django girls! -``` -V pořádku! Právě jsi spustila svůj první program v Pythonu, který byl uložen do souboru. Cítíš se úžasně? +Alright! You just ran your first Python program that was saved to a file. Feel awesome? + +You can now move on to an essential tool in programming: -Nyní můžeme přejít k základním nástrojům pro programování: +## If … elif … else -## If...elif...else +Lots of things in code should be executed only when given conditions are met. That's why Python has something called **if statements**. -Spousty věcí v kódu chceme provádět, jen pokud jsou splněny určité podmínky. To je důvod, proč Python má něco, čemu se říká **if statements**. +Replace the code in your **python_intro.py** file with this: -Nahraďte kód v souboru **python_intro.py** tímto: +{% filename %}python_intro.py{% endfilename %} ```python if 3 > 2: ``` -Pokud jsi soubor uložila a spustila, pravděpodobně uvidíš následující chybu: +If we were to save and run this, we'd see an error like this: -``` -$ python3 python_intro.py -File "python_intro.py", line 2 - ^ -SyntaxError: unexpected EOF while parsing -``` +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + -Python očekává, že mu dáš další pokyny, které mají být provedeny, pokud bude podmínka `3 > 2` splněna (`True`). Řekněme tedy Pythonu, ať vypíše "Funguje to!". Změň svůj kód v souboru **python_intro.py** na tento: +Python expects us to give further instructions to it which are executed if the condition `3 > 2` turns out to be true (or `True` for that matter). Let’s try to make Python print “It works!”. Change your code in your **python_intro.py** file to this: + +{% filename %}python_intro.py{% endfilename %} ```python if 3 > 2: - print('It works!') + print('It works!') ``` -Všimla sis, jak jsme odsadily poslední řádek kódu o 4 mezery? Musíme to udělat, podle toho Python pozná, jakou část kódu má spustit, pokud vyhodnotí předchozí výraz jako pravdivý. Můžete udělat jen jednu mezeru, ale téměř všichni programátoři v Pythonu dělají 4, aby kód vypadal upraveně a čitelně. Jeden `Tab` bude také počítán jako 4 mezery. +Notice how we've indented the next line of code by 4 spaces? We need to do this so Python knows what code to run if the result is true. You can do one space, but nearly all Python programmers do 4 to make things look neat. A single Tab will also count as 4 spaces as long as your text editor is set to do so. When you made your choice, don't change it! If you already indented with 4 spaces, make any future indentation with 4 spaces, too - otherwise you may run into problems. -Ulož a spusť: +Save it and give it another run: -``` +{% filename %}command-line{% endfilename %} + +```python $ python3 python_intro.py It works! ``` +Note: Remember that on Windows, 'python3' is not recognized as a command. From now on, replace 'python3' with 'python' to execute the file. + ### Co když podmínka není pravdivá? -V předchozích příkladech byl kód proveden pouze v případě, že podmínky byly splněny. Python má také příkazy `elif` a `else`: +In previous examples, code was executed only when the conditions were True. But Python also has `elif` and `else` statements: + +{% filename %}python_intro.py{% endfilename %} ```python if 5 > 2: - print('5 is indeed greater than 2') + print('5 is indeed greater than 2') else: - print('5 is not greater than 2') + print('5 is not greater than 2') ``` -Pokud je výraz pravdivý, po spuštění se vytiskne: +When this is run it will print out: -``` -$ python3 python_intro.py -5 is not greater than 2 -``` +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +If 2 were a greater number than 5, then the second command would be executed. Let's see how `elif` works: -Kdyby 2 bylo větší než 5, spustil by se první příkaz. Jak snadné! Podívejme se, jak funguje `elif`: +{% filename %}python_intro.py{% endfilename %} ```python name = 'Sonja' if name == 'Ola': - print('Hey Ola!') + print('Hey Ola!') elif name == 'Sonja': - print('Hey Sonja!') + print('Hey Sonja!') else: - print('Hey anonymous!') + print('Hey anonymous!') ``` -a spusť: +and executed: -``` -$ python3 python_intro.py -Hey Sonja! -``` +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + -Viděla jsi co se tam stalo? `elif` umožňuje přidat další podmínky, které se spustí, pokud se předchozí podmínky nezdaří. +See what happened there? `elif` lets you add extra conditions that run if the previous conditions fail. -Můžeš po počátečním `if` přidat tolik `elif` příkazů, kolik se ti zlíbí. Například: +You can add as many `elif` statements as you like after your initial `if` statement. For example: + +{% filename %}python_intro.py{% endfilename %} ```python volume = 57 if volume < 20: - print("Je to dost potichu.") + print("It's kinda quiet.") elif 20 <= volume < 40: - print("Jako hudba v pozadí dobré.") + print("It's nice for background music") elif 40 <= volume < 60: - print("Skvělé, slyším všechny detaily.") + print("Perfect, I can hear all the details") elif 60 <= volume < 80: - print("Dobré na party.") + print("Nice for parties") elif 80 <= volume < 100: - print("Trochu moc nahlas!") + print("A bit loud!") else: - print("Krvácí mi uši!") + print("My ears are hurting! :(") ``` -Python prochází a testuje každou položku v posloupnosti a vypíše: +Python runs through each test in sequence and prints: -``` -$ python3 python_intro.py - Skvělé, slyším všechny detaily. +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfect, I can hear all the details + + +## Comments + +Comments are lines beginning with `#`. You can write whatever you want after the `#` and Python will ignore it. Comments can make your code easier for other people to understand. + +Let's see how that looks: + +{% filename %}python_intro.py{% endfilename %} + +```python +# Change the volume if it's too loud or too quiet +if volume < 20 or volume > 80: + volume = 50 + print("That's better!") ``` +You don't need to write a comment for every line of code, but they are useful for explaining why your code is doing something, or providing a summary when it's doing something complex. + ### Shrnutí -V posledních třech cvičeních ses dozvěděla o: +In the last few exercises you learned about: + +- **comparing things** – in Python you can compare things by using `>`, `>=`, `==`, `<=`, `<` and the `and`, `or` operators +- **Boolean** – a type of object that can only have one of two values: `True` or `False` +- **Saving files** – storing code in files so you can execute larger programs. +- **if … elif … else** – statements that allow you to execute code only when certain conditions are met. +- **comments** - lines that Python won't run which let you document your code -* **Porovnání věcí** - v Pythonu můžeš porovnat věci pomocí operátorů `>`, `> =`, `==` `< =`, `<` a `and`, `or` -* **Logické hodnoty / Booleany** - typy, které mohou mít pouze jednu ze dvou hodnot: `True` nebo `False` -* **Ukládání do souborů** - pokud uložíme kód do souboru, můžeme spouštět velké programy -* **if...elif...else** - příkazy, které umožňují spouštět kód pouze v případě, kdy jsou splněny určité podmínky. +Time for the last part of this chapter! -Čas na poslední část této kapitoly! +## Your own functions! -## Vlastní funkce! +> For readers at home: this part is covered in the [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0) video. -Pamatuješ na funkci `len()`, kterou jsi spouštěla v Pythonu? Máme pro tebe dobrou zprávu. Nyní se dozvíš, jak napsat své vlastní funkce! +Remember functions like `len()` that you can execute in Python? Well, good news – you will learn how to write your own functions now! -Funkce je sled instrukcí, které by měl Python provést. Každá funkce v Pythonu začíná klíčovým slovem `def`, dále je uveden název a funkce může mít také nějaké parametry. Začněme u té nejlehčí. Nahraď kód v **python_intro.py** následujícím: +A function is a sequence of instructions that Python should execute. Each function in Python starts with the keyword `def`, is given a name, and can have some parameters. Let's give it a go. Replace the code in **python_intro.py** with the following: + +{% filename %}python_intro.py{% endfilename %} ```python def hi(): - print('Hi there!') - print('How are you?') + print('Hi there!') + print('How are you?') hi() ``` -Naše první funkce je připravena! +Okay, our first function is ready! -Asi se divíš, proč jsme napsaly název funkce v dolní části souboru. To je proto, že Python přečte soubor a spustí ho od shora dolů. Pokud chceš využívat svou funkci, musíš její název znovu napsat dole (tím ji zavoláš/spustíš). +You may wonder why we've written the name of the function at the bottom of the file. When we write `def hi():` and the indented lines following, this is us writing instructions for what the `hi()` function should do. Python will read and remember these instructions, but won't run the function yet. To tell Python we want to run the function, we have to call the function with `hi()`. Python reads the file and executes it from top to bottom, so we have to define the function in the file before we call it. -Tak to teď zkus a uvidíš, co se stane: +Let's run this now and see what happens: -``` -$ python3 python_intro.py -Hi there! -How are you? -``` +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi there! + How are you? + + +Note: if it didn't work, don't panic! The output will help you to figure why: + +- If you get a `NameError`, that probably means you typed something wrong, so you should check that you used the same name when creating the function with `def hi():` and when calling it with `hi()`. +- If you get an `IndentationError`, check that both of the `print` lines have the same whitespace at the start of a line: python wants all the code inside the function to be neatly aligned. +- If there's no output at all, check that the last `hi()` *isn't* indented - if it is, that line will become part of the function too, and it will never get run. + +Let's build our first function with parameters. We will change the previous example – a function that says 'hi' to the person running it – with a name: -To bylo snadné! Napišme naši první funkci s parametry. Použijeme předchozí příklad - napíšeme funkci, která nás pozdraví podle toho, jaké zadáme jméno při jejím spuštění: +{% filename %}python_intro.py{% endfilename %} ```python def hi(name): ``` -Jak vidíš, nyní jsme přidaly naší funkci parametr, `name`: +As you can see, we now gave our function a parameter that we called `name`: + +{% filename %}python_intro.py{% endfilename %} ```python def hi(name): - if name == 'Ola': - print('Hi Ola!') - elif name == 'Sonja': - print('Hi Sonja!') - else: - print('Hi anonymous!') + if name == 'Ola': + print('Hi Ola!') + elif name == 'Sonja': + print('Hi Sonja!') + else: + print('Hi anonymous!') hi() ``` -Pamatuj si: Funkce `print` je odsazená čtyři mezery v příkazu `if`. To je proto, aby se funkce spustila, pokud je splněna podmínka. Podívej se, jak to funguje nyní: +Remember: The `print` function is indented four spaces within the `if` statement. This is because the function runs when the condition is met. Let's see how it works now: -``` -$ python3 python_intro.py -Traceback (most recent call last): -File "python_intro.py", line 10, in - hi() -TypeError: hi() missing 1 required positional argument: 'name' -``` +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + Traceback (most recent call last): + File "python_intro.py", line 10, in + hi() + TypeError: hi() missing 1 required positional argument: 'name' + + +Oops, an error. Luckily, Python gives us a pretty useful error message. It tells us that the function `hi()` (the one we defined) has one required argument (called `name`) and that we forgot to pass it when calling the function. Let's fix it at the bottom of the file: -Jejda, chyba. Naštěstí nám Python vypsal docela užitečnou chybovou zprávu. Jak vidíš, funkce `hi()` (kterou jsme definovaly) má jeden povinný parametr `(s názvem name)`, který jsme zapomněly při volání funkce předat. Pojďme to opravit v následující části: +{% filename %}python_intro.py{% endfilename %} ```python hi("Ola") ``` -A znovu jej spusť: +And run it again: -``` -$ python3 python_intro.py -Hi Ola! -``` +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Ola! + -A co když změníme jméno? +And if we change the name? + +{% filename %}python_intro.py{% endfilename %} ```python hi("Sonja") ``` -Spustíme: +And run it: -``` -$ python3 python_intro.py -Hi Sonja! -``` +{% filename %}command-line{% endfilename %} -C myslíš, že se stane, když tam napíšeš jiné jméno než Ola nebo Sonja? Zkus to a uvidíme, jestli máš pravdu. Mělo by to vypsat toto: + $ python3 python_intro.py + Hi Sonja! + -``` -Hi anonymous! -``` +Now, what do you think will happen if you write another name in there? (Not Ola or Sonja.) Give it a try and see if you're right. It should print out this: + +{% filename %}command-line{% endfilename %} + + Hi anonymous! + -To je paráda, co? Nemusíš se opakovat a měnit takto jméno pokaždé, když chceš, aby funkce pozdravila jinou osobu. To je přesně důvod, proč potřebujeme funkce: abychom nikdy neopakovaly náš kód! +This is awesome, right? This way you don't have to repeat yourself every time you want to change the name of the person the function is supposed to greet. And that's exactly why we need functions – you never want to repeat your code! -Udělejme to ještě chytřeji – existuje více jmen než dvě a psaní podmínky pro každé jméno by bylo těžké, že? +Let's do something smarter – there are more names than two, and writing a condition for each would be hard, right? Replace the content of your file with the following: + +{% filename %}python_intro.py{% endfilename %} ```python def hi(name): - print('Hi ' + name + '!') + print('Hi ' + name + '!') hi("Rachel") ``` -Pojďme zavolat náš nový kód: +Let's call the code now: -``` -$ python3 python_intro.py -Hi Rachel! -``` +{% filename %}command-line{% endfilename %} -Blahopřejeme! Právě ses naučila, jak psát funkce :) + $ python3 python_intro.py + Hi Rachel! + -## Smyčky/Loops +Congratulations! You just learned how to write functions! :) -Nyní pojďme na poslední část. To bylo rychlé, co? :) +## Loops -Programátoři se neradi opakují. Programování je o automatizaci věci, takže nechceme zdravit každého člověka podle jeho jména manuálně, že? Zde se budou smyčky hodit. +> For readers at home: this part is covered in the [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0) video. -Ještě si vzpomínáš na seznamy? Udělejme seznam dívek: +This is the last part already. That was quick, right? :) + +Programmers don't like to repeat themselves. Programming is all about automating things, so we don't want to greet every person by their name manually, right? That's where loops come in handy. + +Still remember lists? Let's do a list of girls: + +{% filename %}python_intro.py{% endfilename %} ```python girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] ``` -Chceme pozdravit všechny s použitím jejich jména. Máme funkci `hi`, která to umí udělat. Tak ji použijeme ve smyčce: +We want to greet all of them by their name. We have the `hi` function to do that, so let's use it in a loop: + +{% filename %}python_intro.py{% endfilename %} ```python for name in girls: ``` -Příkaz ~ ~ ~ for ~ ~ ~ se chová podobně jako příkaz ~ ~ ~ if ~ ~ ~, v následujícím kódu musíme oba řádky odsadit o čtyři mezery. +The `for` statement behaves similarly to the `if` statement; code below both of these need to be indented four spaces. -Zde je celý kód, který umístíme do souboru: +Here is the full code that will be in the file: + +{% filename %}python_intro.py{% endfilename %} ```python def hi(name): - print('Hi ' + name + '!') + print('Hi ' + name + '!') girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] for name in girls: - hi(name) - print('Next girl') + hi(name) + print('Next girl') ``` -A když ho spustíme: +And when we run it: -``` -$ python3 python_intro.py -Hi Rachel! -Next girl -Hi Monica! -Next girl -Hi Phoebe! -Next girl -Hi Ola! -Next girl -Hi You! -Next girl -``` +{% filename %}command-line{% endfilename %} -Jak vidíš, vše, co jsi vložila dovnitř příkazu `for` s odsazením, se zopakuje pro každý prvek seznamu `girls`. + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + -Ve funkci `for` můžeš také použít čísla pomocí funkce `range`: +As you can see, everything you put inside a `for` statement with an indent will be repeated for every element of the list `girls`. + +You can also use `for` on numbers using the `range` function: + +{% filename %}python_intro.py{% endfilename %} ```python for i in range(1, 6): - print(i) + print(i) ``` -Což ti vypíše: +Which would print: -``` -1 -2 -3 -4 -5 -``` +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + -`range` je funkce, která vytvoří seznam s posloupností čísel (tato čísla zadáváš jako parametry funkce). +`range` is a function that creates a list of numbers following one after the other (these numbers are provided by you as parameters). -Všimni si, že druhé z těchto dvou čísel není zahrnuto v seznamu, který je výstupem Pythonu (`range (1, 6)` počítá od 1 do 5, ale nezahrnuje číslo 6). To je proto, že "range" je z poloviny otevřený, čímž myslíme, že obsahuje první hodnotu, ale ne poslední. +Note that the second of these two numbers is not included in the list that is output by Python (meaning `range(1, 6)` counts from 1 to 5, but does not include the number 6). That is because "range" is half-open, and by that we mean it includes the first value, but not the last. -## Shrnutí +## Summary -A je to. **Jsi naprosto skvělá!** To byla složitá kapitola, takže bys na sebe měla být hrdá. My jsme na tebe velmi hrdí za to, že ses dostala tak daleko! +That's it. **You totally rock!** This was a tricky chapter, so you should feel proud of yourself. We're definitely proud of you for making it this far! -Můžeš si jít krátce odpočinout - protáhnout se, projít se, zavřít oči - než se pustíme do další kapitoly. :) +For official and full python tutorial visit https://docs.python.org/3/tutorial/. This will give you a more thorough and complete study of the language. Cheers! :) -![Hrnek][3] +You might want to briefly do something else – stretch, walk around for a bit, rest your eyes – before going on to the next chapter. :) - [3]: images/cupcake.png +![Cupcake](images/cupcake.png) \ No newline at end of file diff --git a/cs/python_introduction/prompt.md b/cs/python_introduction/prompt.md new file mode 100644 index 00000000000..27f422934c0 --- /dev/null +++ b/cs/python_introduction/prompt.md @@ -0,0 +1,17 @@ +## Python prompt + +> For readers at home: this part is covered in the [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U) video. + +To start playing with Python, we need to open up a *command line* on your computer. You should already know how to do that – you learned it in the [Intro to Command Line](../intro_to_command_line/README.md) chapter. + +Once you're ready, follow the instructions below. + +We want to open up a Python console, so type in `python` on Windows or `python3` on Mac OS/Linux and hit `enter`. + +{% filename %}command-line{% endfilename %} +``` +$ python3 +Python {{ book.py_release }} (...) +Type "help", "copyright", "credits" or "license" for more information. +>>> +``` diff --git a/cs/template_extending/README.md b/cs/template_extending/README.md old mode 100755 new mode 100644 index 184c85aa05b..8585f3be2c8 --- a/cs/template_extending/README.md +++ b/cs/template_extending/README.md @@ -1,123 +1,151 @@ # Rozšiřování šablon -Další pěknou věcí, kterou pro nás Django má, je **rozšiřování šablon**. Co to znamená? To znamená, že můžeš použít stejné HTML pro různé stránky na svém blogu. +Další pěknou věcí, kterou pro nás Django má je **rozšiřování šablon**. Co to znamená? To znamená, že můžeš použít stejné HTML pro různé stránky na svém blogu. -Tímto způsobem nemusíš opakovat v každém souboru stejný kód, když chceš použít stejné informace/rozvržení. A pokud chceš něco změnit, není nutné to dělat v každé šabloně, stačí jen v jedné! +Templates help when you want to use the same information or layout in more than one place. You don't have to repeat yourself in every file. And if you want to change something, you don't have to do it in every template, just one! -## Vytvoření základní šablony +## Create a base template -Základní šablona je šablona, kterou použijeme na každé stránce našich webových stránek. +Základní šablona je šablona, kterou rozšíříme na každé stránce našich webových stránek. Vytvoříme soubor `base.html` v `blog/templates/blog/`: -``` -blog -└───templates - └───blog - base.html - post_list.html -``` + blog + └───templates + └───blog + base.html + post_list.html + + +Then open it up in the code editor and copy everything from `post_list.html` to `base.html` file, like this: -Pak jej otevři a zkopíruj vše z `post_list.html` do `base.html` souboru, jako je to níže: +{% filename %}blog/templates/blog/base.html{% endfilename %} ```html -{% load staticfiles %} +{% load static %} + - - Django Girls blog - - - - - - -
-

Django Girls Blog

-
-
-
-
- {% for post in posts %} -
-
- {{ post.published_date }} -
-

{{ post.title }}

-

{{ post.text|linebreaksbr }}

-
- {% endfor %} -
-
-
- + + Django Girls blog + + + + + +
+
+

Django Girls Blog

+
+
+ +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ -``` +``` -Pak v `base.html` nahraď celé `` (vše mezi `` a ``) tímto: +Pak v `base.html`, nahraď celé `< body >` (vše mezi `< body >` a `< / body >`) tímto: + +{% filename %}blog/templates/blog/base.html{% endfilename %} ```html -
+
+

Django Girls Blog

-
-
-
-
- {% block content %} - {% endblock %} -
-
-
+
+ +
+
+
+ {% block content %} + {% endblock %} +
+
+
``` -Nahradili jsme v podstatě všechno, co bylo mezi `{% for post in posts %}{% endfor %}`, za: +{% raw %}You might notice this replaced everything from `{% for post in posts %}` to `{% endfor %}` with: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} ```html {% block content %} {% endblock %} -``` +``` + +But why? You just created a `block`! You used the template tag `{% block %}` to make an area that will have HTML inserted in it. That HTML will come from another template that extends this template (`base.html`). Hned ti ukážeme jak to udělat. -Co to znamená? Právě jsi vytvořila `block`, což je šablonovací značka, která umožňuje vkládat HTML kód do tohoto bloku v jiných šablonách, které rozšiřují `base.html`. Hned ti ukážeme, jak to udělat. +Now save `base.html` and open your `blog/templates/blog/post_list.html` again in the code editor. {% raw %}You're going to remove everything above `{% for post in posts %}` and below `{% endfor %}`. When you're done, the file will look like this:{% endraw %} -Nyní ulož a znovu otevři svůj `blog/templates/blog/post_list.html`. Odstraň vše, co není uvnitř body, a pak také odstraň `< div class="page-header" >< / div >`, takže soubor bude vypadat takto: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html {% for post in posts %} -
-
- {{ post.published_date }} -
-

{{ post.title }}

-

{{ post.text|linebreaksbr }}

-
+
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
{% endfor %} -``` +``` + +We want to use this as part of our template for all the content blocks. Time to add block tags to this file! + +{% raw %}You want your block tag to match the tag in your `base.html` file. You also want it to include all the code that belongs in your content blocks. To do that, put everything between `{% block content %}` and `{% endblock %}`. Takto:{% endraw %} -A teď přidej na začátek souboru tento řádek: +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html -{% extends 'blog/base.html' %} -``` +{% block content %} + {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Only one thing left. We need to connect these two templates together. This is what extending templates is all about! We'll do this by adding an extends tag to the beginning of the file. Like this: -{% raw %} to znamená, že nyní rozšiřujeme šablonu `base.html` v `post_list.html`. Jen jedna věc zbývá: vše dát (kromě řádku, který jsme právě přidaly) mezi `{% block content %}` a `{% endblock %}`. Takto: {% endraw %} +{% filename %}blog/templates/blog/post_list.html{% endfilename %} ```html {% extends 'blog/base.html' %} {% block content %} {% for post in posts %} -
-
+
+
-

{{ post.title }}

+ +

{{ post.title }}

{{ post.text|linebreaksbr }}

-
+ {% endfor %} {% endblock %} -``` +``` -To je ono! Zkontroluj, zda tvoje stránky stále správně fungují :) +That's it! Save the file, and check if your website is still working properly. :) -> Jestliže dostaneš chybu `TemplateDoesNotExists`, která říká, že neexistuje žádný soubor `blog/base.html` a máš `runserver` v konzoli, zkus ho zastavit (stisknutím kombinace kláves Ctrl + C - ctrl a tlačítka C společně) a restartovat spuštěním příkazu `pythonu manage.py runserver`. +> If you get the error `TemplateDoesNotExist`, that means that there is no `blog/base.html` file and you have `runserver` running in the console. Try to stop it (by pressing Ctrl+C – the Control and C keys together) and restart it by running a `python manage.py runserver` command. \ No newline at end of file diff --git a/cs/whats_next/README.md b/cs/whats_next/README.md old mode 100755 new mode 100644 index 5c52f3bfb88..921d9685c94 --- a/cs/whats_next/README.md +++ b/cs/whats_next/README.md @@ -1,40 +1,43 @@ # Co dál? -Můžeš si pogratulovat! **Jsi naprosto úžasná**. Jsme na tebe hrdí! < 3 +Můžeš si pogratulovat! **Jsi naprosto úžasná**. Jsme na tebe hrdí! <3 ### Co mám dělat teď? -Odpočiň si a relaxuj. Právě jsi udělala něco opravdu obrovského. +Take a break and relax! You have just done something really huge. -Poté nezapomeň: +After that, make sure to follow Django Girls on [Facebook](http://facebook.com/djangogirls) or [Twitter](https://twitter.com/djangogirls) to stay up to date. -* Sleduj Django Girls na [Facebooku][1] nebo [Twitteru][2] a zůstaň v obraze +### Můžete mi doporučit nějaké další zdroje? - [1]: http://facebook.com/djangogirls - [2]: https://twitter.com/djangogirls +Yes! There are a *lot* of resources online for learning all kinds of programming skills – it can be pretty daunting to work out where to go next, but we've got you covered. Whatever your interests were before you came to Django Girls, and whatever interests you've developed throughout the tutorial, here are some free resources (or resources with large free components) you can use to get to where you want to be. -### Můžete mi doporučit nějaké další zdroje? +#### Django + +- Our other book, [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Django's official tutorial](https://docs.djangoproject.com/en/3.2/intro/tutorial01/) +- [Getting Started With Django video lessons](http://www.gettingstartedwithdjango.com/) +- [Django for Everybody Specialization](https://www.coursera.org/specializations/django) – some video lectures can be audited for free and you can earn a Coursera Certificate by taking these courses + +#### HTML, CSS and JavaScript + +- [Codecademy's web development course](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Codecademy's Python course](https://www.codecademy.com/learn/learn-python) +- [Google's Python course](https://developers.google.com/edu/python/) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) – the initial exercises are free +- [New Coder tutorials](http://newcoder.io/tutorials/) – this is a variety of practical examples of how you might use Python +- [edX](https://www.edx.org/course?search_query=python) – you can audit most courses for free, but if you want a certificate or credits towards a higher education qualification then that will cost money +- [Coursera's Python specialization](https://www.coursera.org/specializations/python) – some video lectures can be audited for free and you can earn a Coursera Certificate by taking these courses +- [Python for Everybody](https://www.py4e.com/) - a free and open version of the Coursera Python for Everybody specialization + +#### Working with data + +- [Codecademy's data science course](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – you can audit most courses for free, but if you want a certificate or credits towards a higher education qualification then that will cost money +- [Dataquest](https://www.dataquest.io/) – the first 30 "missions" are free -Ano! Zaprvé, jdi a zkus naši další knihu, jmenuje se [Django Girls Tutorial: Extensions][3]. - - [3]: https://tutorial-extensions.djangogirls.org - -Později můžeš zkusit, některý ze zdrojů uvedených níže. Všechny můžeme velmi doporučit! - -- [Django's official tutorial][4] -- [New Coder tutorials][5] -- [Code Academy Python course][6] -- [Code Academy HTML & CSS course][7] -- [Django Carrots tutorial][8] -- [Learn Python The Hard Way book][9] -- [Getting Started With Django video lessons][10] -- [Two Scoops of Django: Best Practices for Django 1.8 book][11] - - [4]: https://docs.djangoproject.com/en/1.8/intro/tutorial01/ - [5]: http://newcoder.io/tutorials/ - [6]: https://www.codecademy.com/en/tracks/python - [7]: https://www.codecademy.com/tracks/web - [8]: https://github.com/ggcarrots/django-carrots/ - [9]: http://learnpythonthehardway.org/book/ - [10]: http://www.gettingstartedwithdjango.com/ - [11]: https://twoscoopspress.com/products/two-scoops-of-django-1-8 +We can't wait to see what you build next! \ No newline at end of file